From f4e6b8327c9307dfef7b21c7ee80ae0513e32577 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 1 Mar 2024 17:09:13 -0800 Subject: [PATCH 1/3] Update balances on Swap after transacion receipt returned --- .../components/buttons/TransactionButton.tsx | 2 +- .../components/ui/tailwind/LoadingDots.tsx | 5 +- .../synapse-interface/pages/swap/index.tsx | 85 ++++++++++++------- 3 files changed, 59 insertions(+), 33 deletions(-) diff --git a/packages/synapse-interface/components/buttons/TransactionButton.tsx b/packages/synapse-interface/components/buttons/TransactionButton.tsx index 3c5c139b5f..ee3a9d29c0 100644 --- a/packages/synapse-interface/components/buttons/TransactionButton.tsx +++ b/packages/synapse-interface/components/buttons/TransactionButton.tsx @@ -56,7 +56,7 @@ export const TransactionButton = ({ > {isPending ? (
- + {pendingLabel}{' '}
) : ( diff --git a/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx b/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx index 09616027b5..b110e89c2d 100644 --- a/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx +++ b/packages/synapse-interface/components/ui/tailwind/LoadingDots.tsx @@ -6,7 +6,10 @@ export default function LoadingDots({ shift?: boolean }) { return ( -
+
) diff --git a/packages/synapse-interface/pages/swap/index.tsx b/packages/synapse-interface/pages/swap/index.tsx index 448bcf9977..3e598df6af 100644 --- a/packages/synapse-interface/pages/swap/index.tsx +++ b/packages/synapse-interface/pages/swap/index.tsx @@ -15,7 +15,7 @@ import { formatBigIntToString } from '@/utils/bigint/format' import { calculateExchangeRate } from '@/utils/calculateExchangeRate' import { useEffect, useRef, useState } from 'react' import { Token } from '@/utils/types' -import { getWalletClient } from '@wagmi/core' +import { getWalletClient, waitForTransaction } from '@wagmi/core' import { txErrorHandler } from '@/utils/txErrorHandler' import { CHAINS_BY_ID } from '@/constants/chains' import { approveToken } from '@/utils/approveToken' @@ -30,7 +30,10 @@ import ExplorerToastLink from '@/components/ExplorerToastLink' import { Address, zeroAddress } from 'viem' import { stringToBigInt } from '@/utils/bigint/format' import { useAppDispatch } from '@/store/hooks' -import { useFetchPortfolioBalances } from '@/slices/portfolio/hooks' +import { + useFetchPortfolioBalances, + fetchAndStoreSingleNetworkPortfolioBalances, +} from '@/slices/portfolio/hooks' import { SwapTransactionButton } from '@/components/StateManagedSwap/SwapTransactionButton' import SwapExchangeRateInfo from '@/components/StateManagedSwap/SwapExchangeRateInfo' import { useSwapState } from '@/slices/swap/hooks' @@ -43,6 +46,7 @@ import { DEFAULT_FROM_CHAIN, EMPTY_SWAP_QUOTE_ZERO } from '@/constants/swap' import { SwapToTokenListOverlay } from '@/components/StateManagedSwap/SwapToTokenListOverlay' import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper' import useSyncQueryParamsWithSwapState from '@/utils/hooks/useSyncQueryParamsWithSwapState' +import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError' const StateManagedSwap = () => { const { address } = useAccount() @@ -293,46 +297,65 @@ const StateManagedSwap = () => { { id: 'swap-in-progress-popup', duration: Infinity } ) - try { - const successTx = await tx + const transactionReceipt = await waitForTransaction({ + hash: tx as Address, + timeout: 60_000, + }) + console.log('Transaction Receipt: ', transactionReceipt) - segmentAnalyticsEvent(`[Swap] swaps successfully`, { + /** Update Origin Chain token balances after resolved tx or timeout reached */ + /** Assume tx has been actually resolved if above times out */ + dispatch( + fetchAndStoreSingleNetworkPortfolioBalances({ address, - originChainId: swapChainId, - inputAmount: swapFromValue, - expectedReceivedAmount: swapQuote.outputAmountString, - exchangeRate: swapQuote.exchangeRate, + chainId: swapChainId, }) + ) - toast.dismiss(pendingPopup) + segmentAnalyticsEvent(`[Swap] swaps successfully`, { + address, + originChainId: swapChainId, + inputAmount: swapFromValue, + expectedReceivedAmount: swapQuote.outputAmountString, + exchangeRate: swapQuote.exchangeRate, + }) + + toast.dismiss(pendingPopup) - const successToastContent = ( + const successToastContent = ( +
-
- Successfully swapped from {swapFromToken.symbol} to{' '} - {swapToToken.symbol} on {currentChainName} -
- + Successfully swapped from {swapFromToken.symbol} to{' '} + {swapToToken.symbol} on {currentChainName}
- ) + +
+ ) - toast.success(successToastContent, { - id: 'swap-successful-popup', - duration: 10000, - }) + toast.success(successToastContent, { + id: 'swap-successful-popup', + duration: 10000, + }) - dispatch(setSwapQuote(EMPTY_SWAP_QUOTE_ZERO)) - dispatch(updateSwapFromValue()) - return tx - } catch (error) { - toast.dismiss(pendingPopup) - console.log(`Transaction failed with error: ${error}`) - } + dispatch(setSwapQuote(EMPTY_SWAP_QUOTE_ZERO)) + dispatch(updateSwapFromValue()) + return tx } catch (error) { console.log(`Swap Execution failed with error: ${error}`) + + /** Fetch balances if await transaction receipt times out */ + if (isTransactionReceiptError(error)) { + dispatch( + fetchAndStoreSingleNetworkPortfolioBalances({ + address, + chainId: swapChainId, + }) + ) + } + toast.dismiss(pendingPopup) txErrorHandler(error) } From 3c7607e1b740fa2e26899a7f4fd8da87451bf5ce Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 1 Mar 2024 17:14:53 -0800 Subject: [PATCH 2/3] onSuccessSwap --- .../synapse-interface/pages/swap/index.tsx | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/packages/synapse-interface/pages/swap/index.tsx b/packages/synapse-interface/pages/swap/index.tsx index 3e598df6af..3cbdedae52 100644 --- a/packages/synapse-interface/pages/swap/index.tsx +++ b/packages/synapse-interface/pages/swap/index.tsx @@ -241,6 +241,16 @@ const StateManagedSwap = () => { } } + const onSuccessSwap = () => { + dispatch( + fetchAndStoreSingleNetworkPortfolioBalances({ + address, + chainId: swapChainId, + }) + ) + dispatch(setSwapQuote(EMPTY_SWAP_QUOTE_ZERO)) + dispatch(updateSwapFromValue('')) + } const executeSwap = async () => { const currentChainName = CHAINS_BY_ID[swapChainId]?.name @@ -303,14 +313,7 @@ const StateManagedSwap = () => { }) console.log('Transaction Receipt: ', transactionReceipt) - /** Update Origin Chain token balances after resolved tx or timeout reached */ - /** Assume tx has been actually resolved if above times out */ - dispatch( - fetchAndStoreSingleNetworkPortfolioBalances({ - address, - chainId: swapChainId, - }) - ) + onSuccessSwap() segmentAnalyticsEvent(`[Swap] swaps successfully`, { address, @@ -340,20 +343,13 @@ const StateManagedSwap = () => { duration: 10000, }) - dispatch(setSwapQuote(EMPTY_SWAP_QUOTE_ZERO)) - dispatch(updateSwapFromValue()) return tx } catch (error) { console.log(`Swap Execution failed with error: ${error}`) - /** Fetch balances if await transaction receipt times out */ + /** Assume successful swap tx if await transaction receipt times out */ if (isTransactionReceiptError(error)) { - dispatch( - fetchAndStoreSingleNetworkPortfolioBalances({ - address, - chainId: swapChainId, - }) - ) + onSuccessSwap() } toast.dismiss(pendingPopup) From d4a3059606b63313e02851e16ba27b2deff4dc97 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 1 Mar 2024 17:17:16 -0800 Subject: [PATCH 3/3] Clear swap input after successful swap executed --- .../components/StateManagedSwap/SwapInputContainer.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx index 9d6450607e..eb156d4053 100644 --- a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx +++ b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx @@ -13,7 +13,7 @@ import { import { SwapChainSelector } from './SwapChainSelector' import { SwapFromTokenSelector } from './SwapFromTokenSelector' import { usePortfolioState } from '@/slices/portfolio/hooks' -import { updateSwapFromValue } from '@/slices/swap/reducer' +import { initialState, updateSwapFromValue } from '@/slices/swap/reducer' import { useSwapState } from '@/slices/swap/hooks' export const SwapInputContainer = () => { @@ -51,6 +51,10 @@ export const SwapInputContainer = () => { ) { setShowValue(swapFromValue) } + + if (swapFromValue === initialState.swapFromValue) { + setShowValue(initialState.swapFromValue) + } }, [swapFromValue, swapChainId, swapFromToken]) const handleFromValueChange = (