feat: reworked swap functionality to improve reliability

andrewlee348 · andrewlee348 · commit 25c1847fa433 · 2025-04-11T17:18:09.000-04:00
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/SwapProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/SwapProvider.tsx
@@ -1,10 +1,10 @@
 import { SwapQuote } from '@0xsequence/api'
-import { sendTransactions } from '@0xsequence/connect'
+import { getNativeTokenInfoByChainId, sendTransactions } from '@0xsequence/connect'
 import { compareAddress, useToast } from '@0xsequence/design-system'
 import { useAPIClient, useIndexerClient } from '@0xsequence/hooks'
 import { ReactNode, useEffect, useState } from 'react'
-import { Hex, zeroAddress } from 'viem'
-import { useAccount, useChainId, usePublicClient, useWalletClient } from 'wagmi'
+import { formatUnits, Hex, zeroAddress } from 'viem'
+import { useAccount, useChainId, useChains, usePublicClient, useWalletClient } from 'wagmi'
 
 import { SwapContextProvider } from '../../../contexts/Swap'
 import { useNavigation } from '../../../hooks/useNavigation'
@@ -16,13 +16,12 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
   const { setNavigation } = useNavigation()
   const apiClient = useAPIClient()
   const connectedChainId = useChainId()
-
+  const chains = useChains()
   const [fromCoin, _setFromCoin] = useState<TokenBalanceWithPrice>()
-  const [fromAmount, setFromAmount] = useState<number>(0)
   const [toCoin, _setToCoin] = useState<TokenBalanceWithPrice>()
-  const [toAmount, setToAmount] = useState<number>(0)
+  const [amount, _setAmount] = useState<number>(0)
+  const [nonRecentAmount, setNonRecentAmount] = useState<number>(0)
   const [recentInput, setRecentInput] = useState<'from' | 'to'>('from')
-  const [setNonRecentAmount, _setNonRecentAmount] = useState<() => void>(() => 0)
 
   const [isSwapReady, setIsSwapReady] = useState(false)
   const [swapQuoteData, setSwapQuoteData] = useState<SwapQuote>()
@@ -39,10 +38,9 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
 
   const resetSwapStates = () => {
     setFromCoin(undefined)
-    setFromAmount(0)
     setToCoin(undefined)
-    setToAmount(0)
-    setRecentInput('from')
+    setAmount(0, 'from')
+    setNonRecentAmount(0)
     setIsSwapReady(false)
     setSwapQuoteData(undefined)
     setIsSwapQuotePending(false)
@@ -55,23 +53,15 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
     resetSwapStates()
   }, [userAddress, connectedChainId])
 
-  useEffect(() => {
-    if (recentInput === 'from') {
-      _setNonRecentAmount(() => setFromAmount)
-    } else {
-      _setNonRecentAmount(() => setToAmount)
-    }
-  }, [recentInput])
-
   useEffect(() => {
     setIsSwapReady(false)
     setSwapQuoteData(undefined)
     setIsErrorSwapQuote(false)
-  }, [fromCoin, toCoin, fromAmount, toAmount])
+  }, [fromCoin, toCoin, amount])
 
   useEffect(() => {
     const fetchSwapQuote = async () => {
-      if (!fromCoin || !toCoin || (fromAmount === 0 && toAmount === 0)) {
+      if (!fromCoin || !toCoin || amount === 0) {
         return
       }
 
@@ -94,7 +84,7 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
           userAddress: String(userAddress),
           buyCurrencyAddress: toCoin.contractAddress,
           sellCurrencyAddress: fromCoin.contractAddress,
-          buyAmount: String(toAmount),
+          buyAmount: String(amount),
           chainId: connectedChainId,
           includeApprove: true
         })
@@ -103,11 +93,7 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
 
         // TODO: change this to "amount" from return
 
-        if (recentInput === 'from') {
-          setToAmount(Number(transactionValue))
-        } else {
-          setFromAmount(Number(transactionValue))
-        }
+        setNonRecentAmount(Number(transactionValue))
 
         setSwapQuoteData(swapQuote?.swapQuote)
         setIsSwapReady(true)
@@ -120,7 +106,7 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
     }
 
     fetchSwapQuote()
-  }, [fromCoin, toCoin, fromAmount, toAmount])
+  }, [fromCoin, toCoin, amount])
 
   const setFromCoin = (coin: TokenBalanceWithPrice | undefined) => {
     if (coin?.chainId === toCoin?.chainId && coin?.contractAddress === toCoin?.contractAddress) {
@@ -138,20 +124,28 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
     }
   }
 
+  const setAmount = (newAmount: number, type: 'from' | 'to') => {
+    if (type === recentInput) {
+      _setAmount(newAmount)
+    } else {
+      const tempAmount = amount
+      setRecentInput(recentInput === 'from' ? 'to' : 'from')
+      _setAmount(newAmount)
+      setNonRecentAmount(tempAmount)
+    }
+  }
+
   const switchCoinOrder = () => {
     const tempFrom = fromCoin
     const tempTo = toCoin
-    const tempFromAmount = fromAmount
-    const tempToAmount = toAmount
     _setFromCoin(tempTo)
     _setToCoin(tempFrom)
-    setFromAmount(tempToAmount)
-    setToAmount(tempFromAmount)
+    setRecentInput(recentInput === 'from' ? 'to' : 'from')
   }
 
   const onSubmitSwap = async () => {
-    if (isErrorSwapQuote || !userAddress || !publicClient || !walletClient || !connector) {
-      console.error('Please ensure validation before submitting')
+    if (isErrorSwapQuote || !userAddress || !publicClient || !walletClient || !connector || !fromCoin || !toCoin || !amount) {
+      console.error('Please ensure validation before allowing users to submit a swap')
       return
     }
 
@@ -197,6 +191,21 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
         await walletClient.switchChain({ id: connectedChainId })
       }
 
+      const isFromCoinNative = fromCoin.contractType === 'NATIVE'
+      const isToCoinNative = toCoin.contractType === 'NATIVE'
+      const fromCoinNativeInfo = getNativeTokenInfoByChainId(fromCoin.chainId, chains)
+      const toCoinNativeInfo = getNativeTokenInfoByChainId(toCoin.chainId, chains)
+      const toastFromCoinName = isFromCoinNative ? fromCoinNativeInfo.symbol : fromCoin.contractInfo?.symbol
+      const toastToCoinName = isToCoinNative ? toCoinNativeInfo.symbol : toCoin.contractInfo?.symbol
+      const toastFromAmount = formatUnits(
+        BigInt(recentInput === 'from' ? amount : nonRecentAmount),
+        (isFromCoinNative ? fromCoinNativeInfo.decimals : fromCoin.contractInfo?.decimals) || 18
+      )
+      const toastToAmount = formatUnits(
+        BigInt(recentInput === 'from' ? nonRecentAmount : amount),
+        (isToCoinNative ? toCoinNativeInfo.decimals : toCoin.contractInfo?.decimals) || 18
+      )
+
       await sendTransactions({
         connector,
         walletClient,
@@ -209,7 +218,7 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
 
       toast({
         title: 'Transaction sent',
-        description: `Successfully swapped ${fromAmount} ${fromCoin?.contractInfo?.name} for ${toAmount} ${toCoin?.contractInfo?.name}`,
+        description: `Successfully swapped ${toastFromAmount} ${toastFromCoinName} for ${toastToAmount} ${toastToCoinName}`,
         variant: 'success'
       })
 
@@ -228,9 +237,9 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
     <SwapContextProvider
       value={{
         fromCoin,
-        fromAmount,
         toCoin,
-        toAmount,
+        amount,
+        nonRecentAmount,
         recentInput,
         isSwapReady,
         isSwapQuotePending,
@@ -239,11 +248,8 @@ export const SwapProvider = ({ children }: { children: ReactNode }) => {
         isTxnPending,
         isErrorTxn,
         setFromCoin,
-        setFromAmount,
         setToCoin,
-        setToAmount,
-        setRecentInput,
-        setNonRecentAmount,
+        setAmount,
         switchCoinOrder,
         onSubmitSwap,
         resetSwapStates
diff --git a/packages/wallet-widget/src/contexts/Swap.ts b/packages/wallet-widget/src/contexts/Swap.ts
@@ -5,8 +5,8 @@ import { createGenericContext } from './genericContext'
 export interface SwapContext {
   fromCoin: TokenBalanceWithPrice | undefined
   toCoin: TokenBalanceWithPrice | undefined
-  fromAmount: number
-  toAmount: number
+  amount: number
+  nonRecentAmount: number
   recentInput: 'from' | 'to'
   isSwapReady: boolean
   isSwapQuotePending: boolean
@@ -16,10 +16,7 @@ export interface SwapContext {
   isErrorTxn: boolean
   setFromCoin: (coin: TokenBalanceWithPrice | undefined) => void
   setToCoin: (coin: TokenBalanceWithPrice | undefined) => void
-  setFromAmount: (amount: number) => void
-  setToAmount: (amount: number) => void
-  setRecentInput: (input: 'from' | 'to') => void
-  setNonRecentAmount: (amount: number) => void
+  setAmount: (amount: number, type: 'from' | 'to') => void
   switchCoinOrder: () => void
   onSubmitSwap: () => void
   resetSwapStates: () => void
diff --git a/packages/wallet-widget/src/hooks/useSwap.tsx b/packages/wallet-widget/src/hooks/useSwap.tsx
@@ -4,8 +4,8 @@ export const useSwap = () => {
   const {
     fromCoin,
     toCoin,
-    fromAmount,
-    toAmount,
+    amount,
+    nonRecentAmount,
     recentInput,
     isSwapReady,
     isSwapQuotePending,
@@ -15,10 +15,7 @@ export const useSwap = () => {
     isErrorTxn,
     setFromCoin,
     setToCoin,
-    setFromAmount,
-    setToAmount,
-    setRecentInput,
-    setNonRecentAmount,
+    setAmount,
     switchCoinOrder,
     onSubmitSwap,
     resetSwapStates
@@ -27,8 +24,8 @@ export const useSwap = () => {
   return {
     fromCoin,
     toCoin,
-    fromAmount,
-    toAmount,
+    amount,
+    nonRecentAmount,
     recentInput,
     isSwapReady,
     isSwapQuotePending,
@@ -38,10 +35,7 @@ export const useSwap = () => {
     isErrorTxn,
     setFromCoin,
     setToCoin,
-    setFromAmount,
-    setToAmount,
-    setRecentInput,
-    setNonRecentAmount,
+    setAmount,
     switchCoinOrder,
     onSubmitSwap,
     resetSwapStates
diff --git a/packages/wallet-widget/src/utils/formatBalance.ts b/packages/wallet-widget/src/utils/formatBalance.ts
@@ -1,11 +1,14 @@
 import { formatDisplay } from '@0xsequence/connect'
 import { getNativeTokenInfoByChainId } from '@0xsequence/connect'
 import { compareAddress } from '@0xsequence/design-system'
+import { TokenBalance } from '@0xsequence/indexer'
 import { Chain, formatUnits } from 'viem'
 import { zeroAddress } from 'viem'
 
 import { TokenBalanceWithPrice } from './tokens'
 
+//TODO: rename these and maybe do a refactor
+
 export const formatTokenInfo = (
   balance: TokenBalanceWithPrice | undefined,
   fiatSign: string,
@@ -48,6 +51,20 @@ export const formatFiatBalance = (balance: number, price: number, decimals: numb
   return `${fiatSign}${(price * Number(bal)).toFixed(2)}`
 }
 
+export const formatTokenUnits = (token: TokenBalance | undefined, chains: readonly [Chain, ...Chain[]]) => {
+  if (!token) {
+    return ''
+  }
+
+  const isNativeToken = token.contractType === 'NATIVE'
+  const nativeTokenInfo = getNativeTokenInfoByChainId(token.chainId, chains)
+
+  if (isNativeToken) {
+    return formatUnits(BigInt(Number(token.balance)), nativeTokenInfo.decimals)
+  }
+  return formatUnits(BigInt(Number(token.balance)), token.contractInfo?.decimals || 18)
+}
+
 export const decimalsToWei = (balance: number, decimals: number) => {
   const scaledBalance = balance * Math.pow(10, decimals)
 
diff --git a/packages/wallet-widget/src/views/Swap/CoinInput.tsx b/packages/wallet-widget/src/views/Swap/CoinInput.tsx
@@ -7,48 +7,45 @@ import { useSwap } from '../../hooks/useSwap'
 import { formatFiatBalance, decimalsToWei } from '../../utils/formatBalance'
 
 export const CoinInput = ({ type, disabled }: { type: 'from' | 'to'; disabled?: boolean }) => {
-  const { toCoin, fromCoin, toAmount, fromAmount, setToAmount, setFromAmount, setRecentInput } = useSwap()
+  const { toCoin, fromCoin, amount, nonRecentAmount, recentInput, setAmount } = useSwap()
   const coin = type === 'from' ? fromCoin : toCoin
-  const amount = type === 'from' ? fromAmount : toAmount
-  const setAmount = type === 'from' ? setFromAmount : setToAmount
 
   const { fiatCurrency } = useSettings()
 
   const [inputValue, setInputValue] = useState<string>('')
 
   const fiatBalance = formatFiatBalance(
-    amount || 0,
+    type === recentInput ? amount : nonRecentAmount,
     coin?.price.value || 0,
     coin?.contractInfo?.decimals || 18,
     fiatCurrency.sign
   )
 
   useEffect(() => {
-    const formattedAmount = formatUnits(BigInt(amount || 0), coin?.contractInfo?.decimals || 18)
-    if (formattedAmount !== '0') {
-      setInputValue(formattedAmount)
-    } else if (Number(inputValue) > 0) {
-      setInputValue('')
+    if (type === recentInput) {
+      if (amount > 0) {
+        setInputValue(formatUnits(BigInt(amount), coin?.contractInfo?.decimals || 18))
+      } else if (Number(inputValue)) {
+        setInputValue('')
+      }
+    } else if (type !== recentInput) {
+      if (nonRecentAmount > 0) {
+        setInputValue(formatUnits(BigInt(nonRecentAmount), coin?.contractInfo?.decimals || 18))
+      } else if (Number(inputValue)) {
+        setInputValue('')
+      }
     }
-  }, [amount])
+  }, [recentInput, amount, nonRecentAmount])
 
   const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
     const { value } = ev.target
     const changedValue = Number(value)
-
-    if (type === 'from') {
-      setFromAmount(decimalsToWei(changedValue, coin?.contractInfo?.decimals || 18))
-      setRecentInput('from')
-    } else {
-      setToAmount(decimalsToWei(changedValue, coin?.contractInfo?.decimals || 18))
-      setRecentInput('to')
-    }
-
     setInputValue(value)
+    setAmount(decimalsToWei(changedValue, coin?.contractInfo?.decimals || 18), type)
   }
 
   const handleMax = () => {
-    setAmount(Number(formatUnits(BigInt(coin?.balance || 0), coin?.contractInfo?.decimals || 18)))
+    setAmount(Number(formatUnits(BigInt(coin?.balance || 0), coin?.contractInfo?.decimals || 18)), type)
   }
 
   return (
@@ -60,7 +57,7 @@ export const CoinInput = ({ type, disabled }: { type: 'from' | 'to'; disabled?:
         disabled={disabled}
         controls={
           <>
-            {amount && Number(amount) > 0 && fiatBalance !== '' && (
+            {fiatBalance && (
               <Text className="whitespace-nowrap" variant="small" color="muted">
                 ~{fiatBalance}
               </Text>
