5 files changed, 129 insertions, 49 deletions

diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 16c50db84..3a33ebf74 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -41,7 +41,6 @@ EnsInput.prototype.render = function () {
       this.checkName()
     },
   })
-
   return h('div', {
     style: { width: '100%' },
   }, [
@@ -55,6 +54,7 @@ EnsInput.prototype.render = function () {
           return h('option', {
             value: identity.address,
             label: identity.name,
+            key: identity.address,
           })
         }),
         // Corresponds to previously sent-to addresses.
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 31a8fc17c..d5d3e18cd 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -22,15 +22,24 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('img.network-indicator', {
-      title: 'Attempting to connect to blockchain.',
-      onClick: (event) => this.props.onClick(event),
+    return h('span', {
       style: {
-        width: '27px',
-        marginRight: '-27px',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
       },
-      src: 'images/loading.svg',
-    })
+      onClick: (event) => this.props.onClick(event),
+    }, [
+      h('img', {
+        title: 'Attempting to connect to blockchain.',
+        style: {
+          width: '27px',
+        },
+        src: 'images/loading.svg',
+      }),
+      h('i.fa.fa-sort-desc'),
+    ])
+
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index f33a5d948..d7d602f31 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -315,7 +315,7 @@ PendingTx.prototype.render = function () {
           // Accept Button
           h('input.confirm.btn-green', {
             type: 'submit',
-            value: 'ACCEPT',
+            value: 'SUBMIT',
             style: { marginLeft: '10px' },
             disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
           }),
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index d3a895d36..19d7139bb 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('./identicon')
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 
 module.exports = TokenCell
 
@@ -17,12 +18,7 @@ TokenCell.prototype.render = function () {
   return (
     h('li.token-cell', {
       style: { cursor: network === '1' ? 'pointer' : 'default' },
-      onClick: (event) => {
-        const url = urlFor(address, userAddress, network)
-        if (url) {
-          navigateTo(url)
-        }
-      },
+      onClick: this.view.bind(this, address, userAddress, network),
     }, [
 
       h(Identicon, {
@@ -32,15 +28,45 @@ TokenCell.prototype.render = function () {
       }),
 
       h('h3', `${string || 0} ${symbol}`),
+
+      h('span', { style: { flex: '1 0 auto' } }),
+
+      /*
+      h('button', {
+        onClick: this.send.bind(this, address),
+      }, 'SEND'),
+      */
+
     ])
   )
 }
 
+TokenCell.prototype.send = function (address, event) {
+  event.preventDefault()
+  event.stopPropagation()
+  const url = tokenFactoryFor(address)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+TokenCell.prototype.view = function (address, userAddress, network, event) {
+  const url = etherscanLinkFor(address, userAddress, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
 function navigateTo (url) {
   global.platform.openWindow({ url })
 }
 
-function urlFor (tokenAddress, address, network) {
-  return `https://etherscan.io/token/${tokenAddress}?a=${address}`
+function etherscanLinkFor (tokenAddress, address, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
+}
+
+function tokenFactoryFor (tokenAddress) {
+  return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
 }
 
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 633d3ccfe..20cfa897e 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -3,14 +3,15 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
-const contracts = require('eth-contract-metadata')
+const normalizeAddress = require('eth-sig-util').normalize
 
-const tokens = []
+const defaultTokens = []
+const contracts = require('eth-contract-metadata')
 for (const address in contracts) {
   const contract = contracts[address]
   if (contract.erc20) {
     contract.address = address
-    tokens.push(contract)
+    defaultTokens.push(contract)
   }
 }
 
@@ -18,15 +19,18 @@ module.exports = TokenList
 
 inherits(TokenList, Component)
 function TokenList () {
-  this.state = { tokens, isLoading: true, network: null }
+  this.state = {
+    tokens: [],
+    isLoading: true,
+    network: null,
+  }
   Component.call(this)
 }
 
 TokenList.prototype.render = function () {
   const state = this.state
   const { tokens, isLoading, error } = state
-
-  const { userAddress } = this.props
+  const { userAddress, network } = this.props
 
   if (isLoading) {
     return this.message('Loading')
@@ -37,40 +41,65 @@ TokenList.prototype.render = function () {
     return this.message('There was a problem loading your token balances.')
   }
 
-  const network = this.props.network
-
   const tokenViews = tokens.map((tokenData) => {
     tokenData.network = network
     tokenData.userAddress = userAddress
     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;
-    }
+    }, [
+      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(),
+  ])
+}
 
-    `)].concat(tokenViews.length ? tokenViews : this.message('No Tokens Found.')))
-  )
+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) {
@@ -80,6 +109,7 @@ TokenList.prototype.message = function (body) {
       height: '250px',
       alignItems: 'center',
       justifyContent: 'center',
+      padding: '30px',
     },
   }, body)
 }
@@ -101,7 +131,7 @@ TokenList.prototype.createFreshTokenTracker = function () {
   this.tracker = new TokenTracker({
     userAddress,
     provider: global.ethereumProvider,
-    tokens: tokens,
+    tokens: uniqueMergeTokens(defaultTokens, this.props.tokens),
     pollingInterval: 8000,
   })
 
@@ -135,8 +165,10 @@ TokenList.prototype.componentWillUpdate = function (nextProps) {
   }
 }
 
-TokenList.prototype.updateBalances = function (tokenData) {
-  const heldTokens = tokenData.filter(token => token.balance !== '0' && token.string !== '0.000')
+TokenList.prototype.updateBalances = function (tokens) {
+  const heldTokens = tokens.filter(token => {
+    return token.balance !== '0' && token.string !== '0.000'
+  })
   this.setState({ tokens: heldTokens, isLoading: false })
 }
 
@@ -145,3 +177,16 @@ TokenList.prototype.componentWillUnmount = function () {
   this.tracker.stop()
 }
 
+function uniqueMergeTokens (tokensA, tokensB) {
+  const uniqueAddresses = []
+  const result = []
+  tokensA.concat(tokensB).forEach((token) => {
+    const normal = normalizeAddress(token.address)
+    if (!uniqueAddresses.includes(normal)) {
+      uniqueAddresses.push(normal)
+      result.push(token)
+    }
+  })
+  return result
+}
+