From 99898ac77594d8fe6d4d2aa5bc3e3ba6492f4a10 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 23 Jan 2018 22:14:47 -1000 Subject: better organization of locale file; i18n in more view files --- ui/app/components/modals/deposit-ether-modal.js | 29 +++++++++++-------------- 1 file changed, 13 insertions(+), 16 deletions(-) (limited to 'ui/app/components/modals/deposit-ether-modal.js') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 532d66653..85f640a68 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -6,16 +6,13 @@ const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames const ShapeshiftForm = require('../shapeshift-form') -const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether' -const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in -your new wallet by direct deposit.` -const COINBASE_ROW_TITLE = 'Buy on Coinbase' -const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin, -ethereum, and litecoin.` -const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' -const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether -directly into your MetaMask wallet. No Account Needed.` -const FAUCET_ROW_TITLE = 'Test Faucet' +const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther') +const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer') +const COINBASE_ROW_TITLE = t('buyCoinbase') +const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer') +const SHAPESHIFT_ROW_TITLE = t('depositShapeShift') +const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer') +const FAUCET_ROW_TITLE = t('testFaucet') const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` function mapStateToProps (state) { @@ -110,10 +107,10 @@ DepositEtherModal.prototype.render = function () { h('div.deposit-ether-modal__header', [ - h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + h('div.deposit-ether-modal__header__title', [t('depositEther')]), h('div.deposit-ether-modal__header__description', [ - 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', + t('needEtherInWallet'), ]), h('div.deposit-ether-modal__header__close', { @@ -131,7 +128,7 @@ DepositEtherModal.prototype.render = function () { logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), title: DIRECT_DEPOSIT_ROW_TITLE, text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: 'View Account', + buttonLabel: t('viewAccount'), onButtonClick: () => this.goToAccountDetailsModal(), hide: buyingWithShapeshift, }), @@ -140,7 +137,7 @@ DepositEtherModal.prototype.render = function () { logo: h('i.fa.fa-tint.fa-2x'), title: FAUCET_ROW_TITLE, text: facuetRowText(networkName), - buttonLabel: 'Get Ether', + buttonLabel: t('getEther'), onButtonClick: () => toFaucet(network), hide: !isTestNetwork || buyingWithShapeshift, }), @@ -151,7 +148,7 @@ DepositEtherModal.prototype.render = function () { }), title: COINBASE_ROW_TITLE, text: COINBASE_ROW_TEXT, - buttonLabel: 'Continue to Coinbase', + buttonLabel: t('continueToCoinbase'), onButtonClick: () => toCoinbase(address), hide: isTestNetwork || buyingWithShapeshift, }), @@ -162,7 +159,7 @@ DepositEtherModal.prototype.render = function () { }), title: SHAPESHIFT_ROW_TITLE, text: SHAPESHIFT_ROW_TEXT, - buttonLabel: 'Buy with Shapeshift', + buttonLabel: t('shapeshiftBuy'), onButtonClick: () => this.setState({ buyingWithShapeshift: true }), hide: isTestNetwork, hideButton: buyingWithShapeshift, -- cgit v1.2.3 From 7da52c599784130a5f7b6737f5b017bd3a95c1ed Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 24 Jan 2018 10:10:28 -1000 Subject: separate out cross-browser i18n for extensions --- ui/app/components/modals/deposit-ether-modal.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/modals/deposit-ether-modal.js') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 85f640a68..e91b43841 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -5,6 +5,7 @@ const connect = require('react-redux').connect const actions = require('../../actions') const networkNames = require('../../../../app/scripts/config.js').networkNames const ShapeshiftForm = require('../shapeshift-form') +const t = require('../../../i18n') const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther') const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer') -- cgit v1.2.3 From abfa74f09a0119345165a32090d88a1d95df6c80 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 29 Jan 2018 15:29:01 -0500 Subject: complete i18n across new UI --- ui/app/components/modals/deposit-ether-modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals/deposit-ether-modal.js') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index e91b43841..7172d05a5 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -14,7 +14,9 @@ const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer') const SHAPESHIFT_ROW_TITLE = t('depositShapeShift') const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer') const FAUCET_ROW_TITLE = t('testFaucet') -const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` +const facuetRowText = (networkName) => { + return t('getEtherFromFaucet', [networkName]) +} function mapStateToProps (state) { return { -- cgit v1.2.3 From 08542c18e10c61b9e5862e95e7a5a18d479f2dc1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 12 Mar 2018 19:25:12 +0100 Subject: Update deposit ether styling (#3510) --- ui/app/components/modals/deposit-ether-modal.js | 111 +++++++++++++----------- 1 file changed, 62 insertions(+), 49 deletions(-) (limited to 'ui/app/components/modals/deposit-ether-modal.js') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 7547dbcf5..ed73bc632 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether directly into your MetaMask wallet. No Account Needed.` const FAUCET_ROW_TITLE = 'Test Faucet' -const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` +const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}` function mapStateToProps (state) { return { @@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({ ]), - h('div.deposit-ether-modal__buy-row__logo', [logo]), + h('div.deposit-ether-modal__buy-row__logo-container', [logo]), h('div.deposit-ether-modal__buy-row__description', [ @@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () { const isTestNetwork = ['3', '4', '42'].find(n => n === network) const networkName = networkNames[network] - return h('div.deposit-ether-modal', {}, [ + return h('div.page-container.page-container--full-width', {}, [ - h('div.deposit-ether-modal__header', [ + h('div.page-container__header', [ - h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + h('div.page-container__title', 'Deposit Ether'), - h('div.deposit-ether-modal__header__description', [ + h('div.page-container__subtitle', [ 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', ]), - h('div.deposit-ether-modal__header__close', { + h('div.page-container__header-close', { onClick: () => { this.setState({ buyingWithShapeshift: false }) this.props.hideWarning() @@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () { ]), - h('div.deposit-ether-modal__buy-rows', [ - - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), - title: DIRECT_DEPOSIT_ROW_TITLE, - text: DIRECT_DEPOSIT_ROW_TEXT, - buttonLabel: 'View Account', - onButtonClick: () => this.goToAccountDetailsModal(), - hide: buyingWithShapeshift, - }), + h('.page-container__content', {}, [ + + h('div.deposit-ether-modal__buy-rows', [ + + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/eth_logo.svg\')', + }, + }), + title: DIRECT_DEPOSIT_ROW_TITLE, + text: DIRECT_DEPOSIT_ROW_TEXT, + buttonLabel: 'View Account Details', + onButtonClick: () => this.goToAccountDetailsModal(), + hide: buyingWithShapeshift, + }), - this.renderRow({ - logo: h('i.fa.fa-tint.fa-2x'), - title: FAUCET_ROW_TITLE, - text: facuetRowText(networkName), - buttonLabel: 'Get Ether', - onButtonClick: () => toFaucet(network), - hide: !isTestNetwork || buyingWithShapeshift, - }), + this.renderRow({ + logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'), + title: FAUCET_ROW_TITLE, + text: faucetRowText(networkName), + buttonLabel: 'Continue to Test Faucet', + onButtonClick: () => toFaucet(network), + hide: !isTestNetwork || buyingWithShapeshift, + }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { - src: '../../../images/coinbase logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/coinbase logo.png\')', + height: '40px', + }, + }), + title: COINBASE_ROW_TITLE, + text: COINBASE_ROW_TEXT, + buttonLabel: 'Continue to Coinbase', + onButtonClick: () => toCoinbase(address), + hide: isTestNetwork || buyingWithShapeshift, }), - title: COINBASE_ROW_TITLE, - text: COINBASE_ROW_TEXT, - buttonLabel: 'Continue to Coinbase', - onButtonClick: () => toCoinbase(address), - hide: isTestNetwork || buyingWithShapeshift, - }), - this.renderRow({ - logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { - src: '../../../images/shapeshift logo.png', + this.renderRow({ + logo: h('div.deposit-ether-modal__logo', { + style: { + backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', + }, + }), + title: SHAPESHIFT_ROW_TITLE, + text: SHAPESHIFT_ROW_TEXT, + buttonLabel: 'Continue to Shapeshift', + onButtonClick: () => this.setState({ buyingWithShapeshift: true }), + hide: isTestNetwork, + hideButton: buyingWithShapeshift, + hideTitle: buyingWithShapeshift, + onBackClick: () => this.setState({ buyingWithShapeshift: false }), + showBackButton: this.state.buyingWithShapeshift, + className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', }), - title: SHAPESHIFT_ROW_TITLE, - text: SHAPESHIFT_ROW_TEXT, - buttonLabel: 'Buy with Shapeshift', - onButtonClick: () => this.setState({ buyingWithShapeshift: true }), - hide: isTestNetwork, - hideButton: buyingWithShapeshift, - hideTitle: buyingWithShapeshift, - onBackClick: () => this.setState({ buyingWithShapeshift: false }), - showBackButton: this.state.buyingWithShapeshift, - className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', - }), - buyingWithShapeshift && h(ShapeshiftForm), + buyingWithShapeshift && h(ShapeshiftForm), + + ]), ]), ]) -- cgit v1.2.3 From b45ea44aa5eb35c5092d78bc888e884af70db7cb Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 13 Mar 2018 10:28:33 -0700 Subject: Add missing opening parens to pag-container__subtitle --- ui/app/components/modals/deposit-ether-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals/deposit-ether-modal.js') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 1aa0e9247..26ff3ea03 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -115,7 +115,7 @@ DepositEtherModal.prototype.render = function () { h('div.page-container__title', [t('depositEther')]), - h'div.page-container__subtitle', [ + h('div.page-container__subtitle', [ t('needEtherInWallet'), ]), -- cgit v1.2.3