From f496bea7d4a2db27990d2d5e0895eac81c6a542e Mon Sep 17 00:00:00 2001 From: Onuwa Nnachi Isaac Date: Mon, 8 Jul 2019 18:58:16 +0100 Subject: [PATCH] Fix Use react-i18next instead of i18n #173 --- package-lock.json | 17 +- package.json | 2 +- src/App.js | 1237 ++++++++++++------------- src/components/Advanced.js | 42 +- src/components/Bity.js | 62 +- src/components/BityHistory.js | 19 +- src/components/Bottom.js | 9 +- src/components/BurnWallet.js | 82 +- src/components/Exchange.js | 89 +- src/components/MainCard.js | 55 +- src/components/MoreButtons.js | 14 +- src/components/Receipt.js | 9 +- src/components/Receive.js | 18 +- src/components/RequestFunds.js | 20 +- src/components/SendByScan.js | 12 +- src/components/SendToAddress.js | 15 +- src/components/Share.js | 11 +- src/components/WithdrawFromPrivate.js | 65 +- src/i18n/index.js | 12 +- src/i18n/locales/en.json | 6 +- 20 files changed, 903 insertions(+), 893 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69b3cf2aa..19995af76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21414,23 +21414,12 @@ "integrity": "sha512-1XgkCpwMnNQsuOIy938UCntz8Xzwt9ECwHaH3cCfIQK1SPpH+y7gCYtqEcb6Rm0hAUq7Lp9+Ljoti9zGMswYrQ==" }, "react-i18next": { - "version": "9.0.10", - "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-9.0.10.tgz", - "integrity": "sha512-xpeCWNut7ylQLs3Qqyo7dT13kgZbML1CdftbdnswLCv0RbRT16bRP16ma59iLe1KHIbn92VJo0Q8LSKYoXVNvg==", + "version": "10.1.2", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-10.1.2.tgz", + "integrity": "sha512-0YGaZE7E9i+ZKsFXV8T1dSlUj3xim8Jn4dfn0fcpJxrkTlhLNZCPqc+zouroUku+CUKasupoek4rosUUq5VdeQ==", "requires": { "@babel/runtime": "^7.3.1", - "hoist-non-react-statics": "3.2.1", "html-parse-stringify2": "2.0.1" - }, - "dependencies": { - "hoist-non-react-statics": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz", - "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==", - "requires": { - "react-is": "^16.3.2" - } - } } }, "react-is": { diff --git a/package.json b/package.json index 71dd22c34..bcc24fbe4 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "react-dom": "^16.6.0", "react-emoji-render": "^0.5.0", "react-file-reader-input": "^2.0.0", - "react-i18next": "^9.0.7", + "react-i18next": "^10.1.2", "react-linkify": "^0.2.2", "react-native-webview-messaging": "^1.2.3", "react-qr-reader": "^2.1.1", diff --git a/src/App.js b/src/App.js index 59acfa880..07147d381 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import { Tx, Input, Output, Util } from 'leap-core'; import { Dapparatus, Transactions, Gas } from "dapparatus"; import { equal, bi } from 'jsbi-utils'; import Web3 from 'web3'; -import { I18nextProvider } from 'react-i18next'; +import { I18nextProvider, Translation } from 'react-i18next'; import i18n from './i18n'; import './App.scss'; import Header from './components/Header'; @@ -833,451 +833,309 @@ export default class App extends Component { return ( -
-
- {extraHead} - {networkOverlay} - {web3_setup} + + { + (t) => ( + // eslint-disable-next-line no-unused-expressions +
+
+ {extraHead} + {networkOverlay} + {web3_setup} -
- {header} +
+ {header} - {web3 /*&& this.checkNetwork()*/ && (() => { - //console.log("VIEW:",view) + {web3 /*&& this.checkNetwork()*/ && (() => { + //console.log("VIEW:",view) - let moreButtons = ( - - ) + let moreButtons = ( + + ) - let extraTokens = "" + let selected = "xDai" + let extraTokens = "" - let defaultBalanceDisplay = ( -
- -
- ) - - // NOTE: This view is to show specific historical transactions. - if(view.includes("account_")) { - const targetAddress = view.replace("account_","") - return ( -
- - - {defaultBalanceDisplay} - - - - { - this.changeView('main') - }} - /> -
- - ) - } - - // NOTE: This view shows specific historical transactions to - // bity.com - if (view.includes("bity_")) { - const orderId = view.replace("bity_","") - return ( -
- - - - - { - this.changeView('main') - }} - /> -
+ let defaultBalanceDisplay = ( +
+ +
+ ) - ) - } + // NOTE: This view is to show specific historical transactions. + if(view.includes("account_")) { + const targetAddress = view.replace("account_","") + return ( +
+ + + {defaultBalanceDisplay} + + - if (view.includes("loader_")) { - const network = view.replace("loader_"); - return ( -
-
+ { + this.changeView('main') + }} + /> +
- -
- -
- ); - } - - const sendByScan = ( - { - this.changeAlert("danger",error) - }} - /> - ) - - switch(view) { - case 'main': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - {extraTokens} - - {expertMode ? (<> - - - - - - ) : ( - - )} - - {/* eslint-disable-next-line jsx-a11y/accessible-emoji */} - 💀 This product is currently in early alpha. Use at your own risk! 💀 - - - - {moreButtons} - - - - - { - this.changeView('advanced') + ) + } + + // NOTE: This view shows specific historical transactions to + // bity.com + if (view.includes("bity_")) { + const orderId = view.replace("bity_","") + return ( +
+ + + + + { + this.changeView('main') + }} + /> +
+ + ) + } + + const sendByScan = ( + { + this.changeAlert("danger",error) }} /> -
- ); - case 'cashout': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - -
- + {this.state.scannerOpen ? sendByScan : null} + + {extraTokens} + + + + + + + + {/* eslint-disable-next-line jsx-a11y/accessible-emoji */} + 💀 This product is currently in early alpha. Use at your own risk! 💀 + + -
- + + {moreButtons} + + + + + { + this.changeView('advanced') + }} /> - - -
- ); - case 'advanced': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - - - -
- ) - case 'withdraw_from_private': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - {defaultBalanceDisplay} - + ); + case 'cashout': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + +
+ +
+ + + +
+ ); + case 'advanced': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + + + - - { - this.changeView('main') - }} - /> -
- ); - case 'send_to_address': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - {defaultBalanceDisplay} - - - -
- ); - case 'receipt': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - - - -
- ); - case 'receive': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - {defaultBalanceDisplay} - - - -
- ); - case 'request_funds': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - {defaultBalanceDisplay} - + ) + case 'withdraw_from_private': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + {defaultBalanceDisplay} + + + { + this.changeView('main') + }} + /> +
+ ); + case 'send_to_address': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + {defaultBalanceDisplay} + + + - - { - this.changeView('main') - }} - /> -
- ); - case 'share': - - let url = window.location.protocol+"//"+window.location.hostname - if(window.location.port&&window.location.port!==80&&window.location.port!==443){ - url = url+":"+window.location.port - } - +
+ ); + case 'receipt': return (
{this.state.scannerOpen ? sendByScan : null} - - +
); - case 'share-link': + case 'receive': return (
{this.state.scannerOpen ? sendByScan : null} - - + {defaultBalanceDisplay} + + + +
+ ); + case 'request_funds': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + {defaultBalanceDisplay} + + + { + this.changeView('main') + }} + /> +
+ ); + case 'share': + + let url = window.location.protocol+"//"+window.location.hostname + if(window.location.port&&window.location.port!==80&&window.location.port!==443){ + url = url+":"+window.location.port + } + + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + + + +
+ ); + case 'share-link': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + + + +
+ ); + case 'burn-wallet': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + {defaultBalanceDisplay} + { + burnMetaAccount() + if(RNMessageChannel){ + RNMessageChannel.send("burn") + } + if(localStorage&&typeof localStorage.setItem === "function"){ + localStorage.setItem(this.state.account+"loadedBlocksTop","") + localStorage.setItem(this.state.account+"metaPrivateKey","") + localStorage.setItem(this.state.account+"recentTxs","") + localStorage.setItem(this.state.account+"transactionsByAddress","") + this.setState({recentTxs:[],transactionsByAddress:{}}) + } + }} /> + + +
+ ); + + case 'exchange': + return ( +
+ {this.state.scannerOpen ? sendByScan : null} + + + -
); - case 'burn-wallet': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - {defaultBalanceDisplay} - { - burnMetaAccount() - if(RNMessageChannel){ - RNMessageChannel.send("burn") - } - storeValues({ - loadedBlocksTop: "", - metaPrivateKey: "", - recentTxs: "", - transactionsByAddress: "", - }, this.state.account); - this.setState({recentTxs:[],transactionsByAddress:{}}) - }} - /> - - -
- ); - - case 'exchange': - return ( -
- {this.state.scannerOpen ? sendByScan : null} - - - - -
- ); - case 'loader': - return ( -
-
- - -
- -
- ); - case 'reader': - return ( -
-
- -
- -
- ); - case 'claimer': - return ( -
-
- -
- -
- ); - default: - return ( -
unknown view
- ) - } - })()} - { ( false || !web3 /*|| !this.checkNetwork() */) && } - { alert &&
} -
- { - //console.log("DAPPARATUS UPDATE",state) - if (state.xdaiweb3) { - let xdaiContract; - try { - xdaiContract = new state.xdaiweb3.eth.Contract(require("./contracts/StableCoin.abi.js"), CONFIG.SIDECHAIN.DAI_ADDRESS) - } catch(err) { - console.log("Error loading PDAI contract"); - } - this.setState({xdaiContract}); - } - if (state.web3Provider) { - state.web3 = new Web3(state.web3Provider) - this.setState(state,()=>{ - //console.log("state set:",this.state) - if(this.state.possibleNewPrivateKey){ - this.dealWithPossibleNewPrivateKey() + case 'loader': + return ( +
+
+ + +
+ +
+ ); + case 'reader': + return ( +
+
+ +
+ +
+ ); + case 'claimer': + return ( +
+
+ +
+ +
+ ); + default: + return ( +
unknown view
+ ) + } + })()} + { ( false || !web3 /*|| !this.checkNetwork() */) && } + { alert &&
} +
+ { + //console.log("DAPPARATUS UPDATE",state) + if (state.xdaiweb3) { + let xdaiContract; + try { + xdaiContract = new state.xdaiweb3.eth.Contract(require("./contracts/StableCoin.abi.js"), CONFIG.SIDECHAIN.DAI_ADDRESS) + } catch(err) { + console.log("Error loading PDAI contract"); + } + this.setState({xdaiContract}); } - if(!this.state.parsingTheChain){ - this.setState({parsingTheChain:true},async ()=>{ - let upperBoundOfSearch = this.state.block - //parse through recent transactions and store in local storage - let initResult = this.initRecentTxs() - let recentTxs = initResult[0] - let transactionsByAddress = initResult[1] - let loadedBlocksTop = this.state.loadedBlocksTop - if (!loadedBlocksTop) { - loadedBlocksTop = getStoredValue("loadedBlocksTop", this.state.account) + if (state.web3Provider) { + state.web3 = new Web3(state.web3Provider) + this.setState(state,()=>{ + //console.log("state set:",this.state) + if(this.state.possibleNewPrivateKey){ + this.dealWithPossibleNewPrivateKey() } - // Look back through previous blocks since this account - // was last online... this could be bad. We might need a - // central server keeping track of all these and delivering - // a list of recent transactions - let updatedTxs = false - if (!loadedBlocksTop || loadedBlocksTop < this.state.block) { - if (!loadedBlocksTop) loadedBlocksTop = Math.max(2, this.state.block - 5) - if (this.state.block - loadedBlocksTop > MAX_BLOCK_TO_LOOK_BACK) { - loadedBlocksTop = this.state.block - MAX_BLOCK_TO_LOOK_BACK - } - let paddedLoadedBlocks = parseInt(loadedBlocksTop) + BLOCKS_TO_PARSE_PER_BLOCKTIME - //console.log("choosing the min of ",paddedLoadedBlocks,"and",this.state.block) - let parseBlock = Math.min(paddedLoadedBlocks, this.state.block) - //console.log("MIN:",parseBlock) - upperBoundOfSearch = parseBlock - console.log(" +++++++======== Parsing recent blocks ~" + this.state.block) - //first, if we are still back parsing, we need to look at *this* block too - if (upperBoundOfSearch < this.state.block) { - for (let b = this.state.block; b > this.state.block - 6; b--) { - //console.log(" ++ Parsing *CURRENT BLOCK* Block "+b+" for transactions...") - updatedTxs = (await this.parseBlocks(b, recentTxs, transactionsByAddress)) || updatedTxs + if(!this.state.parsingTheChain){ + this.setState({parsingTheChain:true},async ()=>{ + let upperBoundOfSearch = this.state.block + //parse through recent transactions and store in local storage + + if(localStorage&&typeof localStorage.setItem === "function"){ + + let initResult = this.initRecentTxs() + let recentTxs = initResult[0] + let transactionsByAddress = initResult[1] + + let loadedBlocksTop = this.state.loadedBlocksTop + if(!loadedBlocksTop){ + loadedBlocksTop = localStorage.getItem(this.state.account+"loadedBlocksTop") + } + // Look back through previous blocks since this account + // was last online... this could be bad. We might need a + // central server keeping track of all these and delivering + // a list of recent transactions + + let updatedTxs = false + if(!loadedBlocksTop || loadedBlocksTop MAX_BLOCK_TO_LOOK_BACK){ + loadedBlocksTop = this.state.block-MAX_BLOCK_TO_LOOK_BACK + } + + let paddedLoadedBlocks = parseInt(loadedBlocksTop)+BLOCKS_TO_PARSE_PER_BLOCKTIME + //console.log("choosing the min of ",paddedLoadedBlocks,"and",this.state.block) + let parseBlock=Math.min(paddedLoadedBlocks,this.state.block) + + //console.log("MIN:",parseBlock) + upperBoundOfSearch = parseBlock + console.log(" +++++++======== Parsing recent blocks ~"+this.state.block) + //first, if we are still back parsing, we need to look at *this* block too + if(upperBoundOfSearchthis.state.block-6;b--){ + //console.log(" ++ Parsing *CURRENT BLOCK* Block "+b+" for transactions...") + updatedTxs = (await this.parseBlocks(b,recentTxs,transactionsByAddress)) || updatedTxs + } + } + console.log(" +++++++======== Parsing from "+loadedBlocksTop+" to "+upperBoundOfSearch+"....") + while(loadedBlocksTop - { - console.log("Gas price update:",state) - const gwei = (state.gwei || this.state.gwei) + 0.1; - console.log("GWEI set:",gwei); - this.setState({ - ...state, - gwei - }) - }} - /> -
- {eventParser} -
-
+ }} + /> + { + console.log("Gas price update:",state) + const gwei = (state.gwei || this.state.gwei) + 0.1; + console.log("GWEI set:",gwei); + this.setState({ + ...state, + gwei + }) + }} + /> +
+ {eventParser} +
+
+ ) + } + ) diff --git a/src/components/Advanced.js b/src/components/Advanced.js index 8fcd01da6..0e844ce05 100644 --- a/src/components/Advanced.js +++ b/src/components/Advanced.js @@ -1,7 +1,7 @@ import React from 'react'; import { Scaler } from "dapparatus"; import { CopyToClipboard } from "react-copy-to-clipboard"; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import { Input, QR as QRCode, @@ -16,7 +16,7 @@ import { getStoredValue, storeValues } from "../services/localStorage"; const { CURRENCY, LINKS } = getConfig() -export default class Advanced extends React.Component { +class Advanced extends React.Component { constructor(props) { super(props); this.state = { @@ -52,8 +52,13 @@ export default class Advanced extends React.Component { } render(){ +<<<<<<< HEAD let {isVendor, balance, privateKey, changeAlert, changeView, setPossibleNewPrivateKey} = this.props let { currency, expertMode } = this.state +======= + let {isVendor, balance, privateKey, changeAlert, changeView, setPossibleNewPrivateKey, t} = this.props + let { currency } = this.state +>>>>>>> Fix Use react-i18next instead of i18n #173 let url = window.location.protocol+"//"+window.location.hostname if(window.location.port&&window.location.port!==80&&window.location.port!==443){ @@ -112,7 +117,7 @@ export default class Advanced extends React.Component { changeAlert({type: 'warning', message: 'Invalid private key.'}) } }}> - {i18n.t('create')} + {t('create')}
) @@ -153,7 +158,7 @@ export default class Advanced extends React.Component { } }}> - {i18n.t('create')} + {t('create')} @@ -203,12 +208,12 @@ export default class Advanced extends React.Component { { this.setState({privateKeyQr:!this.state.privateKeyQr}) }}> - {i18n.t('show')} + {t('show')} changeAlert({type: 'success', message: 'Private Key copied to clipboard'})}> - {i18n.t('copy')} + {t('copy')} @@ -226,7 +231,7 @@ export default class Advanced extends React.Component { changeView('burn-wallet') }}> - {i18n.t('burn')} + {t('burn')} @@ -241,20 +246,21 @@ export default class Advanced extends React.Component { {inputSeedRow} {isVendor && -
-
- { - this.props.changeView("exchange") - }}> - - {"Exchange"} - - +
+
+ { + this.props.changeView("exchange") + }}> + + {"Exchange"} + + +
-
} -
) } } + +export default withTranslation()(Advanced); \ No newline at end of file diff --git a/src/components/Bity.js b/src/components/Bity.js index d3b481de3..f96d6f763 100644 --- a/src/components/Bity.js +++ b/src/components/Bity.js @@ -1,6 +1,6 @@ //@format import React, { Component } from "react"; -import i18n from "../i18n"; +import { Trans, withTranslation } from 'react-i18next'; import { Box, Field, Input } from "rimble-ui"; import { PrimaryButton } from "./Buttons"; import { format } from "@tammo/react-iban"; @@ -97,7 +97,7 @@ class Bity extends Component { try { await this.getMinAmount(); } catch (err) { - changeAlert("warning", i18n.t("offramp.errors.bity_connection")); + changeAlert("warning", this.props.t("offramp.errors.bity_connection")); } } @@ -141,7 +141,7 @@ class Bity extends Component { address ); } catch (err) { - changeAlert("warning", i18n.t("offramp.errors.bity_connection")); + changeAlert("warning", this.props.t("offramp.errors.bity_connection")); return; } @@ -159,7 +159,7 @@ class Bity extends Component { } catch (err) { changeAlert( "warning", - i18n.t("offramp.errors.ethgasstation_connection") + this.props.t("offramp.errors.ethgasstation_connection") ); return; } @@ -204,7 +204,7 @@ class Bity extends Component { from: address, amount: amount.value, result: receipt, - message: i18n.t("offramp.success") + message: this.props.t("offramp.success") }; setReceipt(receiptObj); changeView("receipt"); @@ -290,7 +290,7 @@ class Bity extends Component { name: { value: name, valid: name !== "", - message: name === "" ? i18n.t("offramp.required") : null + message: name === "" ? this.props.t("offramp.required") : null } }); } else if (input === "IBAN") { @@ -302,10 +302,10 @@ class Bity extends Component { valid = true; } else if (validReason === "country") { valid = false; - message = i18n.t("offramp.country_not_supported"); + message = this.props.t("offramp.country_not_supported"); } else { valid = false; - message = i18n.t("offramp.iban_incorrect"); + message = this.props.t("offramp.iban_incorrect"); } newFields = Object.assign(fields, { IBAN: { @@ -334,12 +334,12 @@ class Bity extends Component { let valid, message; if (amount < min) { valid = false; - message = `${i18n.t("offramp.amount_too_small")} ${currencyDisplay( - MIN_AMOUNT_DOLLARS - )}.`; + message = `${this.props.t( + "offramp.amount_too_small" + )} $${MIN_AMOUNT_DOLLARS}.`; } else if (amount > max) { valid = false; - message = i18n.t("offramp.amount_too_big"); + message = this.props.t("offramp.amount_too_big"); } else { valid = true; } @@ -359,26 +359,26 @@ class Bity extends Component { render() { const { fields } = this.state; - const { currencyDisplay } = this.props; - + let { t } = this.props; return (
- {/* TODO: How to put this into i18n without creating a mess?*/}

- Transfer your ether directly to your bank account with just one - click using{" "} - - bity.com - - , the secure swiss crypto gateway. No KYC is required within - bity.com's 5000 CHF (~4500 EUR) annual limit. -

- + + Transfer your ether directly to your bank account with just one + click using + + bity.com + + , the secure swiss crypto gateway. No KYC is required within + bity.com's 5000 CHF (~4500 EUR) annual limit. + +

+ {fields.IBAN.message} ) : null} - + - {i18n.t("offramp.form.submit")} + {t("offramp.form.submit")}
); } } -export default Bity; +export default withTranslation()(Bity); diff --git a/src/components/BityHistory.js b/src/components/BityHistory.js index f3397183f..624edac34 100644 --- a/src/components/BityHistory.js +++ b/src/components/BityHistory.js @@ -1,7 +1,7 @@ // @format import React, { Component } from "react"; -import i18n from "../i18n"; +import { withTranslation } from 'react-i18next'; import { Flex, Box, Image, Icon } from "rimble-ui"; import { getOrder } from "../services/bity"; import Blockies from "react-blockies"; @@ -10,7 +10,7 @@ import Ruler from "./Ruler"; import Loader from "./Loader"; import burnerlogo from "../assets/burnerwallet.png"; -export default class BityHistory extends Component { +class BityHistory extends Component { constructor(props) { super(props); this.state = {}; @@ -23,7 +23,7 @@ export default class BityHistory extends Component { } render() { - const { address, orderId } = this.props; + const { address, orderId, t } = this.props; const { order } = this.state; if (order) { @@ -54,27 +54,27 @@ export default class BityHistory extends Component { -
{i18n.t("offramp.history.status_title")}
+
{t("offramp.history.status_title")}
    {order.timestamp_created && ( -
  • ✓ {i18n.t("offramp.history.status.created")+orderId}
    • +
  • ✓ {t("offramp.history.status.created")+orderId}
    • )} {order.timestamp_payment_received && ( -
  • ✓ {i18n.t("offramp.history.status.received")}
    • +
  • ✓ {t("offramp.history.status.received")}
    • )} {order.timestamp_executed && ( -
  • ✓ {i18n.t("offramp.history.status.executed")}
    • +
  • ✓ {t("offramp.history.status.executed")}
    • )}

- *{i18n.t("offramp.history.disclaimer")} + *{t("offramp.history.disclaimer")} - {i18n.t("offramp.history.click")} + {t("offramp.history.click")} .

@@ -85,3 +85,4 @@ export default class BityHistory extends Component { } } } +export default withTranslation()(BityHistory) \ No newline at end of file diff --git a/src/components/Bottom.js b/src/components/Bottom.js index 7aaa95f5e..60ffb3c1c 100644 --- a/src/components/Bottom.js +++ b/src/components/Bottom.js @@ -1,14 +1,14 @@ import React from 'react'; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next' import { Icon } from 'rimble-ui' import { ActionButton } from '../components/Buttons' -export default class Receive extends React.Component { +class Receive extends React.Component { render() { - let {icon,text,action} = this.props + let {icon,text,action, t} = this.props if(!icon) icon = "times" - if(!text) text = i18n.t('done') + if(!text) text = t('done') //icon = "fas fa-"+icon @@ -22,3 +22,4 @@ export default class Receive extends React.Component { ) } } +export default withTranslation()(Receive) \ No newline at end of file diff --git a/src/components/BurnWallet.js b/src/components/BurnWallet.js index b7e699e80..5050b1597 100644 --- a/src/components/BurnWallet.js +++ b/src/components/BurnWallet.js @@ -1,35 +1,61 @@ -import React from 'react'; +import React from "react"; import Ruler from "./Ruler"; -import i18n from '../i18n'; - +import { Translation } from "react-i18next"; export default ({ mainStyle, burnWallet, goBack }) => { return ( -
-
- {i18n.t('burn_wallet.burn_private_key_question')} -
-
- {i18n.t('burn_wallet.disclaimer')} -
-
- -
+ + {(t, { i18n }) => ( + // eslint-disable-next-line no-unused-expressions + <> +
+ {t("burn_wallet.burn_private_key_question")} +
+
+ {t("burn_wallet.disclaimer")} +
+
+ +
+
+ +
-
- +
+ +
- -
-
-
-
- -
- ) -} + + )} + + ); +}; diff --git a/src/components/Exchange.js b/src/components/Exchange.js index 7298eb58d..4c80547de 100644 --- a/src/components/Exchange.js +++ b/src/components/Exchange.js @@ -4,7 +4,7 @@ import Ruler from "./Ruler"; import Blockies from 'react-blockies'; import { Scaler } from "dapparatus"; import Web3 from 'web3'; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import { Flex, Box, @@ -39,7 +39,7 @@ const uniswapContractObject = { let metaReceiptTracker = {} -export default class Exchange extends React.Component { +class Exchange extends React.Component { constructor(props) { super(props); @@ -74,13 +74,13 @@ export default class Exchange extends React.Component { xdaiMetaAccount: xdaiMetaAccount, daiToXdaiMode: false, ethToDaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:Date.now(), loaderBarPercent: 2, loaderBarColor: "#aaaaaa", gwei: 5, maxWithdrawlAmount: 0.00, - withdrawalExplanation: i18n.t('exchange.withdrawal_explanation'), + withdrawalExplanation: this.props.t('exchange.withdrawal_explanation'), gettingGas:false, } @@ -159,11 +159,11 @@ export default class Exchange extends React.Component { console.log("watching for ",this.props.daiBalance,"to be ",this.state.daiBalanceShouldBe-0.0005) if(this.props.daiBalance>=(this.state.daiBalanceShouldBe-0.0005)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ daiToXdaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -179,11 +179,11 @@ export default class Exchange extends React.Component { //console.log("watching for ",this.state.xdaiBalance,"to be ",this.state.xdaiBalanceShouldBe-0.0005) if(this.props.xdaiBalance>=(this.state.xdaiBalanceShouldBe-0.0005)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ daiToXdaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -198,11 +198,11 @@ export default class Exchange extends React.Component { console.log("watching for ",this.props.daiBalance,"to be ",this.state.daiBalanceShouldBe-0.0005) if(this.props.daiBalance<=(this.state.daiBalanceShouldBe-0.0005)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ daiToXdaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -221,11 +221,11 @@ export default class Exchange extends React.Component { //ethBalanceShouldBe:this.state.ethBalance+amountOfChange, console.log("watching for ",this.props.ethBalance,"to be ",this.state.ethBalanceShouldBe-0.001) if(parseFloat(this.props.ethBalance)>=(this.state.ethBalanceShouldBe-0.001)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ ethToDaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -241,11 +241,11 @@ export default class Exchange extends React.Component { //console.log("watching for ",this.state.xdaiBalance,"to be ",this.state.xdaiBalanceShouldBe-0.0005) if(this.props.daiBalance>=(this.state.daiBalanceShouldBe-0.0005)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ ethToDaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -261,11 +261,11 @@ export default class Exchange extends React.Component { //ethBalanceShouldBe:this.state.ethBalance+amountOfChange, console.log("watching for ",this.props.ethBalance,"to be ",this.state.ethBalanceShouldBe-0.001) if(parseFloat(this.props.ethBalance)<=(this.state.ethBalanceShouldBe-0.001)){ - this.setState({loaderBarPercent:100,loaderBarStatusText: i18n.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) + this.setState({loaderBarPercent:100,loaderBarStatusText: this.props.t('exchange.funds_bridged'),loaderBarColor:"#62f54a"}) setTimeout(()=>{ this.setState({ ethToDaiMode: false, - loaderBarStatusText: i18n.t('loading'), + loaderBarStatusText: this.props.t('loading'), loaderBarStartTime:0, loaderBarPercent: 1, loaderBarColor: "#FFFFFF" @@ -294,22 +294,22 @@ export default class Exchange extends React.Component { daiSendAmount = `${convertCurrency(daiSendAmount, `USD/${displayCurrency}`)}`; if(parseFloat(daiBalance) 0)){ - changeAlert({type: 'warning',message: i18n.t('exchange.invalid_to_amount')}); + changeAlert({type: 'warning',message: this.props.t('exchange.invalid_to_amount')}); }else{ this.setState({ daiToXdaiMode:"sending", daiBalanceAtStart:daiBalance, daiBalanceShouldBe:parseFloat(daiBalance) - parseFloat(daiSendAmount), loaderBarColor:"#f5eb4a", - loaderBarStatusText: i18n.t('exchange.calculate_gas_price'), + loaderBarStatusText: this.props.t('exchange.calculate_gas_price'), loaderBarPercent:0, loaderBarStartTime: Date.now(), loaderBarClick:()=>{ - alert(i18n.t('exchange.go_to_etherscan')) + alert(this.props.t('exchange.go_to_etherscan')) } }) this.setState({sendDai:false}) @@ -555,22 +555,22 @@ export default class Exchange extends React.Component { let actualEthSendAmount = parseFloat(ethSendAmount)/parseFloat(ethprice) if(parseFloat(ethBalance)0)){ - changeAlert({type: 'warning',message: i18n.t('exchange.invalid_to_amount')}); + changeAlert({type: 'warning',message: this.props.t('exchange.invalid_to_amount')}); }else{ this.setState({ ethToDaiMode:"sending", ethBalanceAtStart:ethBalance, ethBalanceShouldBe:parseFloat(ethBalance)-actualEthSendAmount, loaderBarColor:"#f5eb4a", - loaderBarStatusText: i18n.t('exchange.calculate_gas_price'), + loaderBarStatusText: this.props.t('exchange.calculate_gas_price'), loaderBarPercent:0, loaderBarStartTime: Date.now(), loaderBarClick:()=>{ - alert(i18n.t('exchange.go_to_etherscan')) + alert(this.props.t('exchange.go_to_etherscan')) }, sendEth: false }) @@ -695,7 +695,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#4ab3f5", loaderBarStatusText:message, loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')); + alert(this.props.t('exchange.idk')); } }) if(call){ @@ -725,18 +725,19 @@ export default class Exchange extends React.Component { render() { const { address } = this.props; let {daiToXdaiMode,ethToDaiMode } = this.state + const { t } = this.props let ethCancelButton = { this.setState({ethToDaiAmount:"",ethToDaiMode:false}) }}> - {i18n.t('cancel')} + {t('cancel')} let daiCancelButton = { this.setState({daiToXdaiAmount:"",daiToXdaiMode:false}) }}> - {i18n.t('cancel')} + {t('cancel')} let buttonsDisabled = ( @@ -747,7 +748,7 @@ export default class Exchange extends React.Component { let adjustedFontSize = Math.round((Math.min(document.documentElement.clientWidth,600)/600)*24) let adjustedTop = Math.round((Math.min(document.documentElement.clientWidth,600)/600)*-20)+9 - let daiToXdaiDisplay = i18n.t('loading') + let daiToXdaiDisplay = this.props.t('loading') //console.log("daiToXdaiMode",daiToXdaiMode) if(daiToXdaiMode==="sending" || daiToXdaiMode==="withdrawing" || daiToXdaiMode==="depositing"){ @@ -816,11 +817,11 @@ export default class Exchange extends React.Component { xdaiBalanceAtStart:this.props.xdaiBalance, xdaiBalanceShouldBe:parseFloat(this.props.xdaiBalance)+parseFloat(this.state.daiToXdaiAmount), loaderBarColor:"#3efff8", - loaderBarStatusText: i18n.t('exchange.calculate_gas_price'), + loaderBarStatusText: this.props.t('exchange.calculate_gas_price'), loaderBarPercent:0, loaderBarStartTime: Date.now(), loaderBarClick:()=>{ - alert(i18n.t('exchange.go_to_etherscan')) + alert(this.props.t('exchange.go_to_etherscan')) } }) @@ -834,7 +835,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#4ab3f5", loaderBarStatusText:"Waiting for bridge...", loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')) + alert(this.props.t('exchange.idk')) } }) }) @@ -1010,7 +1011,7 @@ export default class Exchange extends React.Component { ) } - let ethToDaiDisplay = i18n.t('loading') + let ethToDaiDisplay = this.props.t('loading') if(ethToDaiMode==="sending" || ethToDaiMode==="depositing" || ethToDaiMode==="withdrawing"){ ethToDaiDisplay = ( @@ -1096,11 +1097,11 @@ export default class Exchange extends React.Component { this.setState({ ethToDaiMode:"depositing", loaderBarColor:"#3efff8", - loaderBarStatusText: i18n.t('exchange.calculate_gas_price'), + loaderBarStatusText: this.props.t('exchange.calculate_gas_price'), loaderBarPercent:0, loaderBarStartTime: Date.now(), loaderBarClick:()=>{ - alert(i18n.t('exchange.go_to_etherscan')) + alert(this.props.t('exchange.go_to_etherscan')) } }) @@ -1122,7 +1123,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#4ab3f5", loaderBarStatusText:"Waiting for 🦄 exchange...", loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')) + alert(this.props.t('exchange.idk')) } }) } @@ -1206,11 +1207,11 @@ export default class Exchange extends React.Component { this.setState({ ethToDaiMode:"withdrawing", loaderBarColor:"#3efff8", - loaderBarStatusText: i18n.t('exchange.calculate_gas_price'), + loaderBarStatusText: this.props.t('exchange.calculate_gas_price'), loaderBarPercent:0, loaderBarStartTime: Date.now(), loaderBarClick:()=>{ - alert(i18n.t('exchange.go_to_etherscan')) + alert(this.props.t('exchange.go_to_etherscan')) } }) @@ -1349,7 +1350,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#42ceb2", loaderBarStatusText:"Approving 🦄 exchange...", loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')) + alert(this.props.t('exchange.idk')) } }) @@ -1367,7 +1368,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#4ab3f5", loaderBarStatusText:"Sending funds to 🦄 Exchange...", loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')) + alert(this.props.t('exchange.idk')) } }) @@ -1390,7 +1391,7 @@ export default class Exchange extends React.Component { loaderBarColor:"#4ab3f5", loaderBarStatusText:"Sending funds to 🦄 Exchange...", loaderBarClick:()=>{ - alert(i18n.t('exchange.idk')) + alert(this.props.t('exchange.idk')) } }) @@ -1782,7 +1783,7 @@ export default class Exchange extends React.Component { this.props.changeView("cashout"); }}> - {i18n.t("offramp.account")} + {t("offramp.account")}
@@ -1791,3 +1792,5 @@ export default class Exchange extends React.Component { ) } } + +export default withTranslation()(Exchange); \ No newline at end of file diff --git a/src/components/MainCard.js b/src/components/MainCard.js index 5afb96c05..06f892a7f 100644 --- a/src/components/MainCard.js +++ b/src/components/MainCard.js @@ -1,34 +1,39 @@ import React from "react"; import { Flex, Icon, Box } from "rimble-ui"; -import i18next from "i18next"; +import { Translation } from "react-i18next"; import { PrimaryButton } from "./Buttons"; -export default ({ - changeView, -}) => { +export default ({ changeView }) => { let sendButtons = ( - - - - changeView("receive")}> - - - {i18next.t("main_card.receive")} - - + + {(t, { i18n }) => ( + // eslint-disable-next-line no-unused-expressions + + + + changeView("receive")}> + + + {t("main_card.receive")} + + + + + changeView("send_to_address")} + > + + + {t("main_card.send")} + + + + - - changeView("send_to_address")}> - - - {i18next.t("main_card.send")} - - - - - + )} + ); - - return sendButtons + return sendButtons; }; diff --git a/src/components/MoreButtons.js b/src/components/MoreButtons.js index 03fb7af9d..a337610a7 100644 --- a/src/components/MoreButtons.js +++ b/src/components/MoreButtons.js @@ -1,13 +1,13 @@ import React from "react"; -import i18n from "../i18n"; import { Flex, Icon, Box } from "rimble-ui"; import { BorderButton } from "./Buttons"; +import { withTranslation } from "react-i18next"; -export default ({ +function MoreButtons ({ isVendor, changeView, - expertMode -}) => { + t +}) { let exchangeButton; if (!isVendor) { @@ -20,7 +20,7 @@ export default ({ > - {i18n.t("more_buttons.exchange")} + {t("more_buttons.exchange")} ); @@ -51,7 +51,7 @@ export default ({ > - {i18n.t("more_buttons.request")} + {t("more_buttons.request")} @@ -59,3 +59,5 @@ export default ({ ); }; + +export default withTranslation()(MoreButtons) \ No newline at end of file diff --git a/src/components/Receipt.js b/src/components/Receipt.js index 3905ebce2..f86f9ca30 100644 --- a/src/components/Receipt.js +++ b/src/components/Receipt.js @@ -2,13 +2,13 @@ import React from 'react'; import { Blockie } from "dapparatus"; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import bityLogo from '../assets/bity.png'; import { Image } from "rimble-ui"; const BockieSize = 12 -export default class Receive extends React.Component { +class Receive extends React.Component { componentDidMount(){ console.log("RECEIPT LOADED",this.props) @@ -39,7 +39,7 @@ export default class Receive extends React.Component { } } render() { - let {receipt, currencyDisplay} = this.props + let {receipt, currencyDisplay, t} = this.props let message = "" @@ -99,7 +99,7 @@ export default class Receive extends React.Component { @@ -107,3 +107,4 @@ export default class Receive extends React.Component { ) } } +export default withTranslation()(Receive) \ No newline at end of file diff --git a/src/components/Receive.js b/src/components/Receive.js index eaadffc52..d11f320e9 100644 --- a/src/components/Receive.js +++ b/src/components/Receive.js @@ -2,8 +2,8 @@ import React from 'react'; import {CopyToClipboard} from "react-copy-to-clipboard"; +import { Trans, withTranslation } from 'react-i18next'; import RecentTransactions from './RecentTransactions'; -import i18n from '../i18n'; import getConfig from "../config"; import { Flex, @@ -14,7 +14,7 @@ import { const CONFIG = getConfig(); -export default class Receive extends React.Component { +class Receive extends React.Component { render() { let { @@ -30,7 +30,7 @@ export default class Receive extends React.Component {
{ - changeAlert({type: 'success', message: i18n.t('receive.address_copied')}) + changeAlert({type: 'success', message: this.props.t('receive.address_copied')}) }}> @@ -42,9 +42,11 @@ export default class Receive extends React.Component { {this.props.goBack()}}> - {i18n.t('cancel')} + {this.props.t('cancel')}
@@ -70,3 +72,5 @@ export default class Receive extends React.Component { ) } } + +export default withTranslation()(Receive); \ No newline at end of file diff --git a/src/components/RequestFunds.js b/src/components/RequestFunds.js index 157fd7d03..d9e4f8abe 100644 --- a/src/components/RequestFunds.js +++ b/src/components/RequestFunds.js @@ -1,6 +1,6 @@ import React from 'react'; import {CopyToClipboard} from "react-copy-to-clipboard"; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import RecentTransactions from './RecentTransactions'; import { Flex, @@ -12,7 +12,7 @@ import { import { PrimaryButton } from "./Buttons"; import { getStoredValue } from "../services/localStorage"; -export default class RequestFunds extends React.Component { +class RequestFunds extends React.Component { constructor(props) { super(props); @@ -46,13 +46,7 @@ export default class RequestFunds extends React.Component { render() { let { canRequest, message, amount, requested } = this.state; - let { - currencyDisplay, - view, - buttonStyle, - address, - changeView, - } = this.props + let {currencyDisplay,view,buttonStyle,ERC20TOKEN,address, changeView, t} = this.props if(requested){ let url = window.location.protocol+"//"+window.location.hostname @@ -109,7 +103,7 @@ export default class RequestFunds extends React.Component { }else{ return (
- + - + - {i18n.t('request_funds.button')} + {t('request_funds.button')}
) @@ -143,3 +137,5 @@ export default class RequestFunds extends React.Component { } } + +export default withTranslation()(RequestFunds) \ No newline at end of file diff --git a/src/components/SendByScan.js b/src/components/SendByScan.js index c77519d5e..996103efc 100644 --- a/src/components/SendByScan.js +++ b/src/components/SendByScan.js @@ -3,7 +3,7 @@ import QrReader from "react-qr-reader"; import FileReaderInput from 'react-file-reader-input'; import qrimage from '../assets/qrcode.png'; import RNMessageChannel from 'react-native-webview-messaging'; -import i18n from "../i18n"; +import { withTranslation } from 'react-i18next'; import Web3 from 'web3'; function base64ToBitmap(base64) { @@ -197,7 +197,7 @@ class SendByScan extends Component { }) } render() { - + let { t } = this.props let displayedImage = "" if(this.state.imageData){ displayedImage = ( @@ -230,7 +230,7 @@ class SendByScan extends Component {
-
{i18n.t('send_by_scan.try_again')}
+
{t('send_by_scan.try_again')}
@@ -264,11 +264,11 @@ class SendByScan extends Component {
-
{i18n.t('send_by_scan.capture')}
+
{t('send_by_scan.capture')}
@@ -300,4 +300,4 @@ class SendByScan extends Component { } } -export default SendByScan; +export default withTranslation()(SendByScan); diff --git a/src/components/SendToAddress.js b/src/components/SendToAddress.js index f242ce5eb..a13aac604 100644 --- a/src/components/SendToAddress.js +++ b/src/components/SendToAddress.js @@ -2,8 +2,8 @@ import React from 'react'; import cookie from 'react-cookies' import {CopyToClipboard} from "react-copy-to-clipboard"; import Blockies from 'react-blockies'; -import { scroller } from 'react-scroll' -import i18n from '../i18n'; +import { scroller } from 'react-scroll'; +import { withTranslation } from 'react-i18next'; import queryString from 'query-string'; import { Box, @@ -14,7 +14,7 @@ import { PrimaryButton, BorderButton } from "./Buttons"; import InputInfo from "./InputInfo"; import { getStoredValue } from "../services/localStorage"; -export default class SendToAddress extends React.Component { +class SendToAddress extends React.Component { constructor(props) { super(props); @@ -237,7 +237,7 @@ export default class SendToAddress extends React.Component { }) } }else{ - this.props.changeAlert({type: 'warning', message: i18n.t('send_to_address.error')}) + this.props.changeAlert({type: 'warning', message: this.props.t('send_to_address.error')}) } }; @@ -247,6 +247,8 @@ export default class SendToAddress extends React.Component { toAddress } = this.state; + let { t } = this.props; + /*let sendMessage = "" if(this.state.message){ sendMessage = ( @@ -292,7 +294,7 @@ export default class SendToAddress extends React.Component { return (
- + }
- + {amountInputDisplay} {/* TODO: i18n this with merging PR #195 */ this.state.currencyWarning ? ( @@ -355,3 +357,4 @@ export default class SendToAddress extends React.Component { ) } } +export default withTranslation()(SendToAddress); \ No newline at end of file diff --git a/src/components/Share.js b/src/components/Share.js index c3bea204c..04488c60d 100644 --- a/src/components/Share.js +++ b/src/components/Share.js @@ -1,6 +1,6 @@ import React from 'react'; import { CopyToClipboard } from "react-copy-to-clipboard"; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import { Flex, Box, @@ -8,18 +8,19 @@ import { QR as QRCode } from 'rimble-ui' -export default class Receive extends React.Component { +class Receive extends React.Component { render() { let { changeAlert, - url + url, + t } = this.props return (
{ - changeAlert({type: 'success', message: i18n.t('share.copied')}) + changeAlert({type: 'success', message: t('share.copied')}) }}> @@ -34,3 +35,5 @@ export default class Receive extends React.Component { ) } } + +export default withTranslation()(Receive) diff --git a/src/components/WithdrawFromPrivate.js b/src/components/WithdrawFromPrivate.js index 2d3442cee..283738658 100644 --- a/src/components/WithdrawFromPrivate.js +++ b/src/components/WithdrawFromPrivate.js @@ -2,7 +2,7 @@ import React from 'react'; import Web3 from 'web3'; import { Scaler } from "dapparatus"; import Blockies from 'react-blockies'; -import i18n from '../i18n'; +import { withTranslation } from 'react-i18next'; import { Box, Field, @@ -16,7 +16,7 @@ import { PrimaryButton } from "./Buttons"; // TODO: Can this be state of SendToAddress? let pollInterval -export default class SendToAddress extends React.Component { +class SendToAddress extends React.Component { constructor(props) { super(props); @@ -110,13 +110,13 @@ export default class SendToAddress extends React.Component { message: 'Withdrawn!' }); }else{ - this.props.changeAlert({type: 'warning', message: i18n.t('withdraw_from_private.error')}) + this.props.changeAlert({type: 'warning', message: this.props.t('withdraw_from_private.error')}) } }; render() { let { canWithdraw, fromAddress } = this.state; - let { currencyDisplay } = this.props; + let { currencyDisplay, t } = this.props; let products = [] for(let p in this.props.products){ @@ -169,42 +169,43 @@ export default class SendToAddress extends React.Component { return (
- +
+
+
+ + +
{currencyDisplay(this.state.fromBalance)} - - - - - - {t('withdraw_from_private.amount')} +
+ this.updateState('amount', event.target.value)} /> +
+ {products} +
+ this.updateState('amount', event.target.value)} - /> - - {products} - - - {i18n.t('withdraw_from_private.withdraw')} - + disabled={!canWithdraw} + onClick={this.withdraw}> + {t('withdraw_from_private.withdraw')} + +
) } } +export default withTranslation()(SendToAddress) \ No newline at end of file diff --git a/src/i18n/index.js b/src/i18n/index.js index 49af2ce9d..28148f1c3 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -1,15 +1,14 @@ -import i18next from "i18next"; +import i18n from "i18next"; import LanguageDetector from "i18next-browser-languagedetector"; import { fr, en, es, ca, de, ro, he, ru, pt, ja } from "./locales"; +import { initReactI18next } from 'react-i18next'; -const i18n = i18next; const options = { interpolation: { escapeValue: false // not needed for react!! }, debug: true, - resources: { fr: { common: fr.fr @@ -53,12 +52,13 @@ const options = { wait: false, bindI18n: "languageChanged loaded", bindStore: "added removed", - nsMode: "default" + nsMode: "default", + transSupportBasicHtmlNodes: true, } }; -i18next.use(LanguageDetector).init(options); -i18next.changeLanguage(navigator.language, (err, t) => { +i18n.use(LanguageDetector).use(initReactI18next).init(options); +i18n.changeLanguage(navigator.language, (err, t) => { if (err) return console.log("Something went wrong during loading"); }); diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index d49bbf4d6..11ad2ed90 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -67,7 +67,8 @@ "exchange": "Exchange" }, "receive": { - "address_copied": "Address copied to clipboard" + "address_copied": "Address copied to clipboard", + "view_link": "<0>View on LeapDAO Testnet Explorer" }, "history": { "metamask_error": "Encrypted messaging not available with MetaMask", @@ -152,7 +153,8 @@ "errors": { "bity_connection": "There was a problem connecting to our exchange provider bity.com. Please try again later.", "ethgasstation_connection": "There was a problem getting the latest gas prices. Please try sending your transaction later." - } + }, + "heading": "Transfer your ether directly to your bank account with just one click using <1>bity.com, the secure swiss crypto gateway. No KYC is required within bity.com's 5000 CHF (~4500 EUR) annual limit." } } }