From 06b2a04a4259a0bc7dff4004328441d353c296de Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 5 Sep 2017 01:48:52 -0700 Subject: Implement tokens list UI --- ui/app/components/token-list.js | 101 ++++++++-------------------------------- 1 file changed, 20 insertions(+), 81 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 5ea31ae8d..7fe072fac 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -4,6 +4,17 @@ const inherits = require('util').inherits const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') const normalizeAddress = require('eth-sig-util').normalize +const connect = require('react-redux').connect +const selectors = require('../selectors') + +function mapStateToProps (state) { + + return { + network: state.metamask.network, + tokens: state.metamask.tokens, + userAddress: selectors.getSelectedAddress(state), + } +} const defaultTokens = [] const contracts = require('eth-contract-metadata') @@ -15,7 +26,8 @@ for (const address in contracts) { } } -module.exports = TokenList +module.exports = connect(mapStateToProps)(TokenList) + inherits(TokenList, Component) function TokenList () { @@ -47,81 +59,7 @@ TokenList.prototype.render = function () { return h(TokenCell, tokenData) }) - return h('.full-flex-height', [ - this.renderTokenStatusBar(), - - h('ol.full-flex-height.flex-column', { - style: { - overflowY: 'auto', - display: 'flex', - flexDirection: 'column', - }, - }, [ - h('style', ` - - li.token-cell { - display: flex; - flex-direction: row; - align-items: center; - padding: 10px; - min-height: 50px; - } - - li.token-cell > h3 { - margin-left: 12px; - } - - li.token-cell:hover { - background: white; - cursor: pointer; - } - - `), - ...tokenViews, - h('.flex-grow'), - ]), - ]) -} - -TokenList.prototype.renderTokenStatusBar = function () { - const { tokens } = this.state - - let msg - if (tokens.length === 1) { - msg = `You own 1 token` - } else if (tokens.length === 1) { - msg = `You own ${tokens.length} tokens` - } else { - msg = `No tokens found` - } - - return h('div', { - style: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - minHeight: '70px', - padding: '10px', - }, - }, [ - h('span', msg), - h('button', { - key: 'reveal-account-bar', - onClick: (event) => { - event.preventDefault() - this.props.addToken() - }, - style: { - display: 'flex', - height: '40px', - padding: '10px', - justifyContent: 'center', - alignItems: 'center', - }, - }, [ - 'ADD TOKEN', - ]), - ]) + return h('div', tokenViews) } TokenList.prototype.message = function (body) { @@ -150,6 +88,7 @@ TokenList.prototype.createFreshTokenTracker = function () { if (!global.ethereumProvider) return const { userAddress } = this.props + this.tracker = new TokenTracker({ userAddress, provider: global.ethereumProvider, @@ -188,10 +127,10 @@ TokenList.prototype.componentWillUpdate = function (nextProps) { } TokenList.prototype.updateBalances = function (tokens) { - const heldTokens = tokens.filter(token => { - return token.balance !== '0' && token.string !== '0.000' - }) - this.setState({ tokens: heldTokens, isLoading: false }) + // const heldTokens = tokens.filter(token => { + // return token.balance !== '0' && token.string !== '0.000' + // }) + this.setState({ tokens: tokens, isLoading: false }) } TokenList.prototype.componentWillUnmount = function () { @@ -199,7 +138,7 @@ TokenList.prototype.componentWillUnmount = function () { this.tracker.stop() } -function uniqueMergeTokens (tokensA, tokensB) { +function uniqueMergeTokens (tokensA, tokensB = []) { const uniqueAddresses = [] const result = [] tokensA.concat(tokensB).forEach((token) => { -- cgit From 690ddf5ed75967537aa5513986146c262012832a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 00:33:39 -0700 Subject: Fix token list --- ui/app/components/token-list.js | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 7fe072fac..fea87a733 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -45,7 +45,7 @@ TokenList.prototype.render = function () { const { userAddress, network } = this.props if (isLoading) { - return this.message('Loading') + return this.message('Loading Tokens...') } if (error) { @@ -115,22 +115,29 @@ TokenList.prototype.createFreshTokenTracker = function () { }) } -TokenList.prototype.componentWillUpdate = function (nextProps) { - if (nextProps.network === 'loading') return - const oldNet = this.props.network - const newNet = nextProps.network - - if (oldNet && newNet && newNet !== oldNet) { - this.setState({ isLoading: true }) - this.createFreshTokenTracker() - } +TokenList.prototype.componentDidUpdate = function (nextProps) { + const { + network: oldNet, + userAddress: oldAddress, + } = this.props + const { + network: newNet, + userAddress: newAddress, + } = nextProps + + if (newNet === 'loading') return + if (!oldNet || !newNet || !oldAddress || !newAddress) return + if (oldAddress === newAddress && oldNet === newNet) return + + this.setState({ isLoading: true }) + this.createFreshTokenTracker() } TokenList.prototype.updateBalances = function (tokens) { - // const heldTokens = tokens.filter(token => { - // return token.balance !== '0' && token.string !== '0.000' - // }) - this.setState({ tokens: tokens, isLoading: false }) + const heldTokens = tokens.filter(token => { + return token.balance !== '0' && token.string !== '0.000' + }) + this.setState({ tokens: heldTokens, isLoading: false }) } TokenList.prototype.componentWillUnmount = function () { -- cgit From f1fb9e10a06d1811d97f61b6369684979b7ecf70 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 03:17:49 -0700 Subject: Adding Token transaction detail screen --- ui/app/components/token-list.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index fea87a733..2d1dd0ea7 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -8,7 +8,6 @@ const connect = require('react-redux').connect const selectors = require('../selectors') function mapStateToProps (state) { - return { network: state.metamask.network, tokens: state.metamask.tokens, @@ -42,7 +41,6 @@ function TokenList () { TokenList.prototype.render = function () { const state = this.state const { tokens, isLoading, error } = state - const { userAddress, network } = this.props if (isLoading) { return this.message('Loading Tokens...') @@ -53,13 +51,7 @@ TokenList.prototype.render = function () { return this.message('There was a problem loading your token balances.') } - const tokenViews = tokens.map((tokenData) => { - tokenData.network = network - tokenData.userAddress = userAddress - return h(TokenCell, tokenData) - }) - - return h('div', tokenViews) + return h('div', tokens.map((tokenData) => h(TokenCell, tokenData))) } TokenList.prototype.message = function (body) { -- cgit From ac4868170f4c61d13291389d01bf1002fe240ed4 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 3 Oct 2017 14:55:52 -0230 Subject: Enables remove token and ensures add/remove update the list without need for refresh. --- ui/app/components/token-list.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 0efa89c63..fb11be826 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -27,7 +27,6 @@ for (const address in contracts) { module.exports = connect(mapStateToProps)(TokenList) - inherits(TokenList, Component) function TokenList () { this.state = { @@ -129,15 +128,22 @@ TokenList.prototype.componentDidUpdate = function (nextProps) { const { network: oldNet, userAddress: oldAddress, + tokens, } = this.props const { network: newNet, userAddress: newAddress, + tokens: newTokens, } = nextProps - if (newNet === 'loading') return - if (!oldNet || !newNet || !oldAddress || !newAddress) return - if (oldAddress === newAddress && oldNet === newNet) return + const isLoading = newNet === 'loading' + const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress + const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet + const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork + + const tokensLengthUnchanged = tokens.length === newTokens.length + + if (tokensLengthUnchanged && shouldUpdateTokens) return this.setState({ isLoading: true }) this.createFreshTokenTracker() -- cgit From b149cceda01318d04195fc2196c29c5d9f67cda0 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 16:34:28 -0400 Subject: Fix exception thrown when tokens is null (#2355) --- ui/app/components/token-list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index fb11be826..4959f1cd5 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -141,7 +141,8 @@ TokenList.prototype.componentDidUpdate = function (nextProps) { const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork - const tokensLengthUnchanged = tokens.length === newTokens.length + const oldTokensLength = tokens ? tokens.length : 0 + const tokensLengthUnchanged = oldTokensLength === newTokens.length if (tokensLengthUnchanged && shouldUpdateTokens) return -- cgit From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/token-list.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 4959f1cd5..b6a27fd5a 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -3,7 +3,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') -const normalizeAddress = require('eth-sig-util').normalize const connect = require('react-redux').connect const selectors = require('../selectors') @@ -38,6 +37,7 @@ function TokenList () { } TokenList.prototype.render = function () { + const { userAddress } = this.props const state = this.state const { tokens, isLoading, error } = state @@ -162,15 +162,15 @@ 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 -} +// 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 From 59e46e7cb25b7355bd969fe9ab04090f52ec67bc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 13 Nov 2017 14:20:42 -0800 Subject: Show tokens with zero balance --- ui/app/components/token-list.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'ui/app/components/token-list.js') diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index b6a27fd5a..8e06e0f27 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -151,10 +151,7 @@ TokenList.prototype.componentDidUpdate = function (nextProps) { } TokenList.prototype.updateBalances = function (tokens) { - const heldTokens = tokens.filter(token => { - return token.balance !== '0' && token.string !== '0.000' - }) - this.setState({ tokens: heldTokens, isLoading: false }) + this.setState({ tokens, isLoading: false }) } TokenList.prototype.componentWillUnmount = function () { -- cgit