From ba7d5abbf5a8dc6b4d12326ca435dd8c72a43ef6 Mon Sep 17 00:00:00 2001 From: xxibcill Date: Wed, 21 Sep 2022 16:58:10 +0700 Subject: [PATCH 1/3] finish BlockPage --- __tests__/Route_test.res | 6 +- src/App.res | 4 +- src/components/NavBar.res | 2 +- src/components/block/BlockIndexTxsTable.res | 157 ++++++++++++++ src/components/block/ResolvedRequest.res | 76 +++++++ src/images/Images.res | 4 + src/images/not-found-bg.svg | 35 +++ src/images/right-arrow.svg | 1 + src/pages/BlockDetailsPage.res | 226 ++++++++++++++++++++ src/pages/BlockHomePage.res | 4 - src/pages/BlockIndexPage.res | 4 - src/pages/BlockPage.res | 220 +++++++++++++++++++ src/pages/OracleScriptPage.res | 4 +- src/pages/ValidatorsPage.res | 2 +- src/subscriptions/BlockSub.res | 50 ++++- src/subscriptions/ProposalSub.res | 9 +- src/utils/ID.res | 2 +- src/utils/Route.res | 16 +- 18 files changed, 784 insertions(+), 38 deletions(-) create mode 100644 src/components/block/BlockIndexTxsTable.res create mode 100644 src/components/block/ResolvedRequest.res create mode 100644 src/images/not-found-bg.svg create mode 100644 src/images/right-arrow.svg create mode 100644 src/pages/BlockDetailsPage.res delete mode 100644 src/pages/BlockHomePage.res delete mode 100644 src/pages/BlockIndexPage.res create mode 100644 src/pages/BlockPage.res diff --git a/__tests__/Route_test.res b/__tests__/Route_test.res index f27262d6..c667e5fe 100644 --- a/__tests__/Route_test.res +++ b/__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( @@ -18,8 +18,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(DataSourceIndexPage(123, DataSourceRequests)) ) diff --git a/src/App.res b/src/App.res index a58a8395..3126d157 100644 --- a/src/App.res +++ b/src/App.res @@ -39,8 +39,8 @@ let make = () => { | TxHomePage => | TxIndexPage(txHash) => - | BlockHomePage => - | BlockIndexPage(height) => + | BlockPage => + | BlockDetailsPage(height) => | ValidatorsPage => | ValidatorDetailsPage(address, hashtag) => | RequestHomePage => diff --git a/src/components/NavBar.res b/src/components/NavBar.res index 9eab08a3..d5bad625 100644 --- a/src/components/NavBar.res +++ b/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", DataSourceHomePage), diff --git a/src/components/block/BlockIndexTxsTable.res b/src/components/block/BlockIndexTxsTable.res new file mode 100644 index 00000000..df00b1e6 --- /dev/null +++ b/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) => { + + + + {switch txSub { + | Data({txHash}) => + | _ => + }} + + + {switch txSub { + | Data({gasFee}) => +
+ Coin.getBandAmountFromCoins->Format.fPretty} + weight=Text.Medium + /> +
+ | _ => + }} + + + {switch txSub { + | Data({messages, txHash, success, errMsg}) => + + | _ => + }} + + + ; + }; +}; + +module RenderBodyMobile = { + @react.component + let make = (~reserveIndex, ~txSub: Sub.variant) => { + switch txSub { + | Data({txHash, gasFee, success, messages, errMsg}) => + Hash.toHex} + status=success + /> + | _ => + Belt.Int.toString} + /> + }; + }; +}; + +@react.component +let make = (~txsSub: Sub.variant>) => { + let isMobile = Media.isMobile(); + let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context); + + <> + {isMobile + ? React.null + : + + + + + +
+ +
+ + + + + + } + {switch txsSub { + | Data(txs) => + txs->Belt.Array.size > 0 + ? txs + ->Belt.Array.mapWithIndex((i, e) => + isMobile + ? Hash.toHex} + /> + : Hash.toHex} /> + ) + ->React.array + : + No Transaction + + + | _ => + Belt.Array.make(isMobile ? 1 : 10, Sub.NoData) + ->Belt.Array.mapWithIndex((i, noData) => + isMobile + ? string_of_int} /> + : string_of_int} /> + ) + ->React.array + }} + ; +}; diff --git a/src/components/block/ResolvedRequest.res b/src/components/block/ResolvedRequest.res new file mode 100644 index 00000000..750d1952 --- /dev/null +++ b/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) => { +
+ {requests + ->Belt.Array.map(request => +
ID.Request.toString}> + +
+ ) + ->React.array} +
; + }; +}; + +@react.component +let make = (~blockSub: Sub.variant) => { + 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."); + []; + }; + }; + + + + + +
+ +
+ + {showRequests->Belt.Array.length === 0 + ?
+ +
+ :
+ + +
} + + + + ; + | _ => React.null + }; +}; diff --git a/src/images/Images.res b/src/images/Images.res index dfdf77dc..f51f9a2c 100644 --- a/src/images/Images.res +++ b/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" diff --git a/src/images/not-found-bg.svg b/src/images/not-found-bg.svg new file mode 100644 index 00000000..cf2d5815 --- /dev/null +++ b/src/images/not-found-bg.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/right-arrow.svg b/src/images/right-arrow.svg new file mode 100644 index 00000000..3760c1ad --- /dev/null +++ b/src/images/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/BlockDetailsPage.res b/src/pages/BlockDetailsPage.res new file mode 100644 index 00000000..083619ee --- /dev/null +++ b/src/pages/BlockDetailsPage.res @@ -0,0 +1,226 @@ +module Styles = { + open CssJs; + + let proposerContainer = style(. [width(#fitContent)]); + + let pageContainer = (theme: Theme.t) => + style(. [ + paddingTop(#px(50)), + minHeight(#px(450)), + backgroundColor(theme.secondaryBg), + borderRadius(#px(4)), + boxShadow(Shadow.box(~x=#zero, ~y=#px(2), ~blur=#px(4), rgba(0, 0, 0, #num(0.1)))), + ]); + + let logo = style(. [width(#px(180)), marginRight(#px(10))]); + let linkToHome = style(. [display(#flex), alignItems(#center), cursor(#pointer)]); + let rightArrow = style(. [width(#px(20)), filter([#saturate(50.0), #brightness(70.0)])]); +}; + +let isIBCTx = (tx: TxSub.t) => { + tx.messages->Belt.List.reduce(false, (acc, message) => acc || message.isIBC); +}; + +@react.component +let make = (~height) => { + let isMobile = Media.isMobile(); + let blockSub = BlockSub.get(height); + let latestBlockSub = BlockSub.getLatest(); + let txsSub = TxSub.getListByBlockHeight(height, ()); + let ibcTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => isIBCTx(tx) ? Some(tx) : None)) + let commonTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => !isIBCTx(tx) ? Some(tx) : None)) + + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + + switch (blockSub, latestBlockSub) { + | (NoData, Data(latestBlock)) => +
+
+ +
+
+ Not Found +
+ + {height > latestBlock.height + ? + :
+ + + +
} + + + + + Right Arrow Icon + + +
+
+
+ | _ => +
+
+ + + + {switch (blockSub) { + | Data({height}) => + | Error(_) | Loading | NoData => + }} + + + + + + + + + + + + + {switch (blockSub) { + | Data({hash}) => + Hash.toHex(~upper=true)} + code=true + block=true + size=Text.Lg + breakAll=true + /> + | Error(_) | Loading | NoData => + }} + + + + + + + + {switch (blockSub) { + | Data({txn}) => string_of_int} size=Text.Lg /> + | Error(_) | Loading | NoData => + }} + + + + + + + + {switch (blockSub) { + | Data({timestamp}) => +
+ MomentRe.Moment.format(Config.timestampDisplayFormat) + |> String.uppercase_ascii + } + size=Text.Lg + /> + + +
+ | Error(_) | Loading | NoData => + }} + + + + + + + + {switch (blockSub) { + | Data({validator: {operatorAddress, moniker, identity}}) => +
+ +
+ | Error(_) | Loading | NoData => + }} + + + + + + + {switch ibcTxsSub { + | Data(ibcTxs) when ibcTxs->Belt.Array.length !== 0 => + + + + + + + +
+ + + | Data(_) | Error(_) | Loading | NoData => React.null + }} + + + + +
+
+
+ }; +}; diff --git a/src/pages/BlockHomePage.res b/src/pages/BlockHomePage.res deleted file mode 100644 index 0640ca2b..00000000 --- a/src/pages/BlockHomePage.res +++ /dev/null @@ -1,4 +0,0 @@ -@react.component -let make = () => { - -} diff --git a/src/pages/BlockIndexPage.res b/src/pages/BlockIndexPage.res deleted file mode 100644 index 9ec4e079..00000000 --- a/src/pages/BlockIndexPage.res +++ /dev/null @@ -1,4 +0,0 @@ -@react.component -let make = (~height) => { - -} diff --git a/src/pages/BlockPage.res b/src/pages/BlockPage.res new file mode 100644 index 00000000..61e7ed70 --- /dev/null +++ b/src/pages/BlockPage.res @@ -0,0 +1,220 @@ +module BodyDesktop = { + @react.component + let make = (~reserveIndex, ~blockSub: Sub.variant) => { + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + height -> ID.Block.toString + | Error(_) | Loading | NoData => reserveIndex -> string_of_int + } + }> + + + {switch blockSub { + | Data({height}) => + | Error(_) | Loading | NoData => + }} + + + {switch blockSub { + | Data({hash}) => + Hash.toHex(~upper=true)} + weight=Text.Medium + block=true + code=true + ellipsis=true + color={theme.textSecondary} + /> + | Error(_) | Loading | NoData => + }} + + + {switch blockSub { + | Data({validator}) => + + | Error(_) | Loading | NoData => + }} + + +
+ {switch blockSub { + | Data({txn}) => + Format.iPretty} + code=true + weight=Text.Medium + color={theme.textPrimary} + /> + | Error(_) | Loading | NoData => + }} +
+ + +
+ {switch blockSub { + | Data({timestamp}) => + + | Error(_) | Loading | NoData => + }} +
+ + + ; + }; +} + +module BodyMobile = { + @react.component + let make = (~reserveIndex, ~blockSub: Sub.variant) => { + switch blockSub { + | Data({height, timestamp, hash, validator, txn}) => + ID.Block.toString} + idx={height -> ID.Block.toString} + /> + | Error(_) | Loading | NoData => + string_of_int} + idx={reserveIndex -> string_of_int} + /> + }; + }; +} + +@react.component +let make = () => { + let blocksSub = BlockSub.getList(~pageSize=10, ~page=1); + let isMobile = Media.isMobile(); + + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + +
+
+
+ + + + {switch blocksSub { + | Data(blocks) => + Belt.Array.get(0) + ->Belt.Option.mapWithDefault(0, ({height}) => height -> ID.Block.toInt) + ->Format.iPretty + ++ " In total" + } + size=Heading.H3 + weight=Heading.Thin + color={theme.textSecondary} + /> + | Error(_) | Loading | NoData => + }} + + + + {isMobile + ? React.null + : + + + + + + + + + + + + + + + + + + + } + {switch blocksSub { + | Data(blocks) => + blocks + ->Belt.Array.mapWithIndex((i, e) => + isMobile ? + : + ) + ->React.array + | Error(_) | Loading | NoData => + Belt.Array.make(10, React.null) + ->Belt.Array.mapWithIndex((i, _) => + isMobile ? + : + ) + ->React.array + }} +
+
+
+
; +}; + diff --git a/src/pages/OracleScriptPage.res b/src/pages/OracleScriptPage.res index 5332b42c..6f427c79 100644 --- a/src/pages/OracleScriptPage.res +++ b/src/pages/OracleScriptPage.res @@ -388,7 +388,7 @@ let make = () => { {Belt_Array.make(mostRequestedPageSize, Sub.NoData) - ->Belt_Array.mapWithIndex((i, e) => + ->Belt_Array.mapWithIndex((i, _) => string_of_int} reserveIndex=i @@ -521,7 +521,7 @@ let make = () => { | _ =>
{Belt_Array.make(10, Sub.NoData) - ->Belt_Array.mapWithIndex((i, e) => + ->Belt_Array.mapWithIndex((i, _) => isMobile ? string_of_int} diff --git a/src/pages/ValidatorsPage.res b/src/pages/ValidatorsPage.res index 6295152c..9a4be7c8 100644 --- a/src/pages/ValidatorsPage.res +++ b/src/pages/ValidatorsPage.res @@ -24,7 +24,7 @@ let make = () => { let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay) let (searchTerm, setSearchTerm) = React.useState(_ => "") let (sortedBy, setSortedBy) = React.useState(_ => ValidatorsTable.VotingPowerDesc) - let (isActive, setIsActive) = React.useState(_ => true) + let (isActive, _) = React.useState(_ => true) React.useEffect0(() => { let timeOutID = Js.Global.setInterval(() => {setPrevDayTime(getPrevDay)}, 60_000) diff --git a/src/subscriptions/BlockSub.res b/src/subscriptions/BlockSub.res index 3cbcf948..87841268 100644 --- a/src/subscriptions/BlockSub.res +++ b/src/subscriptions/BlockSub.res @@ -11,23 +11,34 @@ type internal_validator_t = { identity: string, } +type request_t = { + id: ID.Request.t, + isIBC: bool +} + type internal_t = { + height: ID.Block.t, timestamp: MomentRe.Moment.t, hash: Hash.t, inflation: float, validator: internal_validator_t, transactions_aggregate: transactions_aggregate_t, + requests: array, } + type t = { + height: ID.Block.t, + timestamp: MomentRe.Moment.t, hash: Hash.t, inflation: float, - timestamp: MomentRe.Moment.t, validator: ValidatorSub.Mini.t, txn: int, + requests: array, } -let toExternal = ({hash, inflation, timestamp, validator, transactions_aggregate}) => { +let toExternal = ({height, hash, inflation, timestamp, validator, transactions_aggregate, requests}) => { + height, hash, inflation, timestamp, @@ -41,11 +52,13 @@ let toExternal = ({hash, inflation, timestamp, validator, transactions_aggregate | Some(aggregate) => aggregate.count | _ => 0 }, + requests } module MultiConfig = %graphql(` subscription Blocks($limit: Int!, $offset: Int!) { blocks(limit: $limit, offset: $offset, order_by: [{height: desc}]) @ppxAs(type: "internal_t") { + height @ppxCustom(module: "GraphQLParserModule.BlockID") timestamp @ppxCustom(module: "GraphQLParserModule.Date") hash @ppxCustom(module: "GraphQLParserModule.Hash") inflation @ppxCustom(module: "GraphQLParserModule.FloatString") @@ -60,6 +73,10 @@ module MultiConfig = %graphql(` count } } + requests(where: {resolve_status: {_neq: "Open"}}) @ppxAs(type: "request_t"){ + id @ppxCustom(module: "GraphQLParserModule.RequestID") + isIBC: is_ibc + } } } `) @@ -67,6 +84,7 @@ module MultiConfig = %graphql(` module SingleConfig = %graphql(` subscription Block($height: Int!) { blocks_by_pk(height: $height) @ppxAs(type: "internal_t") { + height @ppxCustom(module: "GraphQLParserModule.BlockID") timestamp @ppxCustom(module: "GraphQLParserModule.Date") hash @ppxCustom(module: "GraphQLParserModule.Hash") inflation @ppxCustom(module: "GraphQLParserModule.FloatString") @@ -81,6 +99,10 @@ module SingleConfig = %graphql(` count } } + requests(where: {resolve_status: {_neq: "Open"}}) @ppxAs(type: "request_t"){ + id @ppxCustom(module: "GraphQLParserModule.RequestID") + isIBC: is_ibc + } } } `) @@ -99,16 +121,21 @@ module BlockSum = { let toExternal = (count: int) => (24 * 60 * 60 |> float_of_int) /. count->float_of_int } -let getList = (~page, ~pageSize, ()) => { +let getList = (~page, ~pageSize) => { let offset = (page - 1) * pageSize let result = MultiConfig.use({limit: pageSize, offset}) - result |> Sub.fromData |> Sub.map(_, ({blocks}) => blocks->Belt_Array.map(toExternal)) + result + -> Sub.fromData + -> Sub.map(({blocks}) => blocks->Belt_Array.map(toExternal)) } -let get = (~height, ()) => { - let result = SingleConfig.use({height: height}) +let get = (height: ID.Block.t) => { + let result = SingleConfig.use({height: height -> ID.Block.toInt}) + result + -> Sub.fromData + -> Sub.map(({blocks_by_pk}) => blocks_by_pk->Belt.Option.getExn->toExternal) } let getAvgBlockTime = (greater, less) => { @@ -118,18 +145,19 @@ let getAvgBlockTime = (greater, less) => { }) result - |> Sub.fromData - |> Sub.map(_, ({blocks_aggregate}) => + -> Sub.fromData + -> Sub.map(({blocks_aggregate}) => blocks_aggregate.aggregate->Belt_Option.getExn->(y => y.count)->BlockSum.toExternal ) } let getLatest = () => { - let result = getList(~pageSize=1, ~page=1, ()) + let result = getList(~pageSize=1, ~page=1) - result |> Sub.flatMap(_, blocks => { + result + -> Sub.flatMap(blocks => { switch blocks->Belt_Array.get(0) { - | Some(latestBlock) => latestBlock |> Sub.resolve + | Some(latestBlock) => latestBlock -> Sub.resolve | None => NoData } }) diff --git a/src/subscriptions/ProposalSub.res b/src/subscriptions/ProposalSub.res index dc998fe5..e80f2088 100644 --- a/src/subscriptions/ProposalSub.res +++ b/src/subscriptions/ProposalSub.res @@ -20,7 +20,14 @@ module ProposalStatus = { }; }; //TODO: implement for status - let serialize = status => "status" -> Js.Json.string + let serialize = status => + switch (status) { + | Deposit => "DepositPeriod" -> Js.Json.string + | Voting => "VotingPeriod" -> Js.Json.string + | Passed => "Passed" -> Js.Json.string + | Rejected => "Rejected" -> Js.Json.string + | Failed => "Failed" -> Js.Json.string + }; } diff --git a/src/utils/ID.res b/src/utils/ID.res index 5d1ceb2d..f09add65 100644 --- a/src/utils/ID.res +++ b/src/utils/ID.res @@ -42,7 +42,7 @@ module RawBlock = { type tab_t = unit let prefix = "#B" let color = Theme.baseBlue - let route = (height, _) => Route.BlockIndexPage(height) + let route = (height, _) => Route.BlockDetailsPage(height) let defaultTab = () } diff --git a/src/utils/Route.res b/src/utils/Route.res index 01972eb9..7a401c3c 100644 --- a/src/utils/Route.res +++ b/src/utils/Route.res @@ -31,8 +31,8 @@ type t = | OracleScriptDetailsPage(int, oracle_script_tab_t) | TxHomePage | TxIndexPage(Hash.t) - | BlockHomePage - | BlockIndexPage(int) + | BlockPage + | BlockDetailsPage(int) | RequestHomePage | RequestIndexPage(int) | AccountIndexPage(Address.t, account_tab_t) @@ -76,11 +76,11 @@ let fromUrl = (url: RescriptReactRouter.url) => | (list{"txs"}, _) => TxHomePage | (list{"tx", txHash}, _) => TxIndexPage(Hash.fromHex(txHash)) | (list{"validators"}, _) => ValidatorsPage - | (list{"blocks"}, _) => BlockHomePage + | (list{"blocks"}, _) => BlockPage | (list{"block", blockHeight}, _) => let blockHeightIntOpt = blockHeight |> int_of_string_opt switch blockHeightIntOpt { - | Some(block) => BlockIndexPage(block) + | Some(block) => BlockDetailsPage(block) | None => NotFound } @@ -141,8 +141,8 @@ let toString = route => | TxHomePage => "/txs" | TxIndexPage(txHash) => `/tx/${txHash |> Hash.toHex}` | ValidatorsPage => "/validators" - | BlockHomePage => "/blocks" - | BlockIndexPage(height) => `/block/${height |> string_of_int}` + | BlockPage => "/blocks" + | BlockDetailsPage(height) => `/block/${height |> string_of_int}` | RequestHomePage => "/requests" | RequestIndexPage(reqID) => `/request/${reqID |> string_of_int}` | AccountIndexPage(address, AccountDelegations) => { @@ -187,7 +187,7 @@ let search = (str: string) => { let capStr = str |> String.capitalize_ascii switch str |> int_of_string_opt { - | Some(blockID) => Some(BlockIndexPage(blockID)) + | Some(blockID) => Some(BlockDetailsPage(blockID)) | None => if str |> Js.String.startsWith("bandvaloper") { Some(ValidatorDetailsPage(str |> Address.fromBech32, Reports)) @@ -197,7 +197,7 @@ let search = (str: string) => { Some(TxIndexPage(str |> Hash.fromHex)) } else if capStr |> Js.String.startsWith("B") { let blockIDOpt = str |> String.sub(_, 1, len - 1) |> int_of_string_opt - blockIDOpt->Belt.Option.map(blockID => BlockIndexPage(blockID)) + blockIDOpt->Belt.Option.map(blockID => BlockDetailsPage(blockID)) } else if capStr |> Js.String.startsWith("D") { let dataSourceIDOpt = str |> String.sub(_, 1, len - 1) |> int_of_string_opt dataSourceIDOpt->Belt.Option.map(dataSourceID => DataSourceIndexPage( From b2b49b3b2a01c4743803d06fb945e7dfe31aafb5 Mon Sep 17 00:00:00 2001 From: xxibcill Date: Wed, 21 Sep 2022 22:18:39 +0700 Subject: [PATCH 2/3] syntax wrap up --- .../account/AccountIndexTransactions.res | 2 +- src/components/block/BlockIndexTxsTable.res | 14 +++++++------- src/components/block/ResolvedRequest.res | 2 +- src/pages/BlockDetailsPage.res | 2 +- src/subscriptions/TxSub.res | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/account/AccountIndexTransactions.res b/src/components/account/AccountIndexTransactions.res index 3af10c27..bca45fe5 100644 --- a/src/components/account/AccountIndexTransactions.res +++ b/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() diff --git a/src/components/block/BlockIndexTxsTable.res b/src/components/block/BlockIndexTxsTable.res index df00b1e6..bafd0b3f 100644 --- a/src/components/block/BlockIndexTxsTable.res +++ b/src/components/block/BlockIndexTxsTable.res @@ -12,7 +12,7 @@ module RenderBody = { {switch txSub { | Data({txHash}) => - | _ => + | Error(_) | Loading | NoData => }} @@ -27,14 +27,14 @@ module RenderBody = { weight=Text.Medium />
- | _ => + | Error(_) | Loading | NoData => }} {switch txSub { | Data({messages, txHash, success, errMsg}) => - | _ => + | Error(_) | Loading | NoData => }} @@ -59,7 +59,7 @@ module RenderBodyMobile = { idx={txHash -> Hash.toHex} status=success /> - | _ => + | Error(_) | Loading | NoData => >) => { color={theme.textSecondary} /> - | _ => + | Error(_) | Loading | NoData => Belt.Array.make(isMobile ? 1 : 10, Sub.NoData) ->Belt.Array.mapWithIndex((i, noData) => isMobile - ? string_of_int} /> - : string_of_int} /> + ? Belt.Int.toString} /> + : Belt.Int.toString} /> ) ->React.array }} diff --git a/src/components/block/ResolvedRequest.res b/src/components/block/ResolvedRequest.res index 750d1952..3f1e96b0 100644 --- a/src/components/block/ResolvedRequest.res +++ b/src/components/block/ResolvedRequest.res @@ -71,6 +71,6 @@ let make = (~blockSub: Sub.variant) => { ; - | _ => React.null + | Data(_) | Error(_) | Loading | NoData => React.null }; }; diff --git a/src/pages/BlockDetailsPage.res b/src/pages/BlockDetailsPage.res index 083619ee..686a119a 100644 --- a/src/pages/BlockDetailsPage.res +++ b/src/pages/BlockDetailsPage.res @@ -26,7 +26,7 @@ let make = (~height) => { let isMobile = Media.isMobile(); let blockSub = BlockSub.get(height); let latestBlockSub = BlockSub.getLatest(); - let txsSub = TxSub.getListByBlockHeight(height, ()); + let txsSub = TxSub.getListByBlockHeight(height); let ibcTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => isIBCTx(tx) ? Some(tx) : None)) let commonTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => !isIBCTx(tx) ? Some(tx) : None)) diff --git a/src/subscriptions/TxSub.res b/src/subscriptions/TxSub.res index bea078c6..59e871bf 100644 --- a/src/subscriptions/TxSub.res +++ b/src/subscriptions/TxSub.res @@ -196,7 +196,7 @@ let getList = (~page, ~pageSize, ()) => { result |> Sub.fromData |> Sub.map(_, ({transactions}) => transactions->Belt_Array.map(toExternal)) } -let getListBySender = (sender, ~page, ~pageSize, ()) => { +let getListBySender = (sender, ~page, ~pageSize) => { let offset = (page - 1) * pageSize let result = MultiBySenderConfig.use({ limit: pageSize, @@ -217,7 +217,7 @@ let getListBySender = (sender, ~page, ~pageSize, ()) => { }) } -let getListByBlockHeight = (height, ()) => { +let getListByBlockHeight = (height) => { let result = MultiByHeightConfig.use({height: height |> ID.Block.toInt}) result |> Sub.fromData |> Sub.map(_, ({transactions}) => transactions->Belt_Array.map(toExternal)) From 779d13199a8c6c5db02a20be046e9db53926b0d7 Mon Sep 17 00:00:00 2001 From: xxibcill Date: Mon, 26 Sep 2022 16:26:13 +0700 Subject: [PATCH 3/3] fix change request --- src/components/block/BlockIndexTxsTable.res | 26 ++++++------- src/components/block/ResolvedRequest.res | 42 ++++++++++----------- src/pages/BlockDetailsPage.res | 40 ++++++++++---------- src/pages/BlockPage.res | 20 +++++----- src/subscriptions/BlockSub.res | 9 ++++- 5 files changed, 71 insertions(+), 66 deletions(-) diff --git a/src/components/block/BlockIndexTxsTable.res b/src/components/block/BlockIndexTxsTable.res index bafd0b3f..85ed717b 100644 --- a/src/components/block/BlockIndexTxsTable.res +++ b/src/components/block/BlockIndexTxsTable.res @@ -1,8 +1,8 @@ module Styles = { - open CssJs; + open CssJs - let noDataImage = style(. [width(#auto), height(#px(70)), marginBottom(#px(16))]); -}; + let noDataImage = style(. [width(#auto), height(#px(70)), marginBottom(#px(16))]) +} module RenderBody = { @react.component @@ -38,9 +38,9 @@ module RenderBody = { }} - ; - }; -}; + + } +} module RenderBodyMobile = { @react.component @@ -71,14 +71,14 @@ module RenderBodyMobile = { } idx={reserveIndex -> Belt.Int.toString} /> - }; - }; -}; + } + } +} @react.component let make = (~txsSub: Sub.variant>) => { - let isMobile = Media.isMobile(); - let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context); + let isMobile = Media.isMobile() + let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context) <> {isMobile @@ -153,5 +153,5 @@ let make = (~txsSub: Sub.variant>) => { ) ->React.array }} - ; -}; + +} diff --git a/src/components/block/ResolvedRequest.res b/src/components/block/ResolvedRequest.res index 3f1e96b0..c33ba92d 100644 --- a/src/components/block/ResolvedRequest.res +++ b/src/components/block/ResolvedRequest.res @@ -1,16 +1,16 @@ module Styles = { - open CssJs; + open CssJs - let container = style(. [paddingTop(#px(24)), paddingBottom(#px(10)), minHeight(#px(100))]); + 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))]); -}; + ]) + let request = style(. [marginTop(#px(26)), marginRight(#px(12))]) +} module RequestsList = { @react.component @@ -23,31 +23,31 @@ module RequestsList = { ) ->React.array} - ; - }; -}; + + } +} @react.component let make = (~blockSub: Sub.variant) => { - let (tabIndex, setTabIndex) = React.useState(_ => 0); - let setTab = index => setTabIndex(_ => index); + 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; + 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."); - []; - }; - }; + Js.log("Please handle every case on Resolve Requests.") + [] + } + } @@ -70,7 +70,7 @@ let make = (~blockSub: Sub.variant) => { - ; + | Data(_) | Error(_) | Loading | NoData => React.null - }; -}; + } +} diff --git a/src/pages/BlockDetailsPage.res b/src/pages/BlockDetailsPage.res index 686a119a..a94f7017 100644 --- a/src/pages/BlockDetailsPage.res +++ b/src/pages/BlockDetailsPage.res @@ -1,7 +1,7 @@ module Styles = { - open CssJs; + open CssJs - let proposerContainer = style(. [width(#fitContent)]); + let proposerContainer = style(. [width(#fitContent)]) let pageContainer = (theme: Theme.t) => style(. [ @@ -10,27 +10,27 @@ module Styles = { backgroundColor(theme.secondaryBg), borderRadius(#px(4)), boxShadow(Shadow.box(~x=#zero, ~y=#px(2), ~blur=#px(4), rgba(0, 0, 0, #num(0.1)))), - ]); + ]) - let logo = style(. [width(#px(180)), marginRight(#px(10))]); - let linkToHome = style(. [display(#flex), alignItems(#center), cursor(#pointer)]); - let rightArrow = style(. [width(#px(20)), filter([#saturate(50.0), #brightness(70.0)])]); -}; + let logo = style(. [width(#px(180)), marginRight(#px(10))]) + let linkToHome = style(. [display(#flex), alignItems(#center), cursor(#pointer)]) + let rightArrow = style(. [width(#px(20)), filter([#saturate(50.0), #brightness(70.0)])]) +} let isIBCTx = (tx: TxSub.t) => { - tx.messages->Belt.List.reduce(false, (acc, message) => acc || message.isIBC); -}; + tx.messages->Belt.List.reduce(false, (acc, message) => acc || message.isIBC) +} @react.component let make = (~height) => { - let isMobile = Media.isMobile(); - let blockSub = BlockSub.get(height); - let latestBlockSub = BlockSub.getLatest(); - let txsSub = TxSub.getListByBlockHeight(height); + let isMobile = Media.isMobile() + let blockSub = BlockSub.get(height) + let latestBlockSub = BlockSub.getLatest() + let txsSub = TxSub.getListByBlockHeight(height) let ibcTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => isIBCTx(tx) ? Some(tx) : None)) let commonTxsSub = txsSub -> Sub.map(txs => txs->Belt.Array.keepMap(tx => !isIBCTx(tx) ? Some(tx) : None)) - let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context) switch (blockSub, latestBlockSub) { | (NoData, Data(latestBlock)) => @@ -112,7 +112,7 @@ let make = (~height) => { {switch (blockSub) { | Data({hash}) => Hash.toHex(~upper=true)} + value={hash->Hash.toHex(~upper=true)} code=true block=true size=Text.Lg @@ -133,7 +133,7 @@ let make = (~height) => { {switch (blockSub) { - | Data({txn}) => string_of_int} size=Text.Lg /> + | Data({txn}) => Belt.Int.toString} size=Text.Lg /> | Error(_) | Loading | NoData => }} @@ -154,8 +154,8 @@ let make = (~height) => { MomentRe.Moment.format(Config.timestampDisplayFormat) - |> String.uppercase_ascii + ->MomentRe.Moment.format(Config.timestampDisplayFormat, _) + ->String.uppercase_ascii } size=Text.Lg /> @@ -222,5 +222,5 @@ let make = (~height) => { - }; -}; + } +} diff --git a/src/pages/BlockPage.res b/src/pages/BlockPage.res index 61e7ed70..b5081967 100644 --- a/src/pages/BlockPage.res +++ b/src/pages/BlockPage.res @@ -1,7 +1,7 @@ module BodyDesktop = { @react.component let make = (~reserveIndex, ~blockSub: Sub.variant) => { - let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context) - ; - }; + + } } module BodyMobile = { @@ -106,16 +106,16 @@ module BodyMobile = { key={reserveIndex -> string_of_int} idx={reserveIndex -> string_of_int} /> - }; - }; + } + } } @react.component let make = () => { - let blocksSub = BlockSub.getList(~pageSize=10, ~page=1); - let isMobile = Media.isMobile(); + let blocksSub = BlockSub.getList(~pageSize=10, ~page=1) + let isMobile = Media.isMobile() - let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context); + let ({ThemeContext.theme}, _) = React.useContext(ThemeContext.context)
@@ -215,6 +215,6 @@ let make = () => {
-
; -}; + +} diff --git a/src/subscriptions/BlockSub.res b/src/subscriptions/BlockSub.res index 87841268..38c21bf7 100644 --- a/src/subscriptions/BlockSub.res +++ b/src/subscriptions/BlockSub.res @@ -118,7 +118,7 @@ module PastDayBlockCountConfig = %graphql(` `) module BlockSum = { - let toExternal = (count: int) => (24 * 60 * 60 |> float_of_int) /. count->float_of_int + let toExternal = (count: int) => (24 * 60 * 60)->Belt.Int.toFloat /. (count->Belt.Int.toFloat) } let getList = (~page, ~pageSize) => { @@ -135,7 +135,12 @@ let get = (height: ID.Block.t) => { result -> Sub.fromData - -> Sub.map(({blocks_by_pk}) => blocks_by_pk->Belt.Option.getExn->toExternal) + -> Sub.flatMap(({blocks_by_pk}) => + switch blocks_by_pk { + | Some(data) => data->toExternal->Sub.resolve + | None => NoData + } + ) } let getAvgBlockTime = (greater, less) => {