Feat: Withdraw and Swap

package.json

@@ -32,8 +32,8 @@
  "test:coverage": "jest --coverage"
  },
  "dependencies": {
- "@aave/contract-helpers": "1.18.3",
- "@aave/math-utils": "1.18.3",
+ "@aave/contract-helpers": "1.20.0",
+ "@aave/math-utils": "1.20.0",
  "@bgd-labs/aave-address-book": "^1.33.0",
  "@emotion/cache": "11.10.3",
  "@emotion/react": "11.10.4",

src/components/TransactionEventHandler.tsx

@@ -30,6 +30,9 @@ export const TransactionEventHandler = () => {
  support: tx.support,
  previousState: tx.previousState,
  newState: tx.newState,
+ outAsset: tx.outAsset,
+ outAmount: tx.outAmount,
+ outAssetName: tx.outAssetName,
  });
 
  // update local state

src/components/transactions/FlowCommons/BaseSuccess.tsx

@@ -0,0 +1,91 @@
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import { CheckIcon } from '@heroicons/react/solid';
+import { Trans } from '@lingui/macro';
+import { Box, Button, Link, SvgIcon, Typography } from '@mui/material';
+import { ReactNode } from 'react';
+import { useModalContext } from 'src/hooks/useModal';
+import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
+
+export type BaseSuccessTxViewProps = {
+ txHash?: string;
+ children: ReactNode;
+};
+
+const ExtLinkIcon = () => (
+ <SvgIcon sx={{ ml: '2px', fontSize: '11px' }}>
+ <ExternalLinkIcon />
+ </SvgIcon>
+);
+
+export const BaseSuccessView = ({ txHash, children }: BaseSuccessTxViewProps) => {
+ const { close, mainTxState } = useModalContext();
+ const { currentNetworkConfig } = useProtocolDataContext();
+
+ return (
+ <>
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ <Box
+ sx={{
+ width: '48px',
+ height: '48px',
+ bgcolor: 'success.200',
+ borderRadius: '50%',
+ mt: 14,
+ mx: 'auto',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ >
+ <SvgIcon sx={{ color: 'success.main', fontSize: '32px' }}>
+ <CheckIcon />
+ </SvgIcon>
+ </Box>
+
+ <Typography sx={{ mt: 4 }} variant="h2">
+ <Trans>All done!</Trans>
+ </Typography>
+
+ {children}
+ </Box>
+
+ <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+ <Link
+ variant="helperText"
+ href={currentNetworkConfig.explorerLinkBuilder({
+ tx: txHash ? txHash : mainTxState.txHash,
+ })}
+ sx={{
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'right',
+ mt: 6,
+ mb: 3,
+ }}
+ underline="hover"
+ target="_blank"
+ rel="noreferrer noopener"
+ >
+ <Trans>Review tx details</Trans>
+ <ExtLinkIcon />
+ </Link>
+ <Button
+ onClick={close}
+ variant="contained"
+ size="large"
+ sx={{ minHeight: '44px' }}
+ data-cy="closeButton"
+ >
+ <Trans>Ok, Close</Trans>
+ </Button>
+ </Box>
+ </>
+ );
+};

src/components/transactions/FlowCommons/Success.tsx

@@ -1,17 +1,15 @@
 import { InterestRate } from '@aave/contract-helpers';
-import { ExternalLinkIcon } from '@heroicons/react/outline';
-import { CheckIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
-import { Box, Button, Link, SvgIcon, Typography, useTheme } from '@mui/material';
+import { Box, Button, Typography, useTheme } from '@mui/material';
 import { ReactNode, useState } from 'react';
 import { WalletIcon } from 'src/components/icons/WalletIcon';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Base64Token, TokenIcon } from 'src/components/primitives/TokenIcon';
-import { useModalContext } from 'src/hooks/useModal';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ERC20TokenType } from 'src/libs/web3-data-provider/Web3Provider';
 
+import { BaseSuccessView } from './BaseSuccess';
+
 export type SuccessTxViewProps = {
  txHash?: string;
  action?: ReactNode;
@@ -24,12 +22,6 @@ export type SuccessTxViewProps = {
  customText?: ReactNode;
 };
 
-const ExtLinkIcon = () => (
- <SvgIcon sx={{ ml: '2px', fontSize: '11px' }}>
- <ExternalLinkIcon />
- </SvgIcon>
-);
-
 export const TxSuccessView = ({
  txHash,
  action,
@@ -41,169 +33,104 @@ export const TxSuccessView = ({
  customAction,
  customText,
 }: SuccessTxViewProps) => {
- const { close, mainTxState } = useModalContext();
  const { addERC20Token } = useWeb3Context();
- const { currentNetworkConfig } = useProtocolDataContext();
  const [base64, setBase64] = useState('');
  const theme = useTheme();
 
  return (
- <>
+ <BaseSuccessView txHash={txHash}>
  <Box
  sx={{
+ mt: 2,
  display: 'flex',
  flexDirection: 'column',
- justifyContent: 'center',
  alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center',
  }}
  >
- <Box
- sx={{
- width: '48px',
- height: '48px',
- bgcolor: 'success.200',
- borderRadius: '50%',
- mt: 14,
- mx: 'auto',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- }}
- >
- <SvgIcon sx={{ color: 'success.main', fontSize: '32px' }}>
- <CheckIcon />
- </SvgIcon>
- </Box>
+ {action && amount && symbol && (
+ <Typography>
+ <Trans>
+ You {action} <FormattedNumber value={Number(amount)} compact variant="secondary14" />{' '}
+ {symbol}
+ </Trans>
+ </Typography>
+ )}
 
- <Typography sx={{ mt: 4 }} variant="h2">
- <Trans>All done!</Trans>
- </Typography>
+ {customAction && (
+ <Typography>
+ {customText}
+ {customAction}
+ </Typography>
+ )}
 
- <Box
- sx={{
- mt: 2,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- textAlign: 'center',
- }}
- >
- {action && amount && symbol && (
- <Typography>
- <Trans>
- You {action}{' '}
- <FormattedNumber value={Number(amount)} compact variant="secondary14" /> {symbol}
- </Trans>
- </Typography>
- )}
+ {!action && !amount && symbol && (
+ <Typography>
+ Your {symbol} {collateral ? 'now' : 'is not'} used as collateral
+ </Typography>
+ )}
 
- {customAction && (
- <Typography>
- {customText}
- {customAction}
- </Typography>
- )}
-
- {!action && !amount && symbol && (
- <Typography>
- Your {symbol} {collateral ? 'now' : 'is not'} used as collateral
- </Typography>
- )}
+ {rate && (
+ <Typography>
+ <Trans>
+ You switched to {rate === InterestRate.Variable ? 'variable' : 'stable'} rate
+ </Trans>
+ </Typography>
+ )}
 
- {rate && (
- <Typography>
+ {addToken && symbol && (
+ <Box
+ sx={(theme) => ({
+ border: theme.palette.mode === 'dark' ? `1px solid ${theme.palette.divider}` : 'none',
+ background: theme.palette.mode === 'dark' ? 'none' : '#F7F7F9',
+ borderRadius: '12px',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ mt: '24px',
+ })}
+ >
+ <TokenIcon
+ symbol={addToken.symbol}
+ aToken={addToken && addToken.aToken ? true : false}
+ sx={{ fontSize: '32px', mt: '12px', mb: '8px' }}
+ />
+ <Typography variant="description" color="text.primary" sx={{ mx: '24px' }}>
  <Trans>
- You switched to {rate === InterestRate.Variable ? 'variable' : 'stable'} rate
+ Add {addToken && addToken.aToken ? 'aToken ' : 'token '} to wallet to track your
+ balance.
  </Trans>
  </Typography>
- )}
-
- {addToken && symbol && (
- <Box
- sx={(theme) => ({
- border:
- theme.palette.mode === 'dark' ? `1px solid ${theme.palette.divider}` : 'none',
- background: theme.palette.mode === 'dark' ? 'none' : '#F7F7F9',
- borderRadius: '12px',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- mt: '24px',
- })}
+ <Button
+ onClick={() => {
+ addERC20Token({
+ address: addToken.address,
+ decimals: addToken.decimals,
+ symbol: addToken.aToken ? `a${addToken.symbol}` : addToken.symbol,
+ image: !/_/.test(addToken.symbol) ? base64 : undefined,
+ });
+ }}
+ variant={theme.palette.mode === 'dark' ? 'outlined' : 'contained'}
+ size="medium"
+ sx={{ mt: '8px', mb: '12px' }}
  >
- <TokenIcon
- symbol={addToken.symbol}
- aToken={addToken && addToken.aToken ? true : false}
- sx={{ fontSize: '32px', mt: '12px', mb: '8px' }}
- />
- <Typography variant="description" color="text.primary" sx={{ mx: '24px' }}>
-  <Trans>
-  Add {addToken && addToken.aToken ? 'aToken ' : 'token '} to wallet to track your
-  balance.
- </Trans>
+ {addToken.symbol && !/_/.test(addToken.symbol) && (
+ <Base64Token
+  symbol={addToken.symbol}
+  onImageGenerated={setBase64}
+  aToken={addToken.aToken}
+  />
+ )}
+ <WalletIcon sx={{ width: '20px', height: '20px' }} />
+ <Typography variant="buttonM" color="white" ml="4px">
+ <Trans>Add to wallet</Trans>
  </Typography>
- <Button
- onClick={() => {
- addERC20Token({
- address: addToken.address,
- decimals: addToken.decimals,
- symbol: addToken.aToken ? `a${addToken.symbol}` : addToken.symbol,
- image: !/_/.test(addToken.symbol) ? base64 : undefined,
- });
- }}
- variant={theme.palette.mode === 'dark' ? 'outlined' : 'contained'}
- size="medium"
- sx={{ mt: '8px', mb: '12px' }}
- >
- {addToken.symbol && !/_/.test(addToken.symbol) && (
- <Base64Token
- symbol={addToken.symbol}
- onImageGenerated={setBase64}
- aToken={addToken.aToken}
- />
- )}
- <WalletIcon sx={{ width: '20px', height: '20px' }} />
- <Typography variant="buttonM" color="white" ml="4px">
- <Trans>Add to wallet</Trans>
- </Typography>
- </Button>
- </Box>
- )}
- </Box>
- </Box>
-
- <Box sx={{ display: 'flex', flexDirection: 'column' }}>
- <Link
- variant="helperText"
- href={currentNetworkConfig.explorerLinkBuilder({
- tx: txHash ? txHash : mainTxState.txHash,
- })}
- sx={{
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'right',
- mt: 6,
- mb: 3,
- }}
- underline="hover"
- target="_blank"
- rel="noreferrer noopener"
- >
- <Trans>Review tx details</Trans>
- <ExtLinkIcon />
- </Link>
- <Button
- onClick={close}
- variant="contained"
- size="large"
- sx={{ minHeight: '44px' }}
- data-cy="closeButton"
- >
- <Trans>Ok, Close</Trans>
- </Button>
+ </Button>
+ </Box>
+ )}
  </Box>
- </>
+ </BaseSuccessView>
  );
 };