State persist for handling pending transactions

.env

@@ -1,2 +1,2 @@
 REACT_APP_NODE_CONFIG_ENV=staging
-REACT_APP_INFURA_KEY=''
+REACT_APP_INFURA_KEY=e9d88f4871b04add8ab3dbfd71b70877

.gitignore

@@ -3,7 +3,8 @@ node_modules
 src/react-app-env.d.ts
 public/js/bundle.js
 build
+.env
 .env*
 !.env-template
 yarn-error.log
-.vscode
+.vscode

package.json

@@ -54,6 +54,7 @@
     "react-toastify": "^7.0.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.3.1",
     "typescript": "^4.3.5",
@@ -72,6 +73,8 @@
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],

src/components/Bridge/TransferPanel/FeeInfo.tsx

@@ -4,12 +4,13 @@ import styled from 'styled-components';
 import { useAppSelector } from '../../../utils/hooks';
 import { getChainsFromDirection, getChainName } from '../../../utils/common';
 import { Chain, Channel, SwapDirection } from '../../../types/types';
-import { Asset } from '../../../types/Asset';
+import { Asset, decimals } from '../../../types/Asset';
 import { ACTIVE_CHANNEL, PERMITTED_ETH_NETWORK } from '../../../config';
-
+import { utils } from 'ethers';
 import ToolTip from '../../ToolTip/ToolTip';
 import { updateFees } from '../../../redux/actions/bridge';
 import { useDispatch } from 'react-redux';
+import BigNumber from 'bignumber.js';
 
 const toDotCurrency = { symbol: 'DOT', text: 'ERC20 DOT' };
 const toETHCurrency = { symbol: 'ETH', text: 'Parachain ETH' };
@@ -26,7 +27,7 @@ type Props = {
 
 const FeeInfo = ({ className, setError }: Props) => {
   const {
-    assets, swapDirection, fees
+    assets, swapDirection, fees, depositAmount, selectedAsset
   } = useAppSelector((state) => state.bridge);
 
   const dispatch = useDispatch();
@@ -47,18 +48,33 @@ const FeeInfo = ({ className, setError }: Props) => {
       currency = toETHCurrency;
       break;
   }
-
   const asset = assets.find((asset) => asset.symbol === currency.symbol);
   const balance = asset ? asset.balance[chains.from] : 0;
+
   let balanceError = false;
+  let isFeeSufficient = true;
+  if(selectedAsset?.symbol === asset?.symbol) {
+
+    const decimalMap = decimals(selectedAsset, swapDirection);
+    const depositedAmount = new BigNumber(
+      // make sure we are comparing the same units
+      utils.parseUnits(
+        depositAmount || '0', decimalMap.from,
+      ).toString(),
+    );
+    const transactionFees = utils.parseUnits(
+      fee || '0', decimalMap.from,
+    ).toString();
+    const differenceValue = new BigNumber(balance).minus(depositedAmount);
+    isFeeSufficient = (differenceValue).isGreaterThanOrEqualTo(new BigNumber(transactionFees));
+  }
   if (fee !== null && Number(balance) < Number(fee)) {
     balanceError = true;
   }
   const setCBError = useCallback(setError,[]);
   useEffect(() => {
     const checkFeeBalance = (assets: Asset[], swapDirection: SwapDirection) => {
       const chains = getChainsFromDirection(swapDirection);
-
       let fee: string | null;
       let currency: any;
       switch (chains.to) {
@@ -71,10 +87,8 @@ const FeeInfo = ({ className, setError }: Props) => {
           currency = toETHCurrency;
           break;
       }
-
       const asset = assets.find((asset) => asset.symbol === currency.symbol);
-      const balance = asset ? asset.balance[chains.from] : 0;
-      if (fee !== null && Number(balance) < Number(fee)) {
+      if (fee !== null && (!isFeeSufficient || Number(balance) < Number(fee))) {
         setCBError(TRANSFER_FEE_ERROR);
       }
       else {
@@ -83,7 +97,7 @@ const FeeInfo = ({ className, setError }: Props) => {
     };
 
     checkFeeBalance(assets, swapDirection);
-  }, [setCBError, assets, swapDirection, fees.erc20dot, fees.parachainEth]);
+  }, [setCBError, assets, swapDirection,isFeeSufficient, fees.erc20dot, fees.parachainEth]);
 
   useEffect(() => {
     dispatch(updateFees());

src/components/Bridge/TransferPanel/ParachainDisplay.tsx

@@ -21,12 +21,11 @@ const ParachainDisplay = ({  className }: ChainDisplayProps) => {
 
   const { parachainId } = useAppSelector((state) => state.bridge);
 
-  const selectParachain = (event:any) => {
-    PARACHAIN_LIST.filter((parachain) => {
-      if(parachain.parachainId == event.target.value) {
-        dispatch(setTransactionFee(parachain.transactionFee));
-      }
-    })
+  const selectParachain = (event: any) => {
+    PARACHAIN_LIST.filter(
+      (parachain) => parachain.parachainId == event.target.value
+        && dispatch(setTransactionFee(parachain.transactionFee)),
+    );
     dispatch(setParaChainId(event.target.value));
   }
 

src/components/Bridge/TransferPanel/SelectedFungibleToken.tsx

@@ -5,7 +5,8 @@ import styled from 'styled-components';
 import BigNumber from 'bignumber.js';
 import { utils } from 'ethers';
 import {
-  setDepositAmount
+  setDepositAmount,
+  initializeTokens
 } from '../../../redux/actions/bridge';
 
 import {
@@ -40,6 +41,11 @@ const SelectedFungibleToken = ({ className, openAssetSelector, setError }: Props
   const dispatch = useDispatch();
   const decimalMap = decimals(selectedAsset, swapDirection);
 
+  const handleAssetSelector = () => {
+    openAssetSelector();
+    dispatch(initializeTokens());
+  }
+
   useEffect(() => {
   }, [dispatch]);
   const setStableError = useCallback(setError,[]);
@@ -94,7 +100,7 @@ const SelectedFungibleToken = ({ className, openAssetSelector, setError }: Props
             type="number"
             onPillClick={handleMaxClicked}
           />
-          <ExpandButton onClick={() => openAssetSelector()}>
+          <ExpandButton onClick={handleAssetSelector}>
             {selectedAsset?.symbol}
           </ExpandButton>
         </div>

src/components/TransactionsListModal/TransactionListModal.style.ts

@@ -7,15 +7,19 @@ export const Wrapper = styled.section`
 
 export const Heading = styled.h2`
   text-align: center;
+  top: 0;
+  position: fixed;
 `;
 
 export const List = styled.ul`
-  margin: 0;
-  padding: 0;
+  padding: 53px 15px;
   width: 100%;
   gap: 25px;
   display: flex;
   flex-direction: column;
+  max-height: 300px
+  overflow-y: scroll;
+  overflow-x: hidden;
 `;
 
 export const Button = styled.button`

src/components/TransactionsListModal/TransactionListModal.tsx

@@ -68,4 +68,5 @@ export default styled(TransactionListModal)`
   min-width: 480px;
   align-items: center;
   width: 100%;
+  max-height: 350px;
 `;

src/config-local.tsx

@@ -26,6 +26,12 @@ export default {
   // Allow health check to skip blocks for performance
   HEALTH_CHECK_POLKADOT_POLL_SKIP_BLOCKS: 500,
 
+  // Time in milliseconds for setInterval 
+  SET_INTERVAL_TIME : 5000,
+
+  // Provider for listening ethereum events
+  ETHEREUM_WEB_SOCKET_PROVIDER: 'ws://localhost:8546',
+
   // Polkadotjs API Provider
   POLKADOT_API_PROVIDER: 'ws://localhost:11144',
   POLKADOT_RELAY_API_PROVIDER: 'ws://localhost:9944',
@@ -39,7 +45,7 @@ export default {
   SNOWBRIDGE_EXPLORER_URL: 'https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A11144#/explorer',
 
   PERMITTED_ETH_NETWORK: 'private',
-  PERMITTED_ETH_NETWORK_ID: '0x???',
+  PERMITTED_ETH_NETWORK_ID: '0xf',
 
   BASIC_CHANNEL_ID: 0,
   INCENTIVIZED_CHANNEL_ID: 1,

src/config-staging.tsx

@@ -26,6 +26,12 @@ export default {
   // Allow health check to skip blocks for performance
   HEALTH_CHECK_POLKADOT_POLL_SKIP_BLOCKS: 1000,
 
+  // Time in milliseconds for setInterval 
+  SET_INTERVAL_TIME: 5000,
+
+  // Provider for listening ethereum events
+  ETHEREUM_WEB_SOCKET_PROVIDER: `wss://ropsten.infura.io/ws/v3/${process.env.REACT_APP_INFURA_KEY}`,
+
   // Polkadotjs API Provider
   POLKADOT_API_PROVIDER: 'wss://parachain-rpc.snowbridge.network',
   POLKADOT_RELAY_API_PROVIDER: 'wss://polkadot-rpc.snowbridge.network',

src/config.tsx

@@ -22,6 +22,8 @@ export const {
   HEALTH_CHECK_POLKADOT_POLL_MAX_BLOCKS,
   HEALTH_CHECK_ETHEREUM_POLL_MAX_BLOCKS,
   HEALTH_CHECK_POLKADOT_POLL_SKIP_BLOCKS,
+  SET_INTERVAL_TIME,
+  ETHEREUM_WEB_SOCKET_PROVIDER,
   POLKADOT_API_PROVIDER,
   POLKADOT_RELAY_API_PROVIDER,
   REQUIRED_ETH_CONFIRMATIONS,

src/contractAddresses.json

@@ -1,24 +1,13 @@
 {
-    "ScaleCodec": "0x86D9aC0Bab011917f57B9E9607833b4340F9D4F8",
-    "MerkleProof": "0xD184c103F7acc340847eEE82a0B909E3358bc28d",
-    "Bitfield": "0x992B9df075935E522EC7950F37eC8557e86f6fdb",
-    "ParachainLightClient": "0x2ffA5ecdBe006d30397c7636d3e015EEE251369F",
-    "ValidatorRegistry": "0xFc97A6197dc90bef6bbEFD672742Ed75E9768553",
-    "SimplifiedMMRVerification": "0xEDa338E4dC46038493b885327842fD3E301CaB39",
-    "BeefyLightClient": "0x87d1f7fdfEe7f651FaBc8bFCB6E086C278b77A7d",
-    "BasicInboundChannel": "0x774667629726ec1FaBEbCEc0D9139bD1C8f72a23",
-    "IncentivizedInboundChannel": "0x83428c7db9815f482a39a1715684dCF755021997",
-    "BasicOutboundChannel": "0xF8F7758FbcEfd546eAEff7dE24AFf666B6228e73",
-    "IncentivizedOutboundChannel": "0xEE9170ABFbf9421Ad6DD07F6BDec9D89F2B581E0",
-    "ETHApp": "0xB1185EDE04202fE62D38F5db72F71e38Ff3E8305",
-    "DOTApp": "0x8cF6147918A5CBb672703F879f385036f8793a24",
-    "ERC20App": "0x3f0839385DB9cBEa8E73AdA6fa0CFe07E321F61d",
-    "TestToken": "0x440eDFFA1352B13227e8eE646f3Ea37456deC701",
-    "ERC721App": "0x54D6643762E46036b3448659791adAf554225541",
-    "TestToken721": "0x4283d8996E5a7F4BEa58c6052b1471a2a9524C87",
-    "TestToken721Enumerable": "0x3f839E70117C64744930De8567Ae7A5363487cA3",
-    "MaliciousDOTApp": "0xdAF13FA1997b9649b2bCC553732c67887A68022C",
-    "SnowDOTAddress": "0x0c8df76790248eD9045415882cdC1eF924E23216",
-    "name": "localhost",
-    "chainId": "15"
-}
+    "BasicOutboundChannel": "0xaC79a7da8e15C0591AcE1D4AB9CDFC3607538F82",
+    "BasicInboundChannel": "0x0727be345ca6EEE30dAd360d0c5b70E999ac902D",
+    "IncentivizedInboundChannel": "0x7F7Fa25e3eb272F9439E4da0f837061E845dd389",
+    "IncentivizedOutboundChannel": "0x8261F5C60aa9A5e3A2d2F4e0e5bEADa9906E5cf2",
+    "ETHApp": "0x27d369eD6f515E924D363E67F8C175a84B16Da73",
+    "ERC20App": "0xE756038a457f990E8cDd781B6e4f40765bFe613a",
+    "DOTApp": "0xe99FA30e32500Ae0C723403916b765540EC9cd2b",
+    "ERC721App": "0xdA3C5796feF00Bb677ef72aE0dCe2511aD350f77",
+    "SnowDOTAddress": "0x2a7e15303f745e41f3d1cc5e3fb353bb29d2119b",
+    "name": "ropsten",
+    "chainId": "3"
+}

src/index.tsx

@@ -5,14 +5,16 @@ import { ThemeProvider } from 'styled-components';
 import App from './App';
 import GlobalStyle from './styles/globalStyle';
 import { basic } from './styles/theme';
-import store from './redux/store';
-
+import { store, persistor } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react'
 ReactDOM.render(
   <Provider store={store}>
     <ThemeProvider theme={basic}>
       <GlobalStyle />
       <Suspense fallback="...">
-        <App />
+        <PersistGate persistor={persistor}>
+          <App />
+        </PersistGate>
       </Suspense>
     </ThemeProvider>
   </Provider>,