mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
238 lines
6.5 KiB
JavaScript
238 lines
6.5 KiB
JavaScript
const inherits = require('util').inherits
|
|
const Component = require('react').Component
|
|
const h = require('react-hyperscript')
|
|
const connect = require('react-redux').connect
|
|
const actions = require('./actions')
|
|
const Tooltip = require('./components/tooltip.js')
|
|
|
|
|
|
const ethUtil = require('ethereumjs-util')
|
|
const abi = require('human-standard-token-abi')
|
|
const Eth = require('ethjs-query')
|
|
const EthContract = require('ethjs-contract')
|
|
|
|
const emptyAddr = '0x0000000000000000000000000000000000000000'
|
|
|
|
module.exports = connect(mapStateToProps)(AddTokenScreen)
|
|
|
|
function mapStateToProps (state) {
|
|
return {
|
|
identities: state.metamask.identities,
|
|
}
|
|
}
|
|
|
|
inherits(AddTokenScreen, Component)
|
|
function AddTokenScreen () {
|
|
this.state = {
|
|
warning: null,
|
|
address: null,
|
|
symbol: 'TOKEN',
|
|
decimals: 18,
|
|
}
|
|
Component.call(this)
|
|
}
|
|
|
|
AddTokenScreen.prototype.render = function () {
|
|
const state = this.state
|
|
const props = this.props
|
|
const { warning, symbol, decimals } = state
|
|
|
|
return (
|
|
h('.flex-column.flex-grow', [
|
|
|
|
// subtitle and nav
|
|
h('.section-title.flex-row.flex-center', [
|
|
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
|
|
onClick: (event) => {
|
|
props.dispatch(actions.goHome())
|
|
},
|
|
}),
|
|
h('h2.page-subtitle', 'Add Token'),
|
|
]),
|
|
|
|
h('.error', {
|
|
style: {
|
|
display: warning ? 'block' : 'none',
|
|
padding: '0 20px',
|
|
textAlign: 'center',
|
|
},
|
|
}, warning),
|
|
|
|
// conf view
|
|
h('.flex-column.flex-justify-center.flex-grow.select-none', [
|
|
h('.flex-space-around', {
|
|
style: {
|
|
padding: '20px',
|
|
},
|
|
}, [
|
|
|
|
h('div', [
|
|
h(Tooltip, {
|
|
position: 'top',
|
|
title: 'The contract of the actual token contract. Click for more info.',
|
|
}, [
|
|
h('a', {
|
|
style: { fontWeight: 'bold', paddingRight: '10px'},
|
|
href: 'https://consensyssupport.happyfox.com/staff/kb/article/24-what-is-a-token-contract-address',
|
|
target: '_blank',
|
|
}, [
|
|
h('span', 'Token Contract Address '),
|
|
h('i.fa.fa-question-circle'),
|
|
]),
|
|
]),
|
|
]),
|
|
|
|
h('section.flex-row.flex-center', [
|
|
h('input#token-address', {
|
|
name: 'address',
|
|
placeholder: 'Token Contract Address',
|
|
onChange: this.tokenAddressDidChange.bind(this),
|
|
style: {
|
|
width: 'inherit',
|
|
flex: '1 0 auto',
|
|
height: '30px',
|
|
margin: '8px',
|
|
},
|
|
}),
|
|
]),
|
|
|
|
h('div', [
|
|
h('span', {
|
|
style: { fontWeight: 'bold', paddingRight: '10px'},
|
|
}, 'Token Symbol'),
|
|
]),
|
|
|
|
h('div', { style: {display: 'flex'} }, [
|
|
h('input#token_symbol', {
|
|
placeholder: `Like "ETH"`,
|
|
value: symbol,
|
|
style: {
|
|
width: 'inherit',
|
|
flex: '1 0 auto',
|
|
height: '30px',
|
|
margin: '8px',
|
|
},
|
|
onChange: (event) => {
|
|
var element = event.target
|
|
var symbol = element.value
|
|
this.setState({ symbol })
|
|
},
|
|
}),
|
|
]),
|
|
|
|
h('div', [
|
|
h('span', {
|
|
style: { fontWeight: 'bold', paddingRight: '10px'},
|
|
}, 'Decimals of Precision'),
|
|
]),
|
|
|
|
h('div', { style: {display: 'flex'} }, [
|
|
h('input#token_decimals', {
|
|
value: decimals,
|
|
type: 'number',
|
|
min: 0,
|
|
max: 36,
|
|
style: {
|
|
width: 'inherit',
|
|
flex: '1 0 auto',
|
|
height: '30px',
|
|
margin: '8px',
|
|
},
|
|
onChange: (event) => {
|
|
var element = event.target
|
|
var decimals = element.value.trim()
|
|
this.setState({ decimals })
|
|
},
|
|
}),
|
|
]),
|
|
|
|
h('button', {
|
|
style: {
|
|
alignSelf: 'center',
|
|
},
|
|
onClick: (event) => {
|
|
const valid = this.validateInputs()
|
|
if (!valid) return
|
|
|
|
const { address, symbol, decimals } = this.state
|
|
this.props.dispatch(actions.addToken(address.trim(), symbol.trim(), decimals))
|
|
},
|
|
}, 'Add'),
|
|
]),
|
|
]),
|
|
])
|
|
)
|
|
}
|
|
|
|
AddTokenScreen.prototype.componentWillMount = function () {
|
|
if (typeof global.ethereumProvider === 'undefined') return
|
|
|
|
this.eth = new Eth(global.ethereumProvider)
|
|
this.contract = new EthContract(this.eth)
|
|
this.TokenContract = this.contract(abi)
|
|
}
|
|
|
|
AddTokenScreen.prototype.tokenAddressDidChange = function (event) {
|
|
const el = event.target
|
|
const address = el.value.trim()
|
|
if (ethUtil.isValidAddress(address) && address !== emptyAddr) {
|
|
this.setState({ address })
|
|
this.attemptToAutoFillTokenParams(address)
|
|
}
|
|
}
|
|
|
|
AddTokenScreen.prototype.validateInputs = function () {
|
|
let msg = ''
|
|
const state = this.state
|
|
const identitiesList = Object.keys(this.props.identities)
|
|
const { address, symbol, decimals } = state
|
|
const standardAddress = ethUtil.addHexPrefix(address).toLowerCase()
|
|
|
|
const validAddress = ethUtil.isValidAddress(address)
|
|
if (!validAddress) {
|
|
msg += 'Address is invalid. '
|
|
}
|
|
|
|
const validDecimals = decimals >= 0 && decimals < 36
|
|
if (!validDecimals) {
|
|
msg += 'Decimals must be at least 0, and not over 36. '
|
|
}
|
|
|
|
const symbolLen = symbol.trim().length
|
|
const validSymbol = symbolLen > 0 && symbolLen < 10
|
|
if (!validSymbol) {
|
|
msg += 'Symbol must be between 0 and 10 characters.'
|
|
}
|
|
|
|
const ownAddress = identitiesList.includes(standardAddress)
|
|
if (ownAddress) {
|
|
msg = 'Personal address detected. Input the token contract address.'
|
|
}
|
|
|
|
const isValid = validAddress && validDecimals && !ownAddress
|
|
|
|
if (!isValid) {
|
|
this.setState({
|
|
warning: msg,
|
|
})
|
|
} else {
|
|
this.setState({ warning: null })
|
|
}
|
|
|
|
return isValid
|
|
}
|
|
|
|
AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) {
|
|
const contract = this.TokenContract.at(address)
|
|
|
|
const results = await Promise.all([
|
|
contract.symbol(),
|
|
contract.decimals(),
|
|
])
|
|
|
|
const [ symbol, decimals ] = results
|
|
if (symbol && decimals) {
|
|
this.setState({ symbol: symbol[0], decimals: decimals[0].toString() })
|
|
}
|
|
}
|