Refactor and redesign confirm transaction views

5 files changed, 98 insertions, 0 deletions

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
new file mode 100644
index 000000000..5f337ab61
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Redirect } from 'react-router-dom'
+import R from 'ramda'
+import Loading from '../../loading-screen'
+import {
+  CONFIRM_DEPLOY_CONTRACT_ROUTE,
+  CONFIRM_SEND_ETHER_ROUTE,
+  CONFIRM_SEND_TOKEN_ROUTE,
+  CONFIRM_APPROVE_ROUTE,
+  CONFIRM_TOKEN_METHOD_ROUTE,
+  SIGNATURE_REQUEST_ROUTE,
+} from '../../../routes'
+import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
+import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
+
+export default class ConfirmTransactionSwitch extends Component {
+  static propTypes = {
+    unconfirmedTransactions: PropTypes.array,
+    match: PropTypes.object,
+  }
+
+  getTransaction () {
+    const { unconfirmedTransactions, match } = this.props
+    const { params: { id: paramsTransactionId } = {} } = match
+
+    return paramsTransactionId
+      ? R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
+      : unconfirmedTransactions[0]
+  }
+
+  redirectToTransaction (txData) {
+    const { id, txParams: { data } } = txData
+
+    if (isConfirmDeployContract(txData)) {
+      return <Redirect to={{ pathname: `${CONFIRM_DEPLOY_CONTRACT_ROUTE}/${id}` }} />
+    }
+
+    if (data) {
+      const tokenData = getTokenData(data)
+      const { name: tokenMethodName } = tokenData || {}
+
+      switch (tokenMethodName) {
+        case TOKEN_METHOD_TRANSFER:
+          return <Redirect to={{ pathname: `${CONFIRM_SEND_TOKEN_ROUTE}/${id}` }} />
+        case TOKEN_METHOD_APPROVE:
+          return <Redirect to={{ pathname: `${CONFIRM_APPROVE_ROUTE}/${id}` }} />
+        default:
+          return <Redirect to={{ pathname: `${CONFIRM_TOKEN_METHOD_ROUTE}/${id}` }} />
+      }
+    }
+
+    return <Redirect to={{ pathname: `${CONFIRM_SEND_ETHER_ROUTE}/${id}` }} />
+  }
+
+  render () {
+    const txData = this.getTransaction()
+
+    if (!txData) {
+      return <Loading />
+    }
+
+    if (txData.txParams) {
+      return this.redirectToTransaction(txData)
+    } else if (txData.msgParams) {
+      return <Redirect to={{ pathname: SIGNATURE_REQUEST_ROUTE }} />
+    }
+
+    return <Loading />
+  }
+}
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
new file mode 100644
index 000000000..622d2a37a
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
@@ -0,0 +1,2 @@
+export const TOKEN_METHOD_TRANSFER = 'transfer'
+export const TOKEN_METHOD_APPROVE = 'approve'
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
new file mode 100644
index 000000000..cb6008acb
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import ConfirmTransactionSwitch from './confirm-transaction-switch.component'
+import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  return {
+    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmTransactionSwitch)
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
new file mode 100644
index 000000000..dd1dec6ae
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
@@ -0,0 +1,12 @@
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
+abiDecoder.addABI(abi)
+
+export function isConfirmDeployContract (txData = {}) {
+  const { txParams = {} } = txData
+  return !txParams.to
+}
+
+export function getTokenData (data = {}) {
+  return abiDecoder.decodeMethod(data)
+}
diff --git a/ui/app/components/pages/confirm-transaction-switch/index.js b/ui/app/components/pages/confirm-transaction-switch/index.js
new file mode 100644
index 000000000..c288acb1a
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/index.js
@@ -0,0 +1,2 @@
+import ConfirmTransactionSwitch from './confirm-transaction-switch.container'
+module.exports = ConfirmTransactionSwitch