From 5fe0be722b6514692a68e920ee8058c5d572237d Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 15 Mar 2018 21:59:45 -0230 Subject: Handle i18n with redux. --- ui/app/components/shapeshift-form.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'ui/app/components/shapeshift-form.js') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 3f8c17932..46b16975a 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -1,13 +1,13 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const Component = require('react').Component -const connect = require('react-redux').connect +const connect = require('../metamask-connect') const classnames = require('classnames') 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') +const t = require('../../i18n-helper').getMessage function mapStateToProps (state) { const { @@ -94,7 +94,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: t('invalidRequest'), + errorMessage: t(this.props.localeMessages, 'invalidRequest'), isLoading: false, })) } @@ -126,10 +126,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(t(this.props.localeMessages, 'status'), limit ? t(this.props.localeMessages, 'available') : t(this.props.localeMessages, 'unavailable')), + this.renderMetadata(t(this.props.localeMessages, 'limit'), limit), + this.renderMetadata(t(this.props.localeMessages, 'exchangeRate'), rate), + this.renderMetadata(t(this.props.localeMessages, 'min'), minimum), ]) } @@ -143,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - t('depositCoin', [depositCoin.toUpperCase()]), + t(this.props.localeMessages, 'depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), @@ -180,7 +180,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', t('deposit')), + h('div.shapeshift-form__selector-label', t(this.props.localeMessages, 'deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -200,7 +200,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - t('receive'), + t(this.props.localeMessages, 'receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -218,7 +218,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - t('refundAddress'), + t(this.props.localeMessages, 'refundAddress'), ]), h('input.shapeshift-form__address-input', { -- cgit From 09260f9c5e0b2c460a214f00b87c8fafe0470419 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 19 Mar 2018 16:23:54 -0230 Subject: Fixed t() calls where localeMessages is missing; and fix incorrect connect reference. --- ui/app/components/shapeshift-form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/shapeshift-form.js') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 46b16975a..f915135f6 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -240,7 +240,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [t('buy')]), + }, [t(this.props.localeMessages, 'buy')]), ]) } -- cgit From d24a0590d363dbe88d383c8faec8eb28809242f0 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 21 Mar 2018 22:11:47 -0230 Subject: i18n redux solution doesn't require importing t() and passing state to each t() call; t is just available on props. --- ui/app/components/shapeshift-form.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'ui/app/components/shapeshift-form.js') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index f915135f6..31af74b36 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -7,7 +7,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-helper').getMessage function mapStateToProps (state) { const { @@ -94,7 +93,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: t(this.props.localeMessages, 'invalidRequest'), + errorMessage: this.props.t('invalidRequest'), isLoading: false, })) } @@ -126,10 +125,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { return h('div.shapeshift-form__metadata', {}, [ - this.renderMetadata(t(this.props.localeMessages, 'status'), limit ? t(this.props.localeMessages, 'available') : t(this.props.localeMessages, 'unavailable')), - this.renderMetadata(t(this.props.localeMessages, 'limit'), limit), - this.renderMetadata(t(this.props.localeMessages, 'exchangeRate'), rate), - this.renderMetadata(t(this.props.localeMessages, 'min'), minimum), + this.renderMetadata(this.props.t('status'), limit ? this.props.t('available') : this.props.t('unavailable')), + this.renderMetadata(this.props.t('limit'), limit), + this.renderMetadata(this.props.t('exchangeRate'), rate), + this.renderMetadata(this.props.t('min'), minimum), ]) } @@ -143,7 +142,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - t(this.props.localeMessages, 'depositCoin', [depositCoin.toUpperCase()]), + this.props.t('depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), @@ -180,7 +179,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', t(this.props.localeMessages, 'deposit')), + h('div.shapeshift-form__selector-label', this.props.t('deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -200,7 +199,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - t(this.props.localeMessages, 'receive'), + this.props.t('receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -218,7 +217,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - t(this.props.localeMessages, 'refundAddress'), + this.props.t('refundAddress'), ]), h('input.shapeshift-form__address-input', { @@ -240,7 +239,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [t(this.props.localeMessages, 'buy')]), + }, [this.props.t('buy')]), ]) } -- cgit From 0a711f0de0e342b24988a5da4ca5c64342153210 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 29 Mar 2018 12:30:44 -0230 Subject: Removes t from props via metamask-connect and instead places it on context via a provider. --- ui/app/components/shapeshift-form.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) (limited to 'ui/app/components/shapeshift-form.js') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 5f58527fe..fd4a80a4a 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -1,7 +1,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits +const PropTypes = require('prop-types') const Component = require('react').Component -const connect = require('../metamask-connect') +const connect = require('react-redux').connect const classnames = require('classnames') const { qrcode } = require('qrcode-npm') const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') @@ -32,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) @@ -93,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () { })) .catch(() => this.setState({ showQrCode: false, - errorMessage: this.props.t('invalidRequest'), + errorMessage: this.context.t('invalidRequest'), isLoading: false, })) } @@ -125,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () { return h('div.shapeshift-form__metadata', {}, [ - this.renderMetadata(this.props.t('status'), limit ? this.props.t('available') : this.props.t('unavailable')), - this.renderMetadata(this.props.t('limit'), limit), - this.renderMetadata(this.props.t('exchangeRate'), rate), - this.renderMetadata(this.props.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), ]) } @@ -142,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () { return h('div.shapeshift-form', {}, [ h('div.shapeshift-form__deposit-instruction', [ - this.props.t('depositCoin', [depositCoin.toUpperCase()]), + this.context.t('depositCoin', [depositCoin.toUpperCase()]), ]), h('div', depositAddress), @@ -179,7 +185,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ - h('div.shapeshift-form__selector-label', this.props.t('deposit')), + h('div.shapeshift-form__selector-label', this.context.t('deposit')), h(SimpleDropdown, { selectedOption: this.state.depositCoin, @@ -199,7 +205,7 @@ ShapeshiftForm.prototype.render = function () { h('div.shapeshift-form__selector', [ h('div.shapeshift-form__selector-label', [ - this.props.t('receive'), + this.context.t('receive'), ]), h('div.shapeshift-form__selector-input', ['ETH']), @@ -217,7 +223,7 @@ ShapeshiftForm.prototype.render = function () { }, [ h('div.shapeshift-form__address-input-label', [ - this.props.t('refundAddress'), + this.context.t('refundAddress'), ]), h('input.shapeshift-form__address-input', { @@ -239,7 +245,7 @@ ShapeshiftForm.prototype.render = function () { className: btnClass, disabled: !token, onClick: () => this.onBuyWithShapeShift(), - }, [this.props.t('buy')]), + }, [this.context.t('buy')]), ]) } -- cgit