metamask-extension/ui/app/components/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js

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