State persist for handling pending transactions

package.json

@@ -53,6 +53,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",

src/components/TransactionsListModal/TransactionListModal.style.ts

@@ -7,15 +7,20 @@ 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;
+  margin: 53px 0;
+  padding: 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/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>,

src/net/eth.ts

@@ -8,7 +8,8 @@ import { web3FromSource } from '@polkadot/extension-dapp';
 import { PromiEvent } from 'web3-core';
 import Api, { ss58ToU8 } from './api';
 import Polkadot from './polkadot';
-
+import { store } from '../redux/store';
+import { pendingEventTransactions } from '../utils/common';
 // Import Contracts
 import {
   APP_ETH_CONTRACT_ADDRESS,
@@ -48,7 +49,7 @@ import {
 import { fetchEthAddress } from '../redux/actions/EthTransactions';
 import { Channel } from '../types/types';
 import { getChannelID } from '../utils/common';
-
+import { handleTransaction, handlePolkadotMissedEvents } from '../redux/actions/transactions';
 export default class Eth extends Api {
   public static loadContracts(dispatch: Dispatch<any>, web3: Web3): void {
     const ethContract = new web3.eth.Contract(
@@ -106,7 +107,24 @@ export default class Eth extends Api {
 
       // fetch addresses
       await dispatch(fetchEthAddress());
-
+
+      //Obtain transaction list
+      let transactions = store.getState().transactions.transactions;
+      let pendingTxCount = pendingEventTransactions(transactions);
+
+      if (pendingTxCount > 0) {
+        // Handelling transaction callback and events
+        let interval = setInterval(() => {
+          transactions = store.getState().transactions.transactions;
+          pendingTxCount = pendingEventTransactions(transactions);
+
+          if (pendingTxCount === 0)
+            clearInterval(interval);
+
+          dispatch(handleTransaction(web3));
+          dispatch(handlePolkadotMissedEvents());
+        }, 5000);
+      }
       console.log('- Eth connected');
     };