Merge recent changes (703508b) from RaidGuild repo

Based on https://github.com/raid-guild/xdai-omnibridge/tree/703508b615332f62040289aefcdfa5a233733594

packages/react-app/.sample-env

@@ -73,3 +73,11 @@ REACT_APP_UI_STATUS_UPDATE_INTERVAL=1000
 # if unset default => false
 ######################################################
 REACT_APP_DEBUG_LOGS=false
+
+######################################################
+# if unset default =>
+# UPDATE_INTERVAL => 15000
+# THRESHOLD_BLOCKS => 10
+######################################################
+REACT_APP_GRAPH_HEALTH_UPDATE_INTERVAL=15000
+REACT_APP_GRAPH_HEALTH_THRESHOLD_BLOCKS=10

packages/react-app/package.json

@@ -43,6 +43,7 @@
     "react-dom": "16.12.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "rxjs": "^6.6.3",
     "web3": "^1.3.1",
     "web3modal": "^1.9.2"
   },

packages/react-app/src/components/BridgeHistory.jsx

@@ -2,6 +2,7 @@ import { Checkbox, Flex, Grid, Text } from '@chakra-ui/react';
 import React, { useState } from 'react';
 import { Redirect } from 'react-router-dom';
 
+import { useGraphHealth } from '../hooks/useGraphHealth';
 import { useUserHistory } from '../lib/history';
 import { HistoryItem } from './HistoryItem';
 import { HistoryPagination } from './HistoryPagination';
@@ -14,6 +15,9 @@ export const BridgeHistory = ({ page }) => {
   const [onlyUnReceived, setOnlyUnReceived] = useState(false);
 
   const { transfers, loading } = useUserHistory();
+  useGraphHealth(
+    'Cannot access history data. Wait for a few minutes and reload the application',
+  );
 
   if (loading) {
     return (

packages/react-app/src/components/BridgeLoadingModal.jsx

@@ -13,6 +13,7 @@ import React, { useContext } from 'react';
 import BlueTickImage from '../assets/blue-tick.svg';
 import LoadingImage from '../assets/loading.svg';
 import { BridgeContext } from '../contexts/BridgeContext';
+import { useGraphHealth } from '../hooks/useGraphHealth';
 import { useTransactionStatus } from '../hooks/useTransactionStatus';
 import { getMonitorUrl } from '../lib/helpers';
 import { NeedsConfirmationModal } from './NeedsConfirmationModal';
@@ -28,6 +29,9 @@ export const BridgeLoadingModal = () => {
   const { loading, fromToken, txHash, totalConfirms } = useContext(
     BridgeContext,
   );
+  useGraphHealth(
+    'Cannot collect data to finalize the transfer. Wait for a few minutes, reload the application and look for your unclaimed transactions in the History tab',
+  );
   const {
     loadingText,
     needsConfirmation,

packages/react-app/src/components/ConfirmTransferModal.jsx

@@ -65,15 +65,22 @@ export const ConfirmTransferModal = ({ isOpen, onClose }) => {
   };
   const onClick = () => {
     transfer().catch(error => {
-      if (
-        error &&
-        error.message &&
-        !error.message.includes('User denied transaction signature')
-      ) {
+      if (error && error.message) {
+        showError(error.message);
+      } else {
         showError(
           'Impossible to perform the operation. Reload the application and try again.',
         );
       }
+      // if (
+      //   error &&
+      //   error.message &&
+      //   !error.message.includes('User denied transaction signature')
+      // ) {
+      //   showError(
+      //     'Impossible to perform the operation. Reload the application and try again.',
+      //   );
+      // }
     });
     onClose();
   };

packages/react-app/src/components/ConnectWeb3.jsx

@@ -5,7 +5,6 @@ import { Web3Context } from '../contexts/Web3Context';
 import { WalletFilledIcon } from '../icons/WalletFilledIcon';
 import { HOME_NETWORK } from '../lib/constants';
 import { getBridgeNetwork, getNetworkName } from '../lib/helpers';
-import { TermsOfServiceModal } from './TermsOfServiceModal';
 
 export const ConnectWeb3 = () => {
   const { connectWeb3, loading, account, disconnect } = useContext(Web3Context);
@@ -65,7 +64,6 @@ export const ConnectWeb3 = () => {
           Connect
         </Button>
       )}
-      <TermsOfServiceModal />
     </Flex>
   );
 };

packages/react-app/src/components/FromToken.jsx

@@ -10,6 +10,7 @@ import {
 } from '@chakra-ui/react';
 import { BigNumber, utils } from 'ethers';
 import React, { useContext, useEffect, useState } from 'react';
+import { defer } from 'rxjs';
 
 import DropDown from '../assets/drop-down.svg';
 import { BridgeContext } from '../contexts/BridgeContext';
@@ -20,7 +21,7 @@ import { Logo } from './Logo';
 import { SelectTokenModal } from './SelectTokenModal';
 
 export const FromToken = () => {
-  const { account } = useContext(Web3Context);
+  const { account, providerChainId: chainId } = useContext(Web3Context);
   const {
     updateBalance,
     fromToken: token,
@@ -36,23 +37,28 @@ export const FromToken = () => {
   const [balanceLoading, setBalanceLoading] = useState(false);
 
   useEffect(() => {
-    if (token && account) {
+    let subscription;
+    if (token && account && chainId === token.chainId) {
       setBalanceLoading(true);
-      setBalance(BigNumber.from(0));
-      fetchTokenBalance(token, account)
-        .then(b => {
-          setBalance(b);
-          setBalanceLoading(false);
-        })
-        .catch(contractError => {
-          logError({ contractError });
+      subscription = defer(() =>
+        fetchTokenBalance(token, account).catch(fromBalanceError => {
+          logError({ fromBalanceError });
           setBalance(BigNumber.from(0));
           setBalanceLoading(false);
-        });
+        }),
+      ).subscribe(b => {
+        setBalance(b);
+        setBalanceLoading(false);
+      });
     } else {
       setBalance(BigNumber.from(0));
     }
-  }, [updateBalance, token, account, setBalance, setBalanceLoading]);
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [updateBalance, token, account, setBalance, setBalanceLoading, chainId]);
 
   return (
     <Flex
@@ -91,7 +97,13 @@ export const FromToken = () => {
             mb={2}
             direction={{ base: 'column', sm: 'row' }}
           >
-            <Flex align="center" cursor="pointer" onClick={onOpen}>
+            <Flex
+              align="center"
+              cursor="pointer"
+              onClick={onOpen}
+              zIndex={1}
+              background="white"
+            >
               <Flex
                 justify="center"
                 align="center"

packages/react-app/src/components/Layout.jsx

@@ -9,6 +9,7 @@ import { getBridgeNetwork } from '../lib/helpers';
 import { ConnectWeb3 } from './ConnectWeb3';
 import { Footer } from './Footer';
 import { Header } from './Header';
+import { TermsOfServiceModal } from './TermsOfServiceModal';
 
 export const Layout = ({ children }) => {
   const { account, providerChainId } = useContext(Web3Context);
@@ -58,6 +59,7 @@ export const Layout = ({ children }) => {
         {valid ? children : <ConnectWeb3 />}
       </Flex>
       <Footer />
+      <TermsOfServiceModal />
     </Flex>
   );
 };

packages/react-app/src/components/ToToken.jsx

@@ -1,15 +1,16 @@
 import { Flex, Spinner, Text, useBreakpointValue } from '@chakra-ui/react';
 import { BigNumber, utils } from 'ethers';
 import React, { useContext, useEffect, useState } from 'react';
+import { defer } from 'rxjs';
 
 import { BridgeContext } from '../contexts/BridgeContext';
 import { Web3Context } from '../contexts/Web3Context';
-import { formatValue, logError } from '../lib/helpers';
+import { formatValue, getBridgeNetwork, logError } from '../lib/helpers';
 import { fetchTokenBalance } from '../lib/token';
 import { Logo } from './Logo';
 
 export const ToToken = () => {
-  const { account } = useContext(Web3Context);
+  const { account, providerChainId } = useContext(Web3Context);
   const {
     updateBalance,
     toToken: token,
@@ -18,28 +19,34 @@ export const ToToken = () => {
     toBalance: balance,
     setToBalance: setBalance,
   } = useContext(BridgeContext);
+  const chainId = getBridgeNetwork(providerChainId);
 
   const smallScreen = useBreakpointValue({ base: true, lg: false });
   const [balanceLoading, setBalanceLoading] = useState(false);
 
   useEffect(() => {
-    if (token && account) {
+    let subscription;
+    if (token && account && chainId === token.chainId) {
       setBalanceLoading(true);
-      setBalance(BigNumber.from(0));
-      fetchTokenBalance(token, account)
-        .then(b => {
-          setBalance(b);
-          setBalanceLoading(false);
-        })
-        .catch(contractError => {
-          logError({ contractError });
+      subscription = defer(() =>
+        fetchTokenBalance(token, account).catch(toBalanceError => {
+          logError({ toBalanceError });
           setBalance(BigNumber.from(0));
           setBalanceLoading(false);
-        });
+        }),
+      ).subscribe(b => {
+        setBalance(b);
+        setBalanceLoading(false);
+      });
     } else {
       setBalance(BigNumber.from(0));
     }
-  }, [updateBalance, token, account, setBalance, setBalanceLoading]);
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [updateBalance, token, account, setBalance, setBalanceLoading, chainId]);
 
   return (
     <Flex

packages/react-app/src/contexts/Web3Context.jsx

@@ -4,8 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import Web3 from 'web3';
 import Web3Modal from 'web3modal';
 
-import { INFURA_ID } from '../lib/constants';
-import { getNetworkName, logError } from '../lib/helpers';
+import { getNetworkName, getRPCUrl, logError } from '../lib/helpers';
 
 export const Web3Context = React.createContext({});
 
@@ -30,7 +29,12 @@ const providerOptions = {
   walletconnect: {
     package: WalletConnectProvider,
     options: {
-      infuraId: INFURA_ID,
+      rpc: {
+        1: getRPCUrl(1),
+        42: getRPCUrl(42),
+        100: getRPCUrl(100),
+        77: getRPCUrl(77),
+      },
     },
   },
 };