Add account stats card, desktop view

2024-12-04 19:56:08 +07:00
parent 40916f77da
commit b6465836d8
6 changed files with 292 additions and 7 deletions
@@ -0,0 +1,205 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import { Card, CardContent } from "@mui/material";
+import { ExplorerStaticProgressBar } from "./ExplorerStaticProgressBar";
+
+export interface IAccontStatsRowProps {
+  type: string;
+  allocation: number;
+  amount: number;
+  value: number;
+  history?: { type: string; amount: number }[];
+  isLastRow?: boolean;
+  progressBarColor: string;
+}
+
+const progressBarColours = [
+  "#BEF885",
+  "#7FB0FF",
+  "#00D17D",
+  "#004650",
+  "#FEECB3",
+];
+
+const Row = (props: IAccontStatsRowProps) => {
+  const {
+    type,
+    allocation,
+    amount,
+    value,
+    history,
+    isLastRow,
+    progressBarColor,
+  } = props;
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      {/* Main Row */}
+
+      <TableRow>
+        <TableCell
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {type}
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          <Box>
+            <Typography>{allocation}%</Typography>
+            <ExplorerStaticProgressBar
+              value={allocation}
+              color={progressBarColor}
+            />
+          </Box>
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {amount} NYM
+        </TableCell>
+        <TableCell
+          align="right"
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          $ {value}
+        </TableCell>
+        <TableCell
+          sx={{
+            borderBottom: isLastRow
+              ? "none"
+              : "1px solid rgba(224, 224, 224, 1)",
+          }}
+        >
+          {history && (
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </IconButton>
+          )}
+        </TableCell>
+      </TableRow>
+
+      {/* History Rows */}
+      {history &&
+        open &&
+        history.map((historyRow, i) => (
+          <TableRow key={i}>
+            <TableCell
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                pl: 5,
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              <span style={{ marginRight: 8 }}>•</span>
+              {historyRow.type}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Empty cell for alignment */}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {historyRow.amount}
+            </TableCell>
+            <TableCell
+              align="right"
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Empty cell for alignment */}
+            </TableCell>
+            <TableCell
+              sx={{
+                borderBottom: "none", // Explicitly remove border
+              }}
+            >
+              {/* Any additional content */}
+            </TableCell>
+          </TableRow>
+        ))}
+    </React.Fragment>
+  );
+};
+
+export interface IAccountStatsCardProps {
+  rows: Array<IAccontStatsRowProps>;
+}
+
+export const AccountStatsCard = (props: IAccountStatsCardProps) => {
+  const { rows } = props;
+  return (
+    <Card sx={{ height: "100%", borderRadius: "unset" }}>
+      <CardContent>
+        <TableContainer>
+          <Table aria-label="collapsible table" sx={{ marginBottom: 3 }}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Type</TableCell>
+                <TableCell align="right">Allocation</TableCell>
+                <TableCell align="right">Amount</TableCell>
+                <TableCell align="right">Value</TableCell>
+                <TableCell></TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, i) => (
+                <Row
+                  key={i}
+                  {...row}
+                  isLastRow={i === rows.length - 1}
+                  progressBarColor={progressBarColours[i]}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  );
+};
@@ -2,9 +2,9 @@ import { Card, CardContent, Typography, Box, Button } from "@mui/material";
 import React, { FC, ReactElement, ReactEventHandler, useEffect } from "react";
 import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart";
 import {
-  ExplorerProgressBar,
-  IExplorerProgressBarProps,
-} from "./ExplorerProgressBar";
+  ExplorerDynamicProgressBar,
+  IExplorerDynamicProgressBarProps,
+} from "./ExplorerDynamicProgressBar";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import { NymTokenSVG } from "../icons/NymTokenSVG";
@@ -311,7 +311,7 @@ export type ContentCardProps = {
  titlePrice?: ICardTitlePriceProps;
  dataRows?: ICardDataRowsProps;
  graph?: { data: Array<IExplorerLineChartData>; color: string; label: string };
-  progressBar?: IExplorerProgressBarProps;
+  progressBar?: IExplorerDynamicProgressBarProps;
  paragraph?: string;
  onClick?: ReactEventHandler;
  nymAddress?: ICardCopyAddressProps;
@@ -376,7 +376,7 @@ export const ExplorerCard: FC<ContentCardProps> = ({
      )}
      {progressBar && (
        <Box mb={3}>
-          <ExplorerProgressBar {...progressBar} />
+          <ExplorerDynamicProgressBar {...progressBar} />
        </Box>
      )}
      {paragraph && <Typography>{paragraph}</Typography>}
@@ -3,13 +3,15 @@ import Box from "@mui/material/Box";
 import LinearProgress from "@mui/material/LinearProgress";
 import { Typography } from "@mui/material";

-export interface IExplorerProgressBarProps {
+export interface IExplorerDynamicProgressBarProps {
  title?: string;
  start: string; // Start timestamp as ISO 8601 string
  showEpoch: boolean;
 }

-export const ExplorerProgressBar = (props: IExplorerProgressBarProps) => {
+export const ExplorerDynamicProgressBar = (
+  props: IExplorerDynamicProgressBarProps
+) => {
  const { start, showEpoch, title } = props;
  const [progress, setProgress] = React.useState(0);

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import { Typography } from "@mui/material";
+
+export interface IExplorerStaticProgressBarProps {
+  color: string;
+  value: number;
+}
+
+export const ExplorerStaticProgressBar = (
+  props: IExplorerStaticProgressBarProps
+) => {
+  const { color, value } = props;
+
+  return (
+    <Box>
+      <LinearProgress
+        variant="determinate"
+        value={value}
+        sx={{
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "#CAD6D7",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: color,
+          },
+        }}
+      />
+    </Box>
+  );
+};
@@ -21,6 +21,10 @@ import { ContentCardProps, ExplorerCard } from "./components/ExplorerCard";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import { ExplorerData, getCacheExplorerData } from "./api/explorer";
 import { IExplorerLineChartData } from "./components/ExplorerLineChart";
+import {
+  AccountStatsCard,
+  IAccountStatsCardProps,
+} from "./components/AccountStatsCard";

 // type ContentCardProps = {
 //   overTitle?: string;
@@ -253,6 +257,45 @@ export default function PageOverview() {
    graph: stakeLineGraphData,
  };

+  const accountStatsCard: IAccountStatsCardProps = {
+    rows: [
+      { type: "Spendable", allocation: 15.53, amount: 12800, value: 1200 },
+      {
+        type: "Delegated",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+        history: [
+          { type: "Liquid", amount: 6900 },
+          { type: "Locked", amount: 6900 },
+        ],
+      },
+      {
+        type: "Claimable",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+        history: [
+          { type: "Unlocked", amount: 6900 },
+          { type: "Staking rewards", amount: 6900 },
+          { type: "Operator comission", amount: 6900 },
+        ],
+      },
+      {
+        type: "Self bonded",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+      },
+      {
+        type: "Locked",
+        allocation: 15.53,
+        amount: 12800,
+        value: 1200,
+      },
+    ],
+  };
+
  const {
    summaryOverview,
    gateways,
@@ -271,6 +314,9 @@ export default function PageOverview() {
          <Grid container spacing={3}>
            {summaryOverview && (
              <>
+                <Grid item xs={12}>
+                  <AccountStatsCard {...accountStatsCard} />
+                </Grid>
                <Grid item xs={12} md={4}>
                  <ExplorerCard {...explorerCard} />
                </Grid>