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

7 files changed, 163 insertions, 2 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