Scan: Polish UI & remove unused

CHANGELOG_UNRELEASED.md

@@ -27,6 +27,7 @@
 
 ### Scan
 
+- (impv) [\#2754](https://github.com/bandprotocol/bandchain/pull/2754) Polish UI, remove unused
 - (impv) [\#2747](https://github.com/bandprotocol/bandchain/pull/2747) Patch for fast sync and new GuanYu DB
 - (impv) [\#2740](https://github.com/bandprotocol/bandchain/pull/2740) Add UI test for all pages
 - (impv) [\#2731](https://github.com/bandprotocol/bandchain/pull/2731) Add no transaction placeholder and fix mobile margin

scan/src/AppStyle.re

@@ -94,6 +94,7 @@ video {
 p {
   font-size: 14px;
   line-height: 1.3;
+  margin-bottom: 1em;
 }
 
 h1,

scan/src/components/ChainIDBadge.re

@@ -68,6 +68,7 @@ type chainID =
   | GuanYuDevnet
   | GuanYuTestnet
   | GuanYuPOA
+  | GuanYuMainnet
   | Unknown;
 
 let parseChainID =
@@ -83,12 +84,14 @@ let parseChainID =
   | "band-guanyu-testnet2"
   | "band-guanyu-testnet3" => GuanYuTestnet
   | "band-guanyu-poa" => GuanYuPOA
+  | "band-guanyu-mainnet" => GuanYuMainnet
   | _ => Unknown;
 
 let getLink =
   fun
   | WenchangTestnet => "https://wenchang-testnet3.cosmoscan.io/"
-  | WenchangMainnet => "https://cosmoscan.io/"
+  | WenchangMainnet
+  | GuanYuMainnet => "https://cosmoscan.io/"
   | GuanYuDevnet => "https://guanyu-devnet.cosmoscan.io/"
   | GuanYuTestnet => "https://guanyu-testnet3.cosmoscan.io/"
   | GuanYuPOA => "https://guanyu-poa.cosmoscan.io/"
@@ -101,6 +104,7 @@ let getName =
   | GuanYuDevnet => "guanyu-devnet"
   | GuanYuTestnet => "guanyu-testnet"
   | GuanYuPOA => "guanyu-poa"
+  | GuanYuMainnet => "guanyu-mainnet"
   | Unknown => "unknown";
 
 [@react.component]

scan/src/pages/BlockHomePage.re

@@ -100,10 +100,7 @@ let renderBodyMobile = (reserveIndex, blockSub: ApolloHooks.Subscription.variant
 
 [@react.component]
 let make = () => {
-  let (page, setPage) = React.useState(_ => 1);
-  let pageSize = 10;
-
-  let allSub = Sub.all2(BlockSub.getList(~pageSize, ~page, ()), BlockSub.count());
+  let blocksSub = BlockSub.getList(~pageSize=10, ~page=1, ());
   let isMobile = Media.isMobile();
 
   <Section>
@@ -112,9 +109,18 @@ let make = () => {
         <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
           <Col.Grid col=Col.Twelve>
             <Heading value="All Blocks" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
-            {switch (allSub) {
-             | Data((_, blocksCount)) =>
-               <Heading value={(blocksCount |> Format.iPretty) ++ " In total"} size=Heading.H3 />
+            {switch (blocksSub) {
+             | Data(blocks) =>
+               <Heading
+                 value={
+                   blocks
+                   ->Belt.Array.get(0)
+                   ->Belt.Option.mapWithDefault(0, ({height}) => height |> ID.Block.toInt)
+                   ->Format.iPretty
+                   ++ " In total"
+                 }
+                 size=Heading.H3
+               />
              | _ => <LoadingCensorBar width=65 height=21 />
              }}
           </Col.Grid>
@@ -172,24 +178,13 @@ let make = () => {
                  </Col.Grid>
                </Row.Grid>
              </THead.Grid>}
-        {switch (allSub) {
-         | Data((blocks, blocksCount)) =>
-           let pageCount = Page.getPageCount(blocksCount, pageSize);
-           <>
-             {blocks
-              ->Belt_Array.mapWithIndex((i, e) =>
-                  isMobile
-                    ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
-                )
-              ->React.array}
-             {isMobile
-                ? React.null
-                : <Pagination
-                    currentPage=page
-                    pageCount
-                    onPageChange={newPage => setPage(_ => newPage)}
-                  />}
-           </>;
+        {switch (blocksSub) {
+         | Data(blocks) =>
+           blocks
+           ->Belt_Array.mapWithIndex((i, e) =>
+               isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
+             )
+           ->React.array
          | _ =>
            Belt_Array.make(10, ApolloHooks.Subscription.NoData)
            ->Belt_Array.mapWithIndex((i, noData) =>

scan/src/pages/ProposalHomePage.re

@@ -21,6 +21,8 @@ module Styles = {
   let badgeContainer = {
     style([Media.mobile([position(`absolute), right(`px(16)), top(`px(16))])]);
   };
+
+  let noDataImage = style([width(`auto), height(`px(70)), marginBottom(`px(16))]);
 };
 
 module ProposalCard = {
@@ -170,23 +172,34 @@ let make = () => {
       <Row.Grid>
         {switch (allSub) {
          | Data((proposals, bondedTokenCount, voteStatSub)) =>
-           proposals
-           ->Belt_Array.mapWithIndex((i, proposal) => {
-               let turnoutRate =
-                 (
-                   voteStatSub->Belt_MapInt.get(proposal.id |> ID.Proposal.toInt)
-                   |> Belt_Option.getWithDefault(_, 0.)
-                 )
-                 /. (bondedTokenCount |> Coin.getBandAmountFromCoin)
-                 *. 100.;
-               <ProposalCard
-                 key={i |> string_of_int}
-                 reserveIndex=i
-                 proposalSub={Sub.resolve(proposal)}
-                 turnoutRate
-               />;
-             })
-           ->React.array
+           proposals->Belt.Array.size > 0
+             ? proposals
+               ->Belt_Array.mapWithIndex((i, proposal) => {
+                   let turnoutRate =
+                     (
+                       voteStatSub->Belt_MapInt.get(proposal.id |> ID.Proposal.toInt)
+                       |> Belt_Option.getWithDefault(_, 0.)
+                     )
+                     /. (bondedTokenCount |> Coin.getBandAmountFromCoin)
+                     *. 100.;
+                   <ProposalCard
+                     key={i |> string_of_int}
+                     reserveIndex=i
+                     proposalSub={Sub.resolve(proposal)}
+                     turnoutRate
+                   />;
+                 })
+               ->React.array
+             : <EmptyContainer>
+                 <img src=Images.noSource className=Styles.noDataImage />
+                 <Heading
+                   size=Heading.H4
+                   value="No Proposal"
+                   align=Heading.Center
+                   weight=Heading.Regular
+                   color=Colors.bandBlue
+                 />
+               </EmptyContainer>
          | _ =>
            Belt_Array.make(pageSize, ApolloHooks.Subscription.NoData)
            ->Belt_Array.mapWithIndex((i, noData) =>

scan/src/pages/TxHomePage.re

@@ -4,6 +4,7 @@ let make = () => {
   let pageSize = 10;
 
   let txsSub = TxSub.getList(~pageSize, ~page, ());
+  let latestTxsSub = TxSub.getList(~pageSize=1, ~page=1, ());
   let txsCountSub = TxSub.count();
 
   let isMobile = Media.isMobile();
@@ -13,9 +14,18 @@ let make = () => {
       <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
         <Col.Grid col=Col.Twelve>
           <Heading value="All Transactions" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
-          {switch (txsCountSub) {
-           | Data(txsCountSub) =>
-             <Heading value={(txsCountSub |> Format.iPretty) ++ " In total"} size=Heading.H3 />
+          {switch (latestTxsSub) {
+           | Data(txs) =>
+             <Heading
+               value={
+                 txs
+                 ->Belt.Array.get(0)
+                 ->Belt.Option.mapWithDefault(0, ({id}) => id)
+                 ->Format.iPretty
+                 ++ " In total"
+               }
+               size=Heading.H3
+             />
            | _ => <LoadingCensorBar width=65 height=21 />
            }}
         </Col.Grid>

scan/src/reusable/EmptyContainer.re

@@ -1,7 +1,12 @@
 module Styles = {
   open Css;
   let emptyContainer =
-    style([justifyContent(`center), alignItems(`center), flexDirection(`column)]);
+    style([
+      justifyContent(`center),
+      alignItems(`center),
+      flexDirection(`column),
+      width(`percent(100.)),
+    ]);
 
   let height = he => style([height(he)]);
   let display = dp => style([display(dp ? `flex : `none)]);

scan/src/reusable/Markdown.re

@@ -1,4 +1,15 @@
+module Styles = {
+  open Css;
+
+  let container = style([
+    selector("a", [wordBreak(`breakAll)]),
+  ])
+}
+
+
 [@react.component]
 let make = (~value) => {
-  value->MarkedJS.marked->MarkedJS.parse;
+  <div className=Styles.container>
+    value->MarkedJS.marked->MarkedJS.parse
+  </div>
 };