Refactor: Decompose swap form (#200)

### Description

While trying to debug, I got very annoyed with the unwieldiness of the
SwapForm with lots of components and hooks inlined in the same file.

This PR is about decomposing the SwapForm into smaller parts. It
extracts components and hooks into individual files and aims at making
the DX for this feature better.

### Other changes

- I also upgraded yarn from 3.3.1 to 4.6.0 while I was at it, hence the
`yarn.lock` update, but no dependencies where actually changed or
updated.
- I also spend some time improving the UX of the submit button on the SwapConfirm page and make sure it always displays the right text and the right enabled/disabled status

### Tested

I checked that swaps still work in both directions and with or without
approvals.

### How to review
Everything should work exactly as it does on production right now, no
functionality should have changed.
- [ ] Check out the preview URL
- [ ] Do a few swaps in different directions and with and without
approval TXs
- [ ] Review the code

Author: chapati23

.eslintignore

@@ -1,6 +1,7 @@
 node_modules
 src/vendor
 dist
+out
 webpack.config.js
 jest.config.js
 tailwind.config.js

.yarn/releases/yarn-3.3.1.cjs

@@ -1,7 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
     spec: "https://mskelton.dev/yarn-outdated/v3"
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

.yarn/releases/yarn-4.6.0.cjs

@@ -14,8 +14,12 @@
   },
   "homepage": "https://app.mento.org",
   "license": "Apache-2.0",
+  "engines": {
+    "node": "^18.20.6"
+  },
+  "packageManager": "[email protected]",
   "scripts": {
-    "dev": "next",
+    "dev": "NODE_ENV=development next",
     "build": "next build",
     "typecheck": "tsc",
     "start": "next start",
@@ -80,5 +84,7 @@
     "bignumber.js": "9.1.1",
     "@types/react": "18.0.34"
   },
-  "packageManager": "[email protected]"
+  "volta": {
+    "node": "18.20.7"
+  }
 }

.yarnrc.yml

@@ -203,33 +203,40 @@ export function isNativeStableToken(tokenId: string) {
   return NativeStableTokenIds.includes(tokenId as TokenId)
 }
 
-export async function isSwappable(token_1: string, token_2: string, chainId: number) {
+export async function isSwappable(token1: string, token2: string, chainId: number) {
+  // Exit early if the same token was passed in two times
+  if (token1 === token2) return false
+
   const sdk = await getMentoSdk(chainId)
   const tradablePairs = await sdk.getTradablePairs()
   if (!tradablePairs) return false
-  if (token_1 === token_2) return false
+
+  const token1Address = getTokenAddress(token1 as TokenId, chainId)
+  const token2Address = getTokenAddress(token2 as TokenId, chainId)
 
   return tradablePairs.some(
-    (assets) =>
-      assets.find((asset) => asset.address === getTokenAddress(token_1 as TokenId, chainId)) &&
-      assets.find((asset) => asset.address === getTokenAddress(token_2 as TokenId, chainId))
+    (pair) =>
+      pair.find((asset) => asset.address === token1Address) &&
+      pair.find((asset) => asset.address === token2Address)
   )
 }
 
-export async function getSwappableTokenOptions(token: string, chainId: ChainId) {
-  const options = getTokenOptionsByChainId(chainId)
+export async function getSwappableTokenOptions(inputTokenId: string, chainId: ChainId) {
+  // Get all available tokens for the chain except the input token
+  const tokenOptions = getTokenOptionsByChainId(chainId).filter(
+    (tokenId) => tokenId !== inputTokenId
+  )
+
+  // Check swappability in parallel and maintain order
+  const swappableTokens = await Promise.all(
+    tokenOptions.map(async (tokenId) => {
+      const swappable = await isSwappable(tokenId, inputTokenId, chainId)
+      return swappable ? tokenId : null
+    })
+  )
 
-  const swappableOptions = await Promise.all(
-    options.map(async (tkn) => ({
-      token: tkn,
-      isSwappable: await isSwappable(tkn, token, chainId),
-    }))
-  ).then((results) => {
-    return results
-      .filter((result) => result.isSwappable && result.token !== token)
-      .map((result) => result.token)
-  })
-  return swappableOptions
+  // Filter out non-swappable tokens (null values)
+  return swappableTokens.filter((tokenId): tokenId is TokenId => tokenId !== null)
 }
 
 export function getTokenOptionsByChainId(chainId: ChainId): TokenId[] {

package.json

@@ -1,4 +1,3 @@
-import BigNumber from 'bignumber.js'
 import Lottie from 'lottie-react'
 import { SVGProps, useEffect, useState } from 'react'
 import mentoLoaderBlue from 'src/animations/Mentoloader_blue.json'
@@ -8,13 +7,6 @@ import { Button3D } from 'src/components/buttons/3DButton'
 import { Tooltip } from 'src/components/tooltip/Tooltip'
 import { TokenId, Tokens } from 'src/config/tokens'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
-import { setConfirmView, setFormValues } from 'src/features/swap/swapSlice'
-import { SwapFormValues } from 'src/features/swap/types'
-import { useAllowance } from 'src/features/swap/useAllowance'
-import { useApproveTransaction } from 'src/features/swap/useApproveTransaction'
-import { useSwapQuote } from 'src/features/swap/useSwapQuote'
-import { useSwapTransaction } from 'src/features/swap/useSwapTransaction'
-import { getMaxSellAmount, getMinBuyAmount } from 'src/features/swap/utils'
 import { TokenIcon } from 'src/images/tokens/TokenIcon'
 import { FloatingBox } from 'src/layout/FloatingBox'
 import { Modal } from 'src/layout/Modal'
@@ -23,6 +15,15 @@ import { logger } from 'src/utils/logger'
 import { truncateTextByLength } from 'src/utils/string'
 import { useAccount, useChainId } from 'wagmi'
 
+import { useApproveTransaction } from './hooks/useApproveTransaction'
+import { useSwapAllowance } from './hooks/useSwapAllowance'
+import { useSwapQuote } from './hooks/useSwapQuote'
+import { useSwapState } from './hooks/useSwapState'
+import { useSwapTransaction } from './hooks/useSwapTransaction'
+import { setConfirmView, setFormValues } from './swapSlice'
+import type { SwapFormValues } from './types'
+import { getMaxSellAmount, getMinBuyAmount } from './utils'
+
 interface Props {
   formValues: SwapFormValues
 }
@@ -95,17 +96,13 @@ export function SwapConfirmCard({ formValues }: Props) {
   )
   const [isApproveConfirmed, setApproveConfirmed] = useState(false)
 
-  const { allowance, isLoading: isAllowanceLoading } = useAllowance(
+  const { skipApprove, isAllowanceLoading } = useSwapAllowance({
     chainId,
     fromTokenId,
     toTokenId,
-    address
-  )
-  const needsApproval = !isAllowanceLoading && new BigNumber(allowance).lte(approveAmount)
-  const skipApprove = !isAllowanceLoading && !needsApproval
-
-  logger.info(`Allowance loading: ${isAllowanceLoading}`)
-  logger.info(`Needs approval: ${needsApproval}`)
+    approveAmount,
+    address,
+  })
 
   useEffect(() => {
     if (skipApprove) {
@@ -129,11 +126,10 @@ export function SwapConfirmCard({ formValues }: Props) {
   const onSubmit = async () => {
     if (!rate || !amountWei || !address || !isConnected) return
 
-    setIsModalOpen(true)
-
     if (skipApprove && sendSwapTx) {
       try {
         logger.info('Skipping approve, sending swap tx directly')
+        setIsModalOpen(true)
         const swapResult = await sendSwapTx()
         const swapReceipt = await swapResult.wait(1)
         logger.info(`Tx receipt received for swap: ${swapReceipt?.transactionHash}`)
@@ -150,6 +146,7 @@ export function SwapConfirmCard({ formValues }: Props) {
     if (!skipApprove && sendApproveTx) {
       try {
         logger.info('Sending approve tx')
+        setIsModalOpen(true)
         const approveResult = await sendApproveTx()
         const approveReceipt = await approveResult.wait(1)
         toastToYourSuccess(
@@ -192,7 +189,15 @@ export function SwapConfirmCard({ formValues }: Props) {
     refetch().catch((e) => logger.error('Failed to refetch quote:', e))
   }
 
-  const isSwapReady = !sendApproveTx || isApproveTxSuccess || isApproveTxLoading
+  const { text: buttonText, disabled: isButtonDisabled } = useSwapState({
+    isAllowanceLoading,
+    skipApprove,
+    sendApproveTx,
+    isApproveTxLoading,
+    isApproveTxSuccess,
+    sendSwapTx,
+    fromTokenId,
+  })
 
   return (
     <FloatingBox
@@ -241,8 +246,8 @@ export function SwapConfirmCard({ formValues }: Props) {
       </div>
 
       <div className="flex w-full px-6 pb-6 mt-6">
-        <Button3D isFullWidth onClick={onSubmit} isDisabled={isSwapReady}>
-          Swap
+        <Button3D isFullWidth onClick={onSubmit} isDisabled={isButtonDisabled}>
+          {buttonText}
         </Button3D>
       </div>
       <Modal