From 0e1e0aa32398b0b9d19cd6ae3fb06d577aae6cc6 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 14 Jun 2017 20:42:48 -0700 Subject: Create add token button and template view --- ui/app/components/token-list.js | 71 ++++++++++++++++++++++++++++------------- 1 file changed, 49 insertions(+), 22 deletions(-) (limited to 'ui/app/components') 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) { -- cgit v1.2.3 From 48789f2a3df2c820b61902fb49057f9f7b6cbd8c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 15 Jun 2017 16:22:53 -0700 Subject: Add ability to add tokens to token list Fiex #1616 --- ui/app/components/token-list.js | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index d230ce74a..100e596ed 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -4,13 +4,14 @@ 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 = [] for (const address in contracts) { const contract = contracts[address] if (contract.erc20) { contract.address = address - tokens.push(contract) + defaultTokens.push(contract) } } @@ -18,22 +19,23 @@ module.exports = TokenList inherits(TokenList, Component) function TokenList () { - this.state = { tokens, isLoading: true, network: null } + this.state = { + tokens: null, + isLoading: true, + network: null, + } Component.call(this) } TokenList.prototype.render = function () { const state = this.state - const { tokens, isLoading } = state - - const { userAddress } = this.props + const { isLoading, tokens } = state + const { userAddress, network } = this.props if (isLoading) { return this.message('Loading') } - const network = this.props.network - const tokenViews = tokens.map((tokenData) => { tokenData.network = network tokenData.userAddress = userAddress @@ -120,7 +122,7 @@ TokenList.prototype.createFreshTokenTracker = function () { this.tracker = new TokenTracker({ userAddress, provider: global.ethereumProvider, - tokens: tokens, + tokens: uniqueMergeTokens(defaultTokens, this.props.tokens), pollingInterval: 8000, }) @@ -149,7 +151,12 @@ TokenList.prototype.componentWillUpdate = function (nextProps) { } TokenList.prototype.updateBalances = function (tokenData) { - const heldTokens = tokenData.filter(token => token.balance !== '0' && token.string !== '0.000') + const desired = this.props.tokens.map(token => token.address) + const heldTokens = tokenData.filter(token => { + const held = token.balance !== '0' && token.string !== '0.000' + const preferred = desired.includes(normalizeAddress(token.address)) + return held || preferred + }) this.setState({ tokens: heldTokens, isLoading: false }) } @@ -158,3 +165,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 +} + -- cgit v1.2.3 From 60855b05106899149824feecbd0f5d54907b0451 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Jun 2017 16:12:34 -0700 Subject: Add send button to TokenFactory A simple solution to a temporary token send screen: Linking to EtherScan. Will hold us over until we make our own token send view. --- ui/app/components/token-cell.js | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index d3a895d36..1b226983b 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -17,12 +17,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 +27,42 @@ 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) { +function etherscanLinkFor (tokenAddress, address, network) { return `https://etherscan.io/token/${tokenAddress}?a=${address}` } +function tokenFactoryFor (tokenAddress) { + return `https://tokenfactory.surge.sh/#/token/${tokenAddress}` +} + -- cgit v1.2.3 From 97ab48ba0d5c0699b4ec0ad4bbc3d9c8805ef048 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 20 Jun 2017 08:01:00 -0700 Subject: Fix propagation --- ui/app/components/token-cell.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 1b226983b..67558ad87 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -40,7 +40,7 @@ TokenCell.prototype.render = function () { TokenCell.prototype.send = function (address, event) { event.preventDefault() - event.stopPropagation + event.stopPropagation() const url = tokenFactoryFor(address) if (url) { navigateTo(url) -- cgit v1.2.3 From 027394b2058b31daa399c582c82f0c0b01571144 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 20 Jun 2017 08:58:25 -0700 Subject: Reduce token list clutter by only showing held tokens We could change this when we allow hiding/removing tokens, but for now, this is a simple and pleasant solution. --- ui/app/components/token-list.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 100e596ed..bc41c5270 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -20,7 +20,7 @@ module.exports = TokenList inherits(TokenList, Component) function TokenList () { this.state = { - tokens: null, + tokens: [], isLoading: true, network: null, } @@ -150,12 +150,9 @@ TokenList.prototype.componentWillUpdate = function (nextProps) { } } -TokenList.prototype.updateBalances = function (tokenData) { - const desired = this.props.tokens.map(token => token.address) - const heldTokens = tokenData.filter(token => { - const held = token.balance !== '0' && token.string !== '0.000' - const preferred = desired.includes(normalizeAddress(token.address)) - return held || preferred +TokenList.prototype.updateBalances = function (tokens) { + const heldTokens = tokens.filter(token => { + return token.balance !== '0' && token.string !== '0.000' }) this.setState({ tokens: heldTokens, isLoading: false }) } -- cgit v1.2.3 From f925a37a9f79337951a0ffd8a106929b3f75d22b Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Mon, 26 Jun 2017 14:01:35 -0700 Subject: Fix react warning for keys on ens address book --- ui/app/components/ens-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') 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. -- cgit v1.2.3 From 5440ed23d621c9ebcd24f89d54701f978e1c086e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 27 Jun 2017 14:49:41 -0700 Subject: Support other network links --- ui/app/components/token-cell.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index d3a895d36..4d2cacb01 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 @@ -41,6 +42,7 @@ function navigateTo (url) { } function urlFor (tokenAddress, address, network) { - return `https://etherscan.io/token/${tokenAddress}?a=${address}` + const prefix = prefixForNetwork(network) + return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}` } -- cgit v1.2.3 From c81a3c649a53fd09fedc9c8d0a8cab49347186d6 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 28 Jun 2017 16:36:58 -0700 Subject: Add padding to token messages --- ui/app/components/token-list.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index ac7ab8309..bf352dc11 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -109,6 +109,7 @@ TokenList.prototype.message = function (body) { height: '250px', alignItems: 'center', justifyContent: 'center', + padding: '30px', }, }, body) } -- cgit v1.2.3 From 5e8b4e3226a4b084c418c7ed709d4e0f34ab24ec Mon Sep 17 00:00:00 2001 From: frankiebee Date: Thu, 29 Jun 2017 12:06:22 -0700 Subject: =?UTF-8?q?change=20=E2=80=9CACCEPT=E2=80=9D=20to=20=E2=80=9CSUBMI?= =?UTF-8?q?T=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/app/components/pending-tx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') 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, }), -- cgit v1.2.3 From 8abd592034649ee0ad47eaaa33859b99d206df1f Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 30 Jun 2017 10:21:47 -0700 Subject: Stop loading popular tokens by default Improves performance when loading the token tab. --- ui/app/components/token-list.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index bf352dc11..fed7e9f7a 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -3,10 +3,11 @@ 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 defaultTokens = [] +/* +const contracts = require('eth-contract-metadata') for (const address in contracts) { const contract = contracts[address] if (contract.erc20) { @@ -14,6 +15,7 @@ for (const address in contracts) { defaultTokens.push(contract) } } +*/ module.exports = TokenList -- cgit v1.2.3 From 0c011d0fda7268abfacf29715d73d347e9e8e676 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 30 Jun 2017 10:28:27 -0700 Subject: Remove send button Some token precisions are not respected by TokenFactory, so it's not sufficient for a default send form. Removing for now. --- ui/app/components/token-cell.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/components') diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 48f46934a..19d7139bb 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -31,9 +31,11 @@ TokenCell.prototype.render = function () { h('span', { style: { flex: '1 0 auto' } }), + /* h('button', { onClick: this.send.bind(this, address), }, 'SEND'), + */ ]) ) -- cgit v1.2.3 From 4e4d6cea403373e7f7d493775981cfa2a97da5f4 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 3 Jul 2017 15:06:26 -0700 Subject: Add menu carrat next to network searching indicator --- ui/app/components/network.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'ui/app/components') 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' -- cgit v1.2.3 From 52a6b9f103fecfd92f860188daf15e1fa943ab5f Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 5 Jul 2017 10:30:48 -0700 Subject: Reenable Default Token List Looks pretty clear to me now that the heavy traffic spike was not this feature, but was the EOS crowdsale. Now that we've mitigated their traffic spike, I think we can safely re-introduce this feature. --- ui/app/components/token-list.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index fed7e9f7a..20cfa897e 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -6,7 +6,6 @@ const TokenCell = require('./token-cell.js') const normalizeAddress = require('eth-sig-util').normalize const defaultTokens = [] -/* const contracts = require('eth-contract-metadata') for (const address in contracts) { const contract = contracts[address] @@ -15,7 +14,6 @@ for (const address in contracts) { defaultTokens.push(contract) } } -*/ module.exports = TokenList -- cgit v1.2.3