Fix/cross chain issue

src/app/pages/BridgeDepositPage/components/AmountSelector/index.tsx

@@ -66,6 +66,7 @@ export function AmountSelector() {
       bnBalance.greaterThanOrEqualTo(bnAmount) &&
       bnAmount.greaterThan(0) &&
       bnAmount.greaterThanOrEqualTo(limits.returnData.getMinPerToken) &&
+      bnAmount.greaterThan(limits.returnData.getFeePerToken) &&
       bnAmount.lessThanOrEqualTo(limits.returnData.getMaxTokensAllowed) &&
       bignumber(limits.returnData.dailyLimit).greaterThanOrEqualTo(
         bnAmount.add(limits.returnData.spentToday),
@@ -77,6 +78,7 @@ export function AmountSelector() {
     balance.value,
     bridgeBalance.value,
     limits.returnData.dailyLimit,
+    limits.returnData.getFeePerToken,
     limits.returnData.getMaxTokensAllowed,
     limits.returnData.getMinPerToken,
     limits.returnData.spentToday,

src/app/pages/BridgeDepositPage/components/WalletSelector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { WalletConnectionView, WalletContext } from '@sovryn/react-wallet';
 import { isWeb3Wallet, ProviderType } from '@sovryn/wallet';
@@ -18,6 +18,12 @@ import { actions } from '../../slice';
 import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { DepositStep } from '../../types';
+import { ActionButton } from 'app/components/Form/ActionButton';
+import {
+  switchNetwork,
+  addNetwork,
+  metamaskDefaultChains,
+} from 'utils/metamaskHelpers';
 
 export function WalletSelector() {
   const { t } = useTranslation();
@@ -64,6 +70,30 @@ export function WalletSelector() {
     chain,
   ]);
 
+  const changeNetwork = useCallback(() => {
+    if (!network) return;
+
+    const { chain, rpc, explorer } = network;
+    const chainId = `0x${network?.chainId.toString(16)}`;
+
+    if (metamaskDefaultChains.includes(network?.chainId!)) {
+      switchNetwork([
+        {
+          chainId,
+        },
+      ]);
+    } else {
+      addNetwork([
+        {
+          chainId,
+          chainName: chain,
+          rpcUrls: [rpc],
+          blockExplorerUrls: [explorer],
+        },
+      ]);
+    }
+  }, [network]);
+
   return (
     <WalletWrapper className="tw-relative tw-p-8">
       {state === 'wrong-network' && (
@@ -110,6 +140,17 @@ export function WalletSelector() {
               <span className="tw-capitalize">{walletName}</span>
             </a>
 
+            {walletName === 'metamask' && (
+              <ActionButton
+                className="tw-font-semibold tw-w-80 tw-rounded-xl"
+                text={t(
+                  translations.BridgeDepositPage.returnToPortfolio
+                    .switchNetwork,
+                )}
+                onClick={changeNetwork}
+              />
+            )}
+
             <div
               onClick={() => walletContext.disconnect()}
               className="tw-cursor-pointer tw-font-semibold tw-text-white tw-underline tw-text-center tw-mt-10"

src/app/pages/BridgeWithdrawPage/components/AmountSelector/index.tsx

@@ -81,30 +81,32 @@ export function AmountSelector() {
       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),
       )
     );
   }, [
     currentAsset,
-    balance.loading,
+    value,
     balance.value,
+    balance.loading,
     bridgeBalance.value,
-    limits.returnData.dailyLimit,
-    limits.returnData.getMaxTokensAllowed,
+    limitsLoading,
     limits.returnData.getMinPerToken,
+    limits.returnData.getMaxTokensAllowed,
+    limits.returnData.getFeePerToken,
+    limits.returnData.dailyLimit,
     limits.returnData.spentToday,
-    limitsLoading,
-    value,
   ]);
 
   return (
-    <div className="tw-flex tw-flex-col tw-items-center tw-w-80">
-      <div className="tw-flex tw-flex-col tw-items-center tw-w-80">
+    <div className="tw-flex tw-flex-col tw-items-center tw-w-96">
+      <div className="tw-flex tw-flex-col tw-items-center tw-w-96">
         <div className="tw-mb-20 tw-text-2xl tw-text-center tw-font-semibold">
           {t(trans.title)}
         </div>
-        <div className="tw-w-80">
+        <div className="tw-w-96">
           <FormGroup label={t(trans.withdrawAmount)}>
             <AmountInput
               value={value}
@@ -207,7 +209,7 @@ export function AmountSelector() {
         </Table>
 
         <ActionButton
-          className="tw-mt-10 tw-w-80 tw-font-semibold tw-rounded-xl"
+          className="tw-mt-10 tw-w-96 tw-font-semibold tw-rounded-xl"
           text={t(translations.common.next)}
           disabled={!isValid}
           onClick={selectAmount}

src/utils/metamaskHelpers.ts

@@ -1,6 +1,8 @@
-const addNetwork = (params: any) => {
-  const { ethereum } = window as any;
+export const metamaskDefaultChains = [1, 3, 4, 5, 42];
 
+const { ethereum } = window as any;
+
+export const addNetwork = (params: any) => {
   ethereum
     .request({ method: 'wallet_addEthereumChain', params })
     .catch((error: Error) => console.log(`Error: ${error.message}`));
@@ -35,3 +37,9 @@ export const addRskTestnet = () =>
       blockExplorerUrls: ['https://explorer.testnet.rsk.co'],
     },
   ]);
+
+export const switchNetwork = (params: any) => {
+  ethereum
+    .request({ method: 'wallet_switchEthereumChain', params })
+    .catch((error: Error) => console.log(`Error: ${error.message}`));
+};