From 64b46dfc6d3c3d226509464edd2e1db8dcf58c2f Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Tue, 7 Mar 2023 12:00:05 +0800
Subject: [PATCH] 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         |  5 ++++-
 .../components/erc-transfer/StepLastClaim.tsx  |  4 ++--
 apps/web/src/hooks/useCheckBalance.ts          | 18 ++++++++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/BridgeForm.tsx b/apps/web/src/components/BridgeForm.tsx
index cd68a338a..c43b70f21 100644
--- a/apps/web/src/components/BridgeForm.tsx
+++ b/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);
diff --git a/apps/web/src/components/erc-transfer/StepLastClaim.tsx b/apps/web/src/components/erc-transfer/StepLastClaim.tsx
index 5726ffe21..1f683dc57 100644
--- a/apps/web/src/components/erc-transfer/StepLastClaim.tsx
+++ b/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);
     }
diff --git a/apps/web/src/hooks/useCheckBalance.ts b/apps/web/src/hooks/useCheckBalance.ts
index 773c89fa3..4cee52a92 100644
--- a/apps/web/src/hooks/useCheckBalance.ts
+++ b/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 };
 }