1 files changed, 69 insertions, 0 deletions
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/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/app/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