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-balance.js | 104 +++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 ui/app/components/token-balance.js (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js new file mode 100644 index 000000000..0757cc65c --- /dev/null +++ b/ui/app/components/token-balance.js @@ -0,0 +1,104 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const TokenTracker = require('eth-token-tracker') +const connect = require('react-redux').connect +const selectors = require('../selectors') + +function mapStateToProps (state) { + return { + userAddress: selectors.getSelectedAddress(state), + } +} + +module.exports = connect(mapStateToProps)(TokenBalance) + + +inherits(TokenBalance, Component) +function TokenBalance () { + this.state = { + balance: '', + isLoading: true, + error: null, + } + Component.call(this) +} + +TokenBalance.prototype.render = function () { + const state = this.state + const { balance, isLoading } = state + + return isLoading + ? h('span', '') + : h('span', balance) +} + +TokenBalance.prototype.componentDidMount = function () { + this.createFreshTokenTracker() +} + +TokenBalance.prototype.createFreshTokenTracker = function () { + if (this.tracker) { + // Clean up old trackers when refreshing: + this.tracker.stop() + this.tracker.removeListener('update', this.balanceUpdater) + this.tracker.removeListener('error', this.showError) + } + + if (!global.ethereumProvider) return + const { userAddress, token } = this.props + + this.tracker = new TokenTracker({ + userAddress, + provider: global.ethereumProvider, + tokens: [token], + pollingInterval: 8000, + }) + + + // Set up listener instances for cleaning up + this.balanceUpdater = this.updateBalance.bind(this) + this.showError = error => { + this.setState({ error, isLoading: false }) + } + this.tracker.on('update', this.balanceUpdater) + this.tracker.on('error', this.showError) + + this.tracker.updateBalances() + .then(() => { + this.updateBalance(this.tracker.serialize()) + }) + .catch((reason) => { + log.error(`Problem updating balances`, reason) + this.setState({ isLoading: false }) + }) +} + +TokenBalance.prototype.componentDidUpdate = function (nextProps) { + const { + userAddress: oldAddress, + } = this.props + const { + userAddress: newAddress, + } = nextProps + + if (!oldAddress || !newAddress) return + if (oldAddress === newAddress) return + + this.setState({ isLoading: true }) + this.createFreshTokenTracker() +} + +TokenBalance.prototype.updateBalance = function (tokens = []) { + const [{ string }] = tokens + this.setState({ + balance: string, + isLoading: false, + }) +} + +TokenBalance.prototype.componentWillUnmount = function () { + if (!this.tracker) return + this.tracker.stop() +} + -- cgit v1.2.3 From 14b2f3e391752cca02c05ae0137e490bfdcdd7a7 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 23:03:23 -0700 Subject: Show token balance and identicon --- ui/app/components/token-balance.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 0757cc65c..d7fe168eb 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -90,9 +90,9 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) { } TokenBalance.prototype.updateBalance = function (tokens = []) { - const [{ string }] = tokens + const [{ string, symbol }] = tokens this.setState({ - balance: string, + balance: `${string} ${symbol}`, isLoading: false, }) } -- cgit v1.2.3 From 983fa2a11721aa7d1307ef76d516e25a50d0eedf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 03:14:53 -0700 Subject: Add Contract Tx List Item; Update Token Tx on select --- ui/app/components/token-balance.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index d7fe168eb..b4a249300 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -77,13 +77,15 @@ TokenBalance.prototype.createFreshTokenTracker = function () { TokenBalance.prototype.componentDidUpdate = function (nextProps) { const { userAddress: oldAddress, + token: { address: oldTokenAddress }, } = this.props const { userAddress: newAddress, + token: { address: newTokenAddress }, } = nextProps - if (!oldAddress || !newAddress) return - if (oldAddress === newAddress) return + if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return + if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return this.setState({ isLoading: true }) this.createFreshTokenTracker() -- cgit v1.2.3 From 8b919758e51e16536b6edaf33d4978d551363249 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 04:24:03 -0700 Subject: Send Token screen partial UI --- ui/app/components/token-balance.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index b4a249300..3a923eb9d 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -93,8 +93,10 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) { TokenBalance.prototype.updateBalance = function (tokens = []) { const [{ string, symbol }] = tokens + const { balanceOnly } = this.props + this.setState({ - balance: `${string} ${symbol}`, + balance: balanceOnly ? string : `${string} ${symbol}`, isLoading: false, }) } -- cgit v1.2.3 From 3ec2f534632426876c28b22c58cbbf14b4904d97 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Sep 2017 18:44:52 -0700 Subject: Integrate Add Token --- ui/app/components/token-balance.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 3a923eb9d..0342c1da9 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -17,7 +17,8 @@ module.exports = connect(mapStateToProps)(TokenBalance) inherits(TokenBalance, Component) function TokenBalance () { this.state = { - balance: '', + string: '', + symbol: '', isLoading: true, error: null, } @@ -26,11 +27,14 @@ function TokenBalance () { TokenBalance.prototype.render = function () { const state = this.state - const { balance, isLoading } = state + const { symbol, string, balanceOnly, isLoading } = state return isLoading ? h('span', '') - : h('span', balance) + : h('span.token-balance', [ + h('span.token-balance__amount', string), + !balanceOnly && h('span.token-balance__symbol', symbol), + ]) } TokenBalance.prototype.componentDidMount = function () { @@ -93,10 +97,10 @@ TokenBalance.prototype.componentDidUpdate = function (nextProps) { TokenBalance.prototype.updateBalance = function (tokens = []) { const [{ string, symbol }] = tokens - const { balanceOnly } = this.props this.setState({ - balance: balanceOnly ? string : `${string} ${symbol}`, + string, + symbol, isLoading: false, }) } -- cgit v1.2.3 From 06292107d756f0b25805f819cd276e4b6303ccb0 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 16:13:53 -0700 Subject: Always set currency to USD on app mount --- ui/app/components/token-balance.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/token-balance.js') diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 0342c1da9..2f71c0687 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -27,7 +27,8 @@ function TokenBalance () { TokenBalance.prototype.render = function () { const state = this.state - const { symbol, string, balanceOnly, isLoading } = state + const { symbol, string, isLoading } = state + const { balanceOnly } = this.props return isLoading ? h('span', '') -- cgit v1.2.3