1 files changed, 179 insertions, 0 deletions
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
new file mode 100644
index 000000000..f06c4d512
--- /dev/null
+++ b/ui/app/components/wallet-view.js
@@ -0,0 +1,179 @@
+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('./dropdowns/index.js').AccountDropdowns
+const actions = require('../actions')
+const BalanceComponent = require('./balance-component')
+const TokenList = require('./token-list')
+const selectors = require('../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
+
+function mapStateToProps (state) {
+
+  return {
+    network: state.metamask.network,
+    sidebarOpen: state.appState.sidebarOpen,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    tokens: state.metamask.tokens,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+    selectedAccount: selectors.getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSendPage: () => { dispatch(actions.showSendPage()) },
+    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
+  }
+}
+
+inherits(WalletView, Component)
+function WalletView () {
+  Component.call(this)
+}
+
+WalletView.prototype.renderWalletBalance = function () {
+  const {
+    selectedTokenAddress,
+    selectedAccount,
+    unsetSelectedToken,
+    hideSidebar,
+    sidebarOpen,
+  } = this.props
+
+  const selectedClass = selectedTokenAddress
+    ? ''
+    : 'wallet-balance-wrapper--active'
+  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
+
+  return h('div', { className }, [
+    h('div.wallet-balance',
+      {
+        onClick: () => {
+          unsetSelectedToken()
+          selectedTokenAddress && sidebarOpen && hideSidebar()
+        },
+      },
+      [
+        h(BalanceComponent, {
+          balanceValue: selectedAccount.balance,
+          style: {},
+        }),
+      ]
+    ),
+  ])
+}
+
+WalletView.prototype.render = function () {
+  const {
+    network, responsiveDisplayClassname, identities,
+    selectedAddress, accounts,
+    selectedIdentity,
+  } = this.props
+  // temporary logs + fake extra wallets
+  // console.log('walletview, selectedAccount:', selectedAccount)
+
+  return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+    style: {},
+  }, [
+
+    // TODO: Separate component: wallet account details
+    h('div.flex-column.wallet-view-account-details', {
+      style: {},
+    }, [
+
+      h('div.flex-row.account-options-menu', {
+        style: {
+          position: 'relative',
+        },
+      }, [
+
+        h(AccountDropdowns, {
+          selected: selectedAddress,
+          network,
+          identities,
+          useCssTransition: true,
+          enableAccountOptions: true,
+          dropdownWrapperStyle: {
+            padding: '1px 15px',
+            marginLeft: '-25px',
+            position: 'absolute',
+            width: '122%', // TODO, refactor all of this component out into media queries
+          },
+          menuItemStyles: {
+            padding: '0px 0px',
+            margin: '22px 0px',
+          },
+        }, []),
+
+      ]),
+
+      h('div.flex-column.flex-center', {
+      }, [
+        h('div', {
+          style: {
+            position: 'relative',
+          },
+        }, [
+          h(AccountDropdowns, {
+            accounts,
+            style: {
+              position: 'absolute',
+              left: 'calc(50% + 28px + 5.5px)',
+              top: '14px',
+            },
+            innerStyle: {
+              padding: '10px 16px',
+            },
+            useCssTransition: true,
+            selected: selectedAddress,
+            network,
+            identities,
+          }, []),
+        ]),
+
+        h(Identicon, {
+          diameter: 54,
+          address: selectedAddress,
+        }),
+
+        h('span.account-name', {
+          style: {},
+        }, [
+          selectedIdentity.name,
+        ]),
+
+      ]),
+    ]),
+
+    // 'Wallet' - Title
+    // Not visible on mobile
+    h('div.flex-column.wallet-view-title-wrapper', {}, [
+      h('span.wallet-view-title', {}, [
+        'Wallet',
+      ]),
+    ]),
+
+    this.renderWalletBalance(),
+
+    h(TokenList),
+
+  ])
+}
+
+// TODO: Extra wallets, for dev testing. Remove when PRing to master.
+// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
+//     h('div.wallet-balance', {}, [
+//       h(BalanceComponent, {
+//         balanceValue: selectedAccount.balance,
+//         style: {},
+//       }),
+//     ]),
+// ])