fix(bridge-ui): inform connect when adding erc20

packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte

@@ -138,7 +138,7 @@
     const parsedAmount = ethers.utils.parseUnits(amount, token.decimals);
 
     log(
       `Checking allowance for token ${token.symbol} and amount ${parsedAmount}`,
     );
 
     const isRequired = await $activeBridge.requiresAllowance({
@@ -277,7 +277,7 @@
     const hasEnoughBalance = balanceAvailableForTx.gte(requiredGas);
 
     log(
       `Is required gas ${requiredGas} less than available balance ${balanceAvailableForTx}? ${hasEnoughBalance}`,
     );
 
     return hasEnoughBalance;
@@ -445,44 +445,67 @@
   }
 
   async function useFullAmount() {
-    if (isETH($token)) {
-      try {
-        const feeData = await fetchFeeData();
-        const gasEstimate = await $activeBridge.estimateGas({
-          amount: BigNumber.from(1),
-          signer: $signer,
-          tokenAddress: await getAddressForToken(
-            $token,
-            $srcChain,
-            $destChain,
-            $signer,
-          ),
-          srcChainId: $srcChain.id,
-          destChainId: $destChain.id,
-          tokenVaultAddress: tokenVaults[$srcChain.id],
-          processingFeeInWei: getProcessingFee(),
-          memo: memo,
-          to: showTo && to ? to : await $signer.getAddress(),
-        });
-
-        const requiredGas = gasEstimate.mul(feeData.gasPrice);
-        const userBalance = await $signer.getBalance('latest');
-        const processingFee = getProcessingFee();
-        let balanceAvailableForTx = userBalance.sub(requiredGas);
-
-        if (processingFee) {
-          balanceAvailableForTx = balanceAvailableForTx.sub(processingFee);
-        }
+    try {
+      const feeData = await fetchFeeData();
+      const processingFeeInWei = getProcessingFee();
+
+      const bridgeAddress = chains[$srcChain.id].bridgeAddress; // for ETH
+      const tokenVaultAddress = tokenVaults[$srcChain.id]; // for ERC20
 
-        amount = ethers.utils.formatEther(balanceAvailableForTx);
-      } catch (error) {
-        console.error(error);
+      const toAddress = showTo && to ? to : await $signer.getAddress();
 
-        // In case of error default to using the full amount of ETH available.
-        // The user would still not be able to make the restriction and will have to manually set the amount.
-        amount = tokenBalance.toString();
+      // For ETH this function returns '0x00'
+      const tokenAddress = await getAddressForToken(
+        $token,
+        $srcChain,
+        $destChain,
+        $signer,
+      );
+
+      // Whatever amount just to get an estimation
+      const bnAmount = BigNumber.from(1);
+
+      // TODO: different arguments depending on the type of bridge
+      const gasEstimate = await $activeBridge.estimateGas({
+        memo,
+        tokenAddress,
+        bridgeAddress,
+        tokenVaultAddress,
+        processingFeeInWei,
+        to: toAddress,
+        signer: $signer,
+        amount: bnAmount,
+        srcChainId: $srcChain.id,
+        destChainId: $destChain.id,
+      });
+
+      const requiredGas = gasEstimate.mul(feeData.gasPrice);
+
+      // We might have decimals. BigNumber can't take strings
+      // with decimals. E.g. BigNumber.from('1.0') will throw an error.
+      // We can get a BigNumber by parsing, passing the right amount
+      // of decimals: ethers.utils.parseUnits('1.0', decimals)
+      const userBalance = ethers.utils.parseUnits(
+        tokenBalance,
+        $token.decimals || 18, // defaults to 18 decimals
+      );
+
+      // Let's start with substracting the estimated required gas to bridge
+      let balanceAvailableForTx = userBalance.sub(requiredGas);
+
+      // Following we substract the currently selected processing fee
+      const processingFee = getProcessingFee();
+      if (processingFee) {
+        balanceAvailableForTx = balanceAvailableForTx.sub(processingFee);
       }
-    } else {
+
+      // We convert back to user readable string: `1.0`
+      amount = ethers.utils.formatUnits(balanceAvailableForTx, $token.decimals);
+    } catch (error) {
+      console.error(error);
+
+      // In case of error default to using the full amount of ETH available.
+      // The user would still not be able to make the restriction and will have to manually set the amount.
       amount = tokenBalance.toString();
     }
   }

packages/bridge-ui/src/components/BridgeForm/SelectToken.svelte

@@ -14,7 +14,11 @@
   import { tokens } from '../../token/tokens';
   import { selectTokenAndBridgeType } from '../../utils/selectTokenAndBridgeType';
   import Erc20 from '../icons/ERC20.svelte';
-  import { errorToast, successToast } from '../NotificationToast.svelte';
+  import {
+    errorToast,
+    successToast,
+    warningToast,
+  } from '../NotificationToast.svelte';
   import AddCustomErc20 from './AddCustomERC20.svelte';
 
   let dropdownElement: HTMLDivElement;
@@ -33,6 +37,17 @@
     closeDropdown();
   }
 
+  function showAddERC20() {
+    if (!$signer) {
+      // No need to waste user's time showing them something
+      // they can't use
+      warningToast('Please, connect your wallet.');
+      return;
+    }
+
+    showAddressField = true;
+  }
+
   async function addERC20(event: SubmitEvent) {
     loading = true;
 
@@ -140,7 +155,7 @@
 
     <li>
       <button
-        on:click={() => (showAddressField = true)}
+        on:click={showAddERC20}
         class="flex hover:bg-dark-5 justify-between items-center p-4 rounded-sm">
         <PlusCircle size="25" />
         <span

packages/bridge-ui/src/pages/home/Home.svelte

@@ -61,7 +61,7 @@
       <div class="rounded-lg py-4 flex flex-col items-center justify-center">
         <SelectChain />
       </div>
-      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
+      <div class="md:w-[440px] px-4">
         <BridgeForm />
       </div>
     </TabPanel>
@@ -73,7 +73,7 @@
     </TabPanel>
 
     <TabPanel tab={tab3.name}>
-      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
+      <div class="md:w-[440px] px-4">
         <Faucet />
       </div>
     </TabPanel>