From bad70eb1b328aa911a2523ccab642d7607161b4b Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 22 Jan 2018 23:48:03 -1000 Subject: first steps to i18n --- ui/app/components/account-dropdowns.js | 12 +++++----- ui/app/components/account-export.js | 8 +++---- ui/app/components/account-menu/index.js | 14 ++++++------ ui/app/components/buy-button-subview.js | 8 +++---- ui/app/components/coinbase-form.js | 4 ++-- ui/app/components/copyButton.js | 2 +- ui/app/components/copyable.js | 2 +- ui/app/components/customize-gas-modal/index.js | 20 ++++++++--------- .../dropdowns/components/account-dropdowns.js | 19 ++++++++-------- ui/app/components/dropdowns/network-dropdown.js | 26 +++++++++++----------- ui/app/components/dropdowns/token-menu-dropdown.js | 2 +- ui/app/components/ens-input.js | 4 ++-- ui/app/components/hex-as-decimal-input.js | 2 +- ui/app/components/network.js | 24 ++++++++++---------- ui/app/components/notice.js | 2 +- ui/app/components/pending-msg-details.js | 3 +-- ui/app/components/pending-msg.js | 14 +++++------- ui/app/components/pending-personal-msg-details.js | 3 +-- ui/app/components/pending-typed-msg-details.js | 2 +- ui/app/components/pending-typed-msg.js | 6 ++--- ui/app/components/shapeshift-form.js | 22 +++++++++--------- ui/app/components/shift-list-item.js | 8 +++---- ui/app/components/signature-request.js | 24 +++++++++----------- ui/app/components/token-list.js | 6 ++--- ui/app/components/transaction-list-item.js | 16 ++++++------- ui/app/components/transaction-list.js | 3 +-- ui/app/components/tx-list-item.js | 2 +- ui/app/components/tx-list.js | 4 ++-- ui/app/components/tx-view.js | 6 ++--- ui/app/components/wallet-view.js | 8 +++---- ui/app/first-time/init-menu.js | 25 +++++++++++++-------- 31 files changed, 148 insertions(+), 153 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 0c34a5154..3e5805c0e 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -79,7 +79,7 @@ class AccountDropdowns extends Component { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', 'LOOSE') : null + return isLoose ? h('.keyring-label', t('looseCaps')) : null } catch (e) { return } } @@ -129,7 +129,7 @@ class AccountDropdowns extends Component { diameter: 32, }, ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')), ], ), h( @@ -192,7 +192,7 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, }, - 'View account on Etherscan', + t('etherscanView'), ), h( DropdownMenuItem, @@ -204,7 +204,7 @@ class AccountDropdowns extends Component { actions.showQrView(selected, identity ? identity.name : '') }, }, - 'Show QR Code', + t('qrCode'), ), h( DropdownMenuItem, @@ -216,7 +216,7 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, }, - 'Copy Address to clipboard', + t('copyAddress'), ), h( DropdownMenuItem, @@ -226,7 +226,7 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, }, - 'Export Private Key', + t('exportPrivateKey'), ), ] ) diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 32b103c86..346872a97 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -35,7 +35,7 @@ ExportAccountView.prototype.render = function () { if (notExporting) return h('div') if (exportRequested) { - const warning = `Export private keys at your own risk.` + const warning = t('exportPrivateKeyWarning') return ( h('div', { style: { @@ -53,7 +53,7 @@ ExportAccountView.prototype.render = function () { h('p.error', warning), h('input#exportAccount.sizing-input', { type: 'password', - placeholder: 'confirm password', + placeholder: t('confirmPasswordSmall'), onKeyPress: this.onExportKeyPress.bind(this), style: { position: 'relative', @@ -74,10 +74,10 @@ ExportAccountView.prototype.render = function () { style: { marginRight: '10px', }, - }, 'Submit'), + }, t('submit')), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, 'Cancel'), + }, t('cancel')), ]), (this.props.warning) && ( h('span.error', { diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index aeb8a0b38..aec00ff6b 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -70,10 +70,10 @@ AccountMenu.prototype.render = function () { h(Item, { className: 'account-menu__header', }, [ - 'My Accounts', + t('myAccounts'), h('button.account-menu__logout-button', { onClick: lockMetamask, - }, 'Log out'), + }, t('logout')), ]), h(Divider), h('div.account-menu__accounts', this.renderAccounts()), @@ -81,23 +81,23 @@ AccountMenu.prototype.render = function () { h(Item, { onClick: () => showNewAccountPage('CREATE'), icon: h('img', { src: 'images/plus-btn-white.svg' }), - text: 'Create Account', + text: t('createAccount'), }), h(Item, { onClick: () => showNewAccountPage('IMPORT'), icon: h('img', { src: 'images/import-account.svg' }), - text: 'Import Account', + text: t('importAccount'), }), h(Divider), h(Item, { onClick: showInfoPage, icon: h('img', { src: 'images/mm-info-icon.svg' }), - text: 'Info & Help', + text: t('infoHelp'), }), h(Item, { onClick: showConfigPage, icon: h('img', { src: 'images/settings.svg' }), - text: 'Settings', + text: t('settings'), }), ]) } @@ -155,6 +155,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', 'IMPORTED') : null + return isLoose ? h('.keyring-label', t('importedCaps')) : null } catch (e) { return } } diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index d5958787b..76da4fc9d 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -76,7 +76,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, 'Deposit Eth'), + }, t('depositEth')), ]), // loading indication @@ -118,7 +118,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, 'Select Service'), + }, t('selectService')), ]), ]) @@ -164,14 +164,14 @@ BuyButtonSubview.prototype.primarySubview = function () { style: { marginTop: '15px', }, - }, 'Borrow With Dharma (Beta)') + }, t('borrowDharma')) ) : null, ]) ) default: return ( - h('h2.error', 'Unknown network ID') + h('h2.error', t('unknownNetworkId')) ) } diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index f70208625..6532cb3bf 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -37,11 +37,11 @@ CoinbaseForm.prototype.render = function () { }, [ h('button.btn-green', { onClick: this.toCoinbase.bind(this), - }, 'Continue to Coinbase'), + }, t('continueToCoinbase')), h('button.btn-red', { onClick: () => props.dispatch(actions.goHome()), - }, 'Cancel'), + }, t('cancel')), ]), ]) } diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index a25d0719c..5d5be8feb 100644 --- a/ui/app/components/copyButton.js +++ b/ui/app/components/copyButton.js @@ -22,7 +22,7 @@ CopyButton.prototype.render = function () { const value = props.value const copied = state.copied - const message = copied ? 'Copied' : props.title || ' Copy ' + const message = copied ? t('copiedButton') : props.title || t('copyButton') return h('.copy-button', { style: { diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index a4f6f4bc6..690e44153 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -22,7 +22,7 @@ Copyable.prototype.render = function () { const { copied } = state return h(Tooltip, { - title: copied ? 'Copied!' : 'Copy', + title: copied ? t('copiedExclamation') : t('copy'), position: 'bottom', }, h('span', { style: { diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 826d2cd4b..a5384daaf 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -146,7 +146,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { }) if (!balanceIsSufficient) { - error = 'Insufficient balance for current gas total' + error = t('balanceIsInsufficientGas') } const gasLimitTooLow = gasLimit && conversionGreaterThan( @@ -162,7 +162,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { ) if (gasLimitTooLow) { - error = 'Gas limit must be at least 21000' + error = t('gasLimitTooLow') } this.setState({ error }) @@ -239,7 +239,7 @@ CustomizeGasModal.prototype.render = function () { }, [ h('div.send-v2__customize-gas__header', {}, [ - h('div.send-v2__customize-gas__title', 'Customize Gas'), + h('div.send-v2__customize-gas__title', t('customGas')), h('div.send-v2__customize-gas__close', { onClick: hideModal, @@ -255,8 +255,8 @@ CustomizeGasModal.prototype.render = function () { // max: 1000, step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), - title: 'Gas Price (GWEI)', - copy: 'We calculate the suggested gas prices based on network success rates.', + title: t('gasPrice'), + copy: t('gasPriceCalculation'), }), h(GasModalCard, { @@ -265,8 +265,8 @@ CustomizeGasModal.prototype.render = function () { // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), - title: 'Gas Limit', - copy: 'We calculate the suggested gas limit based on network success rates.', + title: t('gasLimit'), + copy: t('gasLimitCalculation'), }), ]), @@ -279,16 +279,16 @@ CustomizeGasModal.prototype.render = function () { h('div.send-v2__customize-gas__revert', { onClick: () => this.revert(), - }, ['Revert']), + }, [t('revert')]), h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__cancel', { onClick: this.props.hideModal, - }, ['CANCEL']), + }, [t('cancelButton')]), h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), - }, ['SAVE']), + }, [t('saveButton')]), ]), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f97ac0691..7ecec38d2 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -129,7 +129,7 @@ class AccountDropdowns extends Component { actions.showEditAccountModal(identity) }, }, [ - 'Edit', + t('editButton'), ]), ]), @@ -159,7 +159,7 @@ class AccountDropdowns extends Component { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', 'LOOSE') : null + return isLoose ? h('.keyring-label', t('looseCaps')) : null } catch (e) { return } } @@ -217,7 +217,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, 'Create Account'), + }, t('createAccount')), ], ), h( @@ -251,7 +251,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, 'Import Account'), + }, t('importAccount')), ] ), ] @@ -302,7 +302,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - 'Account Details', + t('accDetails'), ), h( DropdownMenuItem, @@ -318,7 +318,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - 'View account on Etherscan', + t('etherscanView'), ), h( DropdownMenuItem, @@ -334,7 +334,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - 'Copy Address to clipboard', + t('copyAddress'), ), h( DropdownMenuItem, @@ -346,7 +346,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - 'Export Private Key', + t('exportPrivateKey'), ), h( DropdownMenuItem, @@ -361,7 +361,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - 'Add Token', + t('addToken'), ), ] @@ -479,4 +479,3 @@ function mapStateToProps (state) { } module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns) - diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index dfaa6b22c..02773fb46 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -93,13 +93,13 @@ NetworkDropdown.prototype.render = function () { }, [ h('div.network-dropdown-header', {}, [ - h('div.network-dropdown-title', {}, 'Networks'), + h('div.network-dropdown-title', {}, t('networks')), h('div.network-dropdown-divider'), h('div.network-dropdown-content', {}, - 'The default network for Ether transactions is Main Net.' + t('defaultNetwork') ), ]), @@ -121,7 +121,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', }, - }, 'Main Ethereum Network'), + }, t('mainnet')), ] ), @@ -143,7 +143,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }, - }, 'Ropsten Test Network'), + }, t('ropsten')), ] ), @@ -165,7 +165,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', }, - }, 'Kovan Test Network'), + }, t('kovan')), ] ), @@ -187,7 +187,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', }, - }, 'Rinkeby Test Network'), + }, t('rinkeby')), ] ), @@ -209,7 +209,7 @@ NetworkDropdown.prototype.render = function () { style: { color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', }, - }, 'Localhost 8545'), + }, t('localhost')), ] ), @@ -233,7 +233,7 @@ NetworkDropdown.prototype.render = function () { style: { color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', }, - }, 'Custom RPC'), + }, t('customRPC')), ] ), @@ -248,15 +248,15 @@ NetworkDropdown.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = 'Main Ethereum Network' + name = t('mainnet') } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' + name = t('ropsten') } else if (providerName === 'kovan') { - name = 'Kovan Test Network' + name = t('kovan') } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' + name = t('rinkeby') } else { - name = 'Unknown Private Network' + name = t('unknownNetwork') } return name diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index dc7a985e3..3dfcec5a8 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -43,7 +43,7 @@ TokenMenuDropdown.prototype.render = function () { showHideTokenConfirmationModal(this.props.token) this.props.onClose() }, - }, 'Hide Token'), + }, t('hideToken')), ]), ]), diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 6553053f7..3e7a23369 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -89,13 +89,13 @@ EnsInput.prototype.lookupEnsName = function () { log.info(`ENS attempting to resolve name: ${recipient}`) this.ens.lookup(recipient.trim()) .then((address) => { - if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.') + if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName')) if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, nickname: recipient.trim(), - hoverText: address + '\nClick to Copy', + hoverText: address + '\n' + t('clickCopy'), ensFailure: false, }) } diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index 4a71e9585..07432a1f2 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -132,7 +132,7 @@ HexAsDecimalInput.prototype.constructWarning = function () { } else if (max) { message += `must be less than or equal to ${max}.` } else { - message += 'Invalid input.' + message += t('invalidInput') } return message diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 3e91fa807..6cb1ff53d 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -33,7 +33,7 @@ Network.prototype.render = function () { onClick: (event) => this.props.onClick(event), }, [ h('img', { - title: 'Attempting to connect to blockchain.', + title: t('attemptingConnect'), style: { width: '27px', }, @@ -41,22 +41,22 @@ Network.prototype.render = function () { }), ]) } else if (providerName === 'mainnet') { - hoverText = 'Main Ethereum Network' + hoverText = t('mainnet') iconName = 'ethereum-network' } else if (providerName === 'ropsten') { - hoverText = 'Ropsten Test Network' + hoverText = t('ropsten') iconName = 'ropsten-test-network' } else if (parseInt(networkNumber) === 3) { - hoverText = 'Ropsten Test Network' + hoverText = t('ropsten') iconName = 'ropsten-test-network' } else if (providerName === 'kovan') { - hoverText = 'Kovan Test Network' + hoverText = t('kovan') iconName = 'kovan-test-network' } else if (providerName === 'rinkeby') { - hoverText = 'Rinkeby Test Network' + hoverText = t('rinkeby') iconName = 'rinkeby-test-network' } else { - hoverText = 'Unknown Private Network' + hoverText = t('unknownNetwork') iconName = 'unknown-private-network' } @@ -84,7 +84,7 @@ Network.prototype.render = function () { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', }), - h('.network-name', 'Main Network'), + h('.network-name', t('mainnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': @@ -93,7 +93,7 @@ Network.prototype.render = function () { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', }), - h('.network-name', 'Ropsten Test Net'), + h('.network-name', t('ropsten')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'kovan-test-network': @@ -102,7 +102,7 @@ Network.prototype.render = function () { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', }), - h('.network-name', 'Kovan Test Net'), + h('.network-name', t('kovan')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': @@ -111,7 +111,7 @@ Network.prototype.render = function () { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', }), - h('.network-name', 'Rinkeby Test Net'), + h('.network-name', t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: @@ -123,7 +123,7 @@ Network.prototype.render = function () { }, }), - h('.network-name', 'Private Network'), + h('.network-name', t('privateNetwork')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) } diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index 941ac33e6..5bda329ed 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -111,7 +111,7 @@ Notice.prototype.render = function () { style: { marginTop: '18px', }, - }, 'Accept'), + }, t('accept')), ]) ) } diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index 718a22de0..3ea063c3c 100644 --- a/ui/app/components/pending-msg-details.js +++ b/ui/app/components/pending-msg-details.js @@ -39,7 +39,7 @@ PendingMsgDetails.prototype.render = function () { // message data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ h('.flex-column.flex-space-between', [ - h('label.font-small', 'MESSAGE'), + h('label.font-small', t('messageCaps')), h('span.font-small', msgParams.data), ]), ]), @@ -47,4 +47,3 @@ PendingMsgDetails.prototype.render = function () { ]) ) } - diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index 834719c53..236849c18 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -29,17 +29,14 @@ PendingMsg.prototype.render = function () { fontWeight: 'bold', textAlign: 'center', }, - }, 'Sign Message'), + }, t('signMessage')), h('.error', { style: { margin: '10px', }, }, [ - `Signing this message can have - dangerous side effects. Only sign messages from - sites you fully trust with your entire account. - This dangerous method will be removed in a future version. `, + t('signNotice'), h('a', { href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527', style: { color: 'rgb(247, 134, 28)' }, @@ -48,7 +45,7 @@ PendingMsg.prototype.render = function () { const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527' global.platform.openWindow({ url }) }, - }, 'Read more here.'), + }, t('readMore')), ]), // message details @@ -58,13 +55,12 @@ PendingMsg.prototype.render = function () { h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelMessage, - }, 'Cancel'), + }, t('cancel')), h('button', { onClick: state.signMessage, - }, 'Sign'), + }, t('sign')), ]), ]) ) } - diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js index 1050513f2..30c475347 100644 --- a/ui/app/components/pending-personal-msg-details.js +++ b/ui/app/components/pending-personal-msg-details.js @@ -45,7 +45,7 @@ PendingMsgDetails.prototype.render = function () { height: '260px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'), + h('label.font-small', { style: { display: 'block' } }, t('messageCaps')), h(BinaryRenderer, { value: data, style: { @@ -57,4 +57,3 @@ PendingMsgDetails.prototype.render = function () { ]) ) } - diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js index b5fd29f71..a3381174d 100644 --- a/ui/app/components/pending-typed-msg-details.js +++ b/ui/app/components/pending-typed-msg-details.js @@ -45,7 +45,7 @@ PendingMsgDetails.prototype.render = function () { height: '260px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'), + h('label.font-small', { style: { display: 'block' } }, t('youSignCaps')), h(TypedMessageRenderer, { value: data, style: { diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js index f8926d0a3..73702d0f8 100644 --- a/ui/app/components/pending-typed-msg.js +++ b/ui/app/components/pending-typed-msg.js @@ -26,7 +26,7 @@ PendingMsg.prototype.render = function () { fontWeight: 'bold', textAlign: 'center', }, - }, 'Sign Message'), + }, t('signMessage')), // message details h(PendingTxDetails, state), @@ -35,10 +35,10 @@ PendingMsg.prototype.render = function () { h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelTypedMessage, - }, 'Cancel'), + }, t('cancelButton')), h('button', { onClick: state.signTypedMessage, - }, 'Sign'), + }, t('signButton')), ]), ]) diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 2270b8236..773ff227c 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -14,7 +14,7 @@ function mapStateToProps (state) { tokenExchangeRates, selectedAddress, } = state.metamask - + return { coinOptions, tokenExchangeRates, @@ -92,7 +92,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: 'Invalid Request', + errorMessage: t('invalidRequest'), isLoading: false, })) } @@ -124,10 +124,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { return h('div.shapeshift-form__metadata', {}, [ - this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'), - this.renderMetadata('Limit', limit), - this.renderMetadata('Exchange Rate', rate), - this.renderMetadata('Minimum', minimum), + this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')), + this.renderMetadata(t('limit'), limit), + this.renderMetadata(t('exchangeRate'), rate), + this.renderMetadata(t('min'), minimum), ]) } @@ -141,7 +141,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - 'Deposit your BTC to the address below:', + t('depositBTC'), ]), h('div', depositAddress), @@ -178,7 +178,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', 'Deposit'), + h('div.shapeshift-form__selector-label', t('deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -198,7 +198,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - 'Receive', + t('receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -214,7 +214,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - 'Your Refund Address', + t('refundAddress'), ]), h('input.shapeshift-form__address-input', { @@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, ['Buy']), + }, [t('buyButton')]), ]) } diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index 111a77df4..6e5be641f 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -141,7 +141,7 @@ ShiftListItem.prototype.renderInfo = function () { width: '100%', }, }, `${props.depositType} to ETH via ShapeShift`), - h('div', 'No deposits received'), + h('div', t('noDeposits')), h('div', { style: { fontSize: 'x-small', @@ -164,7 +164,7 @@ ShiftListItem.prototype.renderInfo = function () { width: '100%', }, }, `${props.depositType} to ETH via ShapeShift`), - h('div', 'Conversion in progress'), + h('div', t('conversionProgress')), h('div', { style: { fontSize: 'x-small', @@ -189,7 +189,7 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, 'From ShapeShift'), + }, t('fromShapeShift')), h('div', formatDate(props.time)), h('div', { style: { @@ -201,7 +201,7 @@ ShiftListItem.prototype.renderInfo = function () { ]) case 'failed': - return h('span.error', '(Failed)') + return h('span.error', '(' + t('failed') + ')') default: return '' } diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index c5cc23aa8..459d6a1a2 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -54,7 +54,7 @@ SignatureRequest.prototype.renderHeader = function () { h('div.request-signature__header-background'), - h('div.request-signature__header__text', 'Signature Request'), + h('div.request-signature__header__text', t('sigRequest')), h('div.request-signature__header__tip-container', [ h('div.request-signature__header__tip'), @@ -75,7 +75,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () { return h('div.request-signature__account', [ - h('div.request-signature__account-text', ['Account:']), + h('div.request-signature__account-text', [t('account')]), h(AccountDropdownMini, { selectedAccount, @@ -102,7 +102,7 @@ SignatureRequest.prototype.renderBalance = function () { return h('div.request-signature__balance', [ - h('div.request-signature__balance-text', ['Balance:']), + h('div.request-signature__balance-text', [t('balance')]), h('div.request-signature__balance-value', `${balanceInEther} ETH`), @@ -136,7 +136,7 @@ SignatureRequest.prototype.renderRequestInfo = function () { return h('div.request-signature__request-info', [ h('div.request-signature__headline', [ - `Your signature is being requested`, + t('yourSigRequested'), ]), ]) @@ -154,21 +154,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) { SignatureRequest.prototype.renderBody = function () { let rows - let notice = 'You are signing:' + let notice = t('youSign') const { txData } = this.props const { type, msgParams: { data } } = txData if (type === 'personal_sign') { - rows = [{ name: 'Message', value: this.msgHexToText(data) }] + rows = [{ name: t('message'), value: this.msgHexToText(data) }] } else if (type === 'eth_signTypedData') { rows = data } else if (type === 'eth_sign') { - rows = [{ name: 'Message', value: data }] - notice = `Signing this message can have - dangerous side effects. Only sign messages from - sites you fully trust with your entire account. - This dangerous method will be removed in a future version. ` + rows = [{ name: t('message'), value: data }] + notice = t('signNotice') } return h('div.request-signature__body', {}, [ @@ -227,10 +224,10 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.request-signature__footer__cancel-button', { onClick: cancel, - }, 'CANCEL'), + }, t('cancelButton')), h('button.request-signature__footer__sign-button', { onClick: sign, - }, 'SIGN'), + }, t('signButton')), ]) } @@ -250,4 +247,3 @@ SignatureRequest.prototype.render = function () { ) } - diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 8e06e0f27..a25566e64 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -42,7 +42,7 @@ TokenList.prototype.render = function () { const { tokens, isLoading, error } = state if (isLoading) { - return this.message('Loading Tokens...') + return this.message(t('loadingTokens')) } if (error) { @@ -52,7 +52,7 @@ TokenList.prototype.render = function () { padding: '80px', }, }, [ - 'We had trouble loading your token balances. You can view them ', + t('troubleTokenBalances'), h('span.hotFix', { style: { color: 'rgba(247, 134, 28, 1)', @@ -63,7 +63,7 @@ TokenList.prototype.render = function () { url: `https://ethplorer.io/address/${userAddress}`, }) }, - }, 'here'), + }, t('here')), ]) } diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 4e3d2cb93..10d4236cb 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -85,7 +85,7 @@ TransactionListItem.prototype.render = function () { ]), h(Tooltip, { - title: 'Transaction Number', + title: t('transactionNumber'), position: 'right', }, [ h('span', { @@ -142,12 +142,12 @@ TransactionListItem.prototype.render = function () { style: { paddingRight: '2px', }, - }, 'Taking too long?'), + }, t('takesTooLong')), h('div', { style: { textDecoration: 'underline', }, - }, 'Retry with a higher gas price here'), + }, t('retryWithMoreGas')), ]), ]) ) @@ -176,11 +176,11 @@ function recipientField (txParams, transaction, isTx, isMsg) { let message if (isMsg) { - message = 'Signature Requested' + message = t('sigRequested') } else if (txParams.to) { message = addressSummary(txParams.to) } else { - message = 'Contract Published' + message = t('contractPublished') } return h('div', { @@ -203,7 +203,7 @@ function renderErrorOrWarning (transaction) { // show rejected if (status === 'rejected') { - return h('span.error', ' (Rejected)') + return h('span.error', ' (' + t('rejected') + ')') } if (transaction.err || transaction.warning) { const { err, warning = {} } = transaction @@ -219,7 +219,7 @@ function renderErrorOrWarning (transaction) { title: message, position: 'bottom', }, [ - h(`span.error`, ` (Failed)`), + h(`span.error`, ` (` + t('failed') + `)`), ]) ) } @@ -231,7 +231,7 @@ function renderErrorOrWarning (transaction) { title: message, position: 'bottom', }, [ - h(`span.warning`, ` (Warning)`), + h(`span.warning`, ` (` + t('warning') + `)`), ]) } } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 69b72614c..cb3f8097b 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -78,10 +78,9 @@ TransactionList.prototype.render = function () { style: { marginTop: '50px', }, - }, 'No transaction history.'), + }, t('noTransactionHistory')), ]), ]), ]) ) } - diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 7ccc5c315..d53277925 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -63,7 +63,7 @@ TxListItem.prototype.getAddressText = function () { default: return address ? `${address.slice(0, 10)}...${address.slice(-4)}` - : 'Contract Published' + : t('contractPublished') } } diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 84cd0f093..6076ab5d3 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -55,7 +55,7 @@ TxList.prototype.renderTransaction = function () { : [h( 'div.tx-list-item.tx-list-item--empty', { key: 'tx-list-none' }, - [ 'No Transactions' ], + [ t('noTransactions') ], )] } @@ -110,7 +110,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa if (isUnapproved) { opts.onClick = () => showConfTxPage({id: transActionId}) - opts.transactionStatus = 'Not Started' + opts.transactionStatus = t('Not Started') } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) } diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b25d8e0f9..423234d4f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -72,21 +72,21 @@ TxView.prototype.renderButtons = function () { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), - }, 'DEPOSIT'), + }, t('depositButton')), h('button.btn-clear.hero-balance-button', { style: { marginLeft: '0.8em', }, onClick: showSendPage, - }, 'SEND'), + }, t('sendButton')), ]) ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ h('button.btn-clear.hero-balance-button', { onClick: showSendTokenPage, - }, 'SEND'), + }, t('sendButton')), ]) ) } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b1ef83cee..3d9c01c6e 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -113,7 +113,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), + h('div.wallet-view__keyring-label', isLoose ? t('importedCaps') : ''), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, @@ -130,7 +130,7 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.btn-clear.wallet-view__details-button', 'DETAILS'), + h('button.btn-clear.wallet-view__details-button', t('detailsCaps')), ]), ]), @@ -142,7 +142,7 @@ WalletView.prototype.render = function () { setTimeout(() => this.setState({ hasCopied: false }), 3000) }, }, [ - this.state.hasCopied && 'Copied to Clipboard', + this.state.hasCopied && t('copiedClipboard'), !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), ]), @@ -156,7 +156,7 @@ WalletView.prototype.render = function () { showAddTokenPage() hideSidebar() }, - }, 'Add Token'), + }, t('addToken')), ]) } diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index b4587f1ee..c496690a7 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -10,6 +10,13 @@ const getCaretCoordinates = require('textarea-caret') let isSubmitting = false +let t = chrome.i18n.getMessage || (function() { + let msg = require('../../../app/_locales/en/messages.json'); + return (function(key) { + return msg[key].message; + }); +})(); + module.exports = connect(mapStateToProps)(InitializeMenuScreen) inherits(InitializeMenuScreen, Component) @@ -57,7 +64,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: '#7F8082', marginBottom: 10, }, - }, 'MetaMask'), + }, t('appName')), h('div', [ @@ -67,10 +74,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: '#7F8082', display: 'inline', }, - }, 'Encrypt your new DEN'), + }, t('encryptNewDen')), h(Tooltip, { - title: 'Your DEN is your password-encrypted storage within MetaMask.', + title: t('denExplainer'), }, [ h('i.fa.fa-question-circle.pointer', { style: { @@ -90,7 +97,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'New Password (min 8 chars)', + placeholder: t('newPassword'), onInput: this.inputChanged.bind(this), style: { width: 260, @@ -102,7 +109,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: 'Confirm Password', + placeholder: t('confirmPassword'), onKeyPress: this.createVaultOnEnter.bind(this), onInput: this.inputChanged.bind(this), style: { @@ -117,7 +124,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { style: { margin: 12, }, - }, 'Create'), + }, t('createDen')), h('.flex-row.flex-center.flex-grow', [ h('p.pointer', { @@ -127,7 +134,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, 'Import Existing DEN'), + }, t('importDen')), ]), ]) @@ -156,12 +163,12 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { var passwordConfirm = passwordConfirmBox.value if (password.length < 8) { - this.warning = 'password not long enough' + this.warning = t('passwordShort') this.props.dispatch(actions.displayWarning(this.warning)) return } if (password !== passwordConfirm) { - this.warning = 'passwords don\'t match' + this.warning = t('passwordMismatch') this.props.dispatch(actions.displayWarning(this.warning)) return } -- cgit v1.2.3 From 99898ac77594d8fe6d4d2aa5bc3e3ba6492f4a10 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 23 Jan 2018 22:14:47 -1000 Subject: better organization of locale file; i18n in more view files --- ui/app/accounts/import/json.js | 14 +++++----- ui/app/accounts/import/private-key.js | 6 ++-- ui/app/accounts/import/seed.js | 5 ++-- ui/app/accounts/new-account/create-form.js | 8 +++--- ui/app/accounts/new-account/index.js | 8 +++--- ui/app/components/customize-gas-modal/index.js | 4 +-- .../dropdowns/components/account-dropdowns.js | 2 +- ui/app/components/modals/account-details-modal.js | 4 +-- .../components/modals/account-modal-container.js | 2 +- ui/app/components/modals/buy-options-modal.js | 14 +++++----- ui/app/components/modals/deposit-ether-modal.js | 29 +++++++++----------- .../components/modals/edit-account-name-modal.js | 4 +-- .../components/modals/export-private-key-modal.js | 15 ++++------ .../modals/hide-token-confirmation-modal.js | 8 +++--- ui/app/components/modals/modal.js | 10 +++---- ui/app/components/modals/new-account-modal.js | 12 ++++---- .../pending-tx/confirm-deploy-contract.js | 20 +++++++------- ui/app/components/pending-tx/confirm-send-ether.js | 18 ++++++------ ui/app/components/pending-tx/confirm-send-token.js | 26 +++++++++--------- ui/app/components/pending-typed-msg.js | 4 +-- ui/app/components/send-token/index.js | 32 +++++++++++----------- ui/app/components/send/gas-fee-display-v2.js | 3 +- ui/app/components/send/gas-tooltip.js | 3 +- ui/app/components/send/to-autocomplete.js | 3 +- ui/app/components/signature-request.js | 4 +-- 25 files changed, 123 insertions(+), 135 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 9cefcfa77..ca9a29e34 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -26,8 +26,8 @@ JsonImportSubview.prototype.render = function () { return ( h('div.new-account-import-form__json', [ - h('p', 'Used by a variety of different clients'), - h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), + h('p', t('usedByClients')), + h('a.warning', { href: HELP_LINK, target: '_blank' }, t('fileImportFail')), h(FileInput, { readAs: 'text', @@ -42,7 +42,7 @@ JsonImportSubview.prototype.render = function () { h('input.new-account-import-form__input-password', { type: 'password', - placeholder: 'Enter password', + placeholder: t('enterPassword'), id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), }), @@ -52,13 +52,13 @@ JsonImportSubview.prototype.render = function () { h('button.new-account-create-form__button-cancel', { onClick: () => this.props.goHome(), }, [ - 'CANCEL', + t('cancelCaps'), ]), h('button.new-account-create-form__button-create', { onClick: () => this.createNewKeychain.bind(this), }, [ - 'IMPORT', + t('importCaps'), ]), ]), @@ -84,7 +84,7 @@ JsonImportSubview.prototype.createNewKeychain = function () { const { fileContents } = state if (!fileContents) { - const message = 'You must select a file to import.' + const message = t('needImportFile') return this.props.dispatch(actions.displayWarning(message)) } @@ -92,7 +92,7 @@ JsonImportSubview.prototype.createNewKeychain = function () { const password = passwordInput.value if (!password) { - const message = 'You must enter a password for the selected file.' + const message = t('needImportPassword') return this.props.dispatch(actions.displayWarning(message)) } diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 43afbca87..d8aa1a3d8 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -32,7 +32,7 @@ PrivateKeyImportView.prototype.render = function () { return ( h('div.new-account-import-form__private-key', [ - h('span.new-account-create-form__instruction', 'Paste your private key string here:'), + h('span.new-account-create-form__instruction', t('pastePrivateKey')), h('input.new-account-import-form__input-password', { type: 'password', @@ -45,13 +45,13 @@ PrivateKeyImportView.prototype.render = function () { h('button.new-account-create-form__button-cancel', { onClick: () => goHome(), }, [ - 'CANCEL', + t('cancelCaps'), ]), h('button.new-account-create-form__button-create', { onClick: () => this.createNewKeychain(), }, [ - 'IMPORT', + t('importCaps'), ]), ]), diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js index b4a7c0afa..241200c6f 100644 --- a/ui/app/accounts/import/seed.js +++ b/ui/app/accounts/import/seed.js @@ -20,11 +20,10 @@ SeedImportSubview.prototype.render = function () { style: { }, }, [ - `Paste your seed phrase here!`, + t('pasteSeed'), h('textarea'), h('br'), - h('button', 'Submit'), + h('button', t('submit')), ]) ) } - diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 494726ae4..f9faa928c 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -21,13 +21,13 @@ class NewAccountCreateForm extends Component { return h('div.new-account-create-form', [ h('div.new-account-create-form__input-label', {}, [ - 'Account Name', + t('accountName'), ]), h('div.new-account-create-form__input-wrapper', {}, [ h('input.new-account-create-form__input', { value: this.state.newAccountName, - placeholder: 'E.g. My new account', + placeholder: t('sampleAccountName'), onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), @@ -37,13 +37,13 @@ class NewAccountCreateForm extends Component { h('button.new-account-create-form__button-cancel', { onClick: () => this.props.goHome(), }, [ - 'CANCEL', + t('cancelCaps'), ]), h('button.new-account-create-form__button-create', { onClick: () => this.props.createAccount(newAccountName), }, [ - 'CREATE', + t('createCaps'), ]), ]), diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js index acf0dc6e4..1ed43ae08 100644 --- a/ui/app/accounts/new-account/index.js +++ b/ui/app/accounts/new-account/index.js @@ -42,10 +42,10 @@ AccountDetailsModal.prototype.render = function () { const { displayedForm, displayForm } = this.props return h('div.new-account', {}, [ - + h('div.new-account__header', [ - h('div.new-account__title', 'New Account'), + h('div.new-account__title', t('newAccount')), h('div.new-account__tabs', [ @@ -55,7 +55,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', }), onClick: () => displayForm('CREATE'), - }, 'Create'), + }, t('createDen')), h('div.new-account__tabs__tab', { className: classnames('new-account__tabs__tab', { @@ -63,7 +63,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', }), onClick: () => displayForm('IMPORT'), - }, 'Import'), + }, t('import')), ]), diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index a5384daaf..ae9ff769d 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -284,11 +284,11 @@ CustomizeGasModal.prototype.render = function () { h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__cancel', { onClick: this.props.hideModal, - }, [t('cancelButton')]), + }, [t('cancelCaps')]), h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), - }, [t('saveButton')]), + }, [t('saveCaps')]), ]), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 7ecec38d2..76fbb8060 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -129,7 +129,7 @@ class AccountDropdowns extends Component { actions.showEditAccountModal(identity) }, }, [ - t('editButton'), + t('editCaps'), ]), ]), diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index c1f7a3236..746c6de4c 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -64,12 +64,12 @@ AccountDetailsModal.prototype.render = function () { h('button.btn-clear.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), - }, 'View account on Etherscan'), + }, t('etherscanView')), // Holding on redesign for Export Private Key functionality h('button.btn-clear.account-modal__button', { onClick: () => showExportPrivateKeyModal(), - }, 'Export private key'), + }, t('exportPrivateKeyLower')), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index c548fb7b3..538edcf13 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -59,7 +59,7 @@ AccountModalContainer.prototype.render = function () { h('i.fa.fa-angle-left.fa-lg'), - h('span.account-modal-back__text', ' Back'), + h('span.account-modal-back__text', ' ' + t('back')), ]), diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 74a7a847e..60fef7db4 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -56,15 +56,15 @@ BuyOptions.prototype.render = function () { }, [ h('div.buy-modal-content-title', { style: {}, - }, 'Transfers'), - h('div', {}, 'How would you like to deposit Ether?'), + }, t('transfers')), + h('div', {}, t('howToDeposit')), ]), h('div.buy-modal-content-options.flex-column.flex-center', {}, [ isTestNetwork - ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network)) - : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)), + ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network)) + : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)), // h('div.buy-modal-content-option', {}, [ // h('div.buy-modal-content-option-title', {}, 'Shapeshift'), @@ -72,8 +72,8 @@ BuyOptions.prototype.render = function () { // ]),, this.renderModalContentOption( - 'Direct Deposit', - 'Deposit from another account', + t('directDeposit'), + t('depositFromAccount'), () => this.goToAccountDetailsModal() ), @@ -84,7 +84,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))), ]), ]) } diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 532d66653..85f640a68 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -6,16 +6,13 @@ const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames const ShapeshiftForm = require('../shapeshift-form') -const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether' -const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in -your new wallet by direct deposit.` -const COINBASE_ROW_TITLE = 'Buy on Coinbase' -const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin, -ethereum, and litecoin.` -const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' -const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether -directly into your MetaMask wallet. No Account Needed.` -const FAUCET_ROW_TITLE = 'Test Faucet' +const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther') +const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer') +const COINBASE_ROW_TITLE = t('buyCoinbase') +const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer') +const SHAPESHIFT_ROW_TITLE = t('depositShapeShift') +const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer') +const FAUCET_ROW_TITLE = t('testFaucet') const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` function mapStateToProps (state) { @@ -110,10 +107,10 @@ DepositEtherModal.prototype.render = function () { h('div.deposit-ether-modal__header', [ - h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + h('div.deposit-ether-modal__header__title', [t('depositEther')]), h('div.deposit-ether-modal__header__description', [ - 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', + t('needEtherInWallet'), ]), h('div.deposit-ether-modal__header__close', { @@ -131,7 +128,7 @@ DepositEtherModal.prototype.render = function () { logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: 'View Account', + buttonLabel: t('viewAccount'), onButtonClick: () => this.goToAccountDetailsModal(), hide: buyingWithShapeshift, }), @@ -140,7 +137,7 @@ DepositEtherModal.prototype.render = function () { logo: h('i.fa.fa-tint.fa-2x'), title: FAUCET_ROW_TITLE, text: facuetRowText(networkName), - buttonLabel: 'Get Ether', + buttonLabel: t('getEther'), onButtonClick: () => toFaucet(network), hide: !isTestNetwork || buyingWithShapeshift, }), @@ -151,7 +148,7 @@ DepositEtherModal.prototype.render = function () { }), title: COINBASE_ROW_TITLE, text: COINBASE_ROW_TEXT, - buttonLabel: 'Continue to Coinbase', + buttonLabel: t('continueToCoinbase'), onButtonClick: () => toCoinbase(address), hide: isTestNetwork || buyingWithShapeshift, }), @@ -162,7 +159,7 @@ DepositEtherModal.prototype.render = function () { }), title: SHAPESHIFT_ROW_TITLE, text: SHAPESHIFT_ROW_TEXT, - buttonLabel: 'Buy with Shapeshift', + buttonLabel: t('shapeshiftBuy'), onButtonClick: () => this.setState({ buyingWithShapeshift: true }), hide: isTestNetwork, hideButton: buyingWithShapeshift, diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index e2361140d..410fac7ba 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -50,7 +50,7 @@ EditAccountNameModal.prototype.render = function () { ]), h('div.edit-account-name-modal-title', { - }, ['Edit Account Name']), + }, [t('editAccountName')]), h('input.edit-account-name-modal-input', { placeholder: identity.name, @@ -69,7 +69,7 @@ EditAccountNameModal.prototype.render = function () { }, disabled: this.state.inputText.length === 0, }, [ - 'SAVE', + t('saveCaps'), ]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 422f23f44..0745827cb 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -48,8 +48,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { return h('span.private-key-password-label', privateKey - ? 'This is your private key (click to copy)' - : 'Type Your Password' + ? t('copyPrivateKey') + : t('typePassword') ) } @@ -86,8 +86,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, ), (privateKey - ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done') - : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm') + ? 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')) ), ]) @@ -120,7 +120,7 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), - h('span.modal-body-title', 'Show Private Keys'), + h('span.modal-body-title', t('showPrivateKeys')), h('div.private-key-password', {}, [ this.renderPasswordLabel(privateKey), @@ -130,10 +130,7 @@ ExportPrivateKeyModal.prototype.render = function () { !warning ? null : h('span.private-key-password-error', warning), ]), - h('div.private-key-password-warning', `Warning: Never disclose this key. - Anyone with your private keys can take steal any assets held in your - account.` - ), + h('div.private-key-password-warning', t('privateKeyWarning')), this.renderButtons(privateKey, this.state.password, address, hideModal), diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 56c7ba299..55f1695af 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -41,7 +41,7 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__container', { }, [ h('div.hide-token-confirmation__title', {}, [ - 'Hide Token?', + t('hideTokenPrompt'), ]), h(Identicon, { @@ -54,19 +54,19 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__symbol', {}, symbol), h('div.hide-token-confirmation__copy', {}, [ - 'You can add this token back in the future by going go to “Add token” in your accounts options menu.', + t('readdToken'), ]), h('div.hide-token-confirmation__buttons', {}, [ h('button.btn-cancel.hide-token-confirmation__button', { onClick: () => hideModal(), }, [ - 'CANCEL', + t('cancelCaps'), ]), h('button.btn-clear.hide-token-confirmation__button', { onClick: () => hideToken(address), }, [ - 'HIDE', + t('hideCaps'), ]), ]), ]), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index afb2a2175..e4e644d40 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -169,9 +169,8 @@ const MODALS = { BETA_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { - header: 'Welcome to the New UI (Beta)', - message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, - and let us know if you have any issues.`, + header: t('uiWelcome'), + message: t('uiWelcomeMessage'), }), ], mobileModalStyle: { @@ -187,9 +186,8 @@ const MODALS = { OLD_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { - header: 'Old UI', - message: `You have returned to the old UI. You can switch back to the New UI through the option in the top - right dropdown menu.`, + header: t('oldUI'), + message: t('oldUIMessage'), }), ], mobileModalStyle: { diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index fc1fd413d..4fdfbd745 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -22,7 +22,7 @@ class NewAccountModal extends Component { h('div.new-account-modal-wrapper', { }, [ h('div.new-account-modal-header', {}, [ - 'New Account', + t('newAccount'), ]), h('div.modal-close-x', { @@ -30,19 +30,19 @@ class NewAccountModal extends Component { }), h('div.new-account-modal-content', {}, [ - 'Account Name', + t('accountName'), ]), h('div.new-account-input-wrapper', {}, [ h('input.new-account-input', { value: this.state.newAccountName, - placeholder: 'E.g. My new account', + placeholder: t('sampleAccountName'), onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), h('div.new-account-modal-content.after-input', {}, [ - 'or', + t('or'), ]), h('div.new-account-modal-content.after-input.pointer', { @@ -50,13 +50,13 @@ class NewAccountModal extends Component { this.props.hideModal() this.props.showImportPage() }, - }, 'Import an account'), + }, t('importAnAccount')), h('div.new-account-modal-content.button', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - 'SAVE', + t('saveCaps'), ]), ]), ]), diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index ae6c6ef7b..0d8b2721f 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -200,7 +200,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), @@ -239,8 +239,8 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () { return ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ 'Total ' ]), - h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -274,7 +274,7 @@ ConfirmDeployContract.prototype.render = function () { h('button.confirm-screen-back-button', { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), - h('div.confirm-screen-title', 'Confirm Contract'), + h('div.confirm-screen-title', t('confirmContract')), h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ @@ -292,7 +292,7 @@ ConfirmDeployContract.prototype.render = function () { h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ h('i.fa.fa-file-text-o'), - h('span.confirm-screen-account-name', 'New Contract'), + h('span.confirm-screen-account-name', t('newContract')), h('span.confirm-screen-account-number', ' '), ]), ]), @@ -310,7 +310,7 @@ ConfirmDeployContract.prototype.render = function () { h('div.confirm-screen-rows', [ h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), @@ -318,9 +318,9 @@ ConfirmDeployContract.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', 'New Contract'), + h('div.confirm-screen-row-info', t('newContract')), ]), ]), @@ -337,10 +337,10 @@ ConfirmDeployContract.prototype.render = function () { // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), - }, 'CANCEL'), + }, t('cancelCaps')), // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), + h('button.confirm-screen-confirm-button', [t('confirmCaps')]), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 652300c94..7608e02ad 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -165,7 +165,7 @@ ConfirmSendEther.prototype.getData = function () { }, to: { address: txParams.to, - name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', + name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'), }, memo: txParams.memo || '', gasFeeInFIAT, @@ -268,7 +268,7 @@ ConfirmSendEther.prototype.render = function () { h('div.confirm-screen-rows', [ h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), @@ -276,7 +276,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', toName), h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), @@ -284,7 +284,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), @@ -295,8 +295,8 @@ ConfirmSendEther.prototype.render = function () { h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ 'Total ' ]), - h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -396,10 +396,10 @@ ConfirmSendEther.prototype.render = function () { clearSend() this.cancel(event, txMeta) }, - }, 'CANCEL'), + }, t('cancelCaps')), // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), + h('button.confirm-screen-confirm-button', [t('confirmCaps')]), ]), ]) ) @@ -414,7 +414,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) this.setState({ submitting: false }) } } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index ad489c3e9..88644d57a 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -133,7 +133,7 @@ ConfirmSendToken.prototype.getAmount = function () { ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) : null, token: typeof value === 'undefined' - ? 'Unknown' + ? t('unknown') : +sendTokenAmount.toFixed(decimals), } @@ -204,7 +204,7 @@ ConfirmSendToken.prototype.getData = function () { }, to: { address: value, - name: identities[value] ? identities[value].name : 'New Recipient', + name: identities[value] ? identities[value].name : t('newRecipient'), }, memo: txParams.memo || '', } @@ -244,7 +244,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), @@ -266,8 +266,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ? ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ 'Total ' ]), - h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -279,8 +279,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { : ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ 'Total ' ]), - h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -316,7 +316,7 @@ ConfirmSendToken.prototype.render = function () { h('h3.flex-center.confirm-screen-header', [ h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), - }, 'EDIT'), + }, t('editCaps')), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), ]), @@ -359,7 +359,7 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-rows', [ h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', fromName), h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), @@ -367,7 +367,7 @@ ConfirmSendToken.prototype.render = function () { ]), toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', toName), h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), @@ -387,10 +387,10 @@ ConfirmSendToken.prototype.render = function () { // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), - }, 'CANCEL'), + }, t('cancelCaps')), // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), + h('button.confirm-screen-confirm-button', [t('confirmCaps')]), ]), @@ -407,7 +407,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) this.setState({ submitting: false }) } } diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js index 73702d0f8..f0f846027 100644 --- a/ui/app/components/pending-typed-msg.js +++ b/ui/app/components/pending-typed-msg.js @@ -35,10 +35,10 @@ PendingMsg.prototype.render = function () { h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelTypedMessage, - }, t('cancelButton')), + }, t('cancelCaps')), h('button', { onClick: state.signTypedMessage, - }, t('signButton')), + }, t('signCaps')), ]), ]) diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js index 99d078251..a40664977 100644 --- a/ui/app/components/send-token/index.js +++ b/ui/app/components/send-token/index.js @@ -126,14 +126,14 @@ SendTokenScreen.prototype.validate = function () { const amount = Number(stringAmount) const errors = { - to: !to ? 'Required' : null, - amount: !amount ? 'Required' : null, - gasPrice: !gasPrice ? 'Gas Price Required' : null, - gasLimit: !gasLimit ? 'Gas Limit Required' : null, + to: !to ? t('required') : null, + amount: !amount ? t('required') : null, + gasPrice: !gasPrice ? t('gasPriceRequired') : null, + gasLimit: !gasLimit ? t('gasLimitRequired') : null, } if (to && !isValidAddress(to)) { - errors.to = 'Invalid address' + errors.to = t('invalidAddress') } const isValid = Object.entries(errors).every(([key, value]) => value === null) @@ -233,11 +233,11 @@ SendTokenScreen.prototype.renderToAddressInput = function () { 'send-screen-input-wrapper--error': errorMessage, }), }, [ - h('div', ['To:']), + h('div', [t('toSpecific')]), h('input.large-input.send-screen-input', { name: 'address', list: 'addresses', - placeholder: 'Address', + placeholder: t('address'), value: to, onChange: e => this.setState({ to: e.target.value, @@ -355,8 +355,8 @@ SendTokenScreen.prototype.renderGasInput = function () { }), h('div.send-screen-gas-labels', {}, [ - h('span', [ h('i.fa.fa-bolt'), 'Gas fee:']), - h('span', ['What\'s this?']), + h('span', [ h('i.fa.fa-bolt'), t('gasFeeSpecific')]), + h('span', [t('whatsThis')]), ]), h('div.large-input.send-screen-gas-input', [ h(GasFeeDisplay, { @@ -370,7 +370,7 @@ SendTokenScreen.prototype.renderGasInput = function () { h( 'div.send-screen-gas-input-customize', { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) }, - ['Customize'] + [t('customize')] ), ]), h('div.send-screen-input-wrapper__error-message', [ @@ -381,7 +381,7 @@ SendTokenScreen.prototype.renderGasInput = function () { SendTokenScreen.prototype.renderMemoInput = function () { return h('div.send-screen-input-wrapper', [ - h('div', {}, ['Transaction memo (optional)']), + h('div', {}, [t('transactionMemo')]), h( 'input.large-input.send-screen-input', { onChange: e => this.setState({ memo: e.target.value }) } @@ -397,10 +397,10 @@ SendTokenScreen.prototype.renderButtons = function () { h('button.send-token__button-next.btn-secondary', { className: !isValid && 'send-screen__send-button__disabled', onClick: () => isValid && this.submit(), - }, ['Next']), + }, [t('next')]), h('button.send-token__button-cancel.btn-tertiary', { onClick: () => backToAccountDetail(selectedAddress), - }, ['Cancel']), + }, [t('cancel')]), ]) } @@ -417,9 +417,9 @@ SendTokenScreen.prototype.render = function () { diameter: 75, address: selectedTokenAddress, }), - h('div.send-token__title', ['Send Tokens']), - h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']), - h('div.send-token__balance-text', ['Your Token Balance is:']), + h('div.send-token__title', [t('sendTokens')]), + h('div.send-token__description', [t('sendTokensAnywhere')]), + h('div.send-token__balance-text', [t('tokenBalance')]), h('div.send-token__token-balance', [ h(TokenBalance, { token: selectedToken, balanceOnly: true }), ]), diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 0c4c3f7a9..edaa297b9 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -30,7 +30,7 @@ GasFeeDisplay.prototype.render = function () { convertedPrefix: '$', readOnly: true, }) - : h('div.currency-display', 'Loading...'), + : h('div.currency-display', t('loading')), h('button.send-v2__sliders-icon-container', { onClick, @@ -41,4 +41,3 @@ GasFeeDisplay.prototype.render = function () { ]) } - diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js index 46aff3499..da2a53c9e 100644 --- a/ui/app/components/send/gas-tooltip.js +++ b/ui/app/components/send/gas-tooltip.js @@ -81,7 +81,7 @@ GasTooltip.prototype.render = function () { 'marginTop': '81px', }, }, [ - h('span.gas-tooltip-label', {}, ['Gas Limit']), + h('span.gas-tooltip-label', {}, [t('gasLimit')]), h('i.fa.fa-info-circle'), ]), h(InputNumber, { @@ -97,4 +97,3 @@ GasTooltip.prototype.render = function () { ]), ]) } - diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index e0cdd0a58..85e7bfa0e 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -92,7 +92,7 @@ ToAutoComplete.prototype.render = function () { return h('div.send-v2__to-autocomplete', {}, [ h('input.send-v2__to-autocomplete__input', { - placeholder: 'Recipient Address', + placeholder: t('recipientAddress'), className: inError ? `send-v2__error-border` : '', value: to, onChange: event => onChange(event.target.value), @@ -111,4 +111,3 @@ ToAutoComplete.prototype.render = function () { ]) } - diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 459d6a1a2..8003f8b1d 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -224,10 +224,10 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.request-signature__footer__cancel-button', { onClick: cancel, - }, t('cancelButton')), + }, t('cancelCaps')), h('button.request-signature__footer__sign-button', { onClick: sign, - }, t('signButton')), + }, t('signCaps')), ]) } -- cgit v1.2.3 From 7da52c599784130a5f7b6737f5b017bd3a95c1ed Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 24 Jan 2018 10:10:28 -1000 Subject: separate out cross-browser i18n for extensions --- ui/app/accounts/import/json.js | 1 + ui/app/accounts/import/private-key.js | 1 + ui/app/accounts/import/seed.js | 1 + ui/app/accounts/new-account/create-form.js | 1 + ui/app/accounts/new-account/index.js | 1 + ui/app/components/account-menu/index.js | 1 + ui/app/components/customize-gas-modal/index.js | 1 + ui/app/components/dropdowns/components/account-dropdowns.js | 1 + ui/app/components/dropdowns/network-dropdown.js | 1 + ui/app/components/dropdowns/token-menu-dropdown.js | 1 + ui/app/components/modals/account-details-modal.js | 1 + ui/app/components/modals/account-modal-container.js | 1 + ui/app/components/modals/buy-options-modal.js | 1 + ui/app/components/modals/deposit-ether-modal.js | 1 + ui/app/components/modals/edit-account-name-modal.js | 1 + ui/app/components/modals/export-private-key-modal.js | 1 + ui/app/components/modals/hide-token-confirmation-modal.js | 1 + ui/app/components/modals/modal.js | 1 + ui/app/components/modals/new-account-modal.js | 1 + ui/app/components/pending-tx/confirm-deploy-contract.js | 1 + ui/app/components/pending-tx/confirm-send-ether.js | 1 + ui/app/components/pending-tx/confirm-send-token.js | 1 + ui/app/first-time/init-menu.js | 8 +------- 23 files changed, 23 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index ca9a29e34..8b5a2b469 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('../../actions') const FileInput = require('react-simple-file-input').default +const t = require('../../../i18n') const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index d8aa1a3d8..4a04156e0 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -3,6 +3,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('../../actions') +const t = require('../../../i18n') module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js index 241200c6f..9ffc669a2 100644 --- a/ui/app/accounts/import/seed.js +++ b/ui/app/accounts/import/seed.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const t = require('../../../i18n') module.exports = connect(mapStateToProps)(SeedImportSubview) diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index f9faa928c..6f35e8886 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const { connect } = require('react-redux') const actions = require('../../actions') +const t = require('../../../i18n') class NewAccountCreateForm extends Component { constructor (props) { diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js index 1ed43ae08..854568c77 100644 --- a/ui/app/accounts/new-account/index.js +++ b/ui/app/accounts/new-account/index.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const t = require('../../../i18n') const { getCurrentViewContext } = require('../../selectors') const classnames = require('classnames') diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index aec00ff6b..9c7b6b15a 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -6,6 +6,7 @@ const actions = require('../../actions') const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu') const Identicon = require('../identicon') const { formatBalance } = require('../../util') +const t = require('../../../i18n') module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index ae9ff769d..1c6036867 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const t = require('../../../i18n') const GasModalCard = require('./gas-modal-card') const ethUtil = require('ethereumjs-util') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 76fbb8060..dfa5e5fac 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -10,6 +10,7 @@ const Identicon = require('../../identicon') const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') const { formatBalance } = require('../../../util') +const t = require('../../../../i18n') class AccountDropdowns extends Component { constructor (props) { diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 02773fb46..0e16048d5 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -6,6 +6,7 @@ const actions = require('../../actions') const Dropdown = require('./components/dropdown').Dropdown const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem const NetworkDropdownIcon = require('./components/network-dropdown-icon') +const t = require('../../../i18n') const R = require('ramda') // classes from nodes of the toggle element. diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js index 3dfcec5a8..a4f93b505 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const t = require('../../../i18n') module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 746c6de4c..17760dc1a 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -8,6 +8,7 @@ const { getSelectedIdentity } = require('../../selectors') const genAccountLink = require('../../../lib/account-link.js') const QrView = require('../qr-code') const EditableLabel = require('../editable-label') +const t = require('../../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 538edcf13..08540aa76 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const { getSelectedIdentity } = require('../../selectors') const Identicon = require('../identicon') +const t = require('../../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 60fef7db4..7eb73c3a6 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames +const t = require('../../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 85f640a68..e91b43841 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames const ShapeshiftForm = require('../shapeshift-form') +const t = require('../../../i18n') const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther') const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 410fac7ba..611def005 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const { getSelectedAccount } = require('../../selectors') +const t = require('../../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 0745827cb..017177cfd 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -7,6 +7,7 @@ const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity } = require('../../selectors') const ReadOnlyInput = require('../readonly-input') +const t = require('../../../i18n') const copyToClipboard = require('copy-to-clipboard') function mapStateToProps (state) { diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 55f1695af..98b1e2d03 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const Identicon = require('../identicon') +const t = require('../../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index e4e644d40..ea6ac5135 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -6,6 +6,7 @@ const FadeModal = require('boron').FadeModal const actions = require('../../actions') const isMobileView = require('../../../lib/is-mobile-view') const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') +const t = require('../../../i18n') // Modal Components const BuyOptions = require('./buy-options-modal') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 4fdfbd745..35f4764a6 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const { connect } = require('react-redux') const actions = require('../../actions') +const t = require('../../../i18n') class NewAccountModal extends Component { constructor (props) { diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 0d8b2721f..e6972c541 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil } = require('../../conversion-util') +const t = require('../../../i18n') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 7608e02ad..52693b4f6 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies } = require('../../conversion-util') +const t = require('../../../i18n') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 88644d57a..14523461f 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -6,6 +6,7 @@ const tokenAbi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') abiDecoder.addABI(tokenAbi) const actions = require('../../actions') +const t = require('../../../i18n') const clone = require('clone') const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index c496690a7..6b50bf504 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -6,17 +6,11 @@ const h = require('react-hyperscript') const Mascot = require('../components/mascot') const actions = require('../actions') const Tooltip = require('../components/tooltip') +const t = require('../../i18n') const getCaretCoordinates = require('textarea-caret') let isSubmitting = false -let t = chrome.i18n.getMessage || (function() { - let msg = require('../../../app/_locales/en/messages.json'); - return (function(key) { - return msg[key].message; - }); -})(); - module.exports = connect(mapStateToProps)(InitializeMenuScreen) inherits(InitializeMenuScreen, Component) -- cgit v1.2.3 From 9c133aaab30decce16a1bf4120071d4614f99bc8 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 24 Jan 2018 19:41:29 -1000 Subject: get t imported in all files currently using i18n --- ui/app/components/account-dropdowns.js | 1 + ui/app/components/account-export.js | 1 + ui/app/components/buy-button-subview.js | 1 + ui/app/components/coinbase-form.js | 1 + ui/app/components/copyButton.js | 1 + ui/app/components/copyable.js | 1 + ui/app/components/ens-input.js | 1 + ui/app/components/hex-as-decimal-input.js | 1 + ui/app/components/network.js | 1 + ui/app/components/notice.js | 1 + ui/app/components/pending-msg-details.js | 1 + ui/app/components/pending-msg.js | 1 + ui/app/components/pending-personal-msg-details.js | 1 + ui/app/components/pending-typed-msg-details.js | 1 + ui/app/components/pending-typed-msg.js | 1 + ui/app/components/send-token/index.js | 1 + ui/app/components/send/gas-fee-display-v2.js | 1 + ui/app/components/send/gas-tooltip.js | 1 + ui/app/components/send/to-autocomplete.js | 1 + ui/app/components/shapeshift-form.js | 1 + ui/app/components/shift-list-item.js | 1 + ui/app/components/signature-request.js | 1 + ui/app/components/token-list.js | 1 + ui/app/components/transaction-list-item.js | 1 + ui/app/components/transaction-list.js | 1 + ui/app/components/tx-list-item.js | 1 + ui/app/components/tx-list.js | 1 + ui/app/components/tx-view.js | 1 + ui/app/components/wallet-view.js | 1 + 29 files changed, 29 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 3e5805c0e..ede40d3f2 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem const Identicon = require('./identicon') const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') +const t = require('../../i18n') class AccountDropdowns extends Component { constructor (props) { diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 346872a97..25f36da58 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -6,6 +6,7 @@ const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const ethUtil = require('ethereumjs-util') const connect = require('react-redux').connect +const t = require('../../i18n') module.exports = connect(mapStateToProps)(ExportAccountView) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 76da4fc9d..6f2c74b6d 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -9,6 +9,7 @@ const Loading = require('./loading') const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') const networkNames = require('../../../app/scripts/config.js').networkNames +const t = require('../../i18n') module.exports = connect(mapStateToProps)(BuyButtonSubview) diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index 6532cb3bf..e442b43d5 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../actions') +const t = require('../../i18n') module.exports = connect(mapStateToProps)(CoinbaseForm) diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index 5d5be8feb..355f78d45 100644 --- a/ui/app/components/copyButton.js +++ b/ui/app/components/copyButton.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const copyToClipboard = require('copy-to-clipboard') +const t = require('../../i18n') const Tooltip = require('./tooltip') diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index 690e44153..fca7d3863 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const Tooltip = require('./tooltip') const copyToClipboard = require('copy-to-clipboard') +const t = require('../../i18n') module.exports = Copyable diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 3e7a23369..add67ea35 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -8,6 +8,7 @@ const ENS = require('ethjs-ens') const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' +const t = require('../../i18n') module.exports = EnsInput diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index 07432a1f2..992d8c8cd 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') +const t = require('../../i18n') module.exports = HexAsDecimalInput diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 6cb1ff53d..f3df2242a 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const classnames = require('classnames') const inherits = require('util').inherits const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') +const t = require('../../i18n') module.exports = Network diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index 5bda329ed..390639297 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const ReactMarkdown = require('react-markdown') const linker = require('extension-link-enabler') const findDOMNode = require('react-dom').findDOMNode +const t = require('../../i18n') module.exports = Notice diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index 3ea063c3c..b66657f3b 100644 --- a/ui/app/components/pending-msg-details.js +++ b/ui/app/components/pending-msg-details.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const t = require('../../i18n') const AccountPanel = require('./account-panel') diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index 236849c18..dc406b955 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-msg-details') +const t = require('../../i18n') module.exports = PendingMsg diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js index 30c475347..d21689f86 100644 --- a/ui/app/components/pending-personal-msg-details.js +++ b/ui/app/components/pending-personal-msg-details.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const t = require('../../i18n') const AccountPanel = require('./account-panel') const BinaryRenderer = require('./binary-renderer') diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js index a3381174d..9708ed1d7 100644 --- a/ui/app/components/pending-typed-msg-details.js +++ b/ui/app/components/pending-typed-msg-details.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const AccountPanel = require('./account-panel') const TypedMessageRenderer = require('./typed-message-renderer') +const t = require('../../i18n') module.exports = PendingMsgDetails diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js index f0f846027..3d473f47d 100644 --- a/ui/app/components/pending-typed-msg.js +++ b/ui/app/components/pending-typed-msg.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-typed-msg-details') +const t = require('../../i18n') module.exports = PendingMsg diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js index a40664977..2ad7c9dd0 100644 --- a/ui/app/components/send-token/index.js +++ b/ui/app/components/send-token/index.js @@ -7,6 +7,7 @@ const inherits = require('util').inherits const actions = require('../../actions') const selectors = require('../../selectors') const { isValidAddress, allNull } = require('../../util') +const t = require('../../../i18n') // const BalanceComponent = require('./balance-component') const Identicon = require('../identicon') diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index edaa297b9..0c6f76303 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const CurrencyDisplay = require('./currency-display') +const t = require('../../../i18n') module.exports = GasFeeDisplay diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js index da2a53c9e..d925d3ed8 100644 --- a/ui/app/components/send/gas-tooltip.js +++ b/ui/app/components/send/gas-tooltip.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const InputNumber = require('../input-number.js') +const t = require('../../../i18n') module.exports = GasTooltip diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 85e7bfa0e..72074229e 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('./account-list-item') +const t = require('../../../i18n') module.exports = ToAutoComplete diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 773ff227c..329feb38f 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -7,6 +7,7 @@ const { qrcode } = require('qrcode-npm') const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') const { isValidAddress } = require('../util') const SimpleDropdown = require('./dropdowns/simple-dropdown') +const t = require('../../i18n') function mapStateToProps (state) { const { diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index 6e5be641f..21d41a06c 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -6,6 +6,7 @@ const vreme = new (require('vreme'))() const explorerLink = require('etherscan-link').createExplorerLink const actions = require('../actions') const addressSummary = require('../util').addressSummary +const t = require('../../i18n') const CopyButton = require('./copyButton') const EthBalance = require('./eth-balance') diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 8003f8b1d..d0e568bca 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -9,6 +9,7 @@ const classnames = require('classnames') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') const actions = require('../actions') +const t = require('../../i18n') const { conversionUtil } = require('../conversion-util') const { diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index a25566e64..01529aeda 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -5,6 +5,7 @@ const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') const connect = require('react-redux').connect const selectors = require('../selectors') +const t = require('../../i18n') function mapStateToProps (state) { return { diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 10d4236cb..6baf60141 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -11,6 +11,7 @@ const vreme = new (require('vreme'))() const Tooltip = require('./tooltip') const numberToBN = require('number-to-bn') const actions = require('../actions') +const t = require('../../i18n') const TransactionIcon = require('./transaction-list-item-icon') const ShiftListItem = require('./shift-list-item') diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index cb3f8097b..07f7a06ae 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const TransactionListItem = require('./transaction-list-item') +const t = require('../../i18n') module.exports = TransactionList diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index d53277925..7a38096b6 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -13,6 +13,7 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util') const { calcTokenAmount } = require('../token-util') const { getCurrentCurrency } = require('../selectors') +const t = require('../../i18n') module.exports = connect(mapStateToProps)(TxListItem) diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 6076ab5d3..8343ec46b 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -10,6 +10,7 @@ const { formatDate } = require('../util') const { showConfTxPage } = require('../actions') const classnames = require('classnames') const { tokenInfoGetter } = require('../token-util') +const t = require('../../i18n') module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 423234d4f..adc9b8e94 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -5,6 +5,7 @@ const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') const selectors = require('../selectors') +const t = require('../../i18n') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3d9c01c6e..60a780fc6 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -9,6 +9,7 @@ const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') const selectors = require('../selectors') +const t = require('../../i18n') module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) -- cgit v1.2.3 From abfa74f09a0119345165a32090d88a1d95df6c80 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 29 Jan 2018 15:29:01 -0500 Subject: complete i18n across new UI --- ui/app/accounts/import/index.js | 9 +++++---- ui/app/accounts/import/json.js | 8 ++++---- ui/app/accounts/import/private-key.js | 8 ++++---- ui/app/accounts/new-account/create-form.js | 8 ++++---- ui/app/components/account-dropdowns.js | 6 +++--- ui/app/components/account-export.js | 8 ++++---- ui/app/components/account-menu/index.js | 2 +- ui/app/components/bn-as-decimal-input.js | 9 +++++---- ui/app/components/buy-button-subview.js | 6 +++--- ui/app/components/customize-gas-modal/index.js | 8 ++++---- .../components/dropdowns/components/account-dropdowns.js | 8 ++++---- ui/app/components/hex-as-decimal-input.js | 6 +++--- ui/app/components/modals/account-details-modal.js | 2 +- ui/app/components/modals/deposit-ether-modal.js | 4 +++- ui/app/components/modals/edit-account-name-modal.js | 4 ++-- ui/app/components/modals/hide-token-confirmation-modal.js | 8 ++++---- ui/app/components/modals/new-account-modal.js | 6 +++--- ui/app/components/pending-msg-details.js | 2 +- ui/app/components/pending-personal-msg-details.js | 2 +- ui/app/components/pending-tx/confirm-deploy-contract.js | 12 ++++++------ ui/app/components/pending-tx/confirm-send-ether.js | 6 +++--- ui/app/components/pending-tx/confirm-send-token.js | 14 +++++++------- ui/app/components/pending-typed-msg-details.js | 2 +- ui/app/components/pending-typed-msg.js | 8 ++++---- ui/app/components/send-token/index.js | 6 +++--- ui/app/components/shapeshift-form.js | 2 +- ui/app/components/shift-list-item.js | 6 +++--- ui/app/components/signature-request.js | 8 ++++---- ui/app/components/tx-view.js | 8 ++++---- ui/app/components/wallet-view.js | 4 ++-- ui/app/css/itcss/generic/index.scss | 4 ++++ 31 files changed, 101 insertions(+), 93 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 0c901c09b..6ae74864f 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const t = require('../../../i18n') import Select from 'react-select' // Subviews @@ -9,8 +10,8 @@ const JsonImportView = require('./json.js') const PrivateKeyImportView = require('./private-key.js') const menuItems = [ - 'Private Key', - 'JSON File', + t('privateKey'), + t('jsonFile'), ] module.exports = connect(mapStateToProps)(AccountImportSubview) @@ -70,9 +71,9 @@ AccountImportSubview.prototype.renderImportView = function () { const current = type || menuItems[0] switch (current) { - case 'Private Key': + case t('privateKey'): return h(PrivateKeyImportView) - case 'JSON File': + case t('jsonFile'): return h(JsonImportView) default: return h(JsonImportView) diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 8b5a2b469..eb63a98a9 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -50,16 +50,16 @@ JsonImportSubview.prototype.render = function () { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel', { + h('button.new-account-create-form__button-cancel.allcaps', { onClick: () => this.props.goHome(), }, [ - t('cancelCaps'), + t('cancel'), ]), - h('button.new-account-create-form__button-create', { + h('button.new-account-create-form__button-create.allcaps', { onClick: () => this.createNewKeychain.bind(this), }, [ - t('importCaps'), + t('import'), ]), ]), diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 4a04156e0..e8c192a61 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -43,16 +43,16 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel', { + h('button.new-account-create-form__button-cancel.allcaps', { onClick: () => goHome(), }, [ - t('cancelCaps'), + t('cancel'), ]), - h('button.new-account-create-form__button-create', { + h('button.new-account-create-form__button-create.allcaps', { onClick: () => this.createNewKeychain(), }, [ - t('importCaps'), + t('import'), ]), ]), diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 6f35e8886..ce8af394a 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -35,16 +35,16 @@ class NewAccountCreateForm extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel', { + h('button.new-account-create-form__button-cancel.allcaps', { onClick: () => this.props.goHome(), }, [ - t('cancelCaps'), + t('cancel'), ]), - h('button.new-account-create-form__button-create', { + h('button.new-account-create-form__button-create.allcaps', { onClick: () => this.props.createAccount(newAccountName), }, [ - t('createCaps'), + t('create'), ]), ]), diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index ede40d3f2..e92da8947 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -80,7 +80,7 @@ class AccountDropdowns extends Component { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', t('looseCaps')) : null + return isLoose ? h('.keyring-label.allcaps', t('loose')) : null } catch (e) { return } } @@ -155,7 +155,7 @@ class AccountDropdowns extends Component { fontSize: '24px', marginBottom: '5px', }, - }, 'Import Account'), + }, t('importAccount')), ] ), ] @@ -205,7 +205,7 @@ class AccountDropdowns extends Component { actions.showQrView(selected, identity ? identity.name : '') }, }, - t('qrCode'), + t('showQRCode'), ), h( DropdownMenuItem, diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 25f36da58..5637bc8d0 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -54,7 +54,7 @@ ExportAccountView.prototype.render = function () { h('p.error', warning), h('input#exportAccount.sizing-input', { type: 'password', - placeholder: t('confirmPasswordSmall'), + placeholder: t('confirmPassword').toLowerCase(), onKeyPress: this.onExportKeyPress.bind(this), style: { position: 'relative', @@ -99,7 +99,7 @@ ExportAccountView.prototype.render = function () { margin: '0 20px', }, }, [ - h('label', 'Your private key (click to copy):'), + h('label', t('copyPrivateKey') + ':'), h('p.error.cursor-pointer', { style: { textOverflow: 'ellipsis', @@ -113,13 +113,13 @@ ExportAccountView.prototype.render = function () { }, plainKey), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, 'Done'), + }, t('done')), h('button', { style: { marginLeft: '10px', }, onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), - }, 'Save as File'), + }, t('saveAsFile')), ]) } } diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 9c7b6b15a..d9cf8cdce 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -156,6 +156,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', t('importedCaps')) : null + return isLoose ? h('.keyring-label.allcaps', t('imported')) : null } catch (e) { return } } diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js index 22e37602e..70701b039 100644 --- a/ui/app/components/bn-as-decimal-input.js +++ b/ui/app/components/bn-as-decimal-input.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') +const t = require('../../i18n') module.exports = BnAsDecimalInput @@ -136,13 +137,13 @@ BnAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += `must be greater than or equal to ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.` + message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`]) } else if (min) { - message += `must be greater than or equal to ${newMin} ${suffix}.` + message += t('greaterThanMin', [`${newMin} ${suffix}`]) } else if (max) { - message += `must be less than or equal to ${newMax} ${suffix}.` + message += t('lessThanMax', [`${newMax} ${suffix}`]) } else { - message += 'Invalid input.' + message += t('invalidInput') } return message diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 6f2c74b6d..1e277a94b 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -144,7 +144,7 @@ BuyButtonSubview.prototype.primarySubview = function () { case '4': case '42': const networkName = networkNames[network] - const label = `${networkName} Test Faucet` + const label = `${networkName} ${t('testFaucet')}` return ( h('div.flex-column', { style: { @@ -204,8 +204,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () { 'ShapeShift', ], subtext: { - 'Coinbase': 'Crypto/FIAT (USA only)', - 'ShapeShift': 'Crypto', + 'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`, + 'ShapeShift': t('crypto'), }, onClick: this.radioHandler.bind(this), }), diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 1c6036867..920dfeab6 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -283,13 +283,13 @@ CustomizeGasModal.prototype.render = function () { }, [t('revert')]), h('div.send-v2__customize-gas__buttons', [ - h('div.send-v2__customize-gas__cancel', { + h('div.send-v2__customize-gas__cancel.allcaps', { onClick: this.props.hideModal, - }, [t('cancelCaps')]), + }, [t('cancel')]), - h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, { + h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), - }, [t('saveCaps')]), + }, [t('save')]), ]), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index dfa5e5fac..620ac8483 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -122,7 +122,7 @@ class AccountDropdowns extends Component { flex: '3 3 auto', }, }, [ - h('span.account-dropdown-edit-button', { + h('span.account-dropdown-edit-button.allcaps', { style: { fontSize: '16px', }, @@ -130,7 +130,7 @@ class AccountDropdowns extends Component { actions.showEditAccountModal(identity) }, }, [ - t('editCaps'), + t('edit'), ]), ]), @@ -160,7 +160,7 @@ class AccountDropdowns extends Component { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', t('looseCaps')) : null + return isLoose ? h('.keyring-label.allcaps', t('loose')) : null } catch (e) { return } } @@ -303,7 +303,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('accDetails'), + t('accountDetails'), ), h( DropdownMenuItem, diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index 992d8c8cd..a43d44f89 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -127,11 +127,11 @@ HexAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += `must be greater than or equal to ${min} and less than or equal to ${max}.` + message += t('betweenMinAndMax', [min, max]) } else if (min) { - message += `must be greater than or equal to ${min}.` + message += t('greaterThanMin', [min]) } else if (max) { - message += `must be less than or equal to ${max}.` + message += t('lessThanMax', [max]) } else { message += t('invalidInput') } diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 17760dc1a..75f989e86 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -70,7 +70,7 @@ AccountDetailsModal.prototype.render = function () { // Holding on redesign for Export Private Key functionality h('button.btn-clear.account-modal__button', { onClick: () => showExportPrivateKeyModal(), - }, t('exportPrivateKeyLower')), + }, t('exportPrivateKey')), ]) } diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index e91b43841..7172d05a5 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -14,7 +14,9 @@ const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer') const SHAPESHIFT_ROW_TITLE = t('depositShapeShift') const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer') const FAUCET_ROW_TITLE = t('testFaucet') -const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` +const facuetRowText = (networkName) => { + return t('getEtherFromFaucet', [networkName]) +} function mapStateToProps (state) { return { diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 611def005..6efa8d476 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -61,7 +61,7 @@ EditAccountNameModal.prototype.render = function () { value: this.state.inputText, }, []), - h('button.btn-clear.edit-account-name-modal-save-button', { + h('button.btn-clear.edit-account-name-modal-save-button.allcaps', { onClick: () => { if (this.state.inputText.length !== 0) { saveAccountLabel(identity.address, this.state.inputText) @@ -70,7 +70,7 @@ EditAccountNameModal.prototype.render = function () { }, disabled: this.state.inputText.length === 0, }, [ - t('saveCaps'), + t('save'), ]), ]), diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index 98b1e2d03..33d8062c6 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -59,15 +59,15 @@ HideTokenConfirmationModal.prototype.render = function () { ]), h('div.hide-token-confirmation__buttons', {}, [ - h('button.btn-cancel.hide-token-confirmation__button', { + h('button.btn-cancel.hide-token-confirmation__button.allcaps', { onClick: () => hideModal(), }, [ - t('cancelCaps'), + t('cancel'), ]), - h('button.btn-clear.hide-token-confirmation__button', { + h('button.btn-clear.hide-token-confirmation__button.allcaps', { onClick: () => hideToken(address), }, [ - t('hideCaps'), + t('hide'), ]), ]), ]), diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 35f4764a6..298b76af4 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -12,7 +12,7 @@ class NewAccountModal extends Component { const newAccountNumber = numberOfExistingAccounts + 1 this.state = { - newAccountName: `Account ${newAccountNumber}`, + newAccountName: `${t('account')} ${newAccountNumber}`, } } @@ -53,11 +53,11 @@ class NewAccountModal extends Component { }, }, t('importAnAccount')), - h('div.new-account-modal-content.button', {}, [ + h('div.new-account-modal-content.button.allcaps', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - t('saveCaps'), + t('save'), ]), ]), ]), diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index b66657f3b..87e66855d 100644 --- a/ui/app/components/pending-msg-details.js +++ b/ui/app/components/pending-msg-details.js @@ -40,7 +40,7 @@ PendingMsgDetails.prototype.render = function () { // message data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ h('.flex-column.flex-space-between', [ - h('label.font-small', t('messageCaps')), + h('label.font-small.allcaps', t('message')), h('span.font-small', msgParams.data), ]), ]), diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js index d21689f86..b896e9a7e 100644 --- a/ui/app/components/pending-personal-msg-details.js +++ b/ui/app/components/pending-personal-msg-details.js @@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () { height: '260px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, t('messageCaps')), + h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')), h(BinaryRenderer, { value: data, style: { diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index e6972c541..49fbe6387 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -56,7 +56,7 @@ ConfirmDeployContract.prototype.onSubmit = function (event) { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) this.setState({ submitting: false }) } } @@ -272,9 +272,9 @@ ConfirmDeployContract.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.confirm-screen-back-button.allcaps', { onClick: () => backToAccountDetail(selectedAddress), - }, 'BACK'), + }, t('back')), h('div.confirm-screen-title', t('confirmContract')), h('div.confirm-screen-header-tip'), ]), @@ -336,12 +336,12 @@ ConfirmDeployContract.prototype.render = function () { onSubmit: this.onSubmit, }, [ // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button', { + h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { onClick: (event) => this.cancel(event, txMeta), - }, t('cancelCaps')), + }, t('cancel')), // Accept Button - h('button.confirm-screen-confirm-button', [t('confirmCaps')]), + h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 52693b4f6..21b9b548b 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -392,15 +392,15 @@ ConfirmSendEther.prototype.render = function () { onSubmit: this.onSubmit, }, [ // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button', { + h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { onClick: (event) => { clearSend() this.cancel(event, txMeta) }, - }, t('cancelCaps')), + }, t('cancel')), // Accept Button - h('button.confirm-screen-confirm-button', [t('confirmCaps')]), + h('button.confirm-screen-confirm-button.allcaps', [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 14523461f..b1bec946a 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -286,7 +286,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), - h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`), ]), ]) ) @@ -315,10 +315,10 @@ ConfirmSendToken.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.btn-clear.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button.allcaps', { onClick: () => editTransaction(txMeta), - }, t('editCaps')), - h('div.confirm-screen-title', 'Confirm Transaction'), + }, t('edit')), + h('div.confirm-screen-title', t('confirmTransaction')), h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ @@ -386,12 +386,12 @@ ConfirmSendToken.prototype.render = function () { onSubmit: this.onSubmit, }, [ // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button', { + h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { onClick: (event) => this.cancel(event, txMeta), - }, t('cancelCaps')), + }, t('cancel')), // Accept Button - h('button.confirm-screen-confirm-button', [t('confirmCaps')]), + h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), ]), diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js index 9708ed1d7..ae0a1171e 100644 --- a/ui/app/components/pending-typed-msg-details.js +++ b/ui/app/components/pending-typed-msg-details.js @@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () { height: '260px', }, }, [ - h('label.font-small', { style: { display: 'block' } }, t('youSignCaps')), + h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')), h(TypedMessageRenderer, { value: data, style: { diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js index 3d473f47d..ccde5e8af 100644 --- a/ui/app/components/pending-typed-msg.js +++ b/ui/app/components/pending-typed-msg.js @@ -34,12 +34,12 @@ PendingMsg.prototype.render = function () { // sign + cancel h('.flex-row.flex-space-around', [ - h('button', { + h('button.allcaps', { onClick: state.cancelTypedMessage, - }, t('cancelCaps')), - h('button', { + }, t('cancel')), + h('button.allcaps', { onClick: state.signTypedMessage, - }, t('signCaps')), + }, t('sign')), ]), ]) diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js index 2ad7c9dd0..58743b641 100644 --- a/ui/app/components/send-token/index.js +++ b/ui/app/components/send-token/index.js @@ -234,7 +234,7 @@ SendTokenScreen.prototype.renderToAddressInput = function () { 'send-screen-input-wrapper--error': errorMessage, }), }, [ - h('div', [t('toSpecific')]), + h('div', [t('to') + ':']), h('input.large-input.send-screen-input', { name: 'address', list: 'addresses', @@ -291,7 +291,7 @@ SendTokenScreen.prototype.renderAmountInput = function () { }), }, [ h('div.send-screen-amount-labels', [ - h('span', ['Amount']), + h('span', [t('amount')]), h(CurrencyToggle, { currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD', currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [], @@ -356,7 +356,7 @@ SendTokenScreen.prototype.renderGasInput = function () { }), h('div.send-screen-gas-labels', {}, [ - h('span', [ h('i.fa.fa-bolt'), t('gasFeeSpecific')]), + h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']), h('span', [t('whatsThis')]), ]), h('div.large-input.send-screen-gas-input', [ diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 329feb38f..104f82224 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -237,7 +237,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [t('buyButton')]), + }, [t('buy')]), ]) } diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index 21d41a06c..0d8681fb7 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -81,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () { value: this.props.depositAddress, }), h(Tooltip, { - title: 'QR Code', + title: t('qrCode'), }, [ h('i.fa.fa-qrcode.pointer.pop-hover', { onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)), @@ -141,7 +141,7 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, `${props.depositType} to ETH via ShapeShift`), + }, t('toETHviaShapeShift', [props.depositType])), h('div', t('noDeposits')), h('div', { style: { @@ -164,7 +164,7 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, `${props.depositType} to ETH via ShapeShift`), + }, t('toETHviaShapeShift', [props.depositType])), h('div', t('conversionProgress')), h('div', { style: { diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index d0e568bca..7bf34e7b6 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -76,7 +76,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () { return h('div.request-signature__account', [ - h('div.request-signature__account-text', [t('account')]), + h('div.request-signature__account-text', [t('account') + ':']), h(AccountDropdownMini, { selectedAccount, @@ -155,7 +155,7 @@ SignatureRequest.prototype.msgHexToText = function (hex) { SignatureRequest.prototype.renderBody = function () { let rows - let notice = t('youSign') + let notice = t('youSign') + ':' const { txData } = this.props const { type, msgParams: { data } } = txData @@ -225,10 +225,10 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.request-signature__footer__cancel-button', { onClick: cancel, - }, t('cancelCaps')), + }, t('cancel')), h('button.request-signature__footer__sign-button', { onClick: sign, - }, t('signCaps')), + }, t('sign')), ]) } diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index adc9b8e94..d35d20a89 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -69,25 +69,25 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear.hero-balance-button', { + h('button.btn-clear.hero-balance-button.allcaps', { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), - }, t('depositButton')), + }, t('deposit')), h('button.btn-clear.hero-balance-button', { style: { marginLeft: '0.8em', }, onClick: showSendPage, - }, t('sendButton')), + }, t('send')), ]) ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ h('button.btn-clear.hero-balance-button', { onClick: showSendTokenPage, - }, t('sendButton')), + }, t('send')), ]) ) } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 60a780fc6..6bd2d0963 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -114,7 +114,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label', isLoose ? t('importedCaps') : ''), + h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, @@ -131,7 +131,7 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.btn-clear.wallet-view__details-button', t('detailsCaps')), + h('button.btn-clear.wallet-view__details-button.allcaps', t('details')), ]), ]), diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 9d55324e3..91c85f073 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -69,3 +69,7 @@ textarea.large-input { input.large-input { height: 36px; } + +.allcaps { + text-transform: uppercase; +} -- cgit v1.2.3 From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 6 Feb 2018 22:03:37 -0800 Subject: Remove accessing PropTypes from main React package --- ui/app/components/account-dropdowns.js | 2 +- ui/app/components/dropdowns/components/account-dropdowns.js | 2 +- ui/app/components/dropdowns/components/dropdown.js | 2 +- ui/app/components/dropdowns/simple-dropdown.js | 2 +- ui/app/components/loading.js | 2 +- ui/app/components/tab-bar.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 0c34a5154..f69a6ca68 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const actions = require('../actions') const genAccountLink = require('etherscan-link').createAccountLink diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f97ac0691..d3a549884 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const actions = require('../../../actions') const genAccountLink = require('../../../../lib/account-link.js') diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index 15d064be8..0336dbb8b 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const MenuDroppo = require('../../menu-droppo') const extend = require('xtend') diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js index 7bb48e57b..bba088ed1 100644 --- a/ui/app/components/dropdowns/simple-dropdown.js +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -1,5 +1,5 @@ const { Component } = require('react') -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const h = require('react-hyperscript') const classnames = require('classnames') const R = require('ramda') diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 9442121fe..cb6fa51fb 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -1,6 +1,6 @@ const { Component } = require('react') const h = require('react-hyperscript') -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') class LoadingIndicator extends Component { renderMessage () { diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js index 0edced119..a80640116 100644 --- a/ui/app/components/tab-bar.js +++ b/ui/app/components/tab-bar.js @@ -1,6 +1,6 @@ const { Component } = require('react') const h = require('react-hyperscript') -const PropTypes = require('react').PropTypes +const PropTypes = require('prop-types') const classnames = require('classnames') class TabBar extends Component { -- cgit v1.2.3 From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Feb 2018 13:48:25 -0330 Subject: Add reset account button to new UI. --- ui/app/components/modals/modal.js | 13 ++++ ui/app/components/modals/notification-modal.js | 36 +++++++++-- .../notification-modals/confirm-reset-account.js | 46 ++++++++++++++ ui/app/css/itcss/components/modal.scss | 74 +++++++++++++--------- ui/app/settings.js | 23 +++++++ 5 files changed, 157 insertions(+), 35 deletions(-) create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js (limited to 'ui/app') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index afb2a2175..97fe38292 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') +const ConfirmResetAccount = require('./notification-modals/confirm-reset-account') const accountModalStyle = { mobileModalStyle: { @@ -202,6 +203,18 @@ const MODALS = { }, }, + CONFIRM_RESET_ACCOUNT: { + contents: h(ConfirmResetAccount), + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '473px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js index 239144b0c..621a974d0 100644 --- a/ui/app/components/modals/notification-modal.js +++ b/ui/app/components/modals/notification-modal.js @@ -9,26 +9,47 @@ class NotificationModal extends Component { const { header, message, + showCancelButton = false, + showConfirmButton = false, + hideModal, + onConfirm, } = this.props + const showButtons = showCancelButton || showConfirmButton + return h('div', [ - h('div.notification-modal-wrapper', { + h('div.notification-modal__wrapper', { }, [ - h('div.notification-modal-header', {}, [ + h('div.notification-modal__header', {}, [ header, ]), - h('div.notification-modal-message-wrapper', {}, [ - h('div.notification-modal-message', {}, [ + h('div.notification-modal__message-wrapper', {}, [ + h('div.notification-modal__message', {}, [ message, ]), ]), h('div.modal-close-x', { - onClick: this.props.hideModal, + onClick: hideModal, }), + showButtons && h('div.notification-modal__buttons', [ + + showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', { + onClick: hideModal, + }, 'Cancel'), + + showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', { + onClick: () => { + onConfirm() + hideModal() + }, + }, 'Confirm'), + + ]), + ]), ]) } @@ -37,7 +58,10 @@ class NotificationModal extends Component { NotificationModal.propTypes = { hideModal: PropTypes.func, header: PropTypes.string, - message: PropTypes.string, + message: PropTypes.node, + showCancelButton: PropTypes.bool, + showConfirmButton: PropTypes.bool, + onConfirm: PropTypes.func, } const mapDispatchToProps = dispatch => { diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js new file mode 100644 index 000000000..e1bc91b24 --- /dev/null +++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js @@ -0,0 +1,46 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../../actions') +const NotifcationModal = require('../notification-modal') + +class ConfirmResetAccount extends Component { + render () { + const { resetAccount } = this.props + + return h(NotifcationModal, { + header: 'Are you sure you want to reset account?', + message: h('div', [ + + h('span', `Resetting is for developer use only. This button wipes the current account's transaction history, + which is used to calculate the current account nonce. `), + + h('a.notification-modal__link', { + href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account', + target: '_blank', + onClick (event) { global.platform.openWindow({ url: event.target.href }) }, + }, 'Read more.'), + + ]), + showCancelButton: true, + showConfirmButton: true, + onConfirm: resetAccount, + + }) + } +} + +ConfirmResetAccount.propTypes = { + resetAccount: PropTypes.func, +} + +const mapDispatchToProps = dispatch => { + return { + resetAccount: () => { + dispatch(actions.resetAccount()) + }, + } +} + +module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount) diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 5bca4a07d..919e1793b 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -547,38 +547,54 @@ //Notification Modal -.notification-modal-wrapper { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - position: relative; - border: 1px solid $alto; - box-shadow: 0 0 2px 2px $alto; - font-family: Roboto; -} +.notification-modal { -.notification-modal-header { - background: $wild-sand; - width: 100%; - display: flex; - justify-content: center; - padding: 30px; - font-size: 22px; - color: $nile-blue; - height: 79px; -} + &__wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; + font-family: Roboto; + } -.notification-modal-message { - padding: 20px; -} + &__header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; + height: 79px; + } -.notification-modal-message { - width: 100%; - display: flex; - justify-content: center; - font-size: 17px; - color: $nile-blue; + &__message { + padding: 20px; + width: 100%; + display: flex; + justify-content: center; + font-size: 17px; + color: $nile-blue; + } + + &__buttons { + display: flex; + justify-content: space-evenly; + width: 100%; + margin-bottom: 24px; + padding: 0px 42px; + + &__btn { + cursor: pointer; + } + } + + &__link { + color: $curious-blue; + } } // Deposit Ether Modal diff --git a/ui/app/settings.js b/ui/app/settings.js index 476bad296..988ddea8d 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -250,6 +250,24 @@ class Settings extends Component { ) } + renderResetAccount () { + const { showResetAccountConfirmationModal } = this.props + + return h('div.settings__content-row', [ + h('div.settings__content-item', 'Reset Account'), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('button.settings__clear-button.settings__clear-button--orange', { + onClick (event) { + event.preventDefault() + showResetAccountConfirmationModal() + }, + }, 'Reset Account'), + ]), + ]), + ]) + } + renderSettingsContent () { const { warning, isMascara } = this.props @@ -262,6 +280,7 @@ class Settings extends Component { this.renderStateLogs(), this.renderSeedWords(), !isMascara && this.renderOldUI(), + this.renderResetAccount(), this.renderBlockieOptIn(), ]) ) @@ -387,6 +406,7 @@ Settings.propTypes = { displayWarning: PropTypes.func, revealSeedConfirmation: PropTypes.func, setFeatureFlagToBeta: PropTypes.func, + showResetAccountConfirmationModal: PropTypes.func, warning: PropTypes.string, goHome: PropTypes.func, isMascara: PropTypes.bool, @@ -412,6 +432,9 @@ const mapDispatchToProps = dispatch => { return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) }, + showResetAccountConfirmationModal: () => { + return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' })) + }, } } -- cgit v1.2.3 From bb79fb354b4618e3090cd1c1a232f318b86ebf88 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Feb 2018 20:03:23 -0330 Subject: Try beta link on unlock and privacy screens. --- ui/app/unlock.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui/app') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index e77d17d7b..4b39bd3e2 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('./actions') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter +const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums const Mascot = require('./components/mascot') @@ -85,6 +86,22 @@ UnlockScreen.prototype.render = function () { }, }, 'Restore from seed phrase'), ]), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => { + this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) + .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) + }, + style: { + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', + }, + }, 'Use classic interface'), + ]), + ]) ) } -- cgit v1.2.3 From fe2ed68f1139046d163ec3d85f31d61ae5fbd989 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 12 Feb 2018 14:15:53 -0330 Subject: Remove chrome focus outline for mouse users. (#3230) --- ui/app/actions.js | 10 ++++++++++ ui/app/app.js | 18 +++++++++++++++++- ui/app/css/itcss/base/index.scss | 6 ++++++ ui/app/reducers/app.js | 7 +++++++ 4 files changed, 40 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index f930a93c1..c6776eeee 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -257,6 +257,9 @@ var actions = { updateFeatureFlags, UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS', + setMouseUserState, + SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE', + // Network setNetworkEndpoints, updateNetworkEndpointType, @@ -1661,6 +1664,13 @@ function updateFeatureFlags (updatedFeatureFlags) { } } +function setMouseUserState (isMouseUser) { + return { + type: actions.SET_MOUSE_USER_STATE, + value: isMouseUser, + } +} + // Call Background Then Update // // A function generator for a common pattern wherein: diff --git a/ui/app/app.js b/ui/app/app.js index 20dc65df3..cdb0c8c61 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -85,6 +85,7 @@ function mapStateToProps (state) { lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, + isMouseUser: state.appState.isMouseUser, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -101,6 +102,7 @@ function mapDispatchToProps (dispatch, ownProps) { hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)), } } @@ -112,7 +114,13 @@ App.prototype.componentWillMount = function () { App.prototype.render = function () { var props = this.props - const { isLoading, loadingMessage, network } = props + const { + isLoading, + loadingMessage, + network, + isMouseUser, + setMouseUserState, + } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null @@ -120,11 +128,19 @@ App.prototype.render = function () { return ( h('.flex-column.full-height', { + className: classnames({ 'mouse-user-styles': isMouseUser }), style: { overflowX: 'hidden', position: 'relative', alignItems: 'center', }, + tabIndex: '0', + onClick: () => setMouseUserState(true), + onKeyDown: (e) => { + if (e.keyCode === 9) { + setMouseUserState(false) + } + }, }, [ // global modal diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss index baa6ea037..1475e8bb5 100644 --- a/ui/app/css/itcss/base/index.scss +++ b/ui/app/css/itcss/base/index.scss @@ -1 +1,7 @@ // Base + +.mouse-user-styles { + button:focus { + outline: 0; + } +} diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 6885d029a..02f024f7c 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -59,6 +59,7 @@ function reduceApp (state, action) { // Used to display error text warning: null, buyView: {}, + isMouseUser: false, }, state.appState) switch (action.type) { @@ -658,6 +659,12 @@ function reduceApp (state, action) { data: action.value.data, }, }) + + case actions.SET_MOUSE_USER_STATE: + return extend(appState, { + isMouseUser: action.value, + }) + default: return appState } -- cgit v1.2.3 From e4c83466befc439f26cdd9c32d130b367bc552a7 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 13 Feb 2018 03:09:15 -0330 Subject: Send screen style updates. (#3234) --- ui/app/css/itcss/components/currency-display.scss | 3 ++- ui/app/css/itcss/components/send.scss | 22 +++++++++++++++++++++- ui/app/css/itcss/generic/index.scss | 23 +++++++++++++++++++++-- ui/app/send-v2.js | 13 ++++++++----- 4 files changed, 52 insertions(+), 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 9459629b6..e043c1966 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -4,7 +4,7 @@ border: 1px solid $alto; border-radius: 4px; background-color: $white; - color: $dusty-gray; + color: $scorpion; font-family: Roboto; font-size: 16px; font-weight: 300; @@ -52,5 +52,6 @@ &__currency-symbol { margin-top: 1px; + color: $scorpion; } } \ 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 fd73275e0..bb17e53cd 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -557,6 +557,25 @@ &__form-field { flex: 1 1 auto; + + .currency-display { + color: $tundora; + + &__currency-symbol { + color: $tundora; + } + + &__converted-value, + &__converted-currency { + color: $tundora; + } + } + + .account-list-item { + &__account-secondary-balance { + color: $tundora; + } + } } &__form-label { @@ -565,6 +584,7 @@ font-size: 16px; line-height: 22px; width: 88px; + font-weight: 400; } &__from-dropdown { @@ -620,7 +640,7 @@ border: 1px solid $alto; border-radius: 4px; background-color: $white; - color: $dusty-gray; + color: $tundora; padding: 10px; font-family: Roboto; font-size: 16px; diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 75f823320..9b3d7475b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -82,8 +82,20 @@ input.large-input { display: flex; flex-flow: column; border-bottom: 1px solid $geyser; - padding: 1.6rem 1rem; + padding: 1.15rem 0.95rem; flex: 0 0 auto; + background: $alabaster; + position: relative; + } + + &__header-close::after { + content: '\00D7'; + font-size: 40px; + color: $tundora; + position: absolute; + top: 21.5px; + right: 28.5px; + cursor: pointer; } &__footer { @@ -93,6 +105,11 @@ input.large-input { border-top: 1px solid $geyser; padding: 1.6rem; flex: 0 0 auto; + + .btn-clear, + .btn-cancel { + font-size: 1rem; + } } &__footer-button { @@ -101,6 +118,7 @@ input.large-input { font-size: 1rem; text-transform: uppercase; margin-right: 1rem; + border-radius: 2px; &:last-of-type { margin-right: 0; @@ -108,7 +126,7 @@ input.large-input { } &__title { - color: $tundora; + color: $black; font-family: Roboto; font-size: 2rem; font-weight: 500; @@ -119,6 +137,7 @@ input.large-input { padding-top: .5rem; line-height: initial; font-size: .9rem; + color: $gray; } &__tabs { diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index d4e15dfa8..1d67150e3 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -179,7 +179,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { } SendTransactionScreen.prototype.renderHeader = function () { - const { selectedToken } = this.props + const { selectedToken, clearSend, goHome } = this.props const tokenText = selectedToken ? 'tokens' : 'ETH' return h('div.page-container__header', [ @@ -188,10 +188,13 @@ SendTransactionScreen.prototype.renderHeader = function () { h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`), - h( - 'div.page-container__subtitle', - 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.' - ), + h('div.page-container__header-close', { + onClick: () => { + clearSend() + goHome() + }, + }), + ]) } -- cgit v1.2.3 From 35c762da47c4b604f44e903940245f87eb7a3d3a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 13 Feb 2018 03:21:05 -0330 Subject: Updates the styling of confirm send ether and token screens. (#3235) --- ui/app/components/pending-tx/confirm-send-ether.js | 16 +++++++--------- ui/app/components/pending-tx/confirm-send-token.js | 16 +++++++--------- ui/app/css/itcss/components/confirm.scss | 14 ++++++-------- 3 files changed, 20 insertions(+), 26 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 652300c94..3f8d9c28f 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -213,17 +213,15 @@ ConfirmSendEther.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container.confirm-send-ether', { - style: { minWidth: '355px' }, - }, [ + h('div.confirm-screen-container.confirm-send-ether', [ // Main Send token Card - h('div.confirm-screen-wrapper.flex-column.flex-grow', [ - h('h3.flex-center.confirm-screen-header', [ - h('button.btn-clear.confirm-screen-back-button', { + h('div.page-container', [ + h('div.page-container__header', [ + h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), - }, 'EDIT'), - h('div.confirm-screen-title', 'Confirm Transaction'), - h('div.confirm-screen-header-tip'), + }, 'Edit'), + h('div.page-container__title', 'Confirm'), + h('div.page-container__subtitle', `Please review your transaction.`), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index ad489c3e9..e4b0c186a 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -308,17 +308,15 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container.confirm-send-token', { - style: { minWidth: '355px' }, - }, [ + h('div.confirm-screen-container.confirm-send-token', [ // Main Send token Card - h('div.confirm-screen-wrapper.flex-column.flex-grow', [ - h('h3.flex-center.confirm-screen-header', [ - h('button.btn-clear.confirm-screen-back-button', { + h('div.page-container', [ + h('div.page-container__header', [ + h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), - }, 'EDIT'), - h('div.confirm-screen-title', 'Confirm Transaction'), - h('div.confirm-screen-header-tip'), + }, 'Edit'), + h('div.page-container__title', 'Confirm'), + h('div.page-container__subtitle', `Please review your transaction.`), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 255f66e66..878495290 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -103,15 +103,13 @@ } .confirm-screen-back-button { - background: transparent; - left: 24px; + color: $curious-blue; + font-family: Roboto; + font-size: 1rem; position: absolute; - padding: 6px 12px; - font-size: .7rem; - - @media screen and (max-width: $break-small) { - margin-right: 12px; - } + top: 38px; + right: 38px; + background: none; } .confirm-screen-account-wrapper { -- cgit v1.2.3 From b5b16e4ce09b5fa27ce4775b30a44bacea7ee329 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Feb 2018 13:25:00 -0330 Subject: Only open a new window on restore from seed if in extension view. --- ui/app/actions.js | 2 -- ui/app/unlock.js | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index c6776eeee..4bc1f379e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -842,7 +842,6 @@ function showRestoreVault () { function markPasswordForgotten () { return (dispatch) => { - dispatch(actions.showLoadingIndication()) return background.markPasswordForgotten(() => { dispatch(actions.hideLoadingIndication()) dispatch(actions.forgotPassword()) @@ -853,7 +852,6 @@ function markPasswordForgotten () { function unMarkPasswordForgotten () { return (dispatch) => { - dispatch(actions.showLoadingIndication()) return background.unMarkPasswordForgotten(() => { dispatch(actions.hideLoadingIndication()) dispatch(actions.forgotPassword()) diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 4b39bd3e2..db88fa9d0 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -77,7 +77,12 @@ UnlockScreen.prototype.render = function () { h('p.pointer', { onClick: () => { this.props.dispatch(actions.markPasswordForgotten()) - global.platform.openExtensionInBrowser() + global.platform.isInBrowser() + .then((isInBrowser) => { + if (!isInBrowser) { + global.platform.openExtensionInBrowser() + } + }) }, style: { fontSize: '0.8em', -- cgit v1.2.3 From 5e9dc74a59d2507f36e1cb5796f97982f5f4993d Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Feb 2018 14:29:43 -0330 Subject: Remove isInBrowser method and use environment-type.js --- ui/app/unlock.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index db88fa9d0..13c3f1274 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -6,6 +6,7 @@ const actions = require('./actions') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const environmentType = require('../../app/scripts/lib/environment-type') const Mascot = require('./components/mascot') @@ -77,12 +78,9 @@ UnlockScreen.prototype.render = function () { h('p.pointer', { onClick: () => { this.props.dispatch(actions.markPasswordForgotten()) - global.platform.isInBrowser() - .then((isInBrowser) => { - if (!isInBrowser) { - global.platform.openExtensionInBrowser() - } - }) + if (environmentType() === 'popup') { + global.platform.openExtensionInBrowser() + } }, style: { fontSize: '0.8em', -- cgit v1.2.3 From 170c7602b70e475e75fbd1c7181d03e22465ae24 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 16 Feb 2018 06:15:09 -0330 Subject: [NewUI] Adds the mascara first time flow to betaUI extension (#3257) * Adds the mascara first time flow to the extension when opened in browser. * Fix tests after addition of mascara first time flow to new ui. --- ui/app/app.js | 10 ++++++---- ui/app/reducers/metamask.js | 2 ++ 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index cdb0c8c61..5ffd263d1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,7 @@ const classnames = require('classnames') const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init -const InitializeMenuScreen = require('./first-time/init-menu') +const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') @@ -74,6 +74,7 @@ function mapStateToProps (state) { transForward: state.appState.transForward, isMascara: state.metamask.isMascara, isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + isPopup: state.metamask.isPopup, seedWords: state.metamask.seedWords, unapprovedTxs: state.metamask.unapprovedTxs, unapprovedMsgs: state.metamask.unapprovedMsgs, @@ -85,7 +86,8 @@ function mapStateToProps (state) { lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], currentCurrency: state.metamask.currentCurrency, - isMouseUser: state.appState.isMouseUser, + isMouseUser: state.appState.isMouseUser, + betaUI: state.metamask.featureFlags.betaUI, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -351,9 +353,9 @@ App.prototype.renderBackButton = function (style, justArrow = false) { App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props - const {isMascara, isOnboarding} = props + const {isMascara, isOnboarding, betaUI} = props - if (isMascara && isOnboarding) { + if ((isMascara || betaUI) && isOnboarding && !props.isPopup) { return h(MascaraFirstTime) } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 294c29948..beeba948d 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -1,6 +1,7 @@ const extend = require('xtend') const actions = require('../actions') const MetamascaraPlatform = require('../../../app/scripts/platforms/window') +const environmentType = require('../../../app/scripts/lib/environment-type') const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums module.exports = reduceMetamask @@ -14,6 +15,7 @@ function reduceMetamask (state, action) { isUnlocked: false, isAccountMenuOpen: false, isMascara: window.platform instanceof MetamascaraPlatform, + isPopup: environmentType() === 'popup', rpcTarget: 'https://rawtestrpc.metamask.io/', identities: {}, unapprovedTxs: {}, -- cgit v1.2.3 From 81eb5c8796b3a044c1b1e66f509bb14870f7ba92 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 16 Feb 2018 19:21:16 -0330 Subject: Ensures that mascara initialize screen is not shown in popup. (#3279) --- ui/app/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 5ffd263d1..1a64bb1a4 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,6 +9,7 @@ const classnames = require('classnames') const MascaraFirstTime = require('../../mascara/src/app/first-time').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default // init +const OldUIInitializeMenuScreen = require('./first-time/init-menu') const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') // accounts @@ -381,7 +382,9 @@ App.prototype.renderPrimary = function () { return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) } else if (!props.isInitialized) { log.debug('rendering menu screen') - return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + return props.isPopup + ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) + : h(InitializeMenuScreen, {key: 'menuScreenInit'}) } // show unlock screen -- cgit v1.2.3 From c26e0d555b7cb89e88713041714206abd8f4275e Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 19 Feb 2018 22:46:18 -0330 Subject: Fix Import Existing DEN in popup New UI first time flow. --- ui/app/app.js | 2 +- ui/app/first-time/init-menu.js | 24 +++++++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 1a64bb1a4..58e38a077 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -380,7 +380,7 @@ App.prototype.renderPrimary = function () { if (props.isInitialized && props.forgottenPassword) { log.debug('rendering restore vault screen') return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - } else if (!props.isInitialized) { + } else if (!props.isInitialized && !props.isUnlocked) { log.debug('rendering menu screen') return props.isPopup ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index b4587f1ee..0e08da8db 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -7,6 +7,8 @@ const Mascot = require('../components/mascot') const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') +const environmentType = require('../../../app/scripts/lib/environment-type') +const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums let isSubmitting = false @@ -130,6 +132,18 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { }, 'Import Existing DEN'), ]), + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: this.showOldUI.bind(this), + style: { + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', + }, + }, 'Use classic interface'), + ]), + ]) ) } @@ -146,7 +160,15 @@ InitializeMenuScreen.prototype.componentDidMount = function () { } InitializeMenuScreen.prototype.showRestoreVault = function () { - this.props.dispatch(actions.showRestoreVault()) + this.props.dispatch(actions.markPasswordForgotten()) + if (environmentType() === 'popup') { + global.platform.openExtensionInBrowser() + } +} + +InitializeMenuScreen.prototype.showOldUI = function () { + this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) + .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) } InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { -- cgit v1.2.3 From a1b72e5252e15113c98180194cfa7f1640bde08e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 20 Feb 2018 13:51:06 -0800 Subject: Try fixing notice screen synchronous state call --- ui/app/components/notice.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js index 941ac33e6..9d2e89cb0 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -105,8 +105,7 @@ Notice.prototype.render = function () { h('button.primary', { disabled, onClick: () => { - this.setState({disclaimerDisabled: true}) - onConfirm() + this.setState({disclaimerDisabled: true}, () => onConfirm()) }, style: { marginTop: '18px', -- cgit v1.2.3 From 66f55f954e9f3868396e478fd79c4bbd8f8673e5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Feb 2018 20:51:45 -0330 Subject: Render loading inside notice screen, and don't set isLoading from unMarkPasswordForgotten. --- ui/app/actions.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 4bc1f379e..64d5b67e0 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -853,7 +853,6 @@ function markPasswordForgotten () { function unMarkPasswordForgotten () { return (dispatch) => { return background.unMarkPasswordForgotten(() => { - dispatch(actions.hideLoadingIndication()) dispatch(actions.forgotPassword()) forceUpdateMetamaskState(dispatch) }) -- cgit v1.2.3 From 84c023ba40b11ace63e2f2281a7c0ef1e1f2f3cb Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 20 Feb 2018 19:52:32 -0800 Subject: Use same logic for downloading state logs in the old/uat --- ui/app/settings.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/settings.js b/ui/app/settings.js index 988ddea8d..466f739d5 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -201,7 +201,13 @@ class Settings extends Component { h('div.settings__content-item-col', [ h('button.settings__clear-button', { onClick (event) { - exportAsFile('MetaMask State Logs', window.logState()) + window.logStateString((err, result) => { + if (err) { + this.state.dispatch(actions.displayWarning('Error in retrieving state logs.')) + } else { + exportAsFile('MetaMask State Logs.json', result) + } + }) }, }, 'Download State Logs'), ]), -- cgit v1.2.3 From 746c3e5f1803e9b3712d22a4e4dd7ab43e84e060 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 13:34:31 -0330 Subject: Body width container in first time flow is consistent with app bar. --- ui/app/css/itcss/components/newui-sections.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 73faebe8b..ecf5e1036 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -290,3 +290,27 @@ $wallet-view-bg: $alabaster; .token-balance__amount { padding-right: 6px; } + + +// first time +.first-view-main { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + + @media screen and (max-width: 575px) { + height: 100%; + } + + @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { + width: 80vw; + } + + @media screen and (min-width: 1281px) { + width: 62vw; + } +} \ No newline at end of file -- cgit v1.2.3 From def369ba079fb3596c126fe9b622eda46afa54f6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 13:43:22 -0330 Subject: Move beta warning to app header. --- ui/app/app.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 58e38a077..7490c63b1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -239,6 +239,9 @@ App.prototype.renderAppBar = function () { showNetworkDropdown, hideNetworkDropdown, currentView, + isInitialized, + betaUI, + isPopup, } = this.props if (window.METAMASK_UI_TYPE === 'notification') { @@ -317,6 +320,9 @@ App.prototype.renderAppBar = function () { ]), ]), + !isInitialized && !isPopup && betaUI && h('h2.alpha-warning', + 'Please be aware that this version is still under development'), + ]) ) } -- cgit v1.2.3 From 0739d3507bb560c7991c52d16cdcf4790d65c4c5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 13:59:33 -0330 Subject: Adds beta label to Metamask name in full screen app bar. --- ui/app/app.js | 2 ++ ui/app/css/itcss/components/header.scss | 15 +++++++++++++++ 2 files changed, 17 insertions(+) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7490c63b1..5d37b9bdf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -288,6 +288,8 @@ App.prototype.renderAppBar = function () { // metamask name h('h1', 'MetaMask'), + h('div.beta-label', 'BETA'), + ]), h('div.header__right-actions', [ diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index ac2cecf7e..d91ab3c48 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -76,6 +76,21 @@ } } +.beta-label { + font-family: Roboto; + text-transform: uppercase; + font-weight: 500; + font-size: 0.8rem; + padding-left: 9px; + color: $buttercup; + align-self: flex-start; + margin-top: 10px; + + @media screen and (max-width: 575px) { + display: none; + } +} + h2.page-subtitle { text-transform: uppercase; color: #aeaeae; -- cgit v1.2.3 From 50f20358c1ffe0e04f65025db9ac9627af313b33 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 27 Feb 2018 12:01:09 -0800 Subject: Add import account disclaimer --- ui/app/accounts/import/index.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'ui/app') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 71eb9ae23..7e7d3aa91 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -35,6 +35,28 @@ AccountImportSubview.prototype.render = function () { return ( h('div.new-account-import-form', [ + h('.warning', { + style: { + display: 'inline-block', + alignItems: 'center', + padding: '15px 15px 0px 15px', + }, + }, [ + h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '), + h('span', { + style: { + color: 'rgba(247, 134, 28, 1)', + cursor: 'pointer', + textDecoration: 'underline', + }, + onClick: () => { + global.platform.openWindow({ + url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', + }) + }, + }, 'here.'), + ]), + h('div.new-account-import-form__select-section', [ h('div.new-account-import-form__select-label', 'Select Type'), -- cgit v1.2.3 From ac2e92fa5424bbb1517d7443a7c40dcac92af638 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 27 Feb 2018 12:02:48 -0800 Subject: Change Loose label to Imported --- ui/app/components/dropdowns/components/account-dropdowns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index d3a549884..f637ca19d 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -159,7 +159,7 @@ class AccountDropdowns extends Component { try { // Sometimes keyrings aren't loaded yet: const type = keyring.type const isLoose = type !== 'HD Key Tree' - return isLoose ? h('.keyring-label', 'LOOSE') : null + return isLoose ? h('.keyring-label', 'IMPORTED') : null } catch (e) { return } } -- cgit v1.2.3 From 7aa324bdf61e83f9ed64e6b0354d88e0af76f42b Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 27 Feb 2018 12:06:24 -0800 Subject: Remove committed out merge code --- .../components/dropdowns/components/account-dropdowns.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index f637ca19d..78b059d5b 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -134,22 +134,6 @@ class AccountDropdowns extends Component { ]), ]), -// ======= -// }, -// ), -// this.indicateIfLoose(keyring), -// h('span', { -// style: { -// marginLeft: '20px', -// fontSize: '24px', -// maxWidth: '145px', -// whiteSpace: 'nowrap', -// overflow: 'hidden', -// textOverflow: 'ellipsis', -// }, -// }, identity.name || ''), -// h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), -// >>>>>>> master:ui/app/components/account-dropdowns.js ] ) }) -- cgit v1.2.3 From 2b9af0734b6127349ed4f1ed535dee858633776b Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 27 Feb 2018 20:05:54 -0330 Subject: Replace 'Contract Published' with 'Contract Deployment' for clearer indication of contract tx state. --- ui/app/components/transaction-list-item.js | 2 +- ui/app/components/tx-list-item.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index 4e3d2cb93..a45cd441a 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -180,7 +180,7 @@ function recipientField (txParams, transaction, isTx, isMsg) { } else if (txParams.to) { message = addressSummary(txParams.to) } else { - message = 'Contract Published' + message = 'Contract Deployment' } return h('div', { diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 7ccc5c315..1a13070c8 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -63,7 +63,7 @@ TxListItem.prototype.getAddressText = function () { default: return address ? `${address.slice(0, 10)}...${address.slice(-4)}` - : 'Contract Published' + : 'Contract Deployment' } } -- cgit v1.2.3 From 78f6a4866425ca9fd7795d91ea5dacd47599c1ab Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 28 Feb 2018 13:12:06 -0330 Subject: Define event locally in onClickOutside method in account-dropdowns.js --- ui/app/components/account-dropdowns.js | 2 +- ui/app/components/dropdowns/components/account-dropdowns.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index f69a6ca68..1cd7a0847 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -173,7 +173,7 @@ class AccountDropdowns extends Component { minWidth: '180px', }, isOpen: optionsMenuActive, - onClickOutside: () => { + onClickOutside: (event) => { const { classList } = event.target const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) if (optionsMenuActive && isNotToggleElement) { diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index d3a549884..fa9ffc632 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -281,7 +281,7 @@ class AccountDropdowns extends Component { dropdownWrapperStyle, ), isOpen: optionsMenuActive, - onClickOutside: () => { + onClickOutside: (event) => { const { classList } = event.target const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) if (optionsMenuActive && isNotToggleElement) { -- cgit v1.2.3 From d45116824c289a12ba43fcff257d282ef7f38902 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Wed, 28 Feb 2018 13:03:46 -0800 Subject: Check in all font files locally. --- ui/app/css/itcss/settings/typography.scss | 338 +++++++++++++++++++++++++++++- 1 file changed, 336 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index ac8c41336..9d08756d1 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -1,6 +1,340 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'); +@import url('/fonts/Font_Awesome/font-awesome.min.css'); -@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 100; + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} @font-face { font-family: 'Montserrat Regular'; -- cgit v1.2.3 From 40537f9290e2b41453e0f496e27eaf03eca021a0 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 28 Feb 2018 14:04:32 -0800 Subject: add token - check for logo url before trying to use --- ui/app/add-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index 3a806d34b..230ab35fe 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -240,7 +240,7 @@ AddTokenScreen.prototype.renderTokenList = function () { }, [ h('div.add-token__token-icon', { style: { - backgroundImage: `url(images/contract/${logo})`, + backgroundImage: logo && `url(images/contract/${logo})`, }, }), h('div.add-token__token-data', [ -- cgit v1.2.3 From 94a60fe4a951b15e46baf928d79d9a8aad20145f Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 1 Mar 2018 16:31:38 -0330 Subject: Correct ttf format name to 'truetype' --- ui/app/css/itcss/settings/typography.scss | 84 +++++++++++++++---------------- 1 file changed, 42 insertions(+), 42 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 9d08756d1..8a56d9c6c 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -4,7 +4,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -12,7 +12,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -20,7 +20,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -28,7 +28,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -36,7 +36,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -44,7 +44,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -52,7 +52,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 100; - src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('ttf'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @@ -60,7 +60,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -68,7 +68,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -76,7 +76,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -84,7 +84,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -92,7 +92,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -100,7 +100,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -108,7 +108,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('ttf'); + src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @@ -116,7 +116,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -124,7 +124,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -132,7 +132,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -140,7 +140,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -148,7 +148,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -156,7 +156,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -164,7 +164,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('ttf'); + src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @@ -172,7 +172,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -180,7 +180,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -188,7 +188,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -196,7 +196,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -204,7 +204,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -212,7 +212,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -220,7 +220,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('ttf'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @@ -228,7 +228,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -236,7 +236,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -244,7 +244,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -252,7 +252,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -260,7 +260,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -268,7 +268,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -276,7 +276,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('ttf'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @@ -284,7 +284,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @@ -292,7 +292,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @@ -300,7 +300,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+1F00-1FFF; } /* greek */ @@ -308,7 +308,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0370-03FF; } /* vietnamese */ @@ -316,7 +316,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @@ -324,7 +324,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @@ -332,7 +332,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 900; - src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('ttf'); + src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } -- cgit v1.2.3 From ace4f0d998d75e9df8c31641a292abc4f703582f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 1 Mar 2018 13:11:35 -0800 Subject: Fix exception thrown when styleOverride is not present (#3364) --- ui/app/components/eth-balance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 1be8c9731..c3d084bdc 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -46,7 +46,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) { incoming, currentCurrency, hideTooltip, - styleOveride, + styleOveride = {}, showFiat = true, } = this.props const { fontSize, color, fontFamily, lineHeight } = styleOveride -- cgit v1.2.3 From f22dfd4ae8031e3f7b4972a1cc8f119b99007717 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 1 Mar 2018 13:12:10 -0800 Subject: Fix network menu for custom URLs (#3366) --- ui/app/components/dropdowns/network-dropdown.js | 40 +++++++++++++++++-------- ui/app/css/itcss/components/network.scss | 5 +++- 2 files changed, 31 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index dfaa6b22c..9be5cc5d1 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -84,7 +84,7 @@ NetworkDropdown.prototype.render = function () { style: { position: 'absolute', top: '58px', - minWidth: '309px', + width: '309px', zIndex: '55px', }, innerStyle: { @@ -276,11 +276,21 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) { key: `common${rpc}`, closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setRpcTarget(rpc), + style: { + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '20px', + padding: '12px 0', + }, }, [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - rpc, - rpcTarget === rpc ? h('.check', '✓') : null, + rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), + h('span.network-name-item', { + style: { + color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b', + }, + }, rpc), ] ) } @@ -293,12 +303,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) { if (type !== 'rpc') return null - // Concatenate long URLs - let label = rpcTarget - if (rpcTarget.length > 31) { - label = label.substr(0, 34) + '...' - } - switch (rpcTarget) { case 'http://localhost:8545': @@ -311,11 +315,21 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) { key: rpcTarget, onClick: () => props.setRpcTarget(rpcTarget), closeMenu: () => this.props.hideNetworkDropdown(), + style: { + fontFamily: 'DIN OT', + fontSize: '16px', + lineHeight: '20px', + padding: '12px 0', + }, }, [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - label, - h('.check', '✓'), + h('i.fa.fa-check'), + h('i.fa.fa-question-circle.fa-med.menu-icon-circle'), + h('span.network-name-item', { + style: { + color: '#ffffff', + }, + }, rpcTarget), ] ) } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index d9a39b8d5..c32d1de5e 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -76,8 +76,11 @@ .network-name-item { font-weight: 100; - flex: 1 0 auto; + flex: 1; color: $dusty-gray; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .network-check, -- cgit v1.2.3 From 0c163dcb32ddafde8a8ed3e9e21be552a5eeeed5 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 2 Mar 2018 19:07:25 -0330 Subject: Allow adding 0 balance tokens in old ui and editing custom token info in new (#3395) * Shows tokens with 0 balance in old ui; goHome after adding tokens. * Allow users to edit custom token info when not autofilled. (New UI add token screen). --- ui/app/add-token.js | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index 230ab35fe..a1729ba8e 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -52,13 +52,16 @@ function AddTokenScreen () { isShowingConfirmation: false, customAddress: '', customSymbol: '', - customDecimals: 0, + customDecimals: null, searchQuery: '', isCollapsed: true, selectedTokens: {}, errors: {}, + autoFilled: false, } this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this) + this.tokenSymbolDidChange = this.tokenSymbolDidChange.bind(this) + this.tokenDecimalsDidChange = this.tokenDecimalsDidChange.bind(this) this.onNext = this.onNext.bind(this) Component.call(this) } @@ -103,6 +106,16 @@ AddTokenScreen.prototype.tokenAddressDidChange = function (e) { } } +AddTokenScreen.prototype.tokenSymbolDidChange = function (e) { + const customSymbol = e.target.value.trim() + this.setState({ customSymbol }) +} + +AddTokenScreen.prototype.tokenDecimalsDidChange = function (e) { + const customDecimals = e.target.value.trim() + this.setState({ customDecimals }) +} + AddTokenScreen.prototype.checkExistingAddresses = function (address) { if (!address) return false const tokensList = this.props.tokens @@ -125,7 +138,7 @@ AddTokenScreen.prototype.validate = function () { errors.customAddress = 'Address is invalid. ' } - const validDecimals = customDecimals >= 0 && customDecimals < 36 + const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36 if (!validDecimals) { errors.customDecimals = 'Decimals must be at least 0, and not over 36.' } @@ -166,12 +179,13 @@ AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) this.setState({ customSymbol: symbol, customDecimals: decimals.toString(), + autoFilled: true, }) } } AddTokenScreen.prototype.renderCustomForm = function () { - const { customAddress, customSymbol, customDecimals, errors } = this.state + const { autoFilled, customAddress, customSymbol, customDecimals, errors } = this.state return !this.state.isCollapsed && ( h('div.add-token__add-custom-form', [ @@ -196,8 +210,9 @@ AddTokenScreen.prototype.renderCustomForm = function () { h('div.add-token__add-custom-label', 'Token Symbol'), h('input.add-token__add-custom-input', { type: 'text', + onChange: this.tokenSymbolDidChange, value: customSymbol, - disabled: true, + disabled: autoFilled, }), h('div.add-token__add-custom-error-message', errors.customSymbol), ]), @@ -209,8 +224,9 @@ AddTokenScreen.prototype.renderCustomForm = function () { h('div.add-token__add-custom-label', 'Decimals of Precision'), h('input.add-token__add-custom-input', { type: 'number', + onChange: this.tokenDecimalsDidChange, value: customDecimals, - disabled: true, + disabled: autoFilled, }), h('div.add-token__add-custom-error-message', errors.customDecimals), ]), -- cgit v1.2.3 From 0d97ff221017b78ccfa02defdb7a52ad701981a5 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 2 Mar 2018 22:44:05 -0330 Subject: Fix NewUI reveal seed flow. (#3410) --- ui/app/actions.js | 5 +++-- ui/app/app.js | 14 +++++++++++--- ui/app/reducers/app.js | 4 ++-- ui/app/reducers/metamask.js | 7 ++++++- 4 files changed, 22 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 64d5b67e0..4f902a6a2 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -853,15 +853,16 @@ function markPasswordForgotten () { function unMarkPasswordForgotten () { return (dispatch) => { return background.unMarkPasswordForgotten(() => { - dispatch(actions.forgotPassword()) + dispatch(actions.forgotPassword(false)) forceUpdateMetamaskState(dispatch) }) } } -function forgotPassword () { +function forgotPassword (forgotPasswordState = true) { return { type: actions.FORGOT_PASSWORD, + value: forgotPasswordState, } } diff --git a/ui/app/app.js b/ui/app/app.js index 5d37b9bdf..bfa8d8aa7 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -89,6 +89,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, isMouseUser: state.appState.isMouseUser, betaUI: state.metamask.featureFlags.betaUI, + isRevealingSeedWords: state.metamask.isRevealingSeedWords, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -362,9 +363,16 @@ App.prototype.renderBackButton = function (style, justArrow = false) { App.prototype.renderPrimary = function () { log.debug('rendering primary') var props = this.props - const {isMascara, isOnboarding, betaUI} = props + const { + isMascara, + isOnboarding, + betaUI, + isRevealingSeedWords, + } = props + const isMascaraOnboarding = isMascara && isOnboarding + const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords - if ((isMascara || betaUI) && isOnboarding && !props.isPopup) { + if (isMascaraOnboarding || isBetaUIOnboarding) { return h(MascaraFirstTime) } @@ -388,7 +396,7 @@ App.prototype.renderPrimary = function () { if (props.isInitialized && props.forgottenPassword) { log.debug('rendering restore vault screen') return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - } else if (!props.isInitialized && !props.isUnlocked) { + } else if (!props.isInitialized && !props.isUnlocked && !isRevealingSeedWords) { log.debug('rendering menu screen') return props.isPopup ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'}) diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 02f024f7c..4dda839a2 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -140,10 +140,10 @@ function reduceApp (state, action) { case actions.FORGOT_PASSWORD: return extend(appState, { currentView: { - name: 'restoreVault', + name: action.value ? 'restoreVault' : 'accountDetail', }, transForward: false, - forgottenPassword: true, + forgottenPassword: action.value, }) case actions.SHOW_INIT_MENU: diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index beeba948d..cddcd0c1f 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -43,12 +43,15 @@ function reduceMetamask (state, action) { useBlockie: false, featureFlags: {}, networkEndpointType: OLD_UI_NETWORK_TYPE, + isRevealingSeedWords: false, }, state.metamask) switch (action.type) { case actions.SHOW_ACCOUNTS_PAGE: - newState = extend(metamaskState) + newState = extend(metamaskState, { + isRevealingSeedWords: false, + }) delete newState.seedWords return newState @@ -124,10 +127,12 @@ function reduceMetamask (state, action) { }, }) + case actions.SHOW_NEW_VAULT_SEED: return extend(metamaskState, { isUnlocked: true, isInitialized: false, + isRevealingSeedWords: true, seedWords: action.value, }) -- cgit v1.2.3 From 6f8077f587fe16ebdb8ce3ffe7a0df9f58c74ffb Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 2 Mar 2018 18:23:27 -0800 Subject: Swap color scheme for import account label --- ui/app/css/itcss/components/account-menu.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 8ad7481c7..4752741aa 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -66,8 +66,9 @@ .keyring-label { margin-top: 5px; - background-color: $black; - color: $dusty-gray; + background-color: $dusty-gray; + color: $black; + font-weight: normal; } } -- cgit v1.2.3 From ee254b4f6feeb040607472a0f4d69c7e4173c25e Mon Sep 17 00:00:00 2001 From: Thomas Date: Fri, 2 Mar 2018 18:24:09 -0800 Subject: Import Account disclaimer --- ui/app/accounts/import/index.js | 11 ++--------- ui/app/css/itcss/components/new-account.scss | 10 ++++++++++ 2 files changed, 12 insertions(+), 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 7e7d3aa91..adb52db74 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -35,17 +35,10 @@ AccountImportSubview.prototype.render = function () { return ( h('div.new-account-import-form', [ - h('.warning', { - style: { - display: 'inline-block', - alignItems: 'center', - padding: '15px 15px 0px 15px', - }, - }, [ + h('.new-account-import-disclaimer', [ h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '), h('span', { style: { - color: 'rgba(247, 134, 28, 1)', cursor: 'pointer', textDecoration: 'underline', }, @@ -54,7 +47,7 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, 'here.'), + }, 'here'), ]), h('div.new-account-import-form__select-section', [ diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 81f919df3..c6c254ede 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -54,6 +54,16 @@ } +.new-account-import-disclaimer { + width: 120%; + background-color: #F4F9FC; + display: inline-block; + align-items: center; + padding: 20px 30px 20px; + font-size: 12px; + line-height: 1.5; +} + .new-account-import-form { display: flex; flex-flow: column; -- cgit v1.2.3 From 2b86d65d0c3266e8ddfe814abe1d1755fbf23fda Mon Sep 17 00:00:00 2001 From: Csaba Solya Date: Sat, 3 Mar 2018 22:08:10 +0100 Subject: verify seedwords on log in --- ui/app/actions.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 64d5b67e0..9606841ae 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -296,6 +296,13 @@ function tryUnlockMetamask (password) { dispatch(actions.unlockSucceeded()) dispatch(actions.transitionForward()) forceUpdateMetamaskState(dispatch) + + background.verifySeedPhrase((err) => { + if (err) { + dispatch(actions.displayWarning(err.message)) + } + }) + } }) } -- cgit v1.2.3 From 1bd18cebd7e08edbbcf35407b962e71dcd2c3399 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 5 Mar 2018 13:33:46 -0330 Subject: Fixes shapeshift coin selection dropdown. (#3416) --- ui/app/app.js | 4 +++- ui/app/components/shapeshift-form.js | 9 ++++----- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index bfa8d8aa7..d243e72a4 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -90,6 +90,7 @@ function mapStateToProps (state) { isMouseUser: state.appState.isMouseUser, betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, + Qr: state.appState.Qr, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -368,6 +369,7 @@ App.prototype.renderPrimary = function () { isOnboarding, betaUI, isRevealingSeedWords, + Qr, } = props const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords @@ -508,7 +510,7 @@ App.prototype.renderPrimary = function () { width: '285px', }, }, [ - h(QrView, {key: 'qr'}), + h(QrView, {key: 'qr', Qr}), ]), ]) diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 2270b8236..648b05049 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -51,8 +51,7 @@ ShapeshiftForm.prototype.componentWillMount = function () { this.props.shapeShiftSubview() } -ShapeshiftForm.prototype.onCoinChange = function (e) { - const coin = e.target.value +ShapeshiftForm.prototype.onCoinChange = function (coin) { this.setState({ depositCoin: coin, errorMessage: '', @@ -133,7 +132,7 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { } ShapeshiftForm.prototype.renderQrCode = function () { - const { depositAddress, isLoading } = this.state + const { depositAddress, isLoading, depositCoin } = this.state const qrImage = qrcode(4, 'M') qrImage.addData(depositAddress) qrImage.make() @@ -141,7 +140,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - 'Deposit your BTC to the address below:', + `Deposit your ${depositCoin.toUpperCase()} to the address below:`, ]), h('div', depositAddress), @@ -182,7 +181,7 @@ ShapeshiftForm.prototype.render = function () { h(SimpleDropdown, { selectedOption: this.state.depositCoin, - onSelect: this.onCoinChange, + onSelect: (coin) => this.onCoinChange(coin), options: Object.entries(coinOptions).map(([coin]) => ({ value: coin.toLowerCase(), displayValue: coin, -- cgit v1.2.3 From 68604b53dde23eaeb44657153244928627b723ab Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 5 Mar 2018 23:12:06 -0330 Subject: Prevent user from selecting max amount until there is an estimated gas total. --- ui/app/send-v2.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 1d67150e3..3667e9d73 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -396,14 +396,15 @@ SendTransactionScreen.prototype.renderAmountRow = function () { amount, setMaxModeTo, maxModeOn, + gasTotal, } = this.props return h('div.send-v2__form-row', [ - h('div.send-v2__form-label', [ + h('div.send-v2__form-label', [ 'Amount:', this.renderErrorMessage('amount'), - !errors.amount && h('div.send-v2__amount-max', { + !errors.amount && gasTotal && h('div.send-v2__amount-max', { onClick: (event) => { event.preventDefault() setMaxModeTo(true) -- cgit v1.2.3 From b393b54e35091efd3f49e9eccaf472c91f5bd0d1 Mon Sep 17 00:00:00 2001 From: criw Date: Tue, 6 Mar 2018 04:43:12 +0100 Subject: FIX #3440 improved verification of restore from seed phrase --- ui/app/keychains/hd/restore-vault.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'ui/app') diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index a4ed137f9..c4ba0d8fd 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -141,6 +141,19 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // check seed var seedBox = document.querySelector('textarea.twelve-word-phrase') var seed = seedBox.value.trim() + + // true if the string has more than a space between words. + if (seed.split(' ').length > 1) { + this.warning = 'there can only a space between words' + this.props.dispatch(actions.displayWarning(this.warning)) + return + } + // true if seed contains a character that is not between a-z or a space + if(!seed.match(/^[a-z ]+$/)) { + this.warning = 'seed words only have lowercase characters' + this.props.dispatch(actions.displayWarning(this.warning)) + return + } if (seed.split(' ').length !== 12) { this.warning = 'seed phrases are 12 words long' this.props.dispatch(actions.displayWarning(this.warning)) -- cgit v1.2.3 From 462d57cb6aaeab233bcade5ef1804eeaa290bae2 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 6 Mar 2018 00:23:29 -0330 Subject: Gracefully handle null token balance in new ui send. --- ui/app/send-v2.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 1d67150e3..6ee7c0ca5 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -361,8 +361,9 @@ SendTransactionScreen.prototype.validateAmount = function (value) { }) } + const verifyTokenBalance = selectedToken && tokenBalance !== null let sufficientTokens - if (selectedToken) { + if (verifyTokenBalance) { sufficientTokens = isTokenBalanceSufficient({ tokenBalance, amount, @@ -377,7 +378,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) { if (conversionRate && !sufficientBalance) { amountError = 'Insufficient funds.' - } else if (selectedToken && !sufficientTokens) { + } else if (verifyTokenBalance && !sufficientTokens) { amountError = 'Insufficient tokens.' } else if (amountLessThanZero) { amountError = 'Can not send negative amounts of ETH.' @@ -491,9 +492,12 @@ SendTransactionScreen.prototype.renderFooter = function () { goHome, clearSend, gasTotal, + tokenBalance, + selectedToken, errors: { amount: amountError, to: toError }, } = this.props + const missingTokenBalance = selectedToken && !tokenBalance const noErrors = !amountError && toError === null return h('div.page-container__footer', [ @@ -504,7 +508,7 @@ SendTransactionScreen.prototype.renderFooter = function () { }, }, 'Cancel'), h('button.btn-clear.page-container__footer-button', { - disabled: !noErrors || !gasTotal, + disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), }, 'Next'), ]) -- cgit v1.2.3 From 5f8a632fec0e83b148e4e0b7fc95339fb870d804 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 6 Mar 2018 09:14:57 -0800 Subject: Fix seed phrase validation clearing form (#3417) * Fix seed phrase validation clearing form * Make new ui import seed error feedback live, and allow newlines with and without carriage returns. --- ui/app/app.js | 8 ++++---- ui/app/css/itcss/components/header.scss | 7 +++---- 2 files changed, 7 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index d243e72a4..4e6da24c3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -288,10 +288,10 @@ App.prototype.renderAppBar = function () { }), // metamask name - h('h1', 'MetaMask'), - - h('div.beta-label', 'BETA'), - + h('.flex-row', [ + h('h1', 'MetaMask'), + h('div.beta-label', 'BETA'), + ]), ]), h('div.header__right-actions', [ diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index d91ab3c48..eeed9ee06 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -80,11 +80,10 @@ font-family: Roboto; text-transform: uppercase; font-weight: 500; - font-size: 0.8rem; - padding-left: 9px; + font-size: .8rem; color: $buttercup; - align-self: flex-start; - margin-top: 10px; + margin-left: 5px; + line-height: initial; @media screen and (max-width: 575px) { display: none; -- cgit v1.2.3 From 376ffb758fa6b6ea1fcfde1f2addf1c5a6070339 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 5 Mar 2018 14:23:00 -0330 Subject: Shapeshift form handles market info unavailable errors. --- ui/app/actions.js | 1 + ui/app/components/modals/deposit-ether-modal.js | 5 +++++ ui/app/components/modals/modal.js | 12 +++++++++++- ui/app/components/shapeshift-form.js | 10 +++++++--- ui/app/css/itcss/components/modal.scss | 4 ++++ 5 files changed, 28 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 4f902a6a2..8b1480a79 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1498,6 +1498,7 @@ function pairUpdate (coin) { dispatch(actions.hideWarning()) shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => { dispatch(actions.hideSubLoadingIndication()) + if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error)) dispatch({ type: actions.PAIR_UPDATE, value: { diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 532d66653..7547dbcf5 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, + hideWarning: () => { + dispatch(actions.hideWarning()) + }, showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, @@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () { h('div.deposit-ether-modal__header__close', { onClick: () => { this.setState({ buyingWithShapeshift: false }) + this.props.hideWarning() this.props.hideModal() }, }), @@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () { } DepositEtherModal.prototype.goToAccountDetailsModal = function () { + this.props.hideWarning() this.props.hideModal() this.props.showAccountDetailModal() } diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 97fe38292..8e9e58985 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -79,6 +79,7 @@ const MODALS = { contents: [ h(DepositEtherModal, {}, []), ], + onHide: (props) => props.hideWarning(), mobileModalStyle: { width: '100%', height: '100%', @@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, + hideWarning: () => { + dispatch(actions.hideWarning()) + }, + } } @@ -308,7 +313,12 @@ Modal.prototype.render = function () { { className: 'modal', keyboard: false, - onHide: () => { this.onHide() }, + onHide: () => { + if (modal.onHide) { + modal.onHide(this.props) + } + this.onHide() + }, ref: (ref) => { this.modalRef = ref }, diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 648b05049..87eb1588a 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -14,11 +14,13 @@ function mapStateToProps (state) { tokenExchangeRates, selectedAddress, } = state.metamask + const { warning } = state.appState return { coinOptions, tokenExchangeRates, selectedAddress, + warning, } } @@ -163,7 +165,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { ShapeshiftForm.prototype.render = function () { - const { coinOptions, btnClass } = this.props + const { coinOptions, btnClass, warning } = this.props const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state const coinPair = `${depositCoin}_eth` const { tokenExchangeRates } = this.props @@ -206,7 +208,9 @@ ShapeshiftForm.prototype.render = function () { ]), - h('div', { + warning && h('div.shapeshift-form__address-input-label', warning), + + !warning && h('div', { className: classnames('shapeshift-form__address-input-wrapper', { 'shapeshift-form__address-input-wrapper--error': errorMessage, }), @@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () { h('divshapeshift-form__address-input-error-message', [errorMessage]), ]), - this.renderMarketInfo(), + !warning && this.renderMarketInfo(), ]), diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 919e1793b..53e3bff00 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -787,6 +787,10 @@ width: auto; flex: 1; } + + @media screen and (max-width: 575px) { + width: auto; + } } } -- cgit v1.2.3 From 5ac330a89e70dfe4b72a69dc64d5eedeed3e4045 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 6 Mar 2018 15:15:26 -0330 Subject: Default add-token decimal value to string (#3451) --- ui/app/add-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index a1729ba8e..51c577987 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -52,7 +52,7 @@ function AddTokenScreen () { isShowingConfirmation: false, customAddress: '', customSymbol: '', - customDecimals: null, + customDecimals: '', searchQuery: '', isCollapsed: true, selectedTokens: {}, -- cgit v1.2.3 From b87687110da62adbe28e92743898e79ba28945b2 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 6 Mar 2018 14:51:26 -0800 Subject: Replace Lock wording with Log Out / Log In Fixes #2475 --- ui/app/unlock.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 13c3f1274..cafe3a859 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -71,7 +71,7 @@ UnlockScreen.prototype.render = function () { style: { margin: 10, }, - }, 'Unlock'), + }, 'Log In'), ]), h('.flex-row.flex-center.flex-grow', [ @@ -104,7 +104,7 @@ UnlockScreen.prototype.render = function () { }, }, 'Use classic interface'), ]), - + ]) ) } -- cgit v1.2.3 From f06bca1151b07d908cd90f6efd97064e288e5f27 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 6 Mar 2018 15:32:35 -0800 Subject: Implemented feedback to make i18n work on mac --- ui/app/app.js | 3 ++- ui/app/unlock.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index df9eab03c..3205baebb 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -4,6 +4,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('./actions') const classnames = require('classnames') +const t = require('../i18n') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default @@ -264,7 +265,7 @@ App.prototype.renderAppBar = function () { }), // metamask name - h('h1', 'MetaMask'), + h('h1', t('appName')), ]), diff --git a/ui/app/unlock.js b/ui/app/unlock.js index ec97b03bf..7a48c5f09 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('./actions') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter +const t = require('../i18n') const Mascot = require('./components/mascot') @@ -43,7 +44,7 @@ UnlockScreen.prototype.render = function () { textTransform: 'uppercase', color: '#7F8082', }, - }, 'MetaMask'), + }, t('appName')), h('input.large-input', { type: 'password', -- cgit v1.2.3 From 2420ad2477f7b688295a55c038b3473a4516dc52 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 6 Mar 2018 22:26:13 -0330 Subject: Correct merge conflict resolution errors. --- ui/app/accounts/import/private-key.js | 2 -- ui/app/components/account-menu/index.js | 7 ------- 2 files changed, 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 0b49d3281..bc9e9384e 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -38,8 +38,6 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__private-key-password-container', [ - h('span.new-account-import-form__instruction', 'Paste your private key string here:'), - h('input.new-account-import-form__input-password', { type: 'password', id: 'private-key-box', diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 043e3d8d1..e838e8916 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -95,13 +95,6 @@ AccountMenu.prototype.render = function () { icon: h('img', { src: 'images/mm-info-icon.svg' }), text: t('infoHelp'), }), - h(Item, { - onClick: showConfigPage, - icon: h('img', { src: 'images/settings.svg' }), - text: t('settings'), - icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }), - text: t('infoHelp'), - }), h(Item, { onClick: showConfigPage, icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), -- cgit v1.2.3 From b8dec6827127ebd5a1fba19a389a361ebc3a9a4d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 7 Mar 2018 12:47:33 -0330 Subject: Make new-ui create password screen responsive. --- ui/app/css/itcss/components/newui-sections.scss | 24 ------------------------ 1 file changed, 24 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index ecf5e1036..73faebe8b 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -290,27 +290,3 @@ $wallet-view-bg: $alabaster; .token-balance__amount { padding-right: 6px; } - - -// first time -.first-view-main { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - - @media screen and (max-width: 575px) { - height: 100%; - } - - @media screen and (min-width: 576px) { - width: 85vw; - } - - @media screen and (min-width: 769px) { - width: 80vw; - } - - @media screen and (min-width: 1281px) { - width: 62vw; - } -} \ No newline at end of file -- cgit v1.2.3 From ca047b1ea0bd6778fc3b0c05b86ff23d0964f98d Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 7 Mar 2018 15:22:10 -0330 Subject: Update network colours for better accessibility. (#3469) --- ui/app/components/dropdowns/network-dropdown.js | 8 ++++---- ui/app/css/itcss/settings/variables.scss | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 9be5cc5d1..ff10c0758 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { - backgroundColor: '#038789', // $blue-lagoon + backgroundColor: '#29B6AF', // $java isSelected: providerType === 'mainnet', }), h('span.network-name-item', { @@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { - backgroundColor: '#e91550', // $crimson + backgroundColor: '#ff4a8d', // $wild-strawberry isSelected: providerType === 'ropsten', }), h('span.network-name-item', { @@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { - backgroundColor: '#690496', // $purple + backgroundColor: '#7057ff', // $cornflower-blue isSelected: providerType === 'kovan', }), h('span.network-name-item', { @@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { - backgroundColor: '#ebb33f', // $tulip-tree + backgroundColor: '#f6c343', // $saffron isSelected: providerType === 'rinkeby', }), h('span.network-name-item', { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 4c0972527..d96c1ae43 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -46,6 +46,10 @@ $manatee: #93949d; $spindle: #c7ddec; $mid-gray: #5b5d67; $cape-cod: #38393a; +$java: #29b6af; +$wild-strawberry: #ff4a8d; +$cornflower-blue: #7057ff; +$saffron: #f6c343; /* Z-Indicies -- cgit v1.2.3 From 6c400c2e925053784befa199f734b08f14e3b404 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 7 Mar 2018 22:37:53 -0330 Subject: Update first time flow button fonts, and first-time-flow default font, to Roboto. --- ui/app/actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 8b1480a79..664667e6c 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -749,7 +749,7 @@ function updateTransaction (txData) { function updateAndApproveTx (txData) { log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) return (dispatch) => { - log.debug(`actions calling background.updateAndApproveTx`) + log.debug(`actions calling background.updateAndApproveTx.`) background.updateAndApproveTransaction(txData, (err) => { dispatch(actions.hideLoadingIndication()) dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) -- cgit v1.2.3 From 09dae760bc9ec5b2288d0719acbf7e2c949c8fbb Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 7 Mar 2018 22:47:29 -0330 Subject: Correct caps of Send button on main screen. --- ui/app/components/tx-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index d35d20a89..85892b93b 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -75,7 +75,7 @@ TxView.prototype.renderButtons = function () { }), }, t('deposit')), - h('button.btn-clear.hero-balance-button', { + h('button.btn-clear.hero-balance-button.allcaps', { style: { marginLeft: '0.8em', }, -- cgit v1.2.3 From cbb65cc4930ff1571a84ac526a29a76010d6003f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 8 Mar 2018 16:29:29 +0100 Subject: Fix flashing to Log in screen after logging in or restoring from seed phrase (#3466) --- ui/app/actions.js | 130 +++++++++++++++++++++++------------ ui/app/keychains/hd/restore-vault.js | 23 +++---- ui/app/reducers/app.js | 14 ++-- ui/app/reducers/metamask.js | 2 - 4 files changed, 104 insertions(+), 65 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 3e26f333b..b56265edc 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -284,27 +284,43 @@ function goHome () { // async actions function tryUnlockMetamask (password) { - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) dispatch(actions.unlockInProgress()) log.debug(`background.submitPassword`) - background.submitPassword(password, (err) => { - dispatch(actions.hideLoadingIndication()) - if (err) { - dispatch(actions.unlockFailed(err.message)) - } else { - dispatch(actions.unlockSucceeded()) - dispatch(actions.transitionForward()) - forceUpdateMetamaskState(dispatch) - background.verifySeedPhrase((err) => { - if (err) { - dispatch(actions.displayWarning(err.message)) - } - }) + return new Promise((resolve, reject) => { + background.submitPassword(password, error => { + if (error) { + return reject(error) + } - } + resolve() + }) }) + .then(() => { + dispatch(actions.unlockSucceeded()) + return forceUpdateMetamaskState(dispatch) + }) + .then(() => { + return new Promise((resolve, reject) => { + background.verifySeedPhrase(err => { + if (err) { + dispatch(actions.displayWarning(err.message)) + } + + resolve() + }) + }) + }) + .then(() => { + dispatch(actions.transitionForward()) + dispatch(actions.hideLoadingIndication()) + }) + .catch(err => { + dispatch(actions.unlockFailed(err.message)) + dispatch(actions.hideLoadingIndication()) + }) } } @@ -346,46 +362,53 @@ function createNewVaultAndRestore (password, seed) { log.debug(`background.createNewVaultAndRestore`) return new Promise((resolve, reject) => { - background.createNewVaultAndRestore(password, seed, (err) => { - - dispatch(actions.hideLoadingIndication()) - + background.createNewVaultAndRestore(password, seed, err => { if (err) { - dispatch(actions.displayWarning(err.message)) return reject(err) } - dispatch(actions.showAccountsPage()) resolve() }) }) + .then(() => dispatch(actions.unMarkPasswordForgotten())) + .then(() => { + dispatch(actions.showAccountsPage()) + dispatch(actions.hideLoadingIndication()) + }) + .catch(err => { + dispatch(actions.displayWarning(err.message)) + dispatch(actions.hideLoadingIndication()) + }) } } function createNewVaultAndKeychain (password) { - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) log.debug(`background.createNewVaultAndKeychain`) return new Promise((resolve, reject) => { - background.createNewVaultAndKeychain(password, (err) => { + background.createNewVaultAndKeychain(password, err => { if (err) { dispatch(actions.displayWarning(err.message)) return reject(err) } + log.debug(`background.placeSeedWords`) + background.placeSeedWords((err) => { if (err) { dispatch(actions.displayWarning(err.message)) return reject(err) } - dispatch(actions.hideLoadingIndication()) - forceUpdateMetamaskState(dispatch) + resolve() }) }) }) - + .then(() => forceUpdateMetamaskState(dispatch)) + .then(() => dispatch(actions.hideLoadingIndication())) + .catch(() => dispatch(actions.hideLoadingIndication())) } } @@ -396,18 +419,27 @@ function revealSeedConfirmation () { } function requestRevealSeed (password) { - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) log.debug(`background.submitPassword`) - background.submitPassword(password, (err) => { - if (err) { - return dispatch(actions.displayWarning(err.message)) - } - log.debug(`background.placeSeedWords`) - background.placeSeedWords((err, result) => { - if (err) return dispatch(actions.displayWarning(err.message)) - dispatch(actions.hideLoadingIndication()) - dispatch(actions.showNewVaultSeed(result)) + return new Promise((resolve, reject) => { + background.submitPassword(password, err => { + if (err) { + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + + log.debug(`background.placeSeedWords`) + background.placeSeedWords((err, result) => { + if (err) { + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + + dispatch(actions.showNewVaultSeed(result)) + dispatch(actions.hideLoadingIndication()) + resolve() + }) }) }) } @@ -858,11 +890,14 @@ function markPasswordForgotten () { } function unMarkPasswordForgotten () { - return (dispatch) => { - return background.unMarkPasswordForgotten(() => { - dispatch(actions.forgotPassword(false)) - forceUpdateMetamaskState(dispatch) + return dispatch => { + return new Promise(resolve => { + background.unMarkPasswordForgotten(() => { + dispatch(actions.forgotPassword(false)) + resolve() + }) }) + .then(() => forceUpdateMetamaskState(dispatch)) } } @@ -1711,11 +1746,16 @@ function callBackgroundThenUpdate (method, ...args) { function forceUpdateMetamaskState (dispatch) { log.debug(`background.getState`) - background.getState((err, newState) => { - if (err) { - return dispatch(actions.displayWarning(err.message)) - } - dispatch(actions.updateMetamaskState(newState)) + return new Promise((resolve, reject) => { + background.getState((err, newState) => { + if (err) { + dispatch(actions.displayWarning(err.message)) + return reject(err) + } + + dispatch(actions.updateMetamaskState(newState)) + resolve() + }) }) } diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index a4ed137f9..d1761f17d 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () { } RestoreVaultScreen.prototype.showInitializeMenu = function () { - this.props.dispatch(actions.unMarkPasswordForgotten()) - if (this.props.forgottenPassword) { - this.props.dispatch(actions.backToUnlockView()) - } else { - this.props.dispatch(actions.showInitializeMenu()) - } + const { dispatch, forgottenPassword } = this.props + dispatch(actions.unMarkPasswordForgotten()) + .then(() => { + if (forgottenPassword) { + dispatch(actions.backToUnlockView()) + } else { + dispatch(actions.showInitializeMenu()) + } + }) } RestoreVaultScreen.prototype.createOnEnter = function (event) { @@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { this.warning = null this.props.dispatch(actions.displayWarning(this.warning)) this.props.dispatch(actions.createNewVaultAndRestore(password, seed)) - .then(() => { - this.props.dispatch(actions.unMarkPasswordForgotten()) - }) - .catch((err) => { - log.error(err.message) - }) - + .catch(err => log.error(err.message)) } diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 4dda839a2..74a0f9299 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -138,14 +138,18 @@ function reduceApp (state, action) { }) case actions.FORGOT_PASSWORD: - return extend(appState, { - currentView: { - name: action.value ? 'restoreVault' : 'accountDetail', - }, - transForward: false, + const newState = extend(appState, { forgottenPassword: action.value, }) + if (action.value) { + newState.currentView = { + name: 'restoreVault', + } + } + + return newState + case actions.SHOW_INIT_MENU: return extend(appState, { currentView: defaultView, diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index cddcd0c1f..029d830ec 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -130,8 +130,6 @@ function reduceMetamask (state, action) { case actions.SHOW_NEW_VAULT_SEED: return extend(metamaskState, { - isUnlocked: true, - isInitialized: false, isRevealingSeedWords: true, seedWords: action.value, }) -- cgit v1.2.3 From 91c890041c685db8ff7f7ac87009225fa31b3042 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Mar 2018 14:01:21 -0330 Subject: Add welcome screen to new-ui browser first time flow. --- ui/app/actions.js | 8 ++++ ui/app/app.js | 21 +++++++-- ui/app/css/itcss/components/index.scss | 3 ++ ui/app/css/itcss/components/welcome-screen.scss | 47 ++++++++++++++++++++ ui/app/reducers/metamask.js | 6 +++ ui/app/welcome-screen.js | 57 +++++++++++++++++++++++++ 6 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 ui/app/css/itcss/components/welcome-screen.scss create mode 100644 ui/app/welcome-screen.js (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 8b1480a79..e1d000f72 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -75,6 +75,8 @@ var actions = { resetAccount, showNewVaultSeed: showNewVaultSeed, showInfoPage: showInfoPage, + CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN', + closeWelcomeScreen, // seed recovery actions REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION', revealSeedConfirmation: revealSeedConfirmation, @@ -905,6 +907,12 @@ function showNewVaultSeed (seed) { } } +function closeWelcomeScreen () { + return { + type: actions.CLOSE_WELCOME_SCREEN, + } +} + function backToUnlockView () { return { type: actions.BACK_TO_UNLOCK_VIEW, diff --git a/ui/app/app.js b/ui/app/app.js index 4e6da24c3..11b761639 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -12,6 +12,8 @@ const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ethe const OldUIInitializeMenuScreen = require('./first-time/init-menu') const InitializeMenuScreen = MascaraFirstTime const NewKeyChainScreen = require('./new-keychain') +const WelcomeScreen = require('./welcome-screen').default + // accounts const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') @@ -91,6 +93,7 @@ function mapStateToProps (state) { betaUI: state.metamask.featureFlags.betaUI, isRevealingSeedWords: state.metamask.isRevealingSeedWords, Qr: state.appState.Qr, + welcomeScreenSeen: state.metamask.welcomeScreenSeen, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -244,6 +247,7 @@ App.prototype.renderAppBar = function () { isInitialized, betaUI, isPopup, + welcomeScreenSeen, } = this.props if (window.METAMASK_UI_TYPE === 'notification') { @@ -269,7 +273,7 @@ App.prototype.renderAppBar = function () { style: {}, }, [ - h('.app-header.flex-row.flex-space-between', { + (isInitialized || welcomeScreenSeen || isPopup || !betaUI) && h('.app-header.flex-row.flex-space-between', { className: classnames({ 'app-header--initialized': !isOnboarding, }), @@ -324,8 +328,12 @@ App.prototype.renderAppBar = function () { ]), ]), - !isInitialized && !isPopup && betaUI && h('h2.alpha-warning', - 'Please be aware that this version is still under development'), + !isInitialized && !isPopup && betaUI && h('h2', { + className: classnames({ + 'alpha-warning': welcomeScreenSeen, + 'alpha-warning-welcome-screen': !welcomeScreenSeen, + }), + }, 'Please be aware that this version is still under development'), ]) ) @@ -369,11 +377,18 @@ App.prototype.renderPrimary = function () { isOnboarding, betaUI, isRevealingSeedWords, + welcomeScreenSeen, Qr, + isInitialized, + isUnlocked, } = props const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords + if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + return h(WelcomeScreen) + } + if (isMascaraOnboarding || isBetaUIOnboarding) { return h(MascaraFirstTime) } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 0219f9fb2..f107b7aca 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -55,3 +55,6 @@ @import './new-account.scss'; @import './tooltip.scss'; + +@import './welcome-screen.scss'; + diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss new file mode 100644 index 000000000..dc8b38399 --- /dev/null +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -0,0 +1,47 @@ +.welcome-screen { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font-family: Roboto; + font-weight: 400; + width: 100%; + height: 100%; + padding: 70px 0; + background: $white; + + &__info { + display: flex; + flex-flow: column; + width: 100%; + height: 100%; + align-items: center; + + &__header { + font-size: 1.65em; + margin-bottom: 14px; + } + + &__copy { + font-size: 1em; + width: 400px; + max-width: 90vw; + text-align: center; + } + } + + &__button { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); + color: #FFFFFF; + font-size: 20px; + font-weight: 500; + line-height: 26px; + text-align: center; + text-transform: uppercase; + margin: 35px 0 14px; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, 0.9); + } +} \ No newline at end of file diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index cddcd0c1f..246d8839b 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -44,6 +44,7 @@ function reduceMetamask (state, action) { featureFlags: {}, networkEndpointType: OLD_UI_NETWORK_TYPE, isRevealingSeedWords: false, + welcomeScreenSeen: false, }, state.metamask) switch (action.type) { @@ -349,6 +350,11 @@ function reduceMetamask (state, action) { networkEndpointType: action.value, }) + case actions.CLOSE_WELCOME_SCREEN: + return extend(metamaskState, { + welcomeScreenSeen: true, + }) + default: return metamaskState diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js new file mode 100644 index 000000000..0c1aced8c --- /dev/null +++ b/ui/app/welcome-screen.js @@ -0,0 +1,57 @@ +import EventEmitter from 'events' +import h from 'react-hyperscript' +import { Component } from 'react' +import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import {closeWelcomeScreen} from './actions' +import Mascot from './components/mascot' + +class WelcomeScreen extends Component { + static propTypes = { + closeWelcomeScreen: PropTypes.func.isRequired, + } + + constructor () { + super() + this.animationEventEmitter = new EventEmitter() + } + + initiateAccountCreation = () => { + this.props.closeWelcomeScreen() + } + + render () { + // t + return h('div.welcome-screen', [ + + h('div.welcome-screen__info', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + width: '225', + height: '225', + }), + + h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta.'), + + h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'), + + h('div.welcome-screen__info__copy', `It allows you to hold ether & tokens, + and serves as your bridge to decentralized applications.`), + + h('button.welcome-screen__button', { + onClick: this.initiateAccountCreation, + }, 'Continue'), + + ]), + + ]) + } +} + +export default connect( + null, + dispatch => ({ + closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), + }) +)(WelcomeScreen) -- cgit v1.2.3 From 6cee76b3e797dd302c1bf97d7799567a366b2004 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Mar 2018 16:12:25 -0330 Subject: Add html and css for responsive retry button. --- ui/app/components/tx-list-item.js | 9 +++++ ui/app/css/itcss/components/transaction-list.scss | 47 +++++++++++++++++++++++ ui/app/css/itcss/settings/variables.scss | 1 + 3 files changed, 57 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 1a13070c8..574d10e14 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -240,6 +240,15 @@ TxListItem.prototype.render = function () { ]), ]), + + h('div.tx-list-item-retry-container', [ + + h('span.tx-list-item-retry-copy', 'Taking too long?'), + + h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'), + + ]), + ]), // holding on icon from design ]) } diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c3df493df..4545897e3 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -126,6 +126,53 @@ } } +.tx-list-item-retry-container { + background: #d1edff; + width: 100%; + border-radius: 4px; + font-size: 0.8em; + display: flex; + justify-content: center; + margin-left: 44px; + width: calc(100% - 44px); + + @media screen and (min-width: 576px) and (max-width: 679px) { + flex-flow: column; + align-items: center; + } + + @media screen and (min-width: 380px) and (max-width: 575px) { + flex-flow: row; + } + + @media screen and (max-width: 379px) { + flex-flow: column; + align-items: center; + } +} + +.tx-list-item-retry-copy { + font-family: Roboto; +} + +.tx-list-item-retry-link { + text-decoration: underline; + margin-left: 6px; + cursor: pointer; + + @media screen and (min-width: 576px) and (max-width: 679px) { + margin-left: 0px; + } + + @media screen and (min-width: 380px) and (max-width: 575px) { + margin-left: 6px; + } + + @media screen and (max-width: 379px) { + margin-left: 0px; + } +} + .tx-list-date { color: $dusty-gray; font-size: 12px; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 4c0972527..1b5f1a491 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -46,6 +46,7 @@ $manatee: #93949d; $spindle: #c7ddec; $mid-gray: #5b5d67; $cape-cod: #38393a; +$onahau: #d1edff; /* Z-Indicies -- cgit v1.2.3 From 5433d2fe3a3f48948449258b03ae431fe81b8cf2 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 00:19:26 -0330 Subject: Retry transaction logic added to tx-list-item, confirm-send-ether, customize-gas-modal, and dependents. --- ui/app/actions.js | 4 +- ui/app/components/customize-gas-modal/index.js | 18 ++++++++- ui/app/components/pending-tx/confirm-send-ether.js | 20 ++++++++- ui/app/components/tx-list-item.js | 47 ++++++++++++++++++---- ui/app/components/tx-list.js | 13 +++--- ui/app/conversion-util.js | 13 ++++++ ui/app/reducers/metamask.js | 4 ++ ui/app/selectors.js | 5 +++ ui/app/send-v2.js | 5 +++ 9 files changed, 113 insertions(+), 16 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 4f902a6a2..3e050c38c 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1228,8 +1228,10 @@ function retryTransaction (txId) { if (err) { return dispatch(actions.displayWarning(err.message)) } + const { selectedAddressTxList } = newState + const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.viewPendingTx(txId)) + dispatch(actions.viewPendingTx(newTxId)) }) } } diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 826d2cd4b..34a93d6c6 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -21,12 +21,14 @@ const { conversionUtil, multiplyCurrencies, conversionGreaterThan, + conversionMax, subtractCurrencies, } = require('../../conversion-util') const { getGasPrice, getGasLimit, + getForceGasMin, conversionRateSelector, getSendAmount, getSelectedToken, @@ -44,6 +46,7 @@ function mapStateToProps (state) { return { gasPrice: getGasPrice(state), gasLimit: getGasLimit(state), + forceGasMin: getForceGasMin(state), conversionRate, amount: getSendAmount(state), maxModeOn: getSendMaxModeState(state), @@ -217,7 +220,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { } CustomizeGasModal.prototype.render = function () { - const { hideModal } = this.props + const { hideModal, forceGasMin } = this.props const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state let convertedGasPrice = conversionUtil(gasPrice, { @@ -229,6 +232,17 @@ CustomizeGasModal.prototype.render = function () { convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}` + if (forceGasMin) { + const convertedMinPrice = conversionUtil(forceGasMin, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + }) + convertedGasPrice = conversionMax( + { value: convertedMinPrice, fromNumericBase: 'dec' }, + { value: convertedGasPrice, fromNumericBase: 'dec' } + ) + } + const convertedGasLimit = conversionUtil(gasLimit, { fromNumericBase: 'hex', toNumericBase: 'dec', @@ -251,7 +265,7 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasPrice, - min: MIN_GAS_PRICE_GWEI, + min: forceGasMin || MIN_GAS_PRICE_GWEI, // max: 1000, step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 3f8d9c28f..a6e00d922 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -36,13 +36,29 @@ function mapDispatchToProps (dispatch) { return { clearSend: () => dispatch(actions.clearSend()), editTransaction: txMeta => { - const { id, txParams } = txMeta + const { id, txParams, lastGasPrice } = txMeta const { gas: gasLimit, gasPrice, to, value: amount, } = txParams + + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + + nonce = txParams.nonce + } + dispatch(actions.updateSend({ gasLimit, gasPrice, @@ -51,6 +67,8 @@ function mapDispatchToProps (dispatch) { amount, errors: { to: null, amount: null }, editingTransactionId: id, + forceGasMin, + nonce, })) dispatch(actions.showSendPage()) }, diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 574d10e14..123f723be 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -9,18 +9,26 @@ abiDecoder.addABI(abi) const Identicon = require('./identicon') const contractMap = require('eth-contract-metadata') +const actions = require('../actions') const { conversionUtil, multiplyCurrencies } = require('../conversion-util') const { calcTokenAmount } = require('../token-util') const { getCurrentCurrency } = require('../selectors') -module.exports = connect(mapStateToProps)(TxListItem) +module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem) function mapStateToProps (state) { return { tokens: state.metamask.tokens, currentCurrency: getCurrentCurrency(state), tokenExchangeRates: state.metamask.tokenExchangeRates, + selectedAddressTxList: state.metamask.selectedAddressTxList, + } +} + +function mapDispatchToProps (dispatch) { + return { + retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), } } @@ -167,12 +175,32 @@ TxListItem.prototype.getSendTokenTotal = async function () { } } +TxListItem.prototype.showRetryButton = function () { + const { + transactionStatus, + transactionTime, + selectedAddressTxList, + transactionId, + txParams, + } = this.props + const currentNonce = txParams.nonce + const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) + const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId + + return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000 +} + +TxListItem.prototype.resubmit = function () { + const { transactionId } = this.props + this.props.retryTransaction(transactionId) +} + TxListItem.prototype.render = function () { const { transactionStatus, transactionAmount, onClick, - transActionId, + transactionId, dateString, address, className, @@ -181,8 +209,8 @@ TxListItem.prototype.render = function () { const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { - key: transActionId, - onClick: () => onClick && onClick(transActionId), + key: transactionId, + onClick: () => onClick && onClick(transactionId), }, [ h(`div.flex-column.tx-list-item-wrapper`, {}, [ @@ -241,12 +269,17 @@ TxListItem.prototype.render = function () { ]), ]), - h('div.tx-list-item-retry-container', [ + this.showRetryButton() && h('div.tx-list-item-retry-container', [ h('span.tx-list-item-retry-copy', 'Taking too long?'), - h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'), - + h('span.tx-list-item-retry-link', { + onClick: (event) => { + event.stopPropagation() + this.resubmit() + }, + }, 'Increase the gas on your transaction'), + ]), ]), // holding on icon from design diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 1729e6a6f..30f816d58 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -74,9 +74,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa address: transaction.txParams.to, transactionStatus: transaction.status, transactionAmount: transaction.txParams.value, - transActionId: transaction.id, + transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, + transactionTime: transaction.time, } const { @@ -84,29 +85,31 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionStatus, transactionAmount, dateString, - transActionId, + transactionId, transactionHash, transactionNetworkId, + transactionTime, } = props const { showConfTxPage } = this.props const opts = { - key: transActionId || transactionHash, + key: transactionId || transactionHash, txParams: transaction.txParams, transactionStatus, - transActionId, + transactionId, dateString, address, transactionAmount, transactionHash, conversionRate, tokenInfoGetter: this.tokenInfoGetter, + transactionTime, } const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => showConfTxPage({id: transActionId}) + opts.onClick = () => showConfTxPage({id: transactionId}) opts.transactionStatus = 'Not Started' } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index ee42ebea1..d484ed16d 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -187,6 +187,18 @@ const conversionGreaterThan = ( return firstValue.gt(secondValue) } +const conversionMax = ( + { ...firstProps }, + { ...secondProps }, +) => { + const firstIsGreater = conversionGreaterThan( + { ...firstProps }, + { ...secondProps } + ) + + return firstIsGreater ? firstProps.value : secondProps.value +} + const conversionGTE = ( { ...firstProps }, { ...secondProps }, @@ -216,6 +228,7 @@ module.exports = { conversionGreaterThan, conversionGTE, conversionLTE, + conversionMax, toNegative, subtractCurrencies, } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index cddcd0c1f..999939b89 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -38,6 +38,8 @@ function reduceMetamask (state, action) { errors: {}, maxModeOn: false, editingTransactionId: null, + forceGasMin: null, + nonce: null, }, coinOptions: {}, useBlockie: false, @@ -298,6 +300,8 @@ function reduceMetamask (state, action) { memo: '', errors: {}, editingTransactionId: null, + forceGasMin: null, + nonce: null, }, }) diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 5d2635775..d37c26f7e 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -18,6 +18,7 @@ const selectors = { getCurrentAccountWithSendEtherInfo, getGasPrice, getGasLimit, + getForceGasMin, getAddressBook, getSendFrom, getCurrentCurrency, @@ -130,6 +131,10 @@ function getGasLimit (state) { return state.metamask.send.gasLimit } +function getForceGasMin (state) { + return state.metamask.send.forceGasMin +} + function getSendFrom (state) { return state.metamask.send.from } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 1d67150e3..edb6bc41d 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -543,6 +543,7 @@ SendTransactionScreen.prototype.getEditedTx = function () { selectedToken, editingTransactionId, unapprovedTxs, + nonce, } = this.props const editingTx = { @@ -554,6 +555,10 @@ SendTransactionScreen.prototype.getEditedTx = function () { }, } + if (nonce) { + editingTx.txParams.nonce = ethUtil.addHexPrefix(nonce) + } + if (selectedToken) { const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), -- cgit v1.2.3 From 2d6b378bf8f8f0b23ef54b48118b61fb6c7deee1 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 02:03:36 -0330 Subject: Adds inline opening of gas customization to confirm-send-ether screen. --- ui/app/components/pending-tx/confirm-send-ether.js | 48 ++++++++++++++++++---- ui/app/components/send/gas-fee-display-v2.js | 4 +- ui/app/css/itcss/components/send.scss | 21 ++++++++++ 3 files changed, 63 insertions(+), 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index a6e00d922..422b1c6c1 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies } = require('../../conversion-util') +const GasFeeDisplay = require('../send/gas-fee-display-v2') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -73,6 +74,18 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { + const { id, txParams } = txMeta + const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + + dispatch(actions.updateSend({ + gasLimit: sendGasLimit || txGasLimit, + gasPrice: sendGasPrice || txGasPrice, + editingTransactionId: id, + gasTotal: sendGasTotal, + })) + dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) + }, } } @@ -157,6 +170,7 @@ ConfirmSendEther.prototype.getGasFee = function () { return { FIAT, ETH, + gasFeeInHex: txFeeBn.toString(16), } } @@ -164,7 +178,7 @@ ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee() + const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee() const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, { @@ -192,11 +206,20 @@ ConfirmSendEther.prototype.getData = function () { amountInETH, totalInFIAT, totalInETH, + gasFeeInHex, } } ConfirmSendEther.prototype.render = function () { - const { editTransaction, currentCurrency, clearSend } = this.props + const { + editTransaction, + currentCurrency, + clearSend, + conversionRate, + currentCurrency: convertedCurrency, + showCustomizeGasModal, + send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -212,11 +235,17 @@ ConfirmSendEther.prototype.render = function () { memo, gasFeeInFIAT, gasFeeInETH, + gasFeeInHex, amountInFIAT, totalInFIAT, totalInETH, } = this.getData() + const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm' + const subtitle = txMeta.lastGasPrice + ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' + : 'Please review your transaction.' + // This is from the latest master // It handles some of the errors that we are not currently handling // Leaving as comments fo reference @@ -235,11 +264,11 @@ ConfirmSendEther.prototype.render = function () { // Main Send token Card h('div.page-container', [ h('div.page-container__header', [ - h('button.confirm-screen-back-button', { + !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'Edit'), - h('div.page-container__title', 'Confirm'), - h('div.page-container__subtitle', `Please review your transaction.`), + h('div.page-container__title', title), + h('div.page-container__subtitle', subtitle), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -302,9 +331,12 @@ ConfirmSendEther.prototype.render = function () { h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), - - h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), ]), diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 0c4c3f7a9..da1bdd05e 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -32,11 +32,11 @@ GasFeeDisplay.prototype.render = function () { }) : h('div.currency-display', 'Loading...'), - h('button.send-v2__sliders-icon-container', { + h('button.sliders-icon-container', { onClick, disabled: !gasTotal, }, [ - h('i.fa.fa-sliders.send-v2__sliders-icon'), + h('i.fa.fa-sliders.sliders-icon'), ]), ]) diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bb17e53cd..1a058b305 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -660,6 +660,7 @@ &__gas-fee-display { width: 100%; + position: relative; } &__sliders-icon-container { @@ -885,3 +886,23 @@ } } } + +.sliders-icon-container { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + border: 1px solid $curious-blue; + border-radius: 4px; + background-color: $white; + position: absolute; + right: 15px; + top: 14px; + cursor: pointer; + font-size: 1em; +} + +.sliders-icon { + color: $curious-blue; +} \ No newline at end of file -- cgit v1.2.3 From c1ff927fa0e129a828d3345b21723300d5e73ef1 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 10:00:37 -0330 Subject: Lint fixes. --- ui/app/actions.js | 2 +- ui/app/components/pending-tx/confirm-send-ether.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 200946753..d6f509590 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1271,7 +1271,7 @@ function retryTransaction (txId) { return dispatch(actions.displayWarning(err.message)) } const { selectedAddressTxList } = newState - const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] + const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] dispatch(actions.updateMetamaskState(newState)) dispatch(actions.viewPendingTx(newTxId)) }) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 422b1c6c1..ec61d66b4 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -233,8 +233,6 @@ ConfirmSendEther.prototype.render = function () { name: toName, }, memo, - gasFeeInFIAT, - gasFeeInETH, gasFeeInHex, amountInFIAT, totalInFIAT, -- cgit v1.2.3 From 4b2e52795d52cfcf227ee56fba9f975e057e846d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Mar 2018 16:30:31 +0100 Subject: Explicitly define state in import account from json component (#3491) --- ui/app/accounts/import/json.js | 180 +++++++++++++++------------ ui/app/css/itcss/components/new-account.scss | 2 +- 2 files changed, 103 insertions(+), 79 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index dd5dfad22..c13622166 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -1,5 +1,5 @@ -const inherits = require('util').inherits const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('../../actions') @@ -7,100 +7,124 @@ const FileInput = require('react-simple-file-input').default const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' -module.exports = connect(mapStateToProps)(JsonImportSubview) +class JsonImportSubview extends Component { + constructor (props) { + super(props) -function mapStateToProps (state) { - return { - error: state.appState.warning, + this.state = { + file: null, + fileContents: '', + } } -} -inherits(JsonImportSubview, Component) -function JsonImportSubview () { - Component.call(this) -} + render () { + const { error } = this.props + + return ( + h('div.new-account-import-form__json', [ + + h('p', 'Used by a variety of different clients'), + h('a.warning', { + href: HELP_LINK, + target: '_blank', + }, 'File import not working? Click here!'), + + h(FileInput, { + readAs: 'text', + onLoad: this.onLoad.bind(this), + style: { + margin: '20px 0px 12px 34%', + fontSize: '15px', + display: 'flex', + justifyContent: 'center', + }, + }), + + h('input.new-account-import-form__input-password', { + type: 'password', + placeholder: 'Enter password', + id: 'json-password-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + }), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => this.props.goHome(), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.createNewKeychain(), + }, [ + 'IMPORT', + ]), -JsonImportSubview.prototype.render = function () { - const { error } = this.props - - return ( - h('div.new-account-import-form__json', [ - - h('p', 'Used by a variety of different clients'), - h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), - - h(FileInput, { - readAs: 'text', - onLoad: this.onLoad.bind(this), - style: { - margin: '20px 0px 12px 34%', - fontSize: '15px', - display: 'flex', - justifyContent: 'center', - }, - }), - - h('input.new-account-import-form__input-password', { - type: 'password', - placeholder: 'Enter password', - id: 'json-password-box', - onKeyPress: this.createKeyringOnEnter.bind(this), - }), - - h('div.new-account-create-form__buttons', {}, [ - - h('button.new-account-create-form__button-cancel', { - onClick: () => this.props.goHome(), - }, [ - 'CANCEL', ]), - h('button.new-account-create-form__button-create', { - onClick: () => this.createNewKeychain.bind(this), - }, [ - 'IMPORT', - ]), + error ? h('span.error', error) : null, + ]) + ) + } - ]), + onLoad (event, file) { + this.setState({file: file, fileContents: event.target.result}) + } - error ? h('span.error', error) : null, - ]) - ) -} + createKeyringOnEnter (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } + } -JsonImportSubview.prototype.onLoad = function (event, file) { - this.setState({file: file, fileContents: event.target.result}) -} + createNewKeychain () { + const state = this.state -JsonImportSubview.prototype.createKeyringOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewKeychain() - } -} + if (!state) { + const message = 'You must select a valid file to import.' + return this.props.displayWarning(message) + } -JsonImportSubview.prototype.createNewKeychain = function () { - const state = this.state + const { fileContents } = state - if (!state) { - const message = 'You must select a valid file to import.' - return this.props.dispatch(actions.displayWarning(message)) - } + if (!fileContents) { + const message = 'You must select a file to import.' + return this.props.displayWarning(message) + } + + const passwordInput = document.getElementById('json-password-box') + const password = passwordInput.value - const { fileContents } = state + if (!password) { + const message = 'You must enter a password for the selected file.' + return this.props.displayWarning(message) + } - if (!fileContents) { - const message = 'You must select a file to import.' - return this.props.dispatch(actions.displayWarning(message)) + this.props.importNewJsonAccount([ fileContents, password ]) } +} - const passwordInput = document.getElementById('json-password-box') - const password = passwordInput.value +JsonImportSubview.propTypes = { + error: PropTypes.string, + goHome: PropTypes.func, + displayWarning: PropTypes.func, + importNewJsonAccount: PropTypes.func, +} - if (!password) { - const message = 'You must enter a password for the selected file.' - return this.props.dispatch(actions.displayWarning(message)) +const mapStateToProps = state => { + return { + error: state.appState.warning, } +} - this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) +const mapDispatchToProps = dispatch => { + return { + goHome: () => dispatch(actions.goHome()), + displayWarning: warning => dispatch(actions.displayWarning(warning)), + importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)), + } } + +module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview) diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index c6c254ede..08cff867d 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -190,7 +190,7 @@ margin-top: 39px; display: flex; width: 100%; - justify-content: space-evenly; + justify-content: space-between; } &__button-cancel, -- cgit v1.2.3 From d84341f323505e3dec4b13a200e6022747fa58fc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Mar 2018 16:31:17 +0100 Subject: Add empty object default value for tokenData (#3493) --- ui/app/components/pending-tx/confirm-send-token.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index e4b0c186a..dd2bef3da 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -63,8 +63,8 @@ function mapDispatchToProps (dispatch, ownProps) { updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), editTransaction: txMeta => { const { token: { address } } = ownProps - const { txParams, id } = txMeta - const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { txParams = {}, id } = txMeta + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {} const { params = [] } = tokenData const { value: to } = params[0] || {} const { value: tokenAmountInDec } = params[1] || {} -- cgit v1.2.3 From ab1b39f5543aa9d1ea8eb8d35e29f832f782df7c Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Mar 2018 16:31:53 +0100 Subject: Remove de-selected token from selectedTokens hash instead of setting to null (#3494) --- ui/app/add-token.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index 51c577987..b8878b772 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -71,13 +71,17 @@ AddTokenScreen.prototype.componentWillMount = function () { } AddTokenScreen.prototype.toggleToken = function (address, token) { - const { selectedTokens, errors } = this.state - const { [address]: selectedToken } = selectedTokens + const { selectedTokens = {}, errors } = this.state + const selectedTokensCopy = { ...selectedTokens } + + if (address in selectedTokensCopy) { + delete selectedTokensCopy[address] + } else { + selectedTokensCopy[address] = token + } + this.setState({ - selectedTokens: { - ...selectedTokens, - [address]: selectedToken ? null : token, - }, + selectedTokens: selectedTokensCopy, errors: { ...errors, tokenSelector: null, -- cgit v1.2.3 From a07550d2abff0916af500eda6767cf32e0849335 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Mar 2018 18:50:00 +0100 Subject: Increase tap areas for menu buttons on mobile --- ui/app/components/tx-view.js | 10 +- ui/app/css/itcss/components/hero-balance.scss | 3 - ui/app/css/itcss/components/newui-sections.scss | 22 +++- ui/app/main-container.js | 14 +-- ui/app/unlock.js | 143 +++++++++++------------- 5 files changed, 93 insertions(+), 99 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b25d8e0f9..ad9f9c5c0 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -100,9 +100,10 @@ TxView.prototype.render = function () { h('div.flex-row.phone-visible', { style: { - margin: '1.5em 1.2em 0', justifyContent: 'space-between', alignItems: 'center', + flex: '0 0 auto', + margin: '10px', }, }, [ @@ -110,11 +111,10 @@ TxView.prototype.render = function () { style: { fontSize: '1.3em', cursor: 'pointer', + padding: '10px', }, - onClick: () => { - this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() - }, - }, []), + onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(), + }), h('.identicon-wrapper.select-none', { style: { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 4af0c2c55..a3f051361 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,9 +5,6 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: .3em .9em 0; - // height: 80vh; - // max-height: 225px; flex: 0 0 auto; } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index ecf5e1036..a6d03a6c7 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster; cursor: pointer; display: flex; justify-content: center; + padding: 10px; } // wallet view and sidebar @@ -313,4 +314,23 @@ $wallet-view-bg: $alabaster; @media screen and (min-width: 1281px) { width: 62vw; } -} \ No newline at end of file +} + +.unlock-screen-container { + z-index: $main-container-z-index; + font-family: Roboto; + display: flex; + justify-content: center; + align-items: center; + flex: 1 0 auto; + background: #f7f7f7; + width: 100%; +} + +.unlock-screen { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 auto; +} diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 292abcc3d..eed4bd164 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -32,19 +32,7 @@ MainContainer.prototype.render = function () { return h(Settings, {key: 'config'}) default: log.debug('rendering locked screen') - contents = { - component: UnlockScreen, - style: { - boxShadow: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - background: '#F7F7F7', - // must force 100%, because lock screen is full-width - width: '100%', - }, - key: 'locked', - } + return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' })) } } diff --git a/ui/app/unlock.js b/ui/app/unlock.js index cafe3a859..39da699a6 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () { const state = this.props const warning = state.warning return ( - h('.flex-column', { - style: { - width: 'inherit', - }, - }, [ - h('.unlock-screen.flex-column.flex-center.flex-grow', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.4em', - textTransform: 'uppercase', - color: '#7F8082', - }, - }, 'MetaMask'), - - h('input.large-input', { - type: 'password', - id: 'password-box', - placeholder: 'enter password', - style: { - background: 'white', - }, - onKeyPress: this.onKeyPress.bind(this), - onInput: this.inputChanged.bind(this), - }), - - h('.error', { - style: { - display: warning ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', - }, - }, warning), - - h('button.primary.cursor-pointer', { - onClick: this.onSubmit.bind(this), - style: { - margin: 10, - }, - }, 'Log In'), - ]), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => { - this.props.dispatch(actions.markPasswordForgotten()) - if (environmentType() === 'popup') { - global.platform.openExtensionInBrowser() - } - }, - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Restore from seed phrase'), - ]), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => { - this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) - }, - style: { - fontSize: '0.8em', - color: '#aeaeae', - textDecoration: 'underline', - marginTop: '32px', - }, - }, 'Use classic interface'), - ]), - + h('.unlock-screen', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, 'MetaMask'), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: warning ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, warning), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, 'Log In'), + + h('p.pointer', { + onClick: () => { + this.props.dispatch(actions.markPasswordForgotten()) + if (environmentType() === 'popup') { + global.platform.openExtensionInBrowser() + } + }, + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'Restore from seed phrase'), + + h('p.pointer', { + onClick: () => { + this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) + .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) + }, + style: { + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', + }, + }, 'Use classic interface'), ]) ) } -- cgit v1.2.3 From 208b3bc4c1a22b7848e0d9f30ddf3de629f7f0c9 Mon Sep 17 00:00:00 2001 From: Thomas Date: Mon, 12 Mar 2018 08:07:12 -0700 Subject: Add i18n back into JsonImportSubview --- ui/app/accounts/import/json.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 93c7afdb9..1b5e485d7 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -24,11 +24,11 @@ class JsonImportSubview extends Component { return ( h('div.new-account-import-form__json', [ - h('p', 'Used by a variety of different clients'), + h('p', t('usedByClients')), h('a.warning', { href: HELP_LINK, target: '_blank', - }, 'File import not working? Click here!'), + }, t('fileImportFail')), h(FileInput, { readAs: 'text', @@ -43,7 +43,7 @@ class JsonImportSubview extends Component { h('input.new-account-import-form__input-password', { type: 'password', - placeholder: 'Enter password', + placeholder: t('enterPassword'), id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), }), @@ -53,13 +53,13 @@ class JsonImportSubview extends Component { h('button.new-account-create-form__button-cancel', { onClick: () => this.props.goHome(), }, [ - 'CANCEL', + t('cancel'), ]), h('button.new-account-create-form__button-create', { onClick: () => this.createNewKeychain(), }, [ - 'IMPORT', + t('import'), ]), ]), @@ -91,7 +91,7 @@ class JsonImportSubview extends Component { const { fileContents } = state if (!fileContents) { - const message = 'You must select a file to import.' + const message = t('needImportFile') return this.props.displayWarning(message) } @@ -99,7 +99,7 @@ class JsonImportSubview extends Component { const password = passwordInput.value if (!password) { - const message = 'You must enter a password for the selected file.' + const message = t('needImportPassword') return this.props.displayWarning(message) } -- cgit v1.2.3 From 0dad6db9736f2b90000c489b0b452c8d2fa02bb3 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Mar 2018 14:29:26 -0230 Subject: Styling fixes to welcome; hide network component on create password; shown welcoem in popup. --- ui/app/app.js | 4 ++-- ui/app/css/itcss/components/welcome-screen.scss | 4 ++-- ui/app/welcome-screen.js | 7 +++---- 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 11b761639..50514bd3b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -298,7 +298,7 @@ App.prototype.renderAppBar = function () { ]), ]), - h('div.header__right-actions', [ + betaUI && isInitialized && h('div.header__right-actions', [ h('div.network-component-wrapper', { style: {}, }, [ @@ -385,7 +385,7 @@ App.prototype.renderPrimary = function () { const isMascaraOnboarding = isMascara && isOnboarding const isBetaUIOnboarding = betaUI && isOnboarding && !props.isPopup && !isRevealingSeedWords - if (!welcomeScreenSeen && isBetaUIOnboarding && !isInitialized && !isUnlocked) { + if (!welcomeScreenSeen && betaUI && !isInitialized && !isUnlocked) { return h(WelcomeScreen) } diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index dc8b38399..86fc7d04d 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -6,7 +6,7 @@ font-family: Roboto; font-weight: 400; width: 100%; - height: 100%; + flex: 1 0 auto; padding: 70px 0; background: $white; @@ -44,4 +44,4 @@ transition: 200ms ease-in-out; background-color: rgba(247, 134, 28, 0.9); } -} \ No newline at end of file +} diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index 0c1aced8c..cdbb6dba8 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -11,8 +11,8 @@ class WelcomeScreen extends Component { closeWelcomeScreen: PropTypes.func.isRequired, } - constructor () { - super() + constructor(props) { + super(props) this.animationEventEmitter = new EventEmitter() } @@ -21,7 +21,6 @@ class WelcomeScreen extends Component { } render () { - // t return h('div.welcome-screen', [ h('div.welcome-screen__info', [ @@ -32,7 +31,7 @@ class WelcomeScreen extends Component { height: '225', }), - h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta.'), + h('div.welcome-screen__info__header', 'Welcome to MetaMask Beta'), h('div.welcome-screen__info__copy', 'MetaMask is a secure identity vault for Ethereum.'), -- cgit v1.2.3 From 08542c18e10c61b9e5862e95e7a5a18d479f2dc1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 12 Mar 2018 19:25:12 +0100 Subject: Update deposit ether styling (#3510) --- ui/app/components/modals/deposit-ether-modal.js | 111 +++++++++++++----------- ui/app/components/modals/modal.js | 10 ++- ui/app/css/itcss/components/modal.scss | 50 +++++++---- ui/app/css/itcss/components/new-account.scss | 3 +- ui/app/css/itcss/generic/index.scss | 33 +++++-- 5 files changed, 125 insertions(+), 82 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 7547dbcf5..ed73bc632 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether directly into your MetaMask wallet. No Account Needed.` const FAUCET_ROW_TITLE = 'Test Faucet' -const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` +const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}` function mapStateToProps (state) { return { @@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({ ]), - h('div.deposit-ether-modal__buy-row__logo', [logo]), + h('div.deposit-ether-modal__buy-row__logo-container', [logo]), h('div.deposit-ether-modal__buy-row__description', [ @@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () { const isTestNetwork = ['3', '4', '42'].find(n => n === network) const networkName = networkNames[network] - return h('div.deposit-ether-modal', {}, [ + return h('div.page-container.page-container--full-width', {}, [ - h('div.deposit-ether-modal__header', [ + h('div.page-container__header', [ - h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + h('div.page-container__title', 'Deposit Ether'), - h('div.deposit-ether-modal__header__description', [ + h('div.page-container__subtitle', [ 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', ]), - h('div.deposit-ether-modal__header__close', { + h('div.page-container__header-close', { onClick: () => { this.setState({ buyingWithShapeshift: false }) this.props.hideWarning() @@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () { ]), - h('div.deposit-ether-modal__buy-rows', [ - - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), - title: DIRECT_DEPOSIT_ROW_TITLE, - text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: 'View Account', - onButtonClick: () => this.goToAccountDetailsModal(), - hide: buyingWithShapeshift, - }), + h('.page-container__content', {}, [ + + h('div.deposit-ether-modal__buy-rows', [ + + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/eth_logo.svg\')', + }, + }), + title: DIRECT_DEPOSIT_ROW_TITLE, + text: DIRECT_DEPOSIT_ROW_TEXT, + buttonLabel: 'View Account Details', + onButtonClick: () => this.goToAccountDetailsModal(), + hide: buyingWithShapeshift, + }), - this.renderRow({ - logo: h('i.fa.fa-tint.fa-2x'), - title: FAUCET_ROW_TITLE, - text: facuetRowText(networkName), - buttonLabel: 'Get Ether', - onButtonClick: () => toFaucet(network), - hide: !isTestNetwork || buyingWithShapeshift, - }), + this.renderRow({ + logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'), + title: FAUCET_ROW_TITLE, + text: faucetRowText(networkName), + buttonLabel: 'Continue to Test Faucet', + onButtonClick: () => toFaucet(network), + hide: !isTestNetwork || buyingWithShapeshift, + }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { - src: '../../../images/coinbase logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/coinbase logo.png\')', + height: '40px', + }, + }), + title: COINBASE_ROW_TITLE, + text: COINBASE_ROW_TEXT, + buttonLabel: 'Continue to Coinbase', + onButtonClick: () => toCoinbase(address), + hide: isTestNetwork || buyingWithShapeshift, }), - title: COINBASE_ROW_TITLE, - text: COINBASE_ROW_TEXT, - buttonLabel: 'Continue to Coinbase', - onButtonClick: () => toCoinbase(address), - hide: isTestNetwork || buyingWithShapeshift, - }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { - src: '../../../images/shapeshift logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', + }, + }), + title: SHAPESHIFT_ROW_TITLE, + text: SHAPESHIFT_ROW_TEXT, + buttonLabel: 'Continue to Shapeshift', + onButtonClick: () => this.setState({ buyingWithShapeshift: true }), + hide: isTestNetwork, + hideButton: buyingWithShapeshift, + hideTitle: buyingWithShapeshift, + onBackClick: () => this.setState({ buyingWithShapeshift: false }), + showBackButton: this.state.buyingWithShapeshift, + className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', }), - title: SHAPESHIFT_ROW_TITLE, - text: SHAPESHIFT_ROW_TEXT, - buttonLabel: 'Buy with Shapeshift', - onButtonClick: () => this.setState({ buyingWithShapeshift: true }), - hide: isTestNetwork, - hideButton: buyingWithShapeshift, - hideTitle: buyingWithShapeshift, - onBackClick: () => this.setState({ buyingWithShapeshift: false }), - showBackButton: this.state.buyingWithShapeshift, - className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', - }), - buyingWithShapeshift && h(ShapeshiftForm), + buyingWithShapeshift && h(ShapeshiftForm), + + ]), ]), ]) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 8e9e58985..ffe669610 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -92,18 +92,20 @@ const MODALS = { display: 'flex', }, laptopModalStyle: { - width: '900px', - maxWidth: '900px', + width: '850px', top: 'calc(10% + 10px)', left: '0', right: '0', margin: '0 auto', boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', - borderRadius: '8px', + borderRadius: '7px', transform: 'none', + height: 'calc(80% - 20px)', + overflowY: 'hidden', }, contentStyle: { - borderRadius: '8px', + borderRadius: '7px', + height: '100%', }, }, diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 53e3bff00..6c4106f8b 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -641,32 +641,40 @@ &__buy-rows { width: 100%; - padding: 33px; - padding-top: 0px; + padding: 0 30px; display: flex; flex-flow: column nowrap; flex: 1; - overflow-y: auto; @media screen and (max-width: 575px) { height: 0; } } + &__logo { + height: 60px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + &__buy-row { border-bottom: 1px solid $alto; display: flex; justify-content: space-between; align-items: center; - flex: 1; - padding-bottom: 25px; - padding-top: 25px; + flex: 1 0 auto; + padding: 30px 0 20px; + min-height: 170px; @media screen and (max-width: 575px) { - min-height: 360px; + min-height: 270px; flex-flow: column; - justify-content: center; - padding-top: 45px; + justify-content: flex-start; } &__back { @@ -692,30 +700,35 @@ } } - &__logo { + &__logo-container { display: flex; justify-content: center; - flex: 0.3 1 auto; + flex: 0 0 auto; + padding: 0 20px; - @media screen and (min-width: 575px) { - min-width: 215px; + @media screen and (min-width: 576px) { + width: 12rem; + } + + @media screen and (max-width: 575px) { + width: 100%; + max-height: 6rem; + padding-bottom: 20px; } } &__coinbase-logo { height: 40px; - width: 180px; } &__shapeshift-logo { height: 60px; - width: 174px; } &__eth-logo { border-radius: 50%; - width: 68px; height: 68px; + width: 68px; border: 3px solid $tundora; z-index: 25; padding: 4px; @@ -728,10 +741,11 @@ &__description { color: $cape-cod; - flex: 0.5 1 auto; + padding-bottom: 20px; + align-self: flex-start; @media screen and (min-width: 575px) { - min-width: 315px; + width: 15rem; } &__title { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 08cff867d..c2cefe4ad 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -161,15 +161,14 @@ display: flex; flex-flow: column; align-items: center; + padding: 30px 30px 0; &__input-label { color: $scorpion; font-family: Roboto; font-size: 16px; line-height: 21px; - margin-top: 29px; align-self: flex-start; - margin-left: 30px; } &__input { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 9b3d7475b..b9b6704de 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -77,25 +77,30 @@ input.large-input { z-index: 25; display: flex; flex-flow: column; + border-radius: 7px; + height: 100%; &__header { display: flex; flex-flow: column; border-bottom: 1px solid $geyser; - padding: 1.15rem 0.95rem; + padding: 20px; flex: 0 0 auto; - background: $alabaster; position: relative; } - &__header-close::after { - content: '\00D7'; - font-size: 40px; + &__header-close { color: $tundora; position: absolute; - top: 21.5px; - right: 28.5px; + top: 20px; + right: 20px; cursor: pointer; + overflow: hidden; + + &::after { + content: '\00D7'; + font-size: 40px; + } } &__footer { @@ -114,7 +119,7 @@ input.large-input { &__footer-button { width: 165px; - height: 60px; + height: 55px; font-size: 1rem; text-transform: uppercase; margin-right: 1rem; @@ -130,7 +135,7 @@ input.large-input { font-family: Roboto; font-size: 2rem; font-weight: 500; - line-height: initial; + line-height: 2rem; } &__subtitle { @@ -174,6 +179,15 @@ input.large-input { } } } + + &--full-width { + width: initial; + } + + &__content { + height: 100%; + overflow-y: auto; + } } @media screen and (max-width: 250px) { @@ -200,5 +214,6 @@ input.large-input { width: 100%; overflow-y: auto; background-color: $white; + border-radius: 0; } } -- cgit v1.2.3 From 70f33d47472863e3fce41eff60c1fe078efef7de Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 12 Mar 2018 20:17:44 -0230 Subject: Left align create password. --- ui/app/css/itcss/components/welcome-screen.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index 86fc7d04d..bfd174ad9 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -10,6 +10,10 @@ padding: 70px 0; background: $white; + @media screen and (max-width: 575px) { + padding: 0; + } + &__info { display: flex; flex-flow: column; @@ -20,6 +24,10 @@ &__header { font-size: 1.65em; margin-bottom: 14px; + + @media screen and (max-width: 575px) { + font-size: 1.5em; + } } &__copy { @@ -27,6 +35,10 @@ width: 400px; max-width: 90vw; text-align: center; + + @media screen and (max-width: 575px) { + font-size: 0.9em; + } } } -- cgit v1.2.3 From f805a2eb735ea2ae93e91df0d35c6856987fa734 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 02:31:35 -0230 Subject: Fix gas calculation and nonce / forceGasMin state setting errors; retry button shows on correct tx. --- ui/app/components/customize-gas-modal/index.js | 6 +-- ui/app/components/pending-tx/confirm-send-ether.js | 52 +++++++++++++--------- ui/app/components/tx-list-item.js | 6 ++- 3 files changed, 39 insertions(+), 25 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 34a93d6c6..2bac57253 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -117,9 +117,9 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateSendAmount(maxAmount) } - updateGasPrice(gasPrice) - updateGasLimit(gasLimit) - updateGasTotal(gasTotal) + updateGasPrice(ethUtil.addHexPrefix(gasPrice)) + updateGasLimit(ethUtil.addHexPrefix(gasLimit)) + updateGasTotal(ethUtil.addHexPrefix(gasTotal)) hideModal() } diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index ec61d66b4..b1e3a0374 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -8,7 +8,11 @@ const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') -const { conversionUtil, addCurrencies } = require('../../conversion-util') +const { + conversionUtil, + addCurrencies, + multiplyCurrencies +} = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -37,7 +41,7 @@ function mapDispatchToProps (dispatch) { return { clearSend: () => dispatch(actions.clearSend()), editTransaction: txMeta => { - const { id, txParams, lastGasPrice } = txMeta + const { id, txParams } = txMeta const { gas: gasLimit, gasPrice, @@ -45,21 +49,6 @@ function mapDispatchToProps (dispatch) { value: amount, } = txParams - let forceGasMin - let nonce - if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, { - aBase: 16, - bBase: 16, - toNumericBase: 'hex', - fromDenomination: 'WEI', - toDenomination: 'GWEI', - })) - - nonce = txParams.nonce - } - dispatch(actions.updateSend({ gasLimit, gasPrice, @@ -68,21 +57,36 @@ function mapDispatchToProps (dispatch) { amount, errors: { to: null, amount: null }, editingTransactionId: id, - forceGasMin, - nonce, })) dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { - const { id, txParams } = txMeta + const { id, txParams, lastGasPrice } = txMeta const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + + nonce = txParams.nonce + } + dispatch(actions.updateSend({ gasLimit: sendGasLimit || txGasLimit, gasPrice: sendGasPrice || txGasPrice, editingTransactionId: id, gasTotal: sendGasTotal, + forceGasMin, + nonce, })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, @@ -493,6 +497,14 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + if (txData.lastGasPrice) { + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit + } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 123f723be..f7d53709f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -185,9 +185,11 @@ TxListItem.prototype.showRetryButton = function () { } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId + const currentStatusNonceTx = currentNonceTxs.filter(tx => + tx.status !== 'rejected' && tx.status !== 'failed') + const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId - return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000 + return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From e6d1ce56e7b792957f7b5c3249ecf013752b87ed Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 03:11:45 -0230 Subject: Improve phrasing of copy. --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/tx-list-item.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index b1e3a0374..8788a77f8 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -243,7 +243,7 @@ ConfirmSendEther.prototype.render = function () { totalInETH, } = this.getData() - const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm' + const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm' const subtitle = txMeta.lastGasPrice ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' : 'Please review your transaction.' diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index f7d53709f..62426252f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -280,7 +280,7 @@ TxListItem.prototype.render = function () { event.stopPropagation() this.resubmit() }, - }, 'Increase the gas on your transaction'), + }, 'Increase the gas price on your transaction'), ]), -- cgit v1.2.3 From 179066fe6ba3eca002454981c5ef56df7bb142ab Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 03:26:37 -0230 Subject: Set txMeta.time to reflect time of tx approval. --- ui/app/components/pending-tx/confirm-send-ether.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 8788a77f8..899c2617c 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -457,7 +457,7 @@ ConfirmSendEther.prototype.render = function () { ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() - const txMeta = this.gatherTxMeta() + const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() }) const valid = this.checkValidity() this.setState({ valid, submitting: true }) @@ -492,7 +492,7 @@ ConfirmSendEther.prototype.getFormEl = function () { } // After a customizable state value has been updated, -ConfirmSendEther.prototype.gatherTxMeta = function () { +ConfirmSendEther.prototype.gatherTxMeta = function (opts) { const props = this.props const state = this.state const txData = clone(state.txData) || clone(props.txData) @@ -506,7 +506,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { } // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) - return txData + return Object.assign(txData, opts) } ConfirmSendEther.prototype.verifyGasParams = function () { -- cgit v1.2.3 From b45ea44aa5eb35c5092d78bc888e884af70db7cb Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 13 Mar 2018 10:28:33 -0700 Subject: Add missing opening parens to pag-container__subtitle --- ui/app/components/modals/deposit-ether-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 1aa0e9247..26ff3ea03 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -115,7 +115,7 @@ DepositEtherModal.prototype.render = function () { h('div.page-container__title', [t('depositEther')]), - h'div.page-container__subtitle', [ + h('div.page-container__subtitle', [ t('needEtherInWallet'), ]), -- cgit v1.2.3 From b1871bf32d0b1f616a45daa4c0356c167f583388 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 13 Mar 2018 11:04:41 -0700 Subject: Add closing parens to appName --- ui/app/unlock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index bbaf55f21..ac97d04d0 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -41,7 +41,7 @@ UnlockScreen.prototype.render = function () { textTransform: 'uppercase', color: '#7F8082', }, - }, t('appName'), + }, t('appName')), h('input.large-input', { type: 'password', -- cgit v1.2.3 From a52ef7a06a04888d2de1246c0896f86f59a3f153 Mon Sep 17 00:00:00 2001 From: kumavis Date: Tue, 13 Mar 2018 14:41:54 -0700 Subject: ui - lint fix --- ui/app/keychains/hd/restore-vault.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 6c8f6cdb0..685094854 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -152,7 +152,7 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { return } // true if seed contains a character that is not between a-z or a space - if(!seed.match(/^[a-z ]+$/)) { + if (!seed.match(/^[a-z ]+$/)) { this.warning = 'seed words only have lowercase characters' this.props.dispatch(actions.displayWarning(this.warning)) return -- cgit v1.2.3 From d6e4d2e80d05f64bb543e524c6288b8b7c33e4c1 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:09:04 -0230 Subject: Use new submittedTime field to correctly show retry button in old and new ui. --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/tx-list-item.js | 10 +++++----- ui/app/components/tx-list.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 899c2617c..8fe58482b 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -11,7 +11,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies, - multiplyCurrencies + multiplyCurrencies, } = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 62426252f..941fcb69c 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -178,18 +178,18 @@ TxListItem.prototype.getSendTokenTotal = async function () { TxListItem.prototype.showRetryButton = function () { const { transactionStatus, - transactionTime, + transactionSubmittedTime, selectedAddressTxList, transactionId, txParams, } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const currentStatusNonceTx = currentNonceTxs.filter(tx => - tx.status !== 'rejected' && tx.status !== 'failed') - const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId + const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') + const isLastSubmittedTxWithCurrentNonce = + currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId - return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000 + return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000 } TxListItem.prototype.resubmit = function () { diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 30f816d58..add70a266 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, - transactionTime: transaction.time, + transactionSubmittedTime: transaction.transactionSubmittedTime, } const { @@ -88,7 +88,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId, transactionHash, transactionNetworkId, - transactionTime, + transactionSubmittedTime, } = props const { showConfTxPage } = this.props @@ -103,7 +103,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionHash, conversionRate, tokenInfoGetter: this.tokenInfoGetter, - transactionTime, + transactionSubmittedTime, } const isUnapproved = transactionStatus === 'unapproved' -- cgit v1.2.3 From e293b6349c522171db26c57e718c5213aa6d5cb3 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:11:50 -0230 Subject: Styling for dropped. --- ui/app/components/tx-list-item.js | 1 + ui/app/css/itcss/components/transaction-list.scss | 4 ++++ 2 files changed, 5 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 941fcb69c..d2fc57b13 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -253,6 +253,7 @@ TxListItem.prototype.render = function () { className: classnames('tx-list-status', { 'tx-list-status--rejected': transactionStatus === 'rejected', 'tx-list-status--failed': transactionStatus === 'failed', + 'tx-list-status--dropped': transactionStatus === 'dropped', }), }, transactionStatus, diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 4545897e3..df7d80e2e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -236,6 +236,10 @@ .tx-list-status--failed { color: $monzo; } + + .tx-list-status--dropped { + opacity: 0.5; + } } .tx-list-item { -- cgit v1.2.3 From 8c7988978f05fa57bba892efb42ae0036ce25771 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:32:22 -0230 Subject: Undefined check in showRetryButton --- ui/app/components/tx-list-item.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index d2fc57b13..453f7e95c 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -186,10 +186,11 @@ TxListItem.prototype.showRetryButton = function () { const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') - const isLastSubmittedTxWithCurrentNonce = - currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId + const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] + const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce + && lastSubmittedTxWithCurrentNonce.id === transactionId - return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000 + return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From 46ded45b8186c0b338f6cff811cd89c48ef1a5ab Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:38:08 -0230 Subject: Use correct var name in new-ui showRetryButton --- ui/app/components/tx-list-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 453f7e95c..ebf5db19f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -190,7 +190,7 @@ TxListItem.prototype.showRetryButton = function () { const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transactionId - return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 + return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From c52253bb0eb8ab1c7c7e9c0e7002d5ada42d53d6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:57:23 -0230 Subject: Use correct name for submittedTime field in tx-list.js --- ui/app/components/tx-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index add70a266..782de0266 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, - transactionSubmittedTime: transaction.transactionSubmittedTime, + transactionSubmittedTime: transaction.submittedTime, } const { -- cgit v1.2.3 From 0d33aed20e3f3eea68e7d0cb41fbfb0d80415000 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:29:47 -0230 Subject: Fix tx-list-item submitted check. --- ui/app/components/tx-list-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index ebf5db19f..b7f7c5ab4 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -185,7 +185,7 @@ TxListItem.prototype.showRetryButton = function () { } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') + const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transactionId -- cgit v1.2.3 From e94a14ef8aee8a80a4d21ed8cb1d5b680296eb0b Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:44:05 -0230 Subject: Make token confirmations compatible. --- ui/app/components/pending-tx/confirm-send-token.js | 85 +++++++++++++++++++--- ui/app/components/tx-list-item.js | 17 ++++- 2 files changed, 88 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index e4b0c186a..4ce6a7bc3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -8,6 +8,7 @@ abiDecoder.addABI(tokenAbi) const actions = require('../../actions') const clone = require('clone') const Identicon = require('../identicon') +const GasFeeDisplay = require('../send/gas-fee-display-v2.js') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const { @@ -88,6 +89,42 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, + showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { + const { id, txParams, lastGasPrice } = txMeta + const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { params = [] } = tokenData + const { value: to } = params[0] || {} + const { value: tokenAmountInDec } = params[1] || {} + const tokenAmountInHex = conversionUtil(tokenAmountInDec, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + }) + + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + } + + dispatch(actions.updateSend({ + gasLimit: sendGasLimit || txGasLimit, + gasPrice: sendGasPrice || txGasPrice, + editingTransactionId: id, + gasTotal: sendGasTotal, + to, + amount: tokenAmountInHex, + forceGasMin, + })) + dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) + }, } } @@ -187,6 +224,7 @@ ConfirmSendToken.prototype.getGasFee = function () { token: tokenExchangeRate ? tokenGas : null, + gasFeeInHex: gasTotal.toString(16), } } @@ -239,19 +277,31 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { } ConfirmSendToken.prototype.renderGasFee = function () { - const { token: { symbol }, currentCurrency } = this.props - const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() + const { + token: { symbol }, + currentCurrency: convertedCurrency, + conversionRate, + send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + showCustomizeGasModal, + } = this.props + const txMeta = this.gatherTxMeta() + const { + fiat: fiatGas, + token: tokenGas, + eth: ethGas, + gasFeeInHex + } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), - - h( - 'div.confirm-screen-row-detail', - tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH` - ), + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), ]) ) @@ -307,16 +357,21 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] + const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm' + const subtitle = txMeta.lastGasPrice + ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' + : 'Please review your transaction.' + return ( h('div.confirm-screen-container.confirm-send-token', [ // Main Send token Card h('div.page-container', [ h('div.page-container__header', [ - h('button.confirm-screen-back-button', { + !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'Edit'), - h('div.page-container__title', 'Confirm'), - h('div.page-container__subtitle', `Please review your transaction.`), + h('div.page-container__title', title), + h('div.page-container__subtitle', subtitle), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -438,6 +493,14 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + if (txData.lastGasPrice) { + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit + } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index b7f7c5ab4..0b826e909 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -28,6 +28,7 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { + setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)), retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), } } @@ -39,6 +40,7 @@ function TxListItem () { this.state = { total: null, fiatTotal: null, + isTokenTx: null, } } @@ -47,12 +49,13 @@ TxListItem.prototype.componentDidMount = async function () { const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { name: txDataName } = decodedData || {} + const isTokenTx = txDataName === 'transfer' - const { total, fiatTotal } = txDataName === 'transfer' + const { total, fiatTotal } = isTokenTx ? await this.getSendTokenTotal() : this.getSendEtherTotal() - this.setState({ total, fiatTotal }) + this.setState({ total, fiatTotal, isTokenTx }) } TxListItem.prototype.getAddressText = function () { @@ -193,6 +196,10 @@ TxListItem.prototype.showRetryButton = function () { return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 } +TxListItem.prototype.setSelectedToken = function (tokenAddress) { + this.props.setSelectedToken(tokenAddress) +} + TxListItem.prototype.resubmit = function () { const { transactionId } = this.props this.props.retryTransaction(transactionId) @@ -207,8 +214,9 @@ TxListItem.prototype.render = function () { dateString, address, className, + txParams, } = this.props - const { total, fiatTotal } = this.state + const { total, fiatTotal, isTokenTx } = this.state const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { @@ -280,6 +288,9 @@ TxListItem.prototype.render = function () { h('span.tx-list-item-retry-link', { onClick: (event) => { event.stopPropagation() + if (isTokenTx) { + this.setSelectedToken(txParams.to) + } this.resubmit() }, }, 'Increase the gas price on your transaction'), -- cgit v1.2.3 From c37684d7bde00adcb4b2e43db16be91978e2ef12 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:49:10 -0230 Subject: Remove unnecessary addition of nonce to state. --- ui/app/components/pending-tx/confirm-send-ether.js | 3 --- ui/app/reducers/metamask.js | 2 -- ui/app/send-v2.js | 5 ----- 3 files changed, 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 8fe58482b..f3f7e86c5 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -76,8 +76,6 @@ function mapDispatchToProps (dispatch) { fromDenomination: 'WEI', toDenomination: 'GWEI', })) - - nonce = txParams.nonce } dispatch(actions.updateSend({ @@ -86,7 +84,6 @@ function mapDispatchToProps (dispatch) { editingTransactionId: id, gasTotal: sendGasTotal, forceGasMin, - nonce, })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index b27e7140a..2c93172cc 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -39,7 +39,6 @@ function reduceMetamask (state, action) { maxModeOn: false, editingTransactionId: null, forceGasMin: null, - nonce: null, }, coinOptions: {}, useBlockie: false, @@ -299,7 +298,6 @@ function reduceMetamask (state, action) { errors: {}, editingTransactionId: null, forceGasMin: null, - nonce: null, }, }) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 697dfc517..fc1df1f51 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -548,7 +548,6 @@ SendTransactionScreen.prototype.getEditedTx = function () { selectedToken, editingTransactionId, unapprovedTxs, - nonce, } = this.props const editingTx = { @@ -560,10 +559,6 @@ SendTransactionScreen.prototype.getEditedTx = function () { }, } - if (nonce) { - editingTx.txParams.nonce = ethUtil.addHexPrefix(nonce) - } - if (selectedToken) { const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), -- cgit v1.2.3 From cc267d6c818c83b0384b569733d05efef384ac3e Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:56:45 -0230 Subject: Fix more lint errors. --- ui/app/components/pending-tx/confirm-send-ether.js | 1 - ui/app/components/pending-tx/confirm-send-token.js | 9 +-------- ui/app/components/tx-list-item.js | 3 +-- 3 files changed, 2 insertions(+), 11 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index f3f7e86c5..4666e047d 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -66,7 +66,6 @@ function mapDispatchToProps (dispatch) { const { gas: txGasLimit, gasPrice: txGasPrice } = txParams let forceGasMin - let nonce if (lastGasPrice) { const stripped = ethUtil.stripHexPrefix(lastGasPrice) forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 4ce6a7bc3..476c1d259 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -102,7 +102,6 @@ function mapDispatchToProps (dispatch, ownProps) { }) let forceGasMin - let nonce if (lastGasPrice) { const stripped = ethUtil.stripHexPrefix(lastGasPrice) forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { @@ -278,19 +277,13 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { ConfirmSendToken.prototype.renderGasFee = function () { const { - token: { symbol }, currentCurrency: convertedCurrency, conversionRate, send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, showCustomizeGasModal, } = this.props const txMeta = this.gatherTxMeta() - const { - fiat: fiatGas, - token: tokenGas, - eth: ethGas, - gasFeeInHex - } = this.getGasFee() + const { gasFeeInHex } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 0b826e909..4c2b77af9 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -55,7 +55,7 @@ TxListItem.prototype.componentDidMount = async function () { ? await this.getSendTokenTotal() : this.getSendEtherTotal() - this.setState({ total, fiatTotal, isTokenTx }) + this.setState({ total, fiatTotal, isTokenTx }) } TxListItem.prototype.getAddressText = function () { @@ -180,7 +180,6 @@ TxListItem.prototype.getSendTokenTotal = async function () { TxListItem.prototype.showRetryButton = function () { const { - transactionStatus, transactionSubmittedTime, selectedAddressTxList, transactionId, -- cgit v1.2.3 From edd5c38492c76a698909cc80051584348615e795 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 12:34:13 -0230 Subject: Fix translations whose substitutions params were not in arrays. --- ui/app/accounts/new-account/create-form.js | 2 +- ui/app/components/shapeshift-form.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index eb34f7a2f..8ef842a2a 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -14,7 +14,7 @@ class NewAccountCreateForm extends Component { this.state = { newAccountName: '', - defaultAccountName: t('newAccountNumberName', newAccountNumber), + defaultAccountName: t('newAccountNumberName', [newAccountNumber]), } } diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index f75d6176e..3f8c17932 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -143,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - t('depositCoin', depositCoin.toUpperCase()), + t('depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), -- cgit v1.2.3 From fae6a44baca2bb51186af1eb1c8020c34afb7361 Mon Sep 17 00:00:00 2001 From: Dan Finlay <542863+danfinlay@users.noreply.github.com> Date: Wed, 14 Mar 2018 09:34:25 -0700 Subject: Grammar correction --- ui/app/keychains/hd/restore-vault.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 685094854..cb4088f61 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -147,7 +147,7 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // true if the string has more than a space between words. if (seed.split(' ').length > 1) { - this.warning = 'there can only a space between words' + this.warning = 'there can only be a space between words' this.props.dispatch(actions.displayWarning(this.warning)) return } -- cgit v1.2.3 From fb838da7340d460650750cb8ea5fa3fb6fe319de Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 17:07:09 -0230 Subject: Revert 'Set txMeta.time to reflect time of tx approval.' --- ui/app/components/pending-tx/confirm-send-ether.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 6624a378d..9b9a4e4ea 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -454,7 +454,7 @@ ConfirmSendEther.prototype.render = function () { ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() - const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() }) + const txMeta = this.gatherTxMeta() const valid = this.checkValidity() this.setState({ valid, submitting: true }) @@ -489,7 +489,7 @@ ConfirmSendEther.prototype.getFormEl = function () { } // After a customizable state value has been updated, -ConfirmSendEther.prototype.gatherTxMeta = function (opts) { +ConfirmSendEther.prototype.gatherTxMeta = function () { const props = this.props const state = this.state const txData = clone(state.txData) || clone(props.txData) @@ -503,7 +503,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function (opts) { } // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) - return Object.assign(txData, opts) + return txData } ConfirmSendEther.prototype.verifyGasParams = function () { -- cgit v1.2.3 From a4c6a5e92e09b70db2e9ab92a8123176de127910 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 17:10:59 -0230 Subject: Ensure changes from customize gas modal opened from confirm screen are captured for non-tx transactions. --- ui/app/components/pending-tx/confirm-send-ether.js | 10 ++++------ ui/app/components/pending-tx/confirm-send-token.js | 10 ++++------ 2 files changed, 8 insertions(+), 12 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 9b9a4e4ea..928149ccd 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -494,13 +494,11 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (txData.lastGasPrice) { - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams - txData.txParams.gasPrice = sendGasPrice || txGasPrice - txData.txParams.gas = sendGasLimit || txGasLimit - } + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index ac773b1d2..fe323ffd3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -487,13 +487,11 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (txData.lastGasPrice) { - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams - txData.txParams.gasPrice = sendGasPrice || txGasPrice - txData.txParams.gas = sendGasLimit || txGasLimit - } + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData -- cgit v1.2.3 From 66422cd083e86582b44d19664e6c6fc95bdb8ce5 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 18:50:18 -0230 Subject: Force gas min has correct precision and is set when editing gas if max. --- ui/app/components/customize-gas-modal/index.js | 7 ++++++- ui/app/components/pending-tx/confirm-send-ether.js | 4 +--- ui/app/components/pending-tx/confirm-send-token.js | 4 +--- 3 files changed, 8 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 291447bb4..d8384c19d 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -233,6 +233,7 @@ CustomizeGasModal.prototype.render = function () { convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}` + let newGasPrice = gasPrice if (forceGasMin) { const convertedMinPrice = conversionUtil(forceGasMin, { fromNumericBase: 'hex', @@ -242,6 +243,10 @@ CustomizeGasModal.prototype.render = function () { { value: convertedMinPrice, fromNumericBase: 'dec' }, { value: convertedGasPrice, fromNumericBase: 'dec' } ) + newGasPrice = conversionMax( + { value: gasPrice, fromNumericBase: 'hex' }, + { value: forceGasMin, fromNumericBase: 'hex' } + ) } const convertedGasLimit = conversionUtil(gasLimit, { @@ -302,7 +307,7 @@ CustomizeGasModal.prototype.render = function () { }, [t('cancel')]), h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { - onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), + onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), }, [t('save')]), ]), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 928149ccd..dca39f0a5 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -68,13 +68,11 @@ function mapDispatchToProps (dispatch) { let forceGasMin if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, multiplierBase: 10, toNumericBase: 'hex', fromDenomination: 'WEI', - toDenomination: 'GWEI', })) } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index fe323ffd3..6035dd801 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -104,13 +104,11 @@ function mapDispatchToProps (dispatch, ownProps) { let forceGasMin if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, multiplierBase: 10, toNumericBase: 'hex', fromDenomination: 'WEI', - toDenomination: 'GWEI', })) } -- cgit v1.2.3 From b0122be3c960b68620c5769ca969db60e4a45351 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 19:03:14 -0230 Subject: Set retry gasPrice to forceGasMin on confirm screen in cases where gas is not edited. --- ui/app/components/pending-tx/confirm-send-ether.js | 19 +++++++++++++++++-- ui/app/components/pending-tx/confirm-send-token.js | 19 +++++++++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index dca39f0a5..a4763eab7 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -493,9 +493,24 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const txData = clone(state.txData) || clone(props.txData) const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { + lastGasPrice, + txParams: { + gasPrice: txGasPrice, + gas: txGasLimit, + }, + } = txData + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + })) + } - txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 6035dd801..f1142b142 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -486,9 +486,24 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const txData = clone(state.txData) || clone(props.txData) const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { + lastGasPrice, + txParams: { + gasPrice: txGasPrice, + gas: txGasLimit, + }, + } = txData + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + })) + } - txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) -- cgit v1.2.3 From 66193c823cdbb9474cbc3ed9e1c4ab7a28b9b230 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 15 Mar 2018 09:20:22 -0700 Subject: Update Deposit Eth icon (#3569) --- ui/app/components/modals/deposit-ether-modal.js | 10 ++++++---- ui/app/css/itcss/components/modal.scss | 10 ---------- 2 files changed, 6 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 26ff3ea03..23e8666af 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -128,13 +128,15 @@ DepositEtherModal.prototype.render = function () { }), ]), - + h('.page-container__content', {}, [ - + h('div.deposit-ether-modal__buy-rows', [ this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), + logo: h('img.deposit-ether-modal__logo', { + src: '../../../images/deposit-eth.svg', + }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, buttonLabel: t('viewAccount'), @@ -164,7 +166,7 @@ DepositEtherModal.prototype.render = function () { onButtonClick: () => toCoinbase(address), hide: isTestNetwork || buyingWithShapeshift, }), - + this.renderRow({ logo: h('div.deposit-ether-modal__logo', { style: { diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 6c4106f8b..a8d5e8dc2 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -725,16 +725,6 @@ height: 60px; } - &__eth-logo { - border-radius: 50%; - height: 68px; - width: 68px; - border: 3px solid $tundora; - z-index: 25; - padding: 4px; - background-color: #fff; - } - &__right { display: flex; } -- cgit v1.2.3 From 7fb27cf0c7a5c8eb2aa492ced603873996537c81 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 16 Mar 2018 08:50:21 -0700 Subject: Update margins for consistency in first time flow (#3588) --- ui/app/app.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 9708a2485..954299a6a 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -329,12 +329,14 @@ App.prototype.renderAppBar = function () { ]), ]), - !isInitialized && !isPopup && betaUI && h('h2', { - className: classnames({ - 'alpha-warning': welcomeScreenSeen, - 'alpha-warning-welcome-screen': !welcomeScreenSeen, - }), - }, 'Please be aware that this version is still under development'), + !isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [ + h('h2', { + className: classnames({ + 'alpha-warning': welcomeScreenSeen, + 'alpha-warning-welcome-screen': !welcomeScreenSeen, + }), + }, 'Please be aware that this version is still under development'), + ]), ]) ) -- cgit v1.2.3 From a348b60735f945e3a593256bbd016dc6deee8e36 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 16 Mar 2018 13:02:07 -0230 Subject: Currency input defaults to empty string --- ui/app/components/currency-input.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js index 6f7862e51..940238fa5 100644 --- a/ui/app/components/currency-input.js +++ b/ui/app/components/currency-input.js @@ -8,8 +8,12 @@ inherits(CurrencyInput, Component) function CurrencyInput (props) { Component.call(this) + const sanitizedValue = sanitizeValue(props.value) + this.state = { - value: sanitizeValue(props.value), + value: sanitizedValue, + emptyState: false, + focused: false, } } @@ -58,9 +62,11 @@ CurrencyInput.prototype.handleChange = function (newValue) { if (value === '0' && newValue[newValueLastIndex] === '0') { parsedValue = parsedValue.slice(0, newValueLastIndex) } - const sanitizedValue = sanitizeValue(parsedValue) - this.setState({ value: sanitizedValue }) + this.setState({ + value: sanitizedValue, + emptyState: newValue === '' && sanitizedValue === '0', + }) onInputChange(sanitizedValue) } @@ -86,17 +92,19 @@ CurrencyInput.prototype.render = function () { readOnly, inputRef, } = this.props + const { emptyState, focused } = this.state const inputSizeMultiplier = readOnly ? 1 : 1.2 const valueToRender = this.getValueToRender() - return h('input', { className, - value: valueToRender, - placeholder, + value: emptyState ? '' : valueToRender, + placeholder: focused ? '' : placeholder, size: valueToRender.length * inputSizeMultiplier, readOnly, + onFocus: () => this.setState({ focused: true, emptyState: valueToRender === '0' }), + onBlur: () => this.setState({ focused: false, emptyState: false }), onChange: e => this.handleChange(e.target.value), ref: inputRef, }) -- cgit v1.2.3 From 6f749e5576cb981a469d0cf969b15901bcc05cfa Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 16 Mar 2018 13:09:49 -0700 Subject: Update Confirm Contract screen (#3597) --- ui/app/components/modals/deposit-ether-modal.js | 2 +- .../pending-tx/confirm-deploy-contract.js | 587 +++++++++++---------- ui/app/components/sender-to-recipient.js | 45 ++ ui/app/css/itcss/components/buttons.scss | 12 + ui/app/css/itcss/components/confirm.scss | 32 +- ui/app/css/itcss/components/index.scss | 1 + .../css/itcss/components/sender-to-recipient.scss | 58 ++ ui/app/css/itcss/generic/index.scss | 17 +- 8 files changed, 432 insertions(+), 322 deletions(-) create mode 100644 ui/app/components/sender-to-recipient.js create mode 100644 ui/app/css/itcss/components/sender-to-recipient.scss (limited to 'ui/app') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 23e8666af..b642513d7 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -109,7 +109,7 @@ DepositEtherModal.prototype.render = function () { const isTestNetwork = ['3', '4', '42'].find(n => n === network) const networkName = networkNames[network] - return h('div.page-container.page-container--full-width', {}, [ + return h('div.page-container.page-container--full-width.page-container--full-height', {}, [ h('div.page-container__header', [ diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 49fbe6387..e7c4c536b 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -1,349 +1,350 @@ -const Component = require('react').Component +const { Component } = require('react') const { connect } = require('react-redux') const h = require('react-hyperscript') -const inherits = require('util').inherits +const PropTypes = require('prop-types') const actions = require('../../actions') const clone = require('clone') -const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil } = require('../../conversion-util') const t = require('../../../i18n') +const SenderToRecipient = require('../sender-to-recipient') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +class ConfirmDeployContract extends Component { + constructor (props) { + super(props) -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) - -function mapStateToProps (state) { - const { - conversionRate, - identities, - currentCurrency, - } = state.metamask - const accounts = state.metamask.accounts - const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] - return { - currentCurrency, - conversionRate, - identities, - selectedAddress, + this.state = { + valid: false, + submitting: false, + } } -} -function mapDispatchToProps (dispatch) { - return { - backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), - cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + onSubmit (event) { + event.preventDefault() + const txMeta = this.gatherTxMeta() + const valid = this.checkValidity() + this.setState({ valid, submitting: true }) + + if (valid && this.verifyGasParams()) { + this.props.sendTransaction(txMeta, event) + } else { + this.props.displayWarning('invalidGasParams') + this.setState({ submitting: false }) + } } -} - -inherits(ConfirmDeployContract, Component) -function ConfirmDeployContract () { - Component.call(this) - this.state = {} - this.onSubmit = this.onSubmit.bind(this) -} + cancel (event, txMeta) { + event.preventDefault() + this.props.cancelTransaction(txMeta) + } -ConfirmDeployContract.prototype.onSubmit = function (event) { - event.preventDefault() - const txMeta = this.gatherTxMeta() - const valid = this.checkValidity() - this.setState({ valid, submitting: true }) - - if (valid && this.verifyGasParams()) { - this.props.sendTransaction(txMeta, event) - } else { - this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) - this.setState({ submitting: false }) + checkValidity () { + const form = this.getFormEl() + const valid = form.checkValidity() + return valid } -} -ConfirmDeployContract.prototype.cancel = function (event, txMeta) { - event.preventDefault() - this.props.cancelTransaction(txMeta) -} + getFormEl () { + const form = document.querySelector('form#pending-tx-form') + // Stub out form for unit tests: + if (!form) { + return { checkValidity () { return true } } + } + return form + } -ConfirmDeployContract.prototype.checkValidity = function () { - const form = this.getFormEl() - const valid = form.checkValidity() - return valid -} + // After a customizable state value has been updated, + gatherTxMeta () { + const props = this.props + const state = this.state + const txData = clone(state.txData) || clone(props.txData) -ConfirmDeployContract.prototype.getFormEl = function () { - const form = document.querySelector('form#pending-tx-form') - // Stub out form for unit tests: - if (!form) { - return { checkValidity () { return true } } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) + return txData } - return form -} - -// After a customizable state value has been updated, -ConfirmDeployContract.prototype.gatherTxMeta = function () { - const props = this.props - const state = this.state - const txData = clone(state.txData) || clone(props.txData) - // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) - return txData -} + verifyGasParams () { + // We call this in case the gas has not been modified at all + if (!this.state) { return true } + return ( + this._notZeroOrEmptyString(this.state.gas) && + this._notZeroOrEmptyString(this.state.gasPrice) + ) + } -ConfirmDeployContract.prototype.verifyGasParams = function () { - // We call this in case the gas has not been modified at all - if (!this.state) { return true } - return ( - this._notZeroOrEmptyString(this.state.gas) && - this._notZeroOrEmptyString(this.state.gasPrice) - ) -} + _notZeroOrEmptyString (obj) { + return obj !== '' && obj !== '0x0' + } -ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) { - return obj !== '' && obj !== '0x0' -} + bnMultiplyByFraction (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) + } -ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { - const numBN = new BN(numerator) - const denomBN = new BN(denominator) - return targetBN.mul(numBN).div(denomBN) -} + getData () { + const { identities } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + return { + from: { + address: txParams.from, + name: identities[txParams.from].name, + }, + memo: txParams.memo || '', + } + } -ConfirmDeployContract.prototype.getData = function () { - const { identities } = this.props - const txMeta = this.gatherTxMeta() - const txParams = txMeta.txParams || {} + getAmount () { + const { conversionRate, currentCurrency } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + const FIAT = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: currentCurrency, + numberOfDecimals: 2, + fromDenomination: 'WEI', + conversionRate, + }) + const ETH = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'ETH', + fromDenomination: 'WEI', + conversionRate, + numberOfDecimals: 6, + }) + + return { + fiat: Number(FIAT), + token: Number(ETH), + } - return { - from: { - address: txParams.from, - name: identities[txParams.from].name, - }, - memo: txParams.memo || '', } -} - -ConfirmDeployContract.prototype.getAmount = function () { - const { conversionRate, currentCurrency } = this.props - const txMeta = this.gatherTxMeta() - const txParams = txMeta.txParams || {} - - const FIAT = conversionUtil(txParams.value, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: currentCurrency, - numberOfDecimals: 2, - fromDenomination: 'WEI', - conversionRate, - }) - const ETH = conversionUtil(txParams.value, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromCurrency: 'ETH', - toCurrency: 'ETH', - fromDenomination: 'WEI', - conversionRate, - numberOfDecimals: 6, - }) - return { - fiat: Number(FIAT), - token: Number(ETH), + getGasFee () { + const { conversionRate, currentCurrency } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + // Gas + const gas = txParams.gas + const gasBn = hexToBn(gas) + + // Gas Price + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX + const gasPriceBn = hexToBn(gasPrice) + + const txFeeBn = gasBn.mul(gasPriceBn) + + const FIAT = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: currentCurrency, + numberOfDecimals: 2, + conversionRate, + }) + const ETH = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'ETH', + numberOfDecimals: 6, + conversionRate, + }) + + return { + fiat: Number(FIAT), + eth: Number(ETH), + } } -} + renderGasFee () { + const { currentCurrency } = this.props + const { fiat: fiatGas, eth: ethGas } = this.getGasFee() -ConfirmDeployContract.prototype.getGasFee = function () { - const { conversionRate, currentCurrency } = this.props - const txMeta = this.gatherTxMeta() - const txParams = txMeta.txParams || {} + return ( + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), - // Gas - const gas = txParams.gas - const gasBn = hexToBn(gas) + h( + 'div.confirm-screen-row-detail', + `${ethGas} ETH` + ), + ]), + ]) + ) + } - // Gas Price - const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX - const gasPriceBn = hexToBn(gasPrice) + renderHeroAmount () { + const { currentCurrency } = this.props + const { fiat: fiatAmount } = this.getAmount() + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + const { memo = '' } = txParams + + return ( + h('div.confirm-send-token__hero-amount-wrapper', [ + h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', memo), + ]), + ]) + ) + } - const txFeeBn = gasBn.mul(gasPriceBn) + renderTotalPlusGas () { + const { currentCurrency } = this.props + const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() + const { fiat: fiatGas, eth: ethGas } = this.getGasFee() - const FIAT = conversionUtil(txFeeBn, { - fromNumericBase: 'BN', - toNumericBase: 'dec', - fromDenomination: 'WEI', - fromCurrency: 'ETH', - toCurrency: currentCurrency, - numberOfDecimals: 2, - conversionRate, - }) - const ETH = conversionUtil(txFeeBn, { - fromNumericBase: 'BN', - toNumericBase: 'dec', - fromDenomination: 'WEI', - fromCurrency: 'ETH', - toCurrency: 'ETH', - numberOfDecimals: 6, - conversionRate, - }) + return ( + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + ]), - return { - fiat: Number(FIAT), - eth: Number(ETH), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), + ]), + ]) + ) } -} - -ConfirmDeployContract.prototype.renderGasFee = function () { - const { currentCurrency } = this.props - const { fiat: fiatGas, eth: ethGas } = this.getGasFee() - - return ( - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), - - h( - 'div.confirm-screen-row-detail', - `${ethGas} ETH` - ), - ]), - ]) - ) -} -ConfirmDeployContract.prototype.renderHeroAmount = function () { - const { currentCurrency } = this.props - const { fiat: fiatAmount } = this.getAmount() - const txMeta = this.gatherTxMeta() - const txParams = txMeta.txParams || {} - const { memo = '' } = txParams - - return ( - h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), - h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()), - h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', memo), - ]), - ]) - ) -} + render () { + const { backToAccountDetail, selectedAddress } = this.props + const txMeta = this.gatherTxMeta() -ConfirmDeployContract.prototype.renderTotalPlusGas = function () { - const { currentCurrency } = this.props - const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() - const { fiat: fiatGas, eth: ethGas } = this.getGasFee() - - return ( - h('section.flex-row.flex-center.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), - ]), - - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`), - h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), - ]), - ]) - ) -} + const { + from: { + address: fromAddress, + name: fromName, + }, + } = this.getData() -ConfirmDeployContract.prototype.render = function () { - const { backToAccountDetail, selectedAddress } = this.props - const txMeta = this.gatherTxMeta() + this.inputs = [] - const { - from: { - address: fromAddress, - name: fromName, - }, - } = this.getData() - - this.inputs = [] - - return ( - h('div.flex-column.flex-grow.confirm-screen-container', { - style: { minWidth: '355px' }, - }, [ - // Main Send token Card - h('div.confirm-screen-wrapper.flex-column.flex-grow', [ - h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button.allcaps', { + return ( + h('.page-container', [ + h('.page-container__header', [ + h('.page-container__back-button', { onClick: () => backToAccountDetail(selectedAddress), }, t('back')), - h('div.confirm-screen-title', t('confirmContract')), - h('div.confirm-screen-header-tip'), - ]), - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h('i.fa.fa-file-text-o'), - h('span.confirm-screen-account-name', t('newContract')), - h('span.confirm-screen-account-number', ' '), - ]), + h('.page-container__title', t('confirmContract')), + h('.page-container__subtitle', t('pleaseReviewTransaction')), ]), + // Main Send token Card + h('.page-container__content', [ + + h(SenderToRecipient, { + senderName: fromName, + senderAddress: fromAddress, + }), + + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're deploying a new contract.`, + // ]), + + this.renderHeroAmount(), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), + ]), - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're deploying a new contract.`, - // ]), - - this.renderHeroAmount(), - - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', t('newContract')), + ]), ]), + + this.renderGasFee(), + + this.renderTotalPlusGas(), + ]), + ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', t('newContract')), - ]), + h('form#pending-tx-form', { + onClick: event => this.onSubmit(event), + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: event => this.cancel(event, txMeta), + }, t('cancel')), + + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', { + onClick: event => this.onSubmit(event), + }, t('confirm')), ]), + ]), + ]) + ) + } +} - this.renderGasFee(), +ConfirmDeployContract.propTypes = { + sendTransaction: PropTypes.func, + cancelTransaction: PropTypes.func, + backToAccountDetail: PropTypes.func, + displayWarning: PropTypes.func, + identities: PropTypes.object, + conversionRate: PropTypes.number, + currentCurrency: PropTypes.string, + selectedAddress: PropTypes.string, +} - this.renderTotalPlusGas(), +const mapStateToProps = state => { + const { + conversionRate, + identities, + currentCurrency, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + return { + currentCurrency, + conversionRate, + identities, + selectedAddress, + } +} - ]), - ]), - - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { - onClick: (event) => this.cancel(event, txMeta), - }, t('cancel')), - - // Accept Button - h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), - - ]), - ]) - ) +const mapDispatchToProps = dispatch => { + return { + backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + displayWarning: warning => actions.displayWarning(t(warning)), + } } + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js new file mode 100644 index 000000000..25b9c7d6b --- /dev/null +++ b/ui/app/components/sender-to-recipient.js @@ -0,0 +1,45 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const t = require('../../i18n') +const Identicon = require('./identicon') + +class SenderToRecipient extends Component { + render () { + const { senderName, senderAddress } = this.props + + return ( + h('.sender-to-recipient__container', [ + h('.sender-to-recipient__sender', [ + h('.sender-to-recipient__sender-icon', [ + h(Identicon, { + address: senderAddress, + diameter: 20, + }), + ]), + h('.sender-to-recipient__name.sender-to-recipient__sender-name', senderName), + ]), + h('.sender-to-recipient__arrow-container', [ + h('.sender-to-recipient__arrow-circle', [ + h('img', { + height: 15, + width: 15, + src: '/images/arrow-right.svg', + }), + ]), + ]), + h('.sender-to-recipient__recipient', [ + h('i.fa.fa-file-text-o'), + h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')), + ]), + ]) + ) + } +} + +SenderToRecipient.propTypes = { + senderName: PropTypes.string, + senderAddress: PropTypes.string, +} + +module.exports = SenderToRecipient diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 1450b71cc..8df8829f2 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -45,6 +45,18 @@ } } +.btn-confirm { + background-color: $caribbean-green; // TODO: reusable color in colors.css + text-align: center; + padding: .8rem 1rem; + color: $white; + border: 2px solid $caribbean-green; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; +} + // No longer used in flat design, remove when modal buttons done // div.wallet-btn { // border: 1px solid rgb(91, 93, 103); diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 878495290..1977b49ae 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -202,7 +202,7 @@ } .confirm-screen-label { - font-size: 18px; + font-size: 16px; line-height: 40px; color: $scorpion; text-align: left; @@ -229,7 +229,6 @@ section .confirm-screen-account-number, .confirm-screen-row { display: flex; flex-flow: row nowrap; - border-bottom: 1px solid $alto; width: 100%; align-items: center; padding: 12px; @@ -237,6 +236,10 @@ section .confirm-screen-account-number, font-size: 16px; line-height: 22px; font-weight: 300; + + &:not(:last-of-type) { + border-bottom: 1px solid $alto; + } } .confirm-screen-row-detail { @@ -247,12 +250,9 @@ section .confirm-screen-account-number, .confirm-screen-total-box { background-color: $wild-sand; - padding: 20px; - padding-left: 35px; - border-bottom: 1px solid $alto; .confirm-screen-label { - line-height: 18px; + line-height: 21px; } .confirm-screen-row-detail { @@ -261,7 +261,7 @@ section .confirm-screen-account-number, &__subtitle { font-size: 12px; - line-height: 22px; + line-height: 16px; } .confirm-screen-row-info { @@ -304,21 +304,3 @@ section .confirm-screen-account-number, font-weight: 300; margin: 0 5px; } - -#pending-tx-form { - flex: 1 0 auto; - position: relative; - display: flex; - flex-flow: row nowrap; - background-color: $white; - padding: 12px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - width: 100%; - - @media screen and (max-width: $break-small) { - border-top: 1px solid $alto; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index f107b7aca..ffd43ecbf 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -58,3 +58,4 @@ @import './welcome-screen.scss'; +@import './sender-to-recipient.scss'; diff --git a/ui/app/css/itcss/components/sender-to-recipient.scss b/ui/app/css/itcss/components/sender-to-recipient.scss new file mode 100644 index 000000000..f16013cdf --- /dev/null +++ b/ui/app/css/itcss/components/sender-to-recipient.scss @@ -0,0 +1,58 @@ +.sender-to-recipient { + &__container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + border-bottom: 1px solid $geyser; + position: relative; + } + + &__sender, + &__recipient { + display: flex; + flex-direction: row; + align-items: center; + flex: 1; + padding: 10px 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__sender { + padding-right: 30px; + } + + &__recipient { + border-left: 1px solid $geyser; + padding-left: 30px; + } + + &__arrow-container { + position: absolute; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + &__arrow-circle { + background: $white; + padding: 5px; + border: 1px solid $geyser; + border-radius: 20px; + height: 30px; + width: 30px; + display: flex; + justify-content: center; + align-items: center; + } + + &__name { + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 0077cb661..1fbd9896f 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -82,7 +82,6 @@ input.large-input { display: flex; flex-flow: column; border-radius: 7px; - height: 100%; &__header { display: flex; @@ -116,7 +115,8 @@ input.large-input { flex: 0 0 auto; .btn-clear, - .btn-cancel { + .btn-cancel, + .btn-confirm { font-size: 1rem; } } @@ -134,9 +134,16 @@ input.large-input { } } + &__back-button { + color: #2f9ae0; + font-size: 1rem; + cursor: pointer; + padding-bottom: 10px; + font-weight: 400; + } + &__title { color: $black; - font-family: Roboto; font-size: 2rem; font-weight: 500; line-height: 2rem; @@ -188,6 +195,10 @@ input.large-input { width: initial; } + &--full-height { + height: 100%; + } + &__content { height: 100%; overflow-y: auto; -- cgit v1.2.3 From 4512243290fc08f1202360ab3f5f0b2b21bb0393 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 16 Mar 2018 16:39:00 -0700 Subject: Fix styling on confirm-send-ether and confirm-send-token (#3600) --- .../pending-tx/confirm-deploy-contract.js | 2 +- ui/app/components/pending-tx/confirm-send-ether.js | 320 +++++++++++---------- ui/app/components/pending-tx/confirm-send-token.js | 134 ++++----- 3 files changed, 231 insertions(+), 225 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index e7c4c536b..4810bb515 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -293,7 +293,7 @@ class ConfirmDeployContract extends Component { ]), h('form#pending-tx-form', { - onClick: event => this.onSubmit(event), + onSubmit: event => this.onSubmit(event), }, [ h('.page-container__footer', [ // Cancel Button diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 4d4732bdb..908df3671 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -224,181 +224,185 @@ ConfirmSendEther.prototype.render = function () { h('div.page-container__title', 'Confirm'), h('div.page-container__subtitle', `Please review your transaction.`), ]), - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: txParams.to, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', toName), - // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + h('.page-container__content', [ + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', fromName), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: txParams.to, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', toName), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + ]), ]), - ]), - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - // ]), - - h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), - h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), - h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), + + h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), + ]), - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), ]), - ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', toName), - h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + ]), ]), - ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), - h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), + h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), + ]), ]), - ]), - h('section.flex-row.flex-center.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), - ]), + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), + ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), - h('div.confirm-screen-row-detail', `${totalInETH} ETH`), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-detail', `${totalInETH} ETH`), + ]), ]), ]), + + // These are latest errors handling from master + // Leaving as comments as reference when we start implementing error handling + // h('style', ` + // .conf-buttons button { + // margin-left: 10px; + // text-transform: uppercase; + // } + // `), + + // txMeta.simulationFails ? + // h('.error', { + // style: { + // marginLeft: 50, + // fontSize: '0.9em', + // }, + // }, 'Transaction Error. Exception thrown in contract code.') + // : null, + + // !isValidAddress ? + // h('.error', { + // style: { + // marginLeft: 50, + // fontSize: '0.9em', + // }, + // }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') + // : null, + + // insufficientBalance ? + // h('span.error', { + // style: { + // marginLeft: 50, + // fontSize: '0.9em', + // }, + // }, 'Insufficient balance for transaction') + // : null, + + // // send + cancel + // h('.flex-row.flex-space-around.conf-buttons', { + // style: { + // display: 'flex', + // justifyContent: 'flex-end', + // margin: '14px 25px', + // }, + // }, [ + // h('button', { + // onClick: (event) => { + // this.resetGasFields() + // event.preventDefault() + // }, + // }, 'Reset'), + + // // Accept Button or Buy Button + // insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : + // h('input.confirm.btn-green', { + // type: 'submit', + // value: 'SUBMIT', + // style: { marginLeft: '10px' }, + // disabled: buyDisabled, + // }), + + // h('button.cancel.btn-red', { + // onClick: props.cancelTransaction, + // }, 'Reject'), + // ]), + // showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { + // style: { + // display: 'flex', + // justifyContent: 'flex-end', + // margin: '14px 25px', + // }, + // }, [ + // h('button.cancel.btn-red', { + // onClick: props.cancelAllTransactions, + // }, 'Reject All'), + // ]) : null, + // ]), + // ]) + // ) + // } ]), -// These are latest errors handling from master -// Leaving as comments as reference when we start implementing error handling -// h('style', ` -// .conf-buttons button { -// margin-left: 10px; -// text-transform: uppercase; -// } -// `), - -// txMeta.simulationFails ? -// h('.error', { -// style: { -// marginLeft: 50, -// fontSize: '0.9em', -// }, -// }, 'Transaction Error. Exception thrown in contract code.') -// : null, - -// !isValidAddress ? -// h('.error', { -// style: { -// marginLeft: 50, -// fontSize: '0.9em', -// }, -// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') -// : null, - -// insufficientBalance ? -// h('span.error', { -// style: { -// marginLeft: 50, -// fontSize: '0.9em', -// }, -// }, 'Insufficient balance for transaction') -// : null, - -// // send + cancel -// h('.flex-row.flex-space-around.conf-buttons', { -// style: { -// display: 'flex', -// justifyContent: 'flex-end', -// margin: '14px 25px', -// }, -// }, [ -// h('button', { -// onClick: (event) => { -// this.resetGasFields() -// event.preventDefault() -// }, -// }, 'Reset'), - -// // Accept Button or Buy Button -// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : -// h('input.confirm.btn-green', { -// type: 'submit', -// value: 'SUBMIT', -// style: { marginLeft: '10px' }, -// disabled: buyDisabled, -// }), - -// h('button.cancel.btn-red', { -// onClick: props.cancelTransaction, -// }, 'Reject'), -// ]), -// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { -// style: { -// display: 'flex', -// justifyContent: 'flex-end', -// margin: '14px 25px', -// }, -// }, [ -// h('button.cancel.btn-red', { -// onClick: props.cancelAllTransactions, -// }, 'Reject All'), -// ]) : null, -// ]), -// ]) -// ) -// } - ]), + h('form#pending-tx-form', { + onSubmit: this.onSubmit, + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: (event) => { + clearSend() + this.cancel(event, txMeta) + }, + }, t('cancel')), - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { - onClick: (event) => { - clearSend() - this.cancel(event, txMeta) - }, - }, t('cancel')), - - // Accept Button - h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', [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 69afa8094..0a4182014 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -265,7 +265,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { return fiatAmount && fiatGas ? ( - h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), @@ -278,7 +278,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]) ) : ( - h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ h('div.confirm-screen-section-column', [ h('span.confirm-screen-label', [ t('total') + ' ' ]), h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), @@ -319,80 +319,82 @@ ConfirmSendToken.prototype.render = function () { h('div.page-container__title', t('confirm')), h('div.page-container__subtitle', t('pleaseReviewTransaction')), ]), - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: toAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', toName), - // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + h('.page-container__content', [ + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', fromName), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: toAddress, + diameter: 60, + }, + ), + h('span.confirm-screen-account-name', toName), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + ]), ]), - ]), - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - // ]), - - this.renderHeroAmount(), - - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), + + this.renderHeroAmount(), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), ]), - ]), - toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', toName), - h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + ]), ]), - ]), - this.renderGasFee(), + this.renderGasFee(), - this.renderTotalPlusGas(), + this.renderTotalPlusGas(), - ]), - ]), - - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - // Cancel Button - h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', { - onClick: (event) => this.cancel(event, txMeta), - }, t('cancel')), + ]), - // Accept Button - h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]), + ]), + h('form#pending-tx-form', { + onSubmit: this.onSubmit, + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: (event) => this.cancel(event, txMeta), + }, t('cancel')), + + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), + ]), + ]), ]), - - ]) ) } -- cgit v1.2.3 From a1db40047c2a6fdbb8d2de2abacd0484e12e128d Mon Sep 17 00:00:00 2001 From: anticlimactic <9568756+anticlimactic@users.noreply.github.com> Date: Tue, 20 Mar 2018 02:11:24 +1100 Subject: Remove unused files from ui folder. (#3577) * Removed unused UI files. Fixes #3434. * Reverted the deletion of "feature-toggle-utils.js". Reverted the deletion of the test files and modified the paths so they referred to the old-ui. --- ui/app/account-detail.js | 117 ----- ui/app/components/balance.js | 89 ---- ui/app/components/binary-renderer.js | 46 -- .../dropdowns/account-options-dropdown.js | 29 -- .../dropdowns/account-selection-dropdown.js | 29 -- ui/app/components/dropdowns/index.js | 6 - ui/app/components/mini-account-panel.js | 74 --- ui/app/components/pending-personal-msg-details.js | 60 --- ui/app/components/pending-typed-msg-details.js | 60 --- ui/app/components/pending-typed-msg.js | 47 -- ui/app/components/range-slider.js | 58 --- ui/app/components/send-token/index.js | 440 ----------------- ui/app/components/send/currency-toggle.js | 44 -- ui/app/components/send/eth-fee-display.js | 37 -- ui/app/components/send/gas-fee-display.js | 62 --- ui/app/components/send/usd-fee-display.js | 35 -- ui/app/components/template.js | 18 - ui/app/components/transaction-list-item-icon.js | 68 --- ui/app/components/transaction-list-item.js | 239 --------- ui/app/components/transaction-list.js | 87 ---- ui/app/components/typed-message-renderer.js | 42 -- ui/app/components/wallet-content-display.js | 56 --- ui/app/info.js | 154 ------ ui/app/send.js | 547 --------------------- ui/app/template.js | 30 -- ui/app/token-tracker.js | 0 26 files changed, 2474 deletions(-) delete mode 100644 ui/app/account-detail.js delete mode 100644 ui/app/components/balance.js delete mode 100644 ui/app/components/binary-renderer.js delete mode 100644 ui/app/components/dropdowns/account-options-dropdown.js delete mode 100644 ui/app/components/dropdowns/account-selection-dropdown.js delete mode 100644 ui/app/components/mini-account-panel.js delete mode 100644 ui/app/components/pending-personal-msg-details.js delete mode 100644 ui/app/components/pending-typed-msg-details.js delete mode 100644 ui/app/components/pending-typed-msg.js delete mode 100644 ui/app/components/range-slider.js delete mode 100644 ui/app/components/send-token/index.js delete mode 100644 ui/app/components/send/currency-toggle.js delete mode 100644 ui/app/components/send/eth-fee-display.js delete mode 100644 ui/app/components/send/gas-fee-display.js delete mode 100644 ui/app/components/send/usd-fee-display.js delete mode 100644 ui/app/components/template.js delete mode 100644 ui/app/components/transaction-list-item-icon.js delete mode 100644 ui/app/components/transaction-list-item.js delete mode 100644 ui/app/components/transaction-list.js delete mode 100644 ui/app/components/typed-message-renderer.js delete mode 100644 ui/app/components/wallet-content-display.js delete mode 100644 ui/app/info.js delete mode 100644 ui/app/send.js delete mode 100644 ui/app/template.js delete mode 100644 ui/app/token-tracker.js (limited to 'ui/app') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js deleted file mode 100644 index 0da435298..000000000 --- a/ui/app/account-detail.js +++ /dev/null @@ -1,117 +0,0 @@ -const inherits = require('util').inherits -const extend = require('xtend') -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const actions = require('./actions') -const valuesFor = require('./util').valuesFor -const TransactionList = require('./components/transaction-list') -const ExportAccountView = require('./components/account-export') -const TabBar = require('./components/tab-bar') -const TokenList = require('./components/token-list') - -module.exports = connect(mapStateToProps)(AccountDetailScreen) - -function mapStateToProps (state) { - return { - metamask: state.metamask, - identities: state.metamask.identities, - accounts: state.metamask.accounts, - address: state.metamask.selectedAddress, - accountDetail: state.appState.accountDetail, - network: state.metamask.network, - unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs), - shapeShiftTxList: state.metamask.shapeShiftTxList, - transactions: state.metamask.selectedAddressTxList || [], - conversionRate: state.metamask.conversionRate, - currentCurrency: state.metamask.currentCurrency, - currentAccountTab: state.metamask.currentAccountTab, - tokens: state.metamask.tokens, - computedBalances: state.metamask.computedBalances, - } -} - -inherits(AccountDetailScreen, Component) -function AccountDetailScreen () { - Component.call(this) -} - -// Note: This component is no longer used. Leaving the file for reference: -// - structuring routing for add token -// - state required for TxList -// Delete file when those features are complete -AccountDetailScreen.prototype.render = function () {} - -AccountDetailScreen.prototype.subview = function () { - var subview - try { - subview = this.props.accountDetail.subview - } catch (e) { - subview = null - } - - switch (subview) { - case 'transactions': - return this.tabSections() - case 'export': - var state = extend({key: 'export'}, this.props) - return h(ExportAccountView, state) - default: - return this.tabSections() - } -} - -AccountDetailScreen.prototype.tabSections = function () { - const { currentAccountTab } = this.props - - return h('section.tabSection.full-flex-height.grow-tenx', [ - - h(TabBar, { - tabs: [ - { content: 'Sent', key: 'history' }, - { content: 'Tokens', key: 'tokens' }, - ], - defaultTab: currentAccountTab || 'history', - tabSelected: (key) => { - this.props.dispatch(actions.setCurrentAccountTab(key)) - }, - }), - - this.tabSwitchView(), - ]) -} - -AccountDetailScreen.prototype.tabSwitchView = function () { - const props = this.props - const { address, network } = props - const { currentAccountTab, tokens } = this.props - - switch (currentAccountTab) { - case 'tokens': - return h(TokenList, { - userAddress: address, - network, - tokens, - addToken: () => this.props.dispatch(actions.showAddTokenPage()), - }) - default: - return this.transactionList() - } -} - -AccountDetailScreen.prototype.transactionList = function () { - const {transactions, unapprovedMsgs, address, - network, shapeShiftTxList, conversionRate } = this.props - - return h(TransactionList, { - transactions: transactions.sort((a, b) => b.time - a.time), - network, - unapprovedMsgs, - conversionRate, - address, - shapeShiftTxList, - viewPendingTx: (txId) => { - this.props.dispatch(actions.viewPendingTx(txId)) - }, - }) -} diff --git a/ui/app/components/balance.js b/ui/app/components/balance.js deleted file mode 100644 index 57ca84564..000000000 --- a/ui/app/components/balance.js +++ /dev/null @@ -1,89 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const formatBalance = require('../util').formatBalance -const generateBalanceObject = require('../util').generateBalanceObject -const Tooltip = require('./tooltip.js') -const FiatValue = require('./fiat-value.js') - -module.exports = EthBalanceComponent - -inherits(EthBalanceComponent, Component) -function EthBalanceComponent () { - Component.call(this) -} - -EthBalanceComponent.prototype.render = function () { - var props = this.props - let { value } = props - var style = props.style - var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true - value = value ? formatBalance(value, 6, needsParse) : '...' - var width = props.width - - return ( - - h('.ether-balance.ether-balance-amount', { - style: style, - }, [ - h('div', { - style: { - display: 'inline', - width: width, - }, - }, this.renderBalance(value)), - ]) - - ) -} -EthBalanceComponent.prototype.renderBalance = function (value) { - var props = this.props - if (value === 'None') return value - if (value === '...') return value - var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3) - var balance - var splitBalance = value.split(' ') - var ethNumber = splitBalance[0] - var ethSuffix = splitBalance[1] - const showFiat = 'showFiat' in props ? props.showFiat : true - - if (props.shorten) { - balance = balanceObj.shortBalance - } else { - balance = balanceObj.balance - } - - var label = balanceObj.label - - return ( - h(Tooltip, { - position: 'bottom', - title: `${ethNumber} ${ethSuffix}`, - }, h('div.flex-column', [ - h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('div', { - style: { - width: '100%', - textAlign: 'right', - }, - }, this.props.incoming ? `+${balance}` : balance), - h('div', { - style: { - color: ' #AEAEAE', - fontSize: '12px', - marginLeft: '5px', - }, - }, label), - ]), - - showFiat ? h(FiatValue, { value: props.value }) : null, - ])) - ) -} diff --git a/ui/app/components/binary-renderer.js b/ui/app/components/binary-renderer.js deleted file mode 100644 index 0b6a1f5c2..000000000 --- a/ui/app/components/binary-renderer.js +++ /dev/null @@ -1,46 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ethUtil = require('ethereumjs-util') -const extend = require('xtend') - -module.exports = BinaryRenderer - -inherits(BinaryRenderer, Component) -function BinaryRenderer () { - Component.call(this) -} - -BinaryRenderer.prototype.render = function () { - const props = this.props - const { value, style } = props - const text = this.hexToText(value) - - const defaultStyle = extend({ - width: '315px', - maxHeight: '210px', - resize: 'none', - border: 'none', - background: 'white', - padding: '3px', - }, style) - - return ( - h('textarea.font-small', { - readOnly: true, - style: defaultStyle, - defaultValue: text, - }) - ) -} - -BinaryRenderer.prototype.hexToText = function (hex) { - try { - const stripped = ethUtil.stripHexPrefix(hex) - const buff = Buffer.from(stripped, 'hex') - return buff.toString('utf8') - } catch (e) { - return hex - } -} - diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js deleted file mode 100644 index f74c0a2d4..000000000 --- a/ui/app/components/dropdowns/account-options-dropdown.js +++ /dev/null @@ -1,29 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const AccountDropdowns = require('./components/account-dropdowns') - -inherits(AccountOptionsDropdown, Component) -function AccountOptionsDropdown () { - Component.call(this) -} - -module.exports = AccountOptionsDropdown - -// TODO: specify default props and proptypes -// TODO: hook up to state, connect to redux to clean up API -// TODO: selectedAddress is not defined... should we use selected? -AccountOptionsDropdown.prototype.render = function () { - const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - - return h(AccountDropdowns, { - enableAccountOptions: true, - enableAccountsSelector: false, - selected, - network, - identities, - style: style || {}, - dropdownWrapperStyle: dropdownWrapperStyle || {}, - menuItemStyles: menuItemStyles || {}, - }, []) -} diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js deleted file mode 100644 index 2f6452b15..000000000 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ /dev/null @@ -1,29 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const AccountDropdowns = require('./components/account-dropdowns') - -inherits(AccountSelectionDropdown, Component) -function AccountSelectionDropdown () { - Component.call(this) -} - -module.exports = AccountSelectionDropdown - -// TODO: specify default props and proptypes -// TODO: hook up to state, connect to redux to clean up API -// TODO: selectedAddress is not defined... should we use selected? -AccountSelectionDropdown.prototype.render = function () { - const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - - return h(AccountDropdowns, { - enableAccountOptions: false, - enableAccountsSelector: true, - selected, - network, - identities, - style: style || {}, - dropdownWrapperStyle: dropdownWrapperStyle || {}, - menuItemStyles: menuItemStyles || {}, - }, []) -} diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js index fa66f5000..605507058 100644 --- a/ui/app/components/dropdowns/index.js +++ b/ui/app/components/dropdowns/index.js @@ -1,17 +1,11 @@ // Reusable Dropdown Components // TODO: Refactor into separate components const Dropdown = require('./components/dropdown').Dropdown -const AccountDropdowns = require('./components/account-dropdowns') // App-Specific Instances -const AccountSelectionDropdown = require('./account-selection-dropdown') -const AccountOptionsDropdown = require('./account-options-dropdown') const NetworkDropdown = require('./network-dropdown').default module.exports = { - AccountSelectionDropdown, - AccountOptionsDropdown, NetworkDropdown, Dropdown, - AccountDropdowns, } diff --git a/ui/app/components/mini-account-panel.js b/ui/app/components/mini-account-panel.js deleted file mode 100644 index c09cf5b7a..000000000 --- a/ui/app/components/mini-account-panel.js +++ /dev/null @@ -1,74 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const Identicon = require('./identicon') - -module.exports = AccountPanel - - -inherits(AccountPanel, Component) -function AccountPanel () { - Component.call(this) -} - -AccountPanel.prototype.render = function () { - var props = this.props - var picOrder = props.picOrder || 'left' - const { imageSeed } = props - - return ( - - h('.identity-panel.flex-row.flex-left', { - style: { - cursor: props.onClick ? 'pointer' : undefined, - }, - onClick: props.onClick, - }, [ - - this.genIcon(imageSeed, picOrder), - - h('div.flex-column.flex-justify-center', { - style: { - lineHeight: '15px', - order: 2, - display: 'flex', - alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end', - }, - }, this.props.children), - ]) - ) -} - -AccountPanel.prototype.genIcon = function (seed, picOrder) { - const props = this.props - - // When there is no seed value, this is a contract creation. - // We then show the contract icon. - if (!seed) { - return h('.identicon-wrapper.flex-column.select-none', { - style: { - order: picOrder === 'left' ? 1 : 3, - }, - }, [ - h('i.fa.fa-file-text-o.fa-lg', { - style: { - fontSize: '42px', - transform: 'translate(0px, -16px)', - }, - }), - ]) - } - - // If there was a seed, we return an identicon for that address. - return h('.identicon-wrapper.flex-column.select-none', { - style: { - order: picOrder === 'left' ? 1 : 3, - }, - }, [ - h(Identicon, { - address: seed, - imageify: props.imageifyIdenticons, - }), - ]) -} - diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js deleted file mode 100644 index b896e9a7e..000000000 --- a/ui/app/components/pending-personal-msg-details.js +++ /dev/null @@ -1,60 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const t = require('../../i18n') - -const AccountPanel = require('./account-panel') -const BinaryRenderer = require('./binary-renderer') - -module.exports = PendingMsgDetails - -inherits(PendingMsgDetails, Component) -function PendingMsgDetails () { - Component.call(this) -} - -PendingMsgDetails.prototype.render = function () { - var state = this.props - var msgData = state.txData - - var msgParams = msgData.msgParams || {} - var address = msgParams.from || state.selectedAddress - var identity = state.identities[address] || { address: address } - var account = state.accounts[address] || { address: address } - - var { data } = msgParams - - return ( - h('div', { - key: msgData.id, - style: { - margin: '10px 20px', - }, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - }), - - // message data - h('div', { - style: { - height: '260px', - }, - }, [ - h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')), - h(BinaryRenderer, { - value: data, - style: { - height: '215px', - }, - }), - ]), - - ]) - ) -} diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js deleted file mode 100644 index ae0a1171e..000000000 --- a/ui/app/components/pending-typed-msg-details.js +++ /dev/null @@ -1,60 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -const AccountPanel = require('./account-panel') -const TypedMessageRenderer = require('./typed-message-renderer') -const t = require('../../i18n') - -module.exports = PendingMsgDetails - -inherits(PendingMsgDetails, Component) -function PendingMsgDetails () { - Component.call(this) -} - -PendingMsgDetails.prototype.render = function () { - var state = this.props - var msgData = state.txData - - var msgParams = msgData.msgParams || {} - var address = msgParams.from || state.selectedAddress - var identity = state.identities[address] || { address: address } - var account = state.accounts[address] || { address: address } - - var { data } = msgParams - - return ( - h('div', { - key: msgData.id, - style: { - margin: '10px 20px', - }, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - }), - - // message data - h('div', { - style: { - height: '260px', - }, - }, [ - h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')), - h(TypedMessageRenderer, { - value: data, - style: { - height: '215px', - }, - }), - ]), - - ]) - ) -} diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js deleted file mode 100644 index ccde5e8af..000000000 --- a/ui/app/components/pending-typed-msg.js +++ /dev/null @@ -1,47 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const PendingTxDetails = require('./pending-typed-msg-details') -const t = require('../../i18n') - -module.exports = PendingMsg - -inherits(PendingMsg, Component) -function PendingMsg () { - Component.call(this) -} - -PendingMsg.prototype.render = function () { - var state = this.props - var msgData = state.txData - - return ( - - h('div', { - key: msgData.id, - }, [ - - // header - h('h3', { - style: { - fontWeight: 'bold', - textAlign: 'center', - }, - }, t('signMessage')), - - // message details - h(PendingTxDetails, state), - - // sign + cancel - h('.flex-row.flex-space-around', [ - h('button.allcaps', { - onClick: state.cancelTypedMessage, - }, t('cancel')), - h('button.allcaps', { - onClick: state.signTypedMessage, - }, t('sign')), - ]), - ]) - - ) -} diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js deleted file mode 100644 index 823f5eb01..000000000 --- a/ui/app/components/range-slider.js +++ /dev/null @@ -1,58 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -module.exports = RangeSlider - -inherits(RangeSlider, Component) -function RangeSlider () { - Component.call(this) -} - -RangeSlider.prototype.render = function () { - const state = this.state || {} - const props = this.props - const onInput = props.onInput || function () {} - const name = props.name - const { - min = 0, - max = 100, - increment = 1, - defaultValue = 50, - mirrorInput = false, - } = this.props.options - const {container, input, range} = props.style - - return ( - h('.flex-row', { - style: container, - }, [ - h('input', { - type: 'range', - name: name, - min: min, - max: max, - step: increment, - style: range, - value: state.value || defaultValue, - onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput, - }), - - // Mirrored input for range - mirrorInput ? h('input.large-input', { - type: 'number', - name: `${name}Mirror`, - min: min, - max: max, - value: state.value || defaultValue, - step: increment, - style: input, - onChange: this.mirrorInputs.bind(this, event), - }) : null, - ]) - ) -} - -RangeSlider.prototype.mirrorInputs = function (event) { - this.setState({value: event.target.value}) -} diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js deleted file mode 100644 index 58743b641..000000000 --- a/ui/app/components/send-token/index.js +++ /dev/null @@ -1,440 +0,0 @@ -const Component = require('react').Component -const connect = require('react-redux').connect -const h = require('react-hyperscript') -const classnames = require('classnames') -const abi = require('ethereumjs-abi') -const inherits = require('util').inherits -const actions = require('../../actions') -const selectors = require('../../selectors') -const { isValidAddress, allNull } = require('../../util') -const t = require('../../../i18n') - -// const BalanceComponent = require('./balance-component') -const Identicon = require('../identicon') -const TokenBalance = require('../token-balance') -const CurrencyToggle = require('../send/currency-toggle') -const GasTooltip = require('../send/gas-tooltip') -const GasFeeDisplay = require('../send/gas-fee-display') - -module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen) - -function mapStateToProps (state) { - // const sidebarOpen = state.appState.sidebarOpen - - const { warning } = state.appState - const identities = state.metamask.identities - const addressBook = state.metamask.addressBook - const conversionRate = state.metamask.conversionRate - const currentBlockGasLimit = state.metamask.currentBlockGasLimit - const accounts = state.metamask.accounts - const selectedTokenAddress = state.metamask.selectedTokenAddress - const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] - const selectedToken = selectors.getSelectedToken(state) - const tokenExchangeRates = state.metamask.tokenExchangeRates - const pair = `${selectedToken.symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return { - selectedAddress, - selectedTokenAddress, - identities, - addressBook, - conversionRate, - tokenExchangeRate, - currentBlockGasLimit, - selectedToken, - warning, - } -} - -function mapDispatchToProps (dispatch) { - return { - backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), - hideWarning: () => dispatch(actions.hideWarning()), - addToAddressBook: (recipient, nickname) => dispatch( - actions.addToAddressBook(recipient, nickname) - ), - signTx: txParams => dispatch(actions.signTx(txParams)), - signTokenTx: (tokenAddress, toAddress, amount, txData) => ( - dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData)) - ), - updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)), - estimateGas: params => dispatch(actions.estimateGas(params)), - getGasPrice: () => dispatch(actions.getGasPrice()), - } -} - -inherits(SendTokenScreen, Component) -function SendTokenScreen () { - Component.call(this) - this.state = { - to: '', - amount: '0x0', - amountToSend: '0x0', - selectedCurrency: 'USD', - isGasTooltipOpen: false, - gasPrice: null, - gasLimit: null, - errors: {}, - } -} - -SendTokenScreen.prototype.componentWillMount = function () { - const { - updateTokenExchangeRate, - selectedToken: { symbol }, - getGasPrice, - estimateGas, - selectedAddress, - } = this.props - - updateTokenExchangeRate(symbol) - - const data = Array.prototype.map.call( - abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']), - x => ('00' + x.toString(16)).slice(-2) - ).join('') - - console.log(data) - Promise.all([ - getGasPrice(), - estimateGas({ - from: selectedAddress, - value: '0x0', - gas: '746a528800', - data, - }), - ]) - .then(([blockGasPrice, estimatedGas]) => { - console.log({ blockGasPrice, estimatedGas}) - this.setState({ - gasPrice: blockGasPrice, - gasLimit: estimatedGas, - }) - }) -} - -SendTokenScreen.prototype.validate = function () { - const { - to, - amount: stringAmount, - gasPrice: hexGasPrice, - gasLimit: hexGasLimit, - } = this.state - - const gasPrice = parseInt(hexGasPrice, 16) - const gasLimit = parseInt(hexGasLimit, 16) / 1000000000 - const amount = Number(stringAmount) - - const errors = { - to: !to ? t('required') : null, - amount: !amount ? t('required') : null, - gasPrice: !gasPrice ? t('gasPriceRequired') : null, - gasLimit: !gasLimit ? t('gasLimitRequired') : null, - } - - if (to && !isValidAddress(to)) { - errors.to = t('invalidAddress') - } - - const isValid = Object.entries(errors).every(([key, value]) => value === null) - return { - isValid, - errors: isValid ? {} : errors, - } -} - -SendTokenScreen.prototype.setErrorsFor = function (field) { - const { errors: previousErrors } = this.state - - const { - isValid, - errors: newErrors, - } = this.validate() - - const nextErrors = Object.assign({}, previousErrors, { - [field]: newErrors[field] || null, - }) - - if (!isValid) { - this.setState({ - errors: nextErrors, - isValid, - }) - } -} - -SendTokenScreen.prototype.clearErrorsFor = function (field) { - const { errors: previousErrors } = this.state - const nextErrors = Object.assign({}, previousErrors, { - [field]: null, - }) - - this.setState({ - errors: nextErrors, - isValid: allNull(nextErrors), - }) -} - -SendTokenScreen.prototype.getAmountToSend = function (amount, selectedToken) { - const { decimals } = selectedToken || {} - const multiplier = Math.pow(10, Number(decimals || 0)) - const sendAmount = '0x' + Number(amount * multiplier).toString(16) - return sendAmount -} - -SendTokenScreen.prototype.submit = function () { - const { - to, - amount, - gasPrice, - gasLimit, - } = this.state - - const { - identities, - selectedAddress, - selectedTokenAddress, - hideWarning, - addToAddressBook, - signTokenTx, - selectedToken, - } = this.props - - const { nickname = ' ' } = identities[to] || {} - - hideWarning() - addToAddressBook(to, nickname) - - const txParams = { - from: selectedAddress, - value: '0', - gas: gasLimit, - gasPrice: gasPrice, - } - - const sendAmount = this.getAmountToSend(amount, selectedToken) - - signTokenTx(selectedTokenAddress, to, sendAmount, txParams) -} - -SendTokenScreen.prototype.renderToAddressInput = function () { - const { - identities, - addressBook, - } = this.props - - const { - to, - errors: { to: errorMessage }, - } = this.state - - return h('div', { - className: classnames('send-screen-input-wrapper', { - 'send-screen-input-wrapper--error': errorMessage, - }), - }, [ - h('div', [t('to') + ':']), - h('input.large-input.send-screen-input', { - name: 'address', - list: 'addresses', - placeholder: t('address'), - value: to, - onChange: e => this.setState({ - to: e.target.value, - errors: {}, - }), - onBlur: () => { - this.setErrorsFor('to') - }, - onFocus: event => { - if (to) event.target.select() - this.clearErrorsFor('to') - }, - }), - h('datalist#addresses', [ - // Corresponds to the addresses owned. - Object.entries(identities).map(([key, { address, name }]) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - addressBook.map(({ address, name }) => { - return h('option', { - value: address, - label: name, - key: address, - }) - }), - ]), - h('div.send-screen-input-wrapper__error-message', [ errorMessage ]), - ]) -} - -SendTokenScreen.prototype.renderAmountInput = function () { - const { - selectedCurrency, - amount, - errors: { amount: errorMessage }, - } = this.state - - const { - tokenExchangeRate, - selectedToken: {symbol}, - } = this.props - - return h('div.send-screen-input-wrapper', { - className: classnames('send-screen-input-wrapper', { - 'send-screen-input-wrapper--error': errorMessage, - }), - }, [ - h('div.send-screen-amount-labels', [ - h('span', [t('amount')]), - h(CurrencyToggle, { - currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD', - currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [], - onClick: currency => this.setState({ selectedCurrency: currency }), - }), - ]), - h('input.large-input.send-screen-input', { - placeholder: `0 ${symbol}`, - type: 'number', - value: amount, - onChange: e => this.setState({ - amount: e.target.value, - }), - onBlur: () => { - this.setErrorsFor('amount') - }, - onFocus: () => this.clearErrorsFor('amount'), - }), - h('div.send-screen-input-wrapper__error-message', [ errorMessage ]), - ]) -} - -SendTokenScreen.prototype.renderGasInput = function () { - const { - isGasTooltipOpen, - gasPrice, - gasLimit, - selectedCurrency, - errors: { - gasPrice: gasPriceErrorMessage, - gasLimit: gasLimitErrorMessage, - }, - } = this.state - - const { - conversionRate, - tokenExchangeRate, - currentBlockGasLimit, - } = this.props - - return h('div.send-screen-input-wrapper', { - className: classnames('send-screen-input-wrapper', { - 'send-screen-input-wrapper--error': gasPriceErrorMessage || gasLimitErrorMessage, - }), - }, [ - isGasTooltipOpen && h(GasTooltip, { - className: 'send-tooltip', - gasPrice: gasPrice || '0x0', - gasLimit: gasLimit || '0x0', - onClose: () => this.setState({ isGasTooltipOpen: false }), - onFeeChange: ({ gasLimit, gasPrice }) => { - this.setState({ gasLimit, gasPrice, errors: {} }) - }, - onBlur: () => { - this.setErrorsFor('gasLimit') - this.setErrorsFor('gasPrice') - }, - onFocus: () => { - this.clearErrorsFor('gasLimit') - this.clearErrorsFor('gasPrice') - }, - }), - - h('div.send-screen-gas-labels', {}, [ - h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']), - h('span', [t('whatsThis')]), - ]), - h('div.large-input.send-screen-gas-input', [ - h(GasFeeDisplay, { - conversionRate, - tokenExchangeRate, - gasPrice: gasPrice || '0x0', - activeCurrency: selectedCurrency, - gas: gasLimit || '0x0', - blockGasLimit: currentBlockGasLimit, - }), - h( - 'div.send-screen-gas-input-customize', - { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) }, - [t('customize')] - ), - ]), - h('div.send-screen-input-wrapper__error-message', [ - gasPriceErrorMessage || gasLimitErrorMessage, - ]), - ]) -} - -SendTokenScreen.prototype.renderMemoInput = function () { - return h('div.send-screen-input-wrapper', [ - h('div', {}, [t('transactionMemo')]), - h( - 'input.large-input.send-screen-input', - { onChange: e => this.setState({ memo: e.target.value }) } - ), - ]) -} - -SendTokenScreen.prototype.renderButtons = function () { - const { selectedAddress, backToAccountDetail } = this.props - const { isValid } = this.validate() - - return h('div.send-token__button-group', [ - h('button.send-token__button-next.btn-secondary', { - className: !isValid && 'send-screen__send-button__disabled', - onClick: () => isValid && this.submit(), - }, [t('next')]), - h('button.send-token__button-cancel.btn-tertiary', { - onClick: () => backToAccountDetail(selectedAddress), - }, [t('cancel')]), - ]) -} - -SendTokenScreen.prototype.render = function () { - const { - selectedTokenAddress, - selectedToken, - warning, - } = this.props - - return h('div.send-token', [ - h('div.send-token__content', [ - h(Identicon, { - diameter: 75, - address: selectedTokenAddress, - }), - h('div.send-token__title', [t('sendTokens')]), - h('div.send-token__description', [t('sendTokensAnywhere')]), - h('div.send-token__balance-text', [t('tokenBalance')]), - h('div.send-token__token-balance', [ - h(TokenBalance, { token: selectedToken, balanceOnly: true }), - ]), - h('div.send-token__token-symbol', [selectedToken.symbol]), - this.renderToAddressInput(), - this.renderAmountInput(), - this.renderGasInput(), - this.renderMemoInput(), - warning && h('div.send-screen-input-wrapper--error', {}, - h('div.send-screen-input-wrapper__error-message', [ - warning, - ]) - ), - ]), - this.renderButtons(), - ]) -} diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js deleted file mode 100644 index 7aaccd490..000000000 --- a/ui/app/components/send/currency-toggle.js +++ /dev/null @@ -1,44 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const classnames = require('classnames') - -module.exports = CurrencyToggle - -inherits(CurrencyToggle, Component) -function CurrencyToggle () { - Component.call(this) -} - -const defaultCurrencies = [ 'ETH', 'USD' ] - -CurrencyToggle.prototype.renderToggles = function () { - const { onClick, activeCurrency } = this.props - const [currencyA, currencyB] = this.props.currencies || defaultCurrencies - - return [ - h('span', { - className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyA === activeCurrency, - }), - onClick: () => onClick(currencyA), - }, [ currencyA ]), - '<>', - h('span', { - className: classnames('currency-toggle__item', { - 'currency-toggle__item--selected': currencyB === activeCurrency, - }), - onClick: () => onClick(currencyB), - }, [ currencyB ]), - ] -} - -CurrencyToggle.prototype.render = function () { - const currencies = this.props.currencies || defaultCurrencies - - return h('span.currency-toggle', currencies.length - ? this.renderToggles() - : [] - ) -} - diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js deleted file mode 100644 index 9eda5ec62..000000000 --- a/ui/app/components/send/eth-fee-display.js +++ /dev/null @@ -1,37 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const EthBalance = require('../eth-balance') -const { getTxFeeBn } = require('../../util') - -module.exports = EthFeeDisplay - -inherits(EthFeeDisplay, Component) -function EthFeeDisplay () { - Component.call(this) -} - -EthFeeDisplay.prototype.render = function () { - const { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - } = this.props - - return h(EthBalance, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - currentCurrency: activeCurrency, - conversionRate, - showFiat: false, - hideTooltip: true, - styleOveride: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px', - }, - }) -} - diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js deleted file mode 100644 index a9a3f3f49..000000000 --- a/ui/app/components/send/gas-fee-display.js +++ /dev/null @@ -1,62 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const USDFeeDisplay = require('./usd-fee-display') -const EthFeeDisplay = require('./eth-fee-display') -const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util') - -module.exports = GasFeeDisplay - -inherits(GasFeeDisplay, Component) -function GasFeeDisplay () { - Component.call(this) -} - -GasFeeDisplay.prototype.getTokenValue = function () { - const { - tokenExchangeRate, - gas, - gasPrice, - blockGasLimit, - } = this.props - - const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true) - const [ethNumber] = value.split(' ') - - return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6) -} - -GasFeeDisplay.prototype.render = function () { - const { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - } = this.props - - switch (activeCurrency) { - case 'USD': - return h(USDFeeDisplay, { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - }) - case 'ETH': - return h(EthFeeDisplay, { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - }) - default: - return h('div.token-gas', [ - h('div.token-gas__amount', this.getTokenValue()), - h('div.token-gas__symbol', activeCurrency), - ]) - } -} - diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js deleted file mode 100644 index 4cf31a493..000000000 --- a/ui/app/components/send/usd-fee-display.js +++ /dev/null @@ -1,35 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const FiatValue = require('../fiat-value') -const { getTxFeeBn } = require('../../util') - -module.exports = USDFeeDisplay - -inherits(USDFeeDisplay, Component) -function USDFeeDisplay () { - Component.call(this) -} - -USDFeeDisplay.prototype.render = function () { - const { - activeCurrency, - conversionRate, - gas, - gasPrice, - blockGasLimit, - } = this.props - - return h(FiatValue, { - value: getTxFeeBn(gas, gasPrice, blockGasLimit), - conversionRate, - currentCurrency: activeCurrency, - style: { - color: '#5d5d5d', - fontSize: '16px', - fontFamily: 'DIN OT', - lineHeight: '22.4px', - }, - }) -} - diff --git a/ui/app/components/template.js b/ui/app/components/template.js deleted file mode 100644 index b6ed8eaa0..000000000 --- a/ui/app/components/template.js +++ /dev/null @@ -1,18 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -module.exports = NewComponent - -inherits(NewComponent, Component) -function NewComponent () { - Component.call(this) -} - -NewComponent.prototype.render = function () { - const props = this.props - - return ( - h('span', props.message) - ) -} diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js deleted file mode 100644 index f442b05af..000000000 --- a/ui/app/components/transaction-list-item-icon.js +++ /dev/null @@ -1,68 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const Tooltip = require('./tooltip') - -const Identicon = require('./identicon') - -module.exports = TransactionIcon - -inherits(TransactionIcon, Component) -function TransactionIcon () { - Component.call(this) -} - -TransactionIcon.prototype.render = function () { - const { transaction, txParams, isMsg } = this.props - switch (transaction.status) { - case 'unapproved': - return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg') - - case 'rejected': - return h('i.fa.fa-exclamation-triangle.fa-lg.warning', { - style: { - width: '24px', - }, - }) - - case 'failed': - return h('i.fa.fa-exclamation-triangle.fa-lg.error', { - style: { - width: '24px', - }, - }) - - case 'submitted': - return h(Tooltip, { - title: 'Pending', - position: 'right', - }, [ - h('i.fa.fa-ellipsis-h', { - style: { - fontSize: '27px', - }, - }), - ]) - } - - if (isMsg) { - return h('i.fa.fa-certificate.fa-lg', { - style: { - width: '24px', - }, - }) - } - - if (txParams.to) { - return h(Identicon, { - diameter: 24, - address: txParams.to || transaction.hash, - }) - } else { - return h('i.fa.fa-file-text-o.fa-lg', { - style: { - width: '24px', - }, - }) - } -} diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js deleted file mode 100644 index 6d6e79bd5..000000000 --- a/ui/app/components/transaction-list-item.js +++ /dev/null @@ -1,239 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect - -const EthBalance = require('./eth-balance') -const addressSummary = require('../util').addressSummary -const explorerLink = require('etherscan-link').createExplorerLink -const CopyButton = require('./copyButton') -const vreme = new (require('vreme'))() -const Tooltip = require('./tooltip') -const numberToBN = require('number-to-bn') -const actions = require('../actions') -const t = require('../../i18n') - -const TransactionIcon = require('./transaction-list-item-icon') -const ShiftListItem = require('./shift-list-item') - -const mapDispatchToProps = dispatch => { - return { - retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), - } -} - -module.exports = connect(null, mapDispatchToProps)(TransactionListItem) - -inherits(TransactionListItem, Component) -function TransactionListItem () { - Component.call(this) -} - -TransactionListItem.prototype.showRetryButton = function () { - const { transaction = {} } = this.props - const { status, time } = transaction - return status === 'submitted' && Date.now() - time > 30000 -} - -TransactionListItem.prototype.render = function () { - const { transaction, network, conversionRate, currentCurrency } = this.props - const { status } = transaction - if (transaction.key === 'shapeshift') { - if (network === '1') return h(ShiftListItem, transaction) - } - var date = formatDate(transaction.time) - - let isLinkable = false - const numericNet = parseInt(network) - isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42 - - var isMsg = ('msgParams' in transaction) - var isTx = ('txParams' in transaction) - var isPending = status === 'unapproved' - let txParams - if (isTx) { - txParams = transaction.txParams - } else if (isMsg) { - txParams = transaction.msgParams - } - - const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : '' - - const isClickable = ('hash' in transaction && isLinkable) || isPending - return ( - h('.transaction-list-item.flex-column', { - onClick: (event) => { - if (isPending) { - this.props.showTx(transaction.id) - } - event.stopPropagation() - if (!transaction.hash || !isLinkable) return - var url = explorerLink(transaction.hash, parseInt(network)) - global.platform.openWindow({ url }) - }, - style: { - padding: '20px 0', - alignItems: 'center', - }, - }, [ - h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, { - style: { - width: '100%', - }, - }, [ - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(TransactionIcon, { txParams, transaction, isTx, isMsg }), - ]), - - h(Tooltip, { - title: t('transactionNumber'), - position: 'right', - }, [ - h('span', { - style: { - display: 'flex', - cursor: 'normal', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - padding: '10px', - }, - }, nonce), - ]), - - h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [ - domainField(txParams), - h('div', date), - recipientField(txParams, transaction, isTx, isMsg), - ]), - - // Places a copy button if tx is successful, else places a placeholder empty div. - transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}), - - isTx ? h(EthBalance, { - value: txParams.value, - conversionRate, - currentCurrency, - width: '55px', - shorten: true, - showFiat: false, - style: {fontSize: '15px'}, - }) : h('.flex-column'), - ]), - - this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', { - onClick: event => { - event.stopPropagation() - this.resubmit() - }, - style: { - height: '22px', - borderRadius: '22px', - color: '#F9881B', - padding: '0 20px', - backgroundColor: '#FFE3C9', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - fontSize: '8px', - cursor: 'pointer', - }, - }, [ - h('div', { - style: { - paddingRight: '2px', - }, - }, t('takesTooLong')), - h('div', { - style: { - textDecoration: 'underline', - }, - }, t('retryWithMoreGas')), - ]), - ]) - ) -} - -TransactionListItem.prototype.resubmit = function () { - const { transaction } = this.props - this.props.retryTransaction(transaction.id) -} - -function domainField (txParams) { - return h('div', { - style: { - fontSize: 'x-small', - color: '#ABA9AA', - overflow: 'hidden', - textOverflow: 'ellipsis', - width: '100%', - }, - }, [ - txParams.origin, - ]) -} - -function recipientField (txParams, transaction, isTx, isMsg) { - let message - - if (isMsg) { - message = t('sigRequested') - } else if (txParams.to) { - message = addressSummary(txParams.to) - } else { - message = t('contractDeployment') - } - - return h('div', { - style: { - fontSize: 'x-small', - color: '#ABA9AA', - }, - }, [ - message, - renderErrorOrWarning(transaction), - ]) -} - -function formatDate (date) { - return vreme.format(new Date(date), 'March 16 2014 14:30') -} - -function renderErrorOrWarning (transaction) { - const { status } = transaction - - // show rejected - if (status === 'rejected') { - return h('span.error', ' (' + t('rejected') + ')') - } - if (transaction.err || transaction.warning) { - const { err, warning = {} } = transaction - const errFirst = !!((err && warning) || err) - - errFirst ? err.message : warning.message - - // show error - if (err) { - const message = err.message || '' - return ( - h(Tooltip, { - title: message, - position: 'bottom', - }, [ - h(`span.error`, ` (` + t('failed') + `)`), - ]) - ) - } - - // show warning - if (warning) { - const message = warning.message - return h(Tooltip, { - title: message, - position: 'bottom', - }, [ - h(`span.warning`, ` (` + t('warning') + `)`), - ]) - } - } -} diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js deleted file mode 100644 index 07f7a06ae..000000000 --- a/ui/app/components/transaction-list.js +++ /dev/null @@ -1,87 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -const TransactionListItem = require('./transaction-list-item') -const t = require('../../i18n') - -module.exports = TransactionList - - -inherits(TransactionList, Component) -function TransactionList () { - Component.call(this) -} - -TransactionList.prototype.render = function () { - const { transactions, network, unapprovedMsgs, conversionRate } = this.props - - var shapeShiftTxList - if (network === '1') { - shapeShiftTxList = this.props.shapeShiftTxList - } - const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList) - .sort((a, b) => b.time - a.time) - - return ( - - h('section.transaction-list.full-flex-height', { - style: { - justifyContent: 'center', - }, - }, [ - - h('style', ` - .transaction-list .transaction-list-item:not(:last-of-type) { - border-bottom: 1px solid #D4D4D4; - } - .transaction-list .transaction-list-item .ether-balance-label { - display: block !important; - font-size: small; - } - `), - - h('.tx-list', { - style: { - overflowY: 'auto', - height: '100%', - padding: '0 20px', - textAlign: 'center', - }, - }, [ - - txsToRender.length - ? txsToRender.map((transaction, i) => { - let key - switch (transaction.key) { - case 'shapeshift': - const { depositAddress, time } = transaction - key = `shift-tx-${depositAddress}-${time}-${i}` - break - default: - key = `tx-${transaction.id}-${i}` - } - return h(TransactionListItem, { - transaction, i, network, key, - conversionRate, - showTx: (txId) => { - this.props.viewPendingTx(txId) - }, - }) - }) - : h('.flex-center.full-flex-height', { - style: { - flexDirection: 'column', - justifyContent: 'center', - }, - }, [ - h('p', { - style: { - marginTop: '50px', - }, - }, t('noTransactionHistory')), - ]), - ]), - ]) - ) -} diff --git a/ui/app/components/typed-message-renderer.js b/ui/app/components/typed-message-renderer.js deleted file mode 100644 index d170d63b7..000000000 --- a/ui/app/components/typed-message-renderer.js +++ /dev/null @@ -1,42 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const extend = require('xtend') - -module.exports = TypedMessageRenderer - -inherits(TypedMessageRenderer, Component) -function TypedMessageRenderer () { - Component.call(this) -} - -TypedMessageRenderer.prototype.render = function () { - const props = this.props - const { value, style } = props - const text = renderTypedData(value) - - const defaultStyle = extend({ - width: '315px', - maxHeight: '210px', - resize: 'none', - border: 'none', - background: 'white', - padding: '3px', - overflow: 'scroll', - }, style) - - return ( - h('div.font-small', { - style: defaultStyle, - }, text) - ) -} - -function renderTypedData (values) { - return values.map(function (value) { - return h('div', {}, [ - h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'), - h('div', {}, value.value), - ]) - }) -} diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js deleted file mode 100644 index bfa061be4..000000000 --- a/ui/app/components/wallet-content-display.js +++ /dev/null @@ -1,56 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits - -module.exports = WalletContentDisplay - -inherits(WalletContentDisplay, Component) -function WalletContentDisplay () { - Component.call(this) -} - -WalletContentDisplay.prototype.render = function () { - const { title, amount, fiatValue, active, style } = this.props - - // TODO: Separate component: wallet-content-account - return h('div.flex-column', { - style: { - marginLeft: '1.3em', - alignItems: 'flex-start', - ...style, - }, - }, [ - - h('span', { - style: { - fontSize: '1.1em', - }, - }, title), - - h('span', { - style: { - fontSize: '1.8em', - margin: '0.4em 0em', - }, - }, amount), - - h('span', { - style: { - fontSize: '1.3em', - }, - }, fiatValue), - - active && h('div', { - style: { - position: 'absolute', - marginLeft: '-1.3em', - height: '6em', - width: '0.3em', - background: '#D8D8D8', // $alto - }, - }, [ - ]), - ]) - -} - diff --git a/ui/app/info.js b/ui/app/info.js deleted file mode 100644 index 49ff9f24a..000000000 --- a/ui/app/info.js +++ /dev/null @@ -1,154 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const actions = require('./actions') - -module.exports = connect(mapStateToProps)(InfoScreen) - -function mapStateToProps (state) { - return {} -} - -inherits(InfoScreen, Component) -function InfoScreen () { - Component.call(this) -} - -InfoScreen.prototype.render = function () { - const state = this.props - const version = global.platform.getVersion() - - return ( - h('.flex-column.flex-grow', { - style: { - maxWidth: '400px', - }, - }, [ - - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: (event) => { - state.dispatch(actions.goHome()) - }, - }), - h('h2.page-subtitle', 'Info'), - ]), - - // main view - h('.flex-column.flex-justify-center.flex-grow.select-none', [ - h('.flex-space-around', { - style: { - padding: '20px', - }, - }, [ - // current version number - - h('.info.info-gray', [ - h('div', 'Metamask'), - h('div', { - style: { - marginBottom: '10px', - }, - }, `Version: ${version}`), - ]), - - h('div', { - style: { - marginBottom: '5px', - }}, - [ - h('div', [ - h('a', { - href: 'https://metamask.io/privacy.html', - target: '_blank', - onClick (event) { this.navigateTo(event.target.href) }, - }, [ - h('div.info', 'Privacy Policy'), - ]), - ]), - h('div', [ - h('a', { - href: 'https://metamask.io/terms.html', - target: '_blank', - onClick (event) { this.navigateTo(event.target.href) }, - }, [ - h('div.info', 'Terms of Use'), - ]), - ]), - h('div', [ - h('a', { - href: 'https://metamask.io/attributions.html', - target: '_blank', - onClick (event) { this.navigateTo(event.target.href) }, - }, [ - h('div.info', 'Attributions'), - ]), - ]), - ] - ), - - h('hr', { - style: { - margin: '10px 0 ', - width: '7em', - }, - }), - - h('div', { - style: { - paddingLeft: '30px', - }}, - [ - h('div.fa.fa-support', [ - h('a.info', { - href: 'https://metamask.helpscoutdocs.com/', - target: '_blank', - }, 'Visit our Knowledge Base'), - ]), - - h('div', [ - h('a', { - href: 'https://metamask.io/', - target: '_blank', - }, [ - h('img.icon-size', { - src: 'images/icon-128.png', - style: { - // IE6-9 - filter: 'grayscale(100%)', - // Microsoft Edge and Firefox 35+ - WebkitFilter: 'grayscale(100%)', - }, - }), - h('div.info', 'Visit our web site'), - ]), - ]), - - h('div', [ - h('.fa.fa-twitter', [ - h('a.info', { - href: 'https://twitter.com/metamask_io', - target: '_blank', - }, 'Follow us on Twitter'), - ]), - ]), - - h('div.fa.fa-envelope', [ - h('a.info', { - target: '_blank', - href: 'mailto:support@metamask.io?subject=MetaMask Support', - }, 'Email us!'), - ]), - ]), - ]), - ]), - ]) - ) -} - -InfoScreen.prototype.navigateTo = function (url) { - global.platform.openWindow({ url }) -} - diff --git a/ui/app/send.js b/ui/app/send.js deleted file mode 100644 index 517b7690d..000000000 --- a/ui/app/send.js +++ /dev/null @@ -1,547 +0,0 @@ -// const { inherits } = require('util') -// const PersistentForm = require('../lib/persistent-form') -// const h = require('react-hyperscript') -// const connect = require('react-redux').connect -// const Identicon = require('./components/identicon') -// const EnsInput = require('./components/ens-input') -// const GasTooltip = require('./components/send/gas-tooltip') -// const CurrencyToggle = require('./components/send/currency-toggle') -// const GasFeeDisplay = require('./components/send/gas-fee-display') -// const { getSelectedIdentity } = require('./selectors') - -// const { -// showAccountsPage, -// backToAccountDetail, -// displayWarning, -// hideWarning, -// addToAddressBook, -// signTx, -// estimateGas, -// getGasPrice, -// } = require('./actions') -// const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util') -// const { isHex, numericBalance, isValidAddress, allNull } = require('./util') -// const { conversionUtil, conversionGreaterThan } = require('./conversion-util') - -// module.exports = connect(mapStateToProps)(SendTransactionScreen) - -// function mapStateToProps (state) { -// const { -// selectedAddress: address, -// accounts, -// identities, -// network, -// addressBook, -// conversionRate, -// currentBlockGasLimit: blockGasLimit, -// } = state.metamask -// const { warning } = state.appState -// const selectedIdentity = getSelectedIdentity(state) -// const account = accounts[address] - -// return { -// address, -// accounts, -// identities, -// network, -// addressBook, -// conversionRate, -// blockGasLimit, -// warning, -// selectedIdentity, -// error: warning && warning.split('.')[0], -// account, -// identity: identities[address], -// balance: account ? account.balance : null, -// } -// } - -// inherits(SendTransactionScreen, PersistentForm) -// function SendTransactionScreen () { -// PersistentForm.call(this) - -// // [WIP] These are the bare minimum of tx props needed to sign a transaction -// // We will need a few more for contract-related interactions -// this.state = { -// newTx: { -// from: '', -// to: '', -// amountToSend: '0x0', -// gasPrice: null, -// gas: null, -// amount: '0x0', -// txData: null, -// memo: '', -// }, -// activeCurrency: 'USD', -// tooltipIsOpen: false, -// errors: {}, -// isValid: false, -// } - -// this.back = this.back.bind(this) -// this.closeTooltip = this.closeTooltip.bind(this) -// this.onSubmit = this.onSubmit.bind(this) -// this.setActiveCurrency = this.setActiveCurrency.bind(this) -// this.toggleTooltip = this.toggleTooltip.bind(this) -// this.validate = this.validate.bind(this) -// this.getAmountToSend = this.getAmountToSend.bind(this) -// this.setErrorsFor = this.setErrorsFor.bind(this) -// this.clearErrorsFor = this.clearErrorsFor.bind(this) - -// this.renderFromInput = this.renderFromInput.bind(this) -// this.renderToInput = this.renderToInput.bind(this) -// this.renderAmountInput = this.renderAmountInput.bind(this) -// this.renderGasInput = this.renderGasInput.bind(this) -// this.renderMemoInput = this.renderMemoInput.bind(this) -// this.renderErrorMessage = this.renderErrorMessage.bind(this) -// } - -// SendTransactionScreen.prototype.componentWillMount = function () { -// const { newTx } = this.state -// const { address } = this.props - -// Promise.all([ -// this.props.dispatch(getGasPrice()), -// this.props.dispatch(estimateGas({ -// from: address, -// gas: '746a528800', -// })), -// ]) -// .then(([blockGasPrice, estimatedGas]) => { -// console.log({ blockGasPrice, estimatedGas}) -// this.setState({ -// newTx: { -// ...newTx, -// gasPrice: blockGasPrice, -// gas: estimatedGas, -// }, -// }) -// }) -// } - -// SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) { -// const { errors } = this.state -// const errorMessage = errors[errorType]; - -// return errorMessage || warning -// ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ]) -// : null -// } - -// SendTransactionScreen.prototype.renderFromInput = function (from, identities) { -// return h('div.send-screen-input-wrapper', [ - -// h('div', 'From:'), - -// h('input.large-input.send-screen-input', { -// list: 'accounts', -// placeholder: 'Account', -// value: from, -// onChange: (event) => { -// this.setState({ -// newTx: { -// ...this.state.newTx, -// from: event.target.value, -// }, -// }) -// }, -// onBlur: () => this.setErrorsFor('from'), -// onFocus: event => { -// this.clearErrorsFor('from') -// this.state.newTx.from && event.target.select() -// }, -// }), - -// h('datalist#accounts', [ -// Object.entries(identities).map(([key, { address, name }]) => { -// return h('option', { -// value: address, -// label: name, -// key: address, -// }) -// }), -// ]), - -// this.renderErrorMessage('from'), - -// ]) -// } - -// SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) { -// return h('div.send-screen-input-wrapper', [ - -// h('div', 'To:'), - -// h('input.large-input.send-screen-input', { -// name: 'address', -// list: 'addresses', -// placeholder: 'Address', -// value: to, -// onChange: (event) => { -// this.setState({ -// newTx: { -// ...this.state.newTx, -// to: event.target.value, -// }, -// }) -// }, -// onBlur: () => { -// this.setErrorsFor('to') -// }, -// onFocus: event => { -// this.clearErrorsFor('to') -// this.state.newTx.to && event.target.select() -// }, -// }), - -// h('datalist#addresses', [ -// // Corresponds to the addresses owned. -// ...Object.entries(identities).map(([key, { address, name }]) => { -// return h('option', { -// value: address, -// label: name, -// key: address, -// }) -// }), -// // Corresponds to previously sent-to addresses. -// ...addressBook.map(({ address, name }) => { -// return h('option', { -// value: address, -// label: name, -// key: address, -// }) -// }), -// ]), - -// this.renderErrorMessage('to'), - -// ]) -// } - -// SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) { -// return h('div.send-screen-input-wrapper', [ - -// h('div.send-screen-amount-labels', [ -// h('span', 'Amount'), -// h(CurrencyToggle, { -// activeCurrency, -// onClick: (newCurrency) => this.setActiveCurrency(newCurrency), -// }), // holding on icon from design -// ]), - -// h('input.large-input.send-screen-input', { -// placeholder: `0 ${activeCurrency}`, -// type: 'number', -// onChange: (event) => { -// const amountToSend = event.target.value -// ? this.getAmountToSend(event.target.value) -// : '0x0' - -// this.setState({ -// newTx: Object.assign( -// this.state.newTx, -// { -// amount: event.target.value, -// amountToSend: amountToSend, -// } -// ), -// }) -// }, -// onBlur: () => { -// this.setErrorsFor('amount') -// }, -// onFocus: () => this.clearErrorsFor('amount'), -// }), - -// this.renderErrorMessage('amount'), - -// ]) -// } - -// SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) { -// return h('div.send-screen-input-wrapper', [ -// this.state.tooltipIsOpen && h(GasTooltip, { -// className: 'send-tooltip', -// gasPrice, -// gasLimit: gas, -// onClose: this.closeTooltip, -// onFeeChange: ({gasLimit, gasPrice}) => { -// this.setState({ -// newTx: { -// ...this.state.newTx, -// gas: gasLimit, -// gasPrice, -// }, -// }) -// }, -// }), - -// h('div.send-screen-gas-labels', [ -// h('span', [ -// h('i.fa.fa-bolt'), -// 'Gas fee:', -// ]), -// h('span', 'What\'s this?'), -// ]), - -// // TODO: handle loading time when switching to USD -// h('div.large-input.send-screen-gas-input', {}, [ -// h(GasFeeDisplay, { -// activeCurrency, -// conversionRate, -// gas, -// gasPrice, -// blockGasLimit, -// }), -// h('div.send-screen-gas-input-customize', { -// onClick: this.toggleTooltip, -// }, [ -// 'Customize', -// ]), -// ]), - -// ]) -// } - -// SendTransactionScreen.prototype.renderMemoInput = function () { -// return h('div.send-screen-input-wrapper', [ -// h('div', 'Transaction memo (optional)'), -// h('input.large-input.send-screen-input', { -// onChange: () => { -// this.setState({ -// newTx: Object.assign( -// this.state.newTx, -// { -// memo: event.target.value, -// } -// ), -// }) -// }, -// }), -// ]) -// } - -// SendTransactionScreen.prototype.render = function () { -// this.persistentFormParentId = 'send-tx-form' - -// const props = this.props -// const { -// warning, -// identities, -// addressBook, -// conversionRate, -// } = props - -// const { -// blockGasLimit, -// newTx, -// activeCurrency, -// isValid, -// } = this.state -// const { gas, gasPrice } = newTx - -// return ( - -// h('div.send-screen-wrapper', [ -// // Main Send token Card -// h('div.send-screen-card', [ - -// h('img.send-eth-icon', { src: '../images/eth_logo.svg' }), - -// h('div.send-screen__title', 'Send'), - -// h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'), - -// this.renderFromInput(this.state.newTx.from, identities), - -// this.renderToInput(this.state.newTx.to, identities, addressBook), - -// this.renderAmountInput(activeCurrency), - -// this.renderGasInput( -// gasPrice || '0x0', -// gas || '0x0', -// activeCurrency, -// conversionRate, -// blockGasLimit -// ), - -// this.renderMemoInput(), - -// this.renderErrorMessage(null, warning), - -// ]), - -// // Buttons underneath card -// h('section.flex-column.flex-center', [ -// h('button.btn-secondary.send-screen__send-button', { -// className: !isValid && 'send-screen__send-button__disabled', -// onClick: (event) => isValid && this.onSubmit(event), -// }, 'Next'), -// h('button.btn-tertiary.send-screen__cancel-button', { -// onClick: this.back, -// }, 'Cancel'), -// ]), -// ]) - -// ) -// } - -// SendTransactionScreen.prototype.toggleTooltip = function () { -// this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen }) -// } - -// SendTransactionScreen.prototype.closeTooltip = function () { -// this.setState({ tooltipIsOpen: false }) -// } - -// SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) { -// this.setState({ activeCurrency: newCurrency }) -// } - -// SendTransactionScreen.prototype.back = function () { -// var address = this.props.address -// this.props.dispatch(backToAccountDetail(address)) -// } - -// SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) { -// const sufficientBalance = conversionGreaterThan( -// { -// value: balance, -// fromNumericBase: 'hex', -// }, -// { -// value: amountToSend, -// fromNumericBase: 'hex', -// }, -// ) - -// const amountLessThanZero = conversionGreaterThan( -// { -// value: 0, -// fromNumericBase: 'dec', -// }, -// { -// value: amountToSend, -// fromNumericBase: 'hex', -// }, -// ) - -// const errors = {} - -// if (!sufficientBalance) { -// errors.amount = 'Insufficient funds.' -// } - -// if (amountLessThanZero) { -// errors.amount = 'Can not send negative amounts of ETH.' -// } - -// if (!from) { -// errors.from = 'Required' -// } - -// if (from && !isValidAddress(from)) { -// errors.from = 'Sender address is invalid.' -// } - -// if (!to) { -// errors.to = 'Required' -// } - -// if (to && !isValidAddress(to)) { -// errors.to = 'Recipient address is invalid.' -// } - -// // if (txData && !isHex(stripHexPrefix(txData))) { -// // message = 'Transaction data must be hex string.' -// // return this.props.dispatch(displayWarning(message)) -// // } - -// return { -// isValid: allNull(errors), -// errors, -// } -// } - -// SendTransactionScreen.prototype.getAmountToSend = function (amount) { -// const { activeCurrency } = this.state -// const { conversionRate } = this.props - -// return conversionUtil(amount, { -// fromNumericBase: 'dec', -// toNumericBase: 'hex', -// fromCurrency: activeCurrency, -// toCurrency: 'ETH', -// toDenomination: 'WEI', -// conversionRate, -// invertConversionRate: activeCurrency !== 'ETH', -// }) -// } - -// SendTransactionScreen.prototype.setErrorsFor = function (field) { -// const { balance } = this.props -// const { newTx, errors: previousErrors } = this.state -// const { amountToSend } = newTx - -// const { -// isValid, -// errors: newErrors -// } = this.validate(balance, amountToSend, newTx) - -// const nextErrors = Object.assign({}, previousErrors, { -// [field]: newErrors[field] || null -// }) - -// if (!isValid) { -// this.setState({ -// errors: nextErrors, -// isValid, -// }) -// } -// } - -// SendTransactionScreen.prototype.clearErrorsFor = function (field) { -// const { errors: previousErrors } = this.state -// const nextErrors = Object.assign({}, previousErrors, { -// [field]: null -// }) - -// this.setState({ -// errors: nextErrors, -// isValid: allNull(nextErrors), -// }) -// } - -// SendTransactionScreen.prototype.onSubmit = function (event) { -// event.preventDefault() -// const { warning, balance } = this.props -// const state = this.state || {} - -// const recipient = state.newTx.to -// const sender = state.newTx.from -// const nickname = state.nickname || ' ' - -// // TODO: convert this to hex when created and include it in send -// const txData = state.newTx.memo - -// this.props.dispatch(hideWarning()) - -// this.props.dispatch(addToAddressBook(recipient, nickname)) - -// var txParams = { -// from: this.state.newTx.from, -// to: this.state.newTx.to, - -// value: this.state.newTx.amountToSend, - -// gas: this.state.newTx.gas, -// gasPrice: this.state.newTx.gasPrice, -// } - -// if (recipient) txParams.to = addHexPrefix(recipient) -// if (txData) txParams.data = txData - -// this.props.dispatch(signTx(txParams)) -// } diff --git a/ui/app/template.js b/ui/app/template.js deleted file mode 100644 index d15b30fd2..000000000 --- a/ui/app/template.js +++ /dev/null @@ -1,30 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect - -module.exports = connect(mapStateToProps)(COMPONENTNAME) - -function mapStateToProps (state) { - return {} -} - -inherits(COMPONENTNAME, Component) -function COMPONENTNAME () { - Component.call(this) -} - -COMPONENTNAME.prototype.render = function () { - const props = this.props - - return ( - h('div', { - style: { - background: 'blue', - }, - }, [ - `Hello, ${props.sender}`, - ]) - ) -} - diff --git a/ui/app/token-tracker.js b/ui/app/token-tracker.js deleted file mode 100644 index e69de29bb..000000000 -- cgit v1.2.3 From e504bc6215967bfa0408d1eac862beed3f4f3a46 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:28:02 -0700 Subject: Add connecting indication templates --- ui/app/app.js | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 954299a6a..6d9296131 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -132,7 +132,7 @@ App.prototype.render = function () { } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null + this.getConnectingLabel() : null log.debug('Main ui render function') return ( @@ -550,6 +550,27 @@ App.prototype.toggleMetamaskActive = function () { } } +App.prototype.getConnectingLabel = function () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = t('connectingToMainnet') + } else if (providerName === 'ropsten') { + name = t('connectingToRopsten') + } else if (providerName === 'kovan') { + name = t('connectingToRopsten') + } else if (providerName === 'rinkeby') { + name = t('connectingToRinkeby') + } else { + name = t('connectingToUnknown') + } + + return name +} + App.prototype.getNetworkName = function () { const { provider } = this.props const providerName = provider.type @@ -557,15 +578,15 @@ App.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = 'Main Ethereum Network' + name = t('mainnet') } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' + name = t('ropsten') } else if (providerName === 'kovan') { - name = 'Kovan Test Network' + name = t('kovan') } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' + name = t('rinkeby') } else { - name = 'Unknown Private Network' + name = t('unknownNetwork') } return name -- cgit v1.2.3 From 17371bb7ecaf5fba3773cd2a0e8f8784d2c4bd49 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:30:45 -0700 Subject: Add login templates --- ui/app/unlock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index ac97d04d0..322808619 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -67,7 +67,7 @@ UnlockScreen.prototype.render = function () { style: { margin: 10, }, - }, 'Log In'), + }, t('login')), h('p.pointer', { onClick: () => { @@ -81,7 +81,7 @@ UnlockScreen.prototype.render = function () { color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, 'Restore from seed phrase'), + }, t('restoreFromSeed')), h('p.pointer', { onClick: () => { @@ -94,7 +94,7 @@ UnlockScreen.prototype.render = function () { textDecoration: 'underline', marginTop: '32px', }, - }, 'Use classic interface'), + }, t('classicInterface')), ]) ) } -- cgit v1.2.3 From 2e7d4db2dec000d31ad967400d25b46aabf70e29 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:43:22 -0700 Subject: Add recover and backup tempaltes --- ui/app/keychains/hd/recover-seed/confirmation.js | 7 +++-- ui/app/keychains/hd/restore-vault.js | 35 ++++++++++++++---------- 2 files changed, 24 insertions(+), 18 deletions(-) (limited to 'ui/app') diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index 4335186a5..bc5339549 100644 --- a/ui/app/keychains/hd/recover-seed/confirmation.js +++ b/ui/app/keychains/hd/recover-seed/confirmation.js @@ -4,6 +4,7 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../../actions') +const t = require('../../../../i18n') module.exports = connect(mapStateToProps)(RevealSeedConfirmation) @@ -49,13 +50,13 @@ RevealSeedConfirmation.prototype.render = function () { }, }, [ - h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), + h('h4', t('revealSeedWordsWarning')), // confirmation h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'Enter your password to confirm', + placeholder: t('enterPasswordConfirm'), onKeyPress: this.checkConfirmation.bind(this), style: { width: 260, @@ -91,7 +92,7 @@ RevealSeedConfirmation.prototype.render = function () { ), props.inProgress && ( - h('span.in-progress-notification', 'Generating Seed...') + h('span.in-progress-notification', t('generatingSeed')) ), ]), ]) diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index cb4088f61..5e4e004cf 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const PersistentForm = require('../../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') +const t = require('../../../i18n') const actions = require('../../actions') module.exports = connect(mapStateToProps)(RestoreVaultScreen) @@ -36,23 +37,23 @@ RestoreVaultScreen.prototype.render = function () { padding: 6, }, }, [ - 'Restore Vault', + t('restoreVault'), ]), // wallet seed entry - h('h3', 'Wallet Seed'), + h('h3', t('walletSeed')), h('textarea.twelve-word-phrase.letter-spacey', { dataset: { persistentFormId: 'wallet-seed', }, - placeholder: 'Enter your secret twelve word phrase here to restore your vault.', + placeholder: t('secretPhrase'), }), // password h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'New Password (min 8 chars)', + placeholder: t('newPassword8Chars'), dataset: { persistentFormId: 'password', }, @@ -66,7 +67,7 @@ RestoreVaultScreen.prototype.render = function () { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: 'Confirm Password', + placeholder: t('confirmPassword'), onKeyPress: this.createOnEnter.bind(this), dataset: { persistentFormId: 'password-confirmation', @@ -93,16 +94,20 @@ RestoreVaultScreen.prototype.render = function () { // cancel h('button.primary', { onClick: this.showInitializeMenu.bind(this), - }, 'CANCEL'), + style: { + textTransform: 'uppercase', + }, + }, t('cancel')), // submit h('button.primary', { onClick: this.createNewVaultAndRestore.bind(this), - }, 'OK'), - + style: { + textTransform: 'uppercase', + }, + }, t('ok')), ]), ]) - ) } @@ -131,13 +136,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { var passwordConfirmBox = document.getElementById('password-box-confirm') var passwordConfirm = passwordConfirmBox.value if (password.length < 8) { - this.warning = 'Password not long enough' + this.warning = t('passwordNotLongEnough') this.props.dispatch(actions.displayWarning(this.warning)) return } if (password !== passwordConfirm) { - this.warning = 'Passwords don\'t match' + this.warning = t('passwordsDontMatch') this.props.dispatch(actions.displayWarning(this.warning)) return } @@ -147,18 +152,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // true if the string has more than a space between words. if (seed.split(' ').length > 1) { - this.warning = 'there can only be a space between words' + this.warning = t('spaceBetween') this.props.dispatch(actions.displayWarning(this.warning)) return } // true if seed contains a character that is not between a-z or a space if (!seed.match(/^[a-z ]+$/)) { - this.warning = 'seed words only have lowercase characters' - this.props.dispatch(actions.displayWarning(this.warning)) + this.warning = t('loweCaseWords') + this.props.dispatch(actions.displayWarning(this.warning)) return } if (seed.split(' ').length !== 12) { - this.warning = 'seed phrases are 12 words long' + this.warning = t('seedPhraseReq') this.props.dispatch(actions.displayWarning(this.warning)) return } -- cgit v1.2.3 From 293ca6c9a630b939c97e4939e0416a57d8bad79c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 12:02:34 -0700 Subject: Add template for settings and info --- ui/app/settings.js | 48 +++++++++++++++++++++++++----------------------- 1 file changed, 25 insertions(+), 23 deletions(-) (limited to 'ui/app') diff --git a/ui/app/settings.js b/ui/app/settings.js index 466f739d5..60d68bfed 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -10,6 +10,7 @@ const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const t = require('../i18n') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -44,8 +45,8 @@ class Settings extends Component { return h('div.settings__tabs', [ h(TabBar, { tabs: [ - { content: 'Settings', key: 'settings' }, - { content: 'Info', key: 'info' }, + { content: t('settings'), key: 'settings' }, + { content: t('info'), key: 'info' }, ], defaultTab: activeTab, tabSelected: key => this.setState({ activeTab: key }), @@ -84,7 +85,7 @@ class Settings extends Component { h('div.settings__content-item', [ h('div.settings__content-item-col', [ h(SimpleDropdown, { - placeholder: 'Select Currency', + placeholder: t('selectCurrency'), options: getInfuraCurrencyOptions(), selectedOption: currentCurrency, onSelect: newCurrency => setCurrentCurrency(newCurrency), @@ -101,31 +102,31 @@ class Settings extends Component { switch (provider.type) { case 'mainnet': - title = 'Current Network' - value = 'Main Ethereum Network' + title = t('currentNetwork') + value = t('mainnet') color = '#038789' break case 'ropsten': - title = 'Current Network' - value = 'Ropsten Test Network' + title = t('currentNetwork') + value = t('ropsten') color = '#e91550' break case 'kovan': - title = 'Current Network' - value = 'Kovan Test Network' + title = t('currentNetwork') + value = t('kovan') color = '#690496' break case 'rinkeby': - title = 'Current Network' - value = 'Rinkeby Test Network' + title = t('currentNetwork') + value = t('rinkeby') color = '#ebb33f' break default: - title = 'Current RPC' + title = t('currentRpc') value = provider.rpcTarget } @@ -146,12 +147,12 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'New RPC URL'), + h('span', t('newRPC')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('input.settings__input', { - placeholder: 'New RPC URL', + placeholder: t('newRPC'), onChange: event => this.setState({ newRpc: event.target.value }), onKeyPress: event => { if (event.key === 'Enter') { @@ -164,7 +165,7 @@ class Settings extends Component { event.preventDefault() this.validateRpc(this.state.newRpc) }, - }, 'Save'), + }, t('save')), ]), ]), ]) @@ -180,9 +181,9 @@ class Settings extends Component { const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { - displayWarning('URIs require the appropriate HTTP/HTTPS prefix.') + displayWarning(t('uriErrorMsg')) } else { - displayWarning('Invalid RPC URI') + displayWarning(t('invalidRPC')) } } } @@ -194,7 +195,7 @@ class Settings extends Component { h('div', 'State Logs'), h( 'div.settings__content-description', - 'State logs contain your public account addresses and sent transactions.' + t('stateLogsDescription') ), ]), h('div.settings__content-item', [ @@ -203,13 +204,13 @@ class Settings extends Component { onClick (event) { window.logStateString((err, result) => { if (err) { - this.state.dispatch(actions.displayWarning('Error in retrieving state logs.')) + this.state.dispatch(actions.displayWarning(t('stateLogError'))) } else { exportAsFile('MetaMask State Logs.json', result) } }) }, - }, 'Download State Logs'), + }, t('downloadStateLogs')), ]), ]), ]) @@ -229,7 +230,7 @@ class Settings extends Component { event.preventDefault() revealSeedConfirmation() }, - }, 'Reveal Seed Words'), + }, t('revealSeedWords')), ]), ]), ]) @@ -249,7 +250,7 @@ class Settings extends Component { event.preventDefault() setFeatureFlagToBeta() }, - }, 'Use old UI'), + }, t('useOldUI')), ]), ]), ]) @@ -268,7 +269,7 @@ class Settings extends Component { event.preventDefault() showResetAccountConfirmationModal() }, - }, 'Reset Account'), + }, t('resetAccount')), ]), ]), ]) @@ -445,3 +446,4 @@ const mapDispatchToProps = dispatch => { } module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings) + -- cgit v1.2.3 From f5b0d56b9d0b0ae0d4076ff296fdea87316fd32c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 12:37:10 -0700 Subject: Add send screen template --- ui/app/send-v2.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..dbfa6025d 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -1,6 +1,7 @@ const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') +const t = require('../i18n') const ethAbi = require('ethereumjs-abi') const ethUtil = require('ethereumjs-util') @@ -180,13 +181,12 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { SendTransactionScreen.prototype.renderHeader = function () { const { selectedToken, clearSend, goHome } = this.props - const tokenText = selectedToken ? 'tokens' : 'ETH' return h('div.page-container__header', [ - h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'), + h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')), - h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`), + h('div.page-container__subtitle', t('onlySendToEtherAddress')), h('div.page-container__header-close', { onClick: () => { @@ -257,11 +257,11 @@ SendTransactionScreen.prototype.handleToChange = function (to) { let toError = null if (!to) { - toError = 'Required' + toError = t('required') } else if (!isValidAddress(to)) { - toError = 'Recipient address is invalid' + toError = t('invalidAddressRecipient') } else if (to === from) { - toError = 'From and To address cannot be the same' + toError = t('fromToSame') } updateSendTo(to) @@ -277,9 +277,9 @@ SendTransactionScreen.prototype.renderToRow = function () { h('div.send-v2__form-label', [ - 'To:', + t('to'), - this.renderErrorMessage('to'), + this.renderErrorMessage(t('to')), ]), @@ -377,11 +377,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) { ) if (conversionRate && !sufficientBalance) { - amountError = 'Insufficient funds.' + amountError = t('insufficientFunds') } else if (verifyTokenBalance && !sufficientTokens) { - amountError = 'Insufficient tokens.' + amountError = t('insufficientTokens') } else if (amountLessThanZero) { - amountError = 'Can not send negative amounts of ETH.' + amountError = t('negativeETH') } updateSendErrors({ amount: amountError }) @@ -411,7 +411,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () { setMaxModeTo(true) this.setAmountToMax() }, - }, [ !maxModeOn ? 'Max' : '' ]), + }, [ !maxModeOn ? t('max') : '' ]), ]), h('div.send-v2__form-field', [ @@ -439,7 +439,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { return h('div.send-v2__form-row', [ - h('div.send-v2__form-label', 'Gas fee:'), + h('div.send-v2__form-label', h('gasFee')), h('div.send-v2__form-field', [ @@ -507,11 +507,11 @@ SendTransactionScreen.prototype.renderFooter = function () { clearSend() goHome() }, - }, 'Cancel'), + }, t('cancel')), h('button.btn-clear.page-container__footer-button', { disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), - }, 'Next'), + }, t('next')), ]) } -- cgit v1.2.3 From faa4ffe1636ce9f7cc68bffe1eb7b1e685a2d000 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 19 Mar 2018 14:32:58 -0700 Subject: new-ui - dont exclude `txParams.data` when editing and updating txParams --- ui/app/send-v2.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..491c4dda3 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -571,9 +571,11 @@ SendTransactionScreen.prototype.getEditedTx = function () { data, }) } else { + const data = unapprovedTxs[editingTransactionId].txParams.data Object.assign(editingTx.txParams, { value: ethUtil.addHexPrefix(amount), to: ethUtil.addHexPrefix(to), + data, }) } -- cgit v1.2.3 From 5cdaf270f798218bddc72bde05d8ab77267cfb94 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 20 Mar 2018 06:47:45 -0230 Subject: Don't block user from setting gas if estimating gas returns errors. (#3627) --- ui/app/components/send/gas-fee-display-v2.js | 7 +++++-- ui/app/components/send/send-v2-container.js | 1 + ui/app/css/itcss/components/send.scss | 6 ++++++ ui/app/send-v2.js | 7 +++++++ 4 files changed, 19 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 0c6f76303..9aaa31b1e 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -18,6 +18,7 @@ GasFeeDisplay.prototype.render = function () { onClick, primaryCurrency = 'ETH', convertedCurrency, + gasLoadingError, } = this.props return h('div.send-v2__gas-fee-display', [ @@ -31,11 +32,13 @@ GasFeeDisplay.prototype.render = function () { convertedPrefix: '$', readOnly: true, }) - : h('div.currency-display', t('loading')), + : gasLoadingError + ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.') + : h('div.currency-display', t('loading')), h('button.send-v2__sliders-icon-container', { onClick, - disabled: !gasTotal, + disabled: !gasTotal && !gasLoadingError, }, [ h('i.fa.fa-sliders.send-v2__sliders-icon'), ]), diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 1106902b7..d1319b6dc 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -48,6 +48,7 @@ function mapStateToProps (state) { primaryCurrency, convertedCurrency: getCurrentCurrency(state), data, + selectedAddress, amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate, tokenContract: getSelectedTokenContract(state), unapprovedTxs: state.metamask.unapprovedTxs, diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bb17e53cd..89739171d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -660,6 +660,12 @@ &__gas-fee-display { width: 100%; + + .currency-display--message { + padding: 8px 38px 8px 10px; + display: flex; + align-items: center; + } } &__sliders-icon-container { diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..5ac59fc29 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -42,6 +42,7 @@ function SendTransactionScreen () { to: null, amount: null, }, + gasLoadingError: false, } this.handleToChange = this.handleToChange.bind(this) @@ -128,6 +129,10 @@ SendTransactionScreen.prototype.updateGas = function () { .then(([gasPrice, gas]) => { const newGasTotal = this.getGasTotal(gas, gasPrice) updateGasTotal(newGasTotal) + this.setState({ gasLoadingError: false }) + }) + .catch(err => { + this.setState({ gasLoadingError: true }) }) } else { const newGasTotal = this.getGasTotal(gasLimit, gasPrice) @@ -436,6 +441,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { showCustomizeGasModal, gasTotal, } = this.props + const { gasLoadingError } = this.state return h('div.send-v2__form-row', [ @@ -448,6 +454,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { conversionRate, convertedCurrency, onClick: showCustomizeGasModal, + gasLoadingError, }), ]), -- cgit v1.2.3 From 85a612b34de27c3f4dcaa070e39cf88d21541652 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 02:34:12 -0700 Subject: I18n add-token.js --- ui/app/add-token.js | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b8878b772..b3a5bdc20 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -26,6 +26,7 @@ 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' @@ -139,28 +140,28 @@ AddTokenScreen.prototype.validate = function () { if (customAddress) { const validAddress = ethUtil.isValidAddress(customAddress) if (!validAddress) { - errors.customAddress = 'Address is invalid. ' + errors.customAddress = t('invalidAddress') } const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36 if (!validDecimals) { - errors.customDecimals = 'Decimals must be at least 0, and not over 36.' + errors.customDecimals = t('decimalsMustZerotoTen') } const symbolLen = customSymbol.trim().length const validSymbol = symbolLen > 0 && symbolLen < 10 if (!validSymbol) { - errors.customSymbol = 'Symbol must be between 0 and 10 characters.' + errors.customSymbol = t('symbolBetweenZeroTen') } const ownAddress = identitiesList.includes(standardAddress) if (ownAddress) { - errors.customAddress = 'Personal address detected. Input the token contract address.' + errors.customAddress = t('personalAddressDetected') } const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) if (tokenAlreadyAdded) { - errors.customAddress = 'Token has already been added.' + errors.customAddress = t('tokenAlreadyAdded') } } else if ( Object.entries(selectedTokens) @@ -168,7 +169,7 @@ AddTokenScreen.prototype.validate = function () { isEmpty && !isSelected ), true) ) { - errors.tokenSelector = 'Must select at least 1 token.' + errors.tokenSelector = t('mustSelectOne') } return { @@ -198,7 +199,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customAddress, }), }, [ - h('div.add-token__add-custom-label', 'Token Address'), + h('div.add-token__add-custom-label', t('tokenAddress')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenAddressDidChange, @@ -211,7 +212,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customSymbol, }), }, [ - h('div.add-token__add-custom-label', 'Token Symbol'), + h('div.add-token__add-custom-label', t('tokenSymbol')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenSymbolDidChange, @@ -225,7 +226,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customDecimals, }), }, [ - h('div.add-token__add-custom-label', 'Decimals of Precision'), + h('div.add-token__add-custom-label', t('decimal')), h('input.add-token__add-custom-input', { type: 'number', onChange: this.tokenDecimalsDidChange, @@ -299,11 +300,11 @@ 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', 'Add Token'), - h('div.add-token__description', 'Would you like to add these tokens?'), + h('div.add-token__title', t('addToken')), + h('div.add-token__description', t('likeToAddTokens')), ]), h('div.add-token__content-container.add-token__confirmation-content', [ - h('div.add-token__description.add-token__confirmation-description', 'Your balances'), + h('div.add-token__description.add-token__confirmation-description', t('balances')), h('div.add-token__confirmation-token-list', Object.entries(tokens) .map(([ address, token ]) => ( @@ -322,10 +323,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token__buttons', [ h('button.btn-cancel.add-token__button', { onClick: () => this.setState({ isShowingConfirmation: false }), - }, 'Back'), + }, t('back')), h('button.btn-clear.add-token__button', { onClick: () => addTokens(tokens).then(goHome), - }, 'Add Tokens'), + }, t('addTokens')), ]), ]) ) @@ -341,15 +342,15 @@ AddTokenScreen.prototype.render = function () { h('div.add-token', [ h('div.add-token__wrapper', [ h('div.add-token__title-container', [ - h('div.add-token__title', 'Add Token'), - h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'), - h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'), + 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: 'Search', + placeholder: t('search'), onChange: e => this.setState({ searchQuery: e.target.value }), }), h('div.add-token__search-input-error-message', errors.tokenSelector), @@ -363,7 +364,7 @@ AddTokenScreen.prototype.render = function () { h('div.add-token__add-custom', { onClick: () => this.setState({ isCollapsed: !isCollapsed }), }, [ - 'Add custom token', + t('addCustomToken'), h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`), ]), this.renderCustomForm(), @@ -372,10 +373,10 @@ AddTokenScreen.prototype.render = function () { h('div.add-token__buttons', [ h('button.btn-cancel.add-token__button', { onClick: goHome, - }, 'Cancel'), + }, t('cancel')), h('button.btn-clear.add-token__button', { onClick: this.onNext, - }, 'Next'), + }, t('next')), ]), ]) ) -- cgit v1.2.3 From 4af1003b0efa8329718f5a95826976a54194d49b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 20 Mar 2018 04:32:20 -0700 Subject: Fix Account Names being cropped (#3626) --- ui/app/css/itcss/components/account-menu.scss | 3 --- ui/app/css/itcss/components/network.scss | 3 ++- ui/app/css/itcss/components/newui-sections.scss | 1 - ui/app/css/itcss/components/transaction-list.scss | 4 +++- ui/app/css/itcss/generic/index.scss | 2 +- ui/app/css/itcss/generic/reset.scss | 4 ---- 6 files changed, 6 insertions(+), 11 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 4752741aa..c4037d862 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -87,7 +87,6 @@ flex: 1 0 auto; display: flex; flex-flow: column nowrap; - padding-top: 4px; } &__check-mark { @@ -115,13 +114,11 @@ color: $white; font-size: 18px; font-weight: 300; - line-height: 16px; } &__balance { color: $dusty-gray; font-size: 14px; - line-height: 19px; } &__action { diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c32d1de5e..374cb71b6 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -10,8 +10,9 @@ .network-component.pointer { border: 2px solid $silver; border-radius: 82px; - padding: 3px; + padding: 7px 3px; flex: 0 0 auto; + display: flex; &.ethereum-network .menu-icon-circle div { background-color: rgba(3, 135, 137, .7) !important; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5cdda5e6c..777a82318 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -265,7 +265,6 @@ $wallet-view-bg: $alabaster; .account-name { font-size: 24px; font-weight: 300; - line-height: 20px; color: $black; margin-top: 8px; margin-bottom: .9rem; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c3df493df..2c28a2a27 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -97,7 +97,7 @@ .tx-list-content-wrapper { align-items: stretch; - margin-bottom: 4px; + margin: 4px 0; flex: 1 0 auto; width: 100%; display: flex; @@ -136,6 +136,7 @@ align-self: center; flex: 0 0 auto; margin-right: 16px; + display: flex; } .tx-list-account-and-status-wrapper { @@ -192,6 +193,7 @@ } .tx-list-item { + height: 80px; border-top: 1px solid rgb(231, 231, 231); flex: 0 0 auto; display: flex; diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 1fbd9896f..1e226b93e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -13,7 +13,6 @@ body { font-family: Roboto, Arial; color: #4d4d4d; font-weight: 300; - line-height: 1.4em; background: #f7f7f7; width: 100%; height: 100%; @@ -103,6 +102,7 @@ input.large-input { &::after { content: '\00D7'; font-size: 40px; + line-height: 20px; } } diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss index e054d533e..a417a0453 100644 --- a/ui/app/css/itcss/generic/reset.scss +++ b/ui/app/css/itcss/generic/reset.scss @@ -112,10 +112,6 @@ section { display: block; } -body { - line-height: 1; -} - ol, ul { list-style: none; -- cgit v1.2.3 From dc92b56f184100a24aaf53c3e93619514159f938 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 09:07:23 -0230 Subject: Identify token transactions by method names token data, and not just whether they've been add via metamask. --- ui/app/components/pending-tx/confirm-send-token.js | 1 + ui/app/components/pending-tx/index.js | 14 ++++++++++---- ui/app/selectors.js | 3 ++- 3 files changed, 13 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 0a4182014..c347dd21e 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -86,6 +86,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..9676e9c86 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -63,14 +63,17 @@ PendingTx.prototype.componentWillMount = async function () { isFetching: false, }) } + const tokenData = txParams && abiDecoder.decodeMethod(txParams.data) + const { name: tokenMethodName } = tokenData || {} + const isTokenTransaction = ['transfer', 'approve', 'transferFrom'] + .find(possibleName => tokenMethodName === possibleName) - try { + 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 +86,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/selectors.js b/ui/app/selectors.js index 5d2635775..a8b32f129 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -55,8 +55,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) { -- cgit v1.2.3 From 36b371283cc91b479a9a0e34ace108461576140a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 12:41:03 -0230 Subject: Improve responsiveness of gas price row on confirm screen. --- ui/app/css/itcss/components/confirm.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 1977b49ae..abe138f54 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -242,6 +242,22 @@ section .confirm-screen-account-number, } } +@media screen and (max-width: 379px) { + .confirm-screen-row { + span.confirm-screen-section-column { + flex: 0.4; + } + + div.confirm-screen-section-column { + flex: 0.6; + } + + .currency-display__input { + font-size: 14px; + } + } +} + .confirm-screen-row-detail { font-size: 12px; line-height: 16px; -- cgit v1.2.3 From 49e3ada382e061216ce4306ab17145b94e08ed62 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 13:28:59 -0230 Subject: Fix styling regression from master merge. --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c13f24953..d03faf486 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -170,6 +170,7 @@ @media screen and (max-width: 379px) { margin-left: 0px; + text-align: center; } } @@ -244,7 +245,6 @@ } .tx-list-item { - height: 80px; border-top: 1px solid rgb(231, 231, 231); flex: 0 0 auto; display: flex; -- cgit v1.2.3 From cffaf44714830904526c05bd4acf7a88c6e3cabe Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 09:49:12 -0700 Subject: i18n Import flow --- ui/app/accounts/import/index.js | 6 +++--- ui/app/accounts/import/json.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index c1b190e3d..fc9031a65 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -37,7 +37,7 @@ AccountImportSubview.prototype.render = function () { h('div.new-account-import-form', [ h('.new-account-import-disclaimer', [ - h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '), + h('span', t('importAccountMsg')), h('span', { style: { cursor: 'pointer', @@ -48,12 +48,12 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, 'here'), + }, t('here')), ]), h('div.new-account-import-form__select-section', [ - h('div.new-account-import-form__select-label', 'Select Type'), + h('div.new-account-import-form__select-label', t('selectType')), h(Select, { className: 'new-account-import-form__select', diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 1b5e485d7..fa25168f1 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -84,7 +84,7 @@ class JsonImportSubview extends Component { const state = this.state if (!state) { - const message = 'You must select a valid file to import.' + const message = t('validFileImport') return this.props.displayWarning(message) } @@ -102,7 +102,7 @@ class JsonImportSubview extends Component { const message = t('needImportPassword') return this.props.displayWarning(message) } - + this.props.importNewJsonAccount([ fileContents, password ]) } } -- cgit v1.2.3 From 7a8e0802455b8819dac12d73a4a8e245d6907dc0 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 10:29:22 -0700 Subject: Started on Tx list i18n --- ui/app/components/tx-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 34dc837ae..b6538347c 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -40,7 +40,7 @@ TxList.prototype.render = function () { return h('div.flex-column', [ h('div.flex-row.tx-list-header-wrapper', [ h('div.flex-row.tx-list-header', [ - h('div', 'transactions'), + h('div', t('transactions')), ]), ]), h('div.flex-column.tx-list-container', {}, [ -- cgit v1.2.3 From 4fc68ca20833e5f6c70b8a532d79ac60e65f4704 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 10:56:35 -0700 Subject: Add i18n in settings/info --- ui/app/settings.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/settings.js b/ui/app/settings.js index 60d68bfed..105cbb40b 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -59,7 +59,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'Use Blockies Identicon'), + h('span', t('blockiesIdenticon')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ @@ -79,7 +79,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'Current Conversion'), + h('span', t('currentConversion')), h('span.settings__content-description', `Updated ${Date(conversionDate)}`), ]), h('div.settings__content-item', [ @@ -192,7 +192,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('div', 'State Logs'), + h('div', t('stateLogs')), h( 'div.settings__content-description', t('stateLogsDescription') @@ -222,7 +222,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', 'Reveal Seed Words'), + 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', { @@ -242,7 +242,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', 'Use old UI'), + 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', { @@ -261,7 +261,7 @@ class Settings extends Component { const { showResetAccountConfirmationModal } = this.props return h('div.settings__content-row', [ - h('div.settings__content-item', 'Reset Account'), + 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', { @@ -304,13 +304,13 @@ class Settings extends Component { renderInfoLinks () { return ( h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', 'Links'), + h('div.settings__info-link-header', t('links')), h('div.settings__info-link-item', [ h('a', { href: 'https://metamask.io/privacy.html', target: '_blank', }, [ - h('span.settings__info-link', 'Privacy Policy'), + h('span.settings__info-link', t('privacyMsg')), ]), ]), h('div.settings__info-link-item', [ @@ -318,7 +318,7 @@ class Settings extends Component { href: 'https://metamask.io/terms.html', target: '_blank', }, [ - h('span.settings__info-link', 'Terms of Use'), + h('span.settings__info-link', t('terms')), ]), ]), h('div.settings__info-link-item', [ @@ -326,7 +326,7 @@ class Settings extends Component { href: 'https://metamask.io/attributions.html', target: '_blank', }, [ - h('span.settings__info-link', 'Attributions'), + h('span.settings__info-link', t('attributions')), ]), ]), h('hr.settings__info-separator'), @@ -335,7 +335,7 @@ class Settings extends Component { href: 'https://support.metamask.io', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our Support Center'), + h('span.settings__info-link', t('supportCenter')), ]), ]), h('div.settings__info-link-item', [ @@ -343,7 +343,7 @@ class Settings extends Component { href: 'https://metamask.io/', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our web site'), + h('span.settings__info-link', t('visitWebSite')), ]), ]), h('div.settings__info-link-item', [ @@ -351,7 +351,7 @@ class Settings extends Component { target: '_blank', href: 'mailto:help@metamask.io?subject=Feedback', }, [ - h('span.settings__info-link', 'Email us!'), + h('span.settings__info-link', t('emailUs')), ]), ]), ]) @@ -373,7 +373,7 @@ class Settings extends Component { h('div.settings__info-item', [ h( 'div.settings__info-about', - 'MetaMask is designed and built in California.' + t('builtInCalifornia') ), ]), ]), -- cgit v1.2.3 From 3830f49ac57f3bf506298e6c8afac11fb8a942b4 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 15:28:48 -0230 Subject: Take user home if an unapproved tx is dropped while they are viewing. --- ui/app/conf-tx.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'ui/app') diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index b4ffc48b7..1070436c3 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -40,6 +40,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, + selectedAddressTxList: state.metamask.selectedAddressTxList, } } @@ -48,6 +49,23 @@ function ConfirmTxScreen () { Component.call(this) } +ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { + const { + unapprovedTxs, + network, + selectedAddressTxList, + } = this.props + const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps + const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network) + const prevTxData = prevUnconfTxList[prevIndex] || {} + const prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {} + const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) + + if (prevTx.status === 'dropped' && unconfTxList.length === 0) { + this.goHome({}) + } +} + ConfirmTxScreen.prototype.render = function () { const props = this.props const { -- cgit v1.2.3 From 3c1248c8169a1cb96a0ee2bc0f523fb9c765569e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 19 Mar 2018 16:12:09 -0700 Subject: Update confirm transaction screen --- ui/app/components/network-display.js | 51 ++++ .../pending-tx/confirm-deploy-contract.js | 10 +- ui/app/components/pending-tx/confirm-send-ether.js | 336 ++++++++++----------- ui/app/components/sender-to-recipient.js | 29 +- ui/app/css/itcss/components/network.scss | 12 + ui/app/css/itcss/components/send.scss | 6 +- ui/app/css/itcss/generic/index.scss | 7 +- ui/app/send-v2.js | 15 +- 8 files changed, 271 insertions(+), 195 deletions(-) create mode 100644 ui/app/components/network-display.js (limited to 'ui/app') diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js new file mode 100644 index 000000000..9dc31b5c7 --- /dev/null +++ b/ui/app/components/network-display.js @@ -0,0 +1,51 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const { connect } = require('react-redux') +const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') +const t = require('../../i18n') + +const networkToColorHash = { + 1: '#038789', + 3: '#e91550', + 42: '#690496', + 4: '#ebb33f', +} + +class NetworkDisplay extends Component { + renderNetworkIcon () { + const { network } = this.props + const networkColor = networkToColorHash[network] + + return networkColor + ? h(NetworkDropdownIcon, { backgroundColor: networkColor }) + : h('i.fa.fa-question-circle.fa-med', { + style: { + margin: '0 4px', + color: 'rgb(125, 128, 130)', + }, + }) + } + + render () { + const { provider: { type } } = this.props + return h('.network-display__container', [ + this.renderNetworkIcon(), + h('.network-name', t(type)), + ]) + } +} + +NetworkDisplay.propTypes = { + network: PropTypes.string, + provider: PropTypes.object, +} + +const mapStateToProps = ({ metamask: { network, provider } }) => { + return { + network, + provider, + } +} + +module.exports = connect(mapStateToProps)(NetworkDisplay) diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 4810bb515..b75f3a964 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -10,6 +10,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil } = require('../../conversion-util') const t = require('../../../i18n') const SenderToRecipient = require('../sender-to-recipient') +const NetworkDisplay = require('../network-display') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -244,9 +245,12 @@ class ConfirmDeployContract extends Component { return ( h('.page-container', [ h('.page-container__header', [ - h('.page-container__back-button', { - onClick: () => backToAccountDetail(selectedAddress), - }, t('back')), + h('.page-container__header-row', [ + h('span.page-container__back-button', { + onClick: () => backToAccountDetail(selectedAddress), + }, t('back')), + window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), + ]), h('.page-container__title', t('confirmContract')), h('.page-container__subtitle', t('pleaseReviewTransaction')), ]), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index f36def9d5..d1ce25cbf 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -4,7 +4,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../actions') const clone = require('clone') -const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') @@ -15,6 +14,8 @@ const { } = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') const t = require('../../../i18n') +const SenderToRecipient = require('../sender-to-recipient') +const NetworkDisplay = require('../network-display') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -257,196 +258,181 @@ ConfirmSendEther.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container.confirm-send-ether', [ - // Main Send token Card - h('div.page-container', [ - h('div.page-container__header', [ - !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { + // Main Send token Card + h('.page-container', [ + h('.page-container__header', [ + h('.page-container__header-row', [ + h('span.page-container__back-button', { onClick: () => editTransaction(txMeta), + style: { + visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden', + }, }, 'Edit'), - h('div.page-container__title', title), - h('div.page-container__subtitle', subtitle), + window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), + ]), + h('.page-container__title', title), + h('.page-container__subtitle', subtitle), + ]), + h('.page-container__content', [ + h(SenderToRecipient, { + senderName: fromName, + senderAddress: fromAddress, + recipientName: toName, + recipientAddress: txParams.to, + }), + + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), + + h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), - h('.page-container__content', [ - h('div.flex-row.flex-center.confirm-screen-identicons', [ - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: fromAddress, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', fromName), - // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), - ]), - h('i.fa.fa-arrow-right.fa-lg'), - h('div.confirm-screen-account-wrapper', [ - h( - Identicon, - { - address: txParams.to, - diameter: 60, - }, - ), - h('span.confirm-screen-account-name', toName), - // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), - ]), - ]), - // h('h3.flex-center.confirm-screen-sending-to-message', { - // style: { - // textAlign: 'center', - // fontSize: '16px', - // }, - // }, [ - // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - // ]), - - h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), - h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), - h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), ]), - h('div.confirm-screen-rows', [ - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', fromName), - h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), - ]), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), ]), + ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', toName), - h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), - ]), + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('div.confirm-screen-section-column', [ + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), + ]), - h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), - h('div.confirm-screen-section-column', [ - h(GasFeeDisplay, { - gasTotal: gasTotal || gasFeeInHex, - conversionRate, - convertedCurrency, - onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), - }), - ]), + h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), ]), - h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ - h('div.confirm-screen-section-column', [ - h('span.confirm-screen-label', [ t('total') + ' ' ]), - h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]), - ]), - - h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), - h('div.confirm-screen-row-detail', `${totalInETH} ETH`), - ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), ]), - - // These are latest errors handling from master - // Leaving as comments as reference when we start implementing error handling - // h('style', ` - // .conf-buttons button { - // margin-left: 10px; - // text-transform: uppercase; - // } - // `), - - // txMeta.simulationFails ? - // h('.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Transaction Error. Exception thrown in contract code.') - // : null, - - // !isValidAddress ? - // h('.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') - // : null, - - // insufficientBalance ? - // h('span.error', { - // style: { - // marginLeft: 50, - // fontSize: '0.9em', - // }, - // }, 'Insufficient balance for transaction') - // : null, - - // // send + cancel - // h('.flex-row.flex-space-around.conf-buttons', { - // style: { - // display: 'flex', - // justifyContent: 'flex-end', - // margin: '14px 25px', - // }, - // }, [ - // h('button', { - // onClick: (event) => { - // this.resetGasFields() - // event.preventDefault() - // }, - // }, 'Reset'), - - // // Accept Button or Buy Button - // insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : - // h('input.confirm.btn-green', { - // type: 'submit', - // value: 'SUBMIT', - // style: { marginLeft: '10px' }, - // disabled: buyDisabled, - // }), - - // h('button.cancel.btn-red', { - // onClick: props.cancelTransaction, - // }, 'Reject'), - // ]), - // showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { - // style: { - // display: 'flex', - // justifyContent: 'flex-end', - // margin: '14px 25px', - // }, - // }, [ - // h('button.cancel.btn-red', { - // onClick: props.cancelAllTransactions, - // }, 'Reject All'), - // ]) : null, - // ]), - // ]) - // ) - // } ]), - h('form#pending-tx-form', { - onSubmit: this.onSubmit, - }, [ - h('.page-container__footer', [ - // Cancel Button - h('button.btn-cancel.page-container__footer-button.allcaps', { - onClick: (event) => { - clearSend() - this.cancel(event, txMeta) - }, - }, t('cancel')), - - // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), - ]), +// These are latest errors handling from master +// Leaving as comments as reference when we start implementing error handling +// h('style', ` +// .conf-buttons button { +// margin-left: 10px; +// text-transform: uppercase; +// } +// `), + +// txMeta.simulationFails ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Transaction Error. Exception thrown in contract code.') +// : null, + +// !isValidAddress ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') +// : null, + +// insufficientBalance ? +// h('span.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Insufficient balance for transaction') +// : null, + +// // send + cancel +// h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button', { +// onClick: (event) => { +// this.resetGasFields() +// event.preventDefault() +// }, +// }, 'Reset'), + +// // Accept Button or Buy Button +// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : +// h('input.confirm.btn-green', { +// type: 'submit', +// value: 'SUBMIT', +// style: { marginLeft: '10px' }, +// disabled: buyDisabled, +// }), + +// h('button.cancel.btn-red', { +// onClick: props.cancelTransaction, +// }, 'Reject'), +// ]), +// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button.cancel.btn-red', { +// onClick: props.cancelAllTransactions, +// }, 'Reject All'), +// ]) : null, +// ]), +// ]) +// ) +// } + ]), + + h('form#pending-tx-form', { + onSubmit: this.onSubmit, + }, [ + h('.page-container__footer', [ + // Cancel Button + h('button.btn-cancel.page-container__footer-button.allcaps', { + onClick: (event) => { + clearSend() + this.cancel(event, txMeta) + }, + }, t('cancel')), + + // Accept Button + h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), ]), ]), ]) diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js index 25b9c7d6b..f35c353ad 100644 --- a/ui/app/components/sender-to-recipient.js +++ b/ui/app/components/sender-to-recipient.js @@ -5,6 +5,28 @@ const t = require('../../i18n') const Identicon = require('./identicon') class SenderToRecipient extends Component { + renderRecipientIcon () { + const { recipientAddress } = this.props + return ( + recipientAddress + ? h(Identicon, { address: recipientAddress, diameter: 20 }) + : h('i.fa.fa-file-text-o') + ) + } + + renderRecipient () { + const { recipientName } = this.props + return ( + h('.sender-to-recipient__recipient', [ + this.renderRecipientIcon(), + h( + '.sender-to-recipient__name.sender-to-recipient__recipient-name', + recipientName || t('newContract') + ), + ]) + ) + } + render () { const { senderName, senderAddress } = this.props @@ -28,10 +50,7 @@ class SenderToRecipient extends Component { }), ]), ]), - h('.sender-to-recipient__recipient', [ - h('i.fa.fa-file-text-o'), - h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')), - ]), + this.renderRecipient(), ]) ) } @@ -40,6 +59,8 @@ class SenderToRecipient extends Component { SenderToRecipient.propTypes = { senderName: PropTypes.string, senderAddress: PropTypes.string, + recipientName: PropTypes.string, + recipientAddress: PropTypes.string, } module.exports = SenderToRecipient diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 374cb71b6..c34b5cd06 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -159,3 +159,15 @@ .network-caret { margin: 0 8px 2px; } + +.network-display { + &__container { + display: flex; + align-items: center; + justify-content: flex-start; + + @media screen and (min-width: 576px) { + display: none; + } + } +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bdea1b008..263b362ca 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -526,14 +526,10 @@ } &__form { - padding: 13px 0; - width: 100%; - overflow-y: auto; + padding: 10px 0 25px; @media screen and (max-width: $break-small) { - padding: 13px 0; margin: 0; - overflow-y: auto; flex: 1 1 auto; } } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 1e226b93e..08e639d74 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -106,6 +106,12 @@ input.large-input { } } + &__header-row { + padding-bottom: 10px; + display: flex; + justify-content: space-between; + } + &__footer { display: flex; flex-flow: row; @@ -138,7 +144,6 @@ input.large-input { color: #2f9ae0; font-size: 1rem; cursor: pointer; - padding-bottom: 10px; font-weight: 400; } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 5ac59fc29..de4c38232 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -480,18 +480,19 @@ SendTransactionScreen.prototype.renderMemoRow = function () { } SendTransactionScreen.prototype.renderForm = function () { - return h('div.send-v2__form', {}, [ + return h('.page-container__content', {}, [ + h('.send-v2__form', [ + this.renderFromRow(), - this.renderFromRow(), + this.renderToRow(), - this.renderToRow(), + this.renderAmountRow(), - this.renderAmountRow(), + this.renderGasRow(), - this.renderGasRow(), - - // this.renderMemoRow(), + // this.renderMemoRow(), + ]), ]) } -- cgit v1.2.3 From dd19a934475cfa8cc31495b351b69a7d8d1f8d5e Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 12:06:59 -0700 Subject: Add i18n to tx status --- ui/app/components/tx-list-item.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 5ff1820a6..d104eda88 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -265,7 +265,7 @@ TxListItem.prototype.render = function () { 'tx-list-status--dropped': transactionStatus === 'dropped', }), }, - transactionStatus, + this.txStatusIndicator(), ), ]), ]), @@ -300,3 +300,28 @@ TxListItem.prototype.render = function () { ]), // holding on icon from design ]) } + +TxListItem.prototype.txStatusIndicator = function () { + const { transactionStatus } = this.props + + let name + + if (transactionStatus === 'unapproved') { + name = t('unapproved') + } else if (transactionStatus === 'rejected') { + name = t('rejected') + } else if (transactionStatus === 'approved') { + name = t('approved') + } else if (transactionStatus === 'signed') { + name = t('signed') + } else if (transactionStatus === 'submitted') { + name = t('submitted') + } else if (transactionStatus === 'confirmed') { + name = t('confirmed') + } else if (transactionStatus === 'failed') { + name = t('failed') + } else if (transactionStatus === 'dropped') { + name = t('dropped') + } + return name +} -- cgit v1.2.3 From a69480d78d3a97310c7f39792133003b9bc058cb Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 20 Mar 2018 20:20:30 -0230 Subject: Gas inputs can be changed by up and down arrows (#3598) * Up and down arrows can control gas inputs. * input-number.js just uses number type. --- ui/app/components/currency-input.js | 2 ++ ui/app/components/input-number.js | 1 + 2 files changed, 3 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js index 940238fa5..ece3eb43d 100644 --- a/ui/app/components/currency-input.js +++ b/ui/app/components/currency-input.js @@ -91,6 +91,7 @@ CurrencyInput.prototype.render = function () { placeholder, readOnly, inputRef, + type, } = this.props const { emptyState, focused } = this.state @@ -99,6 +100,7 @@ CurrencyInput.prototype.render = function () { const valueToRender = this.getValueToRender() return h('input', { className, + type, value: emptyState ? '' : valueToRender, placeholder: focused ? '' : placeholder, size: valueToRender.length * inputSizeMultiplier, diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index fd8c5c309..5600e35ee 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -55,6 +55,7 @@ InputNumber.prototype.render = function () { className: 'customize-gas-input', value, placeholder, + type: 'number', onInputChange: newValue => { this.setValue(newValue) }, -- cgit v1.2.3 From 3e79941658e58f5ef74cd9545c2b69136362ec76 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 21 Mar 2018 13:12:59 -0700 Subject: ui - tx conf - only show special token tx conf screen for token send --- ui/app/components/pending-tx/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 9676e9c86..9c0453a3b 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -63,10 +63,14 @@ PendingTx.prototype.componentWillMount = async function () { isFetching: false, }) } - const tokenData = txParams && abiDecoder.decodeMethod(txParams.data) - const { name: tokenMethodName } = tokenData || {} - const isTokenTransaction = ['transfer', 'approve', 'transferFrom'] - .find(possibleName => tokenMethodName === possibleName) + + // 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) -- cgit v1.2.3 From 6393c381173e854e280025e8b89d7e0f105984fc Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 22 Mar 2018 14:29:18 -0230 Subject: Pop uses new ui onboarding when in beta. --- ui/app/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app') 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'}) } -- cgit v1.2.3 From 07f483960033f28109afdcf99fb08c48b0231434 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 22 Mar 2018 16:49:07 -0230 Subject: Signed type data notification handles long messages. --- ui/app/css/itcss/components/request-signature.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index d81099bfa..9ad69dfc0 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 { -- cgit v1.2.3 From fa022e0883ce4634864ead04eac676c64ed6c6c1 Mon Sep 17 00:00:00 2001 From: Dan Date: Sat, 24 Mar 2018 01:13:43 -0230 Subject: Updates Add token screen to latest design. --- ui/app/add-token.js | 143 +++++++++++++-------- ui/app/css/itcss/components/add-token.scss | 196 ++++++++++++++++++++++------- ui/app/css/itcss/settings/variables.scss | 1 + 3 files changed, 241 insertions(+), 99 deletions(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b3a5bdc20..2b323da93 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 () { @@ -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', { diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 13020f62f..f72396735 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,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 { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 640fd95b8..f29d99872 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -51,6 +51,7 @@ $java: #29b6af; $wild-strawberry: #ff4a8d; $cornflower-blue: #7057ff; $saffron: #f6c343; +$dodger-blue: #3099f2; /* Z-Indicies -- cgit v1.2.3 From c710fb8f50eb0cb11e709bb7baa545455724801a Mon Sep 17 00:00:00 2001 From: Dan Date: Sun, 25 Mar 2018 15:17:10 -0230 Subject: Use new header on add token confirmation screen. --- ui/app/add-token.js | 133 +++++++++++++++++++++++++++------------------------- 1 file changed, 68 insertions(+), 65 deletions(-) (limited to 'ui/app') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index 2b323da93..7e22c0c9e 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -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')), + ]), + ]) } -- cgit v1.2.3 From cfa2592d78b31ea3c5d056bf1344cfd5d5353f16 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 25 Mar 2018 22:19:42 -0700 Subject: Update button styles --- ui/app/accounts/import/json.js | 4 +- ui/app/accounts/import/private-key.js | 4 +- ui/app/accounts/new-account/create-form.js | 6 +- ui/app/add-token.js | 8 +-- ui/app/components/customize-gas-modal/index.js | 8 ++- ui/app/components/modals/account-details-modal.js | 4 +- ui/app/components/modals/deposit-ether-modal.js | 2 +- .../components/modals/export-private-key-modal.js | 6 +- ui/app/components/shapeshift-form.js | 2 +- ui/app/components/signature-request.js | 4 +- ui/app/components/tx-view.js | 6 +- ui/app/components/wallet-view.js | 2 +- ui/app/css/itcss/components/add-token.scss | 9 +-- ui/app/css/itcss/components/buttons.scss | 84 ++++++++++++++++++---- ui/app/css/itcss/components/hero-balance.scss | 3 +- ui/app/css/itcss/components/modal.scss | 13 +--- ui/app/css/itcss/components/new-account.scss | 27 +------ ui/app/css/itcss/components/request-signature.scss | 34 ++------- ui/app/css/itcss/components/send.scss | 8 +-- ui/app/css/itcss/components/settings.scss | 38 ++++++---- ui/app/css/itcss/generic/index.scss | 2 +- ui/app/css/itcss/settings/variables.scss | 2 + ui/app/send-v2.js | 4 +- ui/app/settings.js | 8 +-- 24 files changed, 149 insertions(+), 139 deletions(-) (limited to 'ui/app') 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/add-token.js b/ui/app/add-token.js index b3a5bdc20..edeea11d8 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -321,10 +321,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')), ]), @@ -371,10 +371,10 @@ AddTokenScreen.prototype.render = function () { ]), ]), h('div.add-token__buttons', [ - h('button.btn-cancel.add-token__button', { + h('button.btn-secondary--lg.add-token__cancel-button', { onClick: goHome, }, t('cancel')), - h('button.btn-clear.add-token__button', { + h('button.btn-primary--lg', { onClick: this.onNext, }, t('next')), ]), 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/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/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..bdf9da385 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -172,11 +172,8 @@ justify-content: center; } - &__button { - flex: 1 0 141px; - margin: 0 12px; - padding: 10px 22px; - height: 54px; + &__cancel-button { + margin-right: 1.2rem; } &__token-icons-container { @@ -334,7 +331,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..a4728afef 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -190,41 +190,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..0031238a8 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -51,6 +51,8 @@ $java: #29b6af; $wild-strawberry: #ff4a8d; $cornflower-blue: #7057ff; $saffron: #f6c343; +$zumthor: #edf7ff; +$ecstasy: #f7861c; /* Z-Indicies diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index de71ce94c..131d4f9ad 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -510,13 +510,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')), 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() -- cgit v1.2.3 From a109a774a59be78b6de40492fbf4dbe1ff518d8f Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 26 Mar 2018 11:00:54 -0230 Subject: Use ens-input component in send-v2 to allow sending to ens names. --- ui/app/actions.js | 4 +-- ui/app/components/ens-input.js | 41 ++++++++--------------------- ui/app/components/send/send-v2-container.js | 4 +-- ui/app/reducers/metamask.js | 4 ++- ui/app/send-v2.js | 20 ++++++++------ 5 files changed, 30 insertions(+), 43 deletions(-) (limited to 'ui/app') 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/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/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/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/send-v2.js b/ui/app/send-v2.js index de71ce94c..81c4340dc 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, @@ -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() -- cgit v1.2.3