feat: add info screen design

apps/etdstats/lib/Menu.tsx

@@ -1,24 +1,26 @@
+import React, { useState } from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import InfoIcon from "@mui/icons-material/Info";
 import {
-  List,
-  ListItem,
-  ListItemText,
-  ListItemButton,
   Box,
-  Typography,
-  ListSubheader,
-  ListItemIcon,
   Card,
   CardContent,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
   Stack,
+  Typography,
 } from "@mui/material";
-import React from "react";
+import Link from "next/link";
 import { MenuSubHeader } from "ui";
-import InfoIcon from "@mui/icons-material/Info";
-import Image from "next/image";
+import { useMetaMask } from "metamask-react";
 
 const selectedColor = "rgb(0, 171, 85)";
 
 export default function Menu() {
+  const { account } = useMetaMask();
+
   return (
     <List>
       <Box mb={2} p={2}>
@@ -30,26 +32,42 @@ export default function Menu() {
         >
           <CardContent>
             <Stack direction={"row"}>
-              <Typography>No wallet connected</Typography>
+              <Typography noWrap>
+                {account ?? "No Account Connected"}
+              </Typography>
             </Stack>
           </CardContent>
         </Card>
       </Box>
       <MenuSubHeader title="General" />
       <ListItemButton
-        selected
         sx={{
-          color: selectedColor,
           borderRadius: "10px",
           padding: "12px",
           margin: "12px",
         }}
       >
         <ListItemIcon>
-          <InfoIcon style={{ color: selectedColor }} />
+          <HomeIcon />
         </ListItemIcon>
-        <ListItemText primary="Info" />
+        <ListItemText primary="Home" />
       </ListItemButton>
+      <Link href="/info">
+        <ListItemButton
+          selected
+          sx={{
+            color: selectedColor,
+            borderRadius: "10px",
+            padding: "12px",
+            margin: "12px",
+          }}
+        >
+          <ListItemIcon>
+            <InfoIcon style={{ color: selectedColor }} />
+          </ListItemIcon>
+          <ListItemText primary="Info" />
+        </ListItemButton>
+      </Link>
     </List>
   );
 }

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

@@ -0,0 +1,44 @@
+import { Card, CardContent, Stack, Typography } from "@mui/material";
+import React from "react";
+import { deepGreen, green } from "../../utils/colors";
+import { numberWithCommas } from "../../utils/format";
+import TrendingDownIcon from "@mui/icons-material/TrendingDown";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import { Box } from "@mui/system";
+
+interface Props {
+  title: string;
+  number: number;
+  icon: React.ReactElement;
+}
+
+export default function DataCard(props: Props) {
+  return (
+    <Card style={{ height: "100%" }}>
+      <CardContent>
+        <Stack direction={"row"} justifyContent="space-between" p={1}>
+          <Stack spacing={2}>
+            <Typography variant="subtitle2">{props.title}</Typography>
+            <Stack direction={"row"} alignItems="center" spacing={1}>
+              <TrendingUpIcon
+                style={{
+                  color: deepGreen,
+                  backgroundColor: green,
+                  borderRadius: "50%",
+                  padding: "5px",
+                  width: "20px",
+                  height: "20px",
+                }}
+              />
+              <Typography variant="subtitle2">+2.6%</Typography>
+            </Stack>
+            <Typography variant="h4" fontWeight={600}>
+              {numberWithCommas(props.number)}
+            </Typography>
+          </Stack>
+          <Box>{props.icon}</Box>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -17,6 +17,7 @@ import { GridColDef } from "@mui/x-data-grid";
 import { format } from "friendly-numbers";
 import { useRouter } from "next/router";
 import { useCallback, useMemo } from "react";
+import GeneralTransactionTable from "../table/GeneralTransactionTable";
 
 interface Props {
   data: BlockResult;
@@ -57,16 +58,6 @@ export default function TransactionDisplay({ data }: Props) {
     await router.push(`/info/${id}`);
   }, []);
 
-  const rows = useMemo(() => {
-    return data.data.transactions.map((transaction, index) => {
-      return {
-        id: index,
-        hash: transaction.hash,
-        value: toETD(transaction.value),
-      };
-    });
-  }, [data]);
-
   return (
     <Stack spacing={5}>
       <Card>
@@ -226,13 +217,7 @@ export default function TransactionDisplay({ data }: Props) {
               </Typography>
             </Stack>
           </Stack>
-          <StyledDataGrid
-            columns={columns}
-            autoHeight
-            rows={rows}
-            hideFooter={true}
-            hideFooterPagination={true}
-          />
+          <GeneralTransactionTable data={data.data.transactions} />
         </CardContent>
       </Card>
     </Stack>

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

@@ -22,15 +22,14 @@ import { toETD } from "../../utils/toETD";
 import StatisticsCard from "../card/StatisticsCard";
 import TransferMoneyCard from "../card/TransferMoneyCard";
 import UserContractCard from "../card/UserContractCard";
-
-const green = "rgb(200, 250, 205)";
-const deepGreen = "rgb(0, 123, 85)";
-
-const orange = "rgb(255, 247, 205)";
-const deepOrange = "rgb(122, 79, 1)";
-
-const blue = "rgb(171, 233, 255)";
-const deepBlue = "rgb(0, 99, 166)";
+import {
+  orange,
+  deepBlue,
+  deepGreen,
+  deepOrange,
+  blue,
+  green,
+} from "../../utils/colors";
 
 interface Props {
   data: UserResult;

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

@@ -0,0 +1,71 @@
+import { Transaction } from "openapi_client";
+import {
+  Box,
+  Card,
+  CardContent,
+  Fab,
+  Grid,
+  Link,
+  Pagination,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { GridColDef } from "@mui/x-data-grid";
+import React, { useMemo } from "react";
+//@ts-ignore
+import { format } from "friendly-numbers";
+import { toETD } from "../../utils/toETD";
+import { StyledDataGrid } from "ui";
+
+interface Props {
+  data: Transaction[];
+}
+
+const columns: GridColDef[] = [
+  {
+    headerName: "#",
+    field: "id",
+    flex: 1,
+  },
+  {
+    field: "hash",
+    headerName: "Hash",
+    flex: 10,
+    renderCell: (rowData) => (
+      <Link href={`/info/${rowData.value}`}>{rowData.value}</Link>
+    ),
+  },
+  {
+    field: "value",
+    headerName: "Value",
+    flex: 2,
+    valueFormatter: (params) => {
+      return format(toETD(params.value), {
+        precision: 2,
+        format: "short",
+      });
+    },
+  },
+];
+
+export default function GeneralTransactionTable({ data }: Props) {
+  const rows = useMemo(() => {
+    return data.map((transaction, index) => {
+      return {
+        id: index,
+        hash: transaction.hash,
+        value: toETD(transaction.value),
+      };
+    });
+  }, [data]);
+
+  return (
+    <StyledDataGrid
+      columns={columns}
+      autoHeight
+      rows={rows}
+      hideFooter={true}
+      hideFooterPagination={true}
+    />
+  );
+}

apps/etdstats/lib/utils/colors.ts

@@ -0,0 +1,8 @@
+export const green = "rgb(200, 250, 205)";
+export const deepGreen = "rgb(0, 123, 85)";
+
+export const orange = "rgb(255, 247, 205)";
+export const deepOrange = "rgb(122, 79, 1)";
+
+export const blue = "rgb(171, 233, 255)";
+export const deepBlue = "rgb(0, 99, 166)";

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

@@ -1,3 +1,7 @@
 export function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
+
+export function numberWithCommas(x: number) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}

apps/etdstats/package.json

@@ -27,7 +27,8 @@
     "@mui/system": "5.8.5",
     "ui": "workspace:*",
     "recharts": "^2.1.11",
-    "prop-types": "15.8.1"
+    "prop-types": "15.8.1",
+    "metamask-react": "2.4.0"
   },
   "devDependencies": {
     "@types/node": "18.0.0",

apps/etdstats/pages/_app.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "@emotion/react";
 import { createTheme } from "@mui/material";
 import Layout from "../lib/Layout";
 import Menu from "../lib/Menu";
+import { MetaMaskProvider } from "metamask-react";
 
 const theme = createTheme({
   components: {
@@ -58,11 +59,13 @@ const theme = createTheme({
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <ThemeProvider theme={theme}>
-      <Layout menu={<Menu />}>
-        <Component {...pageProps} />
-      </Layout>
-    </ThemeProvider>
+    <MetaMaskProvider>
+      <ThemeProvider theme={theme}>
+        <Layout menu={<Menu />}>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </MetaMaskProvider>
   );
 }
 

apps/etdstats/pages/index.tsx

@@ -1,7 +1,9 @@
 import type { NextPage } from "next";
 
 const Home: NextPage = () => {
-  return <div></div>;
+  return <div>
+
+  </div>;
 };
 
 export default Home;