New Sidebar uplift

1 files changed, 36 insertions, 56 deletions

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',
       ]),
     ]),