Merge pull request #26 from enyalabs/dev_transaction_history

Added transaction history
omgnetwork · May 10, 2021 · d4659ae · d4659ae
2 parents 20230a0 + 5220b84
commit d4659ae
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 200 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ wallet/src/deployment
 /**/package-lock.json
 
 /**/.env
+env.js
 
 /**/*.log
 

diff --git a/deployment/rinkeby/addresses.json b/deployment/rinkeby/addresses.json
@@ -1,9 +1,10 @@
 {
-  "L1LiquidityPool": "0x32D3018746A69C8Fc0585A96492bF2A41c2C316D",
-  "L2LiquidityPool": "0x7C9b37e50Ea69eB033216A3dce5e758Af086c2b4",
-  "L1ERC20": "0x9F0C060F2BC5028FBab3b5Fa8ac91104C8BF0a0C",
-  "L2DepositedERC20": "0x16aB7a77057AaF5ac5dAC5Fc8CC1F19A89F20d33",
-  "L1ERC20Gateway": "0x7eD811886Dee4CE61785cfF6A10492f5c36E83D2",
-  "l1ETHGatewayAddress": "0xBa67f68C956178CB7fd1c882f9B882487Fa28898",
-  "l1MessengerAddress": "0x07A5992d8bE8c271B3baa5320975b6E8d8816e34"
+  "L1LiquidityPool": "0xB90B4418b15ac78eE592F12f1668E066745FAb89",
+  "L2LiquidityPool": "0x6418E5Da52A3d7543d393ADD3Fa98B0795d27736",
+  "L1ERC20": "0xa1faF62b538206Aafd556237dDeBF71e5e2253f5",
+  "L2DepositedERC20": "0x9934FC453d11334e6bFbE5D3856A2c0E917D26f1",
+  "L1ERC20Gateway": "0xb7F6458b6Ab078241437bB771404912582dD6f47",
+  "l1ETHGatewayAddress": "0x2F409ed85de987D1190CAD5dbe089ccD880C585b",
+  "l1MessengerAddress": "0xA695d1F761D1489148bdEd0cb1811b50A72b7D75",
+  "L2ERC721": "0x69d28EA3c687aEc89477B0b6407b385A4941dC8D"
 }
diff --git a/wallet/.env.example b/wallet/.env.example
@@ -1 +1,2 @@
-REACT_APP_INFURA_ID=
+REACT_APP_INFURA_ID=
+REACT_APP_ETHERSCAN_API=
diff --git a/wallet/public/env.js b/wallet/public/env.js
diff --git a/wallet/src/Settings.js b/wallet/src/Settings.js
@@ -4,6 +4,9 @@ export const VERSION = "1.0.26";
 
 export const INFURA_ID = process.env.REACT_APP_INFURA_ID;
 
+export const ETHERSCAN_URL = `https://api-rinkeby.etherscan.io/api?module=account&action=txlist&startblock=0&endblock=99999999&sort=asc&apikey=${process.env.REACT_APP_ETHERSCAN_API}`;
+export const OMGX_WATCHER_URL = `https://api-watcher.rinkeby.omgx.network/`;
+
 export const L1ETHGATEWAY = [
   {
     anonymous: false,

diff --git a/wallet/src/actions/networkAction.js b/wallet/src/actions/networkAction.js
@@ -43,7 +43,7 @@ export function fetchBalances () {
 export function fetchTransactions () {
   return createAction(
     'TRANSACTION/GETALL',
-    () => networkService.getAllTransactions()
+    () => networkService.getTransactions()
   );
 }
 

diff --git a/wallet/src/components/walletpicker/WalletPicker.js b/wallet/src/components/walletpicker/WalletPicker.js
@@ -50,7 +50,7 @@ function WalletPicker ({ onEnable }) {
   const networkName = useSelector(selectNetwork())
   //const netLayer = useSelector(selectLayer())
 
-  console.log("walletMethod:",walletMethod)
+  // console.log("walletMethod:",walletMethod)
   console.log("networkName:",networkName)
   //console.log("netLayer:",netLayer)
 

diff --git a/wallet/src/containers/home/Home.js b/wallet/src/containers/home/Home.js
@@ -17,10 +17,10 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector, batch } from 'react-redux';
 import { selectWalletMethod } from 'selectors/setupSelector';
 import { selectModalState } from 'selectors/uiSelector';
-import { selectChildchainTransactions } from 'selectors/transactionSelector';
+// import { selectChildchainTransactions } from 'selectors/transactionSelector';
 
 import useInterval from 'util/useInterval';
-import { isEqual } from 'lodash';
+// import { isEqual } from 'lodash';
 
 import {
   checkWatcherStatus,
@@ -51,7 +51,7 @@ import logo from 'images/omgx.png';
 
 import * as styles from './Home.module.scss';
 
-const POLL_INTERVAL = 2000; //in milliseconds?
+const POLL_INTERVAL = 1000; //in milliseconds?
 
 function Home () {
 
@@ -70,7 +70,7 @@ function Home () {
   const ledgerConnectModalState = useSelector(selectModalState('ledgerConnectModal'))
 
   const walletMethod = useSelector(selectWalletMethod())
-  const transactions = useSelector(selectChildchainTransactions, isEqual);
+  // const transactions = useSelector(selectChildchainTransactions, isEqual);
 
   useEffect(() => {
     const body = document.getElementsByTagName('body')[0];
@@ -99,7 +99,7 @@ function Home () {
       dispatch(fetchBalances());
       dispatch(fetchTransactions());
     });
-  }, POLL_INTERVAL);
+  }, POLL_INTERVAL * 10);
 
   useInterval(() => {
     dispatch(fetchBalances());

diff --git a/wallet/src/containers/transactions/Deposits.js b/wallet/src/containers/transactions/Deposits.js
@@ -14,25 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import React, { useState, useEffect } from 'react';
-// import { isEqual } from 'lodash';
 import { useSelector } from 'react-redux';
+import moment from 'moment';
+import truncate from 'truncate-middle';
 
-// import { selectEthDeposits, selectErc20Deposits } from 'selectors/transactionSelector';
 import { selectLoading } from 'selectors/loadingSelector';
 
 import Pager from 'components/pager/Pager';
+import Transaction from 'components/transaction/Transaction';
+
+import networkService from 'services/networkService';
 
 import * as styles from './Transactions.module.scss';
 
 const PER_PAGE = 10;
 
-function Deposits ({ searchHistory }) {
+function Deposits ({ searchHistory, transactions }) {
 
   const [ page, setPage ] = useState(1);
 
   // const ethDeposits = useSelector(selectEthDeposits, isEqual);
   // const erc20Deposits = useSelector(selectErc20Deposits, isEqual);
-  const loading = useSelector(selectLoading([ 'DEPOSIT/GETALL' ]));
+  const loading = useSelector(selectLoading([ 'TRANSACTION/GETALL' ]));
 
   useEffect(() => {
     setPage(1);
@@ -43,7 +46,11 @@ function Deposits ({ searchHistory }) {
   //   i => i.blockNumber, 'desc'
   // );
 
-  const _deposits = [];
+  const _deposits = transactions.filter(i => {
+    return i.hash.includes(searchHistory) && (
+      i.to.toLowerCase() === networkService.L1LPAddress.toLowerCase() || 
+      i.to.toLowerCase() === networkService.l1ETHGatewayAddress.toLowerCase());
+  });
 
   const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE);
   const endingIndex = page * PER_PAGE;
@@ -70,21 +77,22 @@ function Deposits ({ searchHistory }) {
         {!paginatedDeposits.length && loading && (
           <div className={styles.disclaimer}>Loading...</div>
         )}
-        {/* {paginatedDeposits.map((i, index) => {
+        {paginatedDeposits.map((i, index) => {
           return (
             <Transaction
               key={index}
-              link={`${etherscan}/tx/${i.transactionHash}`}
-              title={truncate(i.transactionHash, 6, 4, '...')}
+              link={ 
+                (networkService.chainID === 4 || networkService.chainID === 28) ? 
+                  `https://rinkeby.etherscan.io/tx/${i.hash}`:
+                  undefined
+              }
+              title={truncate(i.hash, 6, 4, '...')}
               midTitle='Deposit'
-              subTitle={`Token: ${i.tokenInfo.symbol}`}
-              status={i.status === 'Pending' ? 'Pending' : logAmount(i.returnValues.amount, i.tokenInfo.decimals)}
-              statusPercentage={i.pendingPercentage <= 100 ? i.pendingPercentage : ''}
+              subTitle={moment.unix(i.timeStamp).format('lll')}
               subStatus={`Block ${i.blockNumber}`}
-              tooltip={'For re-org protection, deposits require 10 block confirmations before the UTXO is available to spend.'}
             />
           );
-        })} */}
+        })}
       </div>
     </div>
   );

diff --git a/wallet/src/containers/transactions/Exits.js b/wallet/src/containers/transactions/Exits.js
@@ -41,11 +41,11 @@ function Exits ({ searchHistory }) {
   const etherscan = useSelector(selectEtherscan());
 
   const _pendingExits = pendingExits.filter(i => {
-    return i.transactionHash.includes(searchHistory);
+    return i.hash.includes(searchHistory);
   });
 
   const _exitedExits = exitedExits.filter(i => {
-    return i.transactionHash.includes(searchHistory);
+    return i.hash.includes(searchHistory);
   });
 
   const renderPending = _pendingExits.map((i, index) => {
@@ -70,11 +70,11 @@ function Exits ({ searchHistory }) {
             }
             : undefined
         }
-        link={`${etherscan}/tx/${i.transactionHash}`}
+        link={`${etherscan}/tx/${i.hash}`}
         status={getStatus()}
         subStatus={`Block ${i.blockNumber}`}
         statusPercentage={i.pendingPercentage <= 100 ? i.pendingPercentage : ''}
-        title={truncate(i.transactionHash, 6, 4, '...')}
+        title={truncate(i.hash, 6, 4, '...')}
         midTitle={i.exitableAt ? `Exitable ${exitableMoment.format('lll')}` : ''}
         subTitle={i.currency ? truncate(i.currency, 6, 4, '...'): ''}
       />
@@ -85,10 +85,10 @@ function Exits ({ searchHistory }) {
     return (
       <Transaction
         key={`exited-${index}`}
-        link={`${etherscan}/tx/${i.transactionHash}`}
+        link={`http://blockexplorer.rinkeby.omgx.network/tx/${i.hash}`}
         status='Exited'
         subStatus={`Block ${i.blockNumber}`}
-        title={truncate(i.transactionHash, 6, 4, '...')}
+        title={truncate(i.hash, 6, 4, '...')}
       />
     );
   });

diff --git a/wallet/src/containers/transactions/Transactions.js b/wallet/src/containers/transactions/Transactions.js
@@ -15,10 +15,9 @@ limitations under the License. */
 
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { isEqual } from 'lodash';
+import { isEqual, orderBy } from 'lodash';
 import { useSelector } from 'react-redux';
 
-import BN from 'bn.js';
 import moment from 'moment';
 import truncate from 'truncate-middle';
 
@@ -28,11 +27,9 @@ import { setActiveHistoryTab2 } from 'actions/uiAction'
 import { selectActiveHistoryTab1 } from 'selectors/uiSelector'
 import { selectActiveHistoryTab2 } from 'selectors/uiSelector'
 
+import { selectChildchainTransactions } from 'selectors/transactionSelector';
 import { selectLoading } from 'selectors/loadingSelector'
 
-import networkService from 'services/networkService'
-import { selectNetworkBURL } from 'selectors/setupSelector';
-
 import Tabs from 'components/tabs/Tabs'
 import Input from 'components/input/Input'
 import Transaction from 'components/transaction/Transaction'
@@ -41,6 +38,8 @@ import Pager from 'components/pager/Pager'
 import Exits from './Exits';
 import Deposits from './Deposits';
 
+import networkService from 'services/networkService';
+
 import * as styles from './Transactions.module.scss';
 
 const PER_PAGE = 5;
@@ -50,6 +49,7 @@ function Transactions () {
   const dispatch = useDispatch();
 
   const [ page1, setPage1 ] = useState(1);
+  // eslint-disable-next-line
   const [ page2, setPage2 ] = useState(1);
 
   const [ searchHistory, setSearchHistory ] = useState('');
@@ -59,25 +59,11 @@ function Transactions () {
   const activeTab1 = useSelector(selectActiveHistoryTab1, isEqual);
   const activeTab2 = useSelector(selectActiveHistoryTab2, isEqual);
 
-  const transactions = [];
-
-  const blockexplorerURL = useSelector(selectNetworkBURL());
-
-  function renderStatus (utxo) {
-    if (utxo.status === 'Pending') {
-      return 'Pending';
-    }
-    const total = utxo.outputs.reduce((prev, curr) => {
-      if (curr.owner !== networkService.account) {
-        return prev.add(new BN(curr.amount));
-      }
-      return prev;
-    }, new BN(0));
-    return `${total.toString()}`;
-  }
+  const unorderedTransactions = useSelector(selectChildchainTransactions, isEqual);
+  const transactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc');
 
   const _transactions = transactions.filter(i => {
-    return i.txhash.includes(searchHistory) || i.metadata.includes(searchHistory);
+    return i.hash.includes(searchHistory);
   });
 
   const startingIndex = page1 === 1 ? 0 : ((page1 - 1) * PER_PAGE);
@@ -138,24 +124,22 @@ function Transactions () {
                 return (
                   <Transaction
                     key={index}
-                    link={
-                      i.status === 'Pending'
-                        ? undefined
-                        : `${blockexplorerURL}/transaction/${i.txhash}`
+                    link={ 
+                      (networkService.chainID === 4 || networkService.chainID === 28) ? 
+                        `https://rinkeby.etherscan.io/tx/${i.hash}`:
+                        undefined
                     }
-                    title={`${truncate(i.txhash, 6, 4, '...')}`}
-                    midTitle={i.metadata ? i.metadata : '-'}
-                    subTitle={moment.unix(i.block.timestamp).format('lll')}
-                    status={renderStatus(i)}
-                    subStatus={`Block ${i.block.blknum}`}
+                    title={`${truncate(i.hash, 6, 4, '...')}`}
+                    subTitle={moment.unix(i.timeStamp).format('lll')}
+                    subStatus={`Block ${i.blockNumber}`}
                   />
                 );
               })}
             </div>
           )}
 
           {activeTab1=== 'Deposits' && <
-            Deposits searchHistory={searchHistory} />
+            Deposits searchHistory={searchHistory} transactions={transactions} />
           }
 
         </div>

diff --git a/wallet/src/reducers/exitReducer.js b/wallet/src/reducers/exitReducer.js
@@ -37,7 +37,7 @@ function exitReducer (state = initialState, action) {
         ...state,
         pending: {
           ...state.pending,
-          ...keyBy(action.payload, 'transactionHash')
+          ...keyBy(action.payload, 'hash')
         }
       };
     default:

diff --git a/wallet/src/reducers/setupReducer.js b/wallet/src/reducers/setupReducer.js
@@ -15,7 +15,7 @@ limitations under the License. */
 
 const initialState = {
   walletMethod: null,
-  networkName: 'local',
+  networkName: 'rinkeby',
   blockexplorerURL: '',
   etherscan: '',
 };
@@ -30,9 +30,10 @@ function setupReducer (state = initialState, action) {
     case 'SETUP/NETWORK/SET':
       return { 
       	...state, 
-      	networkName: action.payload.network.name,
-        blockexplorerURL: action.payload.network.blockexplorer,
-        etherscan: action.payload.network.etherscan,
+        networkName: action.payload,
+      	// networkName: action.payload.network.name,
+        // blockexplorerURL: action.payload.network.blockexplorer,
+        // etherscan: action.payload.network.etherscan,
       }
     case 'SETUP/LAYER/SET':
       return { 

diff --git a/wallet/src/reducers/transactionReducer.js b/wallet/src/reducers/transactionReducer.js
@@ -19,7 +19,7 @@ const initialState = {};
 function transactionReducer (state = initialState, action) {
   switch (action.type) {
     case 'TRANSACTION/GETALL/SUCCESS':
-      return { ...state, ...keyBy(action.payload, 'txhash') };
+      return { ...state, ...keyBy(action.payload, 'hash') };
     case 'TRANSFER/CREATE/SUCCESS':
       return { ...state, [action.payload.txhash]: action.payload };
     default:
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ wallet/src/deployment @@
     /**/package-lock.json
     /**/.env
+    env.js
     /**/*.log
@@ Expand Down @@