Refactor and redesign confirm transaction views

3 files changed, 77 insertions, 0 deletions

diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
new file mode 100644
index 000000000..9bc0daab9
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ethUtil from 'ethereumjs-util'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+
+export default class ConfirmDeployContract extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    txData: PropTypes.object,
+  }
+
+  renderData () {
+    const { t } = this.context
+    const {
+      txData: {
+        origin,
+        txParams: {
+          data,
+        } = {},
+      } = {},
+    } = this.props
+
+    return (
+      <div className="confirm-page-container-content__data">
+        <div className="confirm-page-container-content__data-box">
+          <div className="confirm-page-container-content__data-field">
+            <div className="confirm-page-container-content__data-field-label">
+              { `${t('origin')}:` }
+            </div>
+            <div>
+              { origin }
+            </div>
+          </div>
+          <div className="confirm-page-container-content__data-field">
+            <div className="confirm-page-container-content__data-field-label">
+              { `${t('bytes')}:` }
+            </div>
+            <div>
+              { ethUtil.toBuffer(data).length }
+            </div>
+          </div>
+        </div>
+        <div className="confirm-page-container-content__data-box-label">
+          { `${t('hexData')}:` }
+        </div>
+        <div className="confirm-page-container-content__data-box">
+          { data }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <ConfirmTransactionBase
+        action={this.context.t('contractDeployment')}
+        dataComponent={this.renderData()}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
new file mode 100644
index 000000000..336ee83ea
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import ConfirmDeployContract from './confirm-deploy-contract.component'
+
+const mapStateToProps = state => {
+  const { confirmTransaction: { txData } = {} } = state
+
+  return {
+    txData,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmDeployContract)
diff --git a/ui/app/components/pages/confirm-deploy-contract/index.js b/ui/app/components/pages/confirm-deploy-contract/index.js
new file mode 100644
index 000000000..c4fb01b52
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-deploy-contract.container'