feat: graph improvements (#1102)

* chore: refactor graph component hierarchy * feat: initial component for graph time range selector * refactor: moved global style for ToggleButton to a styled component * fix: enforce a selection * fix: styles * fix: bad merge * refactor: move data fetching to graph containers * feat: handle selected time range in parent component * feat: initial hookup of time range selector * feat: removed 'Max' time selection from graphs * feat: add in loading/error states * feat: clean up graph styles * feat: add supply rate * chore: remove log * chore: add circle over supply rate * chore: supply APR logic * chore: show time/legend when loading * chore: test error state * chore: shorter graphs * fix: build * chore: remove unused component * chore: remove time selector from IRM graph * chore: add style changes to graphs * chore: i18n * chore: bump material and add react-transition-group * chore: more style updates * chore: more styling * feat: add interest rate strategy link (#1124) * feat: add link to interest rate strategy * fix: remove unnecessary typography tag * chore: i18n * chore: more styling * chore: cleanup * chore: removed TODO comment * fix: handle formatting dates behind UTC time, and don't include time for 6m and 1y time range * fix: remove console logs * fix: remove supply APY from interest rate model graph (#1160) * chore: log cleanup * chore: show % * fix: remove horizontal divider for util rate * chore: update eslintignore * fix: remove unused file * fix: re-render issue with loading spinner * chore: remove unused package * chore: hide charts for v3 and comment about bug * chore: remove log * feat: temporarily disable charts for polygon v2 Co-authored-by: Mark Grothe <[email protected]> Co-authored-by: Andrew Schmidt <[email protected]>
aave · Sep 27, 2022 · 995cc8d · 995cc8d · github-actions · Sep 27, 2022
1 parent 3b0d59c
commit 995cc8d
Show file tree

Hide file tree

Showing 26 changed files with 1,061 additions and 559 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,22 @@
-scripts/
+# General Ignores
+.gitignore
+.prettierignore
+.eslintcache
+node_modules/
+public/
+
+# Artifacts
+.next/
+out/
+src/locales/
+
+# IDE
+.vscode
+
+# Specific Ignores
+*.svg
+*.ico
+*.json
+*.md
+*.log
+*.lock
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@heroicons/react": "^1.0.6",
     "@lingui/react": "^3.13.2",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.1",
+    "@mui/material": "^5.10.5",
     "@paraswap/sdk": "5.6.0-alpha.3",
     "@visx/axis": "^2.6.0",
     "@visx/curve": "^2.1.0",

diff --git a/pages/index.page.tsx b/pages/index.page.tsx
@@ -1,13 +1,8 @@
 import { Trans } from '@lingui/macro';
-import {
-  Box,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
+import StyledToggleButton from 'src/components/StyledToggleButton';
+import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
 import { usePermissions } from 'src/hooks/usePermissions';
 
 import { ConnectWalletPaper } from '../src/components/ConnectWalletPaper';
@@ -44,24 +39,24 @@ export default function Home() {
               mb: { xs: 3, xsm: 4 },
             }}
           >
-            <ToggleButtonGroup
+            <StyledToggleButtonGroup
               color="primary"
               value={mode}
               exclusive
               onChange={(_, value) => setMode(value)}
               sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
             >
-              <ToggleButton value="supply" disabled={mode === 'supply'}>
+              <StyledToggleButton value="supply" disabled={mode === 'supply'}>
                 <Typography variant="subheader1">
                   <Trans>Supply</Trans>
                 </Typography>
-              </ToggleButton>
-              <ToggleButton value="borrow" disabled={mode === 'borrow'}>
+              </StyledToggleButton>
+              <StyledToggleButton value="borrow" disabled={mode === 'borrow'}>
                 <Typography variant="subheader1">
                   <Trans>Borrow</Trans>
                 </Typography>
-              </ToggleButton>
-            </ToggleButtonGroup>
+              </StyledToggleButton>
+            </StyledToggleButtonGroup>
           </Box>
         )}
 

diff --git a/pages/reserve-overview.page.tsx b/pages/reserve-overview.page.tsx
@@ -1,14 +1,9 @@
 import { Trans } from '@lingui/macro';
-import {
-  Box,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import StyledToggleButton from 'src/components/StyledToggleButton';
+import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
 import {
   ComputedReserveData,
   useAppDataContext,
@@ -53,24 +48,24 @@ export default function ReserveOverview() {
             mb: { xs: 3, xsm: 4 },
           }}
         >
-          <ToggleButtonGroup
+          <StyledToggleButtonGroup
             color="primary"
             value={mode}
             exclusive
             onChange={(_, value) => setMode(value)}
             sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
           >
-            <ToggleButton value="overview" disabled={mode === 'overview'}>
+            <StyledToggleButton value="overview" disabled={mode === 'overview'}>
               <Typography variant="subheader1">
                 <Trans>Overview</Trans>
               </Typography>
-            </ToggleButton>
-            <ToggleButton value="actions" disabled={mode === 'actions'}>
+            </StyledToggleButton>
+            <StyledToggleButton value="actions" disabled={mode === 'actions'}>
               <Typography variant="subheader1">
                 <Trans>Your info</Trans>
               </Typography>
-            </ToggleButton>
-          </ToggleButtonGroup>
+            </StyledToggleButton>
+          </StyledToggleButtonGroup>
         </Box>
 
         <Box sx={{ display: 'flex' }}>

diff --git a/pages/staking.staking.tsx b/pages/staking.staking.tsx
@@ -1,17 +1,11 @@
 import { Trans } from '@lingui/macro';
-import {
-  Box,
-  Grid,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { Box, Grid, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { BigNumber } from 'ethers/lib/ethers';
 import { formatEther } from 'ethers/lib/utils';
 import { useEffect, useState } from 'react';
 import { ContentContainer } from 'src/components/ContentContainer';
+import StyledToggleButton from 'src/components/StyledToggleButton';
+import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
 import { StakeModal } from 'src/components/transactions/Stake/StakeModal';
 import { StakeCooldownModal } from 'src/components/transactions/StakeCooldown/StakeCooldownModal';
 import { StakeRewardClaimModal } from 'src/components/transactions/StakeRewardClaim/StakeRewardClaimModal';
@@ -77,24 +71,24 @@ export default function Staking() {
                 mb: { xs: 3, xsm: 4 },
               }}
             >
-              <ToggleButtonGroup
+              <StyledToggleButtonGroup
                 color="primary"
                 value={mode}
                 exclusive
                 onChange={(_, value) => setMode(value)}
                 sx={{ width: { xs: '100%', xsm: '359px' } }}
               >
-                <ToggleButton value="aave" disabled={mode === 'aave'}>
+                <StyledToggleButton value="aave" disabled={mode === 'aave'}>
                   <Typography variant="subheader1">
                     <Trans>Stake AAVE</Trans>
                   </Typography>
-                </ToggleButton>
-                <ToggleButton value="bpt" disabled={mode === 'bpt'}>
+                </StyledToggleButton>
+                <StyledToggleButton value="bpt" disabled={mode === 'bpt'}>
                   <Typography variant="subheader1">
                     <Trans>Stake ABPT</Trans>
                   </Typography>
-                </ToggleButton>
-              </ToggleButtonGroup>
+                </StyledToggleButton>
+              </StyledToggleButtonGroup>
             </Box>
 
             <Grid container spacing={4}>

diff --git a/src/components/MarketSwitcher.tsx b/src/components/MarketSwitcher.tsx
@@ -6,8 +6,6 @@ import {
   MenuItem,
   SvgIcon,
   TextField,
-  ToggleButton,
-  ToggleButtonGroup,
   Tooltip,
   Typography,
   useMediaQuery,
@@ -26,6 +24,8 @@ import {
   networkConfigs,
   STAGING_ENV,
 } from '../utils/marketsAndNetworksConfig';
+import StyledToggleButton from './StyledToggleButton';
+import StyledToggleButtonGroup from './StyledToggleButtonGroup';
 
 export const getMarketInfoById = (marketId: CustomMarket) => {
   const market: MarketDataType = marketsData[marketId as CustomMarket];
@@ -94,6 +94,7 @@ enum SelectedMarketVersion {
   V2,
   V3,
 }
+
 export const MarketSwitcher = () => {
   const { currentMarket, setCurrentMarket } = useProtocolDataContext();
   const [selectedMarketVersion, setSelectedMarketVersion] = useState<SelectedMarketVersion>(
@@ -201,7 +202,7 @@ export const MarketSwitcher = () => {
 
       {isV3MarketsAvailable && (
         <Box sx={{ mx: '18px', display: 'flex', justifyContent: 'center' }}>
-          <ToggleButtonGroup
+          <StyledToggleButtonGroup
             value={selectedMarketVersion}
             exclusive
             onChange={(_, value) => {
@@ -222,7 +223,7 @@ export const MarketSwitcher = () => {
               padding: '2px',
             }}
           >
-            <ToggleButton
+            <StyledToggleButton
               value={SelectedMarketVersion.V3}
               data-cy={`markets_switch_button_v3`}
               sx={{
@@ -250,8 +251,8 @@ export const MarketSwitcher = () => {
               >
                 <Trans>Version 3</Trans>
               </Typography>
-            </ToggleButton>
-            <ToggleButton
+            </StyledToggleButton>
+            <StyledToggleButton
               value={SelectedMarketVersion.V2}
               data-cy={`markets_switch_button_v2`}
               sx={{
@@ -279,8 +280,8 @@ export const MarketSwitcher = () => {
               >
                 <Trans>Version 2</Trans>
               </Typography>
-            </ToggleButton>
-          </ToggleButtonGroup>
+            </StyledToggleButton>
+          </StyledToggleButtonGroup>
         </Box>
       )}
       {availableMarkets.map((marketId: CustomMarket) => {

diff --git a/src/components/StyledToggleButton.tsx b/src/components/StyledToggleButton.tsx
@@ -0,0 +1,36 @@
+import { styled, ToggleButton, ToggleButtonProps } from '@mui/material';
+import React from 'react';
+
+const CustomToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
+  border: '0px',
+  flex: 1,
+  backgroundColor: '#383D51',
+  borderRadius: '4px',
+
+  '&.Mui-selected, &.Mui-selected:hover': {
+    backgroundColor: '#FFFFFF',
+    borderRadius: '4px !important',
+  },
+
+  '&.Mui-selected, &.Mui-disabled': {
+    zIndex: 100,
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+
+    '.MuiTypography-subheader1': {
+      background: theme.palette.gradients.aaveGradient,
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
+    },
+    '.MuiTypography-secondary14': {
+      background: theme.palette.gradients.aaveGradient,
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
+    },
+  },
+})) as typeof ToggleButton;
+
+export default function StyledToggleButton(props: ToggleButtonProps) {
+  return <CustomToggleButton {...props} />;
+}
diff --git a/src/components/StyledToggleButtonGroup.tsx b/src/components/StyledToggleButtonGroup.tsx
@@ -0,0 +1,11 @@
+import { styled, ToggleButtonGroup, ToggleButtonGroupProps } from '@mui/material';
+
+const CustomToggleGroup = styled(ToggleButtonGroup)<ToggleButtonGroupProps>({
+  backgroundColor: '#383D51',
+  border: '1px solid rgba(235, 235, 237, 0.12)',
+  padding: '4px',
+}) as typeof ToggleButtonGroup;
+
+export default function StyledToggleGroup(props: ToggleButtonGroupProps) {
+  return <CustomToggleGroup {...props} />;
+}
diff --git a/src/components/caps/CapsCircularStatus.tsx b/src/components/caps/CapsCircularStatus.tsx
@@ -55,7 +55,6 @@ export const CapsCircularStatus = ({ value, tooltipContent }: CapsCircularStatus
         />
         <CircularProgress
           variant="determinate"
-          disableShrink
           color={determineColor()}
           sx={{
             [`& .${circularProgressClasses.circle}`]: {

diff --git a/src/components/transactions/Borrow/BorrowModalContent.tsx b/src/components/transactions/Borrow/BorrowModalContent.tsx
@@ -5,12 +5,14 @@ import {
   valueToBigNumber,
 } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
-import { Alert, Box, Checkbox, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { Alert, Box, Checkbox, Typography } from '@mui/material';
 import { useRef, useState } from 'react';
 import { APYTypeTooltip } from 'src/components/infoTooltips/APYTypeTooltip';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Row } from 'src/components/primitives/Row';
 import { Warning } from 'src/components/primitives/Warning';
+import StyledToggleButton from 'src/components/StyledToggleButton';
+import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
 import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useAssetCaps } from 'src/hooks/useAssetCaps';
 import { useModalContext } from 'src/hooks/useModal';
@@ -67,32 +69,32 @@ const BorrowModeSwitch = ({
       align="flex-start"
       captionColor="text.secondary"
     >
-      <ToggleButtonGroup
+      <StyledToggleButtonGroup
         color="primary"
         value={interestRateMode}
         exclusive
         onChange={(_, value) => setInterestRateMode(value)}
         sx={{ width: '100%', mt: 0.5 }}
       >
-        <ToggleButton
+        <StyledToggleButton
           value={InterestRate.Variable}
           disabled={interestRateMode === InterestRate.Variable}
         >
           <Typography variant="subheader1" sx={{ mr: 1 }}>
             <Trans>Variable</Trans>
           </Typography>
           <FormattedNumber value={variableRate} percent variant="secondary14" />
-        </ToggleButton>
-        <ToggleButton
+        </StyledToggleButton>
+        <StyledToggleButton
           value={InterestRate.Stable}
           disabled={interestRateMode === InterestRate.Stable}
         >
           <Typography variant="subheader1" sx={{ mr: 1 }}>
             <Trans>Stable</Trans>
           </Typography>
           <FormattedNumber value={stableRate} percent variant="secondary14" />
-        </ToggleButton>
-      </ToggleButtonGroup>
+        </StyledToggleButton>
+      </StyledToggleButtonGroup>
     </Row>
   );
 };