Merge pull request #2312 from bandprotocol/block-index-mobile

Scan: Block index mobile
bandprotocol · Jul 26, 2020 · 4596193 · 4596193
2 parents 9ce4c4d + 249ee85
commit 4596193
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 36 deletions.
diff --git a/CHANGELOG_UNRELEASED.md b/CHANGELOG_UNRELEASED.md
@@ -23,6 +23,8 @@
 - (bugs) [\#2295](https://github.com/bandprotocol/bandchain/pull/2295) Truncate `accumulated_commission` precision.
 
 ### Scan
+
+- (impv) [\#2312](https://github.com/bandprotocol/bandchain/pull/2312) Implemented the BlockIndexPage layout for mobile view
 - (impv) [\#2310](https://github.com/bandprotocol/bandchain/pull/2310) Implemented the TxIndexpage layout for mobile view
 - (impv) [\#2305](https://github.com/bandprotocol/bandchain/pull/2305) Implement the TxHomepage layout for mobile view and adjusted the pagination on mobile view.
 - (impv) [\#2313](https://github.com/bandprotocol/bandchain/pull/2313) Added commision amount on Account Index Page

diff --git a/scan/src/components/BlockIndexTxsTable.re b/scan/src/components/BlockIndexTxsTable.re
@@ -66,43 +66,78 @@ let renderBody = (reserveIndex, txSub: ApolloHooks.Subscription.variant(TxSub.t)
   </TBody>;
 };
 
+let renderBodyMobile = (reserveIndex, txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
+  switch (txSub) {
+  | Data({txHash, gasFee, success, messages, errMsg}) =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("TX HASH", TxHash(txHash, 200)),
+        ("GAS FEE\n(BAND)", Coin({value: gasFee, hasDenom: false})),
+        ("ACTIONS", Messages(txHash, messages, success, errMsg)),
+      ]
+      key={txHash |> Hash.toHex}
+      idx={txHash |> Hash.toHex}
+      status=success
+    />
+  | _ =>
+    <MobileCard
+      values=InfoMobileCard.[
+        ("TX HASH", Loading(200)),
+        ("GAS FEE\n(BAND)", Loading(60)),
+        ("ACTIONS", Loading(230)),
+      ]
+      key={reserveIndex |> string_of_int}
+      idx={reserveIndex |> string_of_int}
+    />
+  };
+};
+
 [@react.component]
 let make = (~txsSub: ApolloHooks.Subscription.variant(array(TxSub.t))) => {
+  let isMobile = Media.isMobile();
   <>
-    <THead>
-      <Row>
-        <HSpacing size={`px(20)} />
-        <Col size=1.67>
-          <div className=Styles.fullWidth>
-            <Text value="TX HASH" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
-          </div>
-        </Col>
-        <Col size=1.05>
-          <div className=Styles.fullWidth>
-            <AutoSpacing dir="left" />
-            <Text value="GAS FEE (BAND)" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
-            <HSpacing size={`px(20)} />
-          </div>
-        </Col>
-        <Col> <div className=Styles.container /> </Col>
-        <Col size=5.>
-          <div className=Styles.fullWidth>
-            <Text value="ACTIONS" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
-          </div>
-        </Col>
-        <HSpacing size={`px(20)} />
-      </Row>
-    </THead>
+    {isMobile
+       ? React.null
+       : <THead>
+           <Row>
+             <HSpacing size={`px(20)} />
+             <Col size=1.67>
+               <div className=Styles.fullWidth>
+                 <Text value="TX HASH" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
+               </div>
+             </Col>
+             <Col size=1.05>
+               <div className=Styles.fullWidth>
+                 <AutoSpacing dir="left" />
+                 <Text value="GAS FEE (BAND)" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
+                 <HSpacing size={`px(20)} />
+               </div>
+             </Col>
+             <Col> <div className=Styles.container /> </Col>
+             <Col size=5.>
+               <div className=Styles.fullWidth>
+                 <Text value="ACTIONS" size=Text.Sm weight=Text.Bold color=Colors.gray6 />
+               </div>
+             </Col>
+             <HSpacing size={`px(20)} />
+           </Row>
+         </THead>}
     {switch (txsSub) {
      | Data(txs) =>
        txs->Belt.Array.size > 0
-         ? txs->Belt_Array.mapWithIndex((i, e) => renderBody(i, Sub.resolve(e)))->React.array
+         ? txs
+           ->Belt_Array.mapWithIndex((i, e) =>
+               isMobile ? renderBodyMobile(i, Sub.resolve(e)) : renderBody(i, Sub.resolve(e))
+             )
+           ->React.array
          : <div className=Styles.emptyContainer>
              <img src=Images.noTransaction className=Styles.noTransactionLogo />
            </div>
      | _ =>
        Belt_Array.make(10, ApolloHooks.Subscription.NoData)
-       ->Belt_Array.mapWithIndex((i, noData) => renderBody(i, noData))
+       ->Belt_Array.mapWithIndex((i, noData) =>
+           isMobile ? renderBodyMobile(i, noData) : renderBody(i, noData)
+         )
        ->React.array
      }}
   </>;

diff --git a/scan/src/pages/BlockIndexPage.re b/scan/src/pages/BlockIndexPage.re
@@ -10,6 +10,15 @@ module Styles = {
 
   let blockLogo = style([minWidth(`px(50)), marginRight(`px(10))]);
 
+  let infoContainerFullwidth =
+    style([
+      Media.mobile([
+        selector("> div", [flexBasis(`percent(100.))]),
+        selector("> div + div", [marginTop(`px(15))]),
+        selector("> div > div > div", [display(`block)]),
+      ]),
+    ]);
+
   let seperatedLine =
     style([
       width(`px(13)),
@@ -24,6 +33,7 @@ module Styles = {
 
 [@react.component]
 let make = (~height) => {
+  let isMobile = Media.isMobile();
   let (page, setPage) = React.useState(_ => 1);
   let pageSize = 10;
 
@@ -57,19 +67,29 @@ let make = (~height) => {
     <div className=Styles.blockHash>
       {switch (blockSub) {
        | Data({hash}) =>
-         <Text
-           value={hash |> Hash.toHex(~upper=true)}
-           size=Text.Xxl
-           nowrap=true
-           ellipsis=true
-           code=true
-           weight=Text.Bold
-         />
+         isMobile
+           ? <Text
+               value={hash |> Hash.toHex(~upper=true)}
+               size=Text.Lg
+               weight=Text.Bold
+               nowrap=false
+               breakAll=true
+               code=true
+               color=Colors.gray7
+             />
+           : <Text
+               value={hash |> Hash.toHex(~upper=true)}
+               size=Text.Xxl
+               nowrap=true
+               ellipsis=true
+               code=true
+               weight=Text.Bold
+             />
        | _ => <LoadingCensorBar width=700 height=15 />
        }}
     </div>
     <VSpacing size=Spacing.lg />
-    <Row minHeight={`px(40)}>
+    <Row wrap=true style=Styles.infoContainerFullwidth>
       <Col size=1.8>
         {switch (blockSub) {
          | Data({txn}) => <InfoHL info={InfoHL.Count(txn)} header="TRANSACTIONS" />
@@ -79,7 +99,7 @@ let make = (~height) => {
       <Col size=4.6>
         {switch (blockSub) {
          | Data({timestamp}) => <InfoHL info={InfoHL.Timestamp(timestamp)} header="TIMESTAMP" />
-         | _ => <InfoHL info={InfoHL.Loading(370)} header="TIMESTAMP" />
+         | _ => <InfoHL info={InfoHL.Loading(isMobile ? 240 : 370)} header="TIMESTAMP" />
          }}
       </Col>
       <Col size=3.2>