diff --git a/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx b/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx index ef5b960de..6de4e5e77 100644 --- a/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx +++ b/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx @@ -1,3 +1,4 @@ +import type { ReactNode } from 'react'; import { useAssetsDataProvider } from '@vegaprotocol/assets'; import { ETHERSCAN_TX, useEtherscanLink } from '@vegaprotocol/environment'; import { formatNumber, t, toBigNum } from '@vegaprotocol/react-helpers'; @@ -18,60 +19,59 @@ const intentMap: { [s in EthTxStatus]: Intent } = { Requested: Intent.Warning, Pending: Intent.Warning, Error: Intent.Danger, - Complete: Intent.Success, + Complete: Intent.Warning, Confirmed: Intent.Success, }; +const isWithdrawTransaction = (tx: EthStoredTxState) => + tx.methodName === 'withdraw_asset'; + +const isDepositTransaction = (tx: EthStoredTxState) => + tx.methodName === 'withdraw_asset'; + const EthTransactionDetails = ({ tx }: { tx: EthStoredTxState }) => { - const { data } = useAssetsDataProvider(); - if (!data) return null; + const { data: assets } = useAssetsDataProvider(); + if (!assets) return null; - const ETH_WITHDRAW = - tx.methodName === 'withdraw_asset' && tx.args.length > 2 && tx.assetId; - const ETH_DEPOSIT = - tx.methodName === 'deposit_asset' && tx.args.length > 2 && tx.assetId; - - let label = ''; - if (ETH_WITHDRAW) label = t('Withdraw'); - if (ETH_DEPOSIT) label = t('Deposit'); - - if (ETH_WITHDRAW || ETH_DEPOSIT) { - const asset = data.find((a) => a.id === tx.assetId); + const isWithdraw = isWithdrawTransaction(tx); + const isDeposit = isDepositTransaction(tx); + let assetInfo: ReactNode; + if ((isWithdraw || isDeposit) && tx.args.length > 2 && tx.assetId) { + const asset = assets.find((a) => a.id === tx.assetId); if (asset) { - const num = formatNumber( - toBigNum(tx.args[1], asset.decimals), - asset.decimals - ); - const details = ( + let label = ''; + if (isWithdraw) label = t('Withdraw'); + if (isDeposit) label = t('Deposit'); + assetInfo = (
- {label} {num} {asset.symbol} + {label}{' '} + {formatNumber(toBigNum(tx.args[1], asset.decimals), asset.decimals)}{' '} + {asset.symbol}
); - return ( - <> - {details} - {tx.requiresConfirmation && - [EthTxStatus.Pending].includes(tx.status) && ( -
- - {t('Awaiting confirmations')}{' '} - {`(${tx.confirmations}/${tx.requiredConfirmations})`} - - -
- )} - - ); } } - return null; + return ( + <> + {assetInfo} + {tx.status === EthTxStatus.Pending && ( +
+ + {t('Awaiting confirmations')}{' '} + {`(${tx.confirmations}/${tx.requiredConfirmations})`} + + +
+ )} + + ); }; type EthTxToastContentProps = { @@ -93,21 +93,11 @@ const EthTxRequestedToastContent = ({ tx }: EthTxToastContentProps) => { }; const EthTxPendingToastContent = ({ tx }: EthTxToastContentProps) => { - const etherscanLink = useEtherscanLink(); return (

{t('Awaiting confirmation')}

{t('Please wait for your transaction to be confirmed')}

- {tx.txHash && ( -

- - {t('View on Etherscan')} - -

- )} +
); @@ -130,22 +120,43 @@ const EthTxErrorToastContent = ({ tx }: EthTxToastContentProps) => { ); }; -const EthTxConfirmedToastContent = ({ tx }: EthTxToastContentProps) => { +const EtherscanLink = ({ tx }: EthTxToastContentProps) => { const etherscanLink = useEtherscanLink(); + return tx.txHash ? ( +

+ + {t('View on Etherscan')} + +

+ ) : null; +}; + +const EthTxConfirmedToastContent = ({ tx }: EthTxToastContentProps) => { return (
-

{t('Transaction completed')}

-

{t('Your transaction has been completed')}

- {tx.txHash && ( -

- - {t('View on Etherscan')} - -

- )} +

{t('Transaction confirmed')}

+

{t('Your transaction has been confirmed')}

+ + +
+ ); +}; + +const EthTxCompletedToastContent = ({ tx }: EthTxToastContentProps) => { + const isDeposit = isDepositTransaction(tx); + return ( +
+

+ {t('Processing')} {isDeposit && 'deposit'} +

+

+ {t('Your transaction has been completed.')} + {isDeposit && t('Waiting for deposit confirmation')} +

+
); @@ -167,10 +178,10 @@ export const useEthereumTransactionToasts = () => { if (tx.status === EthTxStatus.Pending) { content = ; } - if ( - tx.status === EthTxStatus.Confirmed || - tx.status === EthTxStatus.Complete - ) { + if (tx.status === EthTxStatus.Complete) { + content = ; + } + if (tx.status === EthTxStatus.Confirmed) { content = ; } if (tx.status === EthTxStatus.Error) { @@ -181,7 +192,7 @@ export const useEthereumTransactionToasts = () => { id: `eth-${tx.id}`, intent: intentMap[tx.status], onClose: () => dismissEthTransaction(tx.id), - loader: tx.status === EthTxStatus.Pending, + loader: [EthTxStatus.Pending, EthTxStatus.Complete].includes(tx.status), content, }; }, diff --git a/libs/deposits/src/lib/use-deposits.ts b/libs/deposits/src/lib/use-deposits.ts index 3ae7fbb4d..35bbeb883 100644 --- a/libs/deposits/src/lib/use-deposits.ts +++ b/libs/deposits/src/lib/use-deposits.ts @@ -70,6 +70,7 @@ const updateQuery: UpdateQueryFn< subscriptionData.data.busEvents ); + console.log({ subscriptionData, time: new Date() }); const deposits = uniqBy([...incoming, ...curr], 'id'); if (!prev.party) { diff --git a/libs/ui-toolkit/src/components/toast/toast.tsx b/libs/ui-toolkit/src/components/toast/toast.tsx index 57e2455b1..cbf9b4727 100644 --- a/libs/ui-toolkit/src/components/toast/toast.tsx +++ b/libs/ui-toolkit/src/components/toast/toast.tsx @@ -115,6 +115,7 @@ export const Toast = ({ >