TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates Add token screen to latest design.

Browse Source
feature/default_network_editable
Dan 7 years ago
parent dc78594c3a
commit fa022e0883
4 changed files with 256 additions and 99 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      app/_locales/en/messages.json
  2. 143
      ui/app/add-token.js
  3. 196
      ui/app/css/itcss/components/add-token.scss
  4. 1
      ui/app/css/itcss/settings/variables.scss

15
app/_locales/en/messages.json
Unescape View File

@ -171,6 +171,9 @@
"customGas": { "customGas": {
"message": "Customize Gas" "message": "Customize Gas"
}, },
"customToken": {
"message": "Custom Token"
},
"customize": { "customize": {
"message": "Customize" "message": "Customize"
}, },
@ -415,6 +418,9 @@
"message": "JSON File", "message": "JSON File",
"description": "format for importing an account" "description": "format for importing an account"
}, },
"keepTrackTokens": {
"message": "Keep track of the tokens you’ve bought with your MetaMask account."
},
"kovan": { "kovan": {
"message": "Kovan Test Network" "message": "Kovan Test Network"
}, },
@ -424,6 +430,9 @@
"max": { "max": {
"message": "Max" "message": "Max"
}, },
"learnMore": {
"message": "Learn more."
},
"lessThanMax": { "lessThanMax": {
"message": "must be less than or equal to $1.", "message": "must be less than or equal to $1.",
"description": "helper for inputting hex as decimal input" "description": "helper for inputting hex as decimal input"
@ -564,6 +573,9 @@
"pleaseReviewTransaction": { "pleaseReviewTransaction": {
"message": "Please review your transaction." "message": "Please review your transaction."
}, },
"popularTokens": {
"message": "Popular Tokens"
},
"privacyMsg": { "privacyMsg": {
"message": "Privacy Policy" "message": "Privacy Policy"
}, },
@ -702,6 +714,9 @@
"onlySendToEtherAddress": { "onlySendToEtherAddress": {
"message": "Only send ETH to an Ethereum address." "message": "Only send ETH to an Ethereum address."
}, },
"searchTokens": {
"message": "Search Tokens"
},
"sendTokensAnywhere": { "sendTokensAnywhere": {
"message": "Send Tokens to anyone with an Ethereum account" "message": "Send Tokens to anyone with an Ethereum account"
}, },

143
ui/app/add-token.js
Unescape View File

@ -55,10 +55,10 @@ function AddTokenScreen () {
customSymbol: '', customSymbol: '',
customDecimals: '', customDecimals: '',
searchQuery: '', searchQuery: '',
isCollapsed: true,
selectedTokens: {}, selectedTokens: {},
errors: {}, errors: {},
autoFilled: false, autoFilled: false,
displayedTab: 'SEARCH',
} }
this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this) this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this)
this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this) this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this)
@ -192,7 +192,7 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address)
AddTokenScreen.prototype.renderCustomForm = function () { AddTokenScreen.prototype.renderCustomForm = function () {
const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state
return !this.state.isCollapsed && ( return (
h('div.add-token__add-custom-form', [ h('div.add-token__add-custom-form', [
h('div', { h('div', {
className: classnames('add-token__add-custom-field', { className: classnames('add-token__add-custom-field', {
@ -247,33 +247,36 @@ AddTokenScreen.prototype.renderTokenList = function () {
}) })
const results = [...addressSearchResult, ...fuseSearchResult] const results = [...addressSearchResult, ...fuseSearchResult]
return Array(6).fill(undefined) return h('div', [
.map((_, i) => { results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')),
const { logo, symbol, name, address } = results[i] || {} h('div.add-token__token-icons-container', Array(6).fill(undefined)
const tokenAlreadyAdded = this.checkExistingAddresses(address) .map((_, i) => {
return Boolean(logo || symbol || name) && ( const { logo, symbol, name, address } = results[i] || {}
h('div.add-token__token-wrapper', { const tokenAlreadyAdded = this.checkExistingAddresses(address)
className: classnames({ return Boolean(logo || symbol || name) && (
'add-token__token-wrapper--selected': selectedTokens[address], h('div.add-token__token-wrapper', {
'add-token__token-wrapper--disabled': tokenAlreadyAdded, className: classnames({
}), 'add-token__token-wrapper--selected': selectedTokens[address],
onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]), 'add-token__token-wrapper--disabled': tokenAlreadyAdded,
}, [ }),
h('div.add-token__token-icon', { onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
style: { }, [
backgroundImage: logo && `url(images/contract/${logo})`, 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), h('div.add-token__token-data', [
]), h('div.add-token__token-symbol', symbol),
// tokenAlreadyAdded && ( h('div.add-token__token-name', name),
// h('div.add-token__token-message', 'Already added') ]),
// ), // tokenAlreadyAdded && (
]) // h('div.add-token__token-message', 'Already added')
) // ),
}) ])
)
})),
])
} }
AddTokenScreen.prototype.renderConfirmation = function () { 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 () { AddTokenScreen.prototype.render = function () {
const { isCollapsed, errors, isShowingConfirmation } = this.state const {
errors,
isShowingConfirmation,
displayedTab,
} = this.state
const { goHome } = this.props const { goHome } = this.props
return isShowingConfirmation return isShowingConfirmation
? this.renderConfirmation() ? this.renderConfirmation()
: ( : (
h('div.add-token', [ h('div.add-token', [
h('div.add-token__wrapper', [ h('div.add-token__header', [
h('div.add-token__title-container', [ h('div.add-token__header__cancel', {
h('div.add-token__title', t('addToken')), onClick: () => goHome(),
h('div.add-token__description', t('tokenWarning1')), }, [
h('div.add-token__description', t('tokenSelection')), h('i.fa.fa-angle-left.fa-lg'),
h('span', t('cancel')),
]), ]),
h('div.add-token__content-container', [ h('div.add-token__header__title', t('addTokens')),
h('div.add-token__input-container', [ h('div.add-token__header__tabs', [
h('input.add-token__input', {
type: 'text', h('div.add-token__header__tabs__tab', {
placeholder: t('search'), className: classnames('add-token__header__tabs__tab', {
onChange: e => this.setState({ searchQuery: e.target.value }), '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), onClick: () => this.displayTab('SEARCH'),
]), }, t('search')),
h(
'div.add-token__token-icons-container', h('div.add-token__header__tabs__tab', {
this.renderTokenList(), 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 }), displayedTab === 'CUSTOM_TOKEN'
}, [ ? this.renderCustomForm()
t('addCustomToken'), : h('div', [
h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`), 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('div.add-token__buttons', [
h('button.btn-cancel.add-token__button', { h('button.btn-cancel.add-token__button--cancel', {
onClick: goHome, onClick: goHome,
}, t('cancel')), }, t('cancel')),
h('button.btn-clear.add-token__button', { h('button.btn-clear.add-token__button', {

196
ui/app/css/itcss/components/add-token.scss
Unescape View File

@ -1,37 +1,118 @@
.add-token { .add-token {
width: 498px; width: 498px;
max-height: 805px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center;
position: relative; position: relative;
z-index: 12; z-index: 12;
font-family: 'DIN Next Light'; font-family: 'Roboto';
background: white;
border-radius: 8px;
&__wrapper { &__wrapper {
background-color: $white; background-color: $white;
box-shadow: 0 2px 4px 0 rgba($black, .08);
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
} }
&__title-container { &__header {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: center; padding: 16px 16px 0px;
padding: 30px 60px 12px; border-bottom: 1px solid $geyser;
border-bottom: 1px solid $gallery;
flex: 0 0 auto; 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 { &__info-box {
color: $scorpion; height: 96px;
font-size: 20px; margin: 20px 24px 0px;
line-height: 26px; border-radius: 4px;
text-align: center; background-color: $alabaster;
font-weight: 600; position: relative;
margin-bottom: 12px; 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 { &__description {
@ -48,19 +129,17 @@
&__content-container { &__content-container {
width: 100%; width: 100%;
border-bottom: 1px solid $gallery;
} }
&__input-container { &__input-container {
padding: 11px 0; display: flex;
width: 263px;
margin: 0 auto;
position: relative; position: relative;
} }
&__search-input-error-message { &__search-input-error-message {
position: absolute; position: absolute;
bottom: -10px; bottom: -10px;
left: 22px;
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -69,16 +148,24 @@
color: $red; color: $red;
} }
&__input { &__input,
width: 100%; &__add-custom-input {
border: 2px solid $gallery; height: 54px;
padding: 21px 6px;
border: 1px solid $geyser;
border-radius: 4px; border-radius: 4px;
padding: 5px 15px; margin: 22px 24px;
font-size: 14px; position: relative;
line-height: 19px; flex: 1 0 auto;
color: $scorpion;
font-family: Roboto;
font-size: 16px;
&::placeholder { &::placeholder {
color: $silver; color: $scorpion;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
} }
} }
@ -115,13 +202,14 @@
&__add-custom-form { &__add-custom-form {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
margin: 8px 0 51px; margin: 40px 0 30px;
} }
&__add-custom-field { &__add-custom-field {
width: 290px;
margin: 0 auto;
position: relative; position: relative;
display: flex;
flex-flow: column;
flex: 1 0 auto;
&--error { &--error {
.add-token__add-custom-input { .add-token__add-custom-input {
@ -132,7 +220,8 @@
&__add-custom-error-message { &__add-custom-error-message {
position: absolute; position: absolute;
bottom: -21px; bottom: 1px;
left: 22px;
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -144,39 +233,57 @@
&__add-custom-label { &__add-custom-label {
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
margin-bottom: 8px; margin-left: 22px;
color: $scorpion;
} }
&__add-custom-input { &__add-custom-input {
width: 100%; margin-top: 6px;
border: 1px solid $silver; font-size: 16px;
padding: 5px 15px;
font-size: 14px;
line-height: 19px;
&::placeholder { &::placeholder {
color: $silver; color: $silver;
font-size: 16px;
} }
} }
&__add-custom-field + &__add-custom-field { &__add-custom-field + &__add-custom-field {
margin-top: 21px; margin-top: 6px;
} }
&__buttons { &__buttons {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
margin: 30px 0 51px;
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 30px;
padding-top: 20px;
} }
&__button { &__button,
flex: 1 0 141px; &__button--cancel {
margin: 0 12px; margin: 0 12px;
padding: 10px 22px; padding: 10px 13px;
height: 54px; 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 { &__token-icons-container {
@ -191,7 +298,7 @@
flex: 0 0 42.5%; flex: 0 0 42.5%;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
margin: 2.5%; margin: 0% 2.5% 1.5%;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
@ -305,13 +412,14 @@
top: 0; top: 0;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 100%; flex: 1 0 auto;
&__wrapper { &__wrapper {
box-shadow: none !important; box-shadow: none !important;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: scroll;
height: 400px;
} }
&__footers { &__footers {

1
ui/app/css/itcss/settings/variables.scss
Unescape View File

@ -51,6 +51,7 @@ $java: #29b6af;
$wild-strawberry: #ff4a8d; $wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff; $cornflower-blue: #7057ff;
$saffron: #f6c343; $saffron: #f6c343;
$dodger-blue: #3099f2;
/* /*
Z-Indicies Z-Indicies

Write Preview
Loading…
Cancel
Save