Skip to content

Commit 6582c2e

Browse files
sirily11sirily11
authored
feat: add info screen design (#38)
1 parent b72b0ee commit 6582c2e

File tree

31 files changed

+546
-93
lines changed

31 files changed

+546
-93
lines changed

‎apps/etdstats/lib/Menu.tsx

+33-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1+
import React, { useState } from "react";
2+
import HomeIcon from "@mui/icons-material/Home";
3+
import InfoIcon from "@mui/icons-material/Info";
14
import {
2-
List,
3-
ListItem,
4-
ListItemText,
5-
ListItemButton,
65
Box,
7-
Typography,
8-
ListSubheader,
9-
ListItemIcon,
106
Card,
117
CardContent,
8+
List,
9+
ListItemButton,
10+
ListItemIcon,
11+
ListItemText,
1212
Stack,
13+
Typography,
1314
} from "@mui/material";
14-
import React from "react";
15+
import Link from "next/link";
1516
import { MenuSubHeader } from "ui";
16-
import InfoIcon from "@mui/icons-material/Info";
17-
import Image from "next/image";
17+
import { useMetaMask } from "metamask-react";
1818

1919
const selectedColor = "rgb(0, 171, 85)";
2020

2121
export default function Menu() {
22+
const { account } = useMetaMask();
23+
2224
return (
2325
<List>
2426
<Box mb={2} p={2}>
@@ -30,26 +32,42 @@ export default function Menu() {
3032
>
3133
<CardContent>
3234
<Stack direction={"row"}>
33-
<Typography>No wallet connected</Typography>
35+
<Typography noWrap>
36+
{account ?? "No Account Connected"}
37+
</Typography>
3438
</Stack>
3539
</CardContent>
3640
</Card>
3741
</Box>
3842
<MenuSubHeader title="General" />
3943
<ListItemButton
40-
selected
4144
sx={{
42-
color: selectedColor,
4345
borderRadius: "10px",
4446
padding: "12px",
4547
margin: "12px",
4648
}}
4749
>
4850
<ListItemIcon>
49-
<InfoIcon style={{ color: selectedColor }} />
51+
<HomeIcon />
5052
</ListItemIcon>
51-
<ListItemText primary="Info" />
53+
<ListItemText primary="Home" />
5254
</ListItemButton>
55+
<Link href="/info">
56+
<ListItemButton
57+
selected
58+
sx={{
59+
color: selectedColor,
60+
borderRadius: "10px",
61+
padding: "12px",
62+
margin: "12px",
63+
}}
64+
>
65+
<ListItemIcon>
66+
<InfoIcon style={{ color: selectedColor }} />
67+
</ListItemIcon>
68+
<ListItemText primary="Info" />
69+
</ListItemButton>
70+
</Link>
5371
</List>
5472
);
5573
}

‎apps/etdstats/lib/components/card/DataCard.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Card, CardContent, Stack, Typography } from "@mui/material";
2+
import React from "react";
3+
import { deepGreen, green } from "../../utils/colors";
4+
import { numberWithCommas } from "../../utils/format";
5+
import TrendingDownIcon from "@mui/icons-material/TrendingDown";
6+
import TrendingUpIcon from "@mui/icons-material/TrendingUp";
7+
import { Box } from "@mui/system";
8+
9+
interface Props {
10+
title: string;
11+
number: number;
12+
icon: React.ReactElement;
13+
}
14+
15+
export default function DataCard(props: Props) {
16+
return (
17+
<Card style={{ height: "100%" }}>
18+
<CardContent>
19+
<Stack direction={"row"} justifyContent="space-between" p={1}>
20+
<Stack spacing={2}>
21+
<Typography variant="subtitle2">{props.title}</Typography>
22+
<Stack direction={"row"} alignItems="center" spacing={1}>
23+
<TrendingUpIcon
24+
style={{
25+
color: deepGreen,
26+
backgroundColor: green,
27+
borderRadius: "50%",
28+
padding: "5px",
29+
width: "20px",
30+
height: "20px",
31+
}}
32+
/>
33+
<Typography variant="subtitle2">+2.6%</Typography>
34+
</Stack>
35+
<Typography variant="h4" fontWeight={600}>
36+
{numberWithCommas(props.number)}
37+
</Typography>
38+
</Stack>
39+
<Box>{props.icon}</Box>
40+
</Stack>
41+
</CardContent>
42+
</Card>
43+
);
44+
}

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

+2-17
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { GridColDef } from "@mui/x-data-grid";
1717
import { format } from "friendly-numbers";
1818
import { useRouter } from "next/router";
1919
import { useCallback, useMemo } from "react";
20+
import GeneralTransactionTable from "../table/GeneralTransactionTable";
2021

2122
interface Props {
2223
data: BlockResult;
@@ -57,16 +58,6 @@ export default function TransactionDisplay({ data }: Props) {
5758
await router.push(`/info/${id}`);
5859
}, []);
5960

60-
const rows = useMemo(() => {
61-
return data.data.transactions.map((transaction, index) => {
62-
return {
63-
id: index,
64-
hash: transaction.hash,
65-
value: toETD(transaction.value),
66-
};
67-
});
68-
}, [data]);
69-
7061
return (
7162
<Stack spacing={5}>
7263
<Card>
@@ -226,13 +217,7 @@ export default function TransactionDisplay({ data }: Props) {
226217
</Typography>
227218
</Stack>
228219
</Stack>
229-
<StyledDataGrid
230-
columns={columns}
231-
autoHeight
232-
rows={rows}
233-
hideFooter={true}
234-
hideFooterPagination={true}
235-
/>
220+
<GeneralTransactionTable data={data.data.transactions} />
236221
</CardContent>
237222
</Card>
238223
</Stack>

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

+8-9
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,14 @@ import { toETD } from "../../utils/toETD";
2222
import StatisticsCard from "../card/StatisticsCard";
2323
import TransferMoneyCard from "../card/TransferMoneyCard";
2424
import UserContractCard from "../card/UserContractCard";
25-
26-
const green = "rgb(200, 250, 205)";
27-
const deepGreen = "rgb(0, 123, 85)";
28-
29-
const orange = "rgb(255, 247, 205)";
30-
const deepOrange = "rgb(122, 79, 1)";
31-
32-
const blue = "rgb(171, 233, 255)";
33-
const deepBlue = "rgb(0, 99, 166)";
25+
import {
26+
orange,
27+
deepBlue,
28+
deepGreen,
29+
deepOrange,
30+
blue,
31+
green,
32+
} from "../../utils/colors";
3433

3534
interface Props {
3635
data: UserResult;

‎apps/etdstats/lib/components/table/GeneralTransactionTable.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Transaction } from "openapi_client";
2+
import {
3+
Box,
4+
Card,
5+
CardContent,
6+
Fab,
7+
Grid,
8+
Link,
9+
Pagination,
10+
Stack,
11+
Typography,
12+
} from "@mui/material";
13+
import { GridColDef } from "@mui/x-data-grid";
14+
import React, { useMemo } from "react";
15+
//@ts-ignore
16+
import { format } from "friendly-numbers";
17+
import { toETD } from "../../utils/toETD";
18+
import { StyledDataGrid } from "ui";
19+
20+
interface Props {
21+
data: Transaction[];
22+
}
23+
24+
const columns: GridColDef[] = [
25+
{
26+
headerName: "#",
27+
field: "id",
28+
flex: 1,
29+
},
30+
{
31+
field: "hash",
32+
headerName: "Hash",
33+
flex: 10,
34+
renderCell: (rowData) => (
35+
<Link href={`/info/${rowData.value}`}>{rowData.value}</Link>
36+
),
37+
},
38+
{
39+
field: "value",
40+
headerName: "Value",
41+
flex: 2,
42+
valueFormatter: (params) => {
43+
return format(toETD(params.value), {
44+
precision: 2,
45+
format: "short",
46+
});
47+
},
48+
},
49+
];
50+
51+
export default function GeneralTransactionTable({ data }: Props) {
52+
const rows = useMemo(() => {
53+
return data.map((transaction, index) => {
54+
return {
55+
id: index,
56+
hash: transaction.hash,
57+
value: toETD(transaction.value),
58+
};
59+
});
60+
}, [data]);
61+
62+
return (
63+
<StyledDataGrid
64+
columns={columns}
65+
autoHeight
66+
rows={rows}
67+
hideFooter={true}
68+
hideFooterPagination={true}
69+
/>
70+
);
71+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const green = "rgb(200, 250, 205)";
2+
export const deepGreen = "rgb(0, 123, 85)";
3+
4+
export const orange = "rgb(255, 247, 205)";
5+
export const deepOrange = "rgb(122, 79, 1)";
6+
7+
export const blue = "rgb(171, 233, 255)";
8+
export const deepBlue = "rgb(0, 99, 166)";

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

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export function capitalizeFirstLetter(string: string) {
22
return string.charAt(0).toUpperCase() + string.slice(1);
33
}
4+
5+
export function numberWithCommas(x: number) {
6+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
7+
}

‎apps/etdstats/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"@mui/system": "5.8.5",
2828
"ui": "workspace:*",
2929
"recharts": "^2.1.11",
30-
"prop-types": "15.8.1"
30+
"prop-types": "15.8.1",
31+
"metamask-react": "2.4.0"
3132
},
3233
"devDependencies": {
3334
"@types/node": "18.0.0",

‎apps/etdstats/pages/_app.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@emotion/react";
44
import { createTheme } from "@mui/material";
55
import Layout from "../lib/Layout";
66
import Menu from "../lib/Menu";
7+
import { MetaMaskProvider } from "metamask-react";
78

89
const theme = createTheme({
910
components: {
@@ -58,11 +59,13 @@ const theme = createTheme({
5859

5960
function MyApp({ Component, pageProps }: AppProps) {
6061
return (
61-
<ThemeProvider theme={theme}>
62-
<Layout menu={<Menu />}>
63-
<Component {...pageProps} />
64-
</Layout>
65-
</ThemeProvider>
62+
<MetaMaskProvider>
63+
<ThemeProvider theme={theme}>
64+
<Layout menu={<Menu />}>
65+
<Component {...pageProps} />
66+
</Layout>
67+
</ThemeProvider>
68+
</MetaMaskProvider>
6669
);
6770
}
6871

‎apps/etdstats/pages/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import type { NextPage } from "next";
22

33
const Home: NextPage = () => {
4-
return <div></div>;
4+
return <div>
5+
6+
</div>;
57
};
68

79
export default Home;

0 commit comments

Comments
 (0)