Refactor and redesign confirm transaction views

4 files changed, 136 insertions, 0 deletions

diff --git a/ui/app/components/network-display/index.js b/ui/app/components/network-display/index.js
new file mode 100644
index 000000000..f6878ae5b
--- /dev/null
+++ b/ui/app/components/network-display/index.js
@@ -0,0 +1,2 @@
+import NetworkDisplay from './network-display.container'
+module.exports = NetworkDisplay
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/network-display/index.scss
new file mode 100644
index 000000000..3bce81aaa
--- /dev/null
+++ b/ui/app/components/network-display/index.scss
@@ -0,0 +1,54 @@
+.network-display {
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: lighten(rgb(125, 128, 130), 45%);
+    padding: 0 10px;
+    border-radius: 4px;
+    height: 25px;
+
+    &--mainnet {
+      background-color: lighten($blue-lagoon, 45%);
+    }
+
+    &--ropsten {
+      background-color: lighten($crimson, 45%);
+    }
+
+    &--kovan {
+      background-color: lighten($purple, 45%);
+    }
+
+    &--rinkeby {
+      background-color: lighten($tulip-tree, 45%);
+    }
+  }
+
+  &__name {
+    font-size: .875rem;
+    padding-left: 5px;
+  }
+
+  &__icon {
+    height: 10px;
+    width: 10px;
+    border-radius: 10px;
+
+    &--mainnet {
+      background-color: $blue-lagoon;
+    }
+
+    &--ropsten {
+      background-color: $crimson;
+    }
+
+    &--kovan {
+      background-color: $purple;
+    }
+
+    &--rinkeby {
+      background-color: $tulip-tree;
+    }
+  }
+}
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
new file mode 100644
index 000000000..38626af20
--- /dev/null
+++ b/ui/app/components/network-display/network-display.component.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import {
+  MAINNET_CODE,
+  ROPSTEN_CODE,
+  RINKEYBY_CODE,
+  KOVAN_CODE,
+} from '../../../../app/scripts/controllers/network/enums'
+
+const networkToClassHash = {
+  [MAINNET_CODE]: 'mainnet',
+  [ROPSTEN_CODE]: 'ropsten',
+  [RINKEYBY_CODE]: 'rinkeby',
+  [KOVAN_CODE]: 'kovan',
+}
+
+export default class NetworkDisplay extends Component {
+  static propTypes = {
+    network: PropTypes.string,
+    provider: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  renderNetworkIcon () {
+    const { network } = this.props
+    const networkClass = networkToClassHash[network]
+
+    return networkClass
+      ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
+      : <div
+          className="i fa fa-question-circle fa-med"
+          style={{
+            margin: '0 4px',
+            color: 'rgb(125, 128, 130)',
+          }}
+        />
+  }
+
+  render () {
+    const { network, provider: { type } } = this.props
+    const networkClass = networkToClassHash[network]
+
+    return (
+      <div className={classnames(
+        'network-display__container',
+        networkClass && ('network-display__container--' + networkClass)
+      )}>
+        {
+          networkClass
+            ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
+            : <div
+                className="i fa fa-question-circle fa-med"
+                style={{
+                  margin: '0 4px',
+                  color: 'rgb(125, 128, 130)',
+                }}
+              />
+        }
+        <div className="network-display__name">
+          { this.context.t(type) }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/network-display/network-display.container.js b/ui/app/components/network-display/network-display.container.js
new file mode 100644
index 000000000..99a14fff4
--- /dev/null
+++ b/ui/app/components/network-display/network-display.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import NetworkDisplay from './network-display.component'
+
+const mapStateToProps = ({ metamask: { network, provider } }) => {
+  return {
+    network,
+    provider,
+  }
+}
+
+export default connect(mapStateToProps)(NetworkDisplay)