feat: add apr charts

subsquid · Jul 1, 2024 · 4eb3688 · 4eb3688
1 parent 4e2f9e2
commit 4eb3688
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 264 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "@mui/icons-material": "^5.15.21",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.21",
-    "@mui/x-charts": "^7.8.0",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@sentry/react": "^7.118.0",
     "@tanstack/react-query": "^5.49.2",

diff --git a/src/api/subsquid-network-squid/api.graphql b/src/api/subsquid-network-squid/api.graphql
@@ -342,6 +342,11 @@ query networkSummary {
     storedData
     workerApr
     workersCount
+    aprs {
+      stakerApr
+      timestamp
+      workerApr
+    }
   }
 }
 

diff --git a/src/api/subsquid-network-squid/graphql.tsx b/src/api/subsquid-network-squid/graphql.tsx
@@ -401,6 +401,13 @@ export type AccountsConnection = {
   totalCount: Scalars['Int']['output'];
 };
 
+export type AprSnapshot = {
+  __typename?: 'AprSnapshot';
+  stakerApr: Scalars['Float']['output'];
+  timestamp: Scalars['DateTime']['output'];
+  workerApr: Scalars['Float']['output'];
+};
+
 export type Block = {
   __typename?: 'Block';
   hash: Scalars['String']['output'];
@@ -2563,6 +2570,7 @@ export type GatewaysConnection = {
 
 export type NetworkStats = {
   __typename?: 'NetworkStats';
+  aprs: Array<AprSnapshot>;
   blockTime: Scalars['Float']['output'];
   blockTimeL1: Scalars['Float']['output'];
   lastBlock: Scalars['Float']['output'];
@@ -5974,6 +5982,12 @@ export type NetworkSummaryQuery = {
     storedData: string;
     workerApr: number;
     workersCount: number;
+    aprs: Array<{
+      __typename?: 'AprSnapshot';
+      stakerApr: number;
+      timestamp: string;
+      workerApr: number;
+    }>;
   };
 };
 
@@ -6714,6 +6728,11 @@ export const NetworkSummaryDocument = `
     storedData
     workerApr
     workersCount
+    aprs {
+      stakerApr
+      timestamp
+      workerApr
+    }
   }
 }
     `;

diff --git a/src/pages/AssetsPage/Assets.tsx b/src/pages/AssetsPage/Assets.tsx
@@ -15,8 +15,8 @@ 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 { Cell, Pie, PieChart } from 'recharts';
 
 import { useMyAssets } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
@@ -69,7 +69,7 @@ function TotalBalance({ balances, total }: { balances: TokenBalance[]; total: Bi
       alignItems="flex-end"
       flex={1}
     >
-      <Box display="flex" pr={7} pb={3} alignItems="center">
+      {/* <Box display="flex" pr={7} pb={3} alignItems="center">
         <PieChart
           series={[
             {
@@ -85,31 +85,28 @@ function TotalBalance({ balances, total }: { balances: TokenBalance[]; total: Bi
           height={256}
           skipAnimation
         />
+      </Box> */}
+      <Box mb={4} mr={7}>
+        <PieChart width={240} height={240}>
+          <Pie
+            data={balances.map(i => ({ name: i.name, value: i.value.toNumber() }))}
+            animationDuration={0}
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={120}
+            nameKey="name"
+            dataKey="value"
+            style={{ outline: 'none' }}
+          >
+            {balances.map(i => (
+              <Cell key={i.name} fill={i.color} strokeWidth={0} />
+            ))}
+          </Pie>
+        </PieChart>
       </Box>
 
-      {/* <PieChart width={210} height={210}>
-        <Pie
-          data={balances.map(i => ({ name: i.name, value: i.value.toNumber() }))}
-          animationBegin={0}
-          animationDuration={0}
-          cx="50%"
-          cy="50%"
-          innerRadius={60}
-          outerRadius={105}
-          nameKey="name"
-          dataKey="value"
-        >
-          {balances.map(i => (
-            <Cell
-              onClick={e => {
-                e.preventDefault();
-              }}
-              key={i.name}
-              fill={i.background}
-            />
-          ))}
-        </Pie>
-      </PieChart> */}
+      {/*  */}
       <Box mb={1}>
         <SquaredChip label="Total" color="primary" />
       </Box>

diff --git a/src/pages/DashboardPage/Summary.tsx b/src/pages/DashboardPage/Summary.tsx
@@ -3,11 +3,13 @@ import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import {
   bytesFormatter,
   numberWithSpacesFormatter,
+  percentFormatter,
   tokenFormatter,
 } from '@lib/formatters/formatters';
 import { fromSqd } from '@lib/network';
-import { Box, Card, Divider, Stack, SxProps, Typography } from '@mui/material';
+import { alpha, Box, Card, Divider, Stack, SxProps, Typography, useTheme } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
+import { AreaChart, Area, ResponsiveContainer, Tooltip, TooltipProps } from 'recharts';
 
 import { useNetworkSummary } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
@@ -202,6 +204,118 @@ function Stats() {
   );
 }
 
+function AprTooltip({ active, payload }: TooltipProps<number, string>) {
+  return active && payload?.length ? (
+    <SquaredChip
+      label={percentFormatter(payload[0].value)}
+      color="info"
+      sx={{ transform: 'translateX(-50%)' }}
+    />
+  ) : null;
+}
+
+function AprChart({ data }: { data: { value: number }[] }) {
+  const theme = useTheme();
+
+  return (
+    <ResponsiveContainer width="200%" height="85%" style={{ margin: theme.spacing(-1.5) }}>
+      <AreaChart
+        width={200}
+        height={60}
+        data={data}
+        defaultShowTooltip
+        margin={{
+          top: 24,
+          right: 0,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <defs>
+          <linearGradient id="area-gradient" x2="0" y2="1">
+            <stop offset="0%" stopColor={theme.palette.info.main} />
+            <stop offset="100%" stopColor={alpha(theme.palette.info.main, 0.25)} />
+          </linearGradient>
+        </defs>
+        <Tooltip
+          content={<AprTooltip />}
+          animationDuration={0}
+          cursor={{
+            stroke: theme.palette.text.secondary,
+            strokeWidth: 2,
+            strokeDasharray: 6,
+          }}
+          defaultIndex={data.length - 2}
+          active
+          allowEscapeViewBox={{ x: true }}
+          position={{ y: -6 }}
+          wrapperStyle={{
+            zIndex: theme.zIndex.tooltip,
+          }}
+          offset={0}
+        />
+        <Area
+          animationDuration={0}
+          type="linear"
+          dataKey="value"
+          stroke={theme.palette.info.main}
+          strokeWidth={theme.spacing(0.5)}
+          fill="url(#area-gradient)"
+          activeDot={{
+            strokeWidth: 0,
+          }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}
+
+function WorkersApr() {
+  const { data, isLoading } = useNetworkSummary();
+
+  const aprs = useMemo(() => {
+    if (!data) return [];
+
+    return data.aprs.map((apr, i) => ({
+      value: i === data.aprs.length - 1 ? (apr.workerApr + data.workerApr) / 2 : apr.workerApr,
+    }));
+  }, [data]);
+
+  return (
+    <SummarySection
+      loading={isLoading}
+      sx={{ height: 1, overflow: 'visible' }}
+      title={<SquaredChip label="Worker APR" color="primary" />}
+      action="Last 14 days"
+    >
+      <AprChart data={aprs} />
+    </SummarySection>
+  );
+}
+
+function DelegatorsApr() {
+  const { data, isLoading } = useNetworkSummary();
+
+  const aprs = useMemo(() => {
+    if (!data) return [];
+
+    return data.aprs.map((apr, i) => ({
+      value: i === data.aprs.length - 1 ? (apr.stakerApr + data.stakerApr) / 2 : apr.stakerApr,
+    }));
+  }, [data]);
+
+  return (
+    <SummarySection
+      loading={isLoading}
+      sx={{ height: 1, overflow: 'visible' }}
+      title={<SquaredChip label="Delegator APR" color="primary" />}
+      action="Last 14 days"
+    >
+      <AprChart data={aprs || []} />
+    </SummarySection>
+  );
+}
+
 export function NetworkSummary() {
   return (
     <Box minHeight={528} mb={2} display="flex">
@@ -215,63 +329,19 @@ export function NetworkSummary() {
               <CurrentEpoch />
             </Grid>
             <Grid xxs={6} minHeight={0.5}>
-              <SummarySection
-                sx={{ height: 1 }}
-                title={<SquaredChip label="Worker APR" color="primary" />}
-                action="Last 14 days"
-              >
-                <Box display="flex" fontSize={20}>
-                  No Data
-                </Box>
-              </SummarySection>
+              <WorkersApr />
             </Grid>
             <Grid xxs={6} minHeight={0.5}>
-              <SummarySection
-                sx={{ height: 1 }}
-                title={<SquaredChip label="Delegator APR" color="primary" />}
-                action="Last 14 days"
-              >
-                <Box display="flex" fontSize={20}>
-                  No Data
-                </Box>
-              </SummarySection>
+              <DelegatorsApr />
             </Grid>
           </Grid>
           <Grid xxs={4}>
             <Stats />
           </Grid>
         </Grid>
+
         {/* <Box height={500}>
-            <ResponsiveChartContainer
-              series={[
-                {
-                  data: [2, 5.5, 2, 8.5, 1.5, 5],
-                  type: 'line',
-                  area: true,
-                  curve: 'linear',
-                  color: theme.palette.info.main,
-                },
-              ]}
-              xAxis={[
-                {
-                  data: [1, 2, 3, 4, 5, 6],
-                },
-              ]}
-              sx={{
-                [`& .${areaElementClasses.root}`]: {
-                  fill: 'url(#area-gradient)',
-                },
-              }}
-            >
-              <LinePlot></LinePlot>
-              <AreaPlot></AreaPlot>
-              <defs>
-                <linearGradient id="area-gradient" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#e66465" />
-                  <stop offset="100%" stopColor="#9198e5" />
-                </linearGradient>
-              </defs>
-            </ResponsiveChartContainer>
+            
           </Box> */}
       </>
     </Box>