From b48ee04f181f4ca133e0849f666372ea7332cdfb Mon Sep 17 00:00:00 2001 From: Andre Date: Wed, 21 Nov 2018 11:00:09 +0100 Subject: [PATCH] Feature #547: Modal Translations (#571) * finish legal modals, finish reward claim modals * finish installmetamask modal, register wallet modal * fix linting errors * add switch network modal, add transaction explanation, unlock modal, verification error-modal, outcome price changed modal * add proptype for t --- src/assets/locales/en/translation.json | 68 ++++++++++++++++++- .../ModalContent/ClaimReward/index.js | 64 ++++++++++------- .../ModalContent/InstallMetamask/index.js | 24 ++++--- .../ModalContent/OutcomePriceChanged.js | 11 +-- .../ModalContent/RegisterWallet/index.js | 51 +++++++------- .../ModalContent/RegisterWalletUport/index.js | 26 ++++--- .../ModalContent/SwitchNetwork/index.js | 16 ++--- .../TransactionsExplanation/index.js | 10 +-- .../ModalContent/UnlockMetamask/index.js | 14 ++-- .../ModalContent/Verification/index.js | 13 ++-- .../components/DocumentExplanation.js | 12 ++-- .../components/DocumentField.js | 13 ++-- .../LegalCompliance/components/Form.js | 22 +++--- 13 files changed, 220 insertions(+), 124 deletions(-) diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 2ac48b2ea..3791f754e 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -1,5 +1,7 @@ { "loading": "Loading...", + "application": "the Application", + "and": "and", "header": { "markets": "Markets", "dashboard": "Dashboard", @@ -107,5 +109,69 @@ "no_outcome_selected": "Please select an Outcome", "loss_detected": "This transaction is not permitted because it will result in a loss of an outcome token." } - } + }, + "legal": { + "heading": "Terms of service and privacy policy", + "to_use_app": "For using {{appName}}, you have to agree with our", + "read_and_understood": "I have read and understood", + "documents": { + "terms_of_service": "Terms of Service", + "privacy_policy": "Privacy Policy", + "risk_disclaimer": "Terms of Service", + "address_public_description": "I understand and agree that my wallet address will be publicly displayed on the scoreboard" + } + }, + "reward_claim": { + "info": "In order to claim your <1>{{value}} {{symbol}} tokens, you first have to switch to the <2>{{targetNetwork} network in your current wallet. Also make sure you have enough ETH to submit the transaction with the claim request. More information in our <3>FAQ.", + "already_claimed": "Already Claimed", + "claim": "Claim", + "current_network": "Current network: ", + "gas_estimation": "Estimated Gas Costs: ", + "errors": { + "wrong_network": "Please connect to the mentioned network, before you can claim your reward.", + "not_enough_balance": "You do not have enough ETH for this transaction to cover the gas costs.", + "failed_tx_ask_support": "Unfortunately, the transaction failed. Please try again or contact our support for further assistance." + } + }, + "metamask": { + "install_metamask": "Install Metamask", + "missing": "Metamask is currently not installed or detected. <1>Please download and install Metamask to start using {{name}}" + }, + "register_wallet": { + "heading": "Register wallet address", + "instructions": "Please register your wallet address, where we can send you {{symbol} tokens, and subsequently your {{rewardSymbol}} reward. Read our terms of service for more information", + "eth_required": "You need Rinkeby ETH to register your wallet address.", + "rinkeby_eth_balance": "Rinkeby ETH balance:", + "rinkeby_eth_request": "Request Rinkeby Ether", + "not_enough_balance": "Note: Not enough ETH balance in your MetaMask wallet to submit this transaction.", + "register_wallet": "Register Wallet" + }, + "register_uport": { + "heading": "Setup claim Address", + "disclaimer": "Please register your Metamask address, where we can send your winning GNO tokens in case you finished in the top 50.
Please note that you can register your address only once.", + "save_address": "Save Address", + "failed_tx_ask_support": "Sorry, the transaction failed. Please try again later or contact us!", + "ethereum_wallet_address": "Ethereum Address", + "enter_valid_address": "Please enter a valid address" + }, + "switch_network": { + "heading": "Switch to the {{targetNetwork}} Network", + "instructions": "Your provider is not currently set to the {{targetNetwork}} network. Please switch to {{targetNetwork}} and make sure your wallet is unlocked to start using {{applicationName}}." + }, + "transaction_explanations": { + "heading": "We will ask you to approve the following transactions:" + }, + "unlock": { + "heading": "Unlock your MetaMask wallet", + "instructions": "Please unlock your MetaMask wallet to start using {applicationName}." + }, + "verification": { + "errors": { + "not_loaded": "Our User Verification Integration could not be loaded.", + "not_found": "Sorry for the inconvience, please try again later!" + } + }, + "warning": { + "price_changed": "The transaction could not be processed because the trading price changed.
Please check the new price and try again." + } } \ No newline at end of file diff --git a/src/components/ModalContent/ClaimReward/index.js b/src/components/ModalContent/ClaimReward/index.js index 19f8607d0..835d649ed 100644 --- a/src/components/ModalContent/ClaimReward/index.js +++ b/src/components/ModalContent/ClaimReward/index.js @@ -1,5 +1,7 @@ import React from 'react' import cn from 'classnames/bind' +import { compose } from 'recompose' +import { Trans, withNamespaces } from 'react-i18next' import PropTypes from 'prop-types' import { Link, withRouter } from 'react-router-dom' import Decimal from 'decimal.js' @@ -56,6 +58,7 @@ class ClaimReward extends React.Component { currentBalance, rewardValue, hasClaimedReward, + t, } = this.props const { claimState } = this.state @@ -76,9 +79,9 @@ class ClaimReward extends React.Component { let problemMessage if (isWrongNetwork) { - problemMessage = 'Please connect to the mentioned network, before you can claim your reward.' + problemMessage = t('reward_claim.errors.wrong_network') } else if (!sufficentFunds) { - problemMessage = 'You do not have enough ETH for this transaction to cover the gas costs.' + problemMessage = t('reward_claim.errors.not_enough_balance') } const canClaim = sufficentFunds && !isWrongNetwork @@ -86,63 +89,65 @@ class ClaimReward extends React.Component { let claimButton if (hasClaimedReward) { claimButton = ( - ) } else if (claimState === 'loading') { claimButton = ( - ) } else if (claimState === 'error') { claimButton = ( - - + + ) } else if (!canClaim) { claimButton = ( - ) } else { claimButton = ( - ) } return (
-
) @@ -33,4 +37,4 @@ InstallMetamask.propTypes = { closeModal: PropTypes.func.isRequired, } -export default InstallMetamask +export default withNamespaces()(InstallMetamask) diff --git a/src/components/ModalContent/OutcomePriceChanged.js b/src/components/ModalContent/OutcomePriceChanged.js index 6023dfc1e..627d2df5f 100644 --- a/src/components/ModalContent/OutcomePriceChanged.js +++ b/src/components/ModalContent/OutcomePriceChanged.js @@ -1,22 +1,23 @@ import React from 'react' +import { withNamespaces } from 'react-i18next' import PropTypes from 'prop-types' import cn from 'classnames/bind' import style from './TransactionsExplanation/TransactionExplanation.scss' const cx = cn.bind(style) -const OutcomePriceChanged = ({ closeModal }) => ( +const OutcomePriceChanged = ({ closeModal, t }) => (
-
+
) OutcomePriceChanged.propTypes = { closeModal: PropTypes.func.isRequired, + t: PropTypes.func.isRequired, } -export default OutcomePriceChanged +export default withNamespaces()(OutcomePriceChanged) diff --git a/src/components/ModalContent/RegisterWallet/index.js b/src/components/ModalContent/RegisterWallet/index.js index 49d71d1c7..4e9445347 100644 --- a/src/components/ModalContent/RegisterWallet/index.js +++ b/src/components/ModalContent/RegisterWallet/index.js @@ -1,7 +1,8 @@ import React from 'react' import cn from 'classnames/bind' +import { withNamespaces } from 'react-i18next' import PropTypes from 'prop-types' -import { lifecycle } from 'recompose' +import { compose, lifecycle } from 'recompose' import Decimal from 'decimal.js' import DecimalValue from 'components/DecimalValue' import InteractionButton from 'containers/InteractionButton' @@ -25,6 +26,7 @@ const RegisterMainnetAddress = ({ gasPrice, registrationGasCost, collateralToken: { symbol: collateralTokenSymbol }, + t, }) => { const handleRegistration = async (documentsAccepted) => { await updateMainnetAddress(currentAccount) @@ -41,32 +43,31 @@ const RegisterMainnetAddress = ({ return (
-
@@ -84,7 +85,12 @@ const FORM = { await dispatch(updateMainnetAddress(values.mainnetAddress)) return dispatch(closeModalAction()) }, - validate: values => (web3.utils.isAddress(values.mainnetAddress) ? {} : { mainnetAddress: 'Please enter a valid address' }), + validate: values => (web3.utils.isAddress(values.mainnetAddress) ? {} : { mainnetAddress: 'register_uport.enter_valid_address' }), } -export default reduxForm(FORM)(SetMainnetAddress) +const enhancer = compose( + withNamespaces(), + reduxForm(FORM), +) + +export default enhancer(SetMainnetAddress) diff --git a/src/components/ModalContent/SwitchNetwork/index.js b/src/components/ModalContent/SwitchNetwork/index.js index 95ab664ff..07da24b9e 100644 --- a/src/components/ModalContent/SwitchNetwork/index.js +++ b/src/components/ModalContent/SwitchNetwork/index.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { withNamespaces } from 'react-i18next' import MetamaskIcon from 'assets/img/icons/icon_metamask_color.svg' import cn from 'classnames/bind' import { getFeatureConfig } from 'utils/features' @@ -12,17 +13,15 @@ const logoStyle = { height: 100, } -const { name: applicationName = 'the application' } = getFeatureConfig('tournament') +const { name } = getFeatureConfig('tournament') -const SwitchNetwork = ({ closeModal, targetNetwork }) => ( +const SwitchNetwork = ({ closeModal, targetNetwork, t }) => (
-
) @@ -30,6 +29,7 @@ const SwitchNetwork = ({ closeModal, targetNetwork }) => ( SwitchNetwork.propTypes = { closeModal: PropTypes.func.isRequired, targetNetwork: PropTypes.string.isRequired, + t: PropTypes.func.isRequired, } -export default SwitchNetwork +export default withNamespaces()(SwitchNetwork) diff --git a/src/components/ModalContent/TransactionsExplanation/index.js b/src/components/ModalContent/TransactionsExplanation/index.js index 4db0ed121..fc873e9c6 100644 --- a/src/components/ModalContent/TransactionsExplanation/index.js +++ b/src/components/ModalContent/TransactionsExplanation/index.js @@ -1,14 +1,15 @@ import React from 'react' import PropTypes from 'prop-types' +import { withNamespaces } from 'react-i18next' import cn from 'classnames/bind' import style from './TransactionExplanation.scss' const cx = cn.bind(style) -const TransactionsExplanation = ({ transactions, closeModal }) => ( +const TransactionsExplanation = ({ transactions, closeModal, t }) => (
-
closeModal()} /> -

We will ask you to approve the following transactions:

+
) UnlockMetamask.propTypes = { closeModal: PropTypes.func.isRequired, + t: PropTypes.func.isRequired, } -export default UnlockMetamask +export default withNamespaces()(UnlockMetamask) diff --git a/src/components/ModalContent/Verification/index.js b/src/components/ModalContent/Verification/index.js index 61ef15fdc..4d6c5c099 100644 --- a/src/components/ModalContent/Verification/index.js +++ b/src/components/ModalContent/Verification/index.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { withNamespaces } from 'react-i18next' import VerificationHandler from 'verification' @@ -8,11 +9,11 @@ import styles from './Verification.scss' const cx = classnames.bind(styles) -const ErrorComponent = ({ closeModal }) => ( +const ErrorComponent = ({ closeModal, t }) => ( <> -

Our User Verification Integration could not be loaded.

+

{t('verification.errors.not_loaded')}