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 ? (
+
)
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 = (