feat: reset swap states on swap view dismount

Author: andrewlee348

packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/SwapProvider.tsx

@@ -37,7 +37,7 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
   const { data: walletClient } = useWalletClient({ chainId: connectedChainId })
   const indexerClient = useIndexerClient(connectedChainId)
 
-  useEffect(() => {
+  const resetSwapStates = () => {
     setFromCoin(undefined)
     setFromAmount(0)
     setToCoin(undefined)
@@ -49,6 +49,10 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
     setIsErrorSwapQuote(false)
     setIsTxnPending(false)
     setIsErrorTxn(false)
+  }
+
+  useEffect(() => {
+    resetSwapStates()
   }, [userAddress, connectedChainId])
 
   useEffect(() => {
@@ -241,7 +245,8 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
         setRecentInput,
         setNonRecentAmount,
         switchCoinOrder,
-        onSubmitSwap
+        onSubmitSwap,
+        resetSwapStates
       }}
     >
       {children}

packages/wallet-widget/src/contexts/Swap.ts

@@ -22,6 +22,7 @@ export interface SwapContext {
   setNonRecentAmount: (amount: number) => void
   switchCoinOrder: () => void
   onSubmitSwap: () => void
+  resetSwapStates: () => void
 }
 
 const [useSwapContext, SwapContextProvider] = createGenericContext<SwapContext>()

packages/wallet-widget/src/hooks/useSwap.tsx

@@ -20,7 +20,8 @@ export const useSwap = () => {
     setRecentInput,
     setNonRecentAmount,
     switchCoinOrder,
-    onSubmitSwap
+    onSubmitSwap,
+    resetSwapStates
   } = useSwapContext()
 
   return {
@@ -42,6 +43,7 @@ export const useSwap = () => {
     setRecentInput,
     setNonRecentAmount,
     switchCoinOrder,
-    onSubmitSwap
+    onSubmitSwap,
+    resetSwapStates
   }
 }

packages/wallet-widget/src/views/Swap/Swap.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightIcon, Card, cardVariants, cn, IconButton, Spinner, Text } from '@0xsequence/design-system'
 import { useGetCoinPrices, useGetExchangeRate, useGetTokenBalancesSummary } from '@0xsequence/hooks'
+import { useEffect } from 'react'
 import { useAccount, useChainId } from 'wagmi'
 
 import { NetworkSelect } from '../../components/Select/NetworkSelect'
@@ -20,12 +21,17 @@ export const Swap = () => {
     isErrorSwapQuote,
     isTxnPending,
     switchCoinOrder,
-    onSubmitSwap
+    onSubmitSwap,
+    resetSwapStates
   } = useSwap()
   const { fiatCurrency } = useSettings()
   const { address: userAddress } = useAccount()
   const connectedChainId = useChainId()
 
+  useEffect(() => {
+    return resetSwapStates()
+  }, [])
+
   const { data: tokenBalances } = useGetTokenBalancesSummary({
     chainIds: [connectedChainId],
     filter: {