scan: added helper tooltip

CHANGELOG.md

@@ -27,7 +27,9 @@
 
 ### Scan
 
+- (bug) [\#1918](https://github.com/bandprotocol/bandchain/pull/1918) Fix UI overlap, word, chainIDBadge
 - (feat) [\#1913](https://github.com/bandprotocol/bandchain/pull/1913) Add uptime bar on Validator Home Page
+- (imprv) [\#1904](https://github.com/bandprotocol/bandchain/pull/1904) Added helper tooltips.
 - (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

scan/package.json

@@ -11,6 +11,7 @@
     "@glennsl/bs-json": "^5.0.2",
     "@ledgerhq/hw-transport-webusb": "^5.15.0",
     "@sentry/browser": "^5.16.1",
+    "@material-ui/core": "^4.10.1",
     "axios": "^0.19.2",
     "axios-hook": "^0.0.6",
     "axios-hooks": "^1.10.0",

scan/src/bindings/MaterialUI.re

@@ -0,0 +1,24 @@
+[@bs.obj]
+external makeProps:
+  (
+    ~children: React.element,
+    ~title: React.element,
+    ~placement: string,
+    ~arrow: bool,
+    ~leaveDelay: int,
+    unit
+  ) =>
+  _ =
+  "";
+
+[@bs.module "@material-ui/core"]
+external make:
+  React.component({
+    .
+    "children": React.element,
+    "title": React.element,
+    "placement": string,
+    "arrow": bool,
+    "leaveDelay": int,
+  }) =
+  "Tooltip";

scan/src/components/modal/ValidatorStakingInfo.re

@@ -63,10 +63,18 @@ module Styles = {
     ]);
 };
 
-let stakingBalanceDetail = (title, amount, usdPrice) => {
+let stakingBalanceDetail = (title, amount, usdPrice, tooltipItem) => {
   <Row alignItems=Css.flexStart>
     <Col size=1.2>
-      <Text value=title size=Text.Sm height={Text.Px(18)} spacing={Text.Em(0.03)} nowrap=true />
+      <Text
+        value=title
+        size=Text.Sm
+        height={Text.Px(18)}
+        spacing={Text.Em(0.03)}
+        nowrap=true
+        tooltipItem={tooltipItem |> React.string}
+        tooltipPlacement=Text.AlignRight
+      />
     </Col>
     <Col size=0.6>
       <div className=Styles.cFlex>
@@ -160,7 +168,9 @@ module StakingInfo = {
         {isReachUnbondingLimit
            ? <div>
                <div className=Styles.warning>
-                 <Text value="Warning: You have reached the maximum number (7) of pending delegation unbonding entries." />
+                 <Text
+                   value="Warning: You have reached the maximum number (7) of pending delegation unbonding entries."
+                 />
                </div>
                <VSpacing size=Spacing.lg />
              </div>
@@ -195,9 +205,19 @@ module StakingInfo = {
           </button>
         </Row>
         <VSpacing size=Spacing.lg />
-        {stakingBalanceDetail("BALANCE AT STAKE", balanceAtStakeAmount, usdPrice)}
+        {stakingBalanceDetail(
+           "BALANCE AT STAKE",
+           balanceAtStakeAmount,
+           usdPrice,
+           "Balance currently delegated to validators",
+         )}
         <VSpacing size=Spacing.lg />
-        {stakingBalanceDetail("UNBONDING AMOUNT", unbondingAmount, usdPrice)}
+        {stakingBalanceDetail(
+           "UNBONDING AMOUNT",
+           unbondingAmount,
+           usdPrice,
+           "Amount undelegated from validators awaiting 21 days lockup period",
+         )}
         {unbondingList |> Belt_Array.length > 0
            ? <>
                <VSpacing size=Spacing.md />
@@ -232,7 +252,12 @@ module StakingInfo = {
              </>
            : React.null}
         <VSpacing size=Spacing.lg />
-        {stakingBalanceDetail("REWARD", rewardAmount, usdPrice)}
+        {stakingBalanceDetail(
+           "REWARD",
+           rewardAmount,
+           usdPrice,
+           "Reward from staking to validators",
+         )}
       </div>
       |> Sub.resolve;
     }

scan/src/pages/AccountIndexPage.re

@@ -54,11 +54,19 @@ module Styles = {
     ]);
 };
 
-let balanceDetail = (title, amount, usdPrice, color) => {
+let balanceDetail = (title, description, amount, usdPrice, color) => {
   <Row alignItems=Css.flexStart>
     <Col size=0.25> <div className={Styles.ovalIcon(color)} /> </Col>
     <Col size=1.2>
-      <Text value=title size=Text.Sm height={Text.Px(18)} spacing={Text.Em(0.03)} nowrap=true />
+      <Text
+        value=title
+        size=Text.Sm
+        height={Text.Px(18)}
+        spacing={Text.Em(0.03)}
+        nowrap=true
+        tooltipItem={description |> React.string}
+        tooltipPlacement=Text.AlignBottomStart
+      />
     </Col>
     <Col size=0.6>
       <div className=Styles.cFlex>
@@ -204,21 +212,40 @@ let make = (~address, ~hashtag: Route.account_tab_t) =>
         </Col>
         <Col size=1.>
           <VSpacing size=Spacing.md />
-          {balanceDetail("AVAILABLE BALANCE", availableBalance, usdPrice, Colors.bandBlue)}
+          {balanceDetail(
+             "AVAILABLE BALANCE",
+             "Balance available to send, delegate, etc",
+             availableBalance,
+             usdPrice,
+             Colors.bandBlue,
+           )}
           <VSpacing size=Spacing.lg />
           <VSpacing size=Spacing.md />
           {balanceDetail(
              "BALANCE AT STAKE",
+             "Balance currently delegated to validators",
              balanceAtStakeAmount,
              usdPrice,
              Colors.chartBalanceAtStake,
            )}
           <VSpacing size=Spacing.lg />
           <VSpacing size=Spacing.md />
-          {balanceDetail("UNBONDING AMOUNT", unbondingAmount, usdPrice, Colors.blue4)}
+          {balanceDetail(
+             "UNBONDING AMOUNT",
+             "Amount undelegated from validators awaiting 21 days lockup period",
+             unbondingAmount,
+             usdPrice,
+             Colors.blue4,
+           )}
           <VSpacing size=Spacing.lg />
           <VSpacing size=Spacing.md />
-          {balanceDetail("REWARD", rewardAmount, usdPrice, Colors.chartReward)}
+          {balanceDetail(
+             "REWARD",
+             "Reward from staking to validators",
+             rewardAmount,
+             usdPrice,
+             Colors.chartReward,
+           )}
         </Col>
         <div className=Styles.separatorLine />
         <Col size=1. alignSelf=Col.Start>

scan/src/pages/ValidatorHomePage.re

@@ -318,7 +318,17 @@ let sorting = (validators: array(ValidatorSub.t), sortedBy) => {
 
 module SortableTHead = {
   [@react.component]
-  let make = (~title, ~asc, ~desc, ~toggle, ~sortedBy, ~isRight=true) => {
+  let make =
+      (
+        ~title,
+        ~asc,
+        ~desc,
+        ~toggle,
+        ~sortedBy,
+        ~isRight=true,
+        ~tooltipItem=?,
+        ~tooltipPlacement=Text.AlignBottomStart,
+      ) => {
     <div className={Styles.sortableTHead(isRight)} onClick={_ => toggle(asc, desc)}>
       <Text
         block=true
@@ -327,6 +337,8 @@ module SortableTHead = {
         weight=Text.Semibold
         color=Colors.gray6
         spacing={Text.Em(0.1)}
+        tooltipItem={tooltipItem->Belt_Option.mapWithDefault(React.null, React.string)}
+        tooltipPlacement
       />
       <HSpacing size=Spacing.xs />
       {if (sortedBy == asc) {
@@ -383,6 +395,7 @@ module ValidatorList = {
                 desc=VotingPowerDesc
                 toggle
                 sortedBy
+                tooltipItem="Sum of self-bonded and delegated tokens"
               />
             </Col>
             <Col size=0.8>
@@ -392,6 +405,7 @@ module ValidatorList = {
                 desc=CommissionDesc
                 toggle
                 sortedBy
+                tooltipItem="Validator service fees charged to delegators"
               />
             </Col>
             <Col size=0.3> <HSpacing size=Spacing.sm /> </Col>
@@ -403,6 +417,7 @@ module ValidatorList = {
                 toggle
                 sortedBy
                 isRight=false
+                tooltipItem="Percentage of the blocks that the validator is active for out of the last 250"
               />
             </Col>
           </Row>

scan/src/pages/ValidatorIndexPage.re

@@ -50,10 +50,12 @@ type value_row_t =
   | VExtLink(string)
   | VCode(string);
 
-let kvRow = (k, v: value_row_t) => {
+let kvRow = (k, description, v: value_row_t) => {
   <Row alignItems=`flexStart>
     <Col size=1.>
-      <div className={Styles.fullWidth(`row)}> <Text value=k weight=Text.Thin /> </div>
+      <div className={Styles.fullWidth(`row)}>
+        <Text value=k weight=Text.Thin tooltipItem=description tooltipPlacement=Text.AlignRight />
+      </div>
     </Col>
     <Col size=1. justifyContent=Col.Center alignItems=Col.End>
       <div className={Styles.fullWidth(`row)}>
@@ -81,8 +83,26 @@ module Uptime = {
       let%Sub uptimeOpt = ValidatorSub.getUptime(consensusAddress);
 
       switch (uptimeOpt) {
-      | Some(uptime) => kvRow("UPTIME", VCode(uptime->Format.fPercent)) |> Sub.resolve
-      | None => kvRow("UPTIME", VText("N/A")) |> Sub.resolve
+      | Some(uptime) =>
+        kvRow(
+          "UPTIME (LAST 250 BLOCKS)",
+          {
+            "Percentage of the blocks that the validator is active for out of the last 250"
+            |> React.string;
+          },
+          VCode(uptime->Format.fPercent),
+        )
+        |> Sub.resolve
+      | None =>
+        kvRow(
+          "UPTIME (LAST 250 BLOCKS)",
+          {
+            "Percentage of the blocks that the validator is active for out of the last 250"
+            |> React.string;
+          },
+          VText("N/A"),
+        )
+        |> Sub.resolve
       };
     }
     |> Sub.default(_, React.null);
@@ -140,12 +160,27 @@ let make = (~address, ~hashtag: Route.validator_tab_t) =>
       <div className=Styles.topPartWrapper>
         <Text value="INFORMATION" size=Text.Lg weight=Text.Semibold />
         <VSpacing size=Spacing.lg />
-        {kvRow("OPERATOR ADDRESS", VValidatorAddress(address))}
+        {kvRow(
+           "OPERATOR ADDRESS",
+           {
+             "The address used to show the entity's validator status" |> React.string;
+           },
+           VValidatorAddress(address),
+         )}
         <VSpacing size=Spacing.lg />
-        {kvRow("ADDRESS", VAddress(address))}
+        {kvRow(
+           "ADDRESS",
+           {
+             "The entity's unique address" |> React.string;
+           },
+           VAddress(address),
+         )}
         <VSpacing size=Spacing.lg />
         {kvRow(
            "VOTING POWER",
+           {
+             "Sum of self-bonded and delegated tokens" |> React.string;
+           },
            VCode(
              (bondedTokenCount > 0. ? validator.votingPower *. 100. /. bondedTokenCount : 0.)
              ->Format.fPretty
@@ -155,15 +190,39 @@ let make = (~address, ~hashtag: Route.validator_tab_t) =>
            ),
          )}
         <VSpacing size=Spacing.lg />
-        {kvRow("COMMISSION", VCode(validator.commission->Format.fPercent))}
+        {kvRow(
+           "COMMISSION",
+           {
+             "Validator service fees charged to delegators" |> React.string;
+           },
+           VCode(validator.commission->Format.fPercent),
+         )}
         <VSpacing size=Spacing.lg />
-        {kvRow("BONDED HEIGHT", VCode(validator.bondedHeight->Format.iPretty))}
+        {kvRow(
+           "BONDED HEIGHT",
+           {
+             "The block height at which the entity registers as a validator" |> React.string;
+           },
+           VCode(validator.bondedHeight->Format.iPretty),
+         )}
         <VSpacing size=Spacing.lg />
         <Uptime consensusAddress={validator.consensusAddress} />
         <VSpacing size=Spacing.lg />
-        {kvRow("WEBSITE", VExtLink(validator.website))}
+        {kvRow(
+           "WEBSITE",
+           {
+             "The validator's website" |> React.string;
+           },
+           VExtLink(validator.website),
+         )}
         <VSpacing size=Spacing.lg />
-        {kvRow("DETAILS", VDetail(validator.details))}
+        {kvRow(
+           "DETAILS",
+           {
+             "Extra self-added detail about the validator" |> React.string;
+           },
+           VDetail(validator.details),
+         )}
       </div>
       // <div className=Styles.longLine />
       // <div className={Styles.fullWidth(`row)}>