Merge pull request #1913 from bandprotocol/1620-implement-uptime-new-…

…design2 Scan: implement uptime bar on validator home page
bandprotocol · Jun 9, 2020 · 9f29c9e · 9f29c9e
2 parents 195e060 + 4cf0549
commit 9f29c9e
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,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
 - (feat) [\#1888](https://github.com/bandprotocol/bandchain/pull/1888) Added OBI bindings and patched scan to use OBI standard
 - (bug) [\#1861](https://github.com/bandprotocol/bandchain/pull/1861) Fix name, endpoint of guanyu-devnet on chain-id selection

diff --git a/scan/src/components/UptimeBar.re b/scan/src/components/UptimeBar.re
@@ -0,0 +1,31 @@
+module Styles = {
+  open Css;
+
+  let bar =
+    style([
+      display(`flex),
+      width(`percent(100.)),
+      height(`px(12)),
+      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;
+    };
+
+  <div className=Styles.bar> <div className={Styles.innerBar(percent, color)} /> </div>;
+};
diff --git 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>
     <div className=Styles.fullWidth>
-      <Row>
-        <Col size=0.8>
+      <Row alignItems=`flexStart>
+        <Col size=0.4>
           {switch (validatorSub) {
            | Data(_) =>
              <Text
@@ -130,16 +130,14 @@ let renderBody =
            | _ => <LoadingCensorBar width=20 height=15 />
            }}
         </Col>
-        <Col size=1.9>
+        <Col size=0.9>
           {switch (validatorSub) {
            | Data({operatorAddress, moniker}) =>
-             <div className=Styles.monikerContainer>
-               <ValidatorMonikerLink validatorAddress=operatorAddress moniker />
-             </div>
+             <ValidatorMonikerLink validatorAddress=operatorAddress moniker width={`px(180)} />
            | _ => <LoadingCensorBar width=150 height=15 />
            }}
         </Col>
-        <Col size=1.4>
+        <Col size=0.7>
           {switch (validatorSub) {
            | Data({tokens, votingPower}) =>
              <div>
@@ -177,11 +175,11 @@ let renderBody =
              </>
            }}
         </Col>
-        <Col size=1.2>
+        <Col size=0.8>
           {switch (validatorSub) {
            | Data({commission}) =>
              <Text
-               value={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 =
            | _ => <LoadingCensorBar width=70 height=15 isRight=true />
            }}
         </Col>
+        <Col size=0.3> <HSpacing size=Spacing.sm /> </Col>
         <Col size=1.1>
           {switch (validatorSub) {
            | Data({uptime}) =>
-             <Text
-               value={
-                 switch (uptime) {
-                 | Some(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
-             />
-           | _ => <LoadingCensorBar width=70 height=15 isRight=true />
+             switch (uptime) {
+             | Some(uptime') =>
+               <>
+                 <Text
+                   value={uptime' |> Format.fPercent(~digits=2)}
+                   color=Colors.gray7
+                   code=true
+                   weight=Text.Regular
+                   spacing={Text.Em(0.02)}
+                   block=true
+                   size=Text.Md
+                 />
+                 <VSpacing size=Spacing.sm />
+                 <UptimeBar percent=uptime' />
+               </>
+             | None =>
+               <Text
+                 value="N/A"
+                 color=Colors.gray7
+                 code=true
+                 weight=Text.Regular
+                 spacing={Text.Em(0.02)}
+                 block=true
+                 size=Text.Md
+               />
+             }
+           | _ =>
+             <>
+               <LoadingCensorBar width=70 height=15 />
+               <VSpacing size=Spacing.sm />
+               <LoadingCensorBar width=220 height=15 />
+             </>
            }}
         </Col>
       </Row>
@@ -341,7 +356,7 @@ module ValidatorList = {
       <THead>
         <div className=Styles.fullWidth>
           <Row>
-            <Col size=0.8 key="RANK">
+            <Col size=0.4 key="RANK">
               <Text
                 block=true
                 value="RANK"
@@ -351,7 +366,7 @@ module ValidatorList = {
                 spacing={Text.Em(0.1)}
               />
             </Col>
-            <Col size=1.9>
+            <Col size=0.9>
               <SortableTHead
                 title="VALIDATOR"
                 asc=NameAsc
@@ -361,26 +376,34 @@ module ValidatorList = {
                 isRight=false
               />
             </Col>
-            <Col size=1.4>
+            <Col size=0.7>
               <SortableTHead
-                title="VOTING POWER (BAND)"
+                title="VOTING POWER"
                 asc=VotingPowerAsc
                 desc=VotingPowerDesc
                 toggle
                 sortedBy
               />
             </Col>
-            <Col size=1.2>
+            <Col size=0.8>
               <SortableTHead
-                title="COMMISSION (%)"
+                title="COMMISSION"
                 asc=CommissionAsc
                 desc=CommissionDesc
                 toggle
                 sortedBy
               />
             </Col>
+            <Col size=0.3> <HSpacing size=Spacing.sm /> </Col>
             <Col size=1.1>
-              <SortableTHead title="UPTIME (%)" asc=UptimeAsc desc=UptimeDesc toggle sortedBy />
+              <SortableTHead
+                title="UPTIME (LAST 250 BLOCKS)"
+                asc=UptimeAsc
+                desc=UptimeDesc
+                toggle
+                sortedBy
+                isRight=false
+              />
             </Col>
           </Row>
         </div>

diff --git 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);
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,7 +62,7 @@ let fPercent = (~digits=?, value) => { @@
           )
         }
       )
-      ++ "%";
+      ++ " %";
     };
     let iPretty = value => withCommas(value->string_of_int);