Add "Add Token" button to side bar

2 files changed, 18 insertions, 0 deletions

diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 06123fd0e..580ac54aa 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -36,6 +36,7 @@ function mapDispatchToProps (dispatch) {
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
+    showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
   }
 }
 
@@ -84,6 +85,7 @@ WalletView.prototype.render = function () {
     keyrings,
     showAccountDetailModal,
     hideSidebar,
+    showAddTokenPage,
   } = this.props
   // temporary logs + fake extra wallets
   // console.log('walletview, selectedAccount:', selectedAccount)
@@ -145,6 +147,9 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
+    h('button.wallet-view__add-token-button', {
+      onClick: showAddTokenPage,
+    }, 'Add Token'),
   ])
 }
 
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index f86decab3..a78279084 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -107,6 +107,19 @@ $wallet-view-bg: $wild-sand;
       }
     }
   }
+
+  &__add-token-button {
+    color: $dusty-gray;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    margin: 36px auto 0;
+    border: 1px solid $dusty-gray;
+    border-radius: 2px;
+    font-weight: 300;
+    background: none;
+    padding: 9px 30px;
+  }
 }
 
 @media screen and (min-width: 576px) {