Skip to content

Commit 6eb8482

Browse files
babybunnbabybunn
authored
Merge pull request #40 from bandprotocol/refactor/add-BlockHomePage
adding BlockPAge and BlockDetailsPage
2 parents 51ce5e3 + b67befc commit 6eb8482

18 files changed

+785
-36
lines changed

‎__tests__/Route_test.res

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ open Route
33
open Expect
44

55
describe("Expect Search Functionality to work correctly", () => {
6-
test("test block route", () => expect("123"->search)->toEqual(BlockIndexPage(123)))
6+
test("test block route", () => expect("123"->search)->toEqual(BlockDetailsPage(123)))
77
test("test transaction route", () =>
88
expect("22638794cb5f306ef929b90c58b27d26cb35a77ca5c5c624cf2025a98528c323"->search)->toEqual(
99
TxIndexPage("22638794cb5f306ef929b90c58b27d26cb35a77ca5c5c624cf2025a98528c323"->Hash.fromHex),
@@ -16,8 +16,8 @@ describe("Expect Search Functionality to work correctly", () => {
1616
),
1717
)
1818
)
19-
test("test block prefix is B", () => expect("B123"->search)->toEqual(BlockIndexPage(123)))
20-
test("test block prefix is b", () => expect("b123"->search)->toEqual(BlockIndexPage(123)))
19+
test("test block prefix is B", () => expect("B123"->search)->toEqual(BlockDetailsPage(123)))
20+
test("test block prefix is b", () => expect("b123"->search)->toEqual(BlockDetailsPage(123)))
2121
test("test data soure route prefix is D", () =>
2222
expect("D123"->search)->toEqual(DataSourceDetailsPage(123, DataSourceRequests))
2323
)

‎src/App.res

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ let make = () => {
4141
<OracleScriptDetailsPage oracleScriptID=ID.OracleScript.ID(oracleScriptID) hashtag />
4242
| TxHomePage => <TxHomePage />
4343
| TxIndexPage(txHash) => <TxIndexPage txHash />
44-
| BlockHomePage => <BlockHomePage />
45-
| BlockIndexPage(height) => <BlockIndexPage height=ID.Block.ID(height) />
44+
| BlockPage => <BlockPage />
45+
| BlockDetailsPage(height) => <BlockDetailsPage height=ID.Block.ID(height) />
4646
| ValidatorsPage => <ValidatorsPage />
4747
| ValidatorDetailsPage(address, hashtag) => <ValidatorDetailsPage address hashtag />
4848
| RequestHomePage => <RequestHomePage />

‎src/components/NavBar.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ let make = () => {
133133
let routes = list{
134134
("Home", Route.HomePage),
135135
("Validators", ValidatorsPage),
136-
("Blocks", BlockHomePage),
136+
("Blocks", BlockPage),
137137
("Transactions", TxHomePage),
138138
("Proposals", ProposalPage),
139139
("Data Sources", DataSourcePage),

‎src/components/account/AccountIndexTransactions.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ let make = (~accountAddress: Address.t) => {
2020
let (page, setPage) = React.useState(_ => 1)
2121
let pageSize = 10
2222

23-
let txsSub = TxSub.getListBySender(accountAddress, ~pageSize, ~page, ())
23+
let txsSub = TxSub.getListBySender(accountAddress, ~pageSize, ~page)
2424
let txsCountSub = TxSub.countBySender(accountAddress)
2525

2626
let isMobile = Media.isMobile()

‎src/components/block/BlockIndexTxsTable.res

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
module Styles = {
2+
open CssJs
3+
4+
let noDataImage = style(. [width(#auto), height(#px(70)), marginBottom(#px(16))])
5+
}
6+
7+
module RenderBody = {
8+
@react.component
9+
let make = (~txSub: Sub.variant<TxSub.t>) => {
10+
<TBody>
11+
<Row>
12+
<Col col=Col.Two>
13+
{switch txSub {
14+
| Data({txHash}) => <TxLink txHash width=140 />
15+
| Error(_) | Loading | NoData => <LoadingCensorBar width=170 height=15 />
16+
}}
17+
</Col>
18+
<Col col=Col.Two>
19+
{switch txSub {
20+
| Data({gasFee}) =>
21+
<div className={CssHelper.flexBox(~justify=#flexEnd, ())}>
22+
<Text
23+
block=true
24+
code=true
25+
spacing={Text.Em(0.02)}
26+
value={gasFee->Coin.getBandAmountFromCoins->Format.fPretty}
27+
weight=Text.Medium
28+
/>
29+
</div>
30+
| Error(_) | Loading | NoData => <LoadingCensorBar width=30 height=15 isRight=true />
31+
}}
32+
</Col>
33+
<Col col=Col.Eight>
34+
{switch txSub {
35+
| Data({messages, txHash, success, errMsg}) =>
36+
<TxMessages txHash messages success errMsg />
37+
| Error(_) | Loading | NoData => <LoadingCensorBar width=530 height=15 />
38+
}}
39+
</Col>
40+
</Row>
41+
</TBody>
42+
}
43+
}
44+
45+
module RenderBodyMobile = {
46+
@react.component
47+
let make = (~reserveIndex, ~txSub: Sub.variant<TxSub.t>) => {
48+
switch txSub {
49+
| Data({txHash, gasFee, success, messages, errMsg}) =>
50+
<MobileCard
51+
values={
52+
open InfoMobileCard
53+
[
54+
("TX Hash", TxHash(txHash, 200)),
55+
("Gas Fee\n(BAND)", Coin({value: gasFee, hasDenom: false})),
56+
("Actions", Messages(txHash, messages, success, errMsg)),
57+
]
58+
}
59+
idx={txHash -> Hash.toHex}
60+
status=success
61+
/>
62+
| Error(_) | Loading | NoData =>
63+
<MobileCard
64+
values={
65+
open InfoMobileCard
66+
[
67+
("TX Hash", Loading(200)),
68+
("Gas Fee\n(BAND)", Loading(60)),
69+
("Actions", Loading(230)),
70+
]
71+
}
72+
idx={reserveIndex -> Belt.Int.toString}
73+
/>
74+
}
75+
}
76+
}
77+
78+
@react.component
79+
let make = (~txsSub: Sub.variant<array<TxSub.t>>) => {
80+
let isMobile = Media.isMobile()
81+
let ({ThemeContext.theme, isDarkMode}, _) = React.useContext(ThemeContext.context)
82+
83+
<>
84+
{isMobile
85+
? React.null
86+
: <THead>
87+
<Row alignItems=Row.Center>
88+
<Col col=Col.Two>
89+
<Text
90+
block=true
91+
value="TX Hash"
92+
size=Text.Sm
93+
weight=Text.Semibold
94+
transform=Text.Uppercase
95+
/>
96+
</Col>
97+
<Col col=Col.Two>
98+
<div className={CssHelper.flexBox(~justify=#flexEnd, ())}>
99+
<Text
100+
block=true
101+
value="Gas Fee (BAND)"
102+
size=Text.Sm
103+
weight=Text.Semibold
104+
transform=Text.Uppercase
105+
/>
106+
</div>
107+
</Col>
108+
<Col col=Col.Eight>
109+
<Text
110+
block=true
111+
value="Actions"
112+
size=Text.Sm
113+
weight=Text.Semibold
114+
transform=Text.Uppercase
115+
/>
116+
</Col>
117+
</Row>
118+
</THead>}
119+
{switch txsSub {
120+
| Data(txs) =>
121+
txs->Belt.Array.size > 0
122+
? txs
123+
->Belt.Array.mapWithIndex((i, e) =>
124+
isMobile
125+
? <RenderBodyMobile
126+
reserveIndex=i
127+
txSub={Sub.resolve(e)}
128+
key={e.txHash -> Hash.toHex}
129+
/>
130+
: <RenderBody txSub={Sub.resolve(e)} key={e.txHash -> Hash.toHex} />
131+
)
132+
->React.array
133+
: <EmptyContainer>
134+
<img
135+
alt="No Transaction"
136+
src={isDarkMode ? Images.noTxDark : Images.noTxLight}
137+
className=Styles.noDataImage
138+
/>
139+
<Heading
140+
size=Heading.H4
141+
value="No Transaction"
142+
align=Heading.Center
143+
weight=Heading.Regular
144+
color={theme.textSecondary}
145+
/>
146+
</EmptyContainer>
147+
| Error(_) | Loading | NoData =>
148+
Belt.Array.make(isMobile ? 1 : 10, Sub.NoData)
149+
->Belt.Array.mapWithIndex((i, noData) =>
150+
isMobile
151+
? <RenderBodyMobile reserveIndex=i txSub=noData key={i -> Belt.Int.toString} />
152+
: <RenderBody txSub=noData key={i -> Belt.Int.toString} />
153+
)
154+
->React.array
155+
}}
156+
</>
157+
}

‎src/components/block/ResolvedRequest.res

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
module Styles = {
2+
open CssJs
3+
4+
let container = style(. [paddingTop(#px(24)), paddingBottom(#px(10)), minHeight(#px(100))])
5+
let emptyContainer =
6+
style(. [
7+
display(#flex),
8+
minHeight(#px(100)),
9+
alignItems(#center),
10+
justifyContent(#center),
11+
])
12+
let request = style(. [marginTop(#px(26)), marginRight(#px(12))])
13+
}
14+
15+
module RequestsList = {
16+
@react.component
17+
let make = (~requests) => {
18+
<div className={CssHelper.flexBox()}>
19+
{requests
20+
->Belt.Array.map(request =>
21+
<div className=Styles.request key={request |> ID.Request.toString}>
22+
<TypeID.Request id=request />
23+
</div>
24+
)
25+
->React.array}
26+
</div>
27+
}
28+
}
29+
30+
@react.component
31+
let make = (~blockSub: Sub.variant<BlockSub.t>) => {
32+
let (tabIndex, setTabIndex) = React.useState(_ => 0)
33+
let setTab = index => setTabIndex(_ => index)
34+
35+
switch (blockSub) {
36+
| Data({requests}) when requests->Belt.Array.length !== 0 =>
37+
let onChainRequests =
38+
requests->Belt.Array.keepMap(({id, isIBC}) => !isIBC ? Some(id) : None)
39+
let ibcRequests = requests->Belt.Array.keepMap(({id, isIBC}) => isIBC ? Some(id) : None)
40+
let onChain = onChainRequests->Belt.Array.length
41+
let ibc = ibcRequests->Belt.Array.length
42+
let showRequests = {
43+
switch (tabIndex) {
44+
| 0 => onChainRequests
45+
| 1 => ibcRequests
46+
| _ =>
47+
Js.log("Please handle every case on Resolve Requests.")
48+
[]
49+
}
50+
}
51+
52+
<Row marginBottom=24>
53+
<Col>
54+
<InfoContainer>
55+
<Heading value="Resolved Requests" size=Heading.H4 />
56+
<div className={CssHelper.mt(~size=16, ())}>
57+
<Text
58+
value="Resolved requests are requests that were successfully processed, failed, or timed out by BandChain in this block."
59+
/>
60+
</div>
61+
<Tab.State tabs=[j`On Chain ($onChain)`, j`IBC ($ibc)`] tabIndex setTab>
62+
{showRequests->Belt.Array.length === 0
63+
? <div className=Styles.emptyContainer>
64+
<Text value="There is no resolved request." />
65+
</div>
66+
: <div className=Styles.container>
67+
<Text value="Request ID" size=Text.Sm transform=Text.Uppercase />
68+
<RequestsList requests=showRequests />
69+
</div>}
70+
</Tab.State>
71+
</InfoContainer>
72+
</Col>
73+
</Row>
74+
| Data(_) | Error(_) | Loading | NoData => React.null
75+
}
76+
}

‎src/images/Images.res

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,7 @@
4949
@module("./cosmosibc.svg") external cosmosIBCIcon: string = "default"
5050
@module("./solidity.svg") external solidityIcon: string = "default"
5151
@module("./golang.svg") external golangIcon: string = "default"
52+
@module("./right-arrow.svg") external rightArrow: string = "default"
53+
54+
// BG
55+
@module("./not-found-bg.svg") external notFoundBg: string = "default"

0 commit comments

Comments
 (0)