From 96d4fc249f6204ad37aedcdaf5d4fa90e2482d28 Mon Sep 17 00:00:00 2001 From: kanisorn Date: Tue, 9 Jun 2020 12:49:29 +0700 Subject: [PATCH 1/4] add uptime bar, update as new design --- scan/src/components/UptimeBar.re | 31 ++++++++++ scan/src/pages/ValidatorHomePage.re | 90 ++++++++++++++++++----------- scan/src/utils/Format.re | 2 +- 3 files changed, 88 insertions(+), 35 deletions(-) create mode 100644 scan/src/components/UptimeBar.re diff --git a/scan/src/components/UptimeBar.re b/scan/src/components/UptimeBar.re new file mode 100644 index 0000000000..1231875fae --- /dev/null +++ b/scan/src/components/UptimeBar.re @@ -0,0 +1,31 @@ +module Styles = { + open Css; + + let bar = + style([ + display(`flex), + width(`percent(100.)), + height(`px(15)), + border(`px(1), `solid, Colors.blueGray4), + borderRadius(`px(6)), + padding(`px(1)), + justifyContent(`flexStart), + ]); + + let innerBar = (percent, color) => + style([backgroundColor(color), width(`percent(percent)), borderRadius(`px(6))]); +}; + +[@react.component] +let make = (~percent) => { + let color = + if (percent == 100.) { + Colors.purple8; + } else if (percent < 100. && percent >= 79.) { + Colors.purple4; + } else { + Colors.purple2; + }; + +
; +}; diff --git a/scan/src/pages/ValidatorHomePage.re b/scan/src/pages/ValidatorHomePage.re index f1d0c34c96..f1ec4ffd93 100644 --- a/scan/src/pages/ValidatorHomePage.re +++ b/scan/src/pages/ValidatorHomePage.re @@ -9,7 +9,6 @@ module Styles = { let validatorsLogo = style([minWidth(`px(50)), marginRight(`px(10))]); let highlight = style([margin2(~v=`px(28), ~h=`zero)]); let valueContainer = style([display(`flex), justifyContent(`flexStart)]); - let monikerContainer = style([maxWidth(`px(250))]); let emptyContainer = style([ @@ -112,10 +111,11 @@ let renderBody = | Data({operatorAddress}) => operatorAddress |> Address.toOperatorBech32 | _ => rank |> string_of_int } - }> + } + minHeight=60>
- - + + {switch (validatorSub) { | Data(_) => }} - + {switch (validatorSub) { | Data({operatorAddress, moniker}) => -
- -
+ | _ => }} - + {switch (validatorSub) { | Data({tokens, votingPower}) =>
@@ -177,11 +175,11 @@ let renderBody = }} - + {switch (validatorSub) { | Data({commission}) => Js.Float.toFixedWithPrecision(~digits=2)} + value={commission |> Format.fPercent(~digits=2)} color=Colors.gray7 code=true weight=Text.Regular @@ -193,25 +191,42 @@ let renderBody = | _ => }} + {switch (validatorSub) { | Data({uptime}) => - uptime'->Js.Float.toFixedWithPrecision(~digits=2) - | None => "N/A" - } - } - color=Colors.gray7 - code=true - weight=Text.Regular - spacing={Text.Em(0.02)} - block=true - align=Text.Right - size=Text.Md - /> - | _ => + switch (uptime) { + | Some(uptime') => + <> + Format.fPercent(~digits=2)} + color=Colors.gray7 + code=true + weight=Text.Regular + spacing={Text.Em(0.02)} + block=true + size=Text.Md + /> + + + + | None => + + } + | _ => + <> + + + + }} @@ -341,7 +356,7 @@ module ValidatorList = {
- + - + - + - + + - +
diff --git a/scan/src/utils/Format.re b/scan/src/utils/Format.re index dc59ee283b..1d4eb47fcd 100644 --- a/scan/src/utils/Format.re +++ b/scan/src/utils/Format.re @@ -62,7 +62,7 @@ let fPercent = (~digits=?, value) => { ) } ) - ++ "%"; + ++ " %"; }; let iPretty = value => withCommas(value->string_of_int); From 5f0b3e4daad8771f137bc483c23737e16a59be33 Mon Sep 17 00:00:00 2001 From: kanisorn Date: Tue, 9 Jun 2020 12:51:39 +0700 Subject: [PATCH 2/4] add CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 532bf729d3..3a12c2650f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ ### Scan +- (feat) [\#1913](https://github.com/bandprotocol/bandchain/pull/1913) Add uptime bar on Validator Home Page - (imprv) [\#1900](https://github.com/bandprotocol/bandchain/pull/1900) Shorten marketcap amount on landing page - (bug) [\#1861](https://github.com/bandprotocol/bandchain/pull/1861) Fix name, endpoint of guanyu-devnet on chain-id selection. - (feat) [\#1856](https://github.com/bandprotocol/bandchain/pull/1856) Add sorting on Validator Home Page. From 3251fe13271211d3c17bbc4a7f4be78438ae0b6d Mon Sep 17 00:00:00 2001 From: kanisorn Date: Tue, 9 Jun 2020 13:30:27 +0700 Subject: [PATCH 3/4] fix uptime header alignment --- scan/src/pages/ValidatorHomePage.re | 1 + 1 file changed, 1 insertion(+) diff --git a/scan/src/pages/ValidatorHomePage.re b/scan/src/pages/ValidatorHomePage.re index f1ec4ffd93..858b36627a 100644 --- a/scan/src/pages/ValidatorHomePage.re +++ b/scan/src/pages/ValidatorHomePage.re @@ -402,6 +402,7 @@ module ValidatorList = { desc=UptimeDesc toggle sortedBy + isRight=false /> From ba6718362bc97d783ba6629aac3805be60c5bced Mon Sep 17 00:00:00 2001 From: kanisorn Date: Tue, 9 Jun 2020 14:46:29 +0700 Subject: [PATCH 4/4] adjust height to 12 --- scan/src/components/UptimeBar.re | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scan/src/components/UptimeBar.re b/scan/src/components/UptimeBar.re index 1231875fae..fff49fbc4e 100644 --- a/scan/src/components/UptimeBar.re +++ b/scan/src/components/UptimeBar.re @@ -5,7 +5,7 @@ module Styles = { style([ display(`flex), width(`percent(100.)), - height(`px(15)), + height(`px(12)), border(`px(1), `solid, Colors.blueGray4), borderRadius(`px(6)), padding(`px(1)),