Create add token button and template view

6 files changed, 170 insertions, 24 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 836032b3c..19f2cba59 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -277,7 +277,11 @@ AccountDetailScreen.prototype.tabSwitchView = function () {
 
   switch (currentAccountTab) {
     case 'tokens':
-      return h(TokenList, { userAddress: address, network })
+      return h(TokenList, {
+        userAddress: address,
+        network,
+        addToken: () => this.props.dispatch(actions.showAddTokenPage()),
+      })
     default:
       return this.transactionList()
   }
diff --git a/ui/app/actions.js b/ui/app/actions.js
index b6b5d6eb1..d17d4610e 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -121,7 +121,9 @@ var actions = {
   SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
   USE_ETHERSCAN_PROVIDER: 'USE_ETHERSCAN_PROVIDER',
   useEtherscanProvider: useEtherscanProvider,
-  showConfigPage: showConfigPage,
+  showConfigPage,
+  SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+  showAddTokenPage,
   setRpcTarget: setRpcTarget,
   setDefaultRpcTarget: setDefaultRpcTarget,
   setProviderType: setProviderType,
@@ -627,6 +629,13 @@ function showConfigPage (transitionForward = true) {
   }
 }
 
+function showAddTokenPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_ADD_TOKEN_PAGE,
+    value: transitionForward,
+  }
+}
+
 function goBackToInitView () {
   return {
     type: actions.BACK_TO_INIT_MENU,
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
new file mode 100644
index 000000000..5356b6a0b
--- /dev/null
+++ b/ui/app/add-token.js
@@ -0,0 +1,91 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+
+module.exports = connect(mapStateToProps)(AddTokenScreen)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(AddTokenScreen, Component)
+function AddTokenScreen () {
+  this.state = { warning: null }
+  Component.call(this)
+}
+
+AddTokenScreen.prototype.render = function () {
+  const state = this.state
+  const { warning } = state
+  return (
+    h('.flex-column.flex-grow', [
+
+      // subtitle and nav
+      h('.section-title.flex-row.flex-center', [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+          onClick: (event) => {
+            state.dispatch(actions.goHome())
+          },
+        }),
+        h('h2.page-subtitle', 'Add Token'),
+      ]),
+
+      h('.error', {
+        style: {
+          display: warning ? 'block' : 'none',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, warning),
+
+      // conf view
+      h('.flex-column.flex-justify-center.flex-grow.select-none', [
+        h('.flex-space-around', {
+          style: {
+            padding: '20px',
+          },
+        }, [
+
+          h('div', [
+            h('span', {
+              style: { fontWeight: 'bold', paddingRight: '10px'},
+            }, 'Token Sybmol'),
+          ]),
+
+          h('div', { style: {display: 'flex'} }, [
+            h('input#token_symbol', {
+              placeholder: `Like "ETH"`,
+              style: {
+                width: 'inherit',
+                flex: '1 0 auto',
+                height: '30px',
+                margin: '8px',
+              },
+              onKeyPress (event) {
+                if (event.key === 'Enter') {
+                  var element = event.target
+                  var newRpc = element.value
+                }
+              },
+            }),
+          ]),
+
+          h('button', {
+            style: {
+              alignSelf: 'center',
+            },
+            onClick (event) {
+              event.preventDefault()
+              var tokenSymbolEl = document.querySelector('input#token_symbol')
+              var tokenSymbol = tokenSymbolEl.value
+              console.log(tokenSymbol)
+            },
+          }, 'Add'),
+        ]),
+      ]),
+    ])
+  )
+}
+
diff --git a/ui/app/app.js b/ui/app/app.js
index d444a8349..8bf69b5ad 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -19,6 +19,7 @@ const NoticeScreen = require('./components/notice')
 const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
 // other views
 const ConfigScreen = require('./config')
+const AddTokenScreen = require('./add-token')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
 const Loading = require('./components/loading')
@@ -458,6 +459,10 @@ App.prototype.renderPrimary = function () {
       log.debug('rendering confirm tx screen')
       return h(ConfirmTxScreen, {key: 'confirm-tx'})
 
+    case 'add-token':
+      log.debug('rendering add-token screen from unlock screen.')
+      return h(AddTokenScreen, {key: 'add-token'})
+
     case 'config':
       log.debug('rendering config screen')
       return h(ConfigScreen, {key: 'config'})
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index c560a6072..d230ce74a 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -40,32 +40,59 @@ TokenList.prototype.render = function () {
     return h(TokenCell, tokenData)
   })
 
-  return (
+  return h('div', [
     h('ol', {
       style: {
-        height: '302px',
+        height: '260px',
         overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
       },
-    }, [h('style', `
-
-    li.token-cell {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: 10px;
-    }
-
-    li.token-cell > h3 {
-      margin-left: 12px;
-    }
-
-    li.token-cell:hover {
-      background: white;
-      cursor: pointer;
-    }
-
-    `)].concat(tokenViews.length ? tokenViews : this.message('No Tokens Found.')))
-  )
+    }, [
+      h('style', `
+
+        li.token-cell {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 10px;
+        }
+
+        li.token-cell > h3 {
+          margin-left: 12px;
+        }
+
+        li.token-cell:hover {
+          background: white;
+          cursor: pointer;
+        }
+
+      `),
+      ...tokenViews,
+      tokenViews.length ? null : this.message('No Tokens Found.'),
+    ]),
+    this.addTokenButtonElement(),
+  ])
+}
+
+TokenList.prototype.addTokenButtonElement = function () {
+  return h('div', [
+    h('div.footer.hover-white.pointer', {
+      key: 'reveal-account-bar',
+      onClick: () => {
+        this.props.addToken()
+      },
+      style: {
+        display: 'flex',
+        height: '40px',
+        padding: '10px',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    }, [
+      h('i.fa.fa-plus.fa-lg'),
+    ]),
+  ])
 }
 
 TokenList.prototype.message = function (body) {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index deacad0a7..2fcc9bfe0 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -103,7 +103,17 @@ function reduceApp (state, action) {
         transForward: action.value,
       })
 
+    case actions.SHOW_ADD_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'add-token',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
     case actions.SHOW_IMPORT_PAGE:
+
       return extend(appState, {
         currentView: {
           name: 'import-menu',