fix(ui-ux): prevent user from bridging when token is unsupported (#671)

* fix(ui-ux): prevent user from bridging when token is unsupported

* fix(ui-ux): allow bridge amount that equals to quantum balance

* fix(ui-ux): handle displayed error when cannot get balance

* Remove usdc and usdt

apps/web/src/components/BridgeForm.tsx

@@ -137,8 +137,11 @@ export default function BridgeForm({
   useEffect(() => {
     const key = `${selectedNetworkA.name}-${selectedTokensA.tokenB.symbol}`;
     const balance = tokenBalances[key];
+    if (balance === null) {
+      setIsBalanceSufficient(false);
+    }
     if (balance) {
-      const isSufficientBalance = new BigNumber(balance).isGreaterThan(
+      const isSufficientBalance = new BigNumber(balance).isGreaterThanOrEqualTo(
         amount !== "" ? amount : 0
       );
       setIsBalanceSufficient(isSufficientBalance);

apps/web/src/components/erc-transfer/StepLastClaim.tsx

@@ -93,12 +93,12 @@ export default function StepLastClaim({
 
   const { getBalance } = useCheckBalance();
   const isSufficientBalance = (balance): boolean =>
-    new BigNumber(balance).isGreaterThan(data.to.amount);
+    new BigNumber(balance).isGreaterThanOrEqualTo(data.to.amount);
   const [isBalanceSufficient, setIsBalanceSufficient] = useState(false);
 
   async function checkBalance() {
     const balance = await getBalance(data.to.tokenSymbol);
-    const isSufficient = isSufficientBalance(balance);
+    const isSufficient = balance !== null && isSufficientBalance(balance);
     if (!isSufficient) {
       setError(INSUFFICIENT_FUND_ERROR);
     }

apps/web/src/hooks/useCheckBalance.ts

@@ -1,3 +1,4 @@
+import Logging from "@api/logging";
 import { useNetworkContext } from "@contexts/NetworkContext";
 import { useBalanceDfcMutation, useBalanceEvmMutation } from "@store/index";
 import { Network } from "types";
@@ -11,12 +12,17 @@ export default function useCheckBalance() {
    * When sending from EVM -> DFC, check that DFC wallet has enough balance;
    * When sending from DFC -> EVM, check that EVM wallet has enough balance;
    */
-  async function getBalance(tokenSymbol: string): Promise<string> {
-    const balance =
-      selectedNetworkA.name === Network.Ethereum
-        ? await balanceDfc({ tokenSymbol }).unwrap()
-        : await balanceEvm({ tokenSymbol }).unwrap();
-    return balance;
+  async function getBalance(tokenSymbol: string): Promise<string | null> {
+    try {
+      const balance =
+        selectedNetworkA.name === Network.Ethereum
+          ? await balanceDfc({ tokenSymbol }).unwrap()
+          : await balanceEvm({ tokenSymbol }).unwrap();
+      return balance;
+    } catch (err) {
+      Logging.error(err);
+      return null;
+    }
   }
   return { getBalance };
 }