metamask-extension/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Switch, Route } from 'react-router-dom'
import R from 'ramda'
import Loading from '../../loading-screen'
import ConfirmTransactionSwitch from '../confirm-transaction-switch'
import ConfirmTransactionBase from '../confirm-transaction-base'
import ConfirmSendEther from '../confirm-send-ether'
import ConfirmSendToken from '../confirm-send-token'
import ConfirmDeployContract from '../confirm-deploy-contract'
import ConfirmApprove from '../confirm-approve'
import ConfTx from '../../../conf-tx'
import {
  DEFAULT_ROUTE,
  CONFIRM_TRANSACTION_ROUTE,
  CONFIRM_DEPLOY_CONTRACT_PATH,
  CONFIRM_SEND_ETHER_PATH,
  CONFIRM_SEND_TOKEN_PATH,
  CONFIRM_APPROVE_PATH,
  CONFIRM_TOKEN_METHOD_PATH,
  SIGNATURE_REQUEST_PATH,
} from '../../../routes'

export default class ConfirmTransaction extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    totalUnapprovedCount: PropTypes.number.isRequired,
    match: PropTypes.object,
    send: PropTypes.object,
    unconfirmedTransactions: PropTypes.array,
    setTransactionToConfirm: PropTypes.func,
    confirmTransaction: PropTypes.object,
  }

  componentDidMount () {
    const {
      totalUnapprovedCount = 0,
      send = {},
      history,
      confirmTransaction: { txData: { id: transactionId } = {} },
    } = this.props

    if (!totalUnapprovedCount && !send.to) {
      history.replace(DEFAULT_ROUTE)
      return
    }

    if (!transactionId) {
      this.setTransactionToConfirm()
    }
  }

  componentDidUpdate () {
    const {
      match: { params: { id: paramsTransactionId } = {} },
      setTransactionToConfirm,
      confirmTransaction: { txData: { id: transactionId } = {} },
    } = this.props

    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
      setTransactionToConfirm(paramsTransactionId)
    }

    if (!paramsTransactionId) {
      this.setTransactionToConfirm()
    }
  }

  setTransactionToConfirm () {
    const {
      history,
      unconfirmedTransactions,
      match: { params: { id: paramsTransactionId } = {} },
      setTransactionToConfirm,
    } = this.props

    if (paramsTransactionId) {
      // Check to make sure params ID is valid
      const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)

      if (!tx) {
        history.replace(DEFAULT_ROUTE)
      } else {
        setTransactionToConfirm(paramsTransactionId)
      }
    } else if (unconfirmedTransactions.length) {
      const transactionId = unconfirmedTransactions[0].id
      setTransactionToConfirm(transactionId)
    }
  }

  render () {
    const { confirmTransaction: { txData: { id } } = {} } = this.props

    return id
      ? (
        <Switch>
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_DEPLOY_CONTRACT_PATH}`}
            component={ConfirmDeployContract}
          />
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
            component={ConfirmTransactionBase}
          />
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_ETHER_PATH}`}
            component={ConfirmSendEther}
          />
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_TOKEN_PATH}`}
            component={ConfirmSendToken}
          />
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
            component={ConfirmApprove}
          />
          <Route
            exact
            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
            component={ConfTx}
          />
          <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
        </Switch>
      )
      : <Loading />
  }
}