fix: form validation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",

src/config/tokens.ts

@@ -203,10 +203,20 @@ export async function isSwappable(token_1: string, token_2: string, chainId: num
   )
 }
 
-export function getSwappableTokenOptions(token: string, chainId: ChainId) {
-  return getTokenOptionsByChainId(chainId)
-    .filter((tkn) => isSwappable(tkn, token, chainId))
-    .filter((tkn) => token !== tkn)
+export async function getSwappableTokenOptions(token: string, chainId: ChainId) {
+  const options = getTokenOptionsByChainId(chainId)
+
+  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
 }
 
 export function getTokenOptionsByChainId(chainId: ChainId): TokenId[] {

src/features/swap/SwapForm.tsx

@@ -1,6 +1,6 @@
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { Form, Formik, useFormikContext } from 'formik'
-import { ReactNode, SVGProps, useEffect, useMemo } from 'react'
+import { ReactNode, SVGProps, useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
 import { Spinner } from 'src/components/animation/Spinner'
 import { Button3D } from 'src/components/buttons/3DButton'
@@ -94,16 +94,24 @@ function SwapForm() {
 function SwapFormInputs({ balances }: { balances: AccountBalances }) {
   const { address, isConnected } = useAccount()
   const { chain } = useNetwork()
+  const [swappableTokens, setSwappableTokens] = useState<TokenId[]>([])
 
   const tokensForChain = useMemo(() => {
     return chain ? getTokenOptionsByChainId(chain?.id) : getTokenOptionsByChainId(Celo.chainId)
   }, [chain])
 
   const { values, setFieldValue } = useFormikContext<SwapFormValues>()
 
-  const swappableTokenOptions = useMemo(() => {
-    return getSwappableTokenOptions(values.fromTokenId, chain ? chain?.id : Celo.chainId)
-  }, [chain, values])
+  useEffect(() => {
+    const fetchSwappableTokens = async () => {
+      const tokens = await getSwappableTokenOptions(
+        values.fromTokenId,
+        chain ? chain?.id : Celo.chainId
+      )
+      setSwappableTokens(tokens)
+    }
+    fetchSwappableTokens().catch(logger.error)
+  }, [chain, values.fromTokenId, values.toTokenId])
 
   const { amount, direction, fromTokenId, toTokenId } = values
 
@@ -116,13 +124,17 @@ function SwapFormInputs({ balances }: { balances: AccountBalances }) {
   }, [quote, setFieldValue, values.direction])
 
   useEffect(() => {
-    if (chain && isConnected && !isSwappable(values.fromTokenId, values.toTokenId, chain?.id)) {
-      setFieldValue(
-        'toTokenId',
-        swappableTokenOptions.length < 1 ? TokenId.cUSD : swappableTokenOptions[0]
-      )
+    const setToToken = async () => {
+      if (
+        chain &&
+        isConnected &&
+        !(await isSwappable(values.fromTokenId, values.toTokenId, chain?.id))
+      ) {
+        setFieldValue('toTokenId', swappableTokens.length < 1 ? TokenId.cUSD : swappableTokens[0])
+      }
     }
-  }, [setFieldValue, chain, values, swappableTokenOptions, isConnected])
+    setToToken().catch(logger.error)
+  }, [setFieldValue, chain, values, swappableTokens, isConnected])
 
   const roundedBalance = fromWeiRounded(balances[fromTokenId], Tokens[fromTokenId].decimals)
   const isRoundedBalanceGreaterThanZero = Boolean(Number.parseFloat(roundedBalance) > 0)
@@ -177,7 +189,7 @@ function SwapFormInputs({ balances }: { balances: AccountBalances }) {
           <TokenSelectField
             name="toTokenId"
             label="To Token"
-            tokenOptions={swappableTokenOptions}
+            tokenOptions={swappableTokens}
             onChange={onChangeToken(false)}
           />
         </div>