Fixes #3425: Better support for batch transactions (#5437)

10 files changed, 207 insertions, 13 deletions

diff --git a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
index 43e1e4427..be77edbdf 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-header/index.scss
@@ -7,7 +7,7 @@
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid $geyser;
-    padding: 13px 13px 13px 24px;
+    padding: 4px 13px 4px 13px;
     flex: 0 0 auto;
   }
 
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
new file mode 100755
index 000000000..8327f997b
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ConfirmPageContainerNavigation = props => {
+  const { onNextTx, totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = props
+
+  return (
+    <div className="confirm-page-container-navigation"
+        style={{
+          display: showNavigation ? 'flex' : 'none',
+        }}
+    >
+      <div className="confirm-page-container-navigation__container"
+        style={{
+          visibility: prevTxId ? 'initial' : 'hidden',
+        }}>
+        <div
+          className="confirm-page-container-navigation__arrow"
+          onClick={() => onNextTx(firstTx)}>
+          <img src="/images/double-arrow.svg" />
+        </div>
+        <div
+          className="confirm-page-container-navigation__arrow"
+          onClick={() => onNextTx(prevTxId)}>
+          <img src="/images/single-arrow.svg" />
+        </div>
+      </div>
+      <div className="confirm-page-container-navigation__textcontainer">
+        <div className="confirm-page-container-navigation__navtext">
+          {positionOfCurrentTx} {ofText} {totalTx}
+        </div>
+        <div className="confirm-page-container-navigation__longtext">
+          {requestsWaitingText}
+        </div>
+      </div>
+      <div
+        className="confirm-page-container-navigation__container"
+        style={{
+          visibility: nextTxId ? 'initial' : 'hidden',
+        }}>
+        <div
+          className="confirm-page-container-navigation__arrow"
+          onClick={() => onNextTx(nextTxId)}>
+          <img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
+        </div>
+        <div
+          className="confirm-page-container-navigation__arrow"
+          onClick={() => onNextTx(lastTx)}>
+          <img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmPageContainerNavigation.propTypes = {
+  totalTx: PropTypes.number,
+  positionOfCurrentTx: PropTypes.number,
+  onNextTx: PropTypes.func,
+  nextTxId: PropTypes.string,
+  prevTxId: PropTypes.string,
+  showNavigation: PropTypes.bool,
+  firstTx: PropTypes.string,
+  lastTx: PropTypes.string,
+  ofText: PropTypes.string,
+  requestsWaitingText: PropTypes.string,
+}
+
+export default ConfirmPageContainerNavigation
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.js b/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.js
new file mode 100755
index 000000000..d97c1b447
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-page-container-navigation.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.scss
new file mode 100755
index 000000000..0cf184c60
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-navigation/index.scss
@@ -0,0 +1,54 @@
+.confirm-page-container-navigation {
+  display: flex;
+  justify-content: space-between;
+  font: inherit;
+  padding: 4px 10px 4px 10px;
+  border-bottom: 1px solid $geyser;
+  flex: 0 0 auto;
+
+  &__container {
+    display: flex;
+  }
+
+  &__arrow {
+    cursor: pointer;
+    display: flex;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  
+  &__arrow:hover {
+    -webkit-transform: scale(1.1);
+      -moz-transform: scale(1.1);
+        -o-transform: scale(1.1);
+          transform: scale(1.1); 
+  }
+
+  &__arrow:active {
+    -webkit-transform: scale(0.95);
+      -moz-transform: scale(0.95);
+        -o-transform: scale(0.95);
+          transform: scale(0.95); 
+  }
+
+  &__textcontainer {
+    text-align: center;
+  }
+
+  &__navtext {
+    font-size: 9px;
+    font-weight: bold;
+  }
+
+  &__longtext {
+    color: $oslo-gray;
+    font-size: 8px;
+  }
+
+  &__imageflip {
+    -webkit-transform: scaleX(-1);
+      -moz-transform: scaleX(-1);
+        -o-transform: scaleX(-1);
+          transform: scaleX(-1);
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
index 8b2e47cbb..10edf3b16 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import SenderToRecipient from '../sender-to-recipient'
 import { PageContainerFooter } from '../page-container'
-import { ConfirmPageContainerHeader, ConfirmPageContainerContent } from './'
+import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation } from './'
 
 export default class ConfirmPageContainer extends Component {
   static contextTypes = {
@@ -43,6 +43,17 @@ export default class ConfirmPageContainer extends Component {
     summaryComponent: PropTypes.node,
     warning: PropTypes.string,
     unapprovedTxCount: PropTypes.number,
+    // Navigation
+    totalTx: PropTypes.number,
+    positionOfCurrentTx: PropTypes.number,
+    nextTxId: PropTypes.string,
+    prevTxId: PropTypes.string,
+    showNavigation: PropTypes.bool,
+    onNextTx: PropTypes.func,
+    firstTx: PropTypes.string,
+    lastTx: PropTypes.string,
+    ofText: PropTypes.string,
+    requestsWaitingText: PropTypes.string,
     // Footer
     onCancelAll: PropTypes.func,
     onCancel: PropTypes.func,
@@ -79,11 +90,33 @@ export default class ConfirmPageContainer extends Component {
       unapprovedTxCount,
       assetImage,
       warning,
+      totalTx,
+      positionOfCurrentTx,
+      nextTxId,
+      prevTxId,
+      showNavigation,
+      onNextTx,
+      firstTx,
+      lastTx,
+      ofText,
+      requestsWaitingText,
     } = this.props
     const renderAssetImage = contentComponent || (!contentComponent && !identiconAddress)
 
     return (
       <div className="page-container">
+        <ConfirmPageContainerNavigation
+            totalTx={totalTx}
+            positionOfCurrentTx={positionOfCurrentTx}
+            nextTxId={nextTxId}
+            prevTxId={prevTxId}
+            showNavigation={showNavigation}
+            onNextTx={(txId) => onNextTx(txId)}
+            firstTx={firstTx}
+            lastTx={lastTx}
+            ofText={ofText}
+            requestsWaitingText={requestsWaitingText}
+        />
         <ConfirmPageContainerHeader
           showEdit={showEdit}
           onEdit={() => onEdit()}
diff --git a/ui/app/components/confirm-page-container/index.js b/ui/app/components/confirm-page-container/index.js
index ee88aa5d3..28b17614e 100644
--- a/ui/app/components/confirm-page-container/index.js
+++ b/ui/app/components/confirm-page-container/index.js
@@ -1,6 +1,8 @@
 export { default } from './confirm-page-container.component'
 export { default as ConfirmPageContainerHeader } from './confirm-page-container-header'
 export { default as ConfirmDetailRow } from './confirm-detail-row'
+export { default as ConfirmPageContainerNavigation } from './confirm-page-container-navigation'
+
 export {
   default as ConfirmPageContainerContent,
   ConfirmPageContainerSummary,
diff --git a/ui/app/components/confirm-page-container/index.scss b/ui/app/components/confirm-page-container/index.scss
index af7a5b555..d41cd4423 100644
--- a/ui/app/components/confirm-page-container/index.scss
+++ b/ui/app/components/confirm-page-container/index.scss
@@ -3,3 +3,5 @@
 @import './confirm-page-container-header/index';
 
 @import './confirm-detail-row/index';
+
+@import './confirm-page-container-navigation/index';
\ No newline at end of file
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 7d01aaffb..3a940a505 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../confirm-page-container'
 import { isBalanceSufficient } from '../../send/send.utils'
-import { DEFAULT_ROUTE } from '../../../routes'
+import { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } from '../../../routes'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
@@ -55,6 +55,7 @@ export default class ConfirmTransactionBase extends Component {
     transactionStatus: PropTypes.string,
     txData: PropTypes.object,
     unapprovedTxCount: PropTypes.number,
+    currentNetworkUnapprovedTxs: PropTypes.object,
     // Component props
     action: PropTypes.string,
     contentComponent: PropTypes.node,
@@ -347,6 +348,32 @@ export default class ConfirmTransactionBase extends Component {
       />
     )
   }
+  
+  handleNextTx (txId) {
+    const { history, clearConfirmTransaction } = this.props
+    if (txId) {
+      clearConfirmTransaction()
+      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${txId}`)
+    }
+  }
+
+  getNavigateTxData () {
+    const { currentNetworkUnapprovedTxs, txData: { id } = {} } = this.props
+    const enumUnapprovedTxs = Object.keys(currentNetworkUnapprovedTxs).reverse()
+    const currentPosition = enumUnapprovedTxs.indexOf(id.toString())
+
+    return {
+      totalTx: enumUnapprovedTxs.length,
+      positionOfCurrentTx: currentPosition + 1,
+      nextTxId: enumUnapprovedTxs[currentPosition + 1],
+      prevTxId: enumUnapprovedTxs[currentPosition - 1],
+      showNavigation: enumUnapprovedTxs.length > 1,
+      firstTx: enumUnapprovedTxs[0],
+      lastTx: enumUnapprovedTxs[enumUnapprovedTxs.length - 1],
+      ofText: this.context.t('ofTextNofM'),
+      requestsWaitingText: this.context.t('requestsAwaitingAcknowledgement'),
+    }
+  }
 
   render () {
     const {
@@ -376,6 +403,7 @@ export default class ConfirmTransactionBase extends Component {
 
     const { name } = methodData
     const { valid, errorKey } = this.getErrorKey()
+    const { totalTx, positionOfCurrentTx, nextTxId, prevTxId, showNavigation, firstTx, lastTx, ofText, requestsWaitingText } = this.getNavigateTxData()
 
     return (
       <ConfirmPageContainer
@@ -401,6 +429,16 @@ export default class ConfirmTransactionBase extends Component {
         errorMessage={errorMessage || submitError}
         errorKey={propsErrorKey || errorKey}
         warning={warning}
+        totalTx={totalTx}
+        positionOfCurrentTx={positionOfCurrentTx}
+        nextTxId={nextTxId}
+        prevTxId={prevTxId}
+        showNavigation={showNavigation}
+        onNextTx={(txId) => this.handleNextTx(txId)}
+        firstTx={firstTx}
+        lastTx={lastTx}
+        ofText={ofText}
+        requestsWaitingText={requestsWaitingText}
         disabled={!propsValid || !valid || submitting}
         onEdit={() => this.handleEdit()}
         onCancelAll={() => this.handleCancelAll()}
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index c366d5137..45bf62fb9 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -73,9 +73,9 @@ const mapStateToProps = (state, props) => {
 
   const currentNetworkUnapprovedTxs = R.filter(
     ({ metamaskNetworkId }) => metamaskNetworkId === network,
-    valuesFor(unapprovedTxs),
+    unapprovedTxs,
   )
-  const unapprovedTxCount = currentNetworkUnapprovedTxs.length
+  const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length
 
   return {
     balance,
@@ -104,6 +104,7 @@ const mapStateToProps = (state, props) => {
     assetImage,
     unapprovedTxs,
     unapprovedTxCount,
+    currentNetworkUnapprovedTxs,
   }
 }
 
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 2c44b6094..76782cf6a 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -32,21 +32,15 @@ export default class ConfirmTransactionSwitch extends Component {
       txData,
       methodData: { name },
       fetchingData,
-      isEtherTransaction,
     } = this.props
     const { id, txParams: { data } = {} } = txData
 
-    if (isConfirmDeployContract(txData)) {
-      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
-      return <Redirect to={{ pathname }} />
-    }
-
     if (fetchingData) {
       return <Loading />
     }
 
-    if (isEtherTransaction) {
-      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+    if (isConfirmDeployContract(txData)) {
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
       return <Redirect to={{ pathname }} />
     }