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 <grothem@gmail.com> Co-authored-by: Andrew Schmidt <andrew@aave.com>

Author: 3 people

.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

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",

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>
  )}
 

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' }}>

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}>

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) => {

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} />;
+}

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} />;
+}

src/components/caps/CapsCircularStatus.tsx

@@ -55,7 +55,6 @@ export const CapsCircularStatus = ({ value, tooltipContent }: CapsCircularStatus
  />
  <CircularProgress
  variant="determinate"
- disableShrink
  color={determineColor()}
  sx={{
  [`& .${circularProgressClasses.circle}`]: {

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>
  );
 };