diff options
Diffstat (limited to 'ui')
78 files changed, 1400 insertions, 600 deletions
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index fc9031a65..52d3dcde9 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -1,43 +1,44 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const connect = require('react-redux').connect -const t = require('../../../i18n') import Select from 'react-select' // Subviews const JsonImportView = require('./json.js') const PrivateKeyImportView = require('./private-key.js') -const menuItems = [ - t('privateKey'), - t('jsonFile'), -] -module.exports = connect(mapStateToProps)(AccountImportSubview) - -function mapStateToProps (state) { - return { - menuItems, - } +AccountImportSubview.contextTypes = { + t: PropTypes.func, } +module.exports = connect()(AccountImportSubview) + + inherits(AccountImportSubview, Component) function AccountImportSubview () { Component.call(this) } +AccountImportSubview.prototype.getMenuItemTexts = function () { + return [ + this.context.t('privateKey'), + this.context.t('jsonFile'), + ] +} + AccountImportSubview.prototype.render = function () { - const props = this.props const state = this.state || {} - const { menuItems } = props + const menuItems = this.getMenuItemTexts() const { type } = state return ( h('div.new-account-import-form', [ h('.new-account-import-disclaimer', [ - h('span', t('importAccountMsg')), + h('span', this.context.t('importAccountMsg')), h('span', { style: { cursor: 'pointer', @@ -48,12 +49,12 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, t('here')), + }, this.context.t('here')), ]), h('div.new-account-import-form__select-section', [ - h('div.new-account-import-form__select-label', t('selectType')), + h('div.new-account-import-form__select-label', this.context.t('selectType')), h(Select, { className: 'new-account-import-form__select', @@ -79,16 +80,15 @@ AccountImportSubview.prototype.render = function () { } AccountImportSubview.prototype.renderImportView = function () { - const props = this.props const state = this.state || {} const { type } = state - const { menuItems } = props + const menuItems = this.getMenuItemTexts() const current = type || menuItems[0] switch (current) { - case t('privateKey'): + case this.context.t('privateKey'): return h(PrivateKeyImportView) - case t('jsonFile'): + case this.context.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 eeba73e77..e53c1c9ca 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -4,7 +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' @@ -24,11 +24,11 @@ class JsonImportSubview extends Component { return ( h('div.new-account-import-form__json', [ - h('p', t('usedByClients')), + h('p', this.context.t('usedByClients')), h('a.warning', { href: HELP_LINK, target: '_blank', - }, t('fileImportFail')), + }, this.context.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: t('enterPassword'), + placeholder: this.context.t('enterPassword'), id: 'json-password-box', onKeyPress: this.createKeyringOnEnter.bind(this), }), @@ -53,13 +53,13 @@ class JsonImportSubview extends Component { h('button.btn-secondary.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ - t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - t('import'), + this.context.t('import'), ]), ]), @@ -84,14 +84,14 @@ class JsonImportSubview extends Component { const state = this.state if (!state) { - const message = t('validFileImport') + const message = this.context.t('validFileImport') return this.props.displayWarning(message) } const { fileContents } = state if (!fileContents) { - const message = t('needImportFile') + const message = this.context.t('needImportFile') return this.props.displayWarning(message) } @@ -99,7 +99,7 @@ class JsonImportSubview extends Component { const password = passwordInput.value if (!password) { - const message = t('needImportPassword') + const message = this.context.t('needImportPassword') return this.props.displayWarning(message) } @@ -112,6 +112,7 @@ JsonImportSubview.propTypes = { goHome: PropTypes.func, displayWarning: PropTypes.func, importNewJsonAccount: PropTypes.func, + t: PropTypes.func, } const mapStateToProps = state => { @@ -128,4 +129,9 @@ const mapDispatchToProps = dispatch => { } } +JsonImportSubview.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview) + diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index 13c8da722..0d2898cda 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -1,12 +1,17 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const connect = require('react-redux').connect const actions = require('../../actions') -const t = require('../../../i18n') + +PrivateKeyImportView.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) + function mapStateToProps (state) { return { error: state.appState.warning, @@ -25,6 +30,7 @@ function mapDispatchToProps (dispatch) { inherits(PrivateKeyImportView, Component) function PrivateKeyImportView () { + this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this) Component.call(this) } @@ -34,14 +40,14 @@ PrivateKeyImportView.prototype.render = function () { return ( h('div.new-account-import-form__private-key', [ - h('span.new-account-create-form__instruction', t('pastePrivateKey')), + h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')), h('div.new-account-import-form__private-key-password-container', [ h('input.new-account-import-form__input-password', { type: 'password', id: 'private-key-box', - onKeyPress: () => this.createKeyringOnEnter(), + onKeyPress: e => this.createKeyringOnEnter(e), }), ]), @@ -51,13 +57,13 @@ PrivateKeyImportView.prototype.render = function () { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => goHome(), }, [ - t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ - t('import'), + this.context.t('import'), ]), ]), diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js index 9ffc669a2..d98909baa 100644 --- a/ui/app/accounts/import/seed.js +++ b/ui/app/accounts/import/seed.js @@ -1,11 +1,16 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const connect = require('react-redux').connect -const t = require('../../../i18n') + +SeedImportSubview.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(SeedImportSubview) + function mapStateToProps (state) { return {} } @@ -21,10 +26,10 @@ SeedImportSubview.prototype.render = function () { style: { }, }, [ - t('pasteSeed'), + this.context.t('pasteSeed'), h('textarea'), h('br'), - h('button', t('submit')), + h('button', this.context.t('submit')), ]) ) } diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index c820cdf6d..48c74192a 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -1,12 +1,11 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const actions = require('../../actions') -const t = require('../../../i18n') class NewAccountCreateForm extends Component { - constructor (props) { + constructor (props, context) { super(props) const { numberOfExistingAccounts = 0 } = props @@ -14,7 +13,7 @@ class NewAccountCreateForm extends Component { this.state = { newAccountName: '', - defaultAccountName: t('newAccountNumberName', [newAccountNumber]), + defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]), } } @@ -25,7 +24,7 @@ class NewAccountCreateForm extends Component { return h('div.new-account-create-form', [ h('div.new-account-create-form__input-label', {}, [ - t('accountName'), + this.context.t('accountName'), ]), h('div.new-account-create-form__input-wrapper', {}, [ @@ -41,13 +40,13 @@ class NewAccountCreateForm extends Component { h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ - t('cancel'), + this.context.t('cancel'), ]), h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.props.createAccount(newAccountName || defaultAccountName), }, [ - t('create'), + this.context.t('create'), ]), ]), @@ -62,6 +61,7 @@ NewAccountCreateForm.propTypes = { createAccount: PropTypes.func, goHome: PropTypes.func, numberOfExistingAccounts: PropTypes.number, + t: PropTypes.func, } const mapStateToProps = state => { @@ -97,4 +97,9 @@ const mapDispatchToProps = dispatch => { } } +NewAccountCreateForm.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) + diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js index 854568c77..207cf7760 100644 --- a/ui/app/accounts/new-account/index.js +++ b/ui/app/accounts/new-account/index.js @@ -1,9 +1,9 @@ const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') 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') @@ -37,8 +37,13 @@ function AccountDetailsModal (props) { } } +AccountDetailsModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + AccountDetailsModal.prototype.render = function () { const { displayedForm, displayForm } = this.props @@ -46,7 +51,7 @@ AccountDetailsModal.prototype.render = function () { h('div.new-account__header', [ - h('div.new-account__title', t('newAccount')), + h('div.new-account__title', this.context.t('newAccount')), h('div.new-account__tabs', [ @@ -56,7 +61,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', }), onClick: () => displayForm('CREATE'), - }, t('createDen')), + }, this.context.t('createDen')), h('div.new-account__tabs__tab', { className: classnames('new-account__tabs__tab', { @@ -64,7 +69,7 @@ AccountDetailsModal.prototype.render = function () { 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', }), onClick: () => displayForm('IMPORT'), - }, t('import')), + }, this.context.t('import')), ]), diff --git a/ui/app/actions.js b/ui/app/actions.js index 4a5962610..ad4270cef 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -2,6 +2,7 @@ const abi = require('human-standard-token-abi') const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url') const { getTokenAddressFromTokenObject } = require('./util') const ethUtil = require('ethereumjs-util') +const { fetchLocale } = require('../i18n-helper') var actions = { _setBackgroundConnection: _setBackgroundConnection, @@ -23,7 +24,7 @@ var actions = { NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE', showNetworkDropdown: showNetworkDropdown, hideNetworkDropdown: hideNetworkDropdown, - // menu state + // menu state/ getNetworkStatus: 'getNetworkStatus', // transition state TRANSITION_FORWARD: 'TRANSITION_FORWARD', @@ -254,6 +255,13 @@ var actions = { SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', setUseBlockie, + // locale + SET_CURRENT_LOCALE: 'SET_CURRENT_LOCALE', + SET_LOCALE_MESSAGES: 'SET_LOCALE_MESSAGES', + setCurrentLocale, + updateCurrentLocale, + setLocaleMessages, + // // Feature Flags setFeatureFlag, updateFeatureFlags, @@ -1292,7 +1300,7 @@ function retryTransaction (txId) { function setProviderType (type) { return (dispatch) => { - log.debug(`background.setProviderType`) + log.debug(`background.setProviderType`, type) background.setProviderType(type, (err, result) => { if (err) { log.error(err) @@ -1313,13 +1321,14 @@ function updateProviderType (type) { } function setRpcTarget (newRpc) { - log.debug(`background.setRpcTarget: ${newRpc}`) return (dispatch) => { + log.debug(`background.setRpcTarget: ${newRpc}`) background.setCustomRpc(newRpc, (err, result) => { if (err) { log.error(err) return dispatch(self.displayWarning('Had a problem changing networks!')) } + dispatch(actions.setSelectedToken()) }) } } @@ -1792,6 +1801,38 @@ function setUseBlockie (val) { } } +function updateCurrentLocale (key) { + return (dispatch) => { + dispatch(actions.showLoadingIndication()) + fetchLocale(key) + .then((localeMessages) => { + log.debug(`background.setCurrentLocale`) + background.setCurrentLocale(key, (err) => { + dispatch(actions.hideLoadingIndication()) + if (err) { + return dispatch(actions.displayWarning(err.message)) + } + dispatch(actions.setCurrentLocale(key)) + dispatch(actions.setLocaleMessages(localeMessages)) + }) + }) + } +} + +function setCurrentLocale (key) { + return { + type: actions.SET_CURRENT_LOCALE, + value: key, + } +} + +function setLocaleMessages (localeMessages) { + return { + type: actions.SET_LOCALE_MESSAGES, + value: localeMessages, + } +} + function setNetworkEndpoints (networkEndpointType) { return dispatch => { log.debug('background.setNetworkEndpoints') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b4ea4a532..46564a5e5 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const classnames = require('classnames') const h = require('react-hyperscript') +const PropTypes = require('prop-types') const connect = require('react-redux').connect const R = require('ramda') const Fuse = require('fuse.js') @@ -26,12 +27,16 @@ 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' +AddTokenScreen.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen) + function mapStateToProps (state) { const { identities, tokens } = state.metamask return { @@ -51,6 +56,7 @@ inherits(AddTokenScreen, Component) function AddTokenScreen () { this.state = { isShowingConfirmation: false, + isShowingInfoBox: true, customAddress: '', customSymbol: '', customDecimals: '', @@ -140,28 +146,31 @@ AddTokenScreen.prototype.validate = function () { if (customAddress) { const validAddress = ethUtil.isValidAddress(customAddress) if (!validAddress) { - errors.customAddress = t('invalidAddress') + errors.customAddress = this.context.t('invalidAddress') } - const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36 + const validDecimals = customDecimals !== null + && customDecimals !== '' + && customDecimals >= 0 + && customDecimals < 36 if (!validDecimals) { - errors.customDecimals = t('decimalsMustZerotoTen') + errors.customDecimals = this.context.t('decimalsMustZerotoTen') } const symbolLen = customSymbol.trim().length const validSymbol = symbolLen > 0 && symbolLen < 10 if (!validSymbol) { - errors.customSymbol = t('symbolBetweenZeroTen') + errors.customSymbol = this.context.t('symbolBetweenZeroTen') } const ownAddress = identitiesList.includes(standardAddress) if (ownAddress) { - errors.customAddress = t('personalAddressDetected') + errors.customAddress = this.context.t('personalAddressDetected') } const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) if (tokenAlreadyAdded) { - errors.customAddress = t('tokenAlreadyAdded') + errors.customAddress = this.context.t('tokenAlreadyAdded') } } else if ( Object.entries(selectedTokens) @@ -169,7 +178,7 @@ AddTokenScreen.prototype.validate = function () { isEmpty && !isSelected ), true) ) { - errors.tokenSelector = t('mustSelectOne') + errors.tokenSelector = this.context.t('mustSelectOne') } return { @@ -199,7 +208,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customAddress, }), }, [ - h('div.add-token__add-custom-label', t('tokenAddress')), + h('div.add-token__add-custom-label', this.context.t('tokenAddress')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenAddressDidChange, @@ -212,7 +221,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customSymbol, }), }, [ - h('div.add-token__add-custom-label', t('tokenSymbol')), + h('div.add-token__add-custom-label', this.context.t('tokenSymbol')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenSymbolDidChange, @@ -226,7 +235,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customDecimals, }), }, [ - h('div.add-token__add-custom-label', t('decimal')), + h('div.add-token__add-custom-label', this.context.t('decimal')), h('input.add-token__add-custom-input', { type: 'number', onChange: this.tokenDecimalsDidChange, @@ -248,7 +257,7 @@ AddTokenScreen.prototype.renderTokenList = function () { const results = [...addressSearchResult, ...fuseSearchResult] return h('div', [ - results.length > 0 && h('div.add-token__token-icons-title', t('popularTokens')), + results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')), h('div.add-token__token-icons-container', Array(6).fill(undefined) .map((_, i) => { const { logo, symbol, name, address } = results[i] || {} @@ -302,11 +311,8 @@ AddTokenScreen.prototype.renderConfirmation = function () { return ( h('div.add-token', [ h('div.add-token__wrapper', [ - h('div.add-token__title-container.add-token__confirmation-title', [ - 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', t('balances')), + h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')), h('div.add-token__confirmation-token-list', Object.entries(tokens) .map(([ address, token ]) => ( @@ -325,10 +331,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { onClick: () => this.setState({ isShowingConfirmation: false }), - }, t('back')), + }, this.context.t('back')), h('button.btn-primary--lg', { onClick: () => addTokens(tokens).then(goHome), - }, t('addTokens')), + }, this.context.t('addTokens')), ]), ]) ) @@ -339,23 +345,28 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) { } AddTokenScreen.prototype.renderTabs = function () { - const { displayedTab, errors } = this.state + const { isShowingInfoBox, 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')), + isShowingInfoBox && h('div.add-token__info-box', [ + h('div.add-token__info-box__close', { + onClick: () => this.setState({ isShowingInfoBox: false }), + }), + h('div.add-token__info-box__title', this.context.t('whatsThis')), + h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')), + h('a.add-token__info-box__copy--blue', { + href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens', + target: '_blank', + }, this.context.t('learnMore')), ]), h('div.add-token__input-container', [ h('input.add-token__input', { type: 'text', - placeholder: t('searchTokens'), + placeholder: this.context.t('searchTokens'), onChange: e => this.setState({ searchQuery: e.target.value }), }), h('div.add-token__search-input-error-message', errors.tokenSelector), @@ -379,26 +390,27 @@ AddTokenScreen.prototype.render = function () { onClick: () => goHome(), }, [ h('i.fa.fa-angle-left.fa-lg'), - h('span', t('cancel')), + h('span', this.context.t('cancel')), ]), - h('div.add-token__header__title', t('addTokens')), + h('div.add-token__header__title', this.context.t('addTokens')), + isShowingConfirmation && h('div.add-token__header__subtitle', this.context.t('likeToAddTokens')), !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', + 'add-token__header__tabs__unselected': displayedTab !== 'SEARCH', }), onClick: () => this.displayTab('SEARCH'), - }, t('search')), + }, this.context.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', + 'add-token__header__tabs__unselected': displayedTab !== 'CUSTOM_TOKEN', }), onClick: () => this.displayTab('CUSTOM_TOKEN'), - }, t('customToken')), + }, this.context.t('customToken')), ]), ]), @@ -410,10 +422,10 @@ AddTokenScreen.prototype.render = function () { !isShowingConfirmation && h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { onClick: goHome, - }, t('cancel')), + }, this.context.t('cancel')), h('button.btn-primary--lg.add-token__confirm-button', { onClick: this.onNext, - }, t('next')), + }, this.context.t('next')), ]), ]) } diff --git a/ui/app/app.js b/ui/app/app.js index d1b17ab5d..0b7a7a1e0 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -2,9 +2,9 @@ const inherits = require('util').inherits const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const PropTypes = require('prop-types') const actions = require('./actions') const classnames = require('classnames') -const t = require('../i18n') // mascara const MascaraFirstTime = require('../../mascara/src/app/first-time').default @@ -46,8 +46,13 @@ const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal +App.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(App) + inherits(App, Component) function App () { Component.call(this) } @@ -289,13 +294,13 @@ App.prototype.renderAppBar = function () { h('img.metafox-icon', { height: 42, width: 42, - src: '/images/metamask-fox.svg', + src: './images/metamask-fox.svg', }), // metamask name h('.flex-row', [ - h('h1', t('appName')), - h('div.beta-label', t('beta')), + h('h1', this.context.t('appName')), + h('div.beta-label', this.context.t('beta')), ]), ]), @@ -557,15 +562,15 @@ App.prototype.getConnectingLabel = function () { let name if (providerName === 'mainnet') { - name = t('connectingToMainnet') + name = this.context.t('connectingToMainnet') } else if (providerName === 'ropsten') { - name = t('connectingToRopsten') + name = this.context.t('connectingToRopsten') } else if (providerName === 'kovan') { - name = t('connectingToRopsten') + name = this.context.t('connectingToRopsten') } else if (providerName === 'rinkeby') { - name = t('connectingToRinkeby') + name = this.context.t('connectingToRinkeby') } else { - name = t('connectingToUnknown') + name = this.context.t('connectingToUnknown') } return name @@ -578,15 +583,15 @@ App.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = t('mainnet') + name = this.context.t('mainnet') } else if (providerName === 'ropsten') { - name = t('ropsten') + name = this.context.t('ropsten') } else if (providerName === 'kovan') { - name = t('kovan') + name = this.context.t('kovan') } else if (providerName === 'rinkeby') { - name = t('rinkeby') + name = this.context.t('rinkeby') } else { - name = t('unknownNetwork') + name = this.context.t('unknownNetwork') } return name diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js index 1612d7b6a..03955e077 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/account-dropdowns.js @@ -9,7 +9,6 @@ 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) { @@ -80,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.allcaps', t('loose')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null } catch (e) { return } } @@ -130,7 +129,7 @@ class AccountDropdowns extends Component { diameter: 32, }, ), - h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')), + h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')), ], ), h( @@ -155,7 +154,7 @@ class AccountDropdowns extends Component { fontSize: '24px', marginBottom: '5px', }, - }, t('importAccount')), + }, this.context.t('importAccount')), ] ), ] @@ -193,7 +192,7 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, }, - t('etherscanView'), + this.context.t('etherscanView'), ), h( DropdownMenuItem, @@ -205,7 +204,7 @@ class AccountDropdowns extends Component { actions.showQrView(selected, identity ? identity.name : '') }, }, - t('showQRCode'), + this.context.t('showQRCode'), ), h( DropdownMenuItem, @@ -217,7 +216,7 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, }, - t('copyAddress'), + this.context.t('copyAddress'), ), h( DropdownMenuItem, @@ -227,7 +226,7 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, }, - t('exportPrivateKey'), + this.context.t('exportPrivateKey'), ), ] ) @@ -301,6 +300,7 @@ AccountDropdowns.propTypes = { style: PropTypes.object, enableAccountOptions: PropTypes.bool, enableAccountsSelector: PropTypes.bool, + t: PropTypes.func, } const mapDispatchToProps = (dispatch) => { @@ -316,6 +316,10 @@ const mapDispatchToProps = (dispatch) => { } } +AccountDropdowns.contextTypes = { + t: PropTypes.func, +} + module.exports = { AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), } diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js index 5637bc8d0..865207487 100644 --- a/ui/app/components/account-export.js +++ b/ui/app/components/account-export.js @@ -1,15 +1,20 @@ const Component = require('react').Component const h = require('react-hyperscript') +const PropTypes = require('prop-types') const inherits = require('util').inherits const exportAsFile = require('../util').exportAsFile 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') + +ExportAccountView.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(ExportAccountView) + inherits(ExportAccountView, Component) function ExportAccountView () { Component.call(this) @@ -36,7 +41,7 @@ ExportAccountView.prototype.render = function () { if (notExporting) return h('div') if (exportRequested) { - const warning = t('exportPrivateKeyWarning') + const warning = this.context.t('exportPrivateKeyWarning') return ( h('div', { style: { @@ -54,7 +59,7 @@ ExportAccountView.prototype.render = function () { h('p.error', warning), h('input#exportAccount.sizing-input', { type: 'password', - placeholder: t('confirmPassword').toLowerCase(), + placeholder: this.context.t('confirmPassword').toLowerCase(), onKeyPress: this.onExportKeyPress.bind(this), style: { position: 'relative', @@ -75,10 +80,10 @@ ExportAccountView.prototype.render = function () { style: { marginRight: '10px', }, - }, t('submit')), + }, this.context.t('submit')), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, t('cancel')), + }, this.context.t('cancel')), ]), (this.props.warning) && ( h('span.error', { @@ -99,7 +104,7 @@ ExportAccountView.prototype.render = function () { margin: '0 20px', }, }, [ - h('label', t('copyPrivateKey') + ':'), + h('label', this.context.t('copyPrivateKey') + ':'), h('p.error.cursor-pointer', { style: { textOverflow: 'ellipsis', @@ -113,13 +118,13 @@ ExportAccountView.prototype.render = function () { }, plainKey), h('button', { onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), - }, t('done')), + }, this.context.t('done')), h('button', { style: { marginLeft: '10px', }, onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), - }, t('saveAsFile')), + }, this.context.t('saveAsFile')), ]) } } diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index e838e8916..21de358d6 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -1,15 +1,20 @@ const inherits = require('util').inherits const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') 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') + +AccountMenu.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) + inherits(AccountMenu, Component) function AccountMenu () { Component.call(this) } @@ -71,10 +76,10 @@ AccountMenu.prototype.render = function () { h(Item, { className: 'account-menu__header', }, [ - t('myAccounts'), + this.context.t('myAccounts'), h('button.account-menu__logout-button', { onClick: lockMetamask, - }, t('logout')), + }, this.context.t('logout')), ]), h(Divider), h('div.account-menu__accounts', this.renderAccounts()), @@ -82,23 +87,23 @@ AccountMenu.prototype.render = function () { h(Item, { onClick: () => showNewAccountPage('CREATE'), icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }), - text: t('createAccount'), + text: this.context.t('createAccount'), }), h(Item, { onClick: () => showNewAccountPage('IMPORT'), icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }), - text: t('importAccount'), + text: this.context.t('importAccount'), }), h(Divider), h(Item, { onClick: showInfoPage, icon: h('img', { src: 'images/mm-info-icon.svg' }), - text: t('infoHelp'), + text: this.context.t('infoHelp'), }), h(Item, { onClick: showConfigPage, icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }), - text: t('settings'), + text: this.context.t('settings'), }), ]) } @@ -156,6 +161,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.allcaps', t('imported')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.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 70701b039..9a033f893 100644 --- a/ui/app/components/bn-as-decimal-input.js +++ b/ui/app/components/bn-as-decimal-input.js @@ -1,12 +1,18 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') -const t = require('../../i18n') +const connect = require('react-redux').connect + +BnAsDecimalInput.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(BnAsDecimalInput) -module.exports = BnAsDecimalInput inherits(BnAsDecimalInput, Component) function BnAsDecimalInput () { @@ -137,13 +143,13 @@ BnAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`]) + message += this.context.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`]) } else if (min) { - message += t('greaterThanMin', [`${newMin} ${suffix}`]) + message += this.context.t('greaterThanMin', [`${newMin} ${suffix}`]) } else if (max) { - message += t('lessThanMax', [`${newMax} ${suffix}`]) + message += this.context.t('lessThanMax', [`${newMax} ${suffix}`]) } else { - message += t('invalidInput') + message += this.context.t('invalidInput') } return message diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 1e277a94b..9ac565cf4 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -9,10 +10,14 @@ 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') + +BuyButtonSubview.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(BuyButtonSubview) + function mapStateToProps (state) { return { identity: state.appState.identity, @@ -77,7 +82,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, t('depositEth')), + }, this.context.t('depositEth')), ]), // loading indication @@ -119,7 +124,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, t('selectService')), + }, this.context.t('selectService')), ]), ]) @@ -144,7 +149,7 @@ BuyButtonSubview.prototype.primarySubview = function () { case '4': case '42': const networkName = networkNames[network] - const label = `${networkName} ${t('testFaucet')}` + const label = `${networkName} ${this.context.t('testFaucet')}` return ( h('div.flex-column', { style: { @@ -165,14 +170,14 @@ BuyButtonSubview.prototype.primarySubview = function () { style: { marginTop: '15px', }, - }, t('borrowDharma')) + }, this.context.t('borrowDharma')) ) : null, ]) ) default: return ( - h('h2.error', t('unknownNetworkId')) + h('h2.error', this.context.t('unknownNetworkId')) ) } @@ -204,8 +209,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () { 'ShapeShift', ], subtext: { - 'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`, - 'ShapeShift': t('crypto'), + 'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`, + 'ShapeShift': this.context.t('crypto'), }, onClick: this.radioHandler.bind(this), }), diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index e442b43d5..d5915292e 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -1,12 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../actions') -const t = require('../../i18n') + +CoinbaseForm.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(CoinbaseForm) + function mapStateToProps (state) { return { warning: state.appState.warning, @@ -38,11 +43,11 @@ CoinbaseForm.prototype.render = function () { }, [ h('button.btn-green', { onClick: this.toCoinbase.bind(this), - }, t('continueToCoinbase')), + }, this.context.t('continueToCoinbase')), h('button.btn-red', { onClick: () => props.dispatch(actions.goHome()), - }, t('cancel')), + }, this.context.t('cancel')), ]), ]) } diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index 355f78d45..a60d33523 100644 --- a/ui/app/components/copyButton.js +++ b/ui/app/components/copyButton.js @@ -1,12 +1,18 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const copyToClipboard = require('copy-to-clipboard') -const t = require('../../i18n') +const connect = require('react-redux').connect const Tooltip = require('./tooltip') -module.exports = CopyButton +CopyButton.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(CopyButton) + inherits(CopyButton, Component) function CopyButton () { @@ -23,7 +29,7 @@ CopyButton.prototype.render = function () { const value = props.value const copied = state.copied - const message = copied ? t('copiedButton') : props.title || t('copyButton') + const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton') return h('.copy-button', { style: { diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index fca7d3863..ad504deb8 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -1,12 +1,18 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const Tooltip = require('./tooltip') const copyToClipboard = require('copy-to-clipboard') -const t = require('../../i18n') +const connect = require('react-redux').connect + +Copyable.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(Copyable) -module.exports = Copyable inherits(Copyable, Component) function Copyable () { @@ -23,7 +29,7 @@ Copyable.prototype.render = function () { const { copied } = state return h(Tooltip, { - title: copied ? t('copiedExclamation') : t('copy'), + title: copied ? this.context.t('copiedExclamation') : this.context.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 22ad98ce4..4c693d1c3 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -1,9 +1,9 @@ const Component = require('react').Component +const PropTypes = require('prop-types') 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') @@ -65,6 +65,7 @@ function mapDispatchToProps (dispatch) { updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)), updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)), updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)), + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -95,8 +96,13 @@ function CustomizeGasModal (props) { this.state = getOriginalState(props) } +CustomizeGasModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal) + CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { const { updateGasPrice, @@ -107,6 +113,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { selectedToken, balance, updateSendAmount, + updateSendErrors, } = this.props if (maxModeOn && !selectedToken) { @@ -121,6 +128,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateGasPrice(ethUtil.addHexPrefix(gasPrice)) updateGasLimit(ethUtil.addHexPrefix(gasLimit)) updateGasTotal(ethUtil.addHexPrefix(gasTotal)) + updateSendErrors({ insufficientFunds: false }) hideModal() } @@ -150,7 +158,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { }) if (!balanceIsSufficient) { - error = t('balanceIsInsufficientGas') + error = this.context.t('balanceIsInsufficientGas') } const gasLimitTooLow = gasLimit && conversionGreaterThan( @@ -166,7 +174,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) { ) if (gasLimitTooLow) { - error = t('gasLimitTooLow') + error = this.context.t('gasLimitTooLow') } this.setState({ error }) @@ -259,7 +267,7 @@ CustomizeGasModal.prototype.render = function () { }, [ h('div.send-v2__customize-gas__header', {}, [ - h('div.send-v2__customize-gas__title', t('customGas')), + h('div.send-v2__customize-gas__title', this.context.t('customGas')), h('div.send-v2__customize-gas__close', { onClick: hideModal, @@ -275,8 +283,8 @@ CustomizeGasModal.prototype.render = function () { // max: 1000, step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), - title: t('gasPrice'), - copy: t('gasPriceCalculation'), + title: this.context.t('gasPrice'), + copy: this.context.t('gasPriceCalculation'), }), h(GasModalCard, { @@ -285,8 +293,8 @@ CustomizeGasModal.prototype.render = function () { // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), - title: t('gasLimit'), - copy: t('gasLimitCalculation'), + title: this.context.t('gasLimit'), + copy: this.context.t('gasLimitCalculation'), }), ]), @@ -299,7 +307,7 @@ CustomizeGasModal.prototype.render = function () { h('div.send-v2__customize-gas__revert', { onClick: () => this.revert(), - }, [t('revert')]), + }, [this.context.t('revert')]), h('div.send-v2__customize-gas__buttons', [ h('button.btn-secondary.send-v2__customize-gas__cancel', { @@ -307,12 +315,12 @@ CustomizeGasModal.prototype.render = function () { style: { marginRight: '10px', }, - }, [t('cancel')]), + }, [this.context.t('cancel')]), h('button.btn-primary.send-v2__customize-gas__save', { onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), className: error && 'btn-primary--disabled', - }, [t('save')]), + }, [this.context.t('save')]), ]), ]), diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index e5359c1d6..a133f0e29 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -10,7 +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) { @@ -130,7 +130,7 @@ class AccountDropdowns extends Component { actions.showEditAccountModal(identity) }, }, [ - t('edit'), + this.context.t('edit'), ]), ]), @@ -144,7 +144,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.allcaps', t('loose')) : null + return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null } catch (e) { return } } @@ -202,7 +202,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, t('createAccount')), + }, this.context.t('createAccount')), ], ), h( @@ -236,7 +236,7 @@ class AccountDropdowns extends Component { fontSize: '16px', lineHeight: '23px', }, - }, t('importAccount')), + }, this.context.t('importAccount')), ] ), ] @@ -287,7 +287,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('accountDetails'), + this.context.t('accountDetails'), ), h( DropdownMenuItem, @@ -303,7 +303,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('etherscanView'), + this.context.t('etherscanView'), ), h( DropdownMenuItem, @@ -319,7 +319,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('copyAddress'), + this.context.t('copyAddress'), ), h( DropdownMenuItem, @@ -331,7 +331,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('exportPrivateKey'), + this.context.t('exportPrivateKey'), ), h( DropdownMenuItem, @@ -346,7 +346,7 @@ class AccountDropdowns extends Component { menuItemStyles, ), }, - t('addToken'), + this.context.t('addToken'), ), ] @@ -425,6 +425,7 @@ AccountDropdowns.propTypes = { enableAccountsSelector: PropTypes.bool, enableAccountOption: PropTypes.bool, enableAccountOptions: PropTypes.bool, + t: PropTypes.func, } const mapDispatchToProps = (dispatch) => { @@ -463,4 +464,9 @@ function mapStateToProps (state) { } } +AccountDropdowns.contextTypes = { + t: PropTypes.func, +} + 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 5afe730c1..9e47f38ef 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -6,9 +7,9 @@ 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. const notToggleElementClassnames = [ 'menu-icon', @@ -54,8 +55,13 @@ function NetworkDropdown () { Component.call(this) } +NetworkDropdown.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown) + // TODO: specify default props and proptypes NetworkDropdown.prototype.render = function () { const props = this.props @@ -94,13 +100,13 @@ NetworkDropdown.prototype.render = function () { }, [ h('div.network-dropdown-header', {}, [ - h('div.network-dropdown-title', {}, t('networks')), + h('div.network-dropdown-title', {}, this.context.t('networks')), h('div.network-dropdown-divider'), h('div.network-dropdown-content', {}, - t('defaultNetwork') + this.context.t('defaultNetwork') ), ]), @@ -122,7 +128,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', }, - }, t('mainnet')), + }, this.context.t('mainnet')), ] ), @@ -144,7 +150,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }, - }, t('ropsten')), + }, this.context.t('ropsten')), ] ), @@ -166,7 +172,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', }, - }, t('kovan')), + }, this.context.t('kovan')), ] ), @@ -188,7 +194,7 @@ NetworkDropdown.prototype.render = function () { style: { color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', }, - }, t('rinkeby')), + }, this.context.t('rinkeby')), ] ), @@ -197,20 +203,20 @@ NetworkDropdown.prototype.render = function () { { key: 'default', closeMenu: () => this.props.hideNetworkDropdown(), - onClick: () => props.setRpcTarget('http://localhost:8545'), + onClick: () => props.setProviderType('localhost'), style: dropdownMenuItemStyle, }, [ - activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), + providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), h(NetworkDropdownIcon, { - isSelected: activeNetwork === 'http://localhost:8545', + isSelected: providerType === 'localhost', innerBorder: '1px solid #9b9b9b', }), h('span.network-name-item', { style: { - color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', + color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b', }, - }, t('localhost')), + }, this.context.t('localhost')), ] ), @@ -234,7 +240,7 @@ NetworkDropdown.prototype.render = function () { style: { color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', }, - }, t('customRPC')), + }, this.context.t('customRPC')), ] ), @@ -249,15 +255,15 @@ NetworkDropdown.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = t('mainnet') + name = this.context.t('mainnet') } else if (providerName === 'ropsten') { - name = t('ropsten') + name = this.context.t('ropsten') } else if (providerName === 'kovan') { - name = t('kovan') + name = this.context.t('kovan') } else if (providerName === 'rinkeby') { - name = t('rinkeby') + name = this.context.t('rinkeby') } else { - name = t('unknownNetwork') + name = this.context.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 a4f93b505..b70d0b893 100644 --- a/ui/app/components/dropdowns/token-menu-dropdown.js +++ b/ui/app/components/dropdowns/token-menu-dropdown.js @@ -1,12 +1,18 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') -const t = require('../../../i18n') + + +TokenMenuDropdown.contextTypes = { + t: PropTypes.func, +} module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown) + function mapDispatchToProps (dispatch) { return { showHideTokenConfirmationModal: (token) => { @@ -44,7 +50,7 @@ TokenMenuDropdown.prototype.render = function () { showHideTokenConfirmationModal(this.props.token) this.props.onClose() }, - }, t('hideToken')), + }, this.context.t('hideToken')), ]), ]), diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 1b2d4009d..feb0a7037 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const extend = require('xtend') @@ -8,11 +9,15 @@ const ENS = require('ethjs-ens') const networkMap = require('ethjs-ens/lib/network-map.json') const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' -const t = require('../../i18n') +const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete') +EnsInput.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(EnsInput) -module.exports = EnsInput inherits(EnsInput, Component) function EnsInput () { @@ -27,10 +32,10 @@ EnsInput.prototype.render = function () { const network = this.props.network const networkHasEnsSupport = getNetworkEnsSupport(network) - if (!networkHasEnsSupport) return - props.onChange(recipient) + if (!networkHasEnsSupport) return + if (recipient.match(ensRE) === null) { return this.setState({ loadingEns: false, @@ -71,13 +76,13 @@ EnsInput.prototype.lookupEnsName = function (recipient) { log.info(`ENS attempting to resolve name: ${recipient}`) this.ens.lookup(recipient.trim()) .then((address) => { - if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName')) + if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName')) if (address !== ensResolution) { this.setState({ loadingEns: false, ensResolution: address, nickname: recipient.trim(), - hoverText: address + '\n' + t('clickCopy'), + hoverText: address + '\n' + this.context.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 a43d44f89..75303a34a 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -1,12 +1,18 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const extend = require('xtend') -const t = require('../../i18n') +const connect = require('react-redux').connect + +HexAsDecimalInput.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(HexAsDecimalInput) -module.exports = HexAsDecimalInput inherits(HexAsDecimalInput, Component) function HexAsDecimalInput () { @@ -127,13 +133,13 @@ HexAsDecimalInput.prototype.constructWarning = function () { let message = name ? name + ' ' : '' if (min && max) { - message += t('betweenMinAndMax', [min, max]) + message += this.context.t('betweenMinAndMax', [min, max]) } else if (min) { - message += t('greaterThanMin', [min]) + message += this.context.t('greaterThanMin', [min]) } else if (max) { - message += t('lessThanMax', [max]) + message += this.context.t('lessThanMax', [max]) } else { - message += t('invalidInput') + message += this.context.t('invalidInput') } return message diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index b803b7ceb..dce9b0449 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () { ) : ( h('img.balance-icon', { - src: '../images/eth_logo.svg', + src: './images/eth_logo.svg', style: { height: diameter, width: diameter, @@ -105,9 +105,8 @@ IdenticonComponent.prototype.componentDidUpdate = function () { function _generateBlockie (container, address, diameter) { const img = new Image() img.src = toDataUrl(address) - const dia = !diameter || diameter < 50 ? 50 : diameter - img.height = dia * 1.25 - img.width = dia * 1.25 + img.height = diameter + img.width = diameter container.appendChild(img) } diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 927d73482..d9885daf5 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -8,7 +9,6 @@ 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 { @@ -34,8 +34,13 @@ function AccountDetailsModal () { Component.call(this) } +AccountDetailsModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + // Not yet pixel perfect todos: // fonts of qr-header @@ -65,12 +70,12 @@ AccountDetailsModal.prototype.render = function () { h('button.btn-primary.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), - }, t('etherscanView')), + }, this.context.t('etherscanView')), // Holding on redesign for Export Private Key functionality h('button.btn-primary.account-modal__button', { onClick: () => showExportPrivateKeyModal(), - }, t('exportPrivateKey')), + }, this.context.t('exportPrivateKey')), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 08540aa76..a9856b20f 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -1,11 +1,11 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits 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 { @@ -26,8 +26,13 @@ function AccountModalContainer () { Component.call(this) } +AccountModalContainer.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) + AccountModalContainer.prototype.render = function () { const { selectedIdentity, @@ -60,7 +65,7 @@ AccountModalContainer.prototype.render = function () { h('i.fa.fa-angle-left.fa-lg'), - h('span.account-modal-back__text', ' ' + t('back')), + h('span.account-modal-back__text', ' ' + this.context.t('back')), ]), diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 7eb73c3a6..d871e7516 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -1,10 +1,10 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') 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 { @@ -33,8 +33,13 @@ function BuyOptions () { Component.call(this) } +BuyOptions.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) + BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) { return h('div.buy-modal-content-option', { onClick, @@ -57,15 +62,15 @@ BuyOptions.prototype.render = function () { }, [ h('div.buy-modal-content-title', { style: {}, - }, t('transfers')), - h('div', {}, t('howToDeposit')), + }, this.context.t('transfers')), + h('div', {}, this.context.t('howToDeposit')), ]), h('div.buy-modal-content-options.flex-column.flex-center', {}, [ isTestNetwork - ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network)) - : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)), + ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network)) + : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)), // h('div.buy-modal-content-option', {}, [ // h('div.buy-modal-content-option-title', {}, 'Shapeshift'), @@ -73,8 +78,8 @@ BuyOptions.prototype.render = function () { // ]),, this.renderModalContentOption( - t('directDeposit'), - t('depositFromAccount'), + this.context.t('directDeposit'), + this.context.t('depositFromAccount'), () => this.goToAccountDetailsModal() ), @@ -85,7 +90,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))), ]), ]) } diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 2de1240fc..0dc611f50 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -1,22 +1,19 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits 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') -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) => { - return t('getEtherFromFaucet', [networkName]) -} + +let DIRECT_DEPOSIT_ROW_TITLE +let DIRECT_DEPOSIT_ROW_TEXT +let COINBASE_ROW_TITLE +let COINBASE_ROW_TEXT +let SHAPESHIFT_ROW_TITLE +let SHAPESHIFT_ROW_TEXT +let FAUCET_ROW_TITLE function mapStateToProps (state) { return { @@ -44,16 +41,34 @@ function mapDispatchToProps (dispatch) { } inherits(DepositEtherModal, Component) -function DepositEtherModal () { +function DepositEtherModal (props, context) { Component.call(this) + // need to set after i18n locale has loaded + DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther') + DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer') + COINBASE_ROW_TITLE = context.t('buyCoinbase') + COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer') + SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift') + SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer') + FAUCET_ROW_TITLE = context.t('testFaucet') + this.state = { buyingWithShapeshift: false, } } +DepositEtherModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal) + +DepositEtherModal.prototype.facuetRowText = function (networkName) { + return this.context.t('getEtherFromFaucet', [networkName]) +} + DepositEtherModal.prototype.renderRow = function ({ logo, title, @@ -113,10 +128,10 @@ DepositEtherModal.prototype.render = function () { h('div.page-container__header', [ - h('div.page-container__title', [t('depositEther')]), + h('div.page-container__title', [this.context.t('depositEther')]), h('div.page-container__subtitle', [ - t('needEtherInWallet'), + this.context.t('needEtherInWallet'), ]), h('div.page-container__header-close', { @@ -135,11 +150,11 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('img.deposit-ether-modal__logo', { - src: '../../../images/deposit-eth.svg', + src: './images/deposit-eth.svg', }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: t('viewAccount'), + buttonLabel: this.context.t('viewAccount'), onButtonClick: () => this.goToAccountDetailsModal(), hide: buyingWithShapeshift, }), @@ -147,8 +162,8 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('i.fa.fa-tint.fa-2x'), title: FAUCET_ROW_TITLE, - text: facuetRowText(networkName), - buttonLabel: t('getEther'), + text: this.facuetRowText(networkName), + buttonLabel: this.context.t('getEther'), onButtonClick: () => toFaucet(network), hide: !isTestNetwork || buyingWithShapeshift, }), @@ -156,13 +171,13 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('div.deposit-ether-modal__logo', { style: { - backgroundImage: 'url(\'../../../images/coinbase logo.png\')', + backgroundImage: 'url(\'./images/coinbase logo.png\')', height: '40px', }, }), title: COINBASE_ROW_TITLE, text: COINBASE_ROW_TEXT, - buttonLabel: t('continueToCoinbase'), + buttonLabel: this.context.t('continueToCoinbase'), onButtonClick: () => toCoinbase(address), hide: isTestNetwork || buyingWithShapeshift, }), @@ -170,12 +185,12 @@ DepositEtherModal.prototype.render = function () { this.renderRow({ logo: h('div.deposit-ether-modal__logo', { style: { - backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', + backgroundImage: 'url(\'./images/shapeshift logo.png\')', }, }), title: SHAPESHIFT_ROW_TITLE, text: SHAPESHIFT_ROW_TEXT, - buttonLabel: t('shapeshiftBuy'), + buttonLabel: this.context.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 6efa8d476..c79645dbf 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -1,10 +1,10 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') 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 { @@ -33,8 +33,13 @@ function EditAccountNameModal (props) { } } +EditAccountNameModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) + EditAccountNameModal.prototype.render = function () { const { hideModal, saveAccountLabel, identity } = this.props @@ -51,7 +56,7 @@ EditAccountNameModal.prototype.render = function () { ]), h('div.edit-account-name-modal-title', { - }, [t('editAccountName')]), + }, [this.context.t('editAccountName')]), h('input.edit-account-name-modal-input', { placeholder: identity.name, @@ -70,7 +75,7 @@ EditAccountNameModal.prototype.render = function () { }, disabled: this.state.inputText.length === 0, }, [ - t('save'), + this.context.t('save'), ]), ]), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index cf42e4fa2..1f80aed39 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -7,7 +8,6 @@ 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) { @@ -38,8 +38,13 @@ function ExportPrivateKeyModal () { } } +ExportPrivateKeyModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) + ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { const { exportAccount } = this.props @@ -49,8 +54,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { return h('span.private-key-password-label', privateKey - ? t('copyPrivateKey') - : t('typePassword') + ? this.context.t('copyPrivateKey') + : this.context.t('typePassword') ) } @@ -87,8 +92,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, ), (privateKey - ? 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')) + ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done')) + : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm')) ), ]) @@ -121,7 +126,7 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), - h('span.modal-body-title', t('showPrivateKeys')), + h('span.modal-body-title', this.context.t('showPrivateKeys')), h('div.private-key-password', {}, [ this.renderPasswordLabel(privateKey), @@ -131,7 +136,7 @@ ExportPrivateKeyModal.prototype.render = function () { !warning ? null : h('span.private-key-password-error', warning), ]), - h('div.private-key-password-warning', t('privateKeyWarning')), + h('div.private-key-password-warning', this.context.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 33d8062c6..72e9c84eb 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -1,10 +1,10 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') 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 { @@ -32,8 +32,13 @@ function HideTokenConfirmationModal () { this.state = {} } +HideTokenConfirmationModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) + HideTokenConfirmationModal.prototype.render = function () { const { token, network, hideToken, hideModal } = this.props const { symbol, address } = token @@ -42,7 +47,7 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__container', { }, [ h('div.hide-token-confirmation__title', {}, [ - t('hideTokenPrompt'), + this.context.t('hideTokenPrompt'), ]), h(Identicon, { @@ -55,19 +60,19 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__symbol', {}, symbol), h('div.hide-token-confirmation__copy', {}, [ - t('readdToken'), + this.context.t('readdToken'), ]), h('div.hide-token-confirmation__buttons', {}, [ h('button.btn-cancel.hide-token-confirmation__button.allcaps', { onClick: () => hideModal(), }, [ - t('cancel'), + this.context.t('cancel'), ]), h('button.btn-clear.hide-token-confirmation__button.allcaps', { onClick: () => hideToken(address), }, [ - t('hide'), + this.context.t('hide'), ]), ]), ]), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 501b83430..9250cc77e 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -6,7 +6,6 @@ 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') @@ -174,8 +173,8 @@ const MODALS = { BETA_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { - header: t('uiWelcome'), - message: t('uiWelcomeMessage'), + header: 'uiWelcome', + message: 'uiWelcomeMessage', }), ], mobileModalStyle: { @@ -191,8 +190,8 @@ const MODALS = { OLD_UI_NOTIFICATION_MODAL: { contents: [ h(NotifcationModal, { - header: t('oldUI'), - message: t('oldUIMessage'), + header: 'oldUI', + message: 'oldUIMessage', }), ], mobileModalStyle: { diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 298b76af4..0635b3f72 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -1,9 +1,8 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const actions = require('../../actions') -const t = require('../../../i18n') class NewAccountModal extends Component { constructor (props) { @@ -12,7 +11,7 @@ class NewAccountModal extends Component { const newAccountNumber = numberOfExistingAccounts + 1 this.state = { - newAccountName: `${t('account')} ${newAccountNumber}`, + newAccountName: `${this.context.t('account')} ${newAccountNumber}`, } } @@ -23,7 +22,7 @@ class NewAccountModal extends Component { h('div.new-account-modal-wrapper', { }, [ h('div.new-account-modal-header', {}, [ - t('newAccount'), + this.context.t('newAccount'), ]), h('div.modal-close-x', { @@ -31,19 +30,19 @@ class NewAccountModal extends Component { }), h('div.new-account-modal-content', {}, [ - t('accountName'), + this.context.t('accountName'), ]), h('div.new-account-input-wrapper', {}, [ h('input.new-account-input', { value: this.state.newAccountName, - placeholder: t('sampleAccountName'), + placeholder: this.context.t('sampleAccountName'), onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), h('div.new-account-modal-content.after-input', {}, [ - t('or'), + this.context.t('or'), ]), h('div.new-account-modal-content.after-input.pointer', { @@ -51,13 +50,13 @@ class NewAccountModal extends Component { this.props.hideModal() this.props.showImportPage() }, - }, t('importAnAccount')), + }, this.context.t('importAnAccount')), h('div.new-account-modal-content.button.allcaps', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - t('save'), + this.context.t('save'), ]), ]), ]), @@ -70,6 +69,7 @@ NewAccountModal.propTypes = { showImportPage: PropTypes.func, createAccount: PropTypes.func, numberOfExistingAccounts: PropTypes.number, + t: PropTypes.func, } const mapStateToProps = state => { @@ -104,4 +104,9 @@ const mapDispatchToProps = dispatch => { } } +NewAccountModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) + diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js index 621a974d0..46a4c8a21 100644 --- a/ui/app/components/modals/notification-modal.js +++ b/ui/app/components/modals/notification-modal.js @@ -1,7 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const actions = require('../../actions') class NotificationModal extends Component { @@ -22,12 +22,12 @@ class NotificationModal extends Component { }, [ h('div.notification-modal__header', {}, [ - header, + this.context.t(header), ]), h('div.notification-modal__message-wrapper', {}, [ h('div.notification-modal__message', {}, [ - message, + this.context.t(message), ]), ]), @@ -62,6 +62,7 @@ NotificationModal.propTypes = { showCancelButton: PropTypes.bool, showConfirmButton: PropTypes.bool, onConfirm: PropTypes.func, + t: PropTypes.func, } const mapDispatchToProps = dispatch => { @@ -72,4 +73,9 @@ const mapDispatchToProps = dispatch => { } } +NotificationModal.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(null, mapDispatchToProps)(NotificationModal) + diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js index e1bc91b24..89fa9bef1 100644 --- a/ui/app/components/modals/notification-modals/confirm-reset-account.js +++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js @@ -1,7 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const actions = require('../../../actions') const NotifcationModal = require('../notification-modal') diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js index 9dc31b5c7..59719d9a4 100644 --- a/ui/app/components/network-display.js +++ b/ui/app/components/network-display.js @@ -1,9 +1,8 @@ const { Component } = require('react') const h = require('react-hyperscript') const PropTypes = require('prop-types') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') -const t = require('../../i18n') const networkToColorHash = { 1: '#038789', @@ -31,7 +30,7 @@ class NetworkDisplay extends Component { const { provider: { type } } = this.props return h('.network-display__container', [ this.renderNetworkIcon(), - h('.network-name', t(type)), + h('.network-name', this.context.t(type)), ]) } } @@ -39,6 +38,7 @@ class NetworkDisplay extends Component { NetworkDisplay.propTypes = { network: PropTypes.string, provider: PropTypes.object, + t: PropTypes.func, } const mapStateToProps = ({ metamask: { network, provider } }) => { @@ -48,4 +48,9 @@ const mapStateToProps = ({ metamask: { network, provider } }) => { } } +NetworkDisplay.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(NetworkDisplay) + diff --git a/ui/app/components/network.js b/ui/app/components/network.js index f3df2242a..83297c4f2 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') +const connect = require('react-redux').connect const classnames = require('classnames') const inherits = require('util').inherits const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') -const t = require('../../i18n') -module.exports = Network +Network.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(Network) + inherits(Network, Component) @@ -15,6 +21,7 @@ function Network () { Network.prototype.render = function () { const props = this.props + const context = this.context const networkNumber = props.network let providerName try { @@ -34,7 +41,7 @@ Network.prototype.render = function () { onClick: (event) => this.props.onClick(event), }, [ h('img', { - title: t('attemptingConnect'), + title: context.t('attemptingConnect'), style: { width: '27px', }, @@ -42,22 +49,22 @@ Network.prototype.render = function () { }), ]) } else if (providerName === 'mainnet') { - hoverText = t('mainnet') + hoverText = context.t('mainnet') iconName = 'ethereum-network' } else if (providerName === 'ropsten') { - hoverText = t('ropsten') + hoverText = context.t('ropsten') iconName = 'ropsten-test-network' } else if (parseInt(networkNumber) === 3) { - hoverText = t('ropsten') + hoverText = context.t('ropsten') iconName = 'ropsten-test-network' } else if (providerName === 'kovan') { - hoverText = t('kovan') + hoverText = context.t('kovan') iconName = 'kovan-test-network' } else if (providerName === 'rinkeby') { - hoverText = t('rinkeby') + hoverText = context.t('rinkeby') iconName = 'rinkeby-test-network' } else { - hoverText = t('unknownNetwork') + hoverText = context.t('unknownNetwork') iconName = 'unknown-private-network' } @@ -85,7 +92,7 @@ Network.prototype.render = function () { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', }), - h('.network-name', t('mainnet')), + h('.network-name', context.t('mainnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': @@ -94,7 +101,7 @@ Network.prototype.render = function () { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', }), - h('.network-name', t('ropsten')), + h('.network-name', context.t('ropsten')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'kovan-test-network': @@ -103,7 +110,7 @@ Network.prototype.render = function () { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', }), - h('.network-name', t('kovan')), + h('.network-name', context.t('kovan')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': @@ -112,7 +119,7 @@ Network.prototype.render = function () { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', }), - h('.network-name', t('rinkeby')), + h('.network-name', context.t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: @@ -124,7 +131,7 @@ Network.prototype.render = function () { }, }), - h('.network-name', t('privateNetwork')), + h('.network-name', context.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 8b0ce1e8b..bb7e0814c 100644 --- a/ui/app/components/notice.js +++ b/ui/app/components/notice.js @@ -1,12 +1,18 @@ const inherits = require('util').inherits const Component = require('react').Component +const PropTypes = require('prop-types') 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') +const connect = require('react-redux').connect + +Notice.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(Notice) -module.exports = Notice inherits(Notice, Component) function Notice () { @@ -111,7 +117,7 @@ Notice.prototype.render = function () { style: { marginTop: '18px', }, - }, t('accept')), + }, this.context.t('accept')), ]) ) } diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js index 87e66855d..f16fcb1c7 100644 --- a/ui/app/components/pending-msg-details.js +++ b/ui/app/components/pending-msg-details.js @@ -1,11 +1,17 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits -const t = require('../../i18n') +const connect = require('react-redux').connect const AccountPanel = require('./account-panel') -module.exports = PendingMsgDetails +PendingMsgDetails.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(PendingMsgDetails) + inherits(PendingMsgDetails, Component) function PendingMsgDetails () { @@ -40,7 +46,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.allcaps', t('message')), + h('label.font-small.allcaps', this.context.t('message')), h('span.font-small', msgParams.data), ]), ]), diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index dc406b955..21a7864e4 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -1,10 +1,16 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const PendingTxDetails = require('./pending-msg-details') -const t = require('../../i18n') +const connect = require('react-redux').connect + +PendingMsg.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(PendingMsg) -module.exports = PendingMsg inherits(PendingMsg, Component) function PendingMsg () { @@ -30,14 +36,14 @@ PendingMsg.prototype.render = function () { fontWeight: 'bold', textAlign: 'center', }, - }, t('signMessage')), + }, this.context.t('signMessage')), h('.error', { style: { margin: '10px', }, }, [ - t('signNotice'), + this.context.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)' }, @@ -46,7 +52,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 }) }, - }, t('readMore')), + }, this.context.t('readMore')), ]), // message details @@ -56,10 +62,10 @@ PendingMsg.prototype.render = function () { h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelMessage, - }, t('cancel')), + }, this.context.t('cancel')), h('button', { onClick: state.signMessage, - }, t('sign')), + }, this.context.t('sign')), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index b75f3a964..aa68a9eb0 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -1,5 +1,5 @@ const { Component } = require('react') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const h = require('react-hyperscript') const PropTypes = require('prop-types') const actions = require('../../actions') @@ -8,7 +8,6 @@ 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 NetworkDisplay = require('../network-display') @@ -33,7 +32,7 @@ class ConfirmDeployContract extends Component { if (valid && this.verifyGasParams()) { this.props.sendTransaction(txMeta, event) } else { - this.props.displayWarning('invalidGasParams') + this.props.displayWarning(this.context.t('invalidGasParams')) this.setState({ submitting: false }) } } @@ -178,7 +177,7 @@ class ConfirmDeployContract extends Component { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), @@ -217,8 +216,8 @@ class ConfirmDeployContract extends Component { 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') ]), + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -248,11 +247,11 @@ class ConfirmDeployContract extends Component { h('.page-container__header-row', [ h('span.page-container__back-button', { onClick: () => backToAccountDetail(selectedAddress), - }, t('back')), + }, this.context.t('back')), window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), ]), - h('.page-container__title', t('confirmContract')), - h('.page-container__subtitle', t('pleaseReviewTransaction')), + h('.page-container__title', this.context.t('confirmContract')), + h('.page-container__subtitle', this.context.t('pleaseReviewTransaction')), ]), // Main Send token Card h('.page-container__content', [ @@ -275,7 +274,7 @@ class ConfirmDeployContract extends Component { 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('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`), @@ -283,9 +282,9 @@ class ConfirmDeployContract extends Component { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', t('newContract')), + h('div.confirm-screen-row-info', this.context.t('newContract')), ]), ]), @@ -303,12 +302,12 @@ class ConfirmDeployContract extends Component { // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { onClick: event => this.cancel(event, txMeta), - }, t('cancel')), + }, this.context.t('cancel')), // Accept Button h('button.btn-confirm.page-container__footer-button.allcaps', { onClick: event => this.onSubmit(event), - }, t('confirm')), + }, this.context.t('confirm')), ]), ]), ]) @@ -325,6 +324,7 @@ ConfirmDeployContract.propTypes = { conversionRate: PropTypes.number, currentCurrency: PropTypes.string, selectedAddress: PropTypes.string, + t: PropTypes.func, } const mapStateToProps = state => { @@ -347,8 +347,12 @@ const mapDispatchToProps = dispatch => { return { backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - displayWarning: warning => actions.displayWarning(t(warning)), + displayWarning: warning => actions.displayWarning(warning), } } +ConfirmDeployContract.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index d1ce25cbf..7bf20bced 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -1,5 +1,6 @@ const Component = require('react').Component -const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../actions') @@ -7,20 +8,29 @@ const clone = require('clone') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const classnames = require('classnames') const { conversionUtil, addCurrencies, multiplyCurrencies, } = require('../../conversion-util') +const { + getGasTotal, + isBalanceSufficient, +} = require('../send/send-utils') 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') +ConfirmSendEther.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) + function mapStateToProps (state) { const { conversionRate, @@ -30,12 +40,14 @@ function mapStateToProps (state) { } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + const { balance } = accounts[selectedAddress] return { conversionRate, identities, selectedAddress, currentCurrency, send, + balance, } } @@ -86,6 +98,7 @@ function mapDispatchToProps (dispatch) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -96,6 +109,52 @@ function ConfirmSendEther () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendEther.prototype.updateComponentSendErrors = function (prevProps) { + const { + balance: oldBalance, + conversionRate: oldConversionRate, + } = prevProps + const { + updateSendErrors, + balance, + conversionRate, + send: { + errors: { + simulationFails, + }, + }, + } = this.props + const txMeta = this.gatherTxMeta() + + const shouldUpdateBalanceSendErrors = balance && [ + balance !== oldBalance, + conversionRate !== oldConversionRate, + ].some(x => Boolean(x)) + + if (shouldUpdateBalanceSendErrors) { + const balanceIsSufficient = this.isBalanceSufficient(txMeta) + updateSendErrors({ + insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + }) + } + + const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) + + if (shouldUpdateSimulationSendError) { + updateSendErrors({ + simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + }) + } +} + +ConfirmSendEther.prototype.componentWillMount = function () { + this.updateComponentSendErrors({}) +} + +ConfirmSendEther.prototype.componentDidUpdate = function (prevProps) { + this.updateComponentSendErrors(prevProps) +} + ConfirmSendEther.prototype.getAmount = function () { const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() @@ -178,6 +237,7 @@ ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} + const account = identities ? identities[txParams.from] || {} : {} const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee() const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() @@ -193,11 +253,11 @@ ConfirmSendEther.prototype.getData = function () { return { from: { address: txParams.from, - name: identities[txParams.from].name, + name: account.name, }, to: { address: txParams.to, - name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'), + name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'), }, memo: txParams.memo || '', gasFeeInFIAT, @@ -218,7 +278,12 @@ ConfirmSendEther.prototype.render = function () { conversionRate, currentCurrency: convertedCurrency, showCustomizeGasModal, - send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + send: { + gasTotal, + gasLimit: sendGasLimit, + gasPrice: sendGasPrice, + errors, + }, } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -298,7 +363,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', [ t('from') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`), @@ -306,7 +371,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`), @@ -314,7 +379,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h(GasFeeDisplay, { gasTotal: gasTotal || gasFeeInHex, @@ -326,15 +391,22 @@ ConfirmSendEther.prototype.render = function () { ]), 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', { + className: classnames({ + 'confirm-screen-section-column--with-error': errors['insufficientFunds'], + 'confirm-screen-section-column': !errors['insufficientFunds'], + }), + }, [ + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.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`), ]), + + this.renderErrorMessage('insufficientFunds'), ]), ]), @@ -420,8 +492,10 @@ ConfirmSendEther.prototype.render = function () { ]), h('form#pending-tx-form', { + className: 'confirm-screen-form', onSubmit: this.onSubmit, }, [ + this.renderErrorMessage('simulationFails'), h('.page-container__footer', [ // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { @@ -429,26 +503,38 @@ ConfirmSendEther.prototype.render = function () { clearSend() this.cancel(event, txMeta) }, - }, t('cancel')), + }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), ]), ]), ]) ) } +ConfirmSendEther.prototype.renderErrorMessage = function (message) { + const { send: { errors } } = this.props + + return errors[message] + ? h('div.confirm-screen-error', [ errors[message] ]) + : null +} + ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() + const { updateSendErrors } = this.props const txMeta = this.gatherTxMeta() const valid = this.checkValidity() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) this.setState({ valid, submitting: true }) - if (valid && this.verifyGasParams()) { + if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) + } else if (!balanceIsSufficient) { + updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) } else { - this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) + updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) this.setState({ submitting: false }) } } @@ -460,6 +546,28 @@ ConfirmSendEther.prototype.cancel = function (event, txMeta) { cancelTransaction(txMeta) } +ConfirmSendEther.prototype.isBalanceSufficient = function (txMeta) { + const { + balance, + conversionRate, + } = this.props + const { + txParams: { + gas, + gasPrice, + value: amount, + }, + } = txMeta + const gasTotal = getGasTotal(gas, gasPrice) + + return isBalanceSufficient({ + amount, + gasTotal, + balance, + conversionRate, + }) +} + ConfirmSendEther.prototype.checkValidity = function () { const form = this.getFormEl() const valid = form.checkValidity() @@ -523,4 +631,4 @@ ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, const numBN = new BN(numerator) const denomBN = new BN(denominator) return targetBN.mul(numBN).div(denomBN) -} +}
\ No newline at end of file diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index f9276e8a5..19e591fd6 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -1,12 +1,12 @@ const Component = require('react').Component -const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits 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 GasFeeDisplay = require('../send/gas-fee-display-v2.js') @@ -18,8 +18,13 @@ const { addCurrencies, } = require('../../conversion-util') const { + getGasTotal, + isBalanceSufficient, +} = require('../send/send-utils') +const { calcTokenAmount, } = require('../../token-util') +const classnames = require('classnames') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -29,8 +34,13 @@ const { getSelectedTokenContract, } = require('../../selectors') +ConfirmSendToken.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) + function mapStateToProps (state, ownProps) { const { token: { symbol }, txData } = ownProps const { txParams } = txData || {} @@ -41,9 +51,10 @@ function mapStateToProps (state, ownProps) { identities, currentCurrency, } = state.metamask + const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) const tokenExchangeRate = getTokenExchangeRate(state, symbol) - + const { balance } = accounts[selectedAddress] return { conversionRate, identities, @@ -53,6 +64,7 @@ function mapStateToProps (state, ownProps) { currentCurrency: currentCurrency.toUpperCase(), send: state.metamask.send, tokenContract: getSelectedTokenContract(state), + balance, } } @@ -102,7 +114,7 @@ function mapDispatchToProps (dispatch, ownProps) { fromNumericBase: 'dec', toNumericBase: 'hex', }) - + let forceGasMin if (lastGasPrice) { forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { @@ -124,6 +136,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, + updateSendErrors: error => dispatch(actions.updateSendErrors(error)), } } @@ -134,6 +147,44 @@ function ConfirmSendToken () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendToken.prototype.updateComponentSendErrors = function (prevProps) { + const { + balance: oldBalance, + conversionRate: oldConversionRate, + } = prevProps + const { + updateSendErrors, + balance, + conversionRate, + send: { + errors: { + simulationFails, + }, + }, + } = this.props + const txMeta = this.gatherTxMeta() + + const shouldUpdateBalanceSendErrors = balance && [ + balance !== oldBalance, + conversionRate !== oldConversionRate, + ].some(x => Boolean(x)) + + if (shouldUpdateBalanceSendErrors) { + const balanceIsSufficient = this.isBalanceSufficient(txMeta) + updateSendErrors({ + insufficientFunds: balanceIsSufficient ? false : this.context.t('insufficientFunds'), + }) + } + + const shouldUpdateSimulationSendError = Boolean(txMeta.simulationFails) !== Boolean(simulationFails) + + if (shouldUpdateSimulationSendError) { + updateSendErrors({ + simulationFails: !txMeta.simulationFails ? false : this.context.t('transactionError'), + }) + } +} + ConfirmSendToken.prototype.componentWillMount = function () { const { tokenContract, selectedAddress } = this.props tokenContract && tokenContract @@ -141,6 +192,11 @@ ConfirmSendToken.prototype.componentWillMount = function () { .then(usersToken => { }) this.props.updateTokenExchangeRate() + this.updateComponentSendErrors({}) +} + +ConfirmSendToken.prototype.componentDidUpdate = function (prevProps) { + this.updateComponentSendErrors(prevProps) } ConfirmSendToken.prototype.getAmount = function () { @@ -169,7 +225,7 @@ ConfirmSendToken.prototype.getAmount = function () { ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) : null, token: typeof value === 'undefined' - ? t('unknown') + ? this.context.t('unknown') : +sendTokenAmount.toFixed(decimals), } @@ -241,7 +297,7 @@ ConfirmSendToken.prototype.getData = function () { }, to: { address: value, - name: identities[value] ? identities[value].name : t('newRecipient'), + name: identities[value] ? identities[value].name : this.context.t('newRecipient'), }, memo: txParams.memo || '', } @@ -287,7 +343,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { return ( h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]), h('div.confirm-screen-section-column', [ h(GasFeeDisplay, { gasTotal: gasTotal || gasFeeInHex, @@ -301,7 +357,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { } ConfirmSendToken.prototype.renderTotalPlusGas = function () { - const { token: { symbol }, currentCurrency } = this.props + const { token: { symbol }, currentCurrency, send: { errors } } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() @@ -309,8 +365,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ? ( 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('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ @@ -321,19 +377,34 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ) : ( 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', { + className: classnames({ + 'confirm-screen-section-column--with-error': errors['insufficientFunds'], + 'confirm-screen-section-column': !errors['insufficientFunds'], + }), + }, [ + h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]), + h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]), ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), - h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`), ]), + + this.renderErrorMessage('insufficientFunds'), ]) ) } +ConfirmSendToken.prototype.renderErrorMessage = function (message) { + const { send: { errors } } = this.props + + return errors[message] + ? h('div.confirm-screen-error', [ errors[message] ]) + : null +} + ConfirmSendToken.prototype.render = function () { const { editTransaction } = this.props const txMeta = this.gatherTxMeta() @@ -350,10 +421,11 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] - const title = txMeta.lastGasPrice ? 'Reprice Transaction' : t('confirm') - const subtitle = txMeta.lastGasPrice - ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' - : t('pleaseReviewTransaction') + const isTxReprice = Boolean(txMeta.lastGasPrice) + const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm') + const subtitle = isTxReprice + ? this.context.t('reprice_subtitle') + : this.context.t('pleaseReviewTransaction') return ( h('div.confirm-screen-container.confirm-send-token', [ @@ -362,7 +434,7 @@ ConfirmSendToken.prototype.render = function () { h('div.page-container__header', [ !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), - }, t('edit')), + }, this.context.t('edit')), h('div.page-container__title', title), h('div.page-container__subtitle', subtitle), ]), @@ -406,7 +478,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', [ t('from') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`), @@ -414,7 +486,7 @@ ConfirmSendToken.prototype.render = function () { ]), toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ - h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]), + h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`), @@ -428,17 +500,20 @@ ConfirmSendToken.prototype.render = function () { ]), ]), + h('form#pending-tx-form', { + className: 'confirm-screen-form', onSubmit: this.onSubmit, }, [ + this.renderErrorMessage('simulationFails'), h('.page-container__footer', [ // Cancel Button h('button.btn-cancel.page-container__footer-button.allcaps', { onClick: (event) => this.cancel(event, txMeta), - }, t('cancel')), + }, this.context.t('cancel')), // Accept Button - h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]), + h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]), ]), ]), ]), @@ -448,18 +523,44 @@ ConfirmSendToken.prototype.render = function () { ConfirmSendToken.prototype.onSubmit = function (event) { event.preventDefault() + const { updateSendErrors } = this.props const txMeta = this.gatherTxMeta() const valid = this.checkValidity() + const balanceIsSufficient = this.isBalanceSufficient(txMeta) this.setState({ valid, submitting: true }) - if (valid && this.verifyGasParams()) { + if (valid && this.verifyGasParams() && balanceIsSufficient) { this.props.sendTransaction(txMeta, event) + } else if (!balanceIsSufficient) { + updateSendErrors({ insufficientFunds: this.context.t('insufficientFunds') }) } else { - this.props.dispatch(actions.displayWarning(t('invalidGasParams'))) + updateSendErrors({ invalidGasParams: this.context.t('invalidGasParams') }) this.setState({ submitting: false }) } } +ConfirmSendToken.prototype.isBalanceSufficient = function (txMeta) { + const { + balance, + conversionRate, + } = this.props + const { + txParams: { + gas, + gasPrice, + }, + } = txMeta + const gasTotal = getGasTotal(gas, gasPrice) + + return isBalanceSufficient({ + amount: '0', + gasTotal, + balance, + conversionRate, + }) +} + + ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 9c0453a3b..acdd99364 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -1,5 +1,5 @@ const Component = require('react').Component -const { connect } = require('react-redux') +const connect = require('react-redux').connect const h = require('react-hyperscript') const clone = require('clone') const abi = require('human-standard-token-abi') diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index f6af13454..1423aa84d 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -1,10 +1,16 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const CurrencyDisplay = require('./currency-display') -const t = require('../../../i18n') +const connect = require('react-redux').connect + +GasFeeDisplay.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(GasFeeDisplay) -module.exports = GasFeeDisplay inherits(GasFeeDisplay, Component) function GasFeeDisplay () { @@ -33,8 +39,8 @@ GasFeeDisplay.prototype.render = function () { readOnly: true, }) : gasLoadingError - ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.') - : h('div.currency-display', t('loading')), + ? h('div.currency-display.currency-display--message', this.context.t('setGasPrice')) + : h('div.currency-display', this.context.t('loading')), h('button.sliders-icon-container', { onClick, diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js index d925d3ed8..62cdc1cad 100644 --- a/ui/app/components/send/gas-tooltip.js +++ b/ui/app/components/send/gas-tooltip.js @@ -1,10 +1,16 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const InputNumber = require('../input-number.js') -const t = require('../../../i18n') +const connect = require('react-redux').connect + +GasTooltip.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(GasTooltip) -module.exports = GasTooltip inherits(GasTooltip, Component) function GasTooltip () { @@ -82,7 +88,7 @@ GasTooltip.prototype.render = function () { 'marginTop': '81px', }, }, [ - h('span.gas-tooltip-label', {}, [t('gasLimit')]), + h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]), h('i.fa.fa-info-circle'), ]), h(InputNumber, { diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js index d8211930d..71bfb2668 100644 --- a/ui/app/components/send/send-utils.js +++ b/ui/app/components/send/send-utils.js @@ -2,6 +2,7 @@ const { addCurrencies, conversionUtil, conversionGTE, + multiplyCurrencies, } = require('../../conversion-util') const { calcTokenAmount, @@ -31,7 +32,7 @@ function isBalanceSufficient ({ { value: totalAmount, fromNumericBase: 'hex', - conversionRate: amountConversionRate, + conversionRate: amountConversionRate || conversionRate, fromCurrency: primaryCurrency, }, ) @@ -62,7 +63,16 @@ function isTokenBalanceSufficient ({ return tokenBalanceIsSufficient } +function getGasTotal (gasLimit, gasPrice) { + return multiplyCurrencies(gasLimit, gasPrice, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, + }) +} + module.exports = { + getGasTotal, isBalanceSufficient, isTokenBalanceSufficient, } diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js index 72074229e..5ea17f9a2 100644 --- a/ui/app/components/send/to-autocomplete.js +++ b/ui/app/components/send/to-autocomplete.js @@ -1,10 +1,16 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const AccountListItem = require('./account-list-item') -const t = require('../../../i18n') +const connect = require('react-redux').connect + +ToAutoComplete.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(ToAutoComplete) -module.exports = ToAutoComplete inherits(ToAutoComplete, Component) function ToAutoComplete () { @@ -93,7 +99,7 @@ ToAutoComplete.prototype.render = function () { return h('div.send-v2__to-autocomplete', {}, [ h('input.send-v2__to-autocomplete__input', { - placeholder: t('recipientAddress'), + placeholder: this.context.t('recipientAddress'), className: inError ? `send-v2__error-border` : '', value: to, onChange: event => onChange(event.target.value), diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js index f35c353ad..9cef8e401 100644 --- a/ui/app/components/sender-to-recipient.js +++ b/ui/app/components/sender-to-recipient.js @@ -1,7 +1,7 @@ const { Component } = require('react') const h = require('react-hyperscript') +const connect = require('react-redux').connect const PropTypes = require('prop-types') -const t = require('../../i18n') const Identicon = require('./identicon') class SenderToRecipient extends Component { @@ -21,7 +21,7 @@ class SenderToRecipient extends Component { this.renderRecipientIcon(), h( '.sender-to-recipient__name.sender-to-recipient__recipient-name', - recipientName || t('newContract') + recipientName || this.context.t('newContract') ), ]) ) @@ -46,7 +46,7 @@ class SenderToRecipient extends Component { h('img', { height: 15, width: 15, - src: '/images/arrow-right.svg', + src: './images/arrow-right.svg', }), ]), ]), @@ -61,6 +61,12 @@ SenderToRecipient.propTypes = { senderAddress: PropTypes.string, recipientName: PropTypes.string, recipientAddress: PropTypes.string, + t: PropTypes.func, } -module.exports = SenderToRecipient +SenderToRecipient.contextTypes = { + t: PropTypes.func, +} + +module.exports = connect()(SenderToRecipient) + diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 5729f893c..fd4a80a4a 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -1,5 +1,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits +const PropTypes = require('prop-types') const Component = require('react').Component const connect = require('react-redux').connect const classnames = require('classnames') @@ -7,7 +8,6 @@ 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 { @@ -33,8 +33,13 @@ function mapDispatchToProps (dispatch) { } } +ShapeshiftForm.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) + inherits(ShapeshiftForm, Component) function ShapeshiftForm () { Component.call(this) @@ -94,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: t('invalidRequest'), + errorMessage: this.context.t('invalidRequest'), isLoading: false, })) } @@ -126,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { return h('div.shapeshift-form__metadata', {}, [ - this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')), - this.renderMetadata(t('limit'), limit), - this.renderMetadata(t('exchangeRate'), rate), - this.renderMetadata(t('min'), minimum), + this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')), + this.renderMetadata(this.context.t('limit'), limit), + this.renderMetadata(this.context.t('exchangeRate'), rate), + this.renderMetadata(this.context.t('min'), minimum), ]) } @@ -143,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - t('depositCoin', [depositCoin.toUpperCase()]), + this.context.t('depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), @@ -180,7 +185,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', t('deposit')), + h('div.shapeshift-form__selector-label', this.context.t('deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -200,7 +205,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - t('receive'), + this.context.t('receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -218,7 +223,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - t('refundAddress'), + this.context.t('refundAddress'), ]), h('input.shapeshift-form__address-input', { @@ -240,7 +245,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [t('buy')]), + }, [this.context.t('buy')]), ]) } diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js index fddbc6821..4334aacba 100644 --- a/ui/app/components/shift-list-item.js +++ b/ui/app/components/shift-list-item.js @@ -1,20 +1,25 @@ 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 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') const Tooltip = require('./tooltip') +ShiftListItem.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(ShiftListItem) + function mapStateToProps (state) { return { selectedAddress: state.metamask.selectedAddress, @@ -76,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () { value: this.props.depositAddress, }), h(Tooltip, { - title: t('qrCode'), + title: this.context.t('qrCode'), }, [ h('i.fa.fa-qrcode.pointer.pop-hover', { onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)), @@ -136,8 +141,8 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, t('toETHviaShapeShift', [props.depositType])), - h('div', t('noDeposits')), + }, this.context.t('toETHviaShapeShift', [props.depositType])), + h('div', this.context.t('noDeposits')), h('div', { style: { fontSize: 'x-small', @@ -159,8 +164,8 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, t('toETHviaShapeShift', [props.depositType])), - h('div', t('conversionProgress')), + }, this.context.t('toETHviaShapeShift', [props.depositType])), + h('div', this.context.t('conversionProgress')), h('div', { style: { fontSize: 'x-small', @@ -185,7 +190,7 @@ ShiftListItem.prototype.renderInfo = function () { color: '#ABA9AA', width: '100%', }, - }, t('fromShapeShift')), + }, this.context.t('fromShapeShift')), h('div', formatDate(props.time)), h('div', { style: { @@ -197,7 +202,7 @@ ShiftListItem.prototype.renderInfo = function () { ]) case 'failed': - return h('span.error', '(' + t('failed') + ')') + return h('span.error', '(' + this.context.t('failed') + ')') default: return '' } diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index 810a52e55..41415411e 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') @@ -9,7 +10,6 @@ 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 { @@ -38,8 +38,13 @@ function mapDispatchToProps (dispatch) { } } +SignatureRequest.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) + inherits(SignatureRequest, Component) function SignatureRequest (props) { Component.call(this) @@ -55,7 +60,7 @@ SignatureRequest.prototype.renderHeader = function () { h('div.request-signature__header-background'), - h('div.request-signature__header__text', t('sigRequest')), + h('div.request-signature__header__text', this.context.t('sigRequest')), h('div.request-signature__header__tip-container', [ h('div.request-signature__header__tip'), @@ -76,7 +81,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', [this.context.t('account') + ':']), h(AccountDropdownMini, { selectedAccount, @@ -103,7 +108,7 @@ SignatureRequest.prototype.renderBalance = function () { return h('div.request-signature__balance', [ - h('div.request-signature__balance-text', [t('balance')]), + h('div.request-signature__balance-text', [this.context.t('balance')]), h('div.request-signature__balance-value', `${balanceInEther} ETH`), @@ -137,7 +142,7 @@ SignatureRequest.prototype.renderRequestInfo = function () { return h('div.request-signature__request-info', [ h('div.request-signature__headline', [ - t('yourSigRequested'), + this.context.t('yourSigRequested'), ]), ]) @@ -155,18 +160,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) { SignatureRequest.prototype.renderBody = function () { let rows - let notice = t('youSign') + ':' + let notice = this.context.t('youSign') + ':' const { txData } = this.props const { type, msgParams: { data } } = txData if (type === 'personal_sign') { - rows = [{ name: t('message'), value: this.msgHexToText(data) }] + rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }] } else if (type === 'eth_signTypedData') { rows = data } else if (type === 'eth_sign') { - rows = [{ name: t('message'), value: data }] - notice = t('signNotice') + rows = [{ name: this.context.t('message'), value: data }] + notice = this.context.t('signNotice') } return h('div.request-signature__body', {}, [ @@ -225,10 +230,10 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.btn-secondary--lg.request-signature__footer__cancel-button', { onClick: cancel, - }, t('cancel')), + }, this.context.t('cancel')), h('button.btn-primary--lg', { onClick: sign, - }, t('sign')), + }, this.context.t('sign')), ]) } diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 01529aeda..150a3762d 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -1,11 +1,11 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const inherits = require('util').inherits 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 { @@ -25,8 +25,13 @@ for (const address in contracts) { } } +TokenList.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(TokenList) + inherits(TokenList, Component) function TokenList () { this.state = { @@ -43,7 +48,7 @@ TokenList.prototype.render = function () { const { tokens, isLoading, error } = state if (isLoading) { - return this.message(t('loadingTokens')) + return this.message(this.context.t('loadingTokens')) } if (error) { @@ -53,7 +58,7 @@ TokenList.prototype.render = function () { padding: '80px', }, }, [ - t('troubleTokenBalances'), + this.context.t('troubleTokenBalances'), h('span.hotFix', { style: { color: 'rgba(247, 134, 28, 1)', @@ -64,7 +69,7 @@ TokenList.prototype.render = function () { url: `https://ethplorer.io/address/${userAddress}`, }) }, - }, t('here')), + }, this.context.t('here')), ]) } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index d104eda88..42c008798 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const h = require('react-hyperscript') const connect = require('react-redux').connect const inherits = require('util').inherits @@ -14,10 +15,14 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util') const { calcTokenAmount } = require('../token-util') const { getCurrentCurrency } = require('../selectors') -const t = require('../../i18n') + +TxListItem.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem) + function mapStateToProps (state) { return { tokens: state.metamask.tokens, @@ -63,20 +68,24 @@ TxListItem.prototype.getAddressText = function () { const { address, txParams = {}, + isMsg, } = this.props const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { name: txDataName, params = [] } = decodedData || {} const { value } = params[0] || {} - switch (txDataName) { - case 'transfer': - return `${value.slice(0, 10)}...${value.slice(-4)}` - default: - return address - ? `${address.slice(0, 10)}...${address.slice(-4)}` - : t('contractDeployment') + let addressText + if (txDataName === 'transfer' || address) { + const addressToRender = txDataName === 'transfer' ? value : address + addressText = `${addressToRender.slice(0, 10)}...${addressToRender.slice(-4)}` + } else if (isMsg) { + addressText = this.context.t('sigRequest') + } else { + addressText = this.context.t('contractDeployment') } + + return addressText } TxListItem.prototype.getSendEtherTotal = function () { @@ -186,6 +195,9 @@ TxListItem.prototype.showRetryButton = function () { transactionId, txParams, } = this.props + if (!txParams) { + return false + } const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') @@ -307,21 +319,21 @@ TxListItem.prototype.txStatusIndicator = function () { let name if (transactionStatus === 'unapproved') { - name = t('unapproved') + name = this.context.t('unapproved') } else if (transactionStatus === 'rejected') { - name = t('rejected') + name = this.context.t('rejected') } else if (transactionStatus === 'approved') { - name = t('approved') + name = this.context.t('approved') } else if (transactionStatus === 'signed') { - name = t('signed') + name = this.context.t('signed') } else if (transactionStatus === 'submitted') { - name = t('submitted') + name = this.context.t('submitted') } else if (transactionStatus === 'confirmed') { - name = t('confirmed') + name = this.context.t('confirmed') } else if (transactionStatus === 'failed') { - name = t('failed') + name = this.context.t('failed') } else if (transactionStatus === 'dropped') { - name = t('dropped') + name = this.context.t('dropped') } return name } diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 037c7de8c..740c4a4ab 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits @@ -10,10 +11,14 @@ const { formatDate } = require('../util') const { showConfTxPage } = require('../actions') const classnames = require('classnames') const { tokenInfoGetter } = require('../token-util') -const t = require('../../i18n') + +TxList.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) + function mapStateToProps (state) { return { txsToRender: selectors.transactionsSelector(state), @@ -40,7 +45,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', t('transactions')), + h('div', this.context.t('transactions')), ]), ]), h('div.flex-column.tx-list-container', {}, [ @@ -57,7 +62,7 @@ TxList.prototype.renderTransaction = function () { : [h( 'div.tx-list-item.tx-list-item--empty', { key: 'tx-list-none' }, - [ t('noTransactions') ], + [ this.context.t('noTransactions') ], )] } @@ -72,9 +77,9 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const props = { dateString: formatDate(transaction.time), - address: transaction.txParams.to, + address: transaction.txParams && transaction.txParams.to, transactionStatus: transaction.status, - transactionAmount: transaction.txParams.value, + transactionAmount: transaction.txParams && transaction.txParams.value, transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, @@ -96,6 +101,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const opts = { key: transactionId || transactionHash, txParams: transaction.txParams, + isMsg: Boolean(transaction.msgParams), transactionStatus, transactionId, dateString, @@ -110,8 +116,8 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => showConfTxPage({id: transactionId}) - opts.transactionStatus = t('Not Started') + opts.onClick = () => showConfTxPage({ id: transactionId }) + opts.transactionStatus = this.context.t('notStarted') } 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 bf2065106..ca24e813f 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -1,18 +1,23 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') 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') const Identicon = require('./identicon') +TxView.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) + function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen const isMascara = state.appState.isMascara @@ -73,21 +78,21 @@ TxView.prototype.renderButtons = function () { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), - }, t('deposit')), + }, this.context.t('deposit')), h('button.btn-primary.hero-balance-button', { style: { marginLeft: '0.8em', }, onClick: showSendPage, - }, t('send')), + }, this.context.t('send')), ]) ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ h('button.btn-primary.hero-balance-button', { onClick: showSendTokenPage, - }, t('send')), + }, this.context.t('send')), ]) ) } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 2c6d7f784..e6b94ad12 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -1,4 +1,5 @@ const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits @@ -11,10 +12,14 @@ const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') const selectors = require('../selectors') -const t = require('../../i18n') + +WalletView.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) + function mapStateToProps (state) { return { @@ -117,7 +122,7 @@ WalletView.prototype.render = function () { onClick: hideSidebar, }), - h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''), + h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''), h('div.flex-column.flex-center.wallet-view__name-container', { style: { margin: '0 auto' }, @@ -134,13 +139,13 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.btn-clear.wallet-view__details-button.allcaps', t('details')), + h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')), ]), ]), h(Tooltip, { position: 'bottom', - title: this.state.hasCopied ? t('copiedExclamation') : t('copyToClipboard'), + title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'), wrapperClassName: 'wallet-view__tooltip', }, [ h('button.wallet-view__address', { @@ -173,7 +178,7 @@ WalletView.prototype.render = function () { showAddTokenPage() hideSidebar() }, - }, t('addToken')), + }, this.context.t('addToken')), ]) } diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index f5c1de67c..2fdda6f43 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -8,6 +8,7 @@ font-family: 'Roboto'; background: white; border-radius: 8px; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08); &__wrapper { background-color: $white; @@ -20,7 +21,7 @@ &__header { display: flex; flex-flow: column nowrap; - padding: 16px 16px 0px; + padding: 20px 20px 0px; border-bottom: 1px solid $geyser; flex: 0 0 auto; @@ -31,7 +32,8 @@ span { font-family: Roboto; - font-size: 16px; + font-size: 16px; + font-weight: 400; line-height: 21px; margin-left: 8px; } @@ -44,8 +46,13 @@ margin-top: 4px; } + &__subtitle { + font-weight: 400; + margin-top: 15px; + margin-bottom: 21px; + } + &__tabs { - margin-left: 22px; display: flex; &__tab { @@ -54,6 +61,7 @@ color: $dusty-gray; font-family: Roboto; font-size: 18px; + font-weight: 400; line-height: 24px; text-align: center; } @@ -65,6 +73,7 @@ &__unselected:hover { color: $black; border-bottom: none; + cursor: pointer; } &__selected { @@ -76,7 +85,7 @@ &__info-box { height: 96px; - margin: 20px 24px 0px; + margin: 20px 20px 0px; border-radius: 4px; background-color: $alabaster; position: relative; @@ -98,6 +107,7 @@ color: $mid-gray; font-family: Roboto; font-size: 14px; + font-weight: 400; margin-top: 15px; margin-bottom: 9px; } @@ -107,6 +117,7 @@ color: $mid-gray; font-family: Roboto; font-size: 12px; + font-weight: 400; line-height: 18px; } @@ -124,7 +135,8 @@ } &__confirmation-description { - margin: 12px 0; + font-weight: 400; + margin: 20px 0 40px 0; } &__content-container { @@ -151,7 +163,7 @@ &__input, &__add-custom-input { height: 54px; - padding: 21px 6px; + padding: 0px 20px; border: 1px solid $geyser; border-radius: 4px; margin: 22px 24px; @@ -232,6 +244,7 @@ &__add-custom-label { font-size: 16px; + font-weight: 400; line-height: 21px; margin-left: 22px; color: $scorpion; @@ -274,9 +287,11 @@ color: #5B5D67; font-family: Roboto; font-size: 18px; + font-weight: 400; line-height: 24px; margin-left: 24px; margin-top: 8px; + margin-bottom: 20px; } &__token-icons-container { @@ -317,6 +332,7 @@ } &__token-name { + font-weight: 400; font-size: 14px; line-height: 19px; } @@ -368,6 +384,7 @@ &__symbol { color: $scorpion; font-size: 16px; + font-weight: 400; line-height: 24px; } } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index abe138f54..47762e8de 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -266,6 +266,7 @@ section .confirm-screen-account-number, .confirm-screen-total-box { background-color: $wild-sand; + position: relative; .confirm-screen-label { line-height: 21px; @@ -287,6 +288,41 @@ section .confirm-screen-account-number, } } +.confirm-screen-error { + font-size: 12px; + line-height: 12px; + color: #f00; + position: absolute; + right: 12px; + width: 80px; + text-align: right; +} + +.confirm-screen-row.confirm-screen-total-box { + .confirm-screen-section-column--with-error { + flex: 0.6; + } +} + +@media screen and (max-width: 379px) { + .confirm-screen-row.confirm-screen-total-box { + .confirm-screen-section-column--with-error { + flex: 0.4; + } + } +} + +.confirm-screen-form { + position: relative; + + .confirm-screen-error { + right: 0; + width: 100%; + margin-top: 7px; + text-align: center; + } +} + .confirm-screen-confirm-button { height: 50px; border-radius: 4px; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 9dc4f1055..e8de317e3 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -10,9 +10,14 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( transition: linear 200ms; background-color: rgba($wallet-balance-bg, 0); position: relative; + flex: 1; + min-width: 0; &__token-balance { font-size: 1.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; @media #{$wallet-balance-breakpoint-range} { font-size: 95%; @@ -51,7 +56,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__balance-ellipsis { display: flex; align-items: center; - width: 100%; + min-width: 0; + flex: 1; } &__ellipsis { @@ -61,6 +67,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__balance-wrapper { flex: 1 1 auto; + min-width: 0; } } diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss index 8a56d9c6c..18c444c8a 100644 --- a/ui/app/css/itcss/settings/typography.scss +++ b/ui/app/css/itcss/settings/typography.scss @@ -1,4 +1,4 @@ -@import url('/fonts/Font_Awesome/font-awesome.min.css'); +@import url('./fonts/Font_Awesome/font-awesome.min.css'); @font-face { font-family: 'Roboto'; @@ -338,8 +338,8 @@ @font-face { font-family: 'Montserrat Regular'; - src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); - src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); + src: url('./fonts/Montserrat/Montserrat-Regular.woff') format('woff'); + src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-size: 'small'; @@ -347,59 +347,59 @@ @font-face { font-family: 'Montserrat Bold'; - src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); - src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); + src: url('./fonts/Montserrat/Montserrat-Bold.woff') format('woff'); + src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Montserrat Light'; - src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); - src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); + src: url('./fonts/Montserrat/Montserrat-Light.woff') format('woff'); + src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Montserrat UltraLight'; - src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); - src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); + src: url('./fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); + src: url('./fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'DIN OT'; - src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); + src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'DIN OT Light'; - src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); + src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'DIN NEXT'; - src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype'); + src: url('./fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'DIN NEXT Light'; - src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype'); + src: url('./fonts/DIN Next/DIN Next W10 Light.otf') format('opentype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Lato'; - src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype'); + src: url('./fonts/Lato/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 370fdd5b7..4ab5f06c0 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -1,20 +1,25 @@ const inherits = require('util').inherits const EventEmitter = require('events').EventEmitter const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect 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') const environmentType = require('../../../app/scripts/lib/environment-type') const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums let isSubmitting = false +InitializeMenuScreen.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(InitializeMenuScreen) + inherits(InitializeMenuScreen, Component) function InitializeMenuScreen () { Component.call(this) @@ -60,7 +65,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: '#7F8082', marginBottom: 10, }, - }, t('appName')), + }, this.context.t('appName')), h('div', [ @@ -70,10 +75,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: '#7F8082', display: 'inline', }, - }, t('encryptNewDen')), + }, this.context.t('encryptNewDen')), h(Tooltip, { - title: t('denExplainer'), + title: this.context.t('denExplainer'), }, [ h('i.fa.fa-question-circle.pointer', { style: { @@ -93,7 +98,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: t('newPassword'), + placeholder: this.context.t('newPassword'), onInput: this.inputChanged.bind(this), style: { width: 260, @@ -105,7 +110,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: t('confirmPassword'), + placeholder: this.context.t('confirmPassword'), onKeyPress: this.createVaultOnEnter.bind(this), onInput: this.inputChanged.bind(this), style: { @@ -120,7 +125,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { style: { margin: 12, }, - }, t('createDen')), + }, this.context.t('createDen')), h('.flex-row.flex-center.flex-grow', [ h('p.pointer', { @@ -130,7 +135,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, t('importDen')), + }, this.context.t('importDen')), ]), h('.flex-row.flex-center.flex-grow', [ @@ -179,12 +184,12 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { var passwordConfirm = passwordConfirmBox.value if (password.length < 8) { - this.warning = t('passwordShort') + this.warning = this.context.t('passwordShort') this.props.dispatch(actions.displayWarning(this.warning)) return } if (password !== passwordConfirm) { - this.warning = t('passwordMismatch') + this.warning = this.context.t('passwordMismatch') this.props.dispatch(actions.displayWarning(this.warning)) return } diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js new file mode 100644 index 000000000..fe6d62c67 --- /dev/null +++ b/ui/app/i18n-provider.js @@ -0,0 +1,36 @@ +const { Component } = require('react') +const connect = require('react-redux').connect +const PropTypes = require('prop-types') +const t = require('../i18n-helper').getMessage + +class I18nProvider extends Component { + getChildContext() { + const { localeMessages } = this.props + return { + t: t.bind(null, localeMessages), + } + } + + render() { + return this.props.children + } +} + +I18nProvider.propTypes = { + localeMessages: PropTypes.object, + children: PropTypes.object, +} + +I18nProvider.childContextTypes = { + t: PropTypes.func, +} + +const mapStateToProps = state => { + const { localeMessages } = state + return { + localeMessages, + } +} + +module.exports = connect(mapStateToProps)(I18nProvider) + diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index bc5339549..02183f096 100644 --- a/ui/app/keychains/hd/recover-seed/confirmation.js +++ b/ui/app/keychains/hd/recover-seed/confirmation.js @@ -1,13 +1,17 @@ const inherits = require('util').inherits - const Component = require('react').Component +const PropTypes = require('prop-types') const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../../actions') -const t = require('../../../../i18n') + +RevealSeedConfirmation.contextTypes = { + t: PropTypes.func, +} module.exports = connect(mapStateToProps)(RevealSeedConfirmation) + inherits(RevealSeedConfirmation, Component) function RevealSeedConfirmation () { Component.call(this) @@ -50,13 +54,13 @@ RevealSeedConfirmation.prototype.render = function () { }, }, [ - h('h4', t('revealSeedWordsWarning')), + h('h4', this.context.t('revealSeedWordsWarning')), // confirmation h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: t('enterPasswordConfirm'), + placeholder: this.context.t('enterPasswordConfirm'), onKeyPress: this.checkConfirmation.bind(this), style: { width: 260, @@ -92,7 +96,7 @@ RevealSeedConfirmation.prototype.render = function () { ), props.inProgress && ( - h('span.in-progress-notification', t('generatingSeed')) + h('span.in-progress-notification', this.context.t('generatingSeed')) ), ]), ]) diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 5e4e004cf..38ad14adb 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -1,12 +1,17 @@ const inherits = require('util').inherits +const PropTypes = require('prop-types') 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') +RestoreVaultScreen.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(RestoreVaultScreen) + inherits(RestoreVaultScreen, PersistentForm) function RestoreVaultScreen () { PersistentForm.call(this) @@ -37,23 +42,23 @@ RestoreVaultScreen.prototype.render = function () { padding: 6, }, }, [ - t('restoreVault'), + this.context.t('restoreVault'), ]), // wallet seed entry - h('h3', t('walletSeed')), + h('h3', this.context.t('walletSeed')), h('textarea.twelve-word-phrase.letter-spacey', { dataset: { persistentFormId: 'wallet-seed', }, - placeholder: t('secretPhrase'), + placeholder: this.context.t('secretPhrase'), }), // password h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: t('newPassword8Chars'), + placeholder: this.context.t('newPassword8Chars'), dataset: { persistentFormId: 'password', }, @@ -67,7 +72,7 @@ RestoreVaultScreen.prototype.render = function () { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: t('confirmPassword'), + placeholder: this.context.t('confirmPassword'), onKeyPress: this.createOnEnter.bind(this), dataset: { persistentFormId: 'password-confirmation', @@ -97,7 +102,7 @@ RestoreVaultScreen.prototype.render = function () { style: { textTransform: 'uppercase', }, - }, t('cancel')), + }, this.context.t('cancel')), // submit h('button.primary', { @@ -105,7 +110,7 @@ RestoreVaultScreen.prototype.render = function () { style: { textTransform: 'uppercase', }, - }, t('ok')), + }, this.context.t('ok')), ]), ]) ) @@ -136,13 +141,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { var passwordConfirmBox = document.getElementById('password-box-confirm') var passwordConfirm = passwordConfirmBox.value if (password.length < 8) { - this.warning = t('passwordNotLongEnough') + this.warning = this.context.t('passwordNotLongEnough') this.props.dispatch(actions.displayWarning(this.warning)) return } if (password !== passwordConfirm) { - this.warning = t('passwordsDontMatch') + this.warning = this.context.t('passwordsDontMatch') this.props.dispatch(actions.displayWarning(this.warning)) return } @@ -152,18 +157,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // true if the string has more than a space between words. if (seed.split(' ').length > 1) { - this.warning = t('spaceBetween') + this.warning = this.context.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 = t('loweCaseWords') + this.warning = this.context.t('loweCaseWords') this.props.dispatch(actions.displayWarning(this.warning)) return } if (seed.split(' ').length !== 12) { - this.warning = t('seedPhraseReq') + this.warning = this.context.t('seedPhraseReq') this.props.dispatch(actions.displayWarning(this.warning)) return } diff --git a/ui/app/metamask-connect.js b/ui/app/metamask-connect.js new file mode 100644 index 000000000..8da594635 --- /dev/null +++ b/ui/app/metamask-connect.js @@ -0,0 +1,27 @@ +const connect = require('react-redux').connect +const t = require('../i18n-helper').getMessage + +const metamaskConnect = (mapStateToProps, mapDispatchToProps) => { + return connect( + _higherOrderMapStateToProps(mapStateToProps), + mapDispatchToProps + ) +} + +const _higherOrderMapStateToProps = (mapStateToProps) => { + let _t + let currentLocale + return (state, ownProps = {}) => { + const stateProps = mapStateToProps + ? mapStateToProps(state, ownProps) + : ownProps + if (currentLocale !== state.metamask.currentLocale) { + currentLocale = state.metamask.currentLocale + _t = t.bind(null, state.localeMessages) + } + stateProps.t = _t + return stateProps + } +} + +module.exports = metamaskConnect
\ No newline at end of file diff --git a/ui/app/reducers.js b/ui/app/reducers.js index 70b7e71dc..f155b2bf3 100644 --- a/ui/app/reducers.js +++ b/ui/app/reducers.js @@ -7,6 +7,7 @@ const copyToClipboard = require('copy-to-clipboard') const reduceIdentities = require('./reducers/identities') const reduceMetamask = require('./reducers/metamask') const reduceApp = require('./reducers/app') +const reduceLocale = require('./reducers/locale') window.METAMASK_CACHED_LOG_STATE = null @@ -38,6 +39,12 @@ function rootReducer (state, action) { state.appState = reduceApp(state, action) + // + // LocaleMessages + // + + state.localeMessages = reduceLocale(state, action) + window.METAMASK_CACHED_LOG_STATE = state return state } diff --git a/ui/app/reducers/locale.js b/ui/app/reducers/locale.js new file mode 100644 index 000000000..bdd97acb4 --- /dev/null +++ b/ui/app/reducers/locale.js @@ -0,0 +1,17 @@ +const extend = require('xtend') +const actions = require('../actions') + +module.exports = reduceMetamask + +function reduceMetamask (state, action) { + const localeMessagesState = extend({}, state.localeMessages) + + switch (action.type) { + case actions.SET_LOCALE_MESSAGES: + return extend(localeMessagesState, { + current: action.value, + }) + default: + return localeMessagesState + } +} diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 9cba5e83b..6d0a5bb10 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -47,6 +47,7 @@ function reduceMetamask (state, action) { networkEndpointType: OLD_UI_NETWORK_TYPE, isRevealingSeedWords: false, welcomeScreenSeen: false, + currentLocale: '', }, state.metamask) switch (action.type) { @@ -357,6 +358,11 @@ function reduceMetamask (state, action) { welcomeScreenSeen: true, }) + case action.SET_CURRENT_LOCALE: + return extend(metamaskState, { + currentLocale: action.value, + }) + default: return metamaskState diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 193c98353..101eb1cf6 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -7,6 +7,7 @@ const OldApp = require('../../old-ui/app/app') const { autoAddToBetaUI } = require('./selectors') const { setFeatureFlag, setNetworkEndpoints } = require('./actions') const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const I18nProvider = require('./i18n-provider') function mapStateToProps (state) { return { @@ -62,7 +63,7 @@ SelectedApp.prototype.render = function () { // const Selected = betaUI || isMascara || firstTime ? App : OldApp const { betaUI, isMascara } = this.props - const Selected = betaUI || isMascara ? App : OldApp + const Selected = betaUI || isMascara ? h(I18nProvider, [ h(App) ]) : h(OldApp) - return h(Selected) + return Selected } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 620da73f8..094743ff0 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -1,7 +1,7 @@ const { inherits } = require('util') +const PropTypes = require('prop-types') 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') @@ -27,9 +27,14 @@ const { const { isBalanceSufficient, isTokenBalanceSufficient, + getGasTotal, } = require('./components/send/send-utils') const { isValidAddress } = require('./util') +SendTransactionScreen.contextTypes = { + t: PropTypes.func, +} + module.exports = SendTransactionScreen inherits(SendTransactionScreen, PersistentForm) @@ -128,7 +133,7 @@ SendTransactionScreen.prototype.updateGas = function () { estimateGas(estimateGasParams), ]) .then(([gasPrice, gas]) => { - const newGasTotal = this.getGasTotal(gas, gasPrice) + const newGasTotal = getGasTotal(gas, gasPrice) updateGasTotal(newGasTotal) this.setState({ gasLoadingError: false }) }) @@ -136,19 +141,11 @@ SendTransactionScreen.prototype.updateGas = function () { this.setState({ gasLoadingError: true }) }) } else { - const newGasTotal = this.getGasTotal(gasLimit, gasPrice) + const newGasTotal = getGasTotal(gasLimit, gasPrice) updateGasTotal(newGasTotal) } } -SendTransactionScreen.prototype.getGasTotal = function (gasLimit, gasPrice) { - return multiplyCurrencies(gasLimit, gasPrice, { - toNumericBase: 'hex', - multiplicandBase: 16, - multiplierBase: 16, - }) -} - SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { const { from: { balance }, @@ -189,9 +186,9 @@ SendTransactionScreen.prototype.renderHeader = function () { return h('div.page-container__header', [ - h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')), + h('div.page-container__title', selectedToken ? this.context.t('sendTokens') : this.context.t('sendETH')), - h('div.page-container__subtitle', t('onlySendToEtherAddress')), + h('div.page-container__subtitle', this.context.t('onlySendToEtherAddress')), h('div.page-container__header-close', { onClick: () => { @@ -257,16 +254,13 @@ SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') { const { updateSendTo, updateSendErrors, - from: {address: from}, } = this.props let toError = null if (!to) { - toError = t('required') + toError = this.context.t('required') } else if (!isValidAddress(to)) { - toError = t('invalidAddressRecipient') - } else if (to === from) { - toError = t('fromToSame') + toError = this.context.t('invalidAddressRecipient') } updateSendTo(to, nickname) @@ -282,9 +276,9 @@ SendTransactionScreen.prototype.renderToRow = function () { h('div.send-v2__form-label', [ - t('to'), + this.context.t('to'), - this.renderErrorMessage(t('to')), + this.renderErrorMessage(this.context.t('to')), ]), @@ -385,11 +379,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) { ) if (conversionRate && !sufficientBalance) { - amountError = t('insufficientFunds') + amountError = this.context.t('insufficientFunds') } else if (verifyTokenBalance && !sufficientTokens) { - amountError = t('insufficientTokens') + amountError = this.context.t('insufficientTokens') } else if (amountLessThanZero) { - amountError = t('negativeETH') + amountError = this.context.t('negativeETH') } updateSendErrors({ amount: amountError }) @@ -419,7 +413,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () { setMaxModeTo(true) this.setAmountToMax() }, - }, [ !maxModeOn ? t('max') : '' ]), + }, [ !maxModeOn ? this.context.t('max') : '' ]), ]), h('div.send-v2__form-field', [ @@ -448,7 +442,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { return h('div.send-v2__form-row', [ - h('div.send-v2__form-label', h('gasFee')), + h('div.send-v2__form-label', this.context.t('gasFee')), h('div.send-v2__form-field', [ @@ -518,11 +512,11 @@ SendTransactionScreen.prototype.renderFooter = function () { clearSend() goHome() }, - }, t('cancel')), + }, this.context.t('cancel')), h('button.btn-primary--lg.page-container__footer-button', { disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), - }, t('next')), + }, this.context.t('next')), ]) } @@ -582,12 +576,17 @@ SendTransactionScreen.prototype.getEditedTx = function () { data, }) } else { - const data = unapprovedTxs[editingTransactionId].txParams.data + const { data } = unapprovedTxs[editingTransactionId].txParams + Object.assign(editingTx.txParams, { value: ethUtil.addHexPrefix(amount), to: ethUtil.addHexPrefix(to), data, }) + + if (typeof editingTx.txParams.data === 'undefined') { + delete editingTx.txParams.data + } } return editingTx @@ -597,7 +596,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { event.preventDefault() const { from: {address: from}, - to, + to: _to, amount, gasLimit: gas, gasPrice, @@ -616,6 +615,8 @@ SendTransactionScreen.prototype.onSubmit = function (event) { return } + const to = ethUtil.addHexPrefix(_to) + this.addToAddressBookIfNew(to, toNickname) if (editingTransactionId) { @@ -636,6 +637,10 @@ SendTransactionScreen.prototype.onSubmit = function (event) { txParams.to = to } + Object.keys(txParams).forEach(key => { + txParams[key] = ethUtil.addHexPrefix(txParams[key]) + }) + selectedToken ? signTokenTx(selectedToken.address, to, amount, txParams) : signTx(txParams) diff --git a/ui/app/settings.js b/ui/app/settings.js index 78ca6c94b..3aa7b9c6b 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -1,7 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const { connect } = require('react-redux') +const connect = require('react-redux').connect const actions = require('./actions') const infuraCurrencies = require('./infura-conversion.json') const validUrl = require('valid-url') @@ -9,8 +9,8 @@ const { exportAsFile } = require('./util') const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') +const locales = require('../../app/_locales/index.json') const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums -const t = require('../i18n') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -26,6 +26,16 @@ const getInfuraCurrencyOptions = () => { }) } +const getLocaleOptions = () => { + return locales.map((locale) => { + return { + displayValue: `${locale.name}`, + key: locale.code, + value: locale.code, + } + }) +} + class Settings extends Component { constructor (props) { super(props) @@ -45,8 +55,8 @@ class Settings extends Component { return h('div.settings__tabs', [ h(TabBar, { tabs: [ - { content: t('settings'), key: 'settings' }, - { content: t('info'), key: 'info' }, + { content: this.context.t('settings'), key: 'settings' }, + { content: this.context.t('info'), key: 'info' }, ], defaultTab: activeTab, tabSelected: key => this.setState({ activeTab: key }), @@ -59,7 +69,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('blockiesIdenticon')), + h('span', this.context.t('blockiesIdenticon')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ @@ -79,13 +89,13 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('currentConversion')), + h('span', this.context.t('currentConversion')), h('span.settings__content-description', `Updated ${Date(conversionDate)}`), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h(SimpleDropdown, { - placeholder: t('selectCurrency'), + placeholder: this.context.t('selectCurrency'), options: getInfuraCurrencyOptions(), selectedOption: currentCurrency, onSelect: newCurrency => setCurrentCurrency(newCurrency), @@ -95,6 +105,31 @@ class Settings extends Component { ]) } + renderCurrentLocale () { + const { updateCurrentLocale, currentLocale } = this.props + const currentLocaleMeta = locales.find(locale => locale.code === currentLocale) + const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '' + + return h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'Current Language'), + h('span.settings__content-description', `${currentLocaleName}`), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h(SimpleDropdown, { + placeholder: 'Select Locale', + options: getLocaleOptions(), + selectedOption: currentLocale, + onSelect: async (newLocale) => { + updateCurrentLocale(newLocale) + }, + }), + ]), + ]), + ]) + } + renderCurrentProvider () { const { metamask: { provider = {} } } = this.props let title, value, color @@ -102,31 +137,31 @@ class Settings extends Component { switch (provider.type) { case 'mainnet': - title = t('currentNetwork') - value = t('mainnet') + title = this.context.t('currentNetwork') + value = this.context.t('mainnet') color = '#038789' break case 'ropsten': - title = t('currentNetwork') - value = t('ropsten') + title = this.context.t('currentNetwork') + value = this.context.t('ropsten') color = '#e91550' break case 'kovan': - title = t('currentNetwork') - value = t('kovan') + title = this.context.t('currentNetwork') + value = this.context.t('kovan') color = '#690496' break case 'rinkeby': - title = t('currentNetwork') - value = t('rinkeby') + title = this.context.t('currentNetwork') + value = this.context.t('rinkeby') color = '#ebb33f' break default: - title = t('currentRpc') + title = this.context.t('currentRpc') value = provider.rpcTarget } @@ -147,12 +182,12 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', t('newRPC')), + h('span', this.context.t('newRPC')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('input.settings__input', { - placeholder: t('newRPC'), + placeholder: this.context.t('newRPC'), onChange: event => this.setState({ newRpc: event.target.value }), onKeyPress: event => { if (event.key === 'Enter') { @@ -165,7 +200,7 @@ class Settings extends Component { event.preventDefault() this.validateRpc(this.state.newRpc) }, - }, t('save')), + }, this.context.t('save')), ]), ]), ]) @@ -181,9 +216,9 @@ class Settings extends Component { const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { - displayWarning(t('uriErrorMsg')) + displayWarning(this.context.t('uriErrorMsg')) } else { - displayWarning(t('invalidRPC')) + displayWarning(this.context.t('invalidRPC')) } } } @@ -192,10 +227,10 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('div', t('stateLogs')), + h('div', this.context.t('stateLogs')), h( 'div.settings__content-description', - t('stateLogsDescription') + this.context.t('stateLogsDescription') ), ]), h('div.settings__content-item', [ @@ -204,13 +239,13 @@ class Settings extends Component { onClick (event) { window.logStateString((err, result) => { if (err) { - this.state.dispatch(actions.displayWarning(t('stateLogError'))) + this.state.dispatch(actions.displayWarning(this.context.t('stateLogError'))) } else { exportAsFile('MetaMask State Logs.json', result) } }) }, - }, t('downloadStateLogs')), + }, this.context.t('downloadStateLogs')), ]), ]), ]) @@ -222,7 +257,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', t('revealSeedWords')), + h('div.settings__content-item', this.context.t('revealSeedWords')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--red', { @@ -230,7 +265,7 @@ class Settings extends Component { event.preventDefault() revealSeedConfirmation() }, - }, t('revealSeedWords')), + }, this.context.t('revealSeedWords')), ]), ]), ]) @@ -242,7 +277,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', t('useOldUI')), + h('div.settings__content-item', this.context.t('useOldUI')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--orange', { @@ -250,7 +285,7 @@ class Settings extends Component { event.preventDefault() setFeatureFlagToBeta() }, - }, t('useOldUI')), + }, this.context.t('useOldUI')), ]), ]), ]) @@ -261,7 +296,7 @@ class Settings extends Component { const { showResetAccountConfirmationModal } = this.props return h('div.settings__content-row', [ - h('div.settings__content-item', t('resetAccount')), + h('div.settings__content-item', this.context.t('resetAccount')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.btn-primary--lg.settings__button--orange', { @@ -269,7 +304,7 @@ class Settings extends Component { event.preventDefault() showResetAccountConfirmationModal() }, - }, t('resetAccount')), + }, this.context.t('resetAccount')), ]), ]), ]) @@ -282,6 +317,7 @@ class Settings extends Component { h('div.settings__content', [ warning && h('div.settings__error', warning), this.renderCurrentConversion(), + this.renderCurrentLocale(), // this.renderCurrentProvider(), this.renderNewRpcUrl(), this.renderStateLogs(), @@ -304,13 +340,13 @@ class Settings extends Component { renderInfoLinks () { return ( h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', t('links')), + h('div.settings__info-link-header', this.context.t('links')), h('div.settings__info-link-item', [ h('a', { href: 'https://metamask.io/privacy.html', target: '_blank', }, [ - h('span.settings__info-link', t('privacyMsg')), + h('span.settings__info-link', this.context.t('privacyMsg')), ]), ]), h('div.settings__info-link-item', [ @@ -318,7 +354,7 @@ class Settings extends Component { href: 'https://metamask.io/terms.html', target: '_blank', }, [ - h('span.settings__info-link', t('terms')), + h('span.settings__info-link', this.context.t('terms')), ]), ]), h('div.settings__info-link-item', [ @@ -326,7 +362,7 @@ class Settings extends Component { href: 'https://metamask.io/attributions.html', target: '_blank', }, [ - h('span.settings__info-link', t('attributions')), + h('span.settings__info-link', this.context.t('attributions')), ]), ]), h('hr.settings__info-separator'), @@ -335,7 +371,7 @@ class Settings extends Component { href: 'https://support.metamask.io', target: '_blank', }, [ - h('span.settings__info-link', t('supportCenter')), + h('span.settings__info-link', this.context.t('supportCenter')), ]), ]), h('div.settings__info-link-item', [ @@ -343,7 +379,7 @@ class Settings extends Component { href: 'https://metamask.io/', target: '_blank', }, [ - h('span.settings__info-link', t('visitWebSite')), + h('span.settings__info-link', this.context.t('visitWebSite')), ]), ]), h('div.settings__info-link-item', [ @@ -351,7 +387,7 @@ class Settings extends Component { target: '_blank', href: 'mailto:help@metamask.io?subject=Feedback', }, [ - h('span.settings__info-link', t('emailUs')), + h('span.settings__info-link', this.context.t('emailUs')), ]), ]), ]) @@ -373,7 +409,7 @@ class Settings extends Component { h('div.settings__info-item', [ h( 'div.settings__info-about', - t('builtInCalifornia') + this.context.t('builtInCalifornia') ), ]), ]), @@ -417,6 +453,9 @@ Settings.propTypes = { warning: PropTypes.string, goHome: PropTypes.func, isMascara: PropTypes.bool, + updateCurrentLocale: PropTypes.func, + currentLocale: PropTypes.string, + t: PropTypes.func, } const mapStateToProps = state => { @@ -424,6 +463,7 @@ const mapStateToProps = state => { metamask: state.metamask, warning: state.appState.warning, isMascara: state.metamask.isMascara, + currentLocale: state.metamask.currentLocale, } } @@ -435,6 +475,7 @@ const mapDispatchToProps = dispatch => { displayWarning: warning => dispatch(actions.displayWarning(warning)), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), setUseBlockie: value => dispatch(actions.setUseBlockie(value)), + updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)), setFeatureFlagToBeta: () => { return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) @@ -445,5 +486,9 @@ const mapDispatchToProps = dispatch => { } } +Settings.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings) diff --git a/ui/app/store.js b/ui/app/store.js index 3bafdee11..feebbabc0 100644 --- a/ui/app/store.js +++ b/ui/app/store.js @@ -4,7 +4,7 @@ const thunkMiddleware = require('redux-thunk').default const rootReducer = require('./reducers') const createLogger = require('redux-logger').createLogger -global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG' +global.METAMASK_DEBUG = process.env.METAMASK_DEBUG module.exports = configureStore diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 322808619..84d8b7e7c 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -1,18 +1,23 @@ 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') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter -const t = require('../i18n') const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums const environmentType = require('../../app/scripts/lib/environment-type') const Mascot = require('./components/mascot') +UnlockScreen.contextTypes = { + t: PropTypes.func, +} + module.exports = connect(mapStateToProps)(UnlockScreen) + inherits(UnlockScreen, Component) function UnlockScreen () { Component.call(this) @@ -41,7 +46,7 @@ UnlockScreen.prototype.render = function () { textTransform: 'uppercase', color: '#7F8082', }, - }, t('appName')), + }, this.context.t('appName')), h('input.large-input', { type: 'password', @@ -67,7 +72,7 @@ UnlockScreen.prototype.render = function () { style: { margin: 10, }, - }, t('login')), + }, this.context.t('login')), h('p.pointer', { onClick: () => { @@ -81,7 +86,7 @@ UnlockScreen.prototype.render = function () { color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, t('restoreFromSeed')), + }, this.context.t('restoreFromSeed')), h('p.pointer', { onClick: () => { @@ -94,7 +99,7 @@ UnlockScreen.prototype.render = function () { textDecoration: 'underline', marginTop: '32px', }, - }, t('classicInterface')), + }, this.context.t('classicInterface')), ]) ) } diff --git a/ui/app/util.js b/ui/app/util.js index 800ccb218..bbe2bb09e 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -271,6 +271,7 @@ function exportAsFile (filename, data) { window.navigator.msSaveBlob(blob, filename) } else { const elem = window.document.createElement('a') + elem.target = '_blank' elem.href = window.URL.createObjectURL(blob) elem.download = filename document.body.appendChild(elem) diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js new file mode 100644 index 000000000..3eee55ae9 --- /dev/null +++ b/ui/i18n-helper.js @@ -0,0 +1,42 @@ +// cross-browser connection to extension i18n API +const log = require('loglevel') + +const getMessage = (locale, key, substitutions) => { + // check locale is loaded + if (!locale) { + // throw new Error('Translator - has not loaded a locale yet.') + return '' + } + // check entry is present + const { current, en } = locale + const entry = current[key] || en[key] + if (!entry) { + log.error(`Translator - Unable to find value for "${key}"`) + // throw new Error(`Translator - Unable to find value for "${key}"`) + } + let phrase = entry.message + // perform substitutions + if (substitutions && substitutions.length) { + phrase = phrase.replace(/\$1/g, substitutions[0]) + if (substitutions.length > 1) { + phrase = phrase.replace(/\$2/g, substitutions[1]) + } + } + return phrase +} + +async function fetchLocale (localeName) { + try { + const response = await fetch(`./_locales/${localeName}/messages.json`) + const locale = await response.json() + return locale + } catch (error) { + log.error(`failed to fetch ${localeName} locale because of ${error}`) + return {} + } +} + +module.exports = { + getMessage, + fetchLocale, +} diff --git a/ui/i18n.js b/ui/i18n.js deleted file mode 100644 index abfece426..000000000 --- a/ui/i18n.js +++ /dev/null @@ -1,33 +0,0 @@ - -// cross-browser connection to extension i18n API - -const chrome = chrome || null -const browser = browser || null -const extension = require('extensionizer') -var log = require('loglevel') -window.log = log -let getMessage - -if (extension.i18n && extension.i18n.getMessage) { - getMessage = extension.i18n.getMessage -} else { - // fallback function - log.warn('browser.i18n API not available, calling back to english.') - const msg = require('../app/_locales/en/messages.json') - getMessage = function (key, substitutions) { - if (!msg[key]) { - log.error(key) - throw new Error(key) - } - let phrase = msg[key].message - if (substitutions && substitutions.length) { - phrase = phrase.replace(/\$1/g, substitutions[0]) - if (substitutions.length > 1) { - phrase = phrase.replace(/\$2/g, substitutions[1]) - } - } - return phrase - } -} - -module.exports = getMessage diff --git a/ui/index.js b/ui/index.js index fdb2f23e0..746e28eab 100644 --- a/ui/index.js +++ b/ui/index.js @@ -4,6 +4,7 @@ const Root = require('./app/root') const actions = require('./app/actions') const configureStore = require('./app/store') const txHelper = require('./lib/tx-helper') +const { fetchLocale } = require('./i18n-helper') const { OLD_UI_NETWORK_TYPE, BETA_UI_NETWORK_TYPE } = require('../app/scripts/config').enums global.log = require('loglevel') @@ -18,14 +19,22 @@ function launchMetamaskUi (opts, cb) { // check if we are unlocked first accountManager.getState(function (err, metamaskState) { if (err) return cb(err) - const store = startApp(metamaskState, accountManager, opts) - cb(null, store) + startApp(metamaskState, accountManager, opts) + .then((store) => { + cb(null, store) + }) }) } -function startApp (metamaskState, accountManager, opts) { +async function startApp (metamaskState, accountManager, opts) { // parse opts if (!metamaskState.featureFlags) metamaskState.featureFlags = {} + + const currentLocaleMessages = metamaskState.currentLocale + ? await fetchLocale(metamaskState.currentLocale) + : {} + const enLocaleMessages = await fetchLocale('en') + const store = configureStore({ // metamaskState represents the cross-tab state @@ -34,6 +43,11 @@ function startApp (metamaskState, accountManager, opts) { // appState represents the current tab's popup state appState: {}, + localeMessages: { + current: currentLocaleMessages, + en: enLocaleMessages, + }, + // Which blockchain we are using: networkVersion: opts.networkVersion, }) @@ -55,6 +69,16 @@ function startApp (metamaskState, accountManager, opts) { store.dispatch(actions.updateMetamaskState(metamaskState)) }) + // global metamask api - used by tooling + global.metamask = { + updateCurrentLocale: (code) => { + store.dispatch(actions.updateCurrentLocale(code)) + }, + setProviderType: (type) => { + store.dispatch(actions.setProviderType(type)) + }, + } + // start app render( h(Root, { |