Scan: implement revamp guanyu on block home page

CHANGELOG_UNRELEASED.md

@@ -22,6 +22,7 @@
 ### Scan
 
 - (impv) [\#2561](https://github.com/bandprotocol/bandchain/pull/2561) Implemented the new layout for Validator Homepage
+- (impv) [\#2560](https://github.com/bandprotocol/bandchain/pull/2560) Refactor, improve Block Home Page for revamp GuanYu version
 - (impv) [\#2557](https://github.com/bandprotocol/bandchain/pull/2557) Fix and clean up copy button
 - (impv) [\#2552](https://github.com/bandprotocol/bandchain/pull/2552) Wire up related data source, handle nullable timestamp
 - (impv) [\#2550](https://github.com/bandprotocol/bandchain/pull/2550) Polish request index page

scan/src/components/HistoricalBondedGraph.re

@@ -12,9 +12,7 @@ module Styles = {
       justifyContent(`center),
       alignItems(`center),
       backgroundColor(white),
-    ]);
-
-  let loadingBox = style([width(`percent(100.))]);
+    ])
 
   let chart = show => style([important(display(show ? `block : `none))]);
 };
@@ -173,6 +171,6 @@ let make = (~operatorAddress) => {
            </div>
          : React.null}
     </div>;
-  | _ => <LoadingCensorBar width=100 height=180 style=Styles.loadingBox />
+  | _ => <LoadingCensorBar fullWidth=true height=180 />
   };
 };

scan/src/components/LoadingCensorBar.re

@@ -42,24 +42,31 @@ module Styles = {
     ]);
 
   let alignRight = style([marginLeft(`auto)]);
+  let fullWidth = style([width(`percent(100.))]);
+  let mt = (~size, ()) => style([marginTop(`px(size))]);
+  let mb = (~size, ()) => style([marginBottom(`px(size))]);
 };
 
 [@react.component]
 let make =
     (
-      ~width,
+      ~width=100,
       ~height,
+      ~fullWidth=false,
       ~radius=4,
       ~colorBase=Colors.blueGray2,
       ~colorLighter=Colors.blueGray1,
       ~isRight=false,
-      ~style="",
+      ~mt=0,
+      ~mb=0,
     ) => {
   <div
     className={Css.merge([
       Styles.main(~w=width, ~h=height, ~r=radius, ~colorBase, ~colorLighter, ()),
+      Styles.mt(~size=mt, ()),
+      Styles.mb(~size=mb, ()),
       isRight ? Styles.alignRight : "",
-      style,
+      fullWidth ? Styles.fullWidth : "",
     ])}
   />;
 };

scan/src/components/TotalRequestsGraph.re

@@ -31,8 +31,6 @@ module Styles = {
       display(show ? `flex : `none),
     ]);
 
-  let loadingBox = style([width(`percent(100.))]);
-
   let chart = show => style([important(display(show ? `block : `none))]);
 };
 
@@ -215,7 +213,7 @@ let make = () => {
            />
          </div>
        </div>;
-     | _ => <LoadingCensorBar width=100 height=200 style=Styles.loadingBox />
+     | _ => <LoadingCensorBar fullWidth=true height=200 />
      }}
   </div>;
 };

scan/src/components/charts/BlockUptimeChart.re

@@ -49,8 +49,6 @@ module Styles = {
         ),
       ]),
     ]);
-
-  let loadingBox = style([width(`percent(100.))]);
 };
 
 module UptimeBlock = {
@@ -87,7 +85,7 @@ let make = (~consensusAddress) => {
                  <UptimeBlock key={blockHeight |> ID.Block.toString} status height=blockHeight />
                )
              ->React.array
-           | _ => <LoadingCensorBar width=400 height=90 style=Styles.loadingBox />
+           | _ => <LoadingCensorBar fullWidth=true height=90  />
            }}
         </div>
       </Col.Grid>

scan/src/components/charts/OracleDataReportChart.re

@@ -1,6 +1,5 @@
 module Styles = {
   open Css;
-  let loadingBox = style([width(`percent(100.))]);
   let chartContainer =
     style([width(`percent(100.)), minHeight(`px(90)), margin2(~v=`zero, ~h=`px(-2))]);
   let blockContainer =
@@ -82,7 +81,7 @@ let make = (~oracleStatus, ~operatorAddress) => {
                  />
                )
              ->React.array
-           | _ => <LoadingCensorBar width=400 height=90 style=Styles.loadingBox />
+           | _ => <LoadingCensorBar fullWidth=true height=90 />
            }}
         </div>
       </Col.Grid>

scan/src/components/data-source/DataSourceRequestTable.re

@@ -31,7 +31,7 @@ let renderBody = (reserveIndex, requestsSub: ApolloHooks.Subscription.variant(Re
       }
     }
     paddingH={`px(24)}>
-    <Row.Grid alignItems=Row.Center minHeight={`px(30)}>
+    <Row.Grid alignItems=Row.Center>
       <Col.Grid col=Col.Two>
         {switch (requestsSub) {
          | Data({id}) => <TypeID.Request id />
@@ -78,7 +78,11 @@ let renderBody = (reserveIndex, requestsSub: ApolloHooks.Subscription.variant(Re
                weight=Text.Regular
                textAlign=Text.Right
              />
-           | _ => <LoadingCensorBar width=100 height=15 />
+           | _ =>
+             <>
+               <LoadingCensorBar width=70 height=15 />
+               <LoadingCensorBar width=80 height=15 mt=5 />
+             </>
            }}
         </div>
       </Col.Grid>

scan/src/components/modal/ValidatorStakingInfo.re

@@ -16,7 +16,6 @@ module Styles = {
       paddingBottom(`px(12)),
       marginBottom(`px(16)),
     ]);
-  let loadingBox = style([width(`percent(100.))]);
   let rewardContainer =
     style([backgroundColor(Colors.profileBG), padding2(~v=`px(16), ~h=`px(24))]);
 };
@@ -251,7 +250,7 @@ let make = (~validatorAddress) => {
          // log for err details
          Js.Console.log(err);
          <Text value="chain id not found" />;
-       | _ => <LoadingCensorBar width=100 height=200 style=Styles.loadingBox />
+       | _ => <LoadingCensorBar fullWidth=true height=200 />
        }
      }}
   </div>;

scan/src/components/oracle-script/OracleScriptExecute.re

@@ -77,7 +77,6 @@ module Styles = {
       minHeight(`px(164)),
       selector("> i", [marginBottom(`px(16))]),
     ]);
-  let loadingBox = style([width(`percent(100.))]);
 };
 
 module ConnectPanel = {
@@ -430,7 +429,7 @@ module ExecutionPart = {
                    // log for err details
                    Js.Console.log(err);
                    <Text value="chain id not found" />;
-                 | _ => <LoadingCensorBar width=100 height=120 style=Styles.loadingBox />
+                 | _ => <LoadingCensorBar fullWidth=true height=120 />
                  }
                }}
             </div>

scan/src/components/oracle-script/OracleScriptRequestTable.re

@@ -31,7 +31,7 @@ let renderBody = (reserveIndex, requestsSub: ApolloHooks.Subscription.variant(Re
       }
     }
     paddingH={`px(24)}>
-    <Row.Grid alignItems=Row.Center minHeight={`px(30)}>
+    <Row.Grid alignItems=Row.Center>
       <Col.Grid col=Col.Two>
         {switch (requestsSub) {
          | Data({id}) => <TypeID.Request id />
@@ -73,7 +73,10 @@ let renderBody = (reserveIndex, requestsSub: ApolloHooks.Subscription.variant(Re
                weight=Text.Regular
                textAlign=Text.Right
              />
-           | _ => <LoadingCensorBar width=100 height=15 />
+           | _ =>     <>
+               <LoadingCensorBar width=70 height=15 />
+               <LoadingCensorBar width=80 height=15 mt=5 />
+             </>
            }}
         </div>
       </Col.Grid>

scan/src/components/validator/ProposedBlocksTable.re

@@ -63,7 +63,7 @@ let renderBody = (reserveIndex, blockSub: ApolloHooks.Subscription.variant(Block
       }
     }
     paddingH={`px(24)}>
-    <Row.Grid alignItems=Row.Center minHeight={`px(30)}>
+    <Row.Grid alignItems=Row.Center>
       <Col.Grid col=Col.Two>
         {switch (blockSub) {
          | Data({height}) => <TypeID.Block id=height />
@@ -96,7 +96,11 @@ let renderBody = (reserveIndex, blockSub: ApolloHooks.Subscription.variant(Block
                weight=Text.Regular
                textAlign=Text.Right
              />
-           | _ => <LoadingCensorBar width=100 height=15 />
+           | _ =>
+             <>
+               <LoadingCensorBar width=70 height=15 />
+               <LoadingCensorBar width=80 height=15 mt=5 />
+             </>
            }}
         </div>
       </Col.Grid>