💄 app: tweak historical rate chart

Author: cruzdanilo

components/asset/FloatingPool/index.tsx

@@ -29,7 +29,9 @@ const AssetFloatingPool: FC<AssetFloatingPoolProps> = ({ symbol }) => {
         boxShadow={({ palette }) => (palette.mode === 'light' ? '0px 4px 12px rgba(175, 177, 182, 0.2)' : '')}
         borderRadius="0px 0px 6px 6px"
         bgcolor="components.bg"
-        p="16px"
+        px="16px"
+        pt="16px"
+        pb="12px"
         height={280}
       >
         <HistoricalRateChart symbol={symbol} />

components/asset/Header.tsx

@@ -214,7 +214,7 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
           )}
           {symbol === 'USDC.e' && <FrozenPill />}
 
-          <Typography sx={{ width: '100%' }} variant="dashboardMainSubtitle">
+          <Typography sx={{ width: '100%', minHeight: '16px' }} variant="dashboardMainSubtitle">
             {assetDescription(symbol)}
           </Typography>
         </Grid>

components/asset/MaturityPool/MaturityPoolsTable/index.tsx

@@ -15,9 +15,11 @@ import { toPercentage } from 'utils/utils';
 import numbers from 'config/numbers.json';
 import useActionButton from 'hooks/useActionButton';
 import useMaturityPools from 'hooks/useMaturityPools';
+import usePreviewerExactly from 'hooks/usePreviewerExactly';
 import { useTranslation } from 'react-i18next';
 import getHourUTC2Local from 'utils/getHourUTC2Local';
 import { track } from 'utils/mixpanel';
+import Skeleton from '@mui/material/Skeleton';
 
 type MaturityPoolsTableProps = {
   symbol: string;
@@ -40,6 +42,7 @@ const MaturityPoolsTable: FC<MaturityPoolsTableProps> = ({ symbol }) => {
   const { handleActionClick } = useActionButton();
   const { minAPRValue } = numbers;
   const rows = useMaturityPools(symbol);
+  const { data } = usePreviewerExactly();
 
   return (
     <TableContainer>
@@ -65,6 +68,26 @@ const MaturityPoolsTable: FC<MaturityPoolsTableProps> = ({ symbol }) => {
           </TableRow>
         </TableHead>
         <TableBody>
+          {!data &&
+            Array.from({ length: 3 }, (_, index) => (
+              <TableRow key={`maturity-pool-skeleton-${index}`} sx={{ height: 65 }}>
+                <TableCell sx={{ pl: 1.5 }}>
+                  <Skeleton variant="rounded" width={80} height={20} />
+                </TableCell>
+                <TableCell>
+                  <Skeleton variant="rounded" width={50} height={20} />
+                </TableCell>
+                <TableCell>
+                  <Skeleton variant="rounded" width={80} height={34} />
+                </TableCell>
+                <TableCell>
+                  <Skeleton variant="rounded" width={50} height={20} />
+                </TableCell>
+                <TableCell size="small">
+                  <Skeleton variant="rounded" width={80} height={34} />
+                </TableCell>
+              </TableRow>
+            ))}
           {rows.map(({ maturity, totalDeposited, totalBorrowed, depositAPR, borrowAPR }) => (
             <TableRow
               key={Number(maturity)}

components/charts/HistoricalRateChart/index.tsx

@@ -1,8 +1,8 @@
 import { Box, Checkbox, FormControlLabel, Typography, useTheme } from '@mui/material';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { formatEther, formatUnits } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { floatingDepositRates } from '@exactly/lib';
@@ -39,7 +39,7 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
   const { t } = useTranslation();
   const { palette } = useTheme();
   const { setLoadError } = useGlobalError();
-  const [showDeposits, setShowDeposits] = useState(false);
+  const [showDeposits, setShowDeposits] = useState(true);
   const [range, setRange] = useState<Range>('6M');
 
   const marketAccount = usePreviewerExactly().data?.find((market) => market.assetSymbol === symbol);
@@ -50,12 +50,13 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
 
   const {
     data: points = [],
-    isLoading,
+    isFetching,
     isError,
   } = useQuery({
     queryKey: ['historicalRates', defaultChain.id, market, range],
     enabled: Boolean(client && market && ratePreviewer && code),
     staleTime: 60_000,
+    placeholderData: keepPreviousData,
     queryFn: async () => {
       if (!client || !market || !marketAccount || !ratePreviewer || !code) return [];
 
@@ -112,7 +113,7 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
     },
   });
 
-  const loading = isLoading || !marketAccount;
+  const loading = isFetching || !marketAccount;
 
   useEffect(() => {
     if (isError) setLoadError();
@@ -148,7 +149,7 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
   }, [showDeposits, symbol]);
 
   return (
-    <Box data-testid="historical-rate-chart" display="flex" flexDirection="column" width="100%" height="100%" gap={2}>
+    <Box data-testid="historical-rate-chart" display="flex" flexDirection="column" width="100%" height="100%" gap={1}>
       <Box display="flex" justifyContent="space-between">
         <Typography variant="h6" fontSize="16px">
           {t('Historical Variable Rates')}
@@ -157,109 +158,144 @@ const HistoricalRateChart: FC<Props> = ({ symbol }) => {
           <ButtonsChart buttons={buttons} defaultSelected={3} />
         </Box>
       </Box>
-      <Box flex={1} minHeight={0}>
+      <Box position="relative" flex={1} minWidth={0} minHeight={0}>
+        <LineChart responsive style={{ width: '100%', height: '100%' }} data={points} margin={{ top: 2 }}>
+          <CartesianGrid yAxisId="left" horizontal vertical={false} stroke={palette.grey[300]} />
+          <XAxis
+            dataKey="date"
+            type="number"
+            domain={['dataMin', 'dataMax']}
+            minTickGap={50}
+            padding={{ left: 8, right: 8 }}
+            tickFormatter={(value) =>
+              formatDate(new Date(value as number), range === '6M' || range === '1Y' || range === 'ALL')
+            }
+            stroke="#B4BABF"
+            fontSize="12px"
+            height={20}
+          />
+          <YAxis
+            yAxisId="left"
+            domain={['auto', 'auto']}
+            tickFormatter={(tick) => toPercentage(tick).replace(/(\.\d*?[1-9])0+(?=\D*$)|\.0+(?=\D*$)/, '$1')}
+            axisLine={false}
+            tick={{ fill: palette.grey[500], fontWeight: 500, fontSize: 11 }}
+            tickLine={false}
+            width="auto"
+          />
+          {showDeposits && (
+            <YAxis
+              yAxisId="right"
+              orientation="right"
+              domain={['auto', 'auto']}
+              tickFormatter={(value) =>
+                formatNumber(value as number, symbol).replace(/(\.\d*?[1-9])0+(?=\D*$)|\.0+(?=\D*$)/, '$1')
+              }
+              tick={{ fill: palette.blue, fontWeight: 500, fontSize: 11 }}
+              axisLine={false}
+              tickLine={false}
+              width="auto"
+            />
+          )}
+          <Tooltip
+            active={loading ? false : undefined}
+            labelFormatter={(value) => formatDate(new Date(value as number), true)}
+            content={
+              <TooltipChart
+                formatter={(value, { dataKey }) =>
+                  dataKey === 'deposits' ? `${formatNumber(value, symbol)} ${symbol}` : toPercentage(value)
+                }
+              />
+            }
+          />
+          <Line
+            yAxisId="left"
+            type="monotone"
+            dataKey="depositApr"
+            name={t('Deposit APR')}
+            stroke={palette.mode === 'light' ? 'black' : 'white'}
+            dot={false}
+            strokeWidth={2}
+            animationDuration={300}
+            animationEasing="ease-out"
+          />
+          <Line
+            yAxisId="left"
+            type="monotone"
+            dataKey="borrowApr"
+            name={t('Borrow APR')}
+            stroke={palette.green}
+            dot={false}
+            strokeWidth={2}
+            animationDuration={300}
+            animationEasing="ease-out"
+          />
+          {showDeposits && (
+            <Line
+              yAxisId="right"
+              type="monotone"
+              dataKey="deposits"
+              name={t('Total Deposits')}
+              stroke={palette.blue}
+              dot={false}
+              strokeDasharray="5 5"
+              animationDuration={300}
+              animationEasing="ease-out"
+            />
+          )}
+        </LineChart>
         {loading ? (
-          <LoadingChart />
+          <LoadingChart overlay />
         ) : points.length < 2 ? (
-          <Box display="flex" width="100%" height="100%" alignItems="center" justifyContent="center">
+          <Box position="absolute" display="flex" alignItems="center" justifyContent="center" sx={{ inset: 0 }}>
             <Typography color="grey.500" variant="subtitle2" fontSize="14px">
               {t('Not enough variable rate activity to chart yet.')}
             </Typography>
           </Box>
-        ) : (
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={points} margin={{ top: 5, bottom: 5 }}>
-              <CartesianGrid horizontal vertical={false} stroke={palette.grey[300]} />
-              <XAxis
-                dataKey="date"
-                type="number"
-                domain={['dataMin', 'dataMax']}
-                minTickGap={50}
-                padding={{ left: 20, right: 30 }}
-                tickFormatter={(value) =>
-                  formatDate(new Date(value as number), range === '6M' || range === '1Y' || range === 'ALL')
-                }
-                stroke="#B4BABF"
-                fontSize="12px"
-                height={20}
-              />
-              <YAxis
-                yAxisId="left"
-                tickFormatter={(tick) => toPercentage(tick)}
-                axisLine={false}
-                tick={{ fill: palette.grey[500], fontWeight: 500, fontSize: 11 }}
-                tickLine={false}
-                width={50}
-              />
-              {showDeposits && (
-                <YAxis
-                  yAxisId="right"
-                  orientation="right"
-                  tickFormatter={(value) => formatNumber(value as number, symbol)}
-                  tick={{ fill: palette.blue, fontWeight: 500, fontSize: 11 }}
-                  axisLine={false}
-                  tickLine={false}
-                  width={50}
-                />
-              )}
-              <Tooltip
-                labelFormatter={(value) => formatDate(new Date(value as number), true)}
-                content={
-                  <TooltipChart
-                    formatter={(value, { dataKey }) =>
-                      dataKey === 'deposits' ? `${formatNumber(value, symbol)} ${symbol}` : toPercentage(value)
-                    }
-                    sortItems={(a, b) => (a.value > b.value ? -1 : 1)}
-                  />
-                }
-              />
-              <Line
-                yAxisId="left"
-                type="monotone"
-                dataKey="depositApr"
-                name={t('Deposit APR')}
-                stroke={palette.mode === 'light' ? 'black' : 'white'}
-                dot={false}
-                strokeWidth={2}
-              />
-              <Line
-                yAxisId="left"
-                type="monotone"
-                dataKey="borrowApr"
-                name={t('Borrow APR')}
-                stroke={palette.green}
-                dot={false}
-                strokeWidth={2}
-              />
-              {showDeposits && (
-                <Line
-                  yAxisId="right"
-                  type="monotone"
-                  dataKey="deposits"
-                  name={t('Total Deposits')}
-                  stroke={palette.blue}
-                  dot={false}
-                  strokeDasharray="5 5"
-                />
-              )}
-            </LineChart>
-          </ResponsiveContainer>
-        )}
+        ) : null}
       </Box>
-      <Box display="flex" alignItems="center" mt={-2.5} pl={1}>
+      <Box display="flex" alignItems="center" justifyContent="space-between" gap={1}>
+        <Box data-testid="historical-rate-chart-legend" display="flex" alignItems="center" gap={1.5}>
+          <Box display="flex" alignItems="center" gap={0.5}>
+            <Box
+              width={16}
+              flexShrink={0}
+              borderTop="2px solid"
+              borderColor={palette.mode === 'light' ? 'black' : 'white'}
+            />
+            <Typography variant="subtitle1" fontSize="10px" lineHeight={1} whiteSpace="nowrap">
+              {t('Deposit APR')}
+            </Typography>
+          </Box>
+          <Box display="flex" alignItems="center" gap={0.5}>
+            <Box width={16} flexShrink={0} borderTop="2px solid" borderColor={palette.green} />
+            <Typography variant="subtitle1" fontSize="10px" lineHeight={1} whiteSpace="nowrap">
+              {t('Borrow APR')}
+            </Typography>
+          </Box>
+          <Box display="flex" alignItems="center" gap={0.5} sx={{ opacity: showDeposits ? 1 : 0.4 }}>
+            <Box width={16} flexShrink={0} borderTop="2px dashed" borderColor={palette.blue} />
+            <Typography variant="subtitle1" fontSize="10px" lineHeight={1} whiteSpace="nowrap">
+              {t('Total Deposits')}
+            </Typography>
+          </Box>
+        </Box>
         <FormControlLabel
           control={
             <Checkbox
               size="small"
+              checked={showDeposits}
               onChange={onShowDepositsChange}
-              sx={{ color: palette.blue, '&.Mui-checked': { color: palette.blue } }}
+              sx={{ px: 0.25, pt: 0.25, pb: 0, color: palette.blue, '&.Mui-checked': { color: palette.blue } }}
             />
           }
           label={
-            <Typography variant="subtitle1" fontSize="12px">
+            <Typography variant="subtitle1" fontSize="12px" lineHeight={1}>
               {t('Show total deposits')}
             </Typography>
           }
+          labelPlacement="start"
+          sx={{ m: 0, gap: 0.5 }}
         />
       </Box>
     </Box>

components/charts/LoadingChart/index.tsx

@@ -2,13 +2,39 @@ import React from 'react';
 import { Box, CircularProgress, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-function LoadingChart() {
+function LoadingChart({ overlay = false }: { overlay?: boolean }) {
   const { t } = useTranslation();
   return (
-    <Box display="flex" width="100%" height="100%">
-      <Box display="flex" flexDirection="column" justifyContent="center" m="auto" gap={1}>
-        <CircularProgress sx={{ color: 'grey.500', mx: 'auto' }} size={24} thickness={4} />
-        <Typography color="grey.500" variant="subtitle2" fontSize="16px">
+    <Box
+      data-testid="loading-chart"
+      display="flex"
+      width="100%"
+      height="100%"
+      sx={
+        overlay
+          ? {
+              position: 'absolute',
+              inset: 0,
+              zIndex: 1,
+            }
+          : undefined
+      }
+    >
+      <Box
+        display="flex"
+        alignItems="center"
+        m="auto"
+        gap={1}
+        px={2}
+        py={1}
+        bgcolor="grey.200"
+        border="1px solid"
+        borderColor="grey.300"
+        borderRadius="999px"
+        boxShadow="0 2px 8px rgb(0 0 0 / 18%)"
+      >
+        <CircularProgress sx={{ color: 'text.primary' }} size={18} thickness={4} />
+        <Typography color="text.primary" variant="subtitle2" fontSize="14px" lineHeight={1}>
           {t('Loading data...')}
         </Typography>
       </Box>