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.js220
1 files changed, 129 insertions, 91 deletions
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index b3a5bdc20..472f3b736 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component
const classnames = require('classnames')
const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const connect = require('./metamask-connect')
const R = require('ramda')
const Fuse = require('fuse.js')
const contractMap = require('eth-contract-metadata')
@@ -26,7 +26,6 @@ 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'
@@ -55,10 +54,10 @@ function AddTokenScreen () {
customSymbol: '',
customDecimals: '',
searchQuery: '',
- isCollapsed: true,
selectedTokens: {},
errors: {},
autoFilled: false,
+ displayedTab: 'SEARCH',
}
this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this)
this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this)
@@ -140,28 +139,31 @@ AddTokenScreen.prototype.validate = function () {
if (customAddress) {
const validAddress = ethUtil.isValidAddress(customAddress)
if (!validAddress) {
- errors.customAddress = t('invalidAddress')
+ errors.customAddress = this.props.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.props.t('decimalsMustZerotoTen')
}
const symbolLen = customSymbol.trim().length
const validSymbol = symbolLen > 0 && symbolLen < 10
if (!validSymbol) {
- errors.customSymbol = t('symbolBetweenZeroTen')
+ errors.customSymbol = this.props.t('symbolBetweenZeroTen')
}
const ownAddress = identitiesList.includes(standardAddress)
if (ownAddress) {
- errors.customAddress = t('personalAddressDetected')
+ errors.customAddress = this.props.t('personalAddressDetected')
}
const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
if (tokenAlreadyAdded) {
- errors.customAddress = t('tokenAlreadyAdded')
+ errors.customAddress = this.props.t('tokenAlreadyAdded')
}
} else if (
Object.entries(selectedTokens)
@@ -169,7 +171,7 @@ AddTokenScreen.prototype.validate = function () {
isEmpty && !isSelected
), true)
) {
- errors.tokenSelector = t('mustSelectOne')
+ errors.tokenSelector = this.props.t('mustSelectOne')
}
return {
@@ -192,14 +194,14 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address)
AddTokenScreen.prototype.renderCustomForm = function () {
const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state
- return !this.state.isCollapsed && (
+ return (
h('div.add-token__add-custom-form', [
h('div', {
className: classnames('add-token__add-custom-field', {
'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.props.t('tokenAddress')),
h('input.add-token__add-custom-input', {
type: 'text',
onChange: this.tokenAddressDidChange,
@@ -212,7 +214,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.props.t('tokenSymbol')),
h('input.add-token__add-custom-input', {
type: 'text',
onChange: this.tokenSymbolDidChange,
@@ -226,7 +228,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.props.t('decimal')),
h('input.add-token__add-custom-input', {
type: 'number',
onChange: this.tokenDecimalsDidChange,
@@ -247,33 +249,36 @@ AddTokenScreen.prototype.renderTokenList = function () {
})
const results = [...addressSearchResult, ...fuseSearchResult]
- return Array(6).fill(undefined)
- .map((_, i) => {
- const { logo, symbol, name, address } = results[i] || {}
- const tokenAlreadyAdded = this.checkExistingAddresses(address)
- return Boolean(logo || symbol || name) && (
- h('div.add-token__token-wrapper', {
- className: classnames({
- 'add-token__token-wrapper--selected': selectedTokens[address],
- 'add-token__token-wrapper--disabled': tokenAlreadyAdded,
- }),
- onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
- }, [
- h('div.add-token__token-icon', {
- style: {
- backgroundImage: logo && `url(images/contract/${logo})`,
- },
- }),
- h('div.add-token__token-data', [
- h('div.add-token__token-symbol', symbol),
- h('div.add-token__token-name', name),
- ]),
- // tokenAlreadyAdded && (
- // h('div.add-token__token-message', 'Already added')
- // ),
- ])
- )
- })
+ return h('div', [
+ results.length > 0 && h('div.add-token__token-icons-title', this.props.t('popularTokens')),
+ h('div.add-token__token-icons-container', Array(6).fill(undefined)
+ .map((_, i) => {
+ const { logo, symbol, name, address } = results[i] || {}
+ const tokenAlreadyAdded = this.checkExistingAddresses(address)
+ return Boolean(logo || symbol || name) && (
+ h('div.add-token__token-wrapper', {
+ className: classnames({
+ 'add-token__token-wrapper--selected': selectedTokens[address],
+ 'add-token__token-wrapper--disabled': tokenAlreadyAdded,
+ }),
+ onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
+ }, [
+ h('div.add-token__token-icon', {
+ style: {
+ backgroundImage: logo && `url(images/contract/${logo})`,
+ },
+ }),
+ h('div.add-token__token-data', [
+ h('div.add-token__token-symbol', symbol),
+ h('div.add-token__token-name', name),
+ ]),
+ // tokenAlreadyAdded && (
+ // h('div.add-token__token-message', 'Already added')
+ // ),
+ ])
+ )
+ })),
+ ])
}
AddTokenScreen.prototype.renderConfirmation = function () {
@@ -300,11 +305,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
h('div.add-token', [
h('div.add-token__wrapper', [
h('div.add-token__title-container.add-token__confirmation-title', [
- h('div.add-token__title', t('addToken')),
- h('div.add-token__description', t('likeToAddTokens')),
+ h('div.add-token__description', this.props.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.props.t('balances')),
h('div.add-token__confirmation-token-list',
Object.entries(tokens)
.map(([ address, token ]) => (
@@ -321,63 +325,97 @@ AddTokenScreen.prototype.renderConfirmation = function () {
]),
]),
h('div.add-token__buttons', [
- h('button.btn-cancel.add-token__button', {
+ h('button.btn-secondary--lg.add-token__cancel-button', {
onClick: () => this.setState({ isShowingConfirmation: false }),
- }, t('back')),
- h('button.btn-clear.add-token__button', {
+ }, this.props.t('back')),
+ h('button.btn-primary--lg', {
onClick: () => addTokens(tokens).then(goHome),
- }, t('addTokens')),
+ }, this.props.t('addTokens')),
]),
])
)
}
-AddTokenScreen.prototype.render = function () {
- const { isCollapsed, errors, isShowingConfirmation } = this.state
- const { goHome } = this.props
+AddTokenScreen.prototype.displayTab = function (selectedTab) {
+ this.setState({ displayedTab: selectedTab })
+}
- return isShowingConfirmation
- ? this.renderConfirmation()
- : (
- h('div.add-token', [
- h('div.add-token__wrapper', [
- h('div.add-token__title-container', [
- h('div.add-token__title', t('addToken')),
- h('div.add-token__description', t('tokenWarning1')),
- h('div.add-token__description', t('tokenSelection')),
- ]),
- h('div.add-token__content-container', [
- h('div.add-token__input-container', [
- h('input.add-token__input', {
- type: 'text',
- placeholder: t('search'),
- onChange: e => this.setState({ searchQuery: e.target.value }),
- }),
- h('div.add-token__search-input-error-message', errors.tokenSelector),
- ]),
- h(
- 'div.add-token__token-icons-container',
- this.renderTokenList(),
- ),
+AddTokenScreen.prototype.renderTabs = function () {
+ const { 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', this.props.t('whatsThis')),
+ h('div.add-token__info-box__copy', this.props.t('keepTrackTokens')),
+ h('div.add-token__info-box__copy--blue', this.props.t('learnMore')),
]),
- h('div.add-token__footers', [
- h('div.add-token__add-custom', {
- onClick: () => this.setState({ isCollapsed: !isCollapsed }),
- }, [
- t('addCustomToken'),
- h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`),
- ]),
- this.renderCustomForm(),
+ h('div.add-token__input-container', [
+ h('input.add-token__input', {
+ type: 'text',
+ placeholder: this.props.t('searchTokens'),
+ onChange: e => this.setState({ searchQuery: e.target.value }),
+ }),
+ h('div.add-token__search-input-error-message', errors.tokenSelector),
]),
+ this.renderTokenList(),
]),
- h('div.add-token__buttons', [
- h('button.btn-cancel.add-token__button', {
- onClick: goHome,
- }, t('cancel')),
- h('button.btn-clear.add-token__button', {
- onClick: this.onNext,
- }, t('next')),
+ ]),
+ ])
+}
+
+AddTokenScreen.prototype.render = function () {
+ const {
+ isShowingConfirmation,
+ displayedTab,
+ } = this.state
+ const { goHome } = this.props
+
+ return h('div.add-token', [
+ h('div.add-token__header', [
+ h('div.add-token__header__cancel', {
+ onClick: () => goHome(),
+ }, [
+ h('i.fa.fa-angle-left.fa-lg'),
+ h('span', this.props.t('cancel')),
]),
- ])
- )
+ h('div.add-token__header__title', this.props.t('addTokens')),
+ !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',
+ }),
+ onClick: () => this.displayTab('SEARCH'),
+ }, this.props.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',
+ }),
+ onClick: () => this.displayTab('CUSTOM_TOKEN'),
+ }, this.props.t('customToken')),
+
+ ]),
+ ]),
+//
+ isShowingConfirmation
+ ? this.renderConfirmation()
+ : this.renderTabs(),
+
+ !isShowingConfirmation && h('div.add-token__buttons', [
+ h('button.btn-secondary--lg.add-token__cancel-button', {
+ onClick: goHome,
+ }, this.props.t('cancel')),
+ h('button.btn-primary--lg.add-token__confirm-button', {
+ onClick: this.onNext,
+ }, this.props.t('next')),
+ ]),
+ ])
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-16 06:20:05 +0800