fix: call setInsufficientToken when MANA is insufficient too

webapp/src/components/Modals/BuyWithCryptoModal/BuyWithCryptoModal.tsx

@@ -73,6 +73,7 @@ export const BuyWithCryptoModal = (props: Props) => {
   const [selectedToken, setSelectedToken] = useState<Token>(getMANAToken(asset.chainId))
   const [canBuyAsset, setCanBuyAsset] = useState<boolean | undefined>()
   const [insufficientToken, setInsufficientToken] = useState<Token | undefined>()
+  console.log('insufficientToken: ', insufficientToken);
   const [showChainSelector, setShowChainSelector] = useState(false)
   const [showTokenSelector, setShowTokenSelector] = useState(false)
   const [crossChainProvider, setCrossChainProvider] = useState<CrossChainProvider>()
@@ -194,6 +195,9 @@ export const BuyWithCryptoModal = (props: Props) => {
           } else {
             canBuy = wallet.networks[asset.network].mana >= +ethers.utils.formatEther(price)
           }
+          if (!canBuy) {
+            setInsufficientToken(selectedToken)
+          }
         } else if (selectedTokenBalance && routeFeeCost) {
           const balance = parseFloat(ethers.utils.formatUnits(selectedTokenBalance, selectedToken.decimals))
 

webapp/src/modules/translation/locales/en.json

@@ -866,7 +866,7 @@
       "cross_chain": "Estimated fee includes the network cost and the cross chain purchase fee that you have to pay directly with your wallet.",
       "same_network": "Estimated fee includes the network cost that you have to pay directly with your wallet."
     },
-    "insufficient_funds": "You don’t have enough funds in {token}. Try paying with other token or get MANA<card> or pay with card</card>.",
+    "insufficient_funds": "You don’t have enough funds in {token}. Try paying with other token or get MANA<card>  or pay with card</card>.",
     "token_and_chain_selector": {
       "available_chains": "Available Chains",
       "select_chain": "Select chain",