Merge pull request #1603 from MetaMask/AddTokenList
Add popular token listfeature/default_network_editable
Kevin Serrano
8 years ago
committed by
GitHub
commit
f022c7c714
@ -1,4 +1,4 @@ |
|||||||
{ |
{ |
||||||
"presets": ["es2015"], |
"presets": ["es2015", "stage-0"], |
||||||
"plugins": ["transform-runtime"] |
"plugins": ["transform-runtime", "transform-async-to-generator"] |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,89 @@ |
|||||||
|
const Component = require('react').Component |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const inherits = require('util').inherits |
||||||
|
const formatBalance = require('../util').formatBalance |
||||||
|
const generateBalanceObject = require('../util').generateBalanceObject |
||||||
|
const Tooltip = require('./tooltip.js') |
||||||
|
const FiatValue = require('./fiat-value.js') |
||||||
|
|
||||||
|
module.exports = EthBalanceComponent |
||||||
|
|
||||||
|
inherits(EthBalanceComponent, Component) |
||||||
|
function EthBalanceComponent () { |
||||||
|
Component.call(this) |
||||||
|
} |
||||||
|
|
||||||
|
EthBalanceComponent.prototype.render = function () { |
||||||
|
var props = this.props |
||||||
|
let { value } = props |
||||||
|
var style = props.style |
||||||
|
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true |
||||||
|
value = value ? formatBalance(value, 6, needsParse) : '...' |
||||||
|
var width = props.width |
||||||
|
|
||||||
|
return ( |
||||||
|
|
||||||
|
h('.ether-balance.ether-balance-amount', { |
||||||
|
style: style, |
||||||
|
}, [ |
||||||
|
h('div', { |
||||||
|
style: { |
||||||
|
display: 'inline', |
||||||
|
width: width, |
||||||
|
}, |
||||||
|
}, this.renderBalance(value)), |
||||||
|
]) |
||||||
|
|
||||||
|
) |
||||||
|
} |
||||||
|
EthBalanceComponent.prototype.renderBalance = function (value) { |
||||||
|
var props = this.props |
||||||
|
if (value === 'None') return value |
||||||
|
if (value === '...') return value |
||||||
|
var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3) |
||||||
|
var balance |
||||||
|
var splitBalance = value.split(' ') |
||||||
|
var ethNumber = splitBalance[0] |
||||||
|
var ethSuffix = splitBalance[1] |
||||||
|
const showFiat = 'showFiat' in props ? props.showFiat : true |
||||||
|
|
||||||
|
if (props.shorten) { |
||||||
|
balance = balanceObj.shortBalance |
||||||
|
} else { |
||||||
|
balance = balanceObj.balance |
||||||
|
} |
||||||
|
|
||||||
|
var label = balanceObj.label |
||||||
|
|
||||||
|
return ( |
||||||
|
h(Tooltip, { |
||||||
|
position: 'bottom', |
||||||
|
title: `${ethNumber} ${ethSuffix}`, |
||||||
|
}, h('div.flex-column', [ |
||||||
|
h('.flex-row', { |
||||||
|
style: { |
||||||
|
alignItems: 'flex-end', |
||||||
|
lineHeight: '13px', |
||||||
|
fontFamily: 'Montserrat Light', |
||||||
|
textRendering: 'geometricPrecision', |
||||||
|
}, |
||||||
|
}, [ |
||||||
|
h('div', { |
||||||
|
style: { |
||||||
|
width: '100%', |
||||||
|
textAlign: 'right', |
||||||
|
}, |
||||||
|
}, this.props.incoming ? `+${balance}` : balance), |
||||||
|
h('div', { |
||||||
|
style: { |
||||||
|
color: ' #AEAEAE', |
||||||
|
fontSize: '12px', |
||||||
|
marginLeft: '5px', |
||||||
|
}, |
||||||
|
}, label), |
||||||
|
]), |
||||||
|
|
||||||
|
showFiat ? h(FiatValue, { value: props.value }) : null, |
||||||
|
])) |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
const Component = require('react').Component |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const inherits = require('util').inherits |
||||||
|
const Identicon = require('./identicon') |
||||||
|
|
||||||
|
module.exports = TokenCell |
||||||
|
|
||||||
|
inherits(TokenCell, Component) |
||||||
|
function TokenCell () { |
||||||
|
Component.call(this) |
||||||
|
} |
||||||
|
|
||||||
|
TokenCell.prototype.render = function () { |
||||||
|
const props = this.props |
||||||
|
const { address, symbol, string, network, userAddress } = props |
||||||
|
|
||||||
|
return ( |
||||||
|
h('li.token-cell', { |
||||||
|
style: { cursor: network === '1' ? 'pointer' : 'default' }, |
||||||
|
onClick: (event) => { |
||||||
|
const url = urlFor(address, userAddress, network) |
||||||
|
if (url) { |
||||||
|
navigateTo(url) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, [ |
||||||
|
|
||||||
|
h(Identicon, { |
||||||
|
diameter: 50, |
||||||
|
address, |
||||||
|
network, |
||||||
|
}), |
||||||
|
|
||||||
|
h('h3', `${string || 0} ${symbol}`), |
||||||
|
]) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
function navigateTo (url) { |
||||||
|
global.platform.openWindow({ url }) |
||||||
|
} |
||||||
|
|
||||||
|
function urlFor (tokenAddress, address, network) { |
||||||
|
return `https://etherscan.io/token/${tokenAddress}?a=${address}` |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,147 @@ |
|||||||
|
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 contracts = require('eth-contract-metadata') |
||||||
|
|
||||||
|
const tokens = [] |
||||||
|
for (const address in contracts) { |
||||||
|
const contract = contracts[address] |
||||||
|
if (contract.erc20) { |
||||||
|
contract.address = address |
||||||
|
tokens.push(contract) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = TokenList |
||||||
|
|
||||||
|
inherits(TokenList, Component) |
||||||
|
function TokenList () { |
||||||
|
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 |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return this.message('Loading') |
||||||
|
} |
||||||
|
|
||||||
|
if (error) { |
||||||
|
log.error(error) |
||||||
|
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 ( |
||||||
|
h('ol', { |
||||||
|
style: { |
||||||
|
height: '302px', |
||||||
|
overflowY: 'auto', |
||||||
|
}, |
||||||
|
}, [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.')))
|
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
TokenList.prototype.message = function (body) { |
||||||
|
return h('div', { |
||||||
|
style: { |
||||||
|
display: 'flex', |
||||||
|
height: '250px', |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
}, |
||||||
|
}, 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: 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.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.updateBalances = function (tokenData) { |
||||||
|
const heldTokens = tokenData.filter(token => token.balance !== '0' && token.string !== '0.000') |
||||||
|
this.setState({ tokens: heldTokens, isLoading: false }) |
||||||
|
} |
||||||
|
|
||||||
|
TokenList.prototype.componentWillUnmount = function () { |
||||||
|
if (!this.tracker) return |
||||||
|
this.tracker.stop() |
||||||
|
} |
||||||
|
|
||||||
Loading…
Reference in new issue