diff options
Diffstat (limited to 'ui/app')
32 files changed, 450 insertions, 299 deletions
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index fa25168f1..eeba73e77 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -50,13 +50,13 @@ class JsonImportSubview extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel', { + h('button.btn-secondary.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create', { + h('button.btn-primary.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ t('import'), diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index bc9e9384e..13c8da722 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -48,13 +48,13 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel.allcaps', { + h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create.allcaps', { + h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ t('import'), diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 8ef842a2a..c820cdf6d 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -20,7 +20,7 @@ class NewAccountCreateForm extends Component { render () { const { newAccountName, defaultAccountName } = this.state - + return h('div.new-account-create-form', [ @@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel.allcaps', { + h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create.allcaps', { + h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.props.createAccount(newAccountName || defaultAccountName), }, [ t('create'), diff --git a/ui/app/actions.js b/ui/app/actions.js index bc7ee3d07..4a5962610 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -694,10 +694,10 @@ function updateSendFrom (from) { } } -function updateSendTo (to) { +function updateSendTo (to, nickname = '') { return { type: actions.UPDATE_SEND_TO, - value: to, + value: { to, nickname }, } } diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b3a5bdc20..b4ea4a532 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -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 () { @@ -300,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', [ @@ -321,10 +323,10 @@ 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', { + h('button.btn-primary--lg', { onClick: () => addTokens(tokens).then(goHome), }, t('addTokens')), ]), @@ -332,52 +334,86 @@ AddTokenScreen.prototype.renderConfirmation = function () { ) } -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', 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__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: 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', 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')), + + ]), + ]), +// + isShowingConfirmation + ? this.renderConfirmation() + : this.renderTabs(), + + !isShowingConfirmation && h('div.add-token__buttons', [ + h('button.btn-secondary--lg.add-token__cancel-button', { + onClick: goHome, + }, t('cancel')), + h('button.btn-primary--lg.add-token__confirm-button', { + onClick: this.onNext, + }, t('next')), + ]), + ]) } diff --git a/ui/app/app.js b/ui/app/app.js index 6d9296131..d1b17ab5d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -386,7 +386,7 @@ App.prototype.renderPrimary = function () { isUnlocked, } = props const isMascaraOnboarding = isMascara && isOnboarding - const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords + const isBetaUIOnboarding = betaUI && isOnboarding if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) { return h(WelcomeScreen) @@ -397,7 +397,7 @@ App.prototype.renderPrimary = function () { } // notices - if (!props.noActiveNotices) { + if (!props.noActiveNotices && !betaUI) { log.debug('rendering notice screen for unread notices.') return h(NoticeScreen, { notice: props.lastUnreadNotice, @@ -418,7 +418,7 @@ App.prototype.renderPrimary = function () { return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) } else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) { log.debug('rendering menu screen') - return props.isPopup + return !betaUI ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) : h(InitializeMenuScreen, {key: 'menuScreenInit'}) } diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index d8384c19d..22ad98ce4 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () { }, [t('revert')]), h('div.send-v2__customize-gas__buttons', [ - h('div.send-v2__customize-gas__cancel.allcaps', { + h('button.btn-secondary.send-v2__customize-gas__cancel', { onClick: this.props.hideModal, + style: { + marginRight: '10px', + }, }, [t('cancel')]), - h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { + h('button.btn-primary.send-v2__customize-gas__save', { onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), + className: error && 'btn-primary--disabled', }, [t('save')]), ]), diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index add67ea35..1b2d4009d 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -9,6 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const t = require('../../i18n') +const ToAutoComplete = require('./send/to-autocomplete') module.exports = EnsInput @@ -22,12 +23,14 @@ EnsInput.prototype.render = function () { const props = this.props const opts = extend(props, { list: 'addresses', - onChange: () => { + onChange: (recipient) => { const network = this.props.network const networkHasEnsSupport = getNetworkEnsSupport(network) + if (!networkHasEnsSupport) return - const recipient = document.querySelector('input[name="address"]').value + props.onChange(recipient) + if (recipient.match(ensRE) === null) { return this.setState({ loadingEns: false, @@ -39,34 +42,13 @@ EnsInput.prototype.render = function () { this.setState({ loadingEns: true, }) - this.checkName() + this.checkName(recipient) }, }) return h('div', { - style: { width: '100%' }, + style: { width: '100%', position: 'relative' }, }, [ - h('input.large-input.send-screen-input', opts), - // The address book functionality. - h('datalist#addresses', - [ - // Corresponds to the addresses owned. - Object.keys(props.identities).map((key) => { - const identity = props.identities[key] - return h('option', { - value: identity.address, - label: identity.name, - key: identity.address, - }) - }), - // Corresponds to previously sent-to addresses. - props.addressBook.map((identity) => { - return h('option', { - value: identity.address, - label: identity.name, - key: identity.address, - }) - }), - ]), + h(ToAutoComplete, { ...opts }), this.ensIcon(), ]) } @@ -83,8 +65,7 @@ EnsInput.prototype.componentDidMount = function () { } } -EnsInput.prototype.lookupEnsName = function () { - const recipient = document.querySelector('input[name="address"]').value +EnsInput.prototype.lookupEnsName = function (recipient) { const { ensResolution } = this.state log.info(`ENS attempting to resolve name: ${recipient}`) @@ -130,8 +111,8 @@ EnsInput.prototype.ensIcon = function (recipient) { title: hoverText, style: { position: 'absolute', - padding: '9px', - transform: 'translatex(-40px)', + top: '16px', + left: '-25px', }, }, this.ensIconContents(recipient)) } diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 75f989e86..927d73482 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-clear.account-modal__button', { + h('button.btn-primary.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, t('etherscanView')), // Holding on redesign for Export Private Key functionality - h('button.btn-clear.account-modal__button', { + h('button.btn-primary.account-modal__button', { onClick: () => showExportPrivateKeyModal(), }, t('exportPrivateKey')), diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index b642513d7..2de1240fc 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({ ]), !hideButton && h('div.deposit-ether-modal__buy-row__button', [ - h('button.deposit-ether-modal__deposit-button', { + h('button.btn-primary--lg.deposit-ether-modal__deposit-button', { onClick: onButtonClick, }, [buttonLabel]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 017177cfd..cf42e4fa2 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -81,14 +81,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { return h('div.export-private-key-buttons', {}, [ !privateKey && this.renderButton( - 'btn-cancel export-private-key__button export-private-key__button--cancel', + 'btn-secondary--lg export-private-key__button export-private-key__button--cancel', () => hideModal(), 'Cancel' ), (privateKey - ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done')) - : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) + ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done')) + : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) ), ]) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index ccd87c0a4..f9276e8a5 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -87,6 +87,7 @@ function mapDispatchToProps (dispatch, ownProps) { amount: tokenAmountInHex, errors: { to: null, amount: null }, editingTransactionId: id, + token: ownProps.token, })) dispatch(actions.showSendTokenPage()) }, diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index f4f6afb8f..9c0453a3b 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -64,13 +64,20 @@ PendingTx.prototype.componentWillMount = async function () { }) } - try { + // inspect tx data for supported special confirmation screens + let isTokenTransaction = false + if (txParams.data) { + const tokenData = abiDecoder.decodeMethod(txParams.data) + const { name: tokenMethodName } = tokenData || {} + isTokenTransaction = (tokenMethodName === 'transfer') + } + + if (isTokenTransaction) { const token = util.getContractAtAddress(txParams.to) const results = await Promise.all([ token.symbol(), token.decimals(), ]) - const [ symbol, decimals ] = results if (symbol[0] && decimals[0]) { @@ -83,11 +90,14 @@ PendingTx.prototype.componentWillMount = async function () { }) } else { this.setState({ - transactionType: TX_TYPES.SEND_ETHER, + transactionType: TX_TYPES.SEND_TOKEN, + tokenAddress: txParams.to, + tokenSymbol: null, + tokenDecimals: null, isFetching: false, }) } - } catch (e) { + } else { this.setState({ transactionType: TX_TYPES.SEND_ETHER, isFetching: false, diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index d1319b6dc..08c26a91f 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -69,13 +69,13 @@ function mapDispatchToProps (dispatch) { updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)), updateTx: txData => dispatch(actions.updateTransaction(txData)), setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)), - addToAddressBook: address => dispatch(actions.addToAddressBook(address)), + addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)), updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)), updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)), updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)), updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)), - updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)), + updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)), updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)), diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 3f8c17932..5729f893c 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () { ]), - !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', { + !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 7bf34e7b6..810a52e55 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () { } return h('div.request-signature__footer', [ - h('button.request-signature__footer__cancel-button', { + h('button.btn-secondary--lg.request-signature__footer__cancel-button', { onClick: cancel, }, t('cancel')), - h('button.request-signature__footer__sign-button', { + h('button.btn-primary--lg', { onClick: sign, }, t('sign')), ]) diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 96d776270..bf2065106 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear.hero-balance-button.allcaps', { + h('button.btn-primary.hero-balance-button', { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), }, t('deposit')), - h('button.btn-clear.hero-balance-button.allcaps', { + h('button.btn-primary.hero-balance-button', { style: { marginLeft: '0.8em', }, @@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear.hero-balance-button', { + h('button.btn-primary.hero-balance-button', { onClick: showSendTokenPage, }, t('send')), ]) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 18452205c..2c6d7f784 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -168,7 +168,7 @@ WalletView.prototype.render = function () { h(TokenList), - h('button.btn-clear.wallet-view__add-token-button', { + h('button.btn-primary.wallet-view__add-token-button', { onClick: () => { showAddTokenPage() hideSidebar() diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 13020f62f..f5c1de67c 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -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,50 @@ &__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; + &__confirm-button, + &__cancel-button { margin: 0 12px; - padding: 10px 22px; + padding: 10px 13px; height: 54px; + width: 133px; + margin-right: 1.2rem; + } + + &__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 +291,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 +405,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 { @@ -334,7 +435,7 @@ } &__buttons { - padding: 12px 0; + padding: 1rem; margin: 0; border-top: 1px solid $gallery; width: 100%; diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8df8829f2..04e1ed96e 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,6 +2,76 @@ Buttons */ +.btn-primary, +.btn-primary--lg, +.btn-secondary, +.btn-secondary--lg { + background: $white; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + transition: border-color .3s ease; + padding: 0 20px; + min-width: 140px; + text-transform: uppercase; +} + +.btn-primary, +.btn-primary--lg { + color: $curious-blue; + border: 2px solid $spindle; + + &:active { + background: $zumthor; + border-color: $curious-blue; + } + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-secondary, +.btn-secondary--lg { + color: $scorpion; + border: 2px solid $dusty-gray; + + &:active { + background: $gallery; + border-color: $dusty-gray; + } + + &:hover { + border-color: $scorpion; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-primary, .btn-secondary { + height: 44px; +} + +.btn-primary--lg, .btn-secondary--lg { + height: 54px; +} + .btn-green { background-color: #02c9b1; // TODO: reusable color in colors.css } @@ -130,20 +200,6 @@ button.btn-thin { font-size: 13px; } -.btn-secondary { - border: 1px solid #979797; - border-radius: 2px; - background-color: $white; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; - - &[disabled] { - background-color: $white !important; - opacity: .5; - } -} - .btn-tertiary { border: 1px solid transparent; border-radius: 2px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a3f051361..69cde8a0f 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -103,10 +103,11 @@ } .hero-balance-button { + min-width: initial; width: 6rem; @media #{$sub-mid-size-breakpoint-range} { - padding: 0.4rem; + padding: .4rem; width: 4rem; display: flex; flex: 1; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index a8d5e8dc2..9ae3ea7fa 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -261,7 +261,7 @@ .account-modal__button { margin-top: 17px; padding: 10px 22px; - width: 235px; + width: 286px; } } @@ -341,9 +341,8 @@ .export-private-key__button { margin-top: 17px; - padding: 10px 22px; width: 141px; - height: 54px; + min-width: initial; } .export-private-key__button--cancel { @@ -765,15 +764,7 @@ } &__deposit-button, .shapeshift-form__shapeshift-buy-btn { - height: 54px; width: 257px; - border: 1px solid $curious-blue; - border-radius: 4px; - display: flex; - justify-content: center; - font-size: 16px; - color: $curious-blue; - background-color: $white; } .shapeshift-form-wrapper { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index c2cefe4ad..aa7fed956 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -192,29 +192,8 @@ justify-content: space-between; } - &__button-cancel, - &__button-create { - height: 55px; + &__button { width: 150px; - border-radius: 2px; - background-color: #FFFFFF; - } - - &__button-cancel { - border: 1px solid $dusty-gray; - color: $dusty-gray; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; + min-width: initial; } - - &__button-create { - border: 1px solid $curious-blue; - color: $curious-blue; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; - } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index d81099bfa..083481b8f 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -162,6 +162,7 @@ &__row { display: flex; flex-flow: column; + flex: 1 0 auto; } &__row-title { @@ -190,41 +191,19 @@ width: 100%; display: flex; align-items: center; - justify-content: space-evenly; + justify-content: center; font-size: 22px; position: relative; flex: 0 0 auto; border-top: 1px solid $geyser; + padding: 1.6rem; - &__cancel-button, - &__sign-button { - display: flex; - align-items: center; - justify-content: center; - flex: 1 0 auto; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - height: 55px; - line-height: 32px; - cursor: pointer; - border-radius: 2px; - box-shadow: none; - max-width: 162px; - margin: 12px; + button { + width: 165px; } &__cancel-button { - background: none; - border: 1px solid $dusty-gray; - margin-right: 6px; - } - - &__sign-button { - background-color: $caribbean-green; - border-width: 0; - color: $white; - margin-left: 6px; + margin-right: 1.2rem; } } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 263b362ca..89d2be891 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -782,7 +782,6 @@ &__buttons { display: flex; justify-content: space-between; - width: 181.75px; margin-right: 21.25px; } @@ -800,13 +799,8 @@ } &__cancel, &__save, &__save__error { - height: 34.64px; width: 85.74px; - border: 1px solid $dusty-gray; - border-radius: 2px; - font-family: 'DIN OT'; - font-size: 12px; - color: $dusty-gray; + min-width: initial; } &__save__error { diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index d60ebd934..dcc9b98d5 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -130,24 +130,32 @@ cursor: pointer; } -.settings__clear-button { - font-size: 16px; - border: 1px solid $curious-blue; - color: $curious-blue; - border-radius: 2px; - padding: 18px; - background-color: $white; - text-transform: uppercase; -} - -.settings__clear-button--red { - border: 1px solid $monzo; +.settings__button--red { + border-color: lighten($monzo, 10%); color: $monzo; + + &:active { + background: lighten($monzo, 55%); + border-color: $monzo; + } + + &:hover { + border-color: $monzo; + } } -.settings__clear-button--orange { - border: 1px solid rgba(247, 134, 28, 1); - color: rgba(247, 134, 28, 1); +.settings__button--orange { + border-color: lighten($ecstasy, 20%); + color: $ecstasy; + + &:active { + background: lighten($ecstasy, 40%); + border-color: $ecstasy; + } + + &:hover { + border-color: $ecstasy; + } } .settings__info-logo-wrapper { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 08e639d74..92321394b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -132,7 +132,7 @@ input.large-input { height: 55px; font-size: 1rem; text-transform: uppercase; - margin-right: 1rem; + margin-right: 1.2rem; border-radius: 2px; &:last-of-type { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 640fd95b8..51548306f 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -51,6 +51,9 @@ $java: #29b6af; $wild-strawberry: #ff4a8d; $cornflower-blue: #7057ff; $saffron: #f6c343; +$dodger-blue: #3099f2; +$zumthor: #edf7ff; +$ecstasy: #f7861c; /* Z-Indicies diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index e6e02d057..9cba5e83b 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -39,6 +39,7 @@ function reduceMetamask (state, action) { maxModeOn: false, editingTransactionId: null, forceGasMin: null, + toNickname: '', }, coinOptions: {}, useBlockie: false, @@ -238,7 +239,8 @@ function reduceMetamask (state, action) { return extend(metamaskState, { send: { ...metamaskState.send, - to: action.value, + to: action.value.to, + toNickname: action.value.nickname, }, }) diff --git a/ui/app/selectors.js b/ui/app/selectors.js index d37c26f7e..2bdc39004 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -56,8 +56,9 @@ function getSelectedToken (state) { const tokens = state.metamask.tokens || [] const selectedTokenAddress = state.metamask.selectedTokenAddress const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0] + const sendToken = state.metamask.send.token - return selectedToken || null + return selectedToken || sendToken || null } function getSelectedTokenExchangeRate (state) { diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index de71ce94c..620da73f8 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -7,7 +7,7 @@ const ethAbi = require('ethereumjs-abi') const ethUtil = require('ethereumjs-util') const FromDropdown = require('./components/send/from-dropdown') -const ToAutoComplete = require('./components/send/to-autocomplete') +const EnsInput = require('./components/ens-input') const CurrencyDisplay = require('./components/send/currency-display') const MemoTextArea = require('./components/send/memo-textarea') const GasFeeDisplay = require('./components/send/gas-fee-display-v2') @@ -253,7 +253,7 @@ SendTransactionScreen.prototype.renderFromRow = function () { ]) } -SendTransactionScreen.prototype.handleToChange = function (to) { +SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') { const { updateSendTo, updateSendErrors, @@ -269,12 +269,12 @@ SendTransactionScreen.prototype.handleToChange = function (to) { toError = t('fromToSame') } - updateSendTo(to) + updateSendTo(to, nickname) updateSendErrors({ to: toError }) } SendTransactionScreen.prototype.renderToRow = function () { - const { toAccounts, errors, to } = this.props + const { toAccounts, errors, to, network } = this.props const { toDropdownOpen } = this.state @@ -289,7 +289,10 @@ SendTransactionScreen.prototype.renderToRow = function () { ]), h('div.send-v2__form-field', [ - h(ToAutoComplete, { + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + network, to, accounts: Object.entries(toAccounts).map(([key, account]) => account), dropdownOpen: toDropdownOpen, @@ -510,13 +513,13 @@ SendTransactionScreen.prototype.renderFooter = function () { const noErrors = !amountError && toError === null return h('div.page-container__footer', [ - h('button.btn-cancel.page-container__footer-button', { + h('button.btn-secondary--lg.page-container__footer-button', { onClick: () => { clearSend() goHome() }, }, t('cancel')), - h('button.btn-clear.page-container__footer-button', { + h('button.btn-primary--lg.page-container__footer-button', { disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), }, t('next')), @@ -538,11 +541,11 @@ SendTransactionScreen.prototype.render = function () { ) } -SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) { +SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') { const { toAccounts, addToAddressBook } = this.props if (!toAccounts.find(({ address }) => newAddress === address)) { // TODO: nickname, i.e. addToAddressBook(recipient, nickname) - addToAddressBook(newAddress) + addToAddressBook(newAddress, nickname) } } @@ -603,6 +606,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { updateTx, selectedToken, editingTransactionId, + toNickname, errors: { amount: amountError, to: toError }, } = this.props @@ -612,7 +616,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { return } - this.addToAddressBookIfNew(to) + this.addToAddressBookIfNew(to, toNickname) if (editingTransactionId) { const editedTx = this.getEditedTx() diff --git a/ui/app/settings.js b/ui/app/settings.js index 105cbb40b..78ca6c94b 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -200,7 +200,7 @@ class Settings extends Component { ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button', { + h('button.btn-primary--lg.settings__button', { onClick (event) { window.logStateString((err, result) => { if (err) { @@ -225,7 +225,7 @@ class Settings extends Component { h('div.settings__content-item', t('revealSeedWords')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--red', { + h('button.btn-primary--lg.settings__button--red', { onClick (event) { event.preventDefault() revealSeedConfirmation() @@ -245,7 +245,7 @@ class Settings extends Component { h('div.settings__content-item', t('useOldUI')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--orange', { + h('button.btn-primary--lg.settings__button--orange', { onClick (event) { event.preventDefault() setFeatureFlagToBeta() @@ -264,7 +264,7 @@ class Settings extends Component { h('div.settings__content-item', t('resetAccount')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--orange', { + h('button.btn-primary--lg.settings__button--orange', { onClick (event) { event.preventDefault() showResetAccountConfirmationModal() |