From 9cc88c9f9ab477420bcec611cea91c6c5ec1f770 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Tue, 7 Feb 2023 17:30:52 +0700
Subject: [PATCH 01/18] add Divider to Navbar

---
 src/components/NavBar.re | 14 +++++++++-----
 src/reusable/Divider.re  | 20 ++++++++++++++++++++
 src/utils/Route.re       |  1 +
 3 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 src/reusable/Divider.re

diff --git a/src/components/NavBar.re b/src/components/NavBar.re
index 33b08a7f..f9e46f2b 100644
--- a/src/components/NavBar.re
+++ b/src/components/NavBar.re
@@ -7,6 +7,7 @@ module RenderDesktop = {
         padding3(~top=`px(16), ~h=`zero, ~bottom=`px(12)),
         cursor(`pointer),
         fontSize(`px(12)),
+        fontWeight(`num(600)),
         hover([color(theme.neutral_900)]),
         active([color(theme.neutral_900)]),
         transition(~duration=400, "all"),
@@ -24,11 +25,11 @@ module RenderDesktop = {
     <div className={CssHelper.flexBox(~justify=`spaceBetween, ())} id="navigationBar">
       {routes
        ->Belt.List.map(((v, route)) =>
-           <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
+           {v != "Divider" ? <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
              <Link className={Styles.nav(currentRoute == route, theme)} route>
                {v |> React.string}
              </Link>
-           </div>
+           </div> : <Divider />}
          )
        ->Array.of_list
        ->React.array}
@@ -120,9 +121,9 @@ module RenderMobile = {
       <div className={Styles.navContainer(show, theme)}>
         {routes
          ->Belt.List.map(((v, route)) =>
-             <Link key=v className={Styles.nav(theme)} route onClick={_ => setShow(_ => false)}>
-               <Text value=v weight=Text.Semibold color={theme.neutral_900} />
-             </Link>
+            <Link key=v className={Styles.nav(theme)} route onClick={_ => setShow(_ => false)}>
+              <Text value=v weight=Text.Bold color={theme.neutral_900} />
+            </Link>
            )
          ->Array.of_list
          ->React.array}
@@ -141,13 +142,16 @@ module RenderMobile = {
 let make = () => {
   let routes = [
     ("Home", Route.HomePage),
+    ("Divider", None),
     ("Validators", ValidatorHomePage),
     ("Blocks", BlockHomePage),
     ("Transactions", TxHomePage),
     ("Proposals", ProposalHomePage),
+    ("Divider", None),
     ("Data Sources", DataSourceHomePage),
     ("Oracle Scripts", OracleScriptHomePage),
     ("Requests", RequestHomePage),
+    ("Divider", None),
     ("IBCs", IBCHomePage),
   ];
 
diff --git a/src/reusable/Divider.re b/src/reusable/Divider.re
new file mode 100644
index 00000000..cedb3f84
--- /dev/null
+++ b/src/reusable/Divider.re
@@ -0,0 +1,20 @@
+module Styles = {
+  open Css;
+
+  let container = (theme: Theme.t, ml, mr) => {
+    style([
+      height(`px(32)),
+      width(`px(1)),
+      marginLeft(`px(ml)),
+      marginRight(`px(mr)),
+      backgroundColor(theme.neutral_300),
+      Media.mobile([marginTop(`px(15))]),
+    ]);
+  };
+};
+
+[@react.component]
+let make = (~ml=0, ~mr=0) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  <div className={Styles.container(theme, ml, mr)} />;
+};
diff --git a/src/utils/Route.re b/src/utils/Route.re
index b30c1772..b2414455 100644
--- a/src/utils/Route.re
+++ b/src/utils/Route.re
@@ -22,6 +22,7 @@ type validator_tab_t =
   | Reporters;
 
 type t =
+  | None
   | NotFound
   | HomePage
   | DataSourceHomePage

From f6e5c0d56cd3bdf4302542bb54376fae988a9c62 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Wed, 8 Feb 2023 14:46:30 +0700
Subject: [PATCH 02/18] set ToggleButton for general used

---
 src/components/ChainIDBadge.re |  2 +-
 src/components/Header.re       |  4 +++-
 src/components/ToggleButton.re | 34 +++++++++++++++++-----------------
 src/pages/ValidatorHomePage.re |  2 +-
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/ChainIDBadge.re b/src/components/ChainIDBadge.re
index c2283500..295db3d1 100644
--- a/src/components/ChainIDBadge.re
+++ b/src/components/ChainIDBadge.re
@@ -117,7 +117,7 @@ let make = () =>
 
     let%Sub tracking = trackingSub;
     let currentChainID = tracking.chainID->parseChainID;
-
+    
     <div
       className={Styles.version(theme, isDarkMode)}
       onClick={event => {
diff --git a/src/components/Header.re b/src/components/Header.re
index 223b7242..3c59b254 100644
--- a/src/components/Header.re
+++ b/src/components/Header.re
@@ -75,7 +75,9 @@ module DesktopRender = {
                   </div>
                 </div>
               </LinkToHome>
-              <div className=Styles.chainIDContainer> <ChainIDBadge /> </div>
+              <div className=Styles.chainIDContainer> 
+                <ChainIDBadge /> 
+              </div>
             </div>
           </Col>
           <Col col=Col.Six>
diff --git a/src/components/ToggleButton.re b/src/components/ToggleButton.re
index 3dd9e228..f89b60f8 100644
--- a/src/components/ToggleButton.re
+++ b/src/components/ToggleButton.re
@@ -7,34 +7,34 @@ module Styles = {
       Media.mobile([flexGrow(0.), flexShrink(0.), flexBasis(`percent(50.))]),
     ]);
 
-  let activeBtn = (isActive, theme: Theme.t, isDarkMode) => {
+  let leftBtn = (state, theme: Theme.t, isDarkMode) => {
     style([
       borderTopRightRadius(`zero),
       borderBottomRightRadius(`zero),
-      backgroundColor(isActive ? theme.neutral_900 : theme.neutral_100),
-      color(isActive ? theme.neutral_100 : theme.neutral_900),
+      backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+      color(state ? theme.neutral_100 : theme.neutral_900),
       hover([
-        backgroundColor(isActive ? theme.neutral_900 : theme.neutral_100),
-        color(isActive ? theme.neutral_100 : theme.neutral_900),
+        backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+        color(state ? theme.neutral_100 : theme.neutral_900),
       ]),
     ]);
   };
-  let inActiveBtn = (isActive, theme: Theme.t, isDarkMode) => {
+  let rightBtn = (state, theme: Theme.t, isDarkMode) => {
     style([
       borderTopLeftRadius(`zero),
       borderBottomLeftRadius(`zero),
-      color(isActive ? theme.neutral_900 : theme.neutral_100),
-      backgroundColor(isActive ? theme.neutral_100 : theme.neutral_900),
+      color(state ? theme.neutral_900 : theme.neutral_100),
+      backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
       hover([
-        backgroundColor(isActive ? theme.neutral_100 : theme.neutral_900),
-        color(isActive ? theme.neutral_900 : theme.neutral_100),
+        backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
+        color(state ? theme.neutral_900 : theme.neutral_100),
       ]),
     ]);
   };
 };
 
 [@react.component]
-let make = (~isActive, ~setIsActive) => {
+let make = (~state, ~setState, ~nameArray) => {
   let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
@@ -42,17 +42,17 @@ let make = (~isActive, ~setIsActive) => {
       px=30
       py=8
       variant=Button.Outline
-      onClick={_ => setIsActive(_ => true)}
-      style={Css.merge([Styles.baseBtn, Styles.activeBtn(isActive, theme, isDarkMode)])}>
-      {"Active" |> React.string}
+      onClick={_ => setState(_ => true)}
+      style={Css.merge([Styles.baseBtn, Styles.leftBtn(state, theme, isDarkMode)])}>
+      {nameArray[0]  |> React.string}
     </Button>
     <Button
       px=30
       py=8
       variant=Button.Outline
-      onClick={_ => setIsActive(_ => false)}
-      style={Css.merge([Styles.baseBtn, Styles.inActiveBtn(isActive, theme, isDarkMode)])}>
-      {"Inactive" |> React.string}
+      onClick={_ => setState(_ => false)}
+      style={Css.merge([Styles.baseBtn, Styles.rightBtn(state, theme, isDarkMode)])}>
+      {nameArray[1] |> React.string}
     </Button>
   </div>;
 };
diff --git a/src/pages/ValidatorHomePage.re b/src/pages/ValidatorHomePage.re
index 008f25d6..3a410096 100644
--- a/src/pages/ValidatorHomePage.re
+++ b/src/pages/ValidatorHomePage.re
@@ -197,7 +197,7 @@ let make = () => {
              : React.null}
           <Col col=Col.Six>
             <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-              <ToggleButton isActive setIsActive />
+              <ToggleButton state=isActive setState=setIsActive nameArray=[|"Active","inActive"|] />
             </div>
           </Col>
         </Row>

From f6666dc1878ee19c28d08c6bfc529a36c6f1ba0b Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Wed, 8 Feb 2023 16:29:32 +0700
Subject: [PATCH 03/18] finish switch network button

---
 src/components/ChainIDBadge.re   | 91 ++++++++++++++++++++++----------
 src/components/NavBar.re         | 17 +++---
 src/components/ToggleButton.re   |  8 +--
 src/components/buttons/Button.re |  2 +-
 src/reusable/AbsoluteLink.re     |  9 ++--
 src/utils/Route.re               |  1 -
 6 files changed, 84 insertions(+), 44 deletions(-)

diff --git a/src/components/ChainIDBadge.re b/src/components/ChainIDBadge.re
index 295db3d1..9c7cbd28 100644
--- a/src/components/ChainIDBadge.re
+++ b/src/components/ChainIDBadge.re
@@ -43,8 +43,40 @@ module Styles = {
       padding2(~v=`px(5), ~h=`px(10)),
       hover([backgroundColor(theme.neutral_100)]),
     ]);
+  let buttonContainer = style([Media.mobile([width(`percent(100.))])]);
+  let baseBtn =
+    style([
+      textAlign(`center),
+      Media.mobile([flexGrow(0.), flexShrink(0.), flexBasis(`percent(50.))]),
+    ]);
+
+  let leftBtn = (state, theme: Theme.t, isDarkMode) => {
+    style([
+      borderTopRightRadius(`zero),
+      borderBottomRightRadius(`zero),
+      backgroundColor(state ? theme.neutral_900 : theme.neutral_000),
+      color(state ? theme.neutral_100 : theme.neutral_900),
+      hover([
+        backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+        color(state ? theme.neutral_100 : theme.neutral_900),
+      ]),
+    ]);
+  };
+  let rightBtn = (state, theme: Theme.t, isDarkMode) => {
+    style([
+      borderTopLeftRadius(`zero),
+      borderBottomLeftRadius(`zero),
+      color(state ? theme.neutral_900 : theme.neutral_100),
+      backgroundColor(state ? theme.neutral_000 : theme.neutral_900),
+      hover([
+        backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
+        color(state ? theme.neutral_900 : theme.neutral_100),
+      ]),
+    ]);
+  };
 };
 
+
 type chainID =
   | WenchangTestnet
   | WenchangMainnet
@@ -111,41 +143,44 @@ let getName =
 [@react.component]
 let make = () =>
   {
-    let (show, setShow) = React.useState(_ => false);
     let trackingSub = TrackingSub.use();
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
     let%Sub tracking = trackingSub;
     let currentChainID = tracking.chainID->parseChainID;
+
+    let networkNames = [|LaoziMainnet, LaoziTestnet|] -> Belt.Array.map(chainID => chainID->getName);
     
-    <div
-      className={Styles.version(theme, isDarkMode)}
-      onClick={event => {
-        setShow(oldVal => !oldVal);
-        ReactEvent.Mouse.stopPropagation(event);
-      }}>
-      <Text
-        value={currentChainID->getName}
-        color={theme.neutral_900}
-        nowrap=true
-        weight=Text.Semibold
-      />
-      <HSpacing size=Spacing.sm />
-      {show
-         ? <Icon name="far fa-angle-up" color={theme.neutral_600} />
-         : <Icon name="far fa-angle-down" color={theme.neutral_600} />}
-      <div className={Styles.dropdown(show, theme, isDarkMode)}>
-        {[|LaoziMainnet, LaoziTestnet|]
-         ->Belt.Array.keep(chainID => chainID != currentChainID)
-         ->Belt.Array.map(chainID => {
-             let name = chainID->getName;
-             <AbsoluteLink href={getLink(chainID)} key=name className={Styles.link(theme)}>
-               <Text value=name color={theme.neutral_600} nowrap=true weight=Text.Semibold />
-             </AbsoluteLink>;
-           })
-         ->React.array}
-      </div>
+    let isMainnet = (currentChainID->getName) == "laozi-mainnet"
+    let handleToggle = (value) => {
+      Js.log(value)
+      Js.log(currentChainID->getName)
+      if(!value && isMainnet){
+        ReasonReactRouter.push(LaoziMainnet |> getLink)
+      }
+    };
+
+    <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
+      <AbsoluteLink href={isMainnet ? "" : getLink(LaoziMainnet)} >
+        <Button
+          px=16
+          py=8
+          variant=Button.Outline
+          style={Css.merge([Styles.baseBtn, Styles.leftBtn(isMainnet, theme, isDarkMode)])}>
+          {networkNames[0]  |> React.string}
+        </Button>
+      </AbsoluteLink>
+      <AbsoluteLink href={isMainnet ? getLink(LaoziTestnet) : ""} >
+        <Button
+          px=16
+          py=8
+          variant=Button.Outline
+          style={Css.merge([Styles.baseBtn, Styles.rightBtn(isMainnet, theme, isDarkMode)])}>
+          {networkNames[1] |> React.string}
+        </Button>
+      </AbsoluteLink>
     </div>
+
     |> Sub.resolve;
   }
   |> Sub.default(
diff --git a/src/components/NavBar.re b/src/components/NavBar.re
index f9e46f2b..c95b2611 100644
--- a/src/components/NavBar.re
+++ b/src/components/NavBar.re
@@ -25,11 +25,14 @@ module RenderDesktop = {
     <div className={CssHelper.flexBox(~justify=`spaceBetween, ())} id="navigationBar">
       {routes
        ->Belt.List.map(((v, route)) =>
-           {v != "Divider" ? <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
-             <Link className={Styles.nav(currentRoute == route, theme)} route>
+          <div key=v className={CssHelper.flexBox(~justify=`spaceBetween, ())}>
+            { 
+              !Js.String2.includes(v, "Divider") ? <Link className={Styles.nav(currentRoute == route, theme)} route>
                {v |> React.string}
              </Link>
-           </div> : <Divider />}
+            : <Divider />
+            }
+          </div> 
          )
        ->Array.of_list
        ->React.array}
@@ -142,18 +145,18 @@ module RenderMobile = {
 let make = () => {
   let routes = [
     ("Home", Route.HomePage),
-    ("Divider", None),
+    ("Divider_1", NotFound),
     ("Validators", ValidatorHomePage),
     ("Blocks", BlockHomePage),
     ("Transactions", TxHomePage),
     ("Proposals", ProposalHomePage),
-    ("Divider", None),
+    ("Divider_2", NotFound),
     ("Data Sources", DataSourceHomePage),
     ("Oracle Scripts", OracleScriptHomePage),
     ("Requests", RequestHomePage),
-    ("Divider", None),
+    ("Divider_3", NotFound),
     ("IBCs", IBCHomePage),
   ];
 
-  Media.isMobile() ? <RenderMobile routes /> : <RenderDesktop routes />;
+  Media.isMobile() ? <RenderMobile routes /> : <RenderDesktop routes />; 
 };
diff --git a/src/components/ToggleButton.re b/src/components/ToggleButton.re
index f89b60f8..986f2477 100644
--- a/src/components/ToggleButton.re
+++ b/src/components/ToggleButton.re
@@ -11,7 +11,7 @@ module Styles = {
     style([
       borderTopRightRadius(`zero),
       borderBottomRightRadius(`zero),
-      backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
+      backgroundColor(state ? theme.neutral_900 : theme.neutral_000),
       color(state ? theme.neutral_100 : theme.neutral_900),
       hover([
         backgroundColor(state ? theme.neutral_900 : theme.neutral_100),
@@ -24,7 +24,7 @@ module Styles = {
       borderTopLeftRadius(`zero),
       borderBottomLeftRadius(`zero),
       color(state ? theme.neutral_900 : theme.neutral_100),
-      backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
+      backgroundColor(state ? theme.neutral_000 : theme.neutral_900),
       hover([
         backgroundColor(state ? theme.neutral_100 : theme.neutral_900),
         color(state ? theme.neutral_900 : theme.neutral_100),
@@ -39,7 +39,7 @@ let make = (~state, ~setState, ~nameArray) => {
 
   <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
     <Button
-      px=30
+      px=16
       py=8
       variant=Button.Outline
       onClick={_ => setState(_ => true)}
@@ -47,7 +47,7 @@ let make = (~state, ~setState, ~nameArray) => {
       {nameArray[0]  |> React.string}
     </Button>
     <Button
-      px=30
+      px=16
       py=8
       variant=Button.Outline
       onClick={_ => setState(_ => false)}
diff --git a/src/components/buttons/Button.re b/src/components/buttons/Button.re
index 46355f68..1ce2467c 100644
--- a/src/components/buttons/Button.re
+++ b/src/components/buttons/Button.re
@@ -87,7 +87,7 @@ let make =
       ~fsize=12,
       ~pySm=py,
       ~pxSm=px,
-      ~onClick,
+      ~onClick=_=>(),
       ~style="",
       ~disabled=false,
     ) => {
diff --git a/src/reusable/AbsoluteLink.re b/src/reusable/AbsoluteLink.re
index eddf7f1c..4c7f2bfb 100644
--- a/src/reusable/AbsoluteLink.re
+++ b/src/reusable/AbsoluteLink.re
@@ -8,7 +8,10 @@ module Styles = {
 [@react.component]
 let make = (~href, ~className="", ~children) => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
-  <a href className={Css.merge([Styles.a(theme), className])} target="_blank" rel="noopener">
-    children
-  </a>;
+  switch(href){
+    | "" => children
+    | _ =>  <a href className={Css.merge([Styles.a(theme), className])} target="_blank" rel="noopener">
+            children
+          </a>
+  }
 };
diff --git a/src/utils/Route.re b/src/utils/Route.re
index b2414455..b30c1772 100644
--- a/src/utils/Route.re
+++ b/src/utils/Route.re
@@ -22,7 +22,6 @@ type validator_tab_t =
   | Reporters;
 
 type t =
-  | None
   | NotFound
   | HomePage
   | DataSourceHomePage

From e0710922f5b3ab470535cf94663d0fb0c495eec1 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Wed, 8 Feb 2023 17:27:09 +0700
Subject: [PATCH 04/18] able to set primary color in TypeID

---
 src/components/ChainInfoHighlights.re | 8 ++++----
 src/components/TypeID.re              | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 0aa8a70d..687895dc 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -11,7 +11,7 @@ module Styles = {
     style([
       position(`relative),
       zIndex(2),
-      minHeight(`px(177)),
+      minHeight(`px(152)),
       padding2(~v=`px(24), ~h=`px(32)),
       Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(146))]),
     ]);
@@ -50,7 +50,7 @@ module HighlightCard = {
         ])}>
         {switch (valueAndExtraComponentSub) {
          | Data((valueComponent, extraComponent)) =>
-           <> <Text value=label size=Text.Lg /> valueComponent extraComponent </>
+           <> <Text value=label size=Text.Xl weight=Text.Regular /> valueComponent extraComponent </>
          | _ =>
            <>
              <LoadingCensorBar width=90 height=18 />
@@ -135,7 +135,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
         valueAndExtraComponentSub={
           let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
           (
-            <TypeID.Block id=height position=TypeID.Landing />,
+            <TypeID.Block id=height position=TypeID.Landing primary=true />,
             <ValidatorMonikerLink
               validatorAddress=operatorAddress
               moniker
@@ -159,7 +159,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               <Text
                 value=activeValidators
                 size=Text.Xxxl
-                color={theme.neutral_900}
+                color={theme.primary_600}
                 weight=Text.Semibold
               />;
             },
diff --git a/src/components/TypeID.re b/src/components/TypeID.re
index 87dafd27..4d713bb1 100644
--- a/src/components/TypeID.re
+++ b/src/components/TypeID.re
@@ -42,8 +42,8 @@ module Styles = {
 
 module ComponentCreator = (RawID: ID.IDSig) => {
   [@react.component]
-  let make = (~id, ~position=Text) => {
-    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  let make = (~id, ~position=Text, ~primary=false) => {
+    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
     <Link
       className={Css.merge([Styles.link(theme), Styles.pointerEvents(position)])}
@@ -56,7 +56,7 @@ module ComponentCreator = (RawID: ID.IDSig) => {
         nowrap=true
         code=true
         block=true
-        color={theme.neutral_900}
+        color={primary ? (isDarkMode ? theme.primary_600 : theme.primary_600) : theme.neutral_900}
       />
     </Link>;
   };

From 26f2dfa9650ed087c4275a7f9fbb0245506e7a99 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Wed, 8 Feb 2023 18:10:49 +0700
Subject: [PATCH 05/18] fix primary color

---
 src/components/Footer.re                      |  2 +-
 src/components/HistoricalBondedGraph.re       |  4 +--
 src/components/ProgressBar.re                 |  8 +++---
 src/components/UserAccount.re                 |  3 ++-
 src/components/charts/AccountBarChart.re      |  8 +++---
 .../data-source/DataSourceExecute.re          |  7 ++---
 src/components/modal/connect/ConnectModal.re  |  6 ++---
 src/components/msgs/MsgBadge.re               |  9 ++++---
 .../oracle-script/OracleScriptExecute.re      |  6 ++---
 src/components/proposal/VoteBreakdownTable.re |  7 ++---
 src/components/tx-index/IndexMsgIcon.re       |  8 +++---
 src/pages/AccountIndexPage.re                 | 11 ++++----
 src/pages/RequestIndexPage.re                 |  6 ++---
 src/pages/ValidatorIndexPage.re               |  6 ++---
 src/reusable/ProposalBadge.re                 | 11 ++++----
 src/reusable/Tab.re                           | 26 ++++++++++---------
 src/theme/Theme.re                            |  9 ++++---
 src/utils/ID.re                               |  6 -----
 18 files changed, 75 insertions(+), 68 deletions(-)

diff --git a/src/components/Footer.re b/src/components/Footer.re
index 517c054d..fe0d7c13 100644
--- a/src/components/Footer.re
+++ b/src/components/Footer.re
@@ -28,7 +28,7 @@ let make = () => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let isMobile = Media.isMobile();
 
-  <Section bg={theme.primary_600} pt=24 pb=24 ptSm=24 pbSm=24 style=Styles.footerBg>
+  <Section bg={theme.footer} pt=24 pb=24 ptSm=24 pbSm=24 style=Styles.footerBg>
     <div className=CssHelper.container>
       <Row alignItems=Row.Center>
         <Col col=Col.Six mbSm=24>
diff --git a/src/components/HistoricalBondedGraph.re b/src/components/HistoricalBondedGraph.re
index 500bfd9d..89472467 100644
--- a/src/components/HistoricalBondedGraph.re
+++ b/src/components/HistoricalBondedGraph.re
@@ -135,7 +135,7 @@ function(data, isDarkMode) {
 [@react.component]
 let make = (~operatorAddress) => {
   let dataQuery = HistoricalBondedQuery.get(operatorAddress);
-  let (ThemeContext.{isDarkMode}, _) = React.useContext(ThemeContext.context);
+  let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   React.useEffect2(
     () => {
@@ -156,7 +156,7 @@ let make = (~operatorAddress) => {
     <div className=Styles.container>
       <canvas id="historicalBonded" className={Styles.chart(show)} />
       <EmptyContainer height={`percent(100.)} display={!show}>
-        <Icon name="fal fa-clock" size=40 color=Theme.primary_600 />
+        <Icon name="fal fa-clock" size=40 color=theme.primary_600 />
         <VSpacing size={`px(16)} />
         <Heading
           size=Heading.H4
diff --git a/src/components/ProgressBar.re b/src/components/ProgressBar.re
index db6cf0a6..f2728982 100644
--- a/src/components/ProgressBar.re
+++ b/src/components/ProgressBar.re
@@ -102,16 +102,16 @@ let make = (~reportedValidators, ~minimumValidators, ~requestValidators) => {
 module Uptime = {
   [@react.component]
   let make = (~percent) => {
+    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
     let color =
       if (percent == 100.) {
-        Theme.primary_600;
+        theme.primary_600;
       } else if (percent < 100. && percent >= 79.) {
-        Theme.primary_500;
+        theme.primary_500;
       } else {
-        Theme.failColor;
+        theme.failColor;
       };
 
-    let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
     <div className={Styles.progressOuter(theme, isDarkMode)}>
       <div className={Styles.progressUptimeInner(percent, color)} />
     </div>;
diff --git a/src/components/UserAccount.re b/src/components/UserAccount.re
index d0a78296..12191a98 100644
--- a/src/components/UserAccount.re
+++ b/src/components/UserAccount.re
@@ -57,6 +57,7 @@ module ConnectBtn = {
 module DisconnectBtn = {
   [@react.component]
   let make = (~disconnect) => {
+    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
     <div
       className={Css.merge([
         CssHelper.flexBox(~justify=`center, ~align=`center, ()),
@@ -64,7 +65,7 @@ module DisconnectBtn = {
         Styles.disconnect,
       ])}
       onClick={_ => disconnect()}>
-      <Text value="Disconnect" weight=Text.Medium color=Theme.primary_600 nowrap=true block=true />
+      <Text value="Disconnect" weight=Text.Medium color=theme.primary_600 nowrap=true block=true />
     </div>;
   };
 };
diff --git a/src/components/charts/AccountBarChart.re b/src/components/charts/AccountBarChart.re
index 03d175a1..d90976a4 100644
--- a/src/components/charts/AccountBarChart.re
+++ b/src/components/charts/AccountBarChart.re
@@ -22,10 +22,10 @@ let make = (~availableBalance, ~balanceAtStake, ~reward, ~unbonding, ~commission
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([Styles.barChart, CssHelper.flexBox()])}>
-    <div className={Styles.barItem(availableBalancePercent, Theme.primary_600)} />
-    <div className={Styles.barItem(balanceAtStakePercent, Theme.primary_500)} />
-    <div className={Styles.barItem(unbondingPercent, Theme.primary_200)} />
-    <div className={Styles.barItem(rewardPercent, Theme.primary_800)} />
+    <div className={Styles.barItem(availableBalancePercent, theme.primary_600)} />
+    <div className={Styles.barItem(balanceAtStakePercent, theme.primary_500)} />
+    <div className={Styles.barItem(unbondingPercent, theme.primary_200)} />
+    <div className={Styles.barItem(rewardPercent, theme.primary_800)} />
     {commission == 0.
        ? React.null : <div className={Styles.barItem(commissionPercent, theme.neutral_600)} />}
   </div>;
diff --git a/src/components/data-source/DataSourceExecute.re b/src/components/data-source/DataSourceExecute.re
index bee23825..c3381a10 100644
--- a/src/components/data-source/DataSourceExecute.re
+++ b/src/components/data-source/DataSourceExecute.re
@@ -27,9 +27,9 @@ module Styles = {
       fontFamilies([`custom("Montserrat"), `custom("sans-serif")]),
     ]);
 
-  let button = isLoading =>
+  let button = (theme: Theme.t, isLoading) =>
     style([
-      backgroundColor(isLoading ? Theme.primary_200 : Theme.primary_600),
+      backgroundColor(isLoading ? theme.primary_200 : theme.primary_600),
       fontWeight(`num(600)),
       opacity(isLoading ? 0.8 : 1.),
       cursor(isLoading ? `auto : `pointer),
@@ -150,6 +150,7 @@ module ResultRender = {
 
 [@react.component]
 let make = (~executable: JsBuffer.t) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let params =
     ExecutableParser.parseExecutableScript(executable)->Belt_Option.getWithDefault([]);
   let numParams = params->Belt_List.length;
@@ -198,7 +199,7 @@ let make = (~executable: JsBuffer.t) => {
           </div>
           <Button
             fsize=14
-            style={Styles.button(result == Loading)}
+            style={Styles.button(theme, result == Loading)}
             px=25
             py=13
             onClick={_ =>
diff --git a/src/components/modal/connect/ConnectModal.re b/src/components/modal/connect/ConnectModal.re
index 2c028f7c..b983d696 100644
--- a/src/components/modal/connect/ConnectModal.re
+++ b/src/components/modal/connect/ConnectModal.re
@@ -41,13 +41,13 @@ module Styles = {
       color(active ? theme.neutral_900 : theme.neutral_600),
     ]);
 
-  let loginList = active =>
+  let loginList = (theme: Theme.t, active) =>
     style([
       display(`flex),
       width(`percent(100.)),
       height(`px(50)),
       borderRadius(`px(8)),
-      border(`px(2), `solid, active ? Theme.primary_600 : `transparent),
+      border(`px(2), `solid, active ? theme.primary_600 : `transparent),
       cursor(`pointer),
       overflow(`hidden),
     ]);
@@ -77,7 +77,7 @@ module LoginMethod = {
   let make = (~name, ~active, ~onClick) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
-    <div className={Styles.loginList(active)} onClick>
+    <div className={Styles.loginList(theme, active)} onClick>
       <div className={Styles.header(active, theme)}>
         {switch (name) {
          | LedgerWithCosmos =>
diff --git a/src/components/msgs/MsgBadge.re b/src/components/msgs/MsgBadge.re
index 38381293..9db310a3 100644
--- a/src/components/msgs/MsgBadge.re
+++ b/src/components/msgs/MsgBadge.re
@@ -1,8 +1,8 @@
 module Styles = {
   open Css;
-  let msgBadge =
+  let msgBadge = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      backgroundColor(theme.primary_600),
       borderRadius(`px(50)),
       margin2(~v=`zero, ~h=`px(5)),
       padding2(~v=`px(3), ~h=`px(8)),
@@ -13,11 +13,12 @@ module Styles = {
 
 [@react.component]
 let make = (~name) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   <div
     className={Css.merge([
       CssHelper.flexBox(~wrap=`nowrap, ~justify=`center, ()),
-      Styles.msgBadge,
+      Styles.msgBadge(theme),
     ])}>
-    <Text value=name size=Text.Sm color=Theme.white transform=Text.Uppercase align=Text.Center />
+    <Text value=name size=Text.Sm color=theme.white transform=Text.Uppercase align=Text.Center />
   </div>;
 };
diff --git a/src/components/oracle-script/OracleScriptExecute.re b/src/components/oracle-script/OracleScriptExecute.re
index 67d26313..bd4154e8 100644
--- a/src/components/oracle-script/OracleScriptExecute.re
+++ b/src/components/oracle-script/OracleScriptExecute.re
@@ -27,9 +27,9 @@ module Styles = {
       fontFamilies([`custom("Montserrat"), `custom("sans-serif")]),
     ]);
 
-  let button = isLoading =>
+  let button = (theme: Theme.t, isLoading) =>
     style([
-      backgroundColor(isLoading ? Theme.primary_200 : Theme.primary_600),
+      backgroundColor(isLoading ? theme.primary_200 : theme.primary_600),
       fontWeight(`num(600)),
       opacity(isLoading ? 0.8 : 1.),
       cursor(isLoading ? `auto : `pointer),
@@ -432,7 +432,7 @@ module ExecutionPart = {
                      fsize=14
                      px=25
                      py=13
-                     style={Styles.button(result == Loading)}
+                     style={Styles.button(theme, result == Loading)}
                      onClick={_ =>
                        if (result !== Loading) {
                          switch (
diff --git a/src/components/proposal/VoteBreakdownTable.re b/src/components/proposal/VoteBreakdownTable.re
index 60524869..9b06c53b 100644
--- a/src/components/proposal/VoteBreakdownTable.re
+++ b/src/components/proposal/VoteBreakdownTable.re
@@ -10,14 +10,14 @@ module Styles = {
       Media.mobile([overflow(`auto), padding2(~v=`px(1), ~h=`px(15))]),
     ]);
 
-  let buttonContainer = active =>
+  let buttonContainer = (theme: Theme.t, active) =>
     style([
       display(`inlineFlex),
       justifyContent(`center),
       alignItems(`center),
       cursor(`pointer),
       padding2(~v=`px(32), ~h=`zero),
-      borderBottom(`px(4), `solid, active ? Theme.primary_600 : `transparent),
+      borderBottom(`px(4), `solid, active ? theme.primary_600 : `transparent),
       Media.mobile([whiteSpace(`nowrap), padding2(~v=`px(24), ~h=`zero)]),
     ]);
 
@@ -129,9 +129,10 @@ module RenderBodyMobile = {
 module TabButton = {
   [@react.component]
   let make = (~tab, ~active, ~setTab) => {
+    let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
     let tabString = tab |> VoteSub.toString(~withSpace=true);
 
-    <div className={Styles.buttonContainer(active)} onClick={_ => setTab(_ => tab)}>
+    <div className={Styles.buttonContainer(theme, active)} onClick={_ => setTab(_ => tab)}>
       <Text value=tabString weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
     </div>;
   };
diff --git a/src/components/tx-index/IndexMsgIcon.re b/src/components/tx-index/IndexMsgIcon.re
index 9ec3ac27..fb73bd03 100644
--- a/src/components/tx-index/IndexMsgIcon.re
+++ b/src/components/tx-index/IndexMsgIcon.re
@@ -1,9 +1,9 @@
 module Styles = {
   open Css;
 
-  let iconWrapper =
+  let iconWrapper = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      backgroundColor(theme.primary_600),
       width(`px(24)),
       height(`px(24)),
       borderRadius(`percent(50.)),
@@ -22,7 +22,9 @@ module Styles = {
 
 [@react.component]
 let make = (~category: MsgDecoder.msg_cat_t) => {
-  <div className=Styles.iconWrapper>
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
+  
+  <div className=Styles.iconWrapper(theme)>
     {switch (category) {
      | TokenMsg => <Icon name="far fa-wallet" color=Theme.white size=14 />
      | FeeGrantMsg
diff --git a/src/pages/AccountIndexPage.re b/src/pages/AccountIndexPage.re
index ef0a8254..6be003b2 100644
--- a/src/pages/AccountIndexPage.re
+++ b/src/pages/AccountIndexPage.re
@@ -175,6 +175,7 @@ module TotalBalanceRender = {
 
 [@react.component]
 let make = (~address, ~hashtag: Route.account_tab_t) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   let currentTime =
     React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
   let isMobile = Media.isMobile();
@@ -361,7 +362,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Balance available to send, delegate, etc"
                      amount={balance->Coin.getBandAmountFromCoins}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_600
+                     color=theme.primary_600
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -374,7 +375,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Balance currently delegated to validators"
                      amount={amount->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_500
+                     color=theme.primary_500
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -387,7 +388,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Amount undelegated from validators awaiting 21 days lockup period"
                      amount={unbonding->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_200
+                     color=theme.primary_200
                    />
                  | _ => <BalanceDetailLoading />
                  }}
@@ -400,7 +401,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                      description="Reward from staking to validators"
                      amount={reward->Coin.getBandAmountFromCoin}
                      usdPrice={financial.usdPrice}
-                     color=Theme.primary_800
+                     color=theme.primary_800
                      isCountup=true
                    />
                  | _ => <BalanceDetailLoading />
@@ -418,7 +419,7 @@ let make = (~address, ~hashtag: Route.account_tab_t) => {
                          amount=commissionAmount
                          usdPrice={financial.usdPrice}
                          isCountup=true
-                         color=Theme.primary_800
+                         color=theme.primary_800
                        />
                      </div>;
 
diff --git a/src/pages/RequestIndexPage.re b/src/pages/RequestIndexPage.re
index 6a9aaca5..2d8a216d 100644
--- a/src/pages/RequestIndexPage.re
+++ b/src/pages/RequestIndexPage.re
@@ -23,11 +23,11 @@ module Styles = {
   let addressContainer = style([Media.mobile([width(`px(260))])]);
   let validatorReportStatus = style([marginBottom(`px(13))]);
   let noPaddingBottom = style([paddingBottom(`zero), Media.mobile([paddingBottom(`zero)])]);
-  let ibcBadge =
+  let ibcBadge = (theme: Theme.t) =>
     style([
       display(`flex),
       padding2(~v=`px(4), ~h=`px(16)),
-      background(Theme.primary_600),
+      background(theme.primary_600),
       borderRadius(`px(10)),
       marginLeft(`px(8)),
     ]);
@@ -236,7 +236,7 @@ let make = (~reqID) => {
                <div className={CssHelper.flexBox()}>
                  <TypeID.Request id position=TypeID.Title />
                  {isIBC
-                    ? <div className=Styles.ibcBadge>
+                    ? <div className=Styles.ibcBadge(theme)>
                         <Text value="IBC" color={theme.white} weight=Text.Semibold />
                       </div>
                     : React.null}
diff --git a/src/pages/ValidatorIndexPage.re b/src/pages/ValidatorIndexPage.re
index 0e66664a..0e331160 100644
--- a/src/pages/ValidatorIndexPage.re
+++ b/src/pages/ValidatorIndexPage.re
@@ -11,9 +11,9 @@ module Styles = {
       marginRight(`px(24)),
       Media.mobile([marginRight(`zero), marginBottom(`px(16))]),
     ]);
-  let rankContainer =
+  let rankContainer = (theme: Theme.t) =>
     style([
-      backgroundColor(Theme.primary_600),
+      backgroundColor(theme.primary_600),
       borderRadius(`percent(50.)),
       position(`absolute),
       right(`zero),
@@ -101,7 +101,7 @@ let make = (~address, ~hashtag: Route.validator_tab_t) => {
                     | Some(rank) =>
                       <div
                         className={Css.merge([
-                          Styles.rankContainer,
+                          Styles.rankContainer(theme),
                           CssHelper.flexBox(~justify=`center, ()),
                         ])}>
                         <Text value={rank |> string_of_int} color={theme.white} />
diff --git a/src/reusable/ProposalBadge.re b/src/reusable/ProposalBadge.re
index 53c550b0..25387afb 100644
--- a/src/reusable/ProposalBadge.re
+++ b/src/reusable/ProposalBadge.re
@@ -13,19 +13,20 @@ let getBadgeText =
   | Rejected => "Rejected"
   | Failed => "Failed";
 
-let getBadgeColor =
+let getBadgeColor = (theme: Theme.t) =>
   fun
   | ProposalSub.Deposit
-  | Voting => Theme.primary_600
-  | Passed => Theme.successColor
+  | Voting => theme.primary_600
+  | Passed => theme.successColor
   | Rejected
-  | Failed => Theme.failColor;
+  | Failed => theme.failColor;
 
 [@react.component]
 let make = (~status) => {
+  let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
   <div
     className={Css.merge([
-      Styles.badge(getBadgeColor(status)),
+      Styles.badge(getBadgeColor(theme)(status)),
       CssHelper.flexBox(~justify=`center, ()),
     ])}>
     <Text value={getBadgeText(status)} size=Text.Sm transform=Text.Uppercase color=Theme.white />
diff --git a/src/reusable/Tab.re b/src/reusable/Tab.re
index 05abd7ba..5ae8c543 100644
--- a/src/reusable/Tab.re
+++ b/src/reusable/Tab.re
@@ -13,14 +13,14 @@ module Styles = {
       ]),
     ]);
 
-  let buttonContainer = active =>
+  let buttonContainer = (theme: Theme.t, active) =>
     style([
       display(`inlineFlex),
       justifyContent(`center),
       alignItems(`center),
       cursor(`pointer),
       padding2(~v=`px(32), ~h=`zero),
-      borderBottom(`px(4), `solid, active ? Theme.primary_600 : `transparent),
+      borderBottom(`px(4), `solid, active ? theme.primary_600 : `transparent),
       Media.mobile([whiteSpace(`nowrap), padding2(~v=`px(24), ~h=`zero)]),
     ]);
 
@@ -33,16 +33,17 @@ module Route = {
     route: Route.t,
   };
 
-  let button = (~name, ~route, ~active) => {
-    <Link key=name isTab=true className={Styles.buttonContainer(active)} route>
-      <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
-    </Link>;
-  };
 
   [@react.component]
   let make = (~tabs: array(t), ~currentRoute, ~children) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
+    let button = (~name, ~route, ~active) => {
+      <Link key=name isTab=true className={Styles.buttonContainer(theme, active)} route>
+        <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
+      </Link>;
+    };
+
     <div className=Styles.container>
       <div className={Css.merge([Styles.header(theme, isDarkMode), CssHelper.flexBox(~wrap=`nowrap, ())])}>
         {tabs
@@ -57,15 +58,16 @@ module Route = {
 };
 
 module State = {
-  let button = (~name, ~active, ~setTab) => {
-    <div key=name className={Styles.buttonContainer(active)} onClick={_ => setTab()}>
-      <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
-    </div>;
-  };
 
   [@react.component]
   let make = (~tabs: array(string), ~tabIndex, ~setTab, ~children) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
+    
+    let button = (~name, ~active, ~setTab) => {
+      <div key=name className={Styles.buttonContainer(theme, active)} onClick={_ => setTab()}>
+        <Text value=name weight={active ? Text.Semibold : Text.Regular} size=Text.Lg />
+      </div>;
+    };
 
     <div className=Styles.container>
       <div className={Css.merge([Styles.header(theme, isDarkMode), CssHelper.flexBox(~wrap=`nowrap, ())])}>
diff --git a/src/theme/Theme.re b/src/theme/Theme.re
index f82b1152..9c481022 100644
--- a/src/theme/Theme.re
+++ b/src/theme/Theme.re
@@ -19,6 +19,7 @@ type t = {
   failColor: color_t,
   activeColor: color_t,
   warningColor: color_t,
+  footer: color_t,
   // new theme
   neutral_000: color_t,
   neutral_100: color_t,
@@ -36,7 +37,7 @@ type t = {
 // Default Colors
 let primary_200 = hex("DAD1FE");
 let primary_500 = hex("6547EB");
-let primary_600 = hex("4520E6");
+let primary = hex("4520E6");
 let darkBlue = hex("3719B8");
 let primary_800 = hex("210D77");
 
@@ -53,7 +54,7 @@ let warningColor = hex("F2CC21");
 let get: mode_t => t =
   fun
   | Day => {
-      primary_600,
+      primary_600: hex("4520E6"),
       primary_200,
       primary_500,
       darkBlue,
@@ -65,6 +66,7 @@ let get: mode_t => t =
       activeColor,
       failColor,
       warningColor,
+      footer: hex("4520E6"),
       // new theme
       neutral_000: hex("FFFFFF"),
       neutral_100: hex("F3F4F6"),
@@ -78,7 +80,7 @@ let get: mode_t => t =
       neutral_900: hex("202327"),
     }
   | Dark => {
-      primary_600,
+      primary_600: hex("8871EF"),
       primary_200,
       primary_500,
       darkBlue,
@@ -90,6 +92,7 @@ let get: mode_t => t =
       activeColor,
       failColor,
       warningColor,
+      footer: hex("21262C"),
 
        // new theme
       neutral_000: hex("101214"),
diff --git a/src/utils/ID.re b/src/utils/ID.re
index 3edaab6e..5f5cc940 100644
--- a/src/utils/ID.re
+++ b/src/utils/ID.re
@@ -1,7 +1,6 @@
 module type RawIDSig = {
   type tab_t;
   let prefix: string;
-  let color: Css.Types.Color.t;
   let route: (int, tab_t) => Route.t;
   let defaultTab: tab_t;
 };
@@ -9,7 +8,6 @@ module type RawIDSig = {
 module RawDataSourceID = {
   type tab_t = Route.data_source_tab_t;
   let prefix = "#D";
-  let color = Theme.primary_600;
   let route = (id, tab) => Route.DataSourceIndexPage(id, tab);
   let defaultTab = Route.DataSourceRequests;
 };
@@ -17,7 +15,6 @@ module RawDataSourceID = {
 module RawOracleScriptID = {
   type tab_t = Route.oracle_script_tab_t;
   let prefix = "#O";
-  let color = Theme.primary_600;
   let route = (id, tab) => Route.OracleScriptIndexPage(id, tab);
   let defaultTab = Route.OracleScriptRequests;
 };
@@ -25,7 +22,6 @@ module RawOracleScriptID = {
 module RawRequestID = {
   type tab_t = unit;
   let prefix = "#R";
-  let color = Theme.primary_600;
   let route = (id, _) => Route.RequestIndexPage(id);
   let defaultTab = ();
 };
@@ -33,7 +29,6 @@ module RawRequestID = {
 module RawProposalID = {
   type tab_t = unit;
   let prefix = "#P";
-  let color = Theme.primary_600;
   let route = (id, _) => Route.ProposalIndexPage(id);
   let defaultTab = ();
 };
@@ -41,7 +36,6 @@ module RawProposalID = {
 module RawBlock = {
   type tab_t = unit;
   let prefix = "#B";
-  let color = Theme.primary_600;
   let route = (height, _) => Route.BlockIndexPage(height);
   let defaultTab = ();
 };

From 65f5a47fc9899df0336992aaaeea0d21470e0c7d Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Thu, 9 Feb 2023 01:56:15 +0700
Subject: [PATCH 06/18] finish Latest Transactions on desktop

---
 src/components/LatestTxTable.re | 92 ++++++++++++++++-----------------
 src/components/msgs/MsgBadge.re | 12 ++++-
 src/pages/HomePage.re           | 12 ++---
 3 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index f5814343..1e677c05 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -10,26 +10,52 @@ module Styles = {
       height(`px(32)),
       hover([backgroundColor(theme.darkBlue)]),
     ]);
+  let textMRight = style([marginRight(`px(6))]);
 };
 
+module MsgBadgeGroup = {
+  [@react.component]
+  let make = (~messages, ~txHash) => {
+    let theme = List.nth(messages, 0) |> MsgDecoder.getBadgeTheme;
+    let length = List.length(messages);
+
+    <div className={CssHelper.flexBox(~direction=`row, ())}>
+      <MsgBadge name=theme.name />
+      {
+        length > 1 ? <Text 
+        value={"+" ++ ((length - 1) |> string_of_int)}
+        size=Text.Md
+        transform=Text.Uppercase /> : React.null
+      }
+    </div>;
+    
+  }
+}
 module RenderBody = {
   [@react.component]
   let make = (~txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
     <TBody>
       <Row alignItems=Row.Start>
-        <Col col=Col.Two>
+        <Col col=Col.Four>
           {switch (txSub) {
            | Data({txHash}) => <TxLink txHash width=110 />
            | _ => <LoadingCensorBar width=60 height=15 />
            }}
         </Col>
-        <Col col=Col.Two>
+        <Col col=Col.Three>
           {switch (txSub) {
            | Data({blockHeight}) => <TypeID.Block id=blockHeight />
            | _ => <LoadingCensorBar width=50 height=15 />
            }}
         </Col>
-        <Col col=Col.One>
+        <Col col=Col.Three>
+          {switch (txSub) {
+           | Data({messages, txHash, success, errMsg}) =>
+             <MsgBadgeGroup txHash messages/>
+           | _ => <LoadingCensorBar width=320 height=15 />
+           }}
+        </Col>
+        <Col col=Col.Two>
           <div className={CssHelper.flexBox(~justify=`center, ~align=`center, ())}>
             {switch (txSub) {
              | Data({success}) =>
@@ -42,13 +68,6 @@ module RenderBody = {
              }}
           </div>
         </Col>
-        <Col col=Col.Seven>
-          {switch (txSub) {
-           | Data({messages, txHash, success, errMsg}) =>
-             <TxMessages txHash messages success errMsg />
-           | _ => <LoadingCensorBar width=320 height=15 />
-           }}
-        </Col>
       </Row>
     </TBody>;
   };
@@ -95,7 +114,7 @@ module RenderBodyMobile = {
 [@react.component]
 let make = () => {
   let isMobile = Media.isMobile();
-  let txCount = 5;
+  let txCount = 10;
   let txsSub = TxSub.getList(~page=1, ~pageSize=txCount, ());
   let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
 
@@ -104,33 +123,20 @@ let make = () => {
       <Col col=Col.Six colSm=Col.Six>
         <Heading value="Latest Transactions" size=Heading.H4 />
         <VSpacing size={`px(4)} />
-        {switch (txsSub) {
-         | ApolloHooks.Subscription.Data(txs) =>
-           <Text
-             value={
-               txs
-               ->Belt.Array.get(0)
-               ->Belt.Option.mapWithDefault(0, ({id}) => id)
-               ->Format.iPretty
-             }
-             size=Text.Lg
-             weight=Text.Medium
-           />
-         | _ => <LoadingCensorBar width=90 height=18 />
-         }}
       </Col>
       <Col col=Col.Six colSm=Col.Six>
         <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          {isMobile ? React.null : <Heading value="More Transactions" size=Heading.H4 />}
-          <HSpacing size=Spacing.md />
           <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
-            <div
-              className={Css.merge([
-                Styles.allTxLink(theme),
-                CssHelper.flexBox(~justify=`center, ()),
-              ])}>
-              <Icon name="far fa-arrow-right" color={theme.white} />
+            <div className=Styles.textMRight>
+              <Text 
+                value="All Transactions" 
+                size=Text.Md 
+                weight=Text.Semibold 
+                underline=true 
+                color=theme.neutral_900 
+              />
             </div>
+            <Icon name="far fa-arrow-right" color=theme.neutral_900 />
           </Link>
         </div>
       </Col>
@@ -139,25 +145,17 @@ let make = () => {
        ? React.null
        : <THead height=30>
            <Row alignItems=Row.Center>
-             <Col col=Col.Two>
-               <div className={CssHelper.flexBox()}>
+             <Col col=Col.Four>
                  <Text value="Tx Hash" size=Text.Sm transform=Text.Uppercase />
-               </div>
              </Col>
-             <Col col=Col.Two>
-               <div className={CssHelper.flexBox()}>
+             <Col col=Col.Three>
                  <Text value="Block" size=Text.Sm transform=Text.Uppercase />
-               </div>
              </Col>
-             <Col col=Col.One>
-               <div className={CssHelper.flexBox(~justify=`center, ~align=`center, ())}>
-                 <Text value="Status" size=Text.Sm transform=Text.Uppercase />
-               </div>
+             <Col col=Col.Three>
+                 <Text value="Message" size=Text.Sm transform=Text.Uppercase />
              </Col>
-             <Col col=Col.Seven>
-               <div className={CssHelper.flexBox()}>
-                 <Text value="Actions" size=Text.Sm transform=Text.Uppercase />
-               </div>
+             <Col col=Col.Two>
+                 <Text value="Status" size=Text.Sm transform=Text.Uppercase />
              </Col>
            </Row>
          </THead>}
diff --git a/src/components/msgs/MsgBadge.re b/src/components/msgs/MsgBadge.re
index 9db310a3..7d7ff3ca 100644
--- a/src/components/msgs/MsgBadge.re
+++ b/src/components/msgs/MsgBadge.re
@@ -2,7 +2,8 @@ module Styles = {
   open Css;
   let msgBadge = (theme: Theme.t) =>
     style([
-      backgroundColor(theme.primary_600),
+      backgroundColor(theme.neutral_700),
+      border(`px(1), `solid, theme.neutral_600),
       borderRadius(`px(50)),
       margin2(~v=`zero, ~h=`px(5)),
       padding2(~v=`px(3), ~h=`px(8)),
@@ -19,6 +20,13 @@ let make = (~name) => {
       CssHelper.flexBox(~wrap=`nowrap, ~justify=`center, ()),
       Styles.msgBadge(theme),
     ])}>
-    <Text value=name size=Text.Sm color=theme.white transform=Text.Uppercase align=Text.Center />
+    <Text 
+      value=name
+      size=Text.Md
+      weight=Text.Semibold
+      color=theme.neutral_000
+      transform=Text.Uppercase
+      align=Text.Center
+    />
   </div>;
 };
diff --git a/src/pages/HomePage.re b/src/pages/HomePage.re
index a37be3b6..67f1ebf0 100644
--- a/src/pages/HomePage.re
+++ b/src/pages/HomePage.re
@@ -12,7 +12,7 @@ module Styles = {
 let make = () => {
   // Subscribe for latest 5 blocks here so both "LatestBlocks" and "ChainInfoHighLights"
   // share the same infomation.
-  let pageSize = 5;
+  let pageSize = 10;
   let latest5BlocksSub = BlockSub.getList(~pageSize, ~page=1, ());
   let latestBlockSub = latest5BlocksSub->Sub.map(blocks => blocks->Belt_Array.getExn(0));
   let latest5RequestSub = RequestSub.getList(~pageSize, ~page=1, ());
@@ -37,13 +37,13 @@ let make = () => {
     <div className={Css.merge([CssHelper.container, Styles.content])} id="homePageContainer">
       <ChainInfoHighlights latestBlockSub />
       <Row marginTop=24>
-        <Col col=Col.Six mbSm=24> <TotalRequestsGraph latest5RequestSub /> </Col>
+        <Col col=Col.Six> <LatestTxTable /> </Col>
         <Col col=Col.Six> <LatestRequests latest5RequestSub /> </Col>
       </Row>
-      <Row marginTop=24>
-        <Col col=Col.Four> <LatestBlocks blocksSub=latest5BlocksSub /> </Col>
-        <Col col=Col.Eight> <LatestTxTable /> </Col>
-      </Row>
+      // <Row marginTop=24>
+      //   <Col col=Col.Four> <LatestBlocks blocksSub=latest5BlocksSub /> </Col>
+      //   <Col col=Col.Six mbSm=24> <TotalRequestsGraph latest5RequestSub /> </Col>
+      // </Row>
     </div>
   </Section>;
 };

From b53f44361a8013685d0dca8e2bea6c1d87ce7ee1 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Thu, 9 Feb 2023 01:58:32 +0700
Subject: [PATCH 07/18] rearrange NavBar

---
 src/components/NavBar.re | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar.re b/src/components/NavBar.re
index c95b2611..04386e50 100644
--- a/src/components/NavBar.re
+++ b/src/components/NavBar.re
@@ -146,14 +146,14 @@ let make = () => {
   let routes = [
     ("Home", Route.HomePage),
     ("Divider_1", NotFound),
-    ("Validators", ValidatorHomePage),
     ("Blocks", BlockHomePage),
     ("Transactions", TxHomePage),
+    ("Validators", ValidatorHomePage),
     ("Proposals", ProposalHomePage),
     ("Divider_2", NotFound),
+    ("Requests", RequestHomePage),
     ("Data Sources", DataSourceHomePage),
     ("Oracle Scripts", OracleScriptHomePage),
-    ("Requests", RequestHomePage),
     ("Divider_3", NotFound),
     ("IBCs", IBCHomePage),
   ];

From 37b702c186e45c39fe99f3ec3faf7f1665b6e816 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Thu, 9 Feb 2023 13:52:48 +0700
Subject: [PATCH 08/18] fix style

---
 src/components/ChainInfoHighlights.re | 2 +-
 src/components/LatestTxTable.re       | 4 ++--
 src/components/TxLink.re              | 8 ++++----
 src/components/TypeID.re              | 6 +++---
 src/components/msgs/MsgBadge.re       | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 687895dc..c1f6bb10 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -135,7 +135,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
         valueAndExtraComponentSub={
           let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
           (
-            <TypeID.Block id=height position=TypeID.Landing primary=true />,
+            <TypeID.Block id=height position=TypeID.Landing weight=Text.Semibold />,
             <ValidatorMonikerLink
               validatorAddress=operatorAddress
               moniker
diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index 1e677c05..6f5869e4 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -35,10 +35,10 @@ module RenderBody = {
   [@react.component]
   let make = (~txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
     <TBody>
-      <Row alignItems=Row.Start>
+      <Row alignItems=Row.Center>
         <Col col=Col.Four>
           {switch (txSub) {
-           | Data({txHash}) => <TxLink txHash width=110 />
+           | Data({txHash}) => <TxLink txHash width=110 weight=Text.Regular />
            | _ => <LoadingCensorBar width=60 height=15 />
            }}
         </Col>
diff --git a/src/components/TxLink.re b/src/components/TxLink.re
index 4acaf812..599b897f 100644
--- a/src/components/TxLink.re
+++ b/src/components/TxLink.re
@@ -1,9 +1,9 @@
 module Styles = {
   open Css;
-  let withWidth = (w, theme: Theme.t) =>
+  let txLink = (theme: Theme.t) =>
     style([
       display(`flex),
-      maxWidth(`px(w)),
+      maxWidth(`percent(100.)),
       cursor(`pointer),
       selector("> span:hover", [color(theme.primary_600)]),
       selector("> span", [transition(~duration=200, "all")]),
@@ -13,7 +13,7 @@ module Styles = {
 [@react.component]
 let make = (~txHash: Hash.t, ~width: int, ~size=Text.Md, ~weight=Text.Medium) => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
-  <Link className={Styles.withWidth(width, theme)} route={Route.TxIndexPage(txHash)}>
+  <Link className={Styles.txLink(theme)} route={Route.TxIndexPage(txHash)}>
     <Text
       block=true
       code=true
@@ -22,7 +22,7 @@ let make = (~txHash: Hash.t, ~width: int, ~size=Text.Md, ~weight=Text.Medium) =>
       weight
       ellipsis=true
       size
-      color={theme.neutral_900}
+      color={theme.primary_600}
     />
   </Link>;
 };
diff --git a/src/components/TypeID.re b/src/components/TypeID.re
index 4d713bb1..ce5f0d6a 100644
--- a/src/components/TypeID.re
+++ b/src/components/TypeID.re
@@ -42,7 +42,7 @@ module Styles = {
 
 module ComponentCreator = (RawID: ID.IDSig) => {
   [@react.component]
-  let make = (~id, ~position=Text, ~primary=false) => {
+  let make = (~id, ~position=Text, ~primary=false, ~weight=Text.Regular) => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
     <Link
@@ -51,12 +51,12 @@ module ComponentCreator = (RawID: ID.IDSig) => {
       <Text
         value={id |> RawID.toString}
         size={position |> fontSize}
-        weight=Text.Semibold
+        weight
         height={position |> lineHeight}
         nowrap=true
         code=true
         block=true
-        color={primary ? (isDarkMode ? theme.primary_600 : theme.primary_600) : theme.neutral_900}
+        color=theme.primary_600
       />
     </Link>;
   };
diff --git a/src/components/msgs/MsgBadge.re b/src/components/msgs/MsgBadge.re
index 7d7ff3ca..0ba38171 100644
--- a/src/components/msgs/MsgBadge.re
+++ b/src/components/msgs/MsgBadge.re
@@ -6,7 +6,7 @@ module Styles = {
       border(`px(1), `solid, theme.neutral_600),
       borderRadius(`px(50)),
       margin2(~v=`zero, ~h=`px(5)),
-      padding2(~v=`px(3), ~h=`px(8)),
+      padding2(~v=`px(3), ~h=`px(12)),
       whiteSpace(`pre),
       display(`inlineFlex),
     ]);

From f62def8bd9a685b70558b62c9ed25a03b91b0d66 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Thu, 9 Feb 2023 14:44:52 +0700
Subject: [PATCH 09/18] fix MsgBadge

---
 src/components/msgs/MsgBadge.re | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/msgs/MsgBadge.re b/src/components/msgs/MsgBadge.re
index 0ba38171..d5b228fd 100644
--- a/src/components/msgs/MsgBadge.re
+++ b/src/components/msgs/MsgBadge.re
@@ -2,6 +2,7 @@ module Styles = {
   open Css;
   let msgBadge = (theme: Theme.t) =>
     style([
+      maxWidth(`px(80)),
       backgroundColor(theme.neutral_700),
       border(`px(1), `solid, theme.neutral_600),
       borderRadius(`px(50)),
@@ -25,8 +26,8 @@ let make = (~name) => {
       size=Text.Md
       weight=Text.Semibold
       color=theme.neutral_000
-      transform=Text.Uppercase
       align=Text.Center
+      ellipsis=true
     />
   </div>;
 };

From 1f01d0c56f1efcdb5084e91f70c574d678b1dbdf Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Thu, 9 Feb 2023 16:02:44 +0700
Subject: [PATCH 10/18] finish Latest Requests table

---
 src/components/LatestRequests.re | 36 +++++++++++---------------------
 src/components/LatestTxTable.re  | 19 +++++------------
 src/components/TypeID.re         | 31 +++++++++++++++++----------
 3 files changed, 37 insertions(+), 49 deletions(-)

diff --git a/src/components/LatestRequests.re b/src/components/LatestRequests.re
index a3185f08..53ed74b7 100644
--- a/src/components/LatestRequests.re
+++ b/src/components/LatestRequests.re
@@ -12,21 +12,13 @@ module Styles = {
     style([
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, `num(0.2)))),
     ]);
-
-  let allRequestLink = (theme: Theme.t) =>
-    style([
-      backgroundColor(theme.primary_600),
-      borderRadius(`px(8)),
-      width(`px(32)),
-      height(`px(32)),
-      hover([backgroundColor(theme.darkBlue)]),
-    ]);
+  let textMRight = style([marginRight(`px(6))]);
 };
 
 module RenderBody = {
   [@react.component]
   let make = (~requestSub: ApolloHooks.Subscription.variant(RequestSub.t)) => {
-    <TBody>
+    <TBody paddingV=`px(18)>
       <Row alignItems=Row.Center>
         <Col col=Col.Three>
           {switch (requestSub) {
@@ -38,9 +30,7 @@ module RenderBody = {
           {switch (requestSub) {
            | Data({oracleScript: {oracleScriptID, name}}) =>
              <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
-               <TypeID.OracleScript id=oracleScriptID />
-               <HSpacing size=Spacing.sm />
-               <Text value=name ellipsis=true />
+               <TypeID.OracleScript id=oracleScriptID details=name />
              </div>
            | _ => <LoadingCensorBar width=150 height=15 />
            }}
@@ -134,16 +124,17 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
       </Col>
       <Col col=Col.Six colSm=Col.Six>
         <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          {isMobile ? React.null : <Heading value="More Requests" size=Heading.H4 />}
-          <HSpacing size=Spacing.md />
           <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
-            <div
-              className={Css.merge([
-                Styles.allRequestLink(theme),
-                CssHelper.flexBox(~justify=`center, ()),
-              ])}>
-              <Icon name="far fa-arrow-right" color={theme.white} />
+            <div className=Styles.textMRight>
+              <Text 
+                value="All Requests" 
+                size=Text.Md 
+                weight=Text.Semibold 
+                underline=true 
+                color=theme.neutral_900 
+              />
             </div>
+            <Icon name="far fa-arrow-right" color=theme.neutral_900 />
           </Link>
         </div>
       </Col>
@@ -158,7 +149,6 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
                  value="Request ID"
                  size=Text.Sm
                  weight=Text.Semibold
-                 transform=Text.Uppercase
                />
              </Col>
              <Col col=Col.Six>
@@ -167,7 +157,6 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
                  value="Oracle Script"
                  size=Text.Sm
                  weight=Text.Semibold
-                 transform=Text.Uppercase
                />
              </Col>
              <Col col=Col.Three>
@@ -177,7 +166,6 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
                  size=Text.Sm
                  weight=Text.Semibold
                  align=Text.Right
-                 transform=Text.Uppercase
                />
              </Col>
            </Row>
diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index 6f5869e4..3492ce96 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -2,14 +2,6 @@ module Styles = {
   open Css;
 
   let statusImg = style([width(`px(20)), marginTop(`px(-3))]);
-  let allTxLink = (theme: Theme.t) =>
-    style([
-      backgroundColor(theme.primary_600),
-      borderRadius(`px(8)),
-      width(`px(32)),
-      height(`px(32)),
-      hover([backgroundColor(theme.darkBlue)]),
-    ]);
   let textMRight = style([marginRight(`px(6))]);
 };
 
@@ -34,7 +26,7 @@ module MsgBadgeGroup = {
 module RenderBody = {
   [@react.component]
   let make = (~txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
-    <TBody>
+    <TBody paddingV=`px(17)>
       <Row alignItems=Row.Center>
         <Col col=Col.Four>
           {switch (txSub) {
@@ -122,7 +114,6 @@ let make = () => {
     <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
       <Col col=Col.Six colSm=Col.Six>
         <Heading value="Latest Transactions" size=Heading.H4 />
-        <VSpacing size={`px(4)} />
       </Col>
       <Col col=Col.Six colSm=Col.Six>
         <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
@@ -146,16 +137,16 @@ let make = () => {
        : <THead height=30>
            <Row alignItems=Row.Center>
              <Col col=Col.Four>
-                 <Text value="Tx Hash" size=Text.Sm transform=Text.Uppercase />
+                 <Text value="Tx Hash" size=Text.Sm />
              </Col>
              <Col col=Col.Three>
-                 <Text value="Block" size=Text.Sm transform=Text.Uppercase />
+                 <Text value="Block" size=Text.Sm />
              </Col>
              <Col col=Col.Three>
-                 <Text value="Message" size=Text.Sm transform=Text.Uppercase />
+                 <Text value="Message" size=Text.Sm />
              </Col>
              <Col col=Col.Two>
-                 <Text value="Status" size=Text.Sm transform=Text.Uppercase />
+                 <Text value="Status" size=Text.Sm />
              </Col>
            </Row>
          </THead>}
diff --git a/src/components/TypeID.re b/src/components/TypeID.re
index ce5f0d6a..da2cabae 100644
--- a/src/components/TypeID.re
+++ b/src/components/TypeID.re
@@ -26,6 +26,7 @@ module Styles = {
 
   let link = (theme: Theme.t) =>
     style([
+      width(`percent(100.)),
       cursor(`pointer),
       selector("&:hover > span", [color(theme.primary_600)]),
       selector("> span", [transition(~duration=200, "all")]),
@@ -42,22 +43,30 @@ module Styles = {
 
 module ComponentCreator = (RawID: ID.IDSig) => {
   [@react.component]
-  let make = (~id, ~position=Text, ~primary=false, ~weight=Text.Regular) => {
+  let make = (~id, ~position=Text, ~primary=false, ~weight=Text.Regular, ~details="") => {
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
     <Link
       className={Css.merge([Styles.link(theme), Styles.pointerEvents(position)])}
       route={id |> RawID.getRoute}>
-      <Text
-        value={id |> RawID.toString}
-        size={position |> fontSize}
-        weight
-        height={position |> lineHeight}
-        nowrap=true
-        code=true
-        block=true
-        color=theme.primary_600
-      />
+      <div className={CssHelper.flexBox(~wrap=`nowrap, ())}>
+        <Text
+          value={id |> RawID.toString}
+          size={position |> fontSize}
+          weight
+          height={position |> lineHeight}
+          nowrap=true
+          code=true
+          block=true
+          color=theme.primary_600
+        />
+        {
+          details != "" ? <>
+            <HSpacing size=Spacing.sm />
+            <Text value=details ellipsis=true />
+          </> : React.null
+        }
+      </div>
     </Link>;
   };
 };

From 85df249fc1858531e49070dec001d59efeb3c8c7 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Fri, 10 Feb 2023 01:26:43 +0700
Subject: [PATCH 11/18] add more info card

---
 src/components/ChainInfoHighlights.re | 404 +++++++++++++++++++-------
 src/reusable/Divider.re               |   8 +-
 src/rpc/PriceHook.re                  |  18 +-
 3 files changed, 321 insertions(+), 109 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index c1f6bb10..9debe1cd 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -1,7 +1,7 @@
 module Styles = {
   open Css;
 
-  let card = (theme: Theme.t) =>
+  let card =
     style([
       position(`relative),
       Media.smallMobile([margin2(~v=`zero, ~h=`px(-5))]),
@@ -30,7 +30,32 @@ module Styles = {
 
   let bandToken =
     style([position(`absolute), width(`percent(60.)), top(`percent(-40.)), right(`zero)]);
-};
+  
+  let longCard = 
+    style([
+      width(`percent(100.)),
+      marginTop(`px(24)),
+      padding2(~v=`zero, ~h=`px(24)),
+      // margin2(~v=`zero, ~h=`px(12)),
+    ]);
+
+  let innerLongCard =
+    style([
+      minHeight(`px(106)),
+      padding2(~v=`px(24), ~h=`px(12)),
+      Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(304))]),
+    ]);
+
+  let halfWidth =
+    style([
+      width(`calc((`sub, `percent(50.), `px(17))))
+    ]);
+
+  let mr2 =
+    style([
+      marginRight(`px(16))
+    ]);
+  };
 
 module HighlightCard = {
   [@react.component]
@@ -39,7 +64,7 @@ module HighlightCard = {
     let (ThemeContext.{theme,isDarkMode}, _) = React.useContext(ThemeContext.context);
     let isMobile = Media.isMobile();
 
-    <div className={Css.merge([Styles.card(theme), special ? Styles.specialBg : "",CommonStyles.card(theme,isDarkMode)])}>
+    <div className={Css.merge([Styles.card, special ? Styles.specialBg : "",CommonStyles.card(theme,isDarkMode)])}>
       {special && !isMobile
          ? <img alt="Band Token" src=Images.bandToken className=Styles.bandToken /> : React.null}
       <div
@@ -63,116 +88,289 @@ module HighlightCard = {
   };
 };
 
+let getPrevDay = _ => {
+  MomentRe.momentNow()
+  |> MomentRe.Moment.defaultUtc
+  |> MomentRe.Moment.subtract(~duration=MomentRe.duration(1., `days))
+  |> MomentRe.Moment.format(Config.timestampUseFormat);
+};
+
 [@react.component]
 let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
+  let currentTime =
+    React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
+  let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay);
+
   let infoSub = React.useContext(GlobalContext.context);
-  let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
+  let (ThemeContext.{theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
+
   let activeValidatorCountSub = ValidatorSub.countByActive(true);
   let bondedTokenCountSub = ValidatorSub.getTotalBondedAmount();
+  let txsCountSub = TxSub.count();
+  let requestCountSub = RequestSub.count();
+  let latestBlock = BlockSub.getLatest();
+  let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
 
-  let validatorInfoSub = Sub.all2(activeValidatorCountSub, bondedTokenCountSub);
+  let validatorInfoSub = Sub.all3(activeValidatorCountSub, bondedTokenCountSub, avgBlockTimeSub);
   let allSub = Sub.all3(latestBlockSub, infoSub, validatorInfoSub);
 
-  <Row justify=Row.Between>
-    <Col col=Col.Three colSm=Col.Six mbSm=16>
-      <HighlightCard
-        label="Band Price"
-        special=true
-        valueAndExtraComponentSub={
-          let%Sub (_, {financial}, _) = allSub;
-          (
-            {
-              let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
-              <Text
-                value=bandPriceInUSD
-                size=Text.Xxxl
-                weight=Text.Semibold
-                color={theme.white}
-              />;
-            },
-            {
-              let bandPriceInBTC = financial.btcPrice;
+  <>
+    <Row justify=Row.Between>
+      <Col col=Col.Three colSm=Col.Six mbSm=16>
+        <HighlightCard
+          label="Band Price"
+          special=true
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, _) = allSub;
+            (
+              {
+                let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
+                <Text
+                  value=bandPriceInUSD
+                  size=Text.Xxxl
+                  weight=Text.Semibold
+                  color={theme.white}
+                />;
+              },
+              {
+                let bandPriceInBTC = financial.btcPrice;
 
+                <div
+                  className={Css.merge([
+                    CssHelper.flexBox(~justify=`spaceBetween, ()),
+                    Styles.fullWidth,
+                  ])}>
+                  <Text value={bandPriceInBTC->Format.fPretty ++ " BTC"} />
+                </div>;
+              },
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six mbSm=16>
+        <HighlightCard
+          label="Market Cap"
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, _) = allSub;
+            (
+              {
+                <Text
+                  value={"$" ++ (financial.usdMarketCap |> Format.fCurrency)}
+                  size=Text.Xxxl
+                  color={theme.neutral_900}
+                  weight=Text.Semibold
+                />;
+              },
+              {
+                let marketcap = financial.btcMarketCap;
+                <Text value={(marketcap |> Format.fPretty) ++ " BTC"} />;
+              },
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six>
+        <HighlightCard
+          label="Latest Block"
+          valueAndExtraComponentSub={
+            let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
+            (
+              <TypeID.Block id=height position=TypeID.Landing weight=Text.Semibold />,
+              <ValidatorMonikerLink
+                validatorAddress=operatorAddress
+                moniker
+                identity
+                width={`percent(100.)}
+                avatarWidth=20
+              />,
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+      <Col col=Col.Three colSm=Col.Six>
+        <HighlightCard
+          label="Active Validators"
+          valueAndExtraComponentSub={
+            let%Sub (_, {financial}, (activeValidatorCount, bondedTokenCount, avgBlockTime)) = allSub;
+            (
+              {
+                let activeValidators = activeValidatorCount->Format.iPretty ++ " Nodes";
+                <Text
+                  value=activeValidators
+                  size=Text.Xxxl
+                  color={theme.primary_600}
+                  weight=Text.Semibold
+                />;
+              },
+              <Text
+                value={"block time" ++ (avgBlockTime |> Format.fPretty(~digits=2)) ++ " secs"}
+                size=Text.Lg 
+                weight=Text.Regular 
+              />,
+            )
+            |> Sub.resolve;
+          }
+        />
+      </Col>
+    </Row>
+    <div className={Css.merge([CssHelper.flexBox(), Styles.longCard, CommonStyles.card(theme, isDarkMode)])}>
+      <div className=Styles.halfWidth>
+        <Row justify=Row.Between >
+            <Col col=Col.Six colSm=Col.Six>
               <div
                 className={Css.merge([
-                  CssHelper.flexBox(~justify=`spaceBetween, ()),
-                  Styles.fullWidth,
+                  Styles.innerLongCard,
+                  CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                <Text value={bandPriceInBTC->Format.fPretty ++ " BTC"} />
-              </div>;
-            },
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six mbSm=16>
-      <HighlightCard
-        label="Market Cap"
-        valueAndExtraComponentSub={
-          let%Sub (_, {financial}, _) = allSub;
-          (
-            {
-              <Text
-                value={"$" ++ (financial.usdMarketCap |> Format.fCurrency)}
-                size=Text.Xxxl
-                color={theme.neutral_900}
-                weight=Text.Semibold
-              />;
-            },
-            {
-              let marketcap = financial.btcMarketCap;
-              <Text value={(marketcap |> Format.fPretty) ++ " BTC"} />;
-            },
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six>
-      <HighlightCard
-        label="Latest Block"
-        valueAndExtraComponentSub={
-          let%Sub ({height, validator: {moniker, identity, operatorAddress}}, _, _) = allSub;
-          (
-            <TypeID.Block id=height position=TypeID.Landing weight=Text.Semibold />,
-            <ValidatorMonikerLink
-              validatorAddress=operatorAddress
-              moniker
-              identity
-              width={`percent(100.)}
-              avatarWidth=20
-            />,
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-    <Col col=Col.Three colSm=Col.Six>
-      <HighlightCard
-        label="Active Validators"
-        valueAndExtraComponentSub={
-          let%Sub (_, _, (activeValidatorCount, bondedTokenCount)) = allSub;
-          (
-            {
-              let activeValidators = activeValidatorCount->Format.iPretty ++ " Nodes";
-              <Text
-                value=activeValidators
-                size=Text.Xxxl
-                color={theme.primary_600}
-                weight=Text.Semibold
-              />;
-            },
-            <Text
-              value={
-                (bondedTokenCount |> Coin.getBandAmountFromCoin |> Format.fPretty)
-                ++ " BAND Bonded"
-              }
-            />,
-          )
-          |> Sub.resolve;
-        }
-      />
-    </Col>
-  </Row>;
+                {switch (txsCountSub) {
+                | Data(totalTxs) =>
+                  <>
+                    <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
+                    <Text 
+                      value={totalTxs |> string_of_int} 
+                      size=Text.Xxl 
+                      weight=Text.Bold 
+                      color=theme.neutral_900
+                    />
+                  </>
+                | _ =>
+                  <>
+                    <LoadingCensorBar width=90 height=18 />
+                    <LoadingCensorBar width=120 height=20 />
+                  </>
+                }}
+              </div>
+            </Col>
+            <Col col=Col.Six colSm=Col.Six>
+              <div
+                className={Css.merge([
+                  Styles.innerLongCard,
+                  CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+                ])}>
+                {switch (requestCountSub) {
+                | Data(requestCount) =>
+                  <>
+                    <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
+                    <Text 
+                      value={requestCount |> string_of_int} 
+                      size=Text.Xxl 
+                      weight=Text.Bold 
+                      color=theme.neutral_900
+                    />
+                  </>
+                | _ =>
+                  <>
+                    <LoadingCensorBar width=90 height=18 />
+                    <LoadingCensorBar width=120 height=20 />
+                  </>
+                }}
+              </div>
+            </Col>
+        </Row>
+      </div>
+      <Divider ml=16 mr=16 h=58 />
+      <div className=Styles.halfWidth>
+        <Row justify=Row.Between >
+          <Col col=Col.Three colSm=Col.Six>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (latestBlock) {
+              | Data({inflation}) =>
+                <>
+                  <Text value="Inflation Rate" size=Text.Lg weight=Text.Regular />
+                  <Text 
+                     value={(inflation *. 100. |> Format.fPretty(~digits=2)) ++ "%"}
+                    size=Text.Xxl 
+                    weight=Text.Bold 
+                    color=theme.neutral_900
+                  />
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+          <Col col=Col.Three colSm=Col.Six>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (allSub) {
+              | Data((_, {financial}, _)) =>
+                <>
+                  <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
+                  <Text 
+                    value={financial.circulatingSupply |> Format.fCurrency} 
+                    size=Text.Xxl 
+                    weight=Text.Bold 
+                    color=theme.neutral_900
+                  />
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+          <Col col=Col.Six colSm=Col.Six>
+            <div
+              className={Css.merge([
+                Styles.innerLongCard,
+                CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
+              ])}>
+              {switch (allSub) {
+              | Data((_, {financial}, (_, bondedTokenCount, _))) =>
+                <>
+                  <Text value="BAND Bonded" size=Text.Lg weight=Text.Regular />
+                  <div className=CssHelper.flexBox()>
+                    <div className=Styles.mr2>
+                      <Text 
+                        value={
+                          (
+                            ((bondedTokenCount |> Coin.getBandAmountFromCoin) /. financial.circulatingSupply *. 100.) 
+                            |> Format.fPretty(~digits=2)
+                          )
+                          ++ "%"
+                        }
+                        size=Text.Xxl 
+                        weight=Text.Bold 
+                        color=theme.neutral_900
+                      />
+                    </div>
+                    <Text 
+                      value={
+                        (bondedTokenCount |> Coin.getBandAmountFromCoin |> Format.fCurrency)
+                        ++ "/" ++ (financial.circulatingSupply |> Format.fCurrency)
+                        ++ " BAND"
+                      }
+                      size=Text.Md 
+                      weight=Text.Regular 
+                      color=theme.neutral_900
+                    />
+                  </div>
+                </>
+              | _ =>
+                <>
+                  <LoadingCensorBar width=90 height=18 />
+                  <LoadingCensorBar width=120 height=20 />
+                </>
+              }}
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  </>
 };
diff --git a/src/reusable/Divider.re b/src/reusable/Divider.re
index cedb3f84..afa57f9d 100644
--- a/src/reusable/Divider.re
+++ b/src/reusable/Divider.re
@@ -1,9 +1,9 @@
 module Styles = {
   open Css;
 
-  let container = (theme: Theme.t, ml, mr) => {
+  let container = (theme: Theme.t, ml, mr, h) => {
     style([
-      height(`px(32)),
+      height(`px(h)),
       width(`px(1)),
       marginLeft(`px(ml)),
       marginRight(`px(mr)),
@@ -14,7 +14,7 @@ module Styles = {
 };
 
 [@react.component]
-let make = (~ml=0, ~mr=0) => {
+let make = (~ml=0, ~mr=0, ~h=32) => {
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
-  <div className={Styles.container(theme, ml, mr)} />;
+  <div className={Styles.container(theme, ml, mr, h)} />;
 };
diff --git a/src/rpc/PriceHook.re b/src/rpc/PriceHook.re
index aca89bc2..784d1560 100644
--- a/src/rpc/PriceHook.re
+++ b/src/rpc/PriceHook.re
@@ -5,6 +5,8 @@ type t = {
   btcPrice: float,
   btcMarketCap: float,
   circulatingSupply: float,
+  totalSupply: float
+
 };
 
 let getBandUsd24Change = () => {
@@ -52,6 +54,16 @@ let getCirculatingSupply = () => {
      });
 };
 
+let getTotalSupply = () => {
+  Axios.get("https://api.bandchain.org/supply/total")
+  |> Js.Promise.then_(result => Promise.ret(result##data |> JsonUtils.Decode.float))
+  |> Js.Promise.catch(e => {
+      Js.Console.log("can't get totalsupply");
+      Js.Console.log(e);
+      Js.Promise.resolve(0.);
+     });
+};
+
 module Price = {
   type t = {
     multiplier: float,
@@ -93,10 +105,11 @@ let getBandInfo = client => {
   // let ratesPromise = client->BandChainJS.getReferenceData([|"BAND/USD", "BAND/BTC"|]);
   let ratesPromise = getPrices();
   let supplyPromise = getCirculatingSupply();
+  let totalPromise = getTotalSupply();
   let usd24HrChangePromise = getBandUsd24Change();
 
-  let%Promise (rates, usd24HrChange, supply) =
-    Js.Promise.all3((ratesPromise, usd24HrChangePromise, supplyPromise));
+  let%Promise (rates, usd24HrChange, supply, totalSupply) =
+    Js.Promise.all4((ratesPromise, usd24HrChangePromise, supplyPromise, totalPromise));
 
   let bandInfoOpt = {
     let%Opt (bandUsd, bandBtc) = rates;
@@ -107,6 +120,7 @@ let getBandInfo = client => {
       btcPrice: bandBtc,
       btcMarketCap: bandBtc *. supply,
       circulatingSupply: supply,
+      totalSupply
     });
   };
 

From 887c96187923e786364e50919cc954d02bb0805f Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Fri, 10 Feb 2023 14:48:01 +0700
Subject: [PATCH 12/18]  tx last 24 hr

---
 src/components/ChainInfoHighlights.re | 30 ++++++++++++++++-------
 src/subscriptions/BlockSub.re         | 34 +++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 9debe1cd..e66da305 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -110,7 +110,9 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
   let requestCountSub = RequestSub.count();
   let latestBlock = BlockSub.getLatest();
   let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
-
+  let txPast24Sub = BlockSub.getFirstTxOfTheDay(prevDayTime);
+  
+  let txInfoSub = Sub.all2(txPast24Sub,txsCountSub)
   let validatorInfoSub = Sub.all3(activeValidatorCountSub, bondedTokenCountSub, avgBlockTimeSub);
   let allSub = Sub.all3(latestBlockSub, infoSub, validatorInfoSub);
 
@@ -225,16 +227,26 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                {switch (txsCountSub) {
-                | Data(totalTxs) =>
+                {switch (txInfoSub) {
+                | Data((txs24, totalTxs)) =>
                   <>
                     <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
-                    <Text 
-                      value={totalTxs |> string_of_int} 
-                      size=Text.Xxl 
-                      weight=Text.Bold 
-                      color=theme.neutral_900
-                    />
+                    <div className=CssHelper.flexBox()>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={totalTxs |> string_of_int} 
+                          size=Text.Xxl 
+                          weight=Text.Bold 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                      <Text 
+                        value={"( " ++ ((totalTxs - txs24) |> string_of_int ) ++ " last 24 hr)"}
+                        size=Text.Md 
+                        weight=Text.Regular 
+                        color=theme.neutral_900
+                      />
+                    </div>
                   </>
                 | _ =>
                   <>
diff --git a/src/subscriptions/BlockSub.re b/src/subscriptions/BlockSub.re
index d4eabbe8..40d3cf57 100644
--- a/src/subscriptions/BlockSub.re
+++ b/src/subscriptions/BlockSub.re
@@ -3,6 +3,7 @@ open ValidatorSub.Mini;
 type aggregate_t = {count: int};
 
 type transactions_aggregate_t = {aggregate: option(aggregate_t)};
+type transaction_t = {id: option(int)};
 
 type resolve_request_t = {
   id: ID.Request.t,
@@ -60,6 +61,10 @@ type block_t = {
   requests: array(resolve_request_t),
 };
 
+type block_with_tx_t = {
+  transactions: array(transaction_t),
+};
+
 let toExternalBlock =
     ({height, hash, inflation, timestamp, validator, transactions_aggregate, requests}) => {
   height,
@@ -187,6 +192,35 @@ module BlockCountConsensusAddressConfig = [%graphql
 |}
 ];
 
+module BlockWithTxByTimestamp = [%graphql
+  {|
+  subscription BlockWithTxByTimestamp($greater: timestamp) {
+    blocks(limit: 20, where: {timestamp: {_gte: $greater}}) {
+      transactions {
+        id
+      }
+    }
+  }
+|}
+];
+
+// utility func
+let getFirstTxOfBlock = (blocks) => {
+    Belt.Array.reduce(blocks,[||], (acc, block) => {
+      Belt.Array.concat(acc, block##transactions)
+    }
+  )
+}
+
+let getFirstTxOfTheDay = (~timestamp) => {
+  let (result, _) =
+    ApolloHooks.useSubscription(
+      BlockWithTxByTimestamp.definition,
+      ~variables=BlockWithTxByTimestamp.makeVariables(~greater=timestamp |> Js.Json.string, ()),
+    );
+  result |> Sub.map(_, internal => internal##blocks -> getFirstTxOfBlock -> (txs => txs[0]##id));
+};
+
 let get = height => {
   let (result, _) =
     ApolloHooks.useSubscription(

From 4d93126492f4bdf023a671762cdb0b29f8170d1e Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Fri, 10 Feb 2023 18:43:52 +0700
Subject: [PATCH 13/18] last24 hours

---
 src/components/ChainInfoHighlights.re | 79 +++++++++++++++++++--------
 src/subscriptions/BlockSub.re         | 29 ----------
 src/subscriptions/RequestSub.re       | 22 ++++++++
 src/subscriptions/TxSub.re            | 22 ++++++++
 4 files changed, 100 insertions(+), 52 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index e66da305..2caf1a6f 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -95,6 +95,13 @@ let getPrevDay = _ => {
   |> MomentRe.Moment.format(Config.timestampUseFormat);
 };
 
+let getPrevDayUnix = _ => {
+  MomentRe.momentNow()
+  |> MomentRe.Moment.defaultUtc
+  |> MomentRe.Moment.subtract(~duration=MomentRe.duration(1., `days))
+  |> MomentRe.Moment.toUnix;
+};
+
 [@react.component]
 let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
   let currentTime =
@@ -107,12 +114,14 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
   let activeValidatorCountSub = ValidatorSub.countByActive(true);
   let bondedTokenCountSub = ValidatorSub.getTotalBondedAmount();
   let txsCountSub = TxSub.count();
+  let last24txsCountSub = TxSub.countOffset(prevDayTime);
   let requestCountSub = RequestSub.count();
+  let last24RequestCountSub = RequestSub.countOffset(getPrevDayUnix());
   let latestBlock = BlockSub.getLatest();
   let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
-  let txPast24Sub = BlockSub.getFirstTxOfTheDay(prevDayTime);
   
-  let txInfoSub = Sub.all2(txPast24Sub,txsCountSub)
+  let txInfoSub = Sub.all2(last24txsCountSub, txsCountSub);
+  let requestInfoSub = Sub.all2(last24RequestCountSub, requestCountSub);
   let validatorInfoSub = Sub.all3(activeValidatorCountSub, bondedTokenCountSub, avgBlockTimeSub);
   let allSub = Sub.all3(latestBlockSub, infoSub, validatorInfoSub);
 
@@ -120,19 +129,33 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
     <Row justify=Row.Between>
       <Col col=Col.Three colSm=Col.Six mbSm=16>
         <HighlightCard
-          label="Band Price"
+          label="BAND Price"
           special=true
           valueAndExtraComponentSub={
             let%Sub (_, {financial}, _) = allSub;
             (
               {
                 let bandPriceInUSD = "$" ++ (financial.usdPrice |> Format.fPretty(~digits=2));
-                <Text
-                  value=bandPriceInUSD
-                  size=Text.Xxxl
-                  weight=Text.Semibold
-                  color={theme.white}
-                />;
+                <div className=CssHelper.flexBox()>
+                  <div className=Styles.mr2>
+                    <Text 
+                      value=bandPriceInUSD
+                      size=Text.Xxl 
+                      weight=Text.Bold 
+                      color=theme.white
+                    />
+                  </div>
+                  <Text 
+                    value={
+                      (financial.usd24HrChange > 0. ? "+" : "") 
+                      ++ (financial.usd24HrChange |> Format.fPretty(~digits=2)) 
+                      ++ "%"
+                    }
+                    size=Text.Md 
+                    weight=Text.Regular 
+                    color=(financial.usd24HrChange > 0. ? theme.successColor : theme.failColor)
+                  />
+                </div>
               },
               {
                 let bandPriceInBTC = financial.btcPrice;
@@ -208,7 +231,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                 />;
               },
               <Text
-                value={"block time" ++ (avgBlockTime |> Format.fPretty(~digits=2)) ++ " secs"}
+                value={"block time " ++ (avgBlockTime |> Format.fPretty(~digits=2)) ++ " secs"}
                 size=Text.Lg 
                 weight=Text.Regular 
               />,
@@ -228,7 +251,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
                 {switch (txInfoSub) {
-                | Data((txs24, totalTxs)) =>
+                | Data((last24Tx, totalTxs)) =>
                   <>
                     <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
                     <div className=CssHelper.flexBox()>
@@ -241,7 +264,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                         />
                       </div>
                       <Text 
-                        value={"( " ++ ((totalTxs - txs24) |> string_of_int ) ++ " last 24 hr)"}
+                        value={"( " ++ (last24Tx |> string_of_int ) ++ " last 24 hr)"}
                         size=Text.Md 
                         weight=Text.Regular 
                         color=theme.neutral_900
@@ -262,16 +285,26 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                {switch (requestCountSub) {
-                | Data(requestCount) =>
+                {switch (requestInfoSub) {
+                | Data((last24Request, totalRequest)) =>
                   <>
                     <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
-                    <Text 
-                      value={requestCount |> string_of_int} 
-                      size=Text.Xxl 
-                      weight=Text.Bold 
-                      color=theme.neutral_900
-                    />
+                    <div className=CssHelper.flexBox()>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={totalRequest |> string_of_int} 
+                          size=Text.Xxl 
+                          weight=Text.Bold 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                      <Text 
+                        value={"( " ++ (last24Request |> string_of_int ) ++ " last 24 hr)"}
+                        size=Text.Md 
+                        weight=Text.Regular 
+                        color=theme.neutral_900
+                      />
+                    </div>
                   </>
                 | _ =>
                   <>
@@ -317,12 +350,12 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                 Styles.innerLongCard,
                 CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
               ])}>
-              {switch (allSub) {
-              | Data((_, {financial}, _)) =>
+              {switch (last24RequestCountSub) {
+              | Data(temp) =>
                 <>
                   <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
                   <Text 
-                    value={financial.circulatingSupply |> Format.fCurrency} 
+                    value={temp |> string_of_int} 
                     size=Text.Xxl 
                     weight=Text.Bold 
                     color=theme.neutral_900
diff --git a/src/subscriptions/BlockSub.re b/src/subscriptions/BlockSub.re
index 40d3cf57..97751de7 100644
--- a/src/subscriptions/BlockSub.re
+++ b/src/subscriptions/BlockSub.re
@@ -192,35 +192,6 @@ module BlockCountConsensusAddressConfig = [%graphql
 |}
 ];
 
-module BlockWithTxByTimestamp = [%graphql
-  {|
-  subscription BlockWithTxByTimestamp($greater: timestamp) {
-    blocks(limit: 20, where: {timestamp: {_gte: $greater}}) {
-      transactions {
-        id
-      }
-    }
-  }
-|}
-];
-
-// utility func
-let getFirstTxOfBlock = (blocks) => {
-    Belt.Array.reduce(blocks,[||], (acc, block) => {
-      Belt.Array.concat(acc, block##transactions)
-    }
-  )
-}
-
-let getFirstTxOfTheDay = (~timestamp) => {
-  let (result, _) =
-    ApolloHooks.useSubscription(
-      BlockWithTxByTimestamp.definition,
-      ~variables=BlockWithTxByTimestamp.makeVariables(~greater=timestamp |> Js.Json.string, ()),
-    );
-  result |> Sub.map(_, internal => internal##blocks -> getFirstTxOfBlock -> (txs => txs[0]##id));
-};
-
 let get = height => {
   let (result, _) =
     ApolloHooks.useSubscription(
diff --git a/src/subscriptions/RequestSub.re b/src/subscriptions/RequestSub.re
index c6d0f6f2..cede0fac 100644
--- a/src/subscriptions/RequestSub.re
+++ b/src/subscriptions/RequestSub.re
@@ -615,6 +615,18 @@ module RequestCountConfig = [%graphql
 |}
 ];
 
+module RequestCountWithOffsetConfig = [%graphql
+  {|
+  subscription RequestCount($request_time: Int) {
+    requests_aggregate(where: {request_time: {_gte: $request_time}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
 let get = id => {
   let (result, _) =
     ApolloHooks.useSubscription(
@@ -649,6 +661,16 @@ let count = () => {
   |> Sub.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
 };
 
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useSubscription(
+      RequestCountWithOffsetConfig.definition,
+      ~variables=RequestCountWithOffsetConfig.makeVariables(~request_time=timestamp, ()),
+    );
+  result
+  |> Sub.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
+
 let countByOracleScript = id => {
   let (result, _) =
     ApolloHooks.useSubscription(
diff --git a/src/subscriptions/TxSub.re b/src/subscriptions/TxSub.re
index e75aefb7..72377ef3 100644
--- a/src/subscriptions/TxSub.re
+++ b/src/subscriptions/TxSub.re
@@ -193,6 +193,18 @@ module TxCountConfig = [%graphql
 |}
 ];
 
+module TxCountWithOffsetConfig = [%graphql
+  {|
+  subscription TransactionsCount($greater: timestamp) {
+    transactions_aggregate(where: {block: {timestamp: {_gt: $greater }}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
 module TxCountBySenderConfig = [%graphql
   {|
   subscription TransactionsCountBySender($sender: String!) {
@@ -272,6 +284,16 @@ let count = () => {
   |> Sub.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
 };
 
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useSubscription(
+      TxCountWithOffsetConfig.definition,
+      ~variables=TxCountWithOffsetConfig.makeVariables(~greater=timestamp |> Js.Json.string, ()),
+    );
+  result
+  |> Sub.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
+
 let countBySender = sender => {
   let (result, _) =
     ApolloHooks.useSubscription(

From e50682f8712d2fb53b7c117ecef3097787880bcf Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Sun, 12 Feb 2023 16:19:06 +0700
Subject: [PATCH 14/18] calculate Avg Staking APR

---
 src/components/ChainInfoHighlights.re |  7 ++++---
 src/subscriptions/ValidatorSub.re     | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 2caf1a6f..8f53fbc2 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -119,6 +119,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
   let last24RequestCountSub = RequestSub.countOffset(getPrevDayUnix());
   let latestBlock = BlockSub.getLatest();
   let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
+  let avgCommissionSub = ValidatorSub.avgCommission(~isActive=true, ());
   
   let txInfoSub = Sub.all2(last24txsCountSub, txsCountSub);
   let requestInfoSub = Sub.all2(last24RequestCountSub, requestCountSub);
@@ -350,12 +351,12 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                 Styles.innerLongCard,
                 CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
               ])}>
-              {switch (last24RequestCountSub) {
-              | Data(temp) =>
+              {switch (avgCommissionSub) {
+              | Data(avgCommission) =>
                 <>
                   <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
                   <Text 
-                    value={temp |> string_of_int} 
+                    value={avgCommission |> Format.fPretty(~digits=2)} 
                     size=Text.Xxl 
                     weight=Text.Bold 
                     color=theme.neutral_900
diff --git a/src/subscriptions/ValidatorSub.re b/src/subscriptions/ValidatorSub.re
index b744b3e0..1709226c 100644
--- a/src/subscriptions/ValidatorSub.re
+++ b/src/subscriptions/ValidatorSub.re
@@ -263,6 +263,24 @@ let getList = (~isActive, ()) => {
      );
 };
 
+let avgCommission = (~isActive, ()) => {
+  let (result, _) =
+    ApolloHooks.useSubscription(
+      MultiConfig.definition,
+      ~variables=MultiConfig.makeVariables(~jailed=!isActive, ()),
+    );
+  result
+  |> Sub.map(_, x => {
+    let exclude100percent = x##validators ->Belt_Array.keep(({commissionRate} )=> commissionRate != 1.)
+    let length = Belt_Array.length(exclude100percent) |> float_of_int
+
+    exclude100percent
+    ->Belt_Array.reduce(0., (acc, {commissionRate}) => acc +. commissionRate)
+    ->(sum => sum /. length *. 100. )
+    }
+  );
+};
+
 let count = () => {
   let (result, _) = ApolloHooks.useSubscription(ValidatorCountConfig.definition);
   result

From bc14941b6929b2d03060110c119e194d16768854 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Sun, 12 Feb 2023 21:08:38 +0700
Subject: [PATCH 15/18] optimize use query instead of sub

---
 src/components/ChainInfoHighlights.re | 121 +++++++++++++++-----------
 src/query/RequestQuery.re             |  23 +++++
 src/query/TxQuery.re                  |  23 +++++
 src/subscriptions/RequestSub.re       |  22 -----
 src/subscriptions/TxSub.re            |  22 -----
 5 files changed, 118 insertions(+), 93 deletions(-)
 create mode 100644 src/query/RequestQuery.re
 create mode 100644 src/query/TxQuery.re

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 8f53fbc2..3902475f 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -95,7 +95,7 @@ let getPrevDay = _ => {
   |> MomentRe.Moment.format(Config.timestampUseFormat);
 };
 
-let getPrevDayUnix = _ => {
+let getUnixTime = _ => {
   MomentRe.momentNow()
   |> MomentRe.Moment.defaultUtc
   |> MomentRe.Moment.subtract(~duration=MomentRe.duration(1., `days))
@@ -107,25 +107,32 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
   let currentTime =
     React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
   let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay);
+  let (prevUnixTime, setPrevUnixTime) = React.useState(getUnixTime);
 
   let infoSub = React.useContext(GlobalContext.context);
   let (ThemeContext.{theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   let activeValidatorCountSub = ValidatorSub.countByActive(true);
   let bondedTokenCountSub = ValidatorSub.getTotalBondedAmount();
-  let txsCountSub = TxSub.count();
-  let last24txsCountSub = TxSub.countOffset(prevDayTime);
-  let requestCountSub = RequestSub.count();
-  let last24RequestCountSub = RequestSub.countOffset(getPrevDayUnix());
+  let latestTxsSub = TxSub.getList(~pageSize=1, ~page=1, ());
+  let last24txsCountSub = TxQuery.countOffset(prevDayTime);
+  let latestRequestSub = RequestSub.getList(~pageSize=1, ~page=1, ());
+  let last24RequestCountSub = RequestQuery.countOffset(prevUnixTime);
   let latestBlock = BlockSub.getLatest();
   let avgBlockTimeSub = BlockSub.getAvgBlockTime(prevDayTime, currentTime);
   let avgCommissionSub = ValidatorSub.avgCommission(~isActive=true, ());
   
-  let txInfoSub = Sub.all2(last24txsCountSub, txsCountSub);
-  let requestInfoSub = Sub.all2(last24RequestCountSub, requestCountSub);
   let validatorInfoSub = Sub.all3(activeValidatorCountSub, bondedTokenCountSub, avgBlockTimeSub);
   let allSub = Sub.all3(latestBlockSub, infoSub, validatorInfoSub);
 
+  React.useEffect0(() => {
+    let timeOutID = Js.Global.setInterval(() => {
+      setPrevDayTime(getPrevDay)
+      setPrevUnixTime(getUnixTime)
+    }, 600_000);
+    Some(() => {Js.Global.clearInterval(timeOutID)});
+  });
+
   <>
     <Row justify=Row.Between>
       <Col col=Col.Three colSm=Col.Six mbSm=16>
@@ -223,7 +230,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
             let%Sub (_, {financial}, (activeValidatorCount, bondedTokenCount, avgBlockTime)) = allSub;
             (
               {
-                let activeValidators = activeValidatorCount->Format.iPretty ++ " Nodes";
+                let activeValidators = activeValidatorCount->Format.iPretty;
                 <Text
                   value=activeValidators
                   size=Text.Xxxl
@@ -251,33 +258,41 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                {switch (txInfoSub) {
-                | Data((last24Tx, totalTxs)) =>
-                  <>
-                    <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
-                    <div className=CssHelper.flexBox()>
+                  <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
+                  <div className=CssHelper.flexBox()>
+                    {switch (latestTxsSub) {
+                    | Data((latestTx)) =>
                       <div className=Styles.mr2>
                         <Text 
-                          value={totalTxs |> string_of_int} 
+                          value={
+                            latestTx
+                            ->Belt.Array.get(0)
+                            ->Belt.Option.mapWithDefault(0, ({id}) => id )
+                            ->float_of_int
+                            ->Format.fCurrency
+                          }
                           size=Text.Xxl 
                           weight=Text.Bold 
                           color=theme.neutral_900
                         />
                       </div>
-                      <Text 
-                        value={"( " ++ (last24Tx |> string_of_int ) ++ " last 24 hr)"}
-                        size=Text.Md 
-                        weight=Text.Regular 
-                        color=theme.neutral_900
-                      />
-                    </div>
-                  </>
-                | _ =>
-                  <>
-                    <LoadingCensorBar width=90 height=18 />
-                    <LoadingCensorBar width=120 height=20 />
-                  </>
-                }}
+                    | _ =>
+                      <LoadingCensorBar width=90 height=18 />
+                    }}
+                    {switch (last24txsCountSub) {
+                    | Data((last24Tx)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={"( " ++ (last24Tx |> float_of_int |> Format.fCurrency ) ++ " last 24 hr)"}
+                          size=Text.Md 
+                          weight=Text.Regular 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=120 height=20 />
+                    }}
+                  </div>
               </div>
             </Col>
             <Col col=Col.Six colSm=Col.Six>
@@ -286,33 +301,41 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                {switch (requestInfoSub) {
-                | Data((last24Request, totalRequest)) =>
-                  <>
-                    <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
-                    <div className=CssHelper.flexBox()>
+                  <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
+                  <div className=CssHelper.flexBox()>
+                    {switch (latestRequestSub) {
+                    | Data((latestRequest)) =>
                       <div className=Styles.mr2>
                         <Text 
-                          value={totalRequest |> string_of_int} 
+                          value={
+                            latestRequest
+                            ->Belt.Array.get(0)
+                            ->Belt.Option.mapWithDefault(0, ({id}) => id |> ID.Request.toInt)
+                            ->float_of_int
+                            ->Format.fCurrency
+                          }
                           size=Text.Xxl 
                           weight=Text.Bold 
                           color=theme.neutral_900
                         />
                       </div>
-                      <Text 
-                        value={"( " ++ (last24Request |> string_of_int ) ++ " last 24 hr)"}
-                        size=Text.Md 
-                        weight=Text.Regular 
-                        color=theme.neutral_900
-                      />
-                    </div>
-                  </>
-                | _ =>
-                  <>
-                    <LoadingCensorBar width=90 height=18 />
-                    <LoadingCensorBar width=120 height=20 />
-                  </>
-                }}
+                    | _ =>
+                      <LoadingCensorBar width=90 height=18 />
+                    }}
+                    {switch (last24RequestCountSub) {
+                    | Data((last24Request)) =>
+                      <div className=Styles.mr2>
+                        <Text 
+                          value={"( " ++ (last24Request |> float_of_int |> Format.fCurrency ) ++ " last 24 hr)"}
+                          size=Text.Md 
+                          weight=Text.Regular 
+                          color=theme.neutral_900
+                        />
+                      </div>
+                    | _ =>
+                      <LoadingCensorBar width=120 height=20 />
+                    }}
+                  </div>
               </div>
             </Col>
         </Row>
@@ -356,7 +379,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                 <>
                   <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
                   <Text 
-                    value={avgCommission |> Format.fPretty(~digits=2)} 
+                    value={(avgCommission |> Format.fPretty(~digits=2)) ++ "%"} 
                     size=Text.Xxl 
                     weight=Text.Bold 
                     color=theme.neutral_900
diff --git a/src/query/RequestQuery.re b/src/query/RequestQuery.re
new file mode 100644
index 00000000..94dc56e2
--- /dev/null
+++ b/src/query/RequestQuery.re
@@ -0,0 +1,23 @@
+open RequestSub
+
+module RequestCountWithOffsetConfig = [%graphql
+  {|
+  query RequestCount($request_time: Int) {
+    requests_aggregate(where: {request_time: {_gte: $request_time}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useQuery(
+      RequestCountWithOffsetConfig.definition,
+      ~variables=RequestCountWithOffsetConfig.makeVariables(~request_time=timestamp, ()),
+    );
+  result
+  |> Query.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
diff --git a/src/query/TxQuery.re b/src/query/TxQuery.re
new file mode 100644
index 00000000..9e2f8b4b
--- /dev/null
+++ b/src/query/TxQuery.re
@@ -0,0 +1,23 @@
+open TxSub
+
+module TxCountWithOffsetConfig = [%graphql
+  {|
+  query TransactionsCount($greater: timestamp) {
+    transactions_aggregate(where: {block: {timestamp: {_gt: $greater }}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+|}
+];
+
+let countOffset = (~timestamp) => {
+  let (result, _) = 
+    ApolloHooks.useQuery(
+      TxCountWithOffsetConfig.definition,
+      ~variables=TxCountWithOffsetConfig.makeVariables(~greater=timestamp |> Js.Json.string, ()),
+    );
+  result
+  |> Query.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
+};
diff --git a/src/subscriptions/RequestSub.re b/src/subscriptions/RequestSub.re
index cede0fac..c6d0f6f2 100644
--- a/src/subscriptions/RequestSub.re
+++ b/src/subscriptions/RequestSub.re
@@ -615,18 +615,6 @@ module RequestCountConfig = [%graphql
 |}
 ];
 
-module RequestCountWithOffsetConfig = [%graphql
-  {|
-  subscription RequestCount($request_time: Int) {
-    requests_aggregate(where: {request_time: {_gte: $request_time}}) {
-      aggregate {
-        count
-      }
-    }
-  }
-|}
-];
-
 let get = id => {
   let (result, _) =
     ApolloHooks.useSubscription(
@@ -661,16 +649,6 @@ let count = () => {
   |> Sub.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
 };
 
-let countOffset = (~timestamp) => {
-  let (result, _) = 
-    ApolloHooks.useSubscription(
-      RequestCountWithOffsetConfig.definition,
-      ~variables=RequestCountWithOffsetConfig.makeVariables(~request_time=timestamp, ()),
-    );
-  result
-  |> Sub.map(_, x => x##requests_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
-};
-
 let countByOracleScript = id => {
   let (result, _) =
     ApolloHooks.useSubscription(
diff --git a/src/subscriptions/TxSub.re b/src/subscriptions/TxSub.re
index 72377ef3..e75aefb7 100644
--- a/src/subscriptions/TxSub.re
+++ b/src/subscriptions/TxSub.re
@@ -193,18 +193,6 @@ module TxCountConfig = [%graphql
 |}
 ];
 
-module TxCountWithOffsetConfig = [%graphql
-  {|
-  subscription TransactionsCount($greater: timestamp) {
-    transactions_aggregate(where: {block: {timestamp: {_gt: $greater }}}) {
-      aggregate {
-        count
-      }
-    }
-  }
-|}
-];
-
 module TxCountBySenderConfig = [%graphql
   {|
   subscription TransactionsCountBySender($sender: String!) {
@@ -284,16 +272,6 @@ let count = () => {
   |> Sub.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
 };
 
-let countOffset = (~timestamp) => {
-  let (result, _) = 
-    ApolloHooks.useSubscription(
-      TxCountWithOffsetConfig.definition,
-      ~variables=TxCountWithOffsetConfig.makeVariables(~greater=timestamp |> Js.Json.string, ()),
-    );
-  result
-  |> Sub.map(_, x => x##transactions_aggregate##aggregate |> Belt_Option.getExn |> (y => y##count));
-};
-
 let countBySender = sender => {
   let (result, _) =
     ApolloHooks.useSubscription(

From 76c724fe19c98fed6fd1ac8796883a8ee6ecdd97 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Sun, 12 Feb 2023 22:12:40 +0700
Subject: [PATCH 16/18] fix status badge in mobile

---
 src/components/ChainInfoHighlights.re | 50 ++++++++++++++++++---------
 src/components/LatestTxTable.re       | 22 ++----------
 src/components/MsgBadgeGroup.re       | 16 +++++++++
 src/components/StatusIcon.re          | 32 +++++++++++++++++
 src/images/fail.svg                   | 15 ++++++--
 src/images/success.svg                | 10 ++++--
 src/pages/HomePage.re                 |  4 ---
 src/reusable/InfoMobileCard.re        |  5 +--
 src/reusable/Text.re                  |  2 +-
 9 files changed, 108 insertions(+), 48 deletions(-)
 create mode 100644 src/components/MsgBadgeGroup.re
 create mode 100644 src/components/StatusIcon.re

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 3902475f..55511ebd 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -35,25 +35,30 @@ module Styles = {
     style([
       width(`percent(100.)),
       marginTop(`px(24)),
-      padding2(~v=`zero, ~h=`px(24)),
-      // margin2(~v=`zero, ~h=`px(12)),
+      padding2(~v=`px(4), ~h=`px(24)),
     ]);
 
   let innerLongCard =
     style([
       minHeight(`px(106)),
       padding2(~v=`px(24), ~h=`px(12)),
-      Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(304))]),
+      Media.mobile([padding2(~v=`px(10), ~h=`px(12)), minHeight(`px(50))]),
     ]);
 
   let halfWidth =
     style([
-      width(`calc((`sub, `percent(50.), `px(17))))
+      width(`calc((`sub, `percent(50.), `px(17)))),
+      Media.mobile([width(`percent(100.))]),
     ]);
 
   let mr2 =
     style([
-      marginRight(`px(16))
+      marginRight(`px(16)),
+    ]);
+
+  let pb = 
+    style([
+      Media.mobile([paddingBottom(`px(4))]),
     ]);
   };
 
@@ -104,6 +109,7 @@ let getUnixTime = _ => {
 
 [@react.component]
 let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
+  let isMobile = Media.isMobile();
   let currentTime =
     React.useContext(TimeContext.context) |> MomentRe.Moment.format(Config.timestampUseFormat);
   let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay);
@@ -148,7 +154,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   <div className=Styles.mr2>
                     <Text 
                       value=bandPriceInUSD
-                      size=Text.Xxl 
+                      size=Text.Xxxl 
                       weight=Text.Bold 
                       color=theme.white
                     />
@@ -252,13 +258,15 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
     <div className={Css.merge([CssHelper.flexBox(), Styles.longCard, CommonStyles.card(theme, isDarkMode)])}>
       <div className=Styles.halfWidth>
         <Row justify=Row.Between >
-            <Col col=Col.Six colSm=Col.Six>
+            <Col col=Col.Six colSm=Col.Twelve>
               <div
                 className={Css.merge([
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                  <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
+                  <div className=Styles.pb>
+                    <Text value="Total Transactions" size=Text.Lg weight=Text.Regular />
+                  </div>
                   <div className=CssHelper.flexBox()>
                     {switch (latestTxsSub) {
                     | Data((latestTx)) =>
@@ -295,13 +303,15 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                   </div>
               </div>
             </Col>
-            <Col col=Col.Six colSm=Col.Six>
+            <Col col=Col.Six colSm=Col.Twelve>
               <div
                 className={Css.merge([
                   Styles.innerLongCard,
                   CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),
                 ])}>
-                  <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
+                  <div className=Styles.pb>
+                    <Text value="Total Requests" size=Text.Lg weight=Text.Regular />
+                  </div>
                   <div className=CssHelper.flexBox()>
                     {switch (latestRequestSub) {
                     | Data((latestRequest)) =>
@@ -340,10 +350,10 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
             </Col>
         </Row>
       </div>
-      <Divider ml=16 mr=16 h=58 />
+      {isMobile ? React.null : <Divider ml=16 mr=16 h=58 />}
       <div className=Styles.halfWidth>
         <Row justify=Row.Between >
-          <Col col=Col.Three colSm=Col.Six>
+          <Col col=Col.Three colSm=Col.Twelve>
             <div
               className={Css.merge([
                 Styles.innerLongCard,
@@ -352,7 +362,9 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               {switch (latestBlock) {
               | Data({inflation}) =>
                 <>
-                  <Text value="Inflation Rate" size=Text.Lg weight=Text.Regular />
+                  <div className=Styles.pb>
+                    <Text value="Inflation Rate" size=Text.Lg weight=Text.Regular />
+                  </div>
                   <Text 
                      value={(inflation *. 100. |> Format.fPretty(~digits=2)) ++ "%"}
                     size=Text.Xxl 
@@ -368,7 +380,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               }}
             </div>
           </Col>
-          <Col col=Col.Three colSm=Col.Six>
+          <Col col=Col.Three colSm=Col.Twelve>
             <div
               className={Css.merge([
                 Styles.innerLongCard,
@@ -377,7 +389,9 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               {switch (avgCommissionSub) {
               | Data(avgCommission) =>
                 <>
-                  <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
+                  <div className=Styles.pb>
+                    <Text value="Staking APR" size=Text.Lg weight=Text.Regular />
+                  </div>
                   <Text 
                     value={(avgCommission |> Format.fPretty(~digits=2)) ++ "%"} 
                     size=Text.Xxl 
@@ -393,7 +407,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               }}
             </div>
           </Col>
-          <Col col=Col.Six colSm=Col.Six>
+          <Col col=Col.Six colSm=Col.Twelve>
             <div
               className={Css.merge([
                 Styles.innerLongCard,
@@ -402,7 +416,9 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
               {switch (allSub) {
               | Data((_, {financial}, (_, bondedTokenCount, _))) =>
                 <>
-                  <Text value="BAND Bonded" size=Text.Lg weight=Text.Regular />
+                  <div className=Styles.pb>
+                    <Text value="BAND Bonded" size=Text.Lg weight=Text.Regular />
+                  </div>
                   <div className=CssHelper.flexBox()>
                     <div className=Styles.mr2>
                       <Text 
diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index 3492ce96..98f162e0 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -5,24 +5,6 @@ module Styles = {
   let textMRight = style([marginRight(`px(6))]);
 };
 
-module MsgBadgeGroup = {
-  [@react.component]
-  let make = (~messages, ~txHash) => {
-    let theme = List.nth(messages, 0) |> MsgDecoder.getBadgeTheme;
-    let length = List.length(messages);
-
-    <div className={CssHelper.flexBox(~direction=`row, ())}>
-      <MsgBadge name=theme.name />
-      {
-        length > 1 ? <Text 
-        value={"+" ++ ((length - 1) |> string_of_int)}
-        size=Text.Md
-        transform=Text.Uppercase /> : React.null
-      }
-    </div>;
-    
-  }
-}
 module RenderBody = {
   [@react.component]
   let make = (~txSub: ApolloHooks.Subscription.variant(TxSub.t)) => {
@@ -76,7 +58,8 @@ module RenderBodyMobile = {
         values=InfoMobileCard.[
           ("Tx Hash", TxHash(txHash, isSmallMobile ? 170 : 200)),
           ("Block", Height(blockHeight)),
-          ("Actions", Messages(txHash, messages, success, errMsg)),
+          ("Actions", MsgBadgeGroup(txHash, messages)),
+          ("Status", Status(success)),
         ]
         key={txHash |> Hash.toHex}
         idx={txHash |> Hash.toHex}
@@ -95,6 +78,7 @@ module RenderBodyMobile = {
               },
             ),
           ),
+          ("Status", Loading(70)),
         ]
         key={reserveIndex |> string_of_int}
         idx={reserveIndex |> string_of_int}
diff --git a/src/components/MsgBadgeGroup.re b/src/components/MsgBadgeGroup.re
new file mode 100644
index 00000000..bf1b6355
--- /dev/null
+++ b/src/components/MsgBadgeGroup.re
@@ -0,0 +1,16 @@
+[@react.component]
+  let make = (~txHash, ~messages) => {
+    let theme = List.nth(messages, 0) |> MsgDecoder.getBadgeTheme;
+    let length = List.length(messages);
+
+    <div className={CssHelper.flexBox(~direction=`row, ())}>
+      <MsgBadge name=theme.name />
+      {
+        length > 1 ? <Text 
+        value={"+" ++ ((length - 1) |> string_of_int)}
+        size=Text.Md
+        transform=Text.Uppercase /> : React.null
+      }
+    </div>;
+    
+  }
diff --git a/src/components/StatusIcon.re b/src/components/StatusIcon.re
new file mode 100644
index 00000000..1f60ffd8
--- /dev/null
+++ b/src/components/StatusIcon.re
@@ -0,0 +1,32 @@
+module Styles = {
+  open Css;
+
+  let statusImg = style([
+    width(`px(20)),
+    // marginTop(`px(-3)),
+    marginRight(`px(8))
+  ]);
+};
+
+[@react.component]
+  let make = (~status) => {
+    let isMobile = Media.isMobile();
+    let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
+    <div>
+      <img
+        alt="Status Icon"
+        src={status ? Images.success : Images.fail}
+        className=Styles.statusImg
+      />
+      {
+        isMobile ? 
+        <Text 
+          value={status ? "Success" : "Fail"} 
+          size=Text.Sm 
+          color={status ? theme.successColor : theme.failColor}
+        /> 
+        : React.null
+      }
+    </div>
+  }
+
diff --git a/src/images/fail.svg b/src/images/fail.svg
index 0b8d02c4..3fb57754 100644
--- a/src/images/fail.svg
+++ b/src/images/fail.svg
@@ -1,5 +1,14 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 20C4.48593 20 0 15.5141 0 10C0 4.48593 4.48593 0 10 0C15.5141 0 20 4.48593 20 10C20 15.5141 15.5141 20 10 20ZM10 1.42853C5.27374 1.42853 1.42853 5.27374 1.42853 10C1.42853 14.7263 5.27374 18.5715 10 18.5715C14.7263 18.5715 18.5715 14.7263 18.5715 10C18.5715 5.27374 14.7263 1.42853 10 1.42853Z" fill="#E84A4B"/>
-<path d="M13.5715 14.2857C13.3887 14.2857 13.2059 14.216 13.0664 14.0764L5.92361 6.93359C5.64452 6.65451 5.64452 6.20254 5.92361 5.92361C6.20254 5.64468 6.65466 5.64453 6.93359 5.92361L14.0764 13.0664C14.3555 13.3455 14.3555 13.7975 14.0764 14.0764C13.9369 14.216 13.7543 14.2857 13.5715 14.2857Z" fill="#E84A4B"/>
-<path d="M6.42852 14.2857C6.24572 14.2857 6.06307 14.216 5.92361 14.0764C5.64452 13.7974 5.64452 13.3453 5.92361 13.0664L13.0664 5.92361C13.3455 5.64452 13.7974 5.64452 14.0764 5.92361C14.3553 6.20254 14.3555 6.65466 14.0764 6.93359L6.93359 14.0764C6.79412 14.216 6.61132 14.2857 6.42852 14.2857Z" fill="#E84A4B"/>
+  <path
+    d="M10 20C4.48593 20 0 15.5141 0 10C0 4.48593 4.48593 0 10 0C15.5141 0 20 4.48593 20 10C20 15.5141 15.5141 20 10 20ZM10 1.42853C5.27374 1.42853 1.42853 5.27374 1.42853 10C1.42853 14.7263 5.27374 18.5715 10 18.5715C14.7263 18.5715 18.5715 14.7263 18.5715 10C18.5715 5.27374 14.7263 1.42853 10 1.42853Z"
+    fill="#E22E1D"
+  />
+  <path
+    d="M13.5715 14.2857C13.3887 14.2857 13.2059 14.216 13.0664 14.0764L5.92361 6.93359C5.64452 6.65451 5.64452 6.20254 5.92361 5.92361C6.20254 5.64468 6.65466 5.64453 6.93359 5.92361L14.0764 13.0664C14.3555 13.3455 14.3555 13.7975 14.0764 14.0764C13.9369 14.216 13.7543 14.2857 13.5715 14.2857Z"
+    fill="#E22E1D"
+  />
+  <path
+    d="M6.42852 14.2857C6.24572 14.2857 6.06307 14.216 5.92361 14.0764C5.64452 13.7974 5.64452 13.3453 5.92361 13.0664L13.0664 5.92361C13.3455 5.64452 13.7974 5.64452 14.0764 5.92361C14.3553 6.20254 14.3555 6.65466 14.0764 6.93359L6.93359 14.0764C6.79412 14.216 6.61132 14.2857 6.42852 14.2857Z"
+    fill="#E22E1D"
+  />
 </svg>
diff --git a/src/images/success.svg b/src/images/success.svg
index a9ac5c47..1438037b 100644
--- a/src/images/success.svg
+++ b/src/images/success.svg
@@ -1,4 +1,10 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3392 7.32756C14.0142 7.00214 13.4858 7.00214 13.1608 7.32756L9.58333 10.9047L8.08916 9.4109C7.76416 9.08548 7.23583 9.08548 6.91083 9.4109C6.58541 9.73632 6.58541 10.2638 6.91083 10.5892L8.99416 12.6726C9.15666 12.8355 9.36999 12.9167 9.58333 12.9167C9.79666 12.9167 10.01 12.8355 10.1725 12.6726L14.3392 8.5059C14.6646 8.18048 14.6646 7.65298 14.3392 7.32756Z" fill="#5FD3C8"/>
-<path d="M19.1667 9.16667C18.7067 9.16667 18.3333 9.54 18.3333 10C18.3333 14.595 14.595 18.3333 10 18.3333C5.405 18.3333 1.66667 14.595 1.66667 10C1.66667 5.405 5.405 1.66667 10 1.66667C12.2371 1.66667 14.3371 2.54083 15.9137 4.12833C16.2375 4.45542 16.7654 4.45708 17.0921 4.1325C17.4187 3.80833 17.4204 3.28083 17.0962 2.95417C15.2046 1.04917 12.6842 0 10 0C4.48583 0 0 4.48583 0 10C0 15.5142 4.48583 20 10 20C15.5142 20 20 15.5142 20 10C20 9.54 19.6267 9.16667 19.1667 9.16667Z" fill="#5FD3C8"/>
+  <path
+    d="M14.3392 7.32756C14.0142 7.00214 13.4858 7.00214 13.1608 7.32756L9.58333 10.9047L8.08916 9.4109C7.76416 9.08548 7.23583 9.08548 6.91083 9.4109C6.58541 9.73632 6.58541 10.2638 6.91083 10.5892L8.99416 12.6726C9.15666 12.8355 9.36999 12.9167 9.58333 12.9167C9.79666 12.9167 10.01 12.8355 10.1725 12.6726L14.3392 8.5059C14.6646 8.18048 14.6646 7.65298 14.3392 7.32756Z"
+    fill="#3FCA7E"
+  />
+  <path
+    d="M19.1667 9.16667C18.7067 9.16667 18.3333 9.54 18.3333 10C18.3333 14.595 14.595 18.3333 10 18.3333C5.405 18.3333 1.66667 14.595 1.66667 10C1.66667 5.405 5.405 1.66667 10 1.66667C12.2371 1.66667 14.3371 2.54083 15.9137 4.12833C16.2375 4.45542 16.7654 4.45708 17.0921 4.1325C17.4187 3.80833 17.4204 3.28083 17.0962 2.95417C15.2046 1.04917 12.6842 0 10 0C4.48583 0 0 4.48583 0 10C0 15.5142 4.48583 20 10 20C15.5142 20 20 15.5142 20 10C20 9.54 19.6267 9.16667 19.1667 9.16667Z"
+    fill="#3FCA7E"
+  />
 </svg>
diff --git a/src/pages/HomePage.re b/src/pages/HomePage.re
index 67f1ebf0..bd716517 100644
--- a/src/pages/HomePage.re
+++ b/src/pages/HomePage.re
@@ -40,10 +40,6 @@ let make = () => {
         <Col col=Col.Six> <LatestTxTable /> </Col>
         <Col col=Col.Six> <LatestRequests latest5RequestSub /> </Col>
       </Row>
-      // <Row marginTop=24>
-      //   <Col col=Col.Four> <LatestBlocks blocksSub=latest5BlocksSub /> </Col>
-      //   <Col col=Col.Six mbSm=24> <TotalRequestsGraph latest5RequestSub /> </Col>
-      // </Row>
     </div>
   </Section>;
 };
diff --git a/src/reusable/InfoMobileCard.re b/src/reusable/InfoMobileCard.re
index 704532f5..0f80b4cd 100644
--- a/src/reusable/InfoMobileCard.re
+++ b/src/reusable/InfoMobileCard.re
@@ -34,6 +34,7 @@ type t =
   | BlockHash(Hash.t)
   | Validator(Address.t, string, string)
   | Messages(Hash.t, list(MsgDecoder.t), bool, string)
+  | MsgBadgeGroup(Hash.t, list(MsgDecoder.t))
   | PubKey(PubKey.t)
   | Badge(MsgDecoder.badge_theme_t)
   | VotingPower(Coin.t, float)
@@ -168,6 +169,7 @@ let make = (~info) => {
       color={theme.neutral_900}
     />
   | Messages(txHash, messages, success, errMsg) => <TxMessages txHash messages success errMsg />
+  | MsgBadgeGroup(txHash, messages) => <MsgBadgeGroup txHash messages />
   | Badge({name, category}) => <MsgBadge name />
   | VotingPower(tokens, votingPercent) =>
     <div className=Styles.vFlex>
@@ -182,8 +184,7 @@ let make = (~info) => {
         block=true
       />
     </div>
-  | Status(status) =>
-    <img alt="Status Icon" src={status ? Images.success : Images.fail} className=Styles.logo />
+  | Status(status) => <StatusIcon status />
 
   // Special case for uptime to have loading state inside.
   | Uptime(uptimeOpt) =>
diff --git a/src/reusable/Text.re b/src/reusable/Text.re
index 34dd0092..be79ef1a 100644
--- a/src/reusable/Text.re
+++ b/src/reusable/Text.re
@@ -103,7 +103,7 @@ module Styles = {
       | Xl =>
         style([
           fontSize(`px(16)),
-          lineHeight(`em(1.41)),
+          lineHeight(`px(26)),
           Media.smallMobile([fontSize(`px(14))]),
         ])
       | Xxl => style([fontSize(`px(18)), Media.smallMobile([fontSize(`px(16))])])

From 36979b44a0c074cc73cbed8370de1af2913901e8 Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Mon, 13 Feb 2023 00:53:11 +0700
Subject: [PATCH 17/18] finish table mobile version

---
 src/components/ChainInfoHighlights.re |   5 +
 src/components/LatestRequests.re      | 209 +++++++++++++-------------
 src/components/LatestTxTable.re       | 146 ++++++++++--------
 src/components/RequestStatus.re       |  13 +-
 src/components/StatusIcon.re          |   5 +-
 src/reusable/InfoMobileCard.re        |   9 +-
 src/reusable/MobileCard.re            |  13 +-
 7 files changed, 214 insertions(+), 186 deletions(-)

diff --git a/src/components/ChainInfoHighlights.re b/src/components/ChainInfoHighlights.re
index 55511ebd..185f09e6 100644
--- a/src/components/ChainInfoHighlights.re
+++ b/src/components/ChainInfoHighlights.re
@@ -281,6 +281,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                           }
                           size=Text.Xxl 
                           weight=Text.Bold 
+                          height={Text.Px(20)}
                           color=theme.neutral_900
                         />
                       </div>
@@ -326,6 +327,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                           }
                           size=Text.Xxl 
                           weight=Text.Bold 
+                          height={Text.Px(20)}
                           color=theme.neutral_900
                         />
                       </div>
@@ -369,6 +371,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                      value={(inflation *. 100. |> Format.fPretty(~digits=2)) ++ "%"}
                     size=Text.Xxl 
                     weight=Text.Bold 
+                    height={Text.Px(20)}
                     color=theme.neutral_900
                   />
                 </>
@@ -396,6 +399,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                     value={(avgCommission |> Format.fPretty(~digits=2)) ++ "%"} 
                     size=Text.Xxl 
                     weight=Text.Bold 
+                      height={Text.Px(20)}
                     color=theme.neutral_900
                   />
                 </>
@@ -442,6 +446,7 @@ let make = (~latestBlockSub: Sub.t(BlockSub.t)) => {
                       }
                       size=Text.Md 
                       weight=Text.Regular 
+                      height={Text.Px(20)}
                       color=theme.neutral_900
                     />
                   </div>
diff --git a/src/components/LatestRequests.re b/src/components/LatestRequests.re
index 53ed74b7..da297f45 100644
--- a/src/components/LatestRequests.re
+++ b/src/components/LatestRequests.re
@@ -13,6 +13,7 @@ module Styles = {
       boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, `num(0.2)))),
     ]);
   let textMRight = style([marginRight(`px(6))]);
+  let headingContainer = style([marginTop(`px(40)), marginBottom(`px(16))]);
 };
 
 module RenderBody = {
@@ -73,7 +74,7 @@ module RenderBodyMobile = {
         values=InfoMobileCard.[
           ("Request ID", RequestID(id)),
           ("Oracle Script", OracleScript(oracleScriptID, name)),
-          ("Report Status", Text({j|$reportedCount of $requestedCount|j})),
+          ("Report Status", RequestStatus(resolveStatus, {j|$reportedCount of $requestedCount|j})),
         ]
         key={id |> ID.Request.toString}
         idx={id |> ID.Request.toString}
@@ -98,108 +99,110 @@ let make = (~latest5RequestSub: Sub.t(array(RequestSub.t))) => {
   let isMobile = Media.isMobile();
   let (ThemeContext.{theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
-  <Table>
-    <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0 alignItems=Row.Center>
-      <Col col=Col.Six colSm=Col.Six>
-        {isMobile
-           ? <>
-               <Heading value="Total Request" size=Heading.H4 />
-               <VSpacing size={`px(4)} />
-               {switch (latest5RequestSub) {
-                | ApolloHooks.Subscription.Data(requests) =>
-                  <Text
-                    value={
-                      requests
-                      ->Belt.Array.get(0)
-                      ->Belt.Option.mapWithDefault(0, ({id}) => id |> ID.Request.toInt)
-                      ->Format.iPretty
-                    }
-                    size=Text.Lg
-                    weight=Text.Medium
+  <>
+    {isMobile ? <div className={Css.merge([CssHelper.flexBox(~justify=`spaceBetween, ()), Styles.headingContainer])}>
+      <Heading value="Latest Request" size=Heading.H4 />
+      <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+        <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
+          <div className=Styles.textMRight>
+            <Text 
+              value="View All" 
+              size=Text.Md 
+              weight=Text.Semibold 
+              underline=true 
+              color=theme.neutral_900 
+            />
+          </div>
+          <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+        </Link>
+      </div>
+    </div> : React.null }
+    <Table>
+      {isMobile
+        ? React.null
+        : <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
+          <Col col=Col.Six colSm=Col.Six>
+            <Heading value="Latest Requests" size=Heading.H4 />
+          </Col>
+          <Col col=Col.Six colSm=Col.Six>
+            <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+              <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
+                <div className=Styles.textMRight>
+                  <Text 
+                    value="All Requests" 
+                    size=Text.Md 
+                    weight=Text.Semibold 
+                    underline=true 
+                    color=theme.neutral_900 
                   />
-                | _ => <LoadingCensorBar width=90 height=18 />
-                }}
-             </>
-           : <Heading value="Latest Requests" size=Heading.H4 />}
-      </Col>
-      <Col col=Col.Six colSm=Col.Six>
-        <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.RequestHomePage>
-            <div className=Styles.textMRight>
-              <Text 
-                value="All Requests" 
-                size=Text.Md 
-                weight=Text.Semibold 
-                underline=true 
-                color=theme.neutral_900 
-              />
+                </div>
+                <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+              </Link>
             </div>
-            <Icon name="far fa-arrow-right" color=theme.neutral_900 />
-          </Link>
-        </div>
-      </Col>
-    </Row>
-    {isMobile
-       ? React.null
-       : <THead height=30>
-           <Row alignItems=Row.Center>
-             <Col col=Col.Three>
-               <Text
-                 block=true
-                 value="Request ID"
-                 size=Text.Sm
-                 weight=Text.Semibold
-               />
-             </Col>
-             <Col col=Col.Six>
-               <Text
-                 block=true
-                 value="Oracle Script"
-                 size=Text.Sm
-                 weight=Text.Semibold
-               />
-             </Col>
-             <Col col=Col.Three>
-               <Text
-                 block=true
-                 value="Report Status"
-                 size=Text.Sm
-                 weight=Text.Semibold
-                 align=Text.Right
-               />
-             </Col>
-           </Row>
-         </THead>}
-    {switch (latest5RequestSub) {
-     | Data(requests) when requests->Belt.Array.length === 0 =>
-       <EmptyContainer height={`calc((`sub, `percent(100.), `px(86)))} boxShadow=true>
-         <img
-           src={isDarkMode ? Images.noDataDark : Images.noDataLight}
-           className=Styles.noDataImage
-           alt="No Request"
-         />
-         <Heading size=Heading.H4 value="No Request" align=Heading.Center weight=Heading.Regular />
-       </EmptyContainer>
-     | Data(requests) =>
-       requests
-       ->Belt_Array.mapWithIndex((i, e) =>
-           isMobile
-             ? <RenderBodyMobile
-                 key={e.id |> ID.Request.toString}
-                 reserveIndex=i
-                 requestSub={Sub.resolve(e)}
-               />
-             : <RenderBody key={e.id |> ID.Request.toString} requestSub={Sub.resolve(e)} />
-         )
-       ->React.array
-     | _ =>
-       Belt_Array.make(5, ApolloHooks.Subscription.NoData)
-       ->Belt_Array.mapWithIndex((i, noData) =>
-           isMobile
-             ? <RenderBodyMobile key={i |> string_of_int} reserveIndex=i requestSub=noData />
-             : <RenderBody key={i |> string_of_int} requestSub=noData />
-         )
-       ->React.array
-     }}
-  </Table>;
+          </Col>
+        </Row>}
+      {isMobile
+        ? React.null
+        : <THead height=30>
+            <Row alignItems=Row.Center>
+              <Col col=Col.Three>
+                <Text
+                  block=true
+                  value="Request ID"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                />
+              </Col>
+              <Col col=Col.Six>
+                <Text
+                  block=true
+                  value="Oracle Script"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                />
+              </Col>
+              <Col col=Col.Three>
+                <Text
+                  block=true
+                  value="Report Status"
+                  size=Text.Sm
+                  weight=Text.Semibold
+                  align=Text.Right
+                />
+              </Col>
+            </Row>
+          </THead>}
+      {switch (latest5RequestSub) {
+      | Data(requests) when requests->Belt.Array.length === 0 =>
+        <EmptyContainer height={`calc((`sub, `percent(100.), `px(86)))} boxShadow=true>
+          <img
+            src={isDarkMode ? Images.noDataDark : Images.noDataLight}
+            className=Styles.noDataImage
+            alt="No Request"
+          />
+          <Heading size=Heading.H4 value="No Request" align=Heading.Center weight=Heading.Regular />
+        </EmptyContainer>
+      | Data(requests) =>
+        requests
+        ->Belt_Array.mapWithIndex((i, e) =>
+            isMobile
+              ? <RenderBodyMobile
+                  key={e.id |> ID.Request.toString}
+                  reserveIndex=i
+                  requestSub={Sub.resolve(e)}
+                />
+              : <RenderBody key={e.id |> ID.Request.toString} requestSub={Sub.resolve(e)} />
+          )
+        ->React.array
+      | _ =>
+        Belt_Array.make(5, ApolloHooks.Subscription.NoData)
+        ->Belt_Array.mapWithIndex((i, noData) =>
+            isMobile
+              ? <RenderBodyMobile key={i |> string_of_int} reserveIndex=i requestSub=noData />
+              : <RenderBody key={i |> string_of_int} requestSub=noData />
+          )
+        ->React.array
+      }}
+    </Table>
+  </>;
 };
diff --git a/src/components/LatestTxTable.re b/src/components/LatestTxTable.re
index 98f162e0..c735e37c 100644
--- a/src/components/LatestTxTable.re
+++ b/src/components/LatestTxTable.re
@@ -3,6 +3,7 @@ module Styles = {
 
   let statusImg = style([width(`px(20)), marginTop(`px(-3))]);
   let textMRight = style([marginRight(`px(6))]);
+  let headingContainer = style([marginBottom(`px(16))]);
 };
 
 module RenderBody = {
@@ -94,67 +95,88 @@ let make = () => {
   let txsSub = TxSub.getList(~page=1, ~pageSize=txCount, ());
   let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
 
-  <Table>
-    <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
-      <Col col=Col.Six colSm=Col.Six>
-        <Heading value="Latest Transactions" size=Heading.H4 />
-      </Col>
-      <Col col=Col.Six colSm=Col.Six>
-        <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
-          <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
-            <div className=Styles.textMRight>
-              <Text 
-                value="All Transactions" 
-                size=Text.Md 
-                weight=Text.Semibold 
-                underline=true 
-                color=theme.neutral_900 
-              />
+  <>
+    {isMobile ? <div className={Css.merge([CssHelper.flexBox(~justify=`spaceBetween, ()), Styles.headingContainer])}>
+      <Heading value="Latest Transactions" size=Heading.H4 />
+      <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+        <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
+          <div className=Styles.textMRight>
+            <Text 
+              value="View All" 
+              size=Text.Md 
+              weight=Text.Semibold 
+              underline=true 
+              color=theme.neutral_900 
+            />
+          </div>
+          <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+        </Link>
+      </div>
+    </div> : React.null }
+    <Table>
+      {isMobile
+        ? React.null
+        : <Row marginTop=30 marginBottom=25 marginTopSm=24 marginBottomSm=0>
+          <Col col=Col.Six colSm=Col.Six>
+            <Heading value="Latest Transactions" size=Heading.H4 />
+          </Col>
+          <Col col=Col.Six colSm=Col.Six>
+            <div className={CssHelper.flexBox(~justify=`flexEnd, ())}>
+              <Link className={CssHelper.flexBox(~align=`center, ())} route=Route.TxHomePage>
+                <div className=Styles.textMRight>
+                  <Text 
+                    value="All Transactions" 
+                    size=Text.Md 
+                    weight=Text.Semibold 
+                    underline=true 
+                    color=theme.neutral_900 
+                  />
+                </div>
+                <Icon name="far fa-arrow-right" color=theme.neutral_900 />
+              </Link>
             </div>
-            <Icon name="far fa-arrow-right" color=theme.neutral_900 />
-          </Link>
-        </div>
-      </Col>
-    </Row>
-    {isMobile
-       ? React.null
-       : <THead height=30>
-           <Row alignItems=Row.Center>
-             <Col col=Col.Four>
-                 <Text value="Tx Hash" size=Text.Sm />
-             </Col>
-             <Col col=Col.Three>
-                 <Text value="Block" size=Text.Sm />
-             </Col>
-             <Col col=Col.Three>
-                 <Text value="Message" size=Text.Sm />
-             </Col>
-             <Col col=Col.Two>
-                 <Text value="Status" size=Text.Sm />
-             </Col>
-           </Row>
-         </THead>}
-    {switch (txsSub) {
-     | Data(txs) =>
-       txs
-       ->Belt_Array.mapWithIndex((i, e) =>
-           isMobile
-             ? <RenderBodyMobile
-                 key={e.txHash |> Hash.toHex}
-                 reserveIndex=i
-                 txSub={Sub.resolve(e)}
-               />
-             : <RenderBody key={e.txHash |> Hash.toHex} txSub={Sub.resolve(e)} />
-         )
-       ->React.array
-     | _ =>
-       Belt_Array.make(txCount, ApolloHooks.Subscription.NoData)
-       ->Belt_Array.mapWithIndex((i, noData) =>
-           isMobile
-             ? <RenderBodyMobile key={string_of_int(i)} reserveIndex=i txSub=noData />
-             : <RenderBody key={string_of_int(i)} txSub=noData />
-         )
-       ->React.array
-     }}
-  </Table>;
+          </Col>
+        </Row>}
+      {isMobile
+        ? React.null
+        : <THead height=30>
+            <Row alignItems=Row.Center>
+              <Col col=Col.Four>
+                  <Text value="Tx Hash" size=Text.Sm />
+              </Col>
+              <Col col=Col.Three>
+                  <Text value="Block" size=Text.Sm />
+              </Col>
+              <Col col=Col.Three>
+                  <Text value="Message" size=Text.Sm />
+              </Col>
+              <Col col=Col.Two>
+                  <Text value="Status" size=Text.Sm />
+              </Col>
+            </Row>
+          </THead>}
+      {switch (txsSub) {
+      | Data(txs) =>
+        txs
+        ->Belt_Array.mapWithIndex((i, e) =>
+            isMobile
+              ? <RenderBodyMobile
+                  key={e.txHash |> Hash.toHex}
+                  reserveIndex=i
+                  txSub={Sub.resolve(e)}
+                />
+              : <RenderBody key={e.txHash |> Hash.toHex} txSub={Sub.resolve(e)} />
+          )
+        ->React.array
+      | _ =>
+        Belt_Array.make(txCount, ApolloHooks.Subscription.NoData)
+        ->Belt_Array.mapWithIndex((i, noData) =>
+            isMobile
+              ? <RenderBodyMobile key={string_of_int(i)} reserveIndex=i txSub=noData />
+              : <RenderBody key={string_of_int(i)} txSub=noData />
+          )
+        ->React.array
+      }}
+    </Table>
+  </>;
 };
diff --git a/src/components/RequestStatus.re b/src/components/RequestStatus.re
index 2c54cc64..73508b28 100644
--- a/src/components/RequestStatus.re
+++ b/src/components/RequestStatus.re
@@ -1,3 +1,8 @@
+module Styles = {
+  open Css;
+
+  let ml2 = style([marginLeft(`px(16))]);
+};
 type display_t =
   | Full
   | Mini;
@@ -11,15 +16,19 @@ let toString =
   | Unknown => "Unknown";
 
 [@react.component]
-let make = (~resolveStatus, ~display=Mini, ~style="", ~size=Text.Lg) => {
+let make = (~resolveStatus, ~display=Mini, ~style="", ~size=Text.Lg, ~text="") => {
   <div className={CssHelper.flexBox(~align=`center, ())}>
-    {switch (resolveStatus) {
+      {switch (resolveStatus) {
      | RequestSub.Success => <img alt="Success Icon" src=Images.success className=style />
      | Failure => <img alt="Fail Icon" src=Images.fail className=style />
      | Pending => <img alt="Pending Icon" src=Images.pending className=style />
      | Expired => <img alt="Expired Icon" src=Images.expired className=style />
      | Unknown => <img alt="Unknown Icon" src=Images.unknown className=style />
      }}
+     {text != ""
+       ? <div className={Styles.ml2}>
+        <Text value={text} spacing={Text.Em(0.02)} nowrap=true block=true size />
+       </div> : React.null}
     {display == Full
        ? <> <HSpacing size=Spacing.sm /> <Text value={resolveStatus |> toString} size /> </>
        : React.null}
diff --git a/src/components/StatusIcon.re b/src/components/StatusIcon.re
index 1f60ffd8..87bc0b8f 100644
--- a/src/components/StatusIcon.re
+++ b/src/components/StatusIcon.re
@@ -12,7 +12,8 @@ module Styles = {
   let make = (~status) => {
     let isMobile = Media.isMobile();
     let (ThemeContext.{theme}, _) = React.useContext(ThemeContext.context);
-    <div>
+          
+    <div className={CssHelper.flexBox( ~align=`center, ())}>
       <img
         alt="Status Icon"
         src={status ? Images.success : Images.fail}
@@ -22,7 +23,7 @@ module Styles = {
         isMobile ? 
         <Text 
           value={status ? "Success" : "Fail"} 
-          size=Text.Sm 
+          size=Text.Md
           color={status ? theme.successColor : theme.failColor}
         /> 
         : React.null
diff --git a/src/reusable/InfoMobileCard.re b/src/reusable/InfoMobileCard.re
index 0f80b4cd..16add9b2 100644
--- a/src/reusable/InfoMobileCard.re
+++ b/src/reusable/InfoMobileCard.re
@@ -23,6 +23,7 @@ type t =
   | OracleScript(ID.OracleScript.t, string)
   | RequestID(ID.Request.t)
   | RequestResponse(request_response_t)
+  | RequestStatus(RequestSub.resolve_status_t, string)
   | ProgressBar(request_count_t)
   | Float(float, option(int))
   | KVTableReport(list(string), list(MsgDecoder.RawDataReport.t))
@@ -80,12 +81,7 @@ let make = (~info) => {
       <HSpacing size=Spacing.sm />
       <Text value=name ellipsis=true />
     </div>
-  | OracleScript(id, name) =>
-    <div className=Styles.vFlex>
-      <TypeID.OracleScript id />
-      <HSpacing size=Spacing.sm />
-      <Text value=name ellipsis=true />
-    </div>
+  | OracleScript(id, name) => <TypeID.OracleScript id details=name/>
   | RequestID(id) => <TypeID.Request id />
   | RequestResponse({requestCount, responseTime: responseTimeOpt}) =>
     <div className={CssHelper.flexBox()}>
@@ -101,6 +97,7 @@ let make = (~info) => {
         block=true
       />
     </div>
+  | RequestStatus(resolveStatus, text) => <RequestStatus resolveStatus text />
   | ProgressBar({reportedValidators, minimumValidators, requestValidators}) =>
     <ProgressBar reportedValidators minimumValidators requestValidators />
   | Float(value, digits) => <Text value={value |> Format.fPretty(~digits?)} />
diff --git a/src/reusable/MobileCard.re b/src/reusable/MobileCard.re
index 2e4bebff..d63601ff 100644
--- a/src/reusable/MobileCard.re
+++ b/src/reusable/MobileCard.re
@@ -6,7 +6,7 @@ module Styles = {
       padding2(~v=`px(22), ~h=`zero),
       selector(
         "+ div",
-        [marginTop(`px(10)), borderTop(`px(1), `solid, theme.neutral_100)],
+        [marginTop(`px(10)), borderTop(`px(1), `solid, theme.neutral_300)],
       ),
     ]);
   let cardItem = (alignItems_, isOneColumn) =>
@@ -33,7 +33,7 @@ module Styles = {
     ]);
   let toggle = (theme: Theme.t) =>
     style([
-      borderTop(`px(1), `solid, theme.neutral_100),
+      borderTop(`px(1), `solid, theme.neutral_300),
       paddingTop(`px(10)),
       marginTop(`px(10)),
       cursor(`pointer),
@@ -91,7 +91,6 @@ module InnerPanel = {
                      value=each
                      size=Text.Sm
                      weight=Text.Semibold
-                     transform=Text.Uppercase
                    />
                  }
                })
@@ -111,14 +110,6 @@ let make = (~values, ~idx, ~status=?, ~requestStatus=?, ~styles="", ~panels=[])
   let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context);
 
   <div className={Css.merge([Styles.cardContainer(theme), styles])}>
-    {switch (status) {
-     | Some(success) => <img src={success ? Images.success : Images.fail} className=Styles.logo />
-     | None => React.null
-     }}
-    {switch (requestStatus) {
-     | Some(resolveStatus) => <RequestStatus resolveStatus style=Styles.logo />
-     | None => React.null
-     }}
     <InnerPanel values idx />
     {panels->Belt.List.size > 0
        ? <>

From 34c8c3359f0b59c935dd079460b869e0422ef03c Mon Sep 17 00:00:00 2001
From: xxibcill <cchayanin@hotmail.com>
Date: Mon, 13 Feb 2023 02:40:32 +0700
Subject: [PATCH 18/18] header mobile

---
 src/components/ChainIDBadge.re      | 41 ++++++++++++++++++++++++-----
 src/components/Header.re            | 12 +++++++--
 src/components/NavBar.re            |  2 +-
 src/components/ToggleThemeButton.re | 10 +++----
 src/components/UserAccount.re       |  5 ++--
 src/components/buttons/Button.re    |  5 +++-
 6 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/ChainIDBadge.re b/src/components/ChainIDBadge.re
index 9c7cbd28..5c224fe4 100644
--- a/src/components/ChainIDBadge.re
+++ b/src/components/ChainIDBadge.re
@@ -5,11 +5,11 @@ module Styles = {
     style([
       display(`flex),
       borderRadius(`px(8)),
-      border(`px(1), `solid, isDarkMode ? theme.neutral_100 : theme.neutral_600),
+      // border(`px(1), `solid, isDarkMode ? theme.neutral_100 : theme.neutral_600),
       backgroundColor(theme.neutral_000),
-      padding2(~v=`px(8), ~h=`px(10)),
+      padding2(~v=`px(8), ~h=`px(16)),
       minWidth(`px(153)),
-      justifyContent(`spaceBetween),
+      // justifyContent(`spaceBetween),
       alignItems(`center),
       position(`relative),
       cursor(`pointer),
@@ -141,8 +141,9 @@ let getName =
   | Unknown => "unknown";
 
 [@react.component]
-let make = () =>
+let make = (~dropdown=false) =>
   {
+    let (show, setShow) = React.useState(_ => false);
     let trackingSub = TrackingSub.use();
     let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
@@ -160,7 +161,35 @@ let make = () =>
       }
     };
 
-    <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
+    {dropdown ? <div
+      className={Styles.version(theme, isDarkMode)}
+      onClick={event => {
+        setShow(oldVal => !oldVal);
+        ReactEvent.Mouse.stopPropagation(event);
+      }}>
+      <Text
+        value={currentChainID->getName}
+        color={theme.neutral_900}
+        nowrap=true
+        weight=Text.Semibold
+      />
+      <div className={Css.style([Css.paddingLeft(`px(4))])}>
+        {show
+          ? <Icon name="far fa-angle-up" color={theme.neutral_900} />
+          : <Icon name="far fa-angle-down" color={theme.neutral_900} />}
+      </div>
+      <div className={Styles.dropdown(show, theme, isDarkMode)}>
+        {[|LaoziMainnet, LaoziTestnet|]
+         ->Belt.Array.keep(chainID => chainID != currentChainID)
+         ->Belt.Array.map(chainID => {
+             let name = chainID->getName;
+             <AbsoluteLink href={getLink(chainID)} key=name className={Styles.link(theme)}>
+               <Text value=name color={theme.neutral_900} nowrap=true weight=Text.Semibold />
+             </AbsoluteLink>;
+           })
+         ->React.array}
+      </div>
+    </div> : <div className={Css.merge([CssHelper.flexBox(), Styles.buttonContainer])}>
       <AbsoluteLink href={isMainnet ? "" : getLink(LaoziMainnet)} >
         <Button
           px=16
@@ -179,7 +208,7 @@ let make = () =>
           {networkNames[1] |> React.string}
         </Button>
       </AbsoluteLink>
-    </div>
+    </div>}
 
     |> Sub.resolve;
   }
diff --git a/src/components/Header.re b/src/components/Header.re
index 3c59b254..785b088c 100644
--- a/src/components/Header.re
+++ b/src/components/Header.re
@@ -76,7 +76,7 @@ module DesktopRender = {
                 </div>
               </LinkToHome>
               <div className=Styles.chainIDContainer> 
-                <ChainIDBadge /> 
+                <ChainIDBadge />
               </div>
             </div>
           </Col>
@@ -146,11 +146,19 @@ module MobileRender = {
         </Col>
         <Col colSm=Col.Six>
           <div className={CssHelper.flexBox(~justify=`flexEnd, ~wrap=`nowrap, ())}>
-            <ChainIDBadge />
+            <ToggleThemeButton />
             <NavBar />
           </div>
         </Col>
       </Row>
+      <Row marginTop=20>
+        <Col colSm=Col.Six>
+          <ChainIDBadge dropdown=true />
+        </Col>
+        <Col colSm=Col.Six>
+          <UserAccount />
+        </Col>
+      </Row>
     </header>;
   };
 };
diff --git a/src/components/NavBar.re b/src/components/NavBar.re
index 04386e50..782acf13 100644
--- a/src/components/NavBar.re
+++ b/src/components/NavBar.re
@@ -83,7 +83,7 @@ module RenderMobile = {
 
     let menuContainer =
       style([
-        marginLeft(`px(10)),
+        marginLeft(`px(16)),
         flexBasis(`px(24)),
         flexGrow(0.),
         flexShrink(0.),
diff --git a/src/components/ToggleThemeButton.re b/src/components/ToggleThemeButton.re
index 9203e2af..8f9c5a85 100644
--- a/src/components/ToggleThemeButton.re
+++ b/src/components/ToggleThemeButton.re
@@ -1,12 +1,12 @@
 module Styles = {
   open Css;
 
-  let button = (isDarkMode, theme: Theme.t) =>
+  let button = (theme: Theme.t, isDarkMode) =>
     style([
-      backgroundColor(isDarkMode ? theme.white : theme.black),
+      backgroundColor(isDarkMode ? theme.neutral_900 : theme.neutral_800),
       position(`relative),
       borderRadius(`px(8)),
-      border(`px(1), `solid, isDarkMode ? theme.white : theme.black),
+      border(`px(1), `solid, isDarkMode ? theme.neutral_900 : theme.neutral_800),
       cursor(`pointer),
       outlineStyle(`none),
       width(`px(32)),
@@ -27,9 +27,9 @@ module Styles = {
 
 [@react.component]
 let make = () => {
-  let ({ThemeContext.isDarkMode, theme}, toggle) = React.useContext(ThemeContext.context);
+  let ({ThemeContext.theme, isDarkMode}, toggle) = React.useContext(ThemeContext.context);
 
-  <button className={Styles.button(isDarkMode, theme)} onClick={_ => toggle()}>
+  <button className={Styles.button(theme, isDarkMode)} onClick={_ => toggle()}>
     {isDarkMode
        ? <img alt="Sun Icon" src=Images.sunIcon className=Styles.icon />
        : <Icon name="fal fa-moon" size=14 color={theme.white} />}
diff --git a/src/components/UserAccount.re b/src/components/UserAccount.re
index 12191a98..0411fc5b 100644
--- a/src/components/UserAccount.re
+++ b/src/components/UserAccount.re
@@ -16,6 +16,7 @@ module Styles = {
     ]);
 
   let logo = style([width(`px(12))]);
+  let fullWidth = style([width(`percent(100.))]);
 
   let profileCard = (show, theme: Theme.t) =>
     style([
@@ -46,8 +47,8 @@ module Styles = {
 module ConnectBtn = {
   [@react.component]
   let make = (~connect) => {
-    <div id="connectButton">
-      <Button variant=Button.Outline px=24 py=8 onClick={_ => connect()}>
+    <div id="connectButton" className={Styles.fullWidth}>
+      <Button variant=Button.Outline px=24 py=8 fullWidth=true onClick={_ => connect()}>
         {"Connect Wallet" |> React.string}
       </Button>
     </div>;
diff --git a/src/components/buttons/Button.re b/src/components/buttons/Button.re
index 1ce2467c..a79ec846 100644
--- a/src/components/buttons/Button.re
+++ b/src/components/buttons/Button.re
@@ -13,6 +13,7 @@ module Styles = {
         ~py=13,
         ~pxSm=px,
         ~pySm=py,
+        ~fullWidth,
         theme: Theme.t,
         isDarkMode,
         (),
@@ -20,6 +21,7 @@ module Styles = {
     let base =
       style([
         display(`block),
+        width(fullWidth ? `percent(100.) : `auto),
         padding2(~v=`px(py), ~h=`px(px)),
         transition(~duration=200, "all"),
         borderRadius(`px(8)),
@@ -90,12 +92,13 @@ let make =
       ~onClick=_=>(),
       ~style="",
       ~disabled=false,
+      ~fullWidth=false,
     ) => {
   let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context);
 
   <button
     className={Css.merge([
-      Styles.btn(~variant, ~px, ~py, ~pxSm, ~pySm, ~fsize, theme, isDarkMode, ()),
+      Styles.btn(~variant, ~px, ~py, ~pxSm, ~pySm, ~fsize, ~fullWidth=fullWidth, theme, isDarkMode, ()),
       CssHelper.flexBox(~align=`center, ~justify=`center, ()),
       style,
     ])}