Merge pull request #2194 from synapsecns/fe/swap-transaction-balance

Fe/swap transaction balance
synapsecns · Mar 2, 2024 · a7aa01c · a7aa01c
2 parents b177047 + d4a3059
commit a7aa01c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 36 deletions.
diff --git 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 = (

diff --git a/packages/synapse-interface/components/buttons/TransactionButton.tsx b/packages/synapse-interface/components/buttons/TransactionButton.tsx
@@ -56,7 +56,7 @@ export const TransactionButton = ({
     >
       {isPending ? (
         <div className="inline-flex items-center justify-center">
-          <ButtonLoadingDots className="mr-6" />
+          <ButtonLoadingDots className="mr-8" />
           <span className="opacity-30">{pendingLabel}</span>{' '}
         </div>
       ) : (

diff --git 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 (
-    <div data-test-id="loading-dots" className={`flex relative ${className}`}>
+    <div
+      data-test-id="loading-dots"
+      className={`flex relative left-[12px] ${className}`}
+    >
       <div className={`dot-flashing ${shift ? 'left-[12px]' : ''}`}></div>
     </div>
   )

diff --git 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()
@@ -237,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
 
@@ -293,46 +307,51 @@ 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)
+
+      onSuccessSwap()
 
-        segmentAnalyticsEvent(`[Swap] swaps successfully`, {
-          address,
-          originChainId: swapChainId,
-          inputAmount: swapFromValue,
-          expectedReceivedAmount: swapQuote.outputAmountString,
-          exchangeRate: swapQuote.exchangeRate,
-        })
+      segmentAnalyticsEvent(`[Swap] swaps successfully`, {
+        address,
+        originChainId: swapChainId,
+        inputAmount: swapFromValue,
+        expectedReceivedAmount: swapQuote.outputAmountString,
+        exchangeRate: swapQuote.exchangeRate,
+      })
 
-        toast.dismiss(pendingPopup)
+      toast.dismiss(pendingPopup)
 
-        const successToastContent = (
+      const successToastContent = (
+        <div>
           <div>
-            <div>
-              Successfully swapped from {swapFromToken.symbol} to{' '}
-              {swapToToken.symbol} on {currentChainName}
-            </div>
-            <ExplorerToastLink
-              transactionHash={tx ?? zeroAddress}
-              chainId={swapChainId}
-            />
+            Successfully swapped from {swapFromToken.symbol} to{' '}
+            {swapToToken.symbol} on {currentChainName}
           </div>
-        )
+          <ExplorerToastLink
+            transactionHash={tx ?? zeroAddress}
+            chainId={swapChainId}
+          />
+        </div>
+      )
 
-        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}`)
-      }
+      return tx
     } catch (error) {
       console.log(`Swap Execution failed with error: ${error}`)
+
+      /** Assume successful swap tx if await transaction receipt times out */
+      if (isTransactionReceiptError(error)) {
+        onSuccessSwap()
+      }
+
       toast.dismiss(pendingPopup)
       txErrorHandler(error)
     }