adding BlockPAge and BlockDetailsPage

__tests__/Route_test.res

@@ -3,7 +3,7 @@ open Route
 open Expect
 
 describe("Expect Search Functionality to work correctly", () => {
-  test("test block route", () => expect("123"->search)->toEqual(BlockIndexPage(123)))
+  test("test block route", () => expect("123"->search)->toEqual(BlockDetailsPage(123)))
   test("test transaction route", () =>
     expect("22638794cb5f306ef929b90c58b27d26cb35a77ca5c5c624cf2025a98528c323"->search)->toEqual(
       TxIndexPage("22638794cb5f306ef929b90c58b27d26cb35a77ca5c5c624cf2025a98528c323"->Hash.fromHex),
@@ -16,8 +16,8 @@ describe("Expect Search Functionality to work correctly", () => {
       ),
     )
   )
-  test("test block prefix is B", () => expect("B123"->search)->toEqual(BlockIndexPage(123)))
-  test("test block prefix is b", () => expect("b123"->search)->toEqual(BlockIndexPage(123)))
+  test("test block prefix is B", () => expect("B123"->search)->toEqual(BlockDetailsPage(123)))
+  test("test block prefix is b", () => expect("b123"->search)->toEqual(BlockDetailsPage(123)))
   test("test data soure route prefix is D", () =>
     expect("D123"->search)->toEqual(DataSourceDetailsPage(123, DataSourceRequests))
   )

src/App.res

@@ -41,8 +41,8 @@ let make = () => {
         <OracleScriptDetailsPage oracleScriptID=ID.OracleScript.ID(oracleScriptID) hashtag />
       | TxHomePage => <TxHomePage />
       | TxIndexPage(txHash) => <TxIndexPage txHash />
-      | BlockHomePage => <BlockHomePage />
-      | BlockIndexPage(height) => <BlockIndexPage height=ID.Block.ID(height) />
+      | BlockPage => <BlockPage />
+      | BlockDetailsPage(height) => <BlockDetailsPage height=ID.Block.ID(height) />
       | ValidatorsPage => <ValidatorsPage />
       | ValidatorDetailsPage(address, hashtag) => <ValidatorDetailsPage address hashtag />
       | RequestHomePage => <RequestHomePage />

src/components/NavBar.res

@@ -133,7 +133,7 @@ let make = () => {
   let routes = list{
     ("Home", Route.HomePage),
     ("Validators", ValidatorsPage),
-    ("Blocks", BlockHomePage),
+    ("Blocks", BlockPage),
     ("Transactions", TxHomePage),
     ("Proposals", ProposalPage),
     ("Data Sources", DataSourcePage),

src/components/account/AccountIndexTransactions.res

@@ -20,7 +20,7 @@ let make = (~accountAddress: Address.t) => {
   let (page, setPage) = React.useState(_ => 1)
   let pageSize = 10
 
-  let txsSub = TxSub.getListBySender(accountAddress, ~pageSize, ~page, ())
+  let txsSub = TxSub.getListBySender(accountAddress, ~pageSize, ~page)
   let txsCountSub = TxSub.countBySender(accountAddress)
 
   let isMobile = Media.isMobile()

src/components/block/BlockIndexTxsTable.res

@@ -0,0 +1,157 @@
+module Styles = {
+  open CssJs
+
+  let noDataImage = style(. [width(#auto), height(#px(70)), marginBottom(#px(16))])
+}
+
+module RenderBody = {
+  @react.component
+  let make = (~txSub: Sub.variant<TxSub.t>) => {
+    <TBody>
+      <Row>
+        <Col col=Col.Two>
+          {switch txSub {
+           | Data({txHash}) => <TxLink txHash width=140 />
+           | Error(_) | Loading | NoData => <LoadingCensorBar width=170 height=15 />
+           }}
+        </Col>
+        <Col col=Col.Two>
+          {switch txSub {
+           | Data({gasFee}) =>
+             <div className={CssHelper.flexBox(~justify=#flexEnd, ())}>
+               <Text
+                 block=true
+                 code=true
+                 spacing={Text.Em(0.02)}
+                 value={gasFee->Coin.getBandAmountFromCoins->Format.fPretty}
+                 weight=Text.Medium
+               />
+             </div>
+           | Error(_) | Loading | NoData => <LoadingCensorBar width=30 height=15 isRight=true />
+           }}
+        </Col>
+        <Col col=Col.Eight>
+          {switch txSub {
+           | Data({messages, txHash, success, errMsg}) =>
+             <TxMessages txHash messages success errMsg />
+           | Error(_) | Loading | NoData => <LoadingCensorBar width=530 height=15 />
+           }}
+        </Col>
+      </Row>
+    </TBody>
+  }
+}
+
+module RenderBodyMobile = {
+  @react.component
+  let make = (~reserveIndex, ~txSub: Sub.variant<TxSub.t>) => {
+    switch txSub {
+    | Data({txHash, gasFee, success, messages, errMsg}) =>
+      <MobileCard
+        values={
+          open InfoMobileCard
+          [
+            ("TX Hash", TxHash(txHash, 200)),
+            ("Gas Fee\n(BAND)", Coin({value: gasFee, hasDenom: false})),
+            ("Actions", Messages(txHash, messages, success, errMsg)),
+          ]
+        }
+        idx={txHash -> Hash.toHex}
+        status=success
+      />
+    | Error(_) | Loading | NoData =>
+      <MobileCard
+        values={
+          open InfoMobileCard
+          [
+            ("TX Hash", Loading(200)),
+            ("Gas Fee\n(BAND)", Loading(60)),
+            ("Actions", Loading(230)),
+          ]
+        }
+        idx={reserveIndex -> Belt.Int.toString}
+      />
+    }
+  }
+}
+
+@react.component
+let make = (~txsSub: Sub.variant<array<TxSub.t>>) => {
+  let isMobile = Media.isMobile()
+  let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context)
+
+  <>
+    {isMobile
+       ? React.null
+       : <THead>
+           <Row alignItems=Row.Center>
+             <Col col=Col.Two>
+               <Text
+                 block=true
+                 value="TX Hash"
+                 size=Text.Sm
+                 weight=Text.Semibold
+                 transform=Text.Uppercase
+               />
+             </Col>
+             <Col col=Col.Two>
+               <div className={CssHelper.flexBox(~justify=#flexEnd, ())}>
+                 <Text
+                   block=true
+                   value="Gas Fee (BAND)"
+                   size=Text.Sm
+                   weight=Text.Semibold
+                   transform=Text.Uppercase
+                 />
+               </div>
+             </Col>
+             <Col col=Col.Eight>
+               <Text
+                 block=true
+                 value="Actions"
+                 size=Text.Sm
+                 weight=Text.Semibold
+                 transform=Text.Uppercase
+               />
+             </Col>
+           </Row>
+         </THead>}
+    {switch txsSub {
+     | Data(txs) =>
+       txs->Belt.Array.size > 0
+         ? txs
+           ->Belt.Array.mapWithIndex((i, e) =>
+               isMobile
+                 ? <RenderBodyMobile
+                     reserveIndex=i
+                     txSub={Sub.resolve(e)}
+                     key={e.txHash -> Hash.toHex}
+                   />
+                 : <RenderBody txSub={Sub.resolve(e)} key={e.txHash -> Hash.toHex} />
+             )
+           ->React.array
+         : <EmptyContainer>
+             <img
+               alt="No Transaction"
+               src={isDarkMode ? Images.noTxDark : Images.noTxLight}
+               className=Styles.noDataImage
+             />
+             <Heading
+               size=Heading.H4
+               value="No Transaction"
+               align=Heading.Center
+               weight=Heading.Regular
+               color={theme.textSecondary}
+             />
+           </EmptyContainer>
+     | Error(_) | Loading | NoData =>
+       Belt.Array.make(isMobile ? 1 : 10, Sub.NoData)
+       ->Belt.Array.mapWithIndex((i, noData) =>
+           isMobile
+             ? <RenderBodyMobile reserveIndex=i txSub=noData key={i -> Belt.Int.toString} />
+             : <RenderBody txSub=noData key={i -> Belt.Int.toString} />
+         )
+       ->React.array
+     }}
+  </>
+}

src/components/block/ResolvedRequest.res

@@ -0,0 +1,76 @@
+module Styles = {
+  open CssJs
+
+  let container = style(. [paddingTop(#px(24)), paddingBottom(#px(10)), minHeight(#px(100))])
+  let emptyContainer =
+    style(. [
+      display(#flex),
+      minHeight(#px(100)),
+      alignItems(#center),
+      justifyContent(#center),
+    ])
+  let request = style(. [marginTop(#px(26)), marginRight(#px(12))])
+}
+
+module RequestsList = {
+  @react.component
+  let make = (~requests) => {
+    <div className={CssHelper.flexBox()}>
+      {requests
+       ->Belt.Array.map(request =>
+           <div className=Styles.request key={request |> ID.Request.toString}>
+             <TypeID.Request id=request />
+           </div>
+         )
+       ->React.array}
+    </div>
+  }
+}
+
+@react.component
+let make = (~blockSub: Sub.variant<BlockSub.t>) => {
+  let (tabIndex, setTabIndex) = React.useState(_ => 0)
+  let setTab = index => setTabIndex(_ => index)
+
+  switch (blockSub) {
+  | Data({requests}) when requests->Belt.Array.length !== 0 =>
+    let onChainRequests =
+      requests->Belt.Array.keepMap(({id, isIBC}) => !isIBC ? Some(id) : None)
+    let ibcRequests = requests->Belt.Array.keepMap(({id, isIBC}) => isIBC ? Some(id) : None)
+    let onChain = onChainRequests->Belt.Array.length
+    let ibc = ibcRequests->Belt.Array.length
+    let showRequests = {
+      switch (tabIndex) {
+      | 0 => onChainRequests
+      | 1 => ibcRequests
+      | _ =>
+        Js.log("Please handle every case on Resolve Requests.")
+        []
+      }
+    }
+
+    <Row marginBottom=24>
+      <Col>
+        <InfoContainer>
+          <Heading value="Resolved Requests" size=Heading.H4 />
+          <div className={CssHelper.mt(~size=16, ())}>
+            <Text
+              value="Resolved requests are requests that were successfully processed, failed, or timed out by BandChain in this block."
+            />
+          </div>
+          <Tab.State tabs=[j`On Chain ($onChain)`, j`IBC ($ibc)`] tabIndex setTab>
+            {showRequests->Belt.Array.length === 0
+               ? <div className=Styles.emptyContainer>
+                   <Text value="There is no resolved request." />
+                 </div>
+               : <div className=Styles.container>
+                   <Text value="Request ID" size=Text.Sm transform=Text.Uppercase />
+                   <RequestsList requests=showRequests />
+                 </div>}
+          </Tab.State>
+        </InfoContainer>
+      </Col>
+    </Row>
+  | Data(_) | Error(_) | Loading | NoData => React.null
+  }
+}

src/images/Images.res

@@ -49,3 +49,7 @@
 @module("./cosmosibc.svg") external cosmosIBCIcon: string = "default"
 @module("./solidity.svg") external solidityIcon: string = "default"
 @module("./golang.svg") external golangIcon: string = "default"
+@module("./right-arrow.svg") external rightArrow: string = "default"
+
+// BG
+@module("./not-found-bg.svg") external notFoundBg: string = "default"