1  import { InterestRate } from '@aave/contract-helpers';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Button, Typography, useTheme } from '@mui/material';
  4  import { ReactNode, useState } from 'react';
  5  import { WalletIcon } from 'src/components/icons/WalletIcon';
  6  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
  7  import { Base64Token, TokenIcon } from 'src/components/primitives/TokenIcon';
  8  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
  9  import { ERC20TokenType } from 'src/libs/web3-data-provider/Web3Provider';
 10  
 11  import { BaseSuccessView } from './BaseSuccess';
 12  
 13  export type SuccessTxViewProps = {
 14    txHash?: string;
 15    action?: ReactNode;
 16    amount?: string;
 17    symbol?: string;
 18    collateral?: boolean;
 19    rate?: InterestRate;
 20    addToken?: ERC20TokenType;
 21    customAction?: ReactNode;
 22    customText?: ReactNode;
 23  };
 24  
 25  export const TxSuccessView = ({
 26    txHash,
 27    action,
 28    amount,
 29    symbol,
 30    collateral,
 31    rate,
 32    addToken,
 33    customAction,
 34    customText,
 35  }: SuccessTxViewProps) => {
 36    const { addERC20Token } = useWeb3Context();
 37    const [base64, setBase64] = useState('');
 38    const theme = useTheme();
 39  
 40    return (
 41      <BaseSuccessView txHash={txHash}>
 42        <Box
 43          sx={{
 44            mt: 2,
 45            display: 'flex',
 46            flexDirection: 'column',
 47            alignItems: 'center',
 48            justifyContent: 'center',
 49            textAlign: 'center',
 50          }}
 51        >
 52          {action && amount && symbol && (
 53            <Typography>
 54              <Trans>
 55                You {action} <FormattedNumber value={Number(amount)} compact variant="secondary14" />{' '}
 56                {symbol}
 57              </Trans>
 58            </Typography>
 59          )}
 60  
 61          {customAction && (
 62            <Typography>
 63              {customText}
 64              {customAction}
 65            </Typography>
 66          )}
 67  
 68          {!action && !amount && symbol && (
 69            <Typography>
 70              Your {symbol} {collateral ? 'now' : 'is not'} used as collateral
 71            </Typography>
 72          )}
 73  
 74          {rate && (
 75            <Typography>
 76              <Trans>
 77                You switched to {rate === InterestRate.Variable ? 'variable' : 'stable'} rate
 78              </Trans>
 79            </Typography>
 80          )}
 81  
 82          {addToken && symbol && (
 83            <Box
 84              sx={(theme) => ({
 85                border: theme.palette.mode === 'dark' ? `1px solid ${theme.palette.divider}` : 'none',
 86                background: theme.palette.mode === 'dark' ? 'none' : '#F7F7F9',
 87                borderRadius: '12px',
 88                display: 'flex',
 89                flexDirection: 'column',
 90                alignItems: 'center',
 91                justifyContent: 'center',
 92                mt: '24px',
 93              })}
 94            >
 95              <TokenIcon
 96                symbol={addToken.symbol}
 97                aToken={addToken && addToken.aToken ? true : false}
 98                sx={{ fontSize: '32px', mt: '12px', mb: '8px' }}
 99              />
100              <Typography variant="description" color="text.primary" sx={{ mx: '24px' }}>
101                <Trans>
102                  Add {addToken && addToken.aToken ? 'aToken ' : 'token '} to wallet to track your
103                  balance.
104                </Trans>
105              </Typography>
106              <Button
107                onClick={() => {
108                  addERC20Token({
109                    address: addToken.address,
110                    decimals: addToken.decimals,
111                    symbol: addToken.aToken ? '' : addToken.symbol,
112                    image: !/_/.test(addToken.symbol) ? base64 : undefined,
113                  });
114                }}
115                variant={theme.palette.mode === 'dark' ? 'outlined' : 'contained'}
116                size="medium"
117                sx={{ mt: '8px', mb: '12px' }}
118              >
119                {addToken.symbol && !/_/.test(addToken.symbol) && (
120                  <Base64Token
121                    symbol={addToken.symbol}
122                    onImageGenerated={setBase64}
123                    aToken={addToken.aToken}
124                  />
125                )}
126                <WalletIcon sx={{ width: '20px', height: '20px' }} />
127                <Typography variant="buttonM" color="white" ml="4px">
128                  <Trans>Add to wallet</Trans>
129                </Typography>
130              </Button>
131            </Box>
132          )}
133        </Box>
134      </BaseSuccessView>
135    );
136  };