diff --git a/package.json b/package.json index 0f0ce50..c881dac 100644 --- a/package.json +++ b/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", diff --git a/src/config/tokens.ts b/src/config/tokens.ts index b85f386..4c3678e 100644 --- a/src/config/tokens.ts +++ b/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[] { diff --git a/src/features/swap/SwapForm.tsx b/src/features/swap/SwapForm.tsx index a706018..c7f8500 100644 --- a/src/features/swap/SwapForm.tsx +++ b/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,6 +94,7 @@ function SwapForm() { function SwapFormInputs({ balances }: { balances: AccountBalances }) { const { address, isConnected } = useAccount() const { chain } = useNetwork() + const [swappableTokens, setSwappableTokens] = useState([]) const tokensForChain = useMemo(() => { return chain ? getTokenOptionsByChainId(chain?.id) : getTokenOptionsByChainId(Celo.chainId) @@ -101,9 +102,16 @@ function SwapFormInputs({ balances }: { balances: AccountBalances }) { const { values, setFieldValue } = useFormikContext() - 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 }) {