Skip to content

Commit c18e79f

Browse files
sirily11sirily11
authored
feat: add block UI (#34)
* feat: update ui * feat: add block info page
1 parent 53d4db7 commit c18e79f

28 files changed

+700
-33
lines changed

‎apps/etdstats/lib/Layout.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { AppBar, Box, Drawer, IconButton, Stack, Toolbar } from "@mui/material";
2+
import { useRouter } from "next/router";
3+
4+
import React from "react";
5+
import { ConnectWalletButton, UniversalSearchButton } from "ui";
6+
import { DrawerWidth } from "./settings/ui";
7+
8+
export default function Layout(props: {
9+
children: React.ReactNode;
10+
menu: React.ReactNode;
11+
}) {
12+
const router = useRouter();
13+
14+
return (
15+
<Box>
16+
<AppBar
17+
sx={{
18+
width: { sm: `calc(100% - ${DrawerWidth}px )` },
19+
ml: { sm: `${DrawerWidth}px` },
20+
}}
21+
>
22+
<Toolbar
23+
style={{
24+
display: "flex",
25+
justifyContent: "space-between",
26+
}}
27+
>
28+
<Stack>
29+
<UniversalSearchButton
30+
drawerWidth={DrawerWidth}
31+
onSearch={(v) => {
32+
router.push(`/info/${v}`);
33+
}}
34+
/>
35+
</Stack>
36+
<Stack direction={"row"}>
37+
<ConnectWalletButton />
38+
</Stack>
39+
</Toolbar>
40+
</AppBar>
41+
<Box component={"nav"}>
42+
<Drawer
43+
variant="temporary"
44+
ModalProps={{
45+
keepMounted: true, // Better open performance on mobile.
46+
}}
47+
sx={{
48+
display: { xs: "block", sm: "none" },
49+
"& .MuiDrawer-paper": {
50+
boxSizing: "border-box",
51+
width: DrawerWidth,
52+
},
53+
}}
54+
>
55+
{props.menu}
56+
</Drawer>
57+
<Drawer
58+
variant="permanent"
59+
sx={{
60+
display: { xs: "none", sm: "block" },
61+
"& .MuiDrawer-paper": {
62+
boxSizing: "border-box",
63+
width: DrawerWidth,
64+
},
65+
}}
66+
open
67+
>
68+
{props.menu}
69+
</Drawer>
70+
</Box>
71+
<Box
72+
mt={5}
73+
component="main"
74+
sx={{
75+
width: { sm: `calc(100% - ${DrawerWidth}px )` },
76+
pl: { sm: `${DrawerWidth}px` },
77+
}}
78+
>
79+
{props.children}
80+
</Box>
81+
</Box>
82+
);
83+
}

‎apps/etdstats/lib/Menu.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
List,
3+
ListItem,
4+
ListItemText,
5+
ListItemButton,
6+
Box,
7+
Typography,
8+
ListSubheader,
9+
ListItemIcon,
10+
Card,
11+
CardContent,
12+
Stack,
13+
} from "@mui/material";
14+
import React from "react";
15+
import { MenuSubHeader } from "ui";
16+
import InfoIcon from "@mui/icons-material/Info";
17+
import Image from "next/image";
18+
19+
const selectedColor = "rgb(0, 171, 85)";
20+
21+
export default function Menu() {
22+
return (
23+
<List>
24+
<Box mb={2} p={2}>
25+
<Card
26+
sx={{
27+
boxShadow: "none",
28+
backgroundColor: "rgba(191, 191, 191, 0.1)",
29+
}}
30+
>
31+
<CardContent>
32+
<Stack direction={"row"}>
33+
<Typography>No wallet connected</Typography>
34+
</Stack>
35+
</CardContent>
36+
</Card>
37+
</Box>
38+
<MenuSubHeader title="General" />
39+
<ListItemButton
40+
selected
41+
sx={{
42+
color: selectedColor,
43+
borderRadius: "10px",
44+
padding: "12px",
45+
margin: "12px",
46+
}}
47+
>
48+
<ListItemIcon>
49+
<InfoIcon style={{ color: selectedColor }} />
50+
</ListItemIcon>
51+
<ListItemText primary="Info" />
52+
</ListItemButton>
53+
</List>
54+
);
55+
}

‎apps/etdstats/lib/components/display/BlockDisplay.tsx

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import { Box, Card, CardContent, Grid, Stack, Typography } from "@mui/material";
2+
import Image from "next/image";
3+
import { BlockResult } from "openapi_client";
4+
import React from "react";
5+
import { Chip, ListItemButton, StyledDataGrid } from "ui";
6+
import dayjs from "dayjs";
7+
import { toETD, toWei } from "../../utils/toETD";
8+
//@ts-ignore
9+
import { format } from "friendly-numbers";
10+
import { DataGrid, GridColDef } from "@mui/x-data-grid";
11+
12+
interface Props {
13+
data: BlockResult;
14+
}
15+
16+
const columns: GridColDef[] = [
17+
{
18+
headerName: "#",
19+
field: "id",
20+
flex: 1,
21+
},
22+
{
23+
field: "Hash",
24+
headerName: "Hash",
25+
flex: 5,
26+
},
27+
{
28+
field: "Value",
29+
headerName: "Value",
30+
flex: 4,
31+
valueFormatter: (params) => {
32+
return format(toETD(params.value), {
33+
precision: 2,
34+
format: "short",
35+
});
36+
},
37+
},
38+
];
39+
40+
export default function TransactionDisplay({ data }: Props) {
41+
return (
42+
<Stack spacing={5}>
43+
<Card>
44+
<CardContent>
45+
<Stack
46+
direction={"row"}
47+
alignItems="center"
48+
justifyContent={"space-between"}
49+
spacing={2}
50+
>
51+
<Stack
52+
direction={"row"}
53+
justifyItems="center"
54+
alignItems={"center"}
55+
>
56+
<Image
57+
src="/BlockIcon.webp"
58+
alt="Block Logo"
59+
width={80}
60+
height={80}
61+
/>
62+
<Typography
63+
variant="caption"
64+
textTransform={"uppercase"}
65+
fontWeight={800}
66+
>
67+
Info
68+
</Typography>
69+
</Stack>
70+
<Stack alignItems={"flex-end"} spacing={1}>
71+
<Box>
72+
<Chip label={"Block Hash"} />
73+
</Box>
74+
<Typography
75+
sx={{
76+
width: { sm: 300, xs: 100 },
77+
wordWrap: "break-word",
78+
}}
79+
fontWeight="bold"
80+
>
81+
{data.data.hash}
82+
</Typography>
83+
</Stack>
84+
</Stack>
85+
<Grid container mt={4} spacing={3}>
86+
<Grid item xs={12} md={6}>
87+
<ListItemButton
88+
title="Block Number"
89+
subtitle={data.data.number}
90+
/>
91+
</Grid>
92+
<Grid item xs={12} md={6}>
93+
<ListItemButton
94+
title="Timestamp"
95+
subtitle={dayjs(data.data.timestamp).format(
96+
"YYYY MMM DD, hh:mm:ss a"
97+
)}
98+
/>
99+
</Grid>
100+
<Grid item xs={12} md={6}>
101+
<ListItemButton
102+
title="Parent Block"
103+
subtitle={data.data.parentHash}
104+
/>
105+
</Grid>
106+
<Grid item xs={12} md={6}>
107+
<ListItemButton title="Miner" subtitle={data.data.miner} />
108+
</Grid>
109+
</Grid>
110+
</CardContent>
111+
</Card>
112+
113+
<Card>
114+
<CardContent>
115+
<Stack
116+
direction={"row"}
117+
alignItems="center"
118+
justifyContent={"space-between"}
119+
spacing={2}
120+
>
121+
<Stack
122+
direction={"row"}
123+
justifyItems="center"
124+
alignItems={"center"}
125+
>
126+
<Image
127+
src="/EstimateIcon.webp"
128+
alt="Estimate Logo"
129+
width={80}
130+
height={80}
131+
/>
132+
<Typography
133+
variant="caption"
134+
textTransform={"uppercase"}
135+
fontWeight={800}
136+
>
137+
Stats
138+
</Typography>
139+
</Stack>
140+
</Stack>
141+
<Grid container mt={4} spacing={3}>
142+
<Grid item xs={12} md={6}>
143+
<ListItemButton
144+
title="Difficulty"
145+
subtitle={format(data.data.totalDifficulty)}
146+
/>
147+
</Grid>
148+
<Grid item xs={12} md={6}>
149+
<ListItemButton
150+
title="Gas Used"
151+
subtitle={`${toWei(data.data.gasUsed)} wei`}
152+
/>
153+
</Grid>
154+
<Grid item xs={12} md={6}>
155+
<ListItemButton
156+
title="Gas Limit"
157+
subtitle={`${toWei(data.data.gasLimit)} wei`}
158+
/>
159+
</Grid>
160+
<Grid item xs={12} md={6}>
161+
<ListItemButton title="Size" subtitle={format(data.data.size)} />
162+
</Grid>
163+
</Grid>
164+
</CardContent>
165+
</Card>
166+
167+
<Card>
168+
<CardContent>
169+
<Stack
170+
direction={"row"}
171+
alignItems="center"
172+
justifyContent={"space-between"}
173+
spacing={2}
174+
>
175+
<Stack
176+
direction={"row"}
177+
justifyItems="center"
178+
alignItems={"center"}
179+
>
180+
<Image
181+
src="/SpreadsheetIcon.webp"
182+
alt="Estimate Logo"
183+
width={80}
184+
height={80}
185+
/>
186+
<Typography
187+
variant="caption"
188+
textTransform={"uppercase"}
189+
fontWeight={800}
190+
>
191+
Transactions
192+
</Typography>
193+
</Stack>
194+
</Stack>
195+
<StyledDataGrid
196+
columns={columns}
197+
autoHeight
198+
rows={[]}
199+
hideFooter={true}
200+
hideFooterPagination={true}
201+
/>
202+
</CardContent>
203+
</Card>
204+
</Stack>
205+
);
206+
}

‎apps/etdstats/components/display/TransactionDisplay.tsx ‎apps/etdstats/lib/components/display/TransactionDisplay.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export default function TransactionDisplay({ data }: Props) {
1717
return "confirmed";
1818
}, [data]);
1919

20-
console.log(data);
2120
return (
2221
<Card>
2322
<CardContent>
@@ -30,7 +29,7 @@ export default function TransactionDisplay({ data }: Props) {
3029
<Stack direction={"row"} justifyItems="center" alignItems={"center"}>
3130
<Image
3231
src="/TransactionIcon.webp"
33-
alt="Vercel Logo"
32+
alt="Transaction Logo"
3433
width={80}
3534
height={80}
3635
/>
@@ -40,8 +39,10 @@ export default function TransactionDisplay({ data }: Props) {
4039
<Chip label={status} />
4140
</Box>
4241
<Typography
43-
width={300}
44-
style={{ wordWrap: "break-word" }}
42+
sx={{
43+
width: { sm: 300, xs: 100 },
44+
wordWrap: "break-word",
45+
}}
4546
fontWeight="bold"
4647
>
4748
{data.data.hash}
@@ -65,9 +66,8 @@ export default function TransactionDisplay({ data }: Props) {
6566
<ListItemButton title="Timestamp" subtitle={""} />
6667
</Grid>
6768
</Grid>
68-
6969
<Box p={2}>
70-
<Card variant="outlined">
70+
<Card variant="outlined" sx={{ boxShadow: "none" }}>
7171
<CardContent>
7272
<Stack>
7373
<Typography
@@ -85,7 +85,6 @@ export default function TransactionDisplay({ data }: Props) {
8585
</CardContent>
8686
</Card>
8787
</Box>
88-
8988
<Stack spacing={3} alignItems={"flex-end"}>
9089
<Stack>
9190
<Typography

‎apps/etdstats/lib/settings/ui.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const DrawerWidth = 250;

‎apps/etdstats/utils/capitalize.ts ‎apps/etdstats/lib/utils/capitalize.ts

File renamed without changes.

‎apps/etdstats/utils/toETD.ts ‎apps/etdstats/lib/utils/toETD.ts

File renamed without changes.

0 commit comments

Comments
 (0)