diff --git a/src/components/transactions/Switch/BaseSwitchModalContent.tsx b/src/components/transactions/Switch/BaseSwitchModalContent.tsx index 11d62e4f49..34d67396ab 100644 --- a/src/components/transactions/Switch/BaseSwitchModalContent.tsx +++ b/src/components/transactions/Switch/BaseSwitchModalContent.tsx @@ -200,6 +200,7 @@ export const BaseSwitchModalContent = ({ const [userIsSmartContractWallet, setUserIsSmartContractWallet] = useState(false); const [userIsSafeWallet, setUserIsSafeWallet] = useState(false); + useEffect(() => { try { if (user && connectedChainId) { @@ -684,6 +685,17 @@ export const BaseSwitchModalContent = ({ .multipliedBy(1 - safeSlippage) .decimalPlaces(switchRates.destDecimals, BigNumber.ROUND_UP) .toString()} + amountUsd={Number(switchRates.srcUSD)} + outAmountUSD={Number( + switchRates.provider === 'cowprotocol' ? switchRates.destSpotInUsd : switchRates.destUSD + )} + addToken={{ + address: selectedOutputToken.aToken ?? selectedOutputToken.address, + symbol: selectedOutputToken.symbol, + decimals: selectedOutputToken.decimals, + aToken: selectedOutputToken.aToken ? true : false, + }} + modalType={modalType} /> ); } diff --git a/src/components/transactions/Switch/SwitchTxSuccessView.tsx b/src/components/transactions/Switch/SwitchTxSuccessView.tsx index d8f0892ae7..8d88c004fc 100644 --- a/src/components/transactions/Switch/SwitchTxSuccessView.tsx +++ b/src/components/transactions/Switch/SwitchTxSuccessView.tsx @@ -1,13 +1,17 @@ import { normalize } from '@aave/math-utils'; import { Trans } from '@lingui/macro'; -import { Box, CircularProgress, Divider, Typography } from '@mui/material'; +import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material'; import { BigNumber } from 'ethers'; import { useEffect, useMemo, useRef, useState } from 'react'; +import { WalletIcon } from 'src/components/icons/WalletIcon'; import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip'; import { FormattedNumber } from 'src/components/primitives/FormattedNumber'; -import { ExternalTokenIcon } from 'src/components/primitives/TokenIcon'; +import { Base64Token, ExternalTokenIcon, TokenIcon } from 'src/components/primitives/TokenIcon'; import { TextWithTooltip, TextWithTooltipProps } from 'src/components/TextWithTooltip'; import { useCowOrderToast } from 'src/hooks/useCowOrderToast'; +import { ModalType } from 'src/hooks/useModal'; +import { useWeb3Context } from 'src/libs/hooks/useWeb3Context'; +import { ERC20TokenType } from 'src/libs/web3-data-provider/Web3Provider'; import { networkConfigs } from 'src/ui-config/networksConfig'; import { parseUnits } from 'viem'; @@ -38,6 +42,10 @@ export type SwitchTxSuccessViewProps = { chainId: number; destDecimals: number; srcDecimals: number; + amountUsd: number; + outAmountUSD: number; + addToken?: ERC20TokenType; + modalType: ModalType; }; export const SwitchWithSurplusTooltip = ({ @@ -83,8 +91,14 @@ export const SwitchTxSuccessView = ({ chainId, destDecimals, srcDecimals, + amountUsd, + outAmountUSD, + addToken, + modalType, }: SwitchTxSuccessViewProps) => { const { trackOrder, setHasActiveOrders } = useCowOrderToast(); + const { addERC20Token } = useWeb3Context(); + const [base64, setBase64] = useState(''); // Do polling each 10 seconds until the order get's filled const [orderStatus, setOrderStatus] = useState<'succeed' | 'failed' | 'open'>('open'); @@ -196,6 +210,9 @@ export const SwitchTxSuccessView = ({ ) : undefined; }, [provider, txHashOrOrderId]); + const shouldShowATokenCta = modalType === ModalType.CollateralSwap && addToken?.aToken; + const watchedTokenSymbol = shouldShowATokenCta ? '' : addToken?.symbol ?? ''; + return ( @@ -251,22 +267,40 @@ export const SwitchTxSuccessView = ({ enterTouchDelay={100} leaveTouchDelay={500} > - - - {Number(inAmount).toLocaleString(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: Number(inAmount) < 0.01 ? 4 : 2, - })}{' '} - - + <> + + + + + + - - {symbol} - + + {symbol} + {amountUsd && amountUsd > 0 && ( + + + + + + )} - + {provider == 'cowprotocol' && (orderStatus == 'open' || orderStatus == 'failed') ? 'Receive' @@ -285,31 +319,100 @@ export const SwitchTxSuccessView = ({ enterTouchDelay={100} leaveTouchDelay={500} > - - - {Number(outFinalAmount).toLocaleString(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: Number(outFinalAmount) < 0.01 ? 4 : 2, - })} - - + <> + + + + + + - - {outSymbol} - + + {outSymbol} + {outAmountUSD && outAmountUSD > 0 && ( + + + + + + )} {surplusDisplay && ( {surplusDisplay} )} + {shouldShowATokenCta && ( + ({ + border: theme.palette.mode === 'dark' ? `1px solid ${theme.palette.divider}` : 'none', + background: theme.palette.mode === 'dark' ? 'none' : '#F7F7F9', + borderRadius: 2, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + mt: 4, + + width: '80%', + })} + > + + + + Add {addToken.aToken ? 'aToken ' : 'token '} to wallet to track your balance. + + + + + )} ); }; diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po index 78030e4065..18a51daae9 100644 --- a/src/locales/en/messages.po +++ b/src/locales/en/messages.po @@ -621,6 +621,7 @@ msgid "All proposals" msgstr "All proposals" #: src/components/transactions/FlowCommons/Success.tsx +#: src/components/transactions/Switch/SwitchTxSuccessView.tsx msgid "Add to wallet" msgstr "Add to wallet" @@ -2109,6 +2110,7 @@ msgid "Interest rate rebalance conditions were not met" msgstr "Interest rate rebalance conditions were not met" #: src/components/transactions/FlowCommons/Success.tsx +#: src/components/transactions/Switch/SwitchTxSuccessView.tsx msgid "Add {0} to wallet to track your balance." msgstr "Add {0} to wallet to track your balance."