m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Use new header on add token confirmation screen.

Browse Source
This commit is contained in:
Dan 2018-03-25 15:17:10 -02:30
parent fa022e0883
commit c710fb8f50
1 changed files with 68 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
ui/app/add-token.js
View File

@ -303,7 +303,6 @@ 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__content-container.add-token__confirmation-content', [
@ -339,78 +338,82 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) {
this.setState({ displayedTab: selectedTab })
}
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', t('whatsThis')),
h('div.add-token__info-box__copy', t('keepTrackTokens')),
h('div.add-token__info-box__copy--blue', t('learnMore')),
]),
h('div.add-token__input-container', [
h('input.add-token__input', {
type: 'text',
placeholder: t('searchTokens'),
onChange: e => this.setState({ searchQuery: e.target.value }),
}),
h('div.add-token__search-input-error-message', errors.tokenSelector),
]),
this.renderTokenList(),
]),
]),
])
}
AddTokenScreen.prototype.render = function () {
const {
errors,
isShowingConfirmation,
displayedTab,
} = this.state
const { goHome } = this.props
return isShowingConfirmation
? this.renderConfirmation()
: (
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', t('cancel')),
]),
h('div.add-token__header__title', t('addTokens')),
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'),
}, 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'),
}, t('customToken')),
]),
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', t('cancel')),
]),
h('div.add-token__header__title', 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'),
}, 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'),
}, t('customToken')),
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')),
]),
h('div.add-token__input-container', [
h('input.add-token__input', {
type: 'text',
placeholder: 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--cancel', {
onClick: goHome,
}, t('cancel')),
h('button.btn-clear.add-token__button', {
onClick: this.onNext,
}, t('next')),
]),
])
)
]),
isShowingConfirmation
? this.renderConfirmation()
: this.renderTabs(),
!isShowingConfirmation && h('div.add-token__buttons', [
h('button.btn-cancel.add-token__button--cancel', {
onClick: goHome,
}, t('cancel')),
h('button.btn-clear.add-token__button', {
onClick: this.onNext,
}, t('next')),
]),
])
}