From b6465836d8f020144a9df7bf32e56e4fe96e556c Mon Sep 17 00:00:00 2001 From: Yana Date: Wed, 4 Dec 2024 19:56:08 +0700 Subject: [PATCH] Add account stats card, desktop view --- .../app/components/AccountStatsCard.tsx | 205 ++++++++++++++++++ .../app/components/ExplorerCard.tsx | 10 +- ...Bar.tsx => ExplorerDynamicProgressBar.tsx} | 6 +- .../components/ExplorerStaticProgressBar.tsx | 32 +++ explorer-nextjs/app/page.tsx | 46 ++++ explorer-nextjs/remark42/var/remark42.db | Bin 65536 -> 65536 bytes 6 files changed, 292 insertions(+), 7 deletions(-) create mode 100644 explorer-nextjs/app/components/AccountStatsCard.tsx rename explorer-nextjs/app/components/{ExplorerProgressBar.tsx => ExplorerDynamicProgressBar.tsx} (95%) create mode 100644 explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx diff --git a/explorer-nextjs/app/components/AccountStatsCard.tsx b/explorer-nextjs/app/components/AccountStatsCard.tsx new file mode 100644 index 0000000000..e376a61b86 --- /dev/null +++ b/explorer-nextjs/app/components/AccountStatsCard.tsx @@ -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 ( + + {/* Main Row */} + + + + {type} + + + + {allocation}% + + + + + {amount} NYM + + + $ {value} + + + {history && ( + setOpen(!open)} + > + {open ? : } + + )} + + + + {/* History Rows */} + {history && + open && + history.map((historyRow, i) => ( + + + • + {historyRow.type} + + + {/* Empty cell for alignment */} + + + {historyRow.amount} + + + {/* Empty cell for alignment */} + + + {/* Any additional content */} + + + ))} + + ); +}; + +export interface IAccountStatsCardProps { + rows: Array; +} + +export const AccountStatsCard = (props: IAccountStatsCardProps) => { + const { rows } = props; + return ( + + + + + + + Type + Allocation + Amount + Value + + + + + {rows.map((row, i) => ( + + ))} + +
+ + + + ); +}; diff --git a/explorer-nextjs/app/components/ExplorerCard.tsx b/explorer-nextjs/app/components/ExplorerCard.tsx index 676f5fd8c3..0a8ce3697d 100644 --- a/explorer-nextjs/app/components/ExplorerCard.tsx +++ b/explorer-nextjs/app/components/ExplorerCard.tsx @@ -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; color: string; label: string }; - progressBar?: IExplorerProgressBarProps; + progressBar?: IExplorerDynamicProgressBarProps; paragraph?: string; onClick?: ReactEventHandler; nymAddress?: ICardCopyAddressProps; @@ -376,7 +376,7 @@ export const ExplorerCard: FC = ({ )} {progressBar && ( - + )} {paragraph && {paragraph}} diff --git a/explorer-nextjs/app/components/ExplorerProgressBar.tsx b/explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx similarity index 95% rename from explorer-nextjs/app/components/ExplorerProgressBar.tsx rename to explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx index 845c455a45..aa39eeea98 100644 --- a/explorer-nextjs/app/components/ExplorerProgressBar.tsx +++ b/explorer-nextjs/app/components/ExplorerDynamicProgressBar.tsx @@ -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); diff --git a/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx new file mode 100644 index 0000000000..257d27185a --- /dev/null +++ b/explorer-nextjs/app/components/ExplorerStaticProgressBar.tsx @@ -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 ( + + + + ); +}; diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx index 0ae1d9b4d3..1b42dde8b3 100644 --- a/explorer-nextjs/app/page.tsx +++ b/explorer-nextjs/app/page.tsx @@ -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() { {summaryOverview && ( <> + + + diff --git a/explorer-nextjs/remark42/var/remark42.db b/explorer-nextjs/remark42/var/remark42.db index 28d420e50619ec6a2b8e673bd8bc2602aaa4db70..9fdd644cbc193214b5daa3985c293ba72e3cb01b 100644 GIT binary patch literal 65536 zcmeI)J&)W(7zgmj!y!QCcx4ZUYdoOp1A|WVf zkf@-b03=Ef&`?sQfDb^y2Y>>Fng)sI@p_Kk#p`vBO9;w;BFFpKGk*E)$hsNN?8e3{ zJzcNw|9tWOCV#%PxV_%J@l5^U`Fbtm^Y35y>CYE}H)KAnApijgKmY;|fB*y_009U< z00Izrd<34VFJ)Ex|H9IxK3B)G{eQlW?|pgh*Y~b{@W)bigb;uL1Rwwb2tWV=5P$## zAOHafJO%>QyMDTk&5d)_)o_1+M$3z|+@_rze@knJ)*sjLh#LJi#XnHIUzU@8uQ$rV zV6>kVW#7|0tw%c>(`I$N*)ASnaD|pv=qRQUYnEXORSOMQwfxXfJ;QWV*9`+V3S-}l zv^z=?DSf3&R%J(-RGH~RDUM1ic5|v}W;m%<;vhJ*)q8KIR4mJr zJu0@GllDvtkt_W>N*as>~vr2(8&W1ZezGqpg=JYj5uft<@p$XHC~sx? zaO<_B$%u}cD|ed=wO%^Qr-s>hlBFUoi{3anO0!55J>AjW#>z??o9gQ|s;>j#go4mi zBX&*I8pNJTU$vupp%)K~P}3vJsOxK&tW_=G%FVaeP+#}cI1Cc8AE!}~1hcB#R9hGG z(ZNtxPhVHp)tQcU*|?#(RB`*3e$~`%&(~a^YWPE|%lw>fOifjJN>y1i2Z8BEx+-)b zR7;qa>Y2h)BYIGTP87vX?9^4cOV)K&In~37{kG=Z_V)G;Zv|r~+&{<))b<i8V(yf_!XO!0jFD-_851A4bSq`ZxZ&R?Y@jkCrKv~jtcfd?{tSZBUR zYkooYO&xziSIYw#zNV$Qm3^oEb@q-DX490$7w9`moa9Bh`#`UOmic)Q#%?6aAQ=_Qd1O4Fx1h)CLOK+A5+@>B z*fkYKK!%wIppvE$>04u!&Bo>5P$##AOHafKmY;|fB*y_ z009U*A_3XXmv8F%{lA?5{}KgfIsgCfajIK%mickbJV2jgp8tO`(s%WnwB|tw?Ss5^ z_pzAoPdA7J0SG_<0uX=z1Rwwb2tWV=5P0MQ^8J37`Tsvse*pInyh#mtp8wDN0~`yQ zusT1V|A1mSpP%=?OY!{t|4*0le=(Q;4CenYb~DV+|No9IM$Z3l?n7vwM&5Ov_^O|- zUp-H}xx}fa!s~APO|0uC>2Q;)duFI`<4v}dSTh-Z@!Pyi-=O@_$S0@MsG5E*XX=nZ zl^)vkbJ-;*PlV~`QUYrTKmY;|fB*y_009X6&jsYTemVYMHn*rrUL|hlbCUA}W)c2} z00bZa0SG_<0uX=z1Rwwb2tWV=5P$##AOHafKmY;|fB*y_009U<00Izz00bZa0SG_< z0uX=z1Rwwb2tWV=5P$##AOHafKmY;|fB*y_009U<00Izz00bZa0SG_<0uX=z1Rwwb z2tWV=5P$##AOHafKmY;|fB*y_009U<00Izz00bZa0SG_<0uX=z1Rwwb2s~K=e*wZ1 B)2{#k delta 476 zcmZo@U}JbSOJJZ{7XR00mKSG4C226Vjdt? z0AdiI4M-rXmu8&Y=HNSdy#pIdPGWJ%wzYhwZ@ z3otkY1sEU!0SgZ1&4v@6^G`J3n9Sjz5+w?>3uNa!AOUjodZ-&5fyzN{5P( z#{v1sZmvR8U(W<~GccSce{7JO)T}W1O5<77VB4(bdJE{vrA(6w5UvEd0R&iqt~{T= J*