diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-02-28 03:25:29 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-02-28 03:25:29 +0800 |
commit | 3fefccd37219c9b4b513fc8d929723e07022b9c4 (patch) | |
tree | 22865ecd672570a6162ac3c9402ec9d63ad3f7ef /ui/app/components/token-list.js | |
parent | 6a7ea00cd34f83b257f6b4280a5f4e20aa5d34ee (diff) | |
parent | ced62ac551a095c8f94f550f0c01a9d4fd04ce5b (diff) | |
download | tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.gz tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.zst tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.zip |
Merge branch 'master' into mascara-deploy
Diffstat (limited to 'ui/app/components/token-list.js')
-rw-r--r-- | ui/app/components/token-list.js | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js new file mode 100644 index 000000000..8e06e0f27 --- /dev/null +++ b/ui/app/components/token-list.js @@ -0,0 +1,173 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const TokenTracker = require('eth-token-tracker') +const TokenCell = require('./token-cell.js') +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') +for (const address in contracts) { + const contract = contracts[address] + if (contract.erc20) { + contract.address = address + defaultTokens.push(contract) + } +} + +module.exports = connect(mapStateToProps)(TokenList) + +inherits(TokenList, Component) +function TokenList () { + this.state = { + tokens: [], + isLoading: true, + network: null, + } + Component.call(this) +} + +TokenList.prototype.render = function () { + const { userAddress } = this.props + const state = this.state + const { tokens, isLoading, error } = state + + if (isLoading) { + return this.message('Loading Tokens...') + } + + if (error) { + log.error(error) + return h('.hotFix', { + style: { + padding: '80px', + }, + }, [ + 'We had trouble loading your token balances. You can view them ', + h('span.hotFix', { + style: { + color: 'rgba(247, 134, 28, 1)', + cursor: 'pointer', + }, + onClick: () => { + global.platform.openWindow({ + url: `https://ethplorer.io/address/${userAddress}`, + }) + }, + }, 'here'), + ]) + } + + return h('div', tokens.map((tokenData) => h(TokenCell, tokenData))) + +} + +TokenList.prototype.message = function (body) { + return h('div', { + style: { + display: 'flex', + height: '250px', + alignItems: 'center', + justifyContent: 'center', + padding: '30px', + }, + }, body) +} + +TokenList.prototype.componentDidMount = function () { + this.createFreshTokenTracker() +} + +TokenList.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 } = this.props + + this.tracker = new TokenTracker({ + userAddress, + provider: global.ethereumProvider, + tokens: this.props.tokens, + pollingInterval: 8000, + }) + + + // Set up listener instances for cleaning up + this.balanceUpdater = this.updateBalances.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.updateBalances(this.tracker.serialize()) + }) + .catch((reason) => { + log.error(`Problem updating balances`, reason) + this.setState({ isLoading: false }) + }) +} + +TokenList.prototype.componentDidUpdate = function (nextProps) { + const { + network: oldNet, + userAddress: oldAddress, + tokens, + } = this.props + const { + network: newNet, + userAddress: newAddress, + tokens: newTokens, + } = nextProps + + const isLoading = newNet === 'loading' + const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress + const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet + const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork + + const oldTokensLength = tokens ? tokens.length : 0 + const tokensLengthUnchanged = oldTokensLength === newTokens.length + + if (tokensLengthUnchanged && shouldUpdateTokens) return + + this.setState({ isLoading: true }) + this.createFreshTokenTracker() +} + +TokenList.prototype.updateBalances = function (tokens) { + this.setState({ tokens, isLoading: false }) +} + +TokenList.prototype.componentWillUnmount = function () { + if (!this.tracker) return + 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 +// } |