scan: implement implement proposed blocks and delegators tables for ValidatorIndexPage mobile version

CHANGELOG_UNRELEASED.md

@@ -27,6 +27,7 @@
 - (feat) [\#2294](https://github.com/bandprotocol/bandchain/pull/2294) Implemented top part of `ValidatorIndexPage` for mobile
 - (impv) [\#2299](https://github.com/bandprotocol/bandchain/pull/2299) Update the latest transactions table for mobile version.
 - (bugs) [\#2290](https://github.com/bandprotocol/bandchain/pull/2290) Fix average block time calculation on `ValidatorHomePage` when using new cacher
+- (feat) [\#2296](https://github.com/bandprotocol/bandchain/pull/2296) Implemented delegators and proposed blocks table in `ValidatorIndexPage` mobile version
 
 ### Bridges
 

scan/src/components/SearchBar.re

@@ -9,7 +9,12 @@ module Styles = {
       position(`relative),
       marginLeft(Spacing.lg),
       marginTop(Spacing.xs),
-      Media.mobile([margin(`zero), display(`flex), padding2(~v=`zero, ~h=`px(10))]),
+      Media.mobile([
+        margin(`zero),
+        display(`flex),
+        padding2(~v=`zero, ~h=`px(10)),
+        maxWidth(`percent(100.)),
+      ]),
     ]);
   let searchIcon =
     style([
@@ -50,6 +55,7 @@ module Styles = {
       color(rgba(51, 51, 51, 0.54)),
       cursor(`pointer),
       border(`zero, `solid, white),
+      Media.mobile([right(`px(10))]),
     ]);
 };
 

scan/src/components/TopBar.re

@@ -145,7 +145,7 @@ module MobileRender = {
           </LinkToHome>
         </Col>
       </Row>
-      <Row>
+      <Row justify=Row.Right>
         <Col> <ChainIDBadge /> </Col>
         <Col> <HSpacing size=Spacing.xs /> </Col>
         <Col> <NavBar /> </Col>

scan/src/components/validator/DelegatorsTable.re

@@ -18,6 +18,8 @@ module Styles = {
 
   let fillLeft = style([marginLeft(`auto)]);
   let pagination = style([height(`px(30))]);
+
+  let mobileCount = style([padding2(~v=`px(25), ~h=`zero), display(`flex)]);
 };
 
 module Header = {
@@ -101,16 +103,86 @@ module Loading = {
   };
 };
 
-[@react.component]
-let make = (~address) => {
+let renderBodyMobile =
+    (reserveIndex, delegatorSub: ApolloHooks.Subscription.variant(DelegationSub.stake_t)) => {
+  switch (delegatorSub) {
+  | Data({amount, sharePercentage, delegatorAddress}) =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("DELEGATOR", Address(delegatorAddress, 149)),
+        ("SHARES (%)", Float(sharePercentage)),
+        ("AMOUNT\n(BAND)", Float(amount |> Coin.getBandAmountFromCoin)),
+      ]
+      key={delegatorAddress |> Address.toBech32}
+      idx={delegatorAddress |> Address.toBech32}
+    />
+  | _ =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("DELEGATOR", Loading(150)),
+        ("SHARES (%)", Loading(60)),
+        ("AMOUNT\n(BAND)", Loading(80)),
+      ]
+      key={reserveIndex |> string_of_int}
+      idx={reserveIndex |> string_of_int}
+    />
+  };
+};
+
+module MobileLoading = {
+  [@react.component]
+  let make = () => {
+    Belt_Array.make(10, ApolloHooks.Subscription.NoData)
+    ->Belt_Array.mapWithIndex((i, noData) => renderBodyMobile(i, noData))
+    ->React.array;
+  };
+};
+
+let renderMobile = (~address) => {
   let (page, setPage) = React.useState(_ => 1);
   let pageSize = 10;
-
   let delegatorsSub = DelegationSub.getDelegatorsByValidator(address, ~pageSize, ~page, ());
   let delegatorCountSub = DelegationSub.getDelegatorCountByValidator(address);
 
   let allSub = Sub.all2(delegatorCountSub, delegatorsSub);
+  <>
+    <Row>
+      <div className=Styles.mobileCount>
+        {switch (allSub) {
+         | Data((delegatorCount, _)) =>
+           <>
+             <Text value={delegatorCount |> string_of_int} weight=Text.Bold />
+             <HSpacing size={`px(5)} />
+             <Text value="Delegators" />
+           </>
+         | _ => <LoadingCensorBar width=100 height=20 />
+         }}
+      </div>
+    </Row>
+    {switch (allSub) {
+     | Data((delegatorCount, delegators)) =>
+       let pageCount = Page.getPageCount(delegatorCount, pageSize);
+       <>
+         {delegators
+          ->Belt_Array.mapWithIndex((i, e) => renderBodyMobile(i, Sub.resolve(e)))
+          ->React.array}
+         <VSpacing size=Spacing.md />
+         <Pagination currentPage=page pageCount onPageChange={newPage => setPage(_ => newPage)} />
+       </>;
+     | _ => <MobileLoading />
+     }}
+    <VSpacing size=Spacing.lg />
+  </>;
+};
+
+let renderDesktop = (~address) => {
+  let (page, setPage) = React.useState(_ => 1);
+  let pageSize = 10;
 
+  let delegatorsSub = DelegationSub.getDelegatorsByValidator(address, ~pageSize, ~page, ());
+  let delegatorCountSub = DelegationSub.getDelegatorCountByValidator(address);
+
+  let allSub = Sub.all2(delegatorCountSub, delegatorsSub);
   <div className=Styles.tableWrapper>
     <Row>
       <HSpacing size={`px(25)} />
@@ -188,3 +260,8 @@ let make = (~address) => {
      }}
   </div>;
 };
+
+[@react.component]
+let make = (~address, ~isMobile) => {
+  isMobile ? renderMobile(~address) : renderDesktop(~address);
+};

scan/src/components/validator/ProposedBlocksTableMobile.re

@@ -0,0 +1,50 @@
+let renderBodyMobile = (reserveIndex, blockSub: ApolloHooks.Subscription.variant(BlockSub.t)) => {
+  switch (blockSub) {
+  | Data({height, timestamp, txn}) =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("BLOCK", Height(height)),
+        ("TIMESTAMP", Timestamp(timestamp)),
+        ("TXN", Count(txn)),
+      ]
+      key={height |> ID.Block.toString}
+      idx={height |> ID.Block.toString}
+    />
+  | _ =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("BLOCK", Loading(70)),
+        ("TIMESTAMP", Loading(166)),
+        ("TXN", Loading(20)),
+      ]
+      key={reserveIndex |> string_of_int}
+      idx={reserveIndex |> string_of_int}
+    />
+  };
+};
+
+module Loading = {
+  [@react.component]
+  let make = () => {
+    Belt_Array.make(10, ApolloHooks.Subscription.NoData)
+    ->Belt_Array.mapWithIndex((i, noData) => renderBodyMobile(i, noData))
+    ->React.array;
+  };
+};
+
+[@react.component]
+let make = (~consensusAddress) => {
+  let blocksSub =
+    BlockSub.getListByConsensusAddress(~address=consensusAddress, ~pageSize=10, ~page=1, ());
+  <>
+    <VSpacing size=Spacing.md />
+    <VSpacing size=Spacing.sm />
+    {switch (blocksSub) {
+     | Data(blocks) =>
+       blocks
+       ->Belt_Array.mapWithIndex((i, e) => renderBodyMobile(i, Sub.resolve(e)))
+       ->React.array
+     | _ => <Loading />
+     }}
+  </>;
+};

scan/src/pages/ValidatorIndexPage.re

@@ -473,7 +473,7 @@ module RenderDesktop = {
              <ProposedBlocksTable consensusAddress={validator.consensusAddress} />
            | _ => <ProposedBlocksTable.LoadingWithHeader />
            }
-         | Delegators => <DelegatorsTable address />
+         | Delegators => <DelegatorsTable address isMobile=false />
          | Reports => <ReportsTable address />
          }}
       </Tab>
@@ -660,6 +660,28 @@ module RenderMobile = {
          )}
         <VSpacing size=Spacing.lg />
       </div>
+      <VSpacing size=Spacing.md />
+      <Tab
+        tabs=[|
+          {
+            name: "PROPOSED BLOCKS",
+            route: Route.ValidatorIndexPage(address, Route.ProposedBlocks),
+          },
+          {name: "DELEGATORS", route: Route.ValidatorIndexPage(address, Route.Delegators)},
+          {name: "REPORTS", route: Route.ValidatorIndexPage(address, Route.Reports)},
+        |]
+        currentRoute={Route.ValidatorIndexPage(address, hashtag)}>
+        {switch (hashtag) {
+         | ProposedBlocks =>
+           switch (validatorSub) {
+           | Data(validator) =>
+             <ProposedBlocksTableMobile consensusAddress={validator.consensusAddress} />
+           | _ => <ProposedBlocksTableMobile.Loading />
+           }
+         | Delegators => <DelegatorsTable address isMobile=true />
+         | Reports => <ReportsTable address />
+         }}
+      </Tab>
     </>;
   };
 };

scan/src/reusable/InfoMobileCard.re

@@ -1,6 +1,8 @@
 type t =
+  | Address(Address.t, int)
   | Height(ID.Block.t)
   | Count(int)
+  | Float(float)
   | Timestamp(MomentRe.Moment.t)
   | TxHash(Hash.t, int)
   | Validator(Address.t, string, string)
@@ -10,11 +12,18 @@ type t =
 module Styles = {
   open Css;
   let vFlex = style([display(`flex), alignItems(`center)]);
+  let addressContainer = w => {
+    style([width(`px(w))]);
+  };
 };
 
 [@react.component]
 let make = (~info) => {
   switch (info) {
+  | Address(address, width) =>
+    <div className={Styles.addressContainer(width)}>
+      <AddressRender address position=AddressRender.Text clickable=true />
+    </div>
   | Height(height) =>
     <div className=Styles.vFlex> <TypeID.Block id=height position=TypeID.Subtitle /> </div>
   | Count(value) =>
@@ -25,6 +34,8 @@ let make = (~info) => {
       spacing={Text.Em(0.02)}
       code=true
     />
+  | Float(value) =>
+    <Text value={value |> Format.fPretty} size=Text.Md spacing={Text.Em(0.02)} code=true />
   | Timestamp(time) => <Timestamp time size=Text.Md weight=Text.Regular code=true />
   | Validator(address, moniker, identity) =>
     <ValidatorMonikerLink

scan/src/reusable/MobileCard.re

@@ -31,13 +31,19 @@ let make = (~values, ~idx, ~status=?) => {
      ->Belt_List.mapWithIndex((index, (heading, value)) => {
          <div className=Styles.cardItem key={idx ++ (index |> string_of_int)}>
            <div className=Styles.cardItemHeading>
-             <Text
-               value=heading
-               size=Text.Xs
-               weight=Text.Semibold
-               color=Colors.gray6
-               spacing={Text.Em(0.1)}
-             />
+             {heading
+              ->Js.String2.split("\n")
+              ->Belt.Array.map(each =>
+                  <Text
+                    key=each
+                    value=each
+                    size=Text.Xs
+                    weight=Text.Semibold
+                    color=Colors.gray6
+                    spacing={Text.Em(0.1)}
+                  />
+                )
+              ->React.array}
            </div>
            <div> <InfoMobileCard info=value /> </div>
          </div>

scan/src/reusable/Tab.re

@@ -5,13 +5,15 @@ module Styles = {
     style([
       backgroundColor(Colors.white),
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(10), Css.rgba(0, 0, 0, 0.08))),
+      Media.mobile([margin2(~h=`px(-16), ~v=`zero)]),
     ]);
   let header =
     style([
       backgroundColor(Colors.white),
       padding2(~v=`zero, ~h=`px(20)),
       borderBottom(`px(1), `solid, Colors.gray4),
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(10), Css.rgba(0, 0, 0, 0.08))),
+      Media.mobile([overflow(`auto)]),
     ]);
 
   let buttonContainer = active =>
@@ -24,9 +26,14 @@ module Styles = {
       padding2(~v=Spacing.md, ~h=`px(20)),
       borderBottom(`pxFloat(1.5), `solid, active ? Colors.bandBlue : Colors.white),
       textShadow(Shadow.text(~blur=`pxFloat(active ? 1. : 0.), Colors.bandBlue)),
+      Media.mobile([whiteSpace(`nowrap)]),
     ]);
 
-  let childrenContainer = style([backgroundColor(Colors.blueGray1)]);
+  let childrenContainer =
+    style([
+      backgroundColor(Colors.blueGray1),
+      Media.mobile([padding2(~h=`px(16), ~v=`zero)]),
+    ]);
 };
 
 let button = (~name, ~route, ~active) => {