mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Updates Add token screen to latest design.
This commit is contained in:
parent
dc78594c3a
commit
fa022e0883
@ -171,6 +171,9 @@
|
||||
"customGas": {
|
||||
"message": "Customize Gas"
|
||||
},
|
||||
"customToken": {
|
||||
"message": "Custom Token"
|
||||
},
|
||||
"customize": {
|
||||
"message": "Customize"
|
||||
},
|
||||
@ -415,6 +418,9 @@
|
||||
"message": "JSON File",
|
||||
"description": "format for importing an account"
|
||||
},
|
||||
"keepTrackTokens": {
|
||||
"message": "Keep track of the tokens you’ve bought with your MetaMask account."
|
||||
},
|
||||
"kovan": {
|
||||
"message": "Kovan Test Network"
|
||||
},
|
||||
@ -424,6 +430,9 @@
|
||||
"max": {
|
||||
"message": "Max"
|
||||
},
|
||||
"learnMore": {
|
||||
"message": "Learn more."
|
||||
},
|
||||
"lessThanMax": {
|
||||
"message": "must be less than or equal to $1.",
|
||||
"description": "helper for inputting hex as decimal input"
|
||||
@ -564,6 +573,9 @@
|
||||
"pleaseReviewTransaction": {
|
||||
"message": "Please review your transaction."
|
||||
},
|
||||
"popularTokens": {
|
||||
"message": "Popular Tokens"
|
||||
},
|
||||
"privacyMsg": {
|
||||
"message": "Privacy Policy"
|
||||
},
|
||||
@ -702,6 +714,9 @@
|
||||
"onlySendToEtherAddress": {
|
||||
"message": "Only send ETH to an Ethereum address."
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Search Tokens"
|
||||
},
|
||||
"sendTokensAnywhere": {
|
||||
"message": "Send Tokens to anyone with an Ethereum account"
|
||||
},
|
||||
|
@ -55,10 +55,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)
|
||||
@ -192,7 +192,7 @@ 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', {
|
||||
@ -247,33 +247,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', 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 () {
|
||||
@ -332,46 +335,76 @@ AddTokenScreen.prototype.renderConfirmation = function () {
|
||||
)
|
||||
}
|
||||
|
||||
AddTokenScreen.prototype.displayTab = function (selectedTab) {
|
||||
this.setState({ displayedTab: selectedTab })
|
||||
}
|
||||
|
||||
AddTokenScreen.prototype.render = function () {
|
||||
const { isCollapsed, errors, isShowingConfirmation } = this.state
|
||||
const {
|
||||
errors,
|
||||
isShowingConfirmation,
|
||||
displayedTab,
|
||||
} = this.state
|
||||
const { goHome } = this.props
|
||||
|
||||
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__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__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__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',
|
||||
}),
|
||||
h('div.add-token__search-input-error-message', errors.tokenSelector),
|
||||
]),
|
||||
h(
|
||||
'div.add-token__token-icons-container',
|
||||
this.renderTokenList(),
|
||||
),
|
||||
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')),
|
||||
|
||||
]),
|
||||
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'}`),
|
||||
]),
|
||||
|
||||
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(),
|
||||
]),
|
||||
this.renderCustomForm(),
|
||||
]),
|
||||
]),
|
||||
h('div.add-token__buttons', [
|
||||
h('button.btn-cancel.add-token__button', {
|
||||
h('button.btn-cancel.add-token__button--cancel', {
|
||||
onClick: goHome,
|
||||
}, t('cancel')),
|
||||
h('button.btn-clear.add-token__button', {
|
||||
|
@ -1,37 +1,118 @@
|
||||
.add-token {
|
||||
width: 498px;
|
||||
max-height: 805px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
font-family: 'DIN Next Light';
|
||||
font-family: 'Roboto';
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
|
||||
&__wrapper {
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 4px 0 rgba($black, .08);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__title-container {
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
padding: 30px 60px 12px;
|
||||
border-bottom: 1px solid $gallery;
|
||||
padding: 16px 16px 0px;
|
||||
border-bottom: 1px solid $geyser;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&__cancel {
|
||||
color: $dodger-blue;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-family: Roboto;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $tundora;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
margin-left: 22px;
|
||||
display: flex;
|
||||
|
||||
&__tab {
|
||||
height: 54px;
|
||||
padding: 15px 10px;
|
||||
color: $dusty-gray;
|
||||
font-family: Roboto;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__tab:first-of-type {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__unselected:hover {
|
||||
color: $black;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&__selected {
|
||||
color: $curious-blue;
|
||||
border-bottom: 3px solid $curious-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $scorpion;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
&__info-box {
|
||||
height: 96px;
|
||||
margin: 20px 24px 0px;
|
||||
border-radius: 4px;
|
||||
background-color: $alabaster;
|
||||
position: relative;
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
&__close::after {
|
||||
content: '\00D7';
|
||||
font-size: 29px;
|
||||
font-weight: 200;
|
||||
color: $dusty-gray;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $mid-gray;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
&__copy,
|
||||
&__copy--blue {
|
||||
color: $mid-gray;
|
||||
font-family: Roboto;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__copy--blue {
|
||||
color: $curious-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@ -48,19 +129,17 @@
|
||||
|
||||
&__content-container {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $gallery;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
padding: 11px 0;
|
||||
width: 263px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__search-input-error-message {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 22px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
@ -69,16 +148,24 @@
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
border: 2px solid $gallery;
|
||||
&__input,
|
||||
&__add-custom-input {
|
||||
height: 54px;
|
||||
padding: 21px 6px;
|
||||
border: 1px solid $geyser;
|
||||
border-radius: 4px;
|
||||
padding: 5px 15px;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin: 22px 24px;
|
||||
position: relative;
|
||||
flex: 1 0 auto;
|
||||
color: $scorpion;
|
||||
font-family: Roboto;
|
||||
font-size: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $silver;
|
||||
color: $scorpion;
|
||||
font-family: Roboto;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,13 +202,14 @@
|
||||
&__add-custom-form {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin: 8px 0 51px;
|
||||
margin: 40px 0 30px;
|
||||
}
|
||||
|
||||
&__add-custom-field {
|
||||
width: 290px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1 0 auto;
|
||||
|
||||
&--error {
|
||||
.add-token__add-custom-input {
|
||||
@ -132,7 +220,8 @@
|
||||
|
||||
&__add-custom-error-message {
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
bottom: 1px;
|
||||
left: 22px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
@ -144,39 +233,57 @@
|
||||
&__add-custom-label {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 22px;
|
||||
color: $scorpion;
|
||||
}
|
||||
|
||||
&__add-custom-input {
|
||||
width: 100%;
|
||||
border: 1px solid $silver;
|
||||
padding: 5px 15px;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-top: 6px;
|
||||
font-size: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $silver;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__add-custom-field + &__add-custom-field {
|
||||
margin-top: 21px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
margin: 30px 0 51px;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
flex: 1 0 141px;
|
||||
&__button,
|
||||
&__button--cancel {
|
||||
margin: 0 12px;
|
||||
padding: 10px 22px;
|
||||
height: 54px;
|
||||
padding: 10px 13px;
|
||||
height: 44px;
|
||||
width: 133px;
|
||||
border: 1px solid $curious-blue;
|
||||
border-radius: 2px;
|
||||
font-color: $curious-blue;
|
||||
}
|
||||
|
||||
&__button--cancel {
|
||||
border-color: $dusty-gray;
|
||||
font-color: $dusty-gray;
|
||||
}
|
||||
|
||||
&__token-icons-title {
|
||||
color: #5B5D67;
|
||||
font-family: Roboto;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin-left: 24px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&__token-icons-container {
|
||||
@ -191,7 +298,7 @@
|
||||
flex: 0 0 42.5%;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
margin: 2.5%;
|
||||
margin: 0% 2.5% 1.5%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
@ -305,13 +412,14 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
flex: 1 0 auto;
|
||||
|
||||
&__wrapper {
|
||||
box-shadow: none !important;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
&__footers {
|
||||
|
@ -51,6 +51,7 @@ $java: #29b6af;
|
||||
$wild-strawberry: #ff4a8d;
|
||||
$cornflower-blue: #7057ff;
|
||||
$saffron: #f6c343;
|
||||
$dodger-blue: #3099f2;
|
||||
|
||||
/*
|
||||
Z-Indicies
|
||||
|
Loading…
x
Reference in New Issue
Block a user