feat: improve layout, add pie chart

subsquid · Jun 30, 2024 · c11d3e1 · c11d3e1
1 parent f718973
commit c11d3e1
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 182 deletions.
diff --git a/index.html b/index.html
@@ -62,7 +62,7 @@
       content: '';
       width: 48px;
       height: 5px;
-      background: #000;
+      background: #d5d8dd;
       opacity: 0.25;
       position: absolute;
       top: 60px;
@@ -76,7 +76,7 @@
       font-size: 60px;
       width: 100%;
       height: 100%;
-      background: #000;
+      background: #d5d8dd;
       animation: bxSpin 0.5s linear infinite;
       position: absolute;
       top: 0;

diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -13,10 +13,11 @@ export const Loader = ({
     return (
       <Box
         sx={{
-          minHeight,
+          height: 1,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
+          flex: 1,
           // '& .subsquid-loader:after': {
           //   backgroundColor: theme.palette.primary.main,
           // },
@@ -25,7 +26,7 @@ export const Loader = ({
         {/* <div className="show visible">
           <div className="subsquid-loader"></div>
         </div> */}
-        <CircularProgress color="primary" />
+        <CircularProgress color="secondary" />
       </Box>
     );
   }

diff --git a/src/pages/AssetsPage/Assets.tsx b/src/pages/AssetsPage/Assets.tsx
@@ -15,12 +15,12 @@ import {
   useTheme,
 } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
+import { PieChart } from '@mui/x-charts/PieChart';
 import BigNumber from 'bignumber.js';
 
 import { useMyAssets } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
 import { HelpTooltip } from '@components/HelpTooltip';
-import { Loader } from '@components/Loader';
 import { useContracts } from '@network/useContracts';
 import { ColumnLabel, ColumnValue, SummarySection } from '@pages/DashboardPage/Summary';
 
@@ -69,6 +69,24 @@ function TotalBalance({ balances, total }: { balances: TokenBalance[]; total: Bi
       alignItems="flex-end"
       flex={1}
     >
+      <Box display="flex" pr={7} pb={3} alignItems="center">
+        <PieChart
+          series={[
+            {
+              data: balances.map(i => ({ id: i.name, value: i.value.toNumber(), color: i.color })),
+              outerRadius: 120,
+              innerRadius: 60,
+              valueFormatter: v => tokenFormatter(v.value, SQD_TOKEN, 3),
+              cx: 128,
+              cy: 128,
+            },
+          ]}
+          width={256}
+          height={256}
+          skipAnimation
+        />
+      </Box>
+
       {/* <PieChart width={210} height={210}>
         <Pie
           data={balances.map(i => ({ name: i.name, value: i.value.toNumber() }))}
@@ -95,7 +113,9 @@ function TotalBalance({ balances, total }: { balances: TokenBalance[]; total: Bi
       <Box mb={1}>
         <SquaredChip label="Total" color="primary" />
       </Box>
-      <Typography variant="h2">{tokenFormatter(total, SQD_TOKEN, 3)}</Typography>
+      <Typography variant="h2" textAlign="end">
+        {tokenFormatter(total, SQD_TOKEN, 3)}
+      </Typography>
     </Box>
   );
 }
@@ -154,36 +174,34 @@ export function MyAssets() {
   );
 
   return (
-    <Box minHeight={448} mb={2}>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <SummarySection
-          sx={{ minHeight: 'inherit' }}
-          title={<SquaredChip label="My Assets" color="primary" />}
-          action={<ClaimButton />}
-          content={
-            <Grid container spacing={2} disableEqualOverflow>
-              <Grid xxs={4}>
-                <Stack divider={<Divider />} spacing={1} flex={1} justifyContent="flex-end">
-                  <TokenBalance balance={data[0]} />
-                  <TokenBalance balance={data[1]} />
-                  <TokenBalance balance={data[2]} />
-                </Stack>
-              </Grid>
-              <Grid xxs={4} display="flex" alignContent="stretch">
-                <Stack divider={<Divider />} spacing={1} flex={1} justifyContent="flex-end">
-                  <TokenBalance balance={data[3]} />
-                  <TokenBalance balance={data[4]} />
-                </Stack>
-              </Grid>
-              <Grid xxs={4} display="flex" alignContent="stretch">
-                <TotalBalance balances={data} total={fromSqd(assets.total)} />
-              </Grid>
-            </Grid>
-          }
-        />
-      )}
+    <Box minHeight={448} mb={2} display="flex">
+      <SummarySection
+        loading={isLoading}
+        sx={{ width: 1 }}
+        title={<SquaredChip label="My Assets" color="primary" />}
+        action={<ClaimButton />}
+      >
+        <Grid container spacing={2} disableEqualOverflow flex={1}>
+          <Grid xxs={4}>
+            <Stack divider={<Divider />} spacing={1} height={1} justifyContent="flex-end">
+              <TokenBalance balance={data[0]} />
+              <TokenBalance balance={data[1]} />
+              <TokenBalance balance={data[2]} />
+            </Stack>
+          </Grid>
+          <Grid xxs={4}>
+            <Stack divider={<Divider />} spacing={1} height={1} justifyContent="flex-end">
+              <TokenBalance balance={data[3]} />
+              <TokenBalance balance={data[4]} />
+            </Stack>
+          </Grid>
+          <Grid xxs={4}>
+            <Box display="flex" alignItems="flex-end" height={1}>
+              <TotalBalance balances={data} total={fromSqd(assets.total)} />
+            </Box>
+          </Grid>
+        </Grid>
+      </SummarySection>
     </Box>
   );
 }
diff --git a/src/pages/DashboardPage/DashboardPage.tsx b/src/pages/DashboardPage/DashboardPage.tsx
@@ -1,14 +1,13 @@
 import { Outlet } from 'react-router-dom';
 
-import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout';
+import { CenteredPageWrapper } from '@layouts/NetworkLayout';
 
 import { NetworkSummary } from './Summary';
 import { Workers } from './Workers';
 
 export function DashboardPage() {
   return (
     <CenteredPageWrapper className="wide">
-      {/* <NetworkPageTitle title="Dashboard" /> */}
       <NetworkSummary />
       <Workers />
       <Outlet />