add warning to bridge widthraw amount selector.

DistributedCollective · Aug 17, 2021 · 4154ebd · 4154ebd
1 parent b31d125
commit 4154ebd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/app/pages/BridgeDepositPage/components/WalletSelector/index.tsx b/src/app/pages/BridgeDepositPage/components/WalletSelector/index.tsx
@@ -116,7 +116,7 @@ export function WalletSelector() {
               { network: network?.name },
             )}
           </div>
-          <div className="tw-flex tw-flex-col tw-gap-6 tw-px-2 tw-items-center">
+          <div className="tw-flex tw-flex-col tw-gap-2 tw-px-2 tw-items-center">
             <SelectBox onClick={() => {}}>
               <img
                 className="tw-mb-5 tw-mt-2"
@@ -133,7 +133,7 @@ export function WalletSelector() {
               href="https://wiki.sovryn.app/en/getting-started/wallet-setup"
               target="_blank"
               rel="noopener noreferrer"
-              className="tw-cursor-pointer tw-font-light tw-text-gold tw-underline"
+              className="tw-cursor-pointer tw-font-light tw-text-gold tw-underline tw-my-2"
             >
               {t(translations.BridgeDepositPage.walletSelector.howToConnect)}{' '}
               <span className="tw-uppercase">{network?.chain}</span> with{' '}
@@ -142,7 +142,7 @@ export function WalletSelector() {
 
             {walletName === 'metamask' && (
               <ActionButton
-                className="tw-font-semibold tw-w-80 tw-rounded-xl"
+                className="tw-font-semibold tw-w-80 tw-rounded-xl tw-my-2"
                 text={t(
                   translations.BridgeDepositPage.returnToPortfolio
                     .switchNetwork,
@@ -153,7 +153,7 @@ export function WalletSelector() {
 
             <div
               onClick={() => walletContext.disconnect()}
-              className="tw-cursor-pointer tw-font-semibold tw-text-white tw-underline tw-text-center tw-mt-10"
+              className="tw-cursor-pointer tw-font-semibold tw-text-white tw-underline tw-text-center tw-mt-8"
             >
               {t(translations.BridgeDepositPage.changeWallet)}
             </div>

diff --git a/src/app/pages/BridgeWithdrawPage/components/AmountSelector/index.tsx b/src/app/pages/BridgeWithdrawPage/components/AmountSelector/index.tsx
@@ -66,38 +66,46 @@ export function AmountSelector() {
     targetAsset!,
   );
 
+  const bnAmount = useMemo(() => {
+    return bignumber(currentAsset.toWei(value || '0'));
+  }, [currentAsset, value]);
+
+  const checkBridgeBalance = useMemo(() => {
+    return bridgeBalance.value !== false
+      ? bignumber(bridgeBalance.value).greaterThanOrEqualTo(bnAmount)
+      : true;
+  }, [bnAmount, bridgeBalance.value]);
+
+  const checkSpentToday = useMemo(() => {
+    return bignumber(limits.returnData.dailyLimit).greaterThanOrEqualTo(
+      bnAmount.add(limits.returnData.spentToday),
+    );
+  }, [bnAmount, limits.returnData.dailyLimit, limits.returnData.spentToday]);
+
   const isValid = useMemo(() => {
-    const bnAmount = bignumber(currentAsset.toWei(value || '0'));
     const bnBalance = bignumber(balance.value || '0');
-    const testBridgeBalance =
-      bridgeBalance.value !== false
-        ? bignumber(bridgeBalance.value).greaterThanOrEqualTo(bnAmount)
-        : true;
+
     return (
       !limitsLoading &&
       !balance.loading &&
-      testBridgeBalance &&
+      checkBridgeBalance &&
       bnBalance.greaterThanOrEqualTo(bnAmount) &&
       bnAmount.greaterThan(0) &&
       bnAmount.greaterThanOrEqualTo(limits.returnData.getMinPerToken) &&
       bnAmount.lessThanOrEqualTo(limits.returnData.getMaxTokensAllowed) &&
       bnAmount.greaterThan(limits.returnData.getFeePerToken) &&
-      bignumber(limits.returnData.dailyLimit).greaterThanOrEqualTo(
-        bnAmount.add(limits.returnData.spentToday),
-      )
+      checkSpentToday
     );
   }, [
-    currentAsset,
-    value,
+    bnAmount,
     balance.value,
     balance.loading,
-    bridgeBalance.value,
     limitsLoading,
+    checkBridgeBalance,
     limits.returnData.getMinPerToken,
     limits.returnData.getMaxTokensAllowed,
     limits.returnData.getFeePerToken,
-    limits.returnData.dailyLimit,
-    limits.returnData.spentToday,
+    checkSpentToday,
   ]);
 
   return (
@@ -115,13 +123,20 @@ export function AmountSelector() {
               maxAmount={balance.value}
               decimalPrecision={currentAsset.minDecimals}
             />
-            <p className="tw-mt-1">
+            <p className="tw-mt-1 tw-mb-1 tw-relative">
               {t(trans.balance)}:{' '}
               {toNumberFormat(
                 currentAsset.fromWei(balance.value),
                 currentAsset.minDecimals,
               )}{' '}
               {currentAsset.symbol}
+              {(!checkBridgeBalance || !checkSpentToday) && (
+                <div className="tw-absolute tw-b-0 tw-l-0 tw-text-Red">
+                  {!checkBridgeBalance
+                    ? t(trans.insufficientAggregator)
+                    : t(trans.insufficientDaily)}
+                </div>
+              )}
             </p>
           </FormGroup>
         </div>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1558,7 +1558,9 @@
       "dailyLimitSpent": "Daily Limit Spent",
       "fee": "Fee",
       "aggregatorBalance": "Aggregator Balance",
-      "withdrawAmount": "Withdraw Amount"
+      "withdrawAmount": "Withdraw Amount",
+      "insufficientAggregator": "Insufficient aggregator balance to withdraw.",
+      "insufficientDaily": "Insufficient daily limit remaining."
     },
     "confirmStep": {
       "pleaseWait": "Please wait",