From a63373401b9983b991d4b2a0e28eec8d66c18e78 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 23 Oct 2017 23:59:21 -0700
Subject: New Sidebar uplift

---
 ui/app/components/account-menu/index.js |  1 -
 ui/app/components/wallet-view.js        | 92 +++++++++++++--------------------
 2 files changed, 36 insertions(+), 57 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 32e7bc466..45e39e8ba 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -103,7 +103,6 @@ AccountMenu.prototype.renderAccounts = function () {
     showAccountDetail,
   } = this.props
 
-  console.log({ accounts })
   return Object.keys(identities).map((key, index) => {
     const identity = identities[key]
     const isSelected = identity.address === selected
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index a870a24e3..06123fd0e 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -3,7 +3,8 @@ 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 AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
@@ -19,6 +20,7 @@ function mapStateToProps (state) {
     identities: state.metamask.identities,
     accounts: state.metamask.accounts,
     tokens: state.metamask.tokens,
+    keyrings: state.metamask.keyrings,
     selectedAddress: selectors.getSelectedAddress(state),
     selectedIdentity: selectors.getSelectedIdentity(state),
     selectedAccount: selectors.getSelectedAccount(state),
@@ -28,9 +30,12 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    showSendPage: () => { dispatch(actions.showSendPage()) },
-    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    showSendPage: () => dispatch(actions.showSendPage()),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
     unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
   }
 }
 
@@ -47,7 +52,7 @@ WalletView.prototype.renderWalletBalance = function () {
     hideSidebar,
     sidebarOpen,
   } = this.props
-  console.log({ selectedAccount })
+
   const selectedClass = selectedTokenAddress
     ? ''
     : 'wallet-balance-wrapper--active'
@@ -73,13 +78,24 @@ WalletView.prototype.renderWalletBalance = function () {
 
 WalletView.prototype.render = function () {
   const {
-    network, responsiveDisplayClassname, identities,
-    selectedAddress, accounts,
+    responsiveDisplayClassname,
+    selectedAddress,
     selectedIdentity,
+    keyrings,
+    showAccountDetailModal,
+    hideSidebar,
   } = this.props
   // temporary logs + fake extra wallets
   // console.log('walletview, selectedAccount:', selectedAccount)
 
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(selectedAddress) ||
+      kr.accounts.includes(selectedIdentity.address)
+  })
+
+  const type = keyring.type
+  const isLoose = type !== 'HD Key Tree'
+
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},
   }, [
@@ -88,57 +104,15 @@ WalletView.prototype.render = function () {
     h('div.flex-column.wallet-view-account-details', {
       style: {},
     }, [
+      h('div.wallet-view__sidebar-close', {
+        onClick: hideSidebar,
+      }),
 
-      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.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''),
 
       h('div.flex-column.flex-center', {
+        style: { margin: '0 auto' },
       }, [
-        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,
@@ -149,14 +123,20 @@ WalletView.prototype.render = function () {
         }, [
           selectedIdentity.name,
         ]),
-
       ]),
     ]),
 
+    h('button.wallet-view__details-button', { onClick: showAccountDetailModal }, 'DETAILS'),
+
+    h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [
+      `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+      h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+    ]),
+
     // 'Wallet' - Title
     // Not visible on mobile
-    h('div.flex-column.wallet-view-title-wrapper', {}, [
-      h('span.wallet-view-title', {}, [
+    h('div.flex-column.wallet-view-title-wrapper', [
+      h('span.wallet-view-title', [
         'Wallet',
       ]),
     ]),
-- 
cgit v1.2.3