Add containers for wallet view and dropdown UI

2 files changed, 84 insertions, 3 deletions

diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
new file mode 100644
index 000000000..fed227d6b
--- /dev/null
+++ b/ui/app/components/wallet-view.js
@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('./identicon')
+const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
+
+module.exports = connect(mapStateToProps)(WalletView)
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+  }
+}
+
+
+inherits(WalletView, Component)
+function WalletView () {
+  Component.call(this)
+}
+
+const noop = () => {}
+
+WalletView.prototype.render = function () {
+  const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684'
+  const { network } = this.props
+
+  return h('div.wallet-view.flex-column', {
+    style: {
+      flexGrow: 1,
+      height: '82vh',
+      background: '#FAFAFA',
+    }
+  }, [
+
+    h('div.flex-row.flex-center', {
+      style: {
+        // marginLeft: '5px',
+        // marginRight: '5px',
+        // marginTop: '10px',
+        // alignItems: 'center',
+      }
+    }, [
+
+      h('.identicon-wrapper.select-none', [
+        h(Identicon, {
+          diameter: 24,
+          address: selected,
+        }),
+      ]),
+
+      h('span', {
+        style: {
+          fontSize: '1.5em',
+          marginLeft: '5px',
+        }
+      }, [
+        'Account 1'
+      ]),
+
+      h(
+        AccountDropdowns,
+        {
+          style: {
+            marginRight: '8px',
+            marginLeft: 'auto',
+            cursor: 'pointer',
+          },
+          selected,
+          network,
+          identities: {},
+        },
+      ),
+
+    ])
+
+    // wallet display 1
+    // token display 1
+
+  ])
+}
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index ca68ba6b0..c1f7db0d8 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const WalletView = require('./components/wallet-view')
 
 module.exports = MainContainer
 
@@ -19,11 +20,10 @@ MainContainer.prototype.render = function () {
       zIndex: 20,
     }
   }, [
-    h('div.wallet-view', {
+    h(WalletView, {
       style: {
         flexGrow: 1,
         height: '82vh',
-        background: 'blue',
       }
     }, [
     ]),
@@ -32,7 +32,7 @@ MainContainer.prototype.render = function () {
       style: {
         flexGrow: 2,
         height: '82vh',
-        background: 'green',
+        background: '#FFFFFF',
       }
     }, [
     ]),