aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/add-token.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/add-token.js')
-rw-r--r--ui/app/add-token.js78
1 files changed, 45 insertions, 33 deletions
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index b4ea4a532..46564a5e5 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -2,6 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component
const classnames = require('classnames')
const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const R = require('ramda')
const Fuse = require('fuse.js')
@@ -26,12 +27,16 @@ const fuse = new Fuse(contractList, {
const actions = require('./actions')
const ethUtil = require('ethereumjs-util')
const { tokenInfoGetter } = require('./token-util')
-const t = require('../i18n')
const emptyAddr = '0x0000000000000000000000000000000000000000'
+AddTokenScreen.contextTypes = {
+ t: PropTypes.func,
+}
+
module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)
+
function mapStateToProps (state) {
const { identities, tokens } = state.metamask
return {
@@ -51,6 +56,7 @@ inherits(AddTokenScreen, Component)
function AddTokenScreen () {
this.state = {
isShowingConfirmation: false,
+ isShowingInfoBox: true,
customAddress: '',
customSymbol: '',
customDecimals: '',
@@ -140,28 +146,31 @@ AddTokenScreen.prototype.validate = function () {
if (customAddress) {
const validAddress = ethUtil.isValidAddress(customAddress)
if (!validAddress) {
- errors.customAddress = t('invalidAddress')
+ errors.customAddress = this.context.t('invalidAddress')
}
- const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36
+ const validDecimals = customDecimals !== null
+ && customDecimals !== ''
+ && customDecimals >= 0
+ && customDecimals < 36
if (!validDecimals) {
- errors.customDecimals = t('decimalsMustZerotoTen')
+ errors.customDecimals = this.context.t('decimalsMustZerotoTen')
}
const symbolLen = customSymbol.trim().length
const validSymbol = symbolLen > 0 && symbolLen < 10
if (!validSymbol) {
- errors.customSymbol = t('symbolBetweenZeroTen')
+ errors.customSymbol = this.context.t('symbolBetweenZeroTen')
}
const ownAddress = identitiesList.includes(standardAddress)
if (ownAddress) {
- errors.customAddress = t('personalAddressDetected')
+ errors.customAddress = this.context.t('personalAddressDetected')
}
const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
if (tokenAlreadyAdded) {
- errors.customAddress = t('tokenAlreadyAdded')
+ errors.customAddress = this.context.t('tokenAlreadyAdded')
}
} else if (
Object.entries(selectedTokens)
@@ -169,7 +178,7 @@ AddTokenScreen.prototype.validate = function () {
isEmpty && !isSelected
), true)
) {
- errors.tokenSelector = t('mustSelectOne')
+ errors.tokenSelector = this.context.t('mustSelectOne')
}
return {
@@ -199,7 +208,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
'add-token__add-custom-field--error': errors.customAddress,
}),
}, [
- h('div.add-token__add-custom-label', t('tokenAddress')),
+ h('div.add-token__add-custom-label', this.context.t('tokenAddress')),
h('input.add-token__add-custom-input', {
type: 'text',
onChange: this.tokenAddressDidChange,
@@ -212,7 +221,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
'add-token__add-custom-field--error': errors.customSymbol,
}),
}, [
- h('div.add-token__add-custom-label', t('tokenSymbol')),
+ h('div.add-token__add-custom-label', this.context.t('tokenSymbol')),
h('input.add-token__add-custom-input', {
type: 'text',
onChange: this.tokenSymbolDidChange,
@@ -226,7 +235,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
'add-token__add-custom-field--error': errors.customDecimals,
}),
}, [
- h('div.add-token__add-custom-label', t('decimal')),
+ h('div.add-token__add-custom-label', this.context.t('decimal')),
h('input.add-token__add-custom-input', {
type: 'number',
onChange: this.tokenDecimalsDidChange,
@@ -248,7 +257,7 @@ AddTokenScreen.prototype.renderTokenList = function () {
const results = [...addressSearchResult, ...fuseSearchResult]
return h('div', [
- results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')),
+ results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')),
h('div.add-token__token-icons-container', Array(6).fill(undefined)
.map((_, i) => {
const { logo, symbol, name, address } = results[i] || {}
@@ -302,11 +311,8 @@ AddTokenScreen.prototype.renderConfirmation = function () {
return (
h('div.add-token', [
h('div.add-token__wrapper', [
- h('div.add-token__title-container.add-token__confirmation-title', [
- h('div.add-token__description', t('likeToAddTokens')),
- ]),
h('div.add-token__content-container.add-token__confirmation-content', [
- h('div.add-token__description.add-token__confirmation-description', t('balances')),
+ h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
h('div.add-token__confirmation-token-list',
Object.entries(tokens)
.map(([ address, token ]) => (
@@ -325,10 +331,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
h('div.add-token__buttons', [
h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: () => this.setState({ isShowingConfirmation: false }),
- }, t('back')),
+ }, this.context.t('back')),
h('button.btn-primary--lg', {
onClick: () => addTokens(tokens).then(goHome),
- }, t('addTokens')),
+ }, this.context.t('addTokens')),
]),
])
)
@@ -339,23 +345,28 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) {
}
AddTokenScreen.prototype.renderTabs = function () {
- const { displayedTab, errors } = this.state
+ const { isShowingInfoBox, displayedTab, errors } = this.state
return displayedTab === 'CUSTOM_TOKEN'
? this.renderCustomForm()
: h('div', [
h('div.add-token__wrapper', [
h('div.add-token__content-container', [
- h('div.add-token__info-box', [
- h('div.add-token__info-box__close'),
- h('div.add-token__info-box__title', t('whatsThis')),
- h('div.add-token__info-box__copy', t('keepTrackTokens')),
- h('div.add-token__info-box__copy--blue', t('learnMore')),
+ isShowingInfoBox && h('div.add-token__info-box', [
+ h('div.add-token__info-box__close', {
+ onClick: () => this.setState({ isShowingInfoBox: false }),
+ }),
+ h('div.add-token__info-box__title', this.context.t('whatsThis')),
+ h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
+ h('a.add-token__info-box__copy--blue', {
+ href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
+ target: '_blank',
+ }, this.context.t('learnMore')),
]),
h('div.add-token__input-container', [
h('input.add-token__input', {
type: 'text',
- placeholder: t('searchTokens'),
+ placeholder: this.context.t('searchTokens'),
onChange: e => this.setState({ searchQuery: e.target.value }),
}),
h('div.add-token__search-input-error-message', errors.tokenSelector),
@@ -379,26 +390,27 @@ AddTokenScreen.prototype.render = function () {
onClick: () => goHome(),
}, [
h('i.fa.fa-angle-left.fa-lg'),
- h('span', t('cancel')),
+ h('span', this.context.t('cancel')),
]),
- h('div.add-token__header__title', t('addTokens')),
+ h('div.add-token__header__title', this.context.t('addTokens')),
+ isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')),
!isShowingConfirmation && h('div.add-token__header__tabs', [
h('div.add-token__header__tabs__tab', {
className: classnames('add-token__header__tabs__tab', {
'add-token__header__tabs__selected': displayedTab === 'SEARCH',
- 'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH',
+ 'add-token__header__tabs__unselected': displayedTab !== 'SEARCH',
}),
onClick: () => this.displayTab('SEARCH'),
- }, t('search')),
+ }, this.context.t('search')),
h('div.add-token__header__tabs__tab', {
className: classnames('add-token__header__tabs__tab', {
'add-token__header__tabs__selected': displayedTab === 'CUSTOM_TOKEN',
- 'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
+ 'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN',
}),
onClick: () => this.displayTab('CUSTOM_TOKEN'),
- }, t('customToken')),
+ }, this.context.t('customToken')),
]),
]),
@@ -410,10 +422,10 @@ AddTokenScreen.prototype.render = function () {
!isShowingConfirmation && h('div.add-token__buttons', [
h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: goHome,
- }, t('cancel')),
+ }, this.context.t('cancel')),
h('button.btn-primary--lg.add-token__confirm-button', {
onClick: this.onNext,
- }, t('next')),
+ }, this.context.t('next')),
]),
])
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-10 14:36:37 +0800