Amount On Transaction Details along with token

packages/omgx/wallet-frontend/src/actions/networkAction.js

@@ -46,12 +46,6 @@ export function exitBOBA(token, value) {
   )
 }
 
-export function processExits(maxExits, currency, gasPrice) {
-  return createAction('QUEUE/PROCESS', () =>
-    networkService.processExits(maxExits, currency, gasPrice)
-  )
-}
-
 //SWAP RELATED
 export function depositL1LP(currency, value, decimals) {
   return createAction('DEPOSIT/CREATE', () =>

packages/omgx/wallet-frontend/src/components/listAccount/listAccount.js

@@ -82,15 +82,12 @@ class ListAccount extends React.Component {
       chain,
       dropDownBox,
       networkLayer,
-      disabled,
-      loading
+      disabled
     } = this.state
 
     const enabled = (networkLayer === chain) ? true : false
     const logo = getCoinImage(token.symbol)
 
-    //console.log("Acconut disabled:",disabled)
-
     return (
       <>
         <S.Content>

packages/omgx/wallet-frontend/src/components/transaction/Transaction.js

@@ -42,6 +42,7 @@ function Transaction({
   detail,
   oriChain,
   oriHash,
+  amountTx
 }) {
 
   const [dropDownBox, setDropDownBox] = useState(false)
@@ -174,6 +175,7 @@ function Transaction({
               {blockNumber}
             </Typography>
           </div>
+          {amountTx ? <Typography variant="h4">{amountTx}</Typography> : null}
         </S.TableCell>
 
         <S.TableCell sx={{ gap: "5px" }}>

packages/omgx/wallet-frontend/src/containers/account/Account.js

@@ -44,8 +44,6 @@ import NetworkSwitcherIcon from 'components/icons/NetworkSwitcherIcon'
 import PendingTransaction from './PendingTransaction'
 import useInterval from 'util/useInterval'
 
-import AlertIcon from 'components/icons/AlertIcon'
-
 const POLL_INTERVAL = 2000; //milliseconds
 
 function Account () {
@@ -85,10 +83,8 @@ function Account () {
   },[tokenList, dispatch])
 
   const unorderedTransactions = useSelector(selectTransactions, isEqual)
-  //console.log("Transactions:",unorderedTransactions)
 
   const orderedTransactions = orderBy(unorderedTransactions, i => i.timeStamp, 'desc')
-  //console.log("orderedTransactions:",orderedTransactions)
 
   const pendingL1 = orderedTransactions.filter((i) => {
       if (i.chain === 'L1pending' && //use the custom API watcher for fast data on pending L1->L2 TXs

packages/omgx/wallet-frontend/src/containers/account/PendingTransaction.js

@@ -20,6 +20,9 @@ import { useSelector } from 'react-redux'
 import { isEqual, orderBy } from 'lodash'
 import { selectTransactions } from 'selectors/transactionSelector'
 import { selectNetwork } from 'selectors/setupSelector'
+import { selectTokens } from 'selectors/tokenSelector'
+
+import { logAmount } from 'util/amountConvert'
 import { getAllNetworks } from 'util/masterConfig'
 
 import AlertIcon from 'components/icons/AlertIcon'
@@ -33,7 +36,9 @@ function PendingTransaction() {
 
     const [page, setPage] = useState(1)
     const unorderedTransactions = useSelector(selectTransactions, isEqual)
-
+
+    const tokenList = useSelector(selectTokens)
+
     const pending = unorderedTransactions.filter((i) => {
         if (i.crossDomainMessage &&
             i.crossDomainMessage.crossDomainMessage === 1 &&
@@ -61,7 +66,7 @@ function PendingTransaction() {
         return false
     })
     pendingExitsStage0 = pendingExitsStage0.map(v => ({
-        ...v,label: 'L2->L1 Fast Exit',labelStatus: 'Step 0, No SR Hash yet, Pending',
+        ...v,label: 'Bridge to L1',labelStatus: 'Step 0, No SR Hash yet, Pending',
         completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
       })
     )
@@ -72,19 +77,19 @@ function PendingTransaction() {
         return false
     })
     pendingExitsStage1 = pendingExitsStage1.map(v => ({
-        ...v, label: 'L2->L1 Fast Exit', labelStatus: 'Step 1, Have SR Hash, Pending',
+        ...v, label: 'Bridge to L1', labelStatus: 'Step 1, Have SR Hash, Pending',
         completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
       })
     )
 
     //Part 3 - exit that is not final, but we have a state root hash, and we ARE NOT using the fast message relayer
     //so this is a traditional exit 
     let pendingExitsTrad = pendingL2.filter((i) => {
-        if (i.stateRoot.stateRootHash && !i.action.fast) return true
+        if (!i.action.fast) return true
         return false
     })
     pendingExitsTrad = pendingExitsTrad.map(v => ({
-        ...v,label: 'L2->L1 Trad Exit',labelStatus: 'In 7 day window',
+        ...v,label: 'Classical Bridge to L1',labelStatus: 'In 7 day window',
         completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
       })
     )
@@ -95,19 +100,19 @@ function PendingTransaction() {
         return false
     })
     pendingDepositsFast = pendingDepositsFast.map(v => ({
-        ...v,label: 'L1->L2 Fast Deposit',labelStatus: 'Pending',
+        ...v,label: 'Bridge to L2',labelStatus: 'Pending',
         completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
       })
     )
 
-    //DEPOSIT Part 3 - deposit is not final, but we have a state root hash, and we ARE NOT using the fast message relayer
+    //DEPOSIT Part 3 - we ARE NOT using the fast message relayer
     //so this is a traditional deposit 
     let pendingDepositsTrad = pendingL1.filter((i) => {
         if (!i.action.fast) return true
         return false
     })
     pendingDepositsTrad = pendingDepositsTrad.map(v => ({
-        ...v, label: 'L1->L2 Trad Deposit', labelStatus: 'Pending',
+        ...v, label: 'Classical Bridge to L2', labelStatus: 'Pending',
         completion: v.crossDomainMessage.crossDomainMessageEstimateFinalizedTime,
       })
     )
@@ -194,6 +199,21 @@ function PendingTransaction() {
 
                 let link = chainLink(i)
 
+                const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
+                let amountTx = null;
+
+                if (i.action) {
+                    let token = tokenList[i.action.token.toLowerCase()];
+                    if (chain === 'L2') {
+                        token = Object.values(tokenList).find(t => t.addressL2.toLowerCase() === i.action.token.toLowerCase());
+                    }
+                    if (!!token) {
+                        let amount = logAmount(i.action.amount, token.decimals, 3);
+                        let symbol = token[`symbol${chain}`];
+                        amountTx = `${amount} ${symbol}`;
+                    }
+                }
+
                 return <Grid
                     key={i.hash}
                     container
@@ -205,11 +225,11 @@ function PendingTransaction() {
                     }}
                 >
                     <Grid item xs={2}>
-                        {i.label}
+                        <span style={{fontSize: '0.9em'}}>{i.label}</span>
                     </Grid>
                     <Grid item xs={4}>
                         <Typography
-                            sx={{ wordBreak: 'break-all' }}
+                            sx={{ wordBreak: 'break-all',fontSize: '0.7em'}}
                             variant="body2"
                             component="p"
                         >
@@ -241,6 +261,15 @@ function PendingTransaction() {
                         </a>
                     </Typography>
                     </Grid>
+                    <Grid item xs={1}>
+                        <Typography
+                            sx={{ wordBreak: 'break-all', whiteSpace: 'nowrap' }}
+                            variant="body2"
+                            component="p"
+                        >
+                            {amountTx}
+                        </Typography>
+                    </Grid>
                 </Grid>
             })
         }

packages/omgx/wallet-frontend/src/containers/help/Help.js

@@ -37,6 +37,14 @@ class Help extends React.Component {
             Common Questions
           </Typography>
 
+
+
+          <Typography variant="body1" component="p" sx={{mt: 1, mb: 2}}>
+            <span style={{fontWeight: '700',textDecoration:'underline'}}>MetaMask does not pop up</span><br/>
+            <span style={{color: 'rgba(255, 255, 255, 0.7)'}}>Some third party popup blockers, such as uBlock Origin, can interfere with MetaMask. 
+            If MetaMask is not popping up, try disabling 3rd party popup blockers.</span>
+          </Typography>
+
           <Typography variant="body1" component="p" sx={{mt: 1, mb: 2}}>
             <span style={{fontWeight: '700',textDecoration:'underline'}}>Ledger Hardware Wallet L1 to L2 Deposits not working</span><br/>
             <span style={{color: 'rgba(255, 255, 255, 0.7)'}}>Please make sure that you are using a current firmware version for Ledger, for example, v2.0.0.</span>

packages/omgx/wallet-frontend/src/containers/modals/deposit/steps/InputStep.js

@@ -67,7 +67,7 @@ function InputStep({ handleClose, token }) {
       )
 
       if (res) {
-        dispatch(setActiveHistoryTab1('L1->L2 Bridge'))
+        dispatch(setActiveHistoryTab1('Bridge to L2'))
         dispatch(openAlert('ETH bridge transaction submitted'))
         handleClose()
       } else {
@@ -80,7 +80,7 @@ function InputStep({ handleClose, token }) {
         depositErc20(value_Wei_String, token.address, token.addressL2)
       )
       if (res) {
-        dispatch(setActiveHistoryTab1('L1->L2 Bridge'))
+        dispatch(setActiveHistoryTab1('Bridge to L2'))
         dispatch(openAlert(`${token.symbol} bridge transaction submitted`))
         handleClose()
       } else {

packages/omgx/wallet-frontend/src/containers/modals/deposit/steps/InputStepFast.js

@@ -89,7 +89,7 @@ function InputStepFast({ handleClose, token }) {
       res = await dispatch(depositL1LP(token.address, value_Wei_String))
 
       if (res) {
-        dispatch(setActiveHistoryTab1('L1->L2 Bridge'))
+        dispatch(setActiveHistoryTab1('Bridge to L2'))
         dispatch(
           openAlert(
             `ETH was bridged. You will receive
@@ -126,7 +126,7 @@ function InputStepFast({ handleClose, token }) {
     )
 
     if (res) {
-      dispatch(setActiveHistoryTab1('L1->L2 Bridge'))
+      dispatch(setActiveHistoryTab1('Bridge to L2'))
       dispatch(
         openAlert(
           `${token.symbol} was bridged to the L1LP. You will receive

packages/omgx/wallet-frontend/src/containers/modals/wrongnetwork/WrongNetworkModal.js

@@ -68,8 +68,7 @@ function WrongNetworkModal ({ open, onClose }) {
   }
 
   async function correctChain() {
-    console.log("Correcting the chain")
-    const res = await networkService.correctChain( networkLayer )
+    await networkService.correctChain( networkLayer )
   }
 
   return (

packages/omgx/wallet-frontend/src/containers/transactions/Deposits.js

@@ -19,6 +19,9 @@ import { useSelector } from 'react-redux'
 import moment from 'moment'
 
 import { selectLoading } from 'selectors/loadingSelector'
+import { selectTokens } from 'selectors/tokenSelector'
+
+import { logAmount } from 'util/amountConvert'
 
 import Pager from 'components/pager/Pager'
 import Transaction from 'components/transaction/Transaction'
@@ -35,6 +38,7 @@ function Deposits({ searchHistory, transactions }) {
   const [page, setPage] = useState(1);
 
   const loading = useSelector(selectLoading(['TRANSACTION/GETALL']));
+  const tokenList = useSelector(selectTokens);
 
   useEffect(() => {
     setPage(1);
@@ -80,11 +84,27 @@ function Deposits({ searchHistory, transactions }) {
                 <div className={styles.disclaimer}>Loading deposits...</div>
               )}
               {paginatedDeposits.map((i, index) => {
-                const metaData = typeof (i.typeTX) === 'undefined' ? '' : i.typeTX
+
+                if(i.depositL2 === false) return
+
+                const typeTX = typeof(i.typeTX) === 'undefined' ? '' : i.typeTX
+                const activity = typeof(i.activity) === 'undefined' ? '' : ' (' + i.activity + ')'
+                let metaData = typeTX + ' ' + activity
+
                 const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
 
                 let details = null
 
+                let amountTx = null;
+                if (i.action && i.action.token) {
+                  const token = tokenList[i.action.token.toLowerCase()];
+                  if (!!token) {
+                    let amount = logAmount(i.action.amount, token.decimals, 3);
+                    let symbol = token[`symbol${chain}`];
+                    amountTx = `${amount} ${symbol}`;
+                  }
+                }
+
                 if( i.crossDomainMessage && i.crossDomainMessage.l2BlockHash ) {
                   details = {
                     blockHash: i.crossDomainMessage.l2BlockHash,
@@ -101,11 +121,12 @@ function Deposits({ searchHistory, transactions }) {
                     title={`Hash: ${i.hash}`}
                     time={moment.unix(i.timeStamp).format('lll')}
                     blockNumber={`Block ${i.blockNumber}`}
-                    chain={`L1->L2 Deposit`}
+                    chain={`Bridge to L2`}
                     typeTX={`TX Type: ${metaData}`}
                     detail={details}
                     oriChain={chain}
                     oriHash={i.hash}
+                    amountTx={amountTx}
                   />
                 )
               })}

packages/omgx/wallet-frontend/src/containers/transactions/Exits.js

@@ -19,6 +19,10 @@ import moment from 'moment'
 import { useSelector } from 'react-redux'
 
 import { selectLoading } from 'selectors/loadingSelector'
+import { selectTokens } from 'selectors/tokenSelector'
+
+import { logAmount } from 'util/amountConvert'
+
 
 import Transaction from 'components/transaction/Transaction'
 import Pager from 'components/pager/Pager'
@@ -36,23 +40,29 @@ function Exits({ searchHistory, transactions, chainLink }) {
   const [page, setPage] = useState(1);
 
 
-  const loading = useSelector(selectLoading(['EXIT/GETALL']));
+  const loading = useSelector(selectLoading(['EXIT/GETALL']))
+
+  const tokenList = useSelector(selectTokens)
 
   const _exits = transactions.filter(i => {
     return i.hash.includes(searchHistory) && (
       i.to !== null && (
         i.to.toLowerCase() === networkService.L2LPAddress.toLowerCase() ||
-        //i.to.toLowerCase() === networkService.L2_ETH_Address.toLowerCase() ||
         i.to.toLowerCase() === networkService.L2StandardBridgeAddress.toLowerCase()
       )
     )
   })
 
   const renderExits = _exits.map((i, index) => {
+
+    //these are other types of transactions like approvals
+    if(i.exitL2 === false) return
 
-    const metaData = typeof (i.typeTX) === 'undefined' ? '' : i.typeTX
     const chain = (i.chain === 'L1pending') ? 'L1' : i.chain
 
+    const typeTX = typeof(i.typeTX) === 'undefined' ? '' : i.typeTX
+    const activity = typeof(i.activity) === 'undefined' ? '' : ' (' + i.activity + ')'
+    let metaData = typeTX + ' ' + activity
 
     let isExitable = false
     let details = null
@@ -61,10 +71,20 @@ function Exits({ searchHistory, transactions, chainLink }) {
 
     const to = i.to.toLowerCase()
 
+    let amountTx = null;
+
+    if (i.action && i.action.token) {
+      const token = Object.values(tokenList).find(t => t.addressL2.toLowerCase() === i.action.token.toLowerCase());
+      if (!!token) {
+        let amount = logAmount(i.action.amount, token.decimals, 3);
+        let symbol = token[`symbol${chain}`];
+        amountTx = `${amount} ${symbol}`;
+      }
+    }
+
     //are we dealing with a traditional exit?
     if (to === networkService.L2StandardBridgeAddress.toLowerCase()) {
 
-
       isExitable = moment().isAfter(moment.unix(i.crossDomainMessage.crossDomainMessageEstimateFinalizedTime))
 
       if (isExitable) {
@@ -92,7 +112,7 @@ function Exits({ searchHistory, transactions, chainLink }) {
     return (
       <Transaction
         key={`${index}`}
-        chain='L2->L1 Exit'
+        chain='Bridge to L1'
         title={`${chain} Hash: ${i.hash}`}
         blockNumber={`Block ${i.blockNumber}`}
         time={timeLabel}
@@ -101,6 +121,7 @@ function Exits({ searchHistory, transactions, chainLink }) {
         detail={details}
         oriChain={chain}
         oriHash={i.hash}
+        amountTx={amountTx}
       />
     )
   })