Refactor and redesign confirm transaction views

12 files changed, 360 insertions, 0 deletions

diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
new file mode 100644
index 000000000..7c7550170
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { Tabs, Tab } from '../../tabs'
+import {
+  ConfirmPageContainerSummary,
+  ConfirmPageContainerError,
+  ConfirmPageContainerWarning,
+} from './'
+
+export default class ConfirmPageContainerContent extends Component {
+  static propTypes = {
+    action: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    titleComponent: PropTypes.func,
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideSubtitle: PropTypes.bool,
+    errorMessage: PropTypes.string,
+    summaryComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    dataComponent: PropTypes.node,
+    identiconAddress: PropTypes.string,
+    nonce: PropTypes.string,
+    warning: PropTypes.string,
+  }
+
+  renderContent () {
+    const { detailsComponent, dataComponent } = this.props
+
+    if (detailsComponent && dataComponent) {
+      return this.renderTabs()
+    } else {
+      return detailsComponent || dataComponent
+    }
+  }
+
+  renderTabs () {
+    const { detailsComponent, dataComponent } = this.props
+
+    return (
+      <Tabs>
+        <Tab name="Details">
+          { detailsComponent }
+        </Tab>
+        <Tab name="Data">
+          { dataComponent }
+        </Tab>
+      </Tabs>
+    )
+  }
+
+  render () {
+    const {
+      action,
+      title,
+      subtitle,
+      hideSubtitle,
+      errorMessage,
+      identiconAddress,
+      nonce,
+      summaryComponent,
+      detailsComponent,
+      dataComponent,
+      warning,
+    } = this.props
+
+    return (
+      <div className="confirm-page-container-content">
+        {
+          warning && (
+            <ConfirmPageContainerWarning warning={warning} />
+          )
+        }
+        {
+          summaryComponent || (
+            <ConfirmPageContainerSummary
+              className={classnames({
+                'confirm-page-container-summary--border': !detailsComponent || !dataComponent,
+              })}
+              action={action}
+              title={title}
+              subtitle={subtitle}
+              hideSubtitle={hideSubtitle}
+              identiconAddress={identiconAddress}
+              nonce={nonce}
+            />
+          )
+        }
+        { this.renderContent() }
+        {
+          errorMessage && (
+            <div className="confirm-page-container-content__error-container">
+              <ConfirmPageContainerError error={errorMessage} />
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
new file mode 100644
index 000000000..dc5b9b935
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ConfirmPageContainerError = props => {
+  return (
+    <div className="confirm-page-container-error">
+      <img
+        src="/images/alert-red.svg"
+        className="confirm-page-container-error__icon"
+      />
+      { `ALERT: ${props.error}` }
+    </div>
+  )
+}
+
+ConfirmPageContainerError.propTypes = {
+  error: PropTypes.string,
+}
+
+export default ConfirmPageContainerError
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
new file mode 100644
index 000000000..4ac95d0e3
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-page-container-error.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
new file mode 100644
index 000000000..e99b0f631
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
@@ -0,0 +1,17 @@
+.confirm-page-container-error {
+  height: 32px;
+  border: 1px solid $monzo;
+  color: $monzo;
+  background: lighten($monzo, 56%);
+  border-radius: 4px;
+  font-size: .75rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 16px;
+
+  &__icon {
+    margin-right: 8px;
+    flex: 0 0 auto;
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
new file mode 100644
index 000000000..3b1ee62c5
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../../identicon'
+
+const ConfirmPageContainerSummary = props => {
+  const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce } = props
+
+  return (
+    <div className={classnames('confirm-page-container-summary', className)}>
+      <div className="confirm-page-container-summary__action-row">
+        <div className="confirm-page-container-summary__action">
+          { action }
+        </div>
+        {
+          nonce && (
+            <div className="confirm-page-container-summary__nonce">
+              { `#${nonce}` }
+            </div>
+          )
+        }
+      </div>
+      <div className="confirm-page-container-summary__title">
+        {
+          identiconAddress && (
+            <Identicon
+              className="confirm-page-container-summary__identicon"
+              diameter={36}
+              address={identiconAddress}
+            />
+          )
+        }
+        <div className="confirm-page-container-summary__title-text">
+          { title }
+        </div>
+      </div>
+      {
+        hideSubtitle || <div className="confirm-page-container-summary__subtitle">
+          { subtitle }
+        </div>
+      }
+    </div>
+  )
+}
+
+ConfirmPageContainerSummary.propTypes = {
+  action: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hideSubtitle: PropTypes.bool,
+  className: PropTypes.string,
+  identiconAddress: PropTypes.string,
+  nonce: PropTypes.string,
+}
+
+export default ConfirmPageContainerSummary
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js
new file mode 100644
index 000000000..ed1b28cf2
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-page-container-summary.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
new file mode 100644
index 000000000..7f0f5d37a
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/index.scss
@@ -0,0 +1,54 @@
+.confirm-page-container-summary {
+  padding: 16px 24px 0;
+  background-color: #f9fafa;
+  height: 133px;
+  box-sizing: border-box;
+
+  &__action-row {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__action {
+    text-transform: uppercase;
+    color: $oslo-gray;
+    font-size: .75rem;
+    padding: 3px 8px;
+    border: 1px solid $oslo-gray;
+    border-radius: 4px;
+    display: inline-block;
+  }
+
+  &__nonce {
+    color: $oslo-gray;
+  }
+
+  &__title {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__identicon {
+    flex: 0 0 auto;
+    margin-right: 8px;
+  }
+
+  &__title-text {
+    font-size: 2.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__subtitle {
+    color: $oslo-gray;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &--border {
+    border-bottom: 1px solid $geyser;
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
new file mode 100644
index 000000000..79901c8fc
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ConfirmPageContainerWarning = props => {
+  return (
+    <div className="confirm-page-container-warning">
+      <img
+        className="confirm-page-container-warning__icon"
+        src="/images/alert.svg"
+      />
+      <div className="confirm-page-container-warning__warning">
+        { props.warning }
+      </div>
+    </div>
+  )
+}
+
+ConfirmPageContainerWarning.propTypes = {
+  warning: PropTypes.string,
+}
+
+export default ConfirmPageContainerWarning
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js
new file mode 100644
index 000000000..6e48bd144
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-page-container-warning.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
new file mode 100644
index 000000000..189a5c5c6
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
@@ -0,0 +1,18 @@
+.confirm-page-container-warning {
+  background-color: #fffcdb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid $geyser;
+  padding: 12px 24px;
+
+  &__icon {
+    flex: 0 0 auto;
+    margin-right: 16px;
+  }
+
+  &__warning {
+    font-size: .75rem;
+    color: $oslo-gray;
+  }
+}
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
new file mode 100644
index 000000000..1469dd438
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
@@ -0,0 +1,4 @@
+export { default } from './confirm-page-container-content.component'
+export { default as ConfirmPageContainerSummary } from './confirm-page-container-summary'
+export { default as ConfirmPageContainerError } from './confirm-page-container-error'
+export { default as ConfirmPageContainerWarning } from './confirm-page-container-warning'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
new file mode 100644
index 000000000..39797a43f
--- /dev/null
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
@@ -0,0 +1,66 @@
+@import './confirm-page-container-error/index';
+
+@import './confirm-page-container-warning/index';
+
+@import './confirm-page-container-summary/index';
+
+.confirm-page-container-content {
+  overflow-y: auto;
+  flex: 1;
+
+  &__error-container {
+    padding: 0 16px 16px 16px;
+  }
+
+  &__details {
+    box-sizing: border-box;
+    padding: 0 24px;
+  }
+
+  &__data {
+   padding: 16px;
+   color: $oslo-gray;
+  }
+
+  &__data-box {
+    background-color: #f9fafa;
+    padding: 12px;
+    font-size: .75rem;
+    margin-bottom: 16px;
+    word-wrap: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+
+    &-label {
+      text-transform: uppercase;
+      padding: 8px 0 12px;
+      font-size: 12px;
+    }
+  }
+
+  &__data-field {
+    display: flex;
+    flex-direction: row;
+
+    &-label {
+      font-weight: 500;
+      padding-right: 16px;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
+  }
+
+  &__gas-fee {
+    border-bottom: 1px solid $geyser;
+  }
+
+  &__function-type {
+    font-size: .875rem;
+    font-weight: 500;
+    text-transform: capitalize;
+    color: $black;
+    padding-left: 5px;
+  }
+}