Add XHR i18n backend, include currencies_dict in APP

docker-compose.yml

@@ -27,7 +27,7 @@ services:
     build: ./frontend
     container_name: npm-dev
     restart: always
-    command: npm run dev
+    command: npm run build
     volumes:
       - ./frontend:/usr/src/frontend
 

frontend/src/components/BookPage.js

@@ -2,6 +2,8 @@ import React, { Component , useState } from "react";
 import { Badge, Tooltip, Paper, Button, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, ListItemText, ListItemAvatar, IconButton} from "@mui/material";
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
+import currencyDict from '../../static/assets/currencies.json';
+
 import MediaQuery from 'react-responsive'
 import Image from 'material-ui-image'
 import getFlags from './getFlags'
@@ -12,11 +14,9 @@ export default class BookPage extends Component {
     super(props);
     this.state = {
       orders: new Array({id:0,}),
-      currencies_dict: {"0":"ANY"},
       loading: true,
       pageSize: 6,
     };
-    this.getCurrencyDict()
     this.getOrderDetails(this.props.type, this.props.currency)
   }
 
@@ -50,19 +50,10 @@ export default class BookPage extends Component {
     })
     this.getOrderDetails(this.props.type, currency);
   }
-  
-  getCurrencyDict() {
-    fetch('/static/assets/currencies.json')
-      .then((response) => response.json())
-      .then((data) => 
-      this.setState({
-        currencies_dict: data
-      }));
-  }
 
   getCurrencyCode(val){
     if (val){
-      return val == 0 ? 'ANY' : this.state.currencies_dict[val.toString()]
+      return val == 0 ? 'ANY' : currencyDict[val.toString()]
     }else{
       return 'ANY'
     }
@@ -300,7 +291,7 @@ export default class BookPage extends Component {
                   onChange={this.handleCurrencyChange}
               >     <MenuItem value={0}>🌍 ANY</MenuItem>
                     {
-                      Object.entries(this.state.currencies_dict)
+                      Object.entries(currencyDict)
                       .map( ([key, value]) => <MenuItem value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
                     }
               </Select>

frontend/src/components/BottomBar.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { withTranslation } from "react-i18next";
 import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 import MediaQuery from 'react-responsive'
 import { Link as LinkRouter } from 'react-router-dom'
@@ -26,6 +27,7 @@ import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
+import { t } from 'i18next';
 
 // pretty numbers
 function pn(x) {
@@ -54,7 +56,7 @@ function getCookie(name) {
     return cookieValue;
   }
 
-export default class BottomBar extends Component {
+class BottomBar extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -581,13 +583,16 @@ bottomBarDesktop =()=>{
     )
 }
     handleChangeLang=(e)=>{
-        this.props.changeLang(e.target.value)
+        const { i18n} = this.props;
+        console.log(i18n)
+        i18n.changeLanguage(e.target.value)
     }
     LangSelect = () => {
+        const { i18n} = this.props;
         return(
             <Select 
                 size = 'small'
-                defaultValue={'en'}
+                value = {i18n.resolvedLanguage}
                 inputProps={{
                     style: {textAlign:"center"}
                 }}
@@ -825,3 +830,4 @@ bottomBarPhone =()=>{
         )
     }
 }
+export default withTranslation()(BottomBar);

frontend/src/components/MakerPage.js

@@ -8,6 +8,7 @@ import getFlags from './getFlags';
 import AutocompletePayments from './autocompletePayments';
 import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
+import currencyDict from '../../static/assets/currencies.json';
 
 function getCookie(name) {
     let cookieValue = null;
@@ -57,7 +58,6 @@ export default class MakerPage extends Component {
         payment_method: this.defaultPaymentMethod,
         premium: 0,
         satoshis: null,
-        currencies_dict: {"1":"USD"},
         showAdvanced: false,
         allowBondless: false,
         publicExpiryTime: new Date(0, 0, 0, 23, 59),
@@ -69,7 +69,6 @@ export default class MakerPage extends Component {
         maxAmount: null,
         loadingLimits: false,
     }
-    this.getCurrencyDict()
   }
 
   getLimits() {
@@ -240,18 +239,8 @@ export default class MakerPage extends Component {
              & (data.id ? this.props.history.push('/order/' + data.id) :"")));
     }
 
-    getCurrencyDict() {
-        fetch('/static/assets/currencies.json')
-          .then((response) => response.json())
-          .then((data) => 
-          this.setState({
-            currencies_dict: data
-          }));
-    
-      }
-
     getCurrencyCode(val){
-        return this.state.currencies_dict[val.toString()]
+        return currencyDict[val.toString()]
     }
 
     handleInputBondSizeChange = (event) => {
@@ -314,7 +303,7 @@ export default class MakerPage extends Component {
                                     style: {textAlign:"center"}
                                 }}
                                 onChange={this.handleCurrencyChange}>
-                                    {Object.entries(this.state.currencies_dict)
+                                    {Object.entries(currencyDict)
                                     .map( ([key, value]) => <MenuItem value={parseInt(key)}>
                                         <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
                                         </MenuItem> )}

frontend/src/components/OrderPage.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import {TextField,Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
 import MediaQuery from 'react-responsive'
+import currencyDict from '../../static/assets/currencies.json';
 
 import PaymentText from './PaymentText'
 import TradeBox from "./TradeBox";
@@ -44,7 +45,6 @@ export default class OrderPage extends Component {
     this.state = {
         is_explicit: false,
         delay: 60000, // Refresh every 60 seconds by default
-        currencies_dict: {"1":"USD"},
         total_secs_exp: 300,
         loading: true,
         openCancel: false,
@@ -53,7 +53,6 @@ export default class OrderPage extends Component {
         showContractBox: 1,
     };
     this.orderId = this.props.match.params.orderId;
-    this.getCurrencyDict();
     this.getOrderDetails();
 
     // Refresh delays according to Order status
@@ -274,7 +273,6 @@ export default class OrderPage extends Component {
 
   takeOrder=()=>{
     this.setState({loading:true})
-    console.log(this.state.takeAmount)
     const requestOptions = {
         method: 'POST',
         headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
@@ -287,15 +285,6 @@ export default class OrderPage extends Component {
       .then((response) => response.json())
       .then((data) => this.completeSetState(data));
   }
-
-  getCurrencyDict() {
-    fetch('/static/assets/currencies.json')
-      .then((response) => response.json())
-      .then((data) => 
-      this.setState({
-        currencies_dict: data
-      }));
-  }
   
   // set delay to the one matching the order status. If null order status, delay goes to 9999999.
   setDelay = (status)=>{
@@ -303,7 +292,7 @@ export default class OrderPage extends Component {
   }
 
   getCurrencyCode(val){
-    let code = val ? this.state.currencies_dict[val.toString()] : "" 
+    let code = val ? currencyDict[val.toString()] : "" 
     return code
   }
 

frontend/src/components/UserGenPage.js

@@ -1,17 +1,16 @@
 import React, { Component } from "react";
+import { withTranslation } from "react-i18next";
 import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
 import InfoDialog from './InfoDialog'
+
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CasinoIcon from '@mui/icons-material/Casino';
 import ContentCopy from "@mui/icons-material/ContentCopy";
 import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
-
 import BoltIcon from '@mui/icons-material/Bolt';
 
-import { withTranslation } from "react-i18next";
-
 function getCookie(name) {
   let cookieValue = null;
   if (document.cookie && document.cookie !== '') {
@@ -151,7 +150,7 @@ class UserGenPage extends Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, i18n} = this.props;
     return (
       <Grid container spacing={1}>
         <Grid item>
@@ -265,7 +264,7 @@ class UserGenPage extends Component {
                 <Grid item xs={0.8}/>
                 <Grid item xs={7.5} align="right">
                   <Typography component="h5" variant="h5">
-                     Simple and Private LN P2P Exchange
+                     {t("Simple and Private LN P2P Exchange")}
                   </Typography>
                 </Grid>
                 <Grid item xs={2.5} align="left">

frontend/src/components/i18n.js

@@ -1,39 +1,25 @@
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
+import XHR from "i18next-xhr-backend";
+
+import translationEN from "./locales/en/translation.json";
+import translationES from "./locales/es/translation.json";
+import translationDE from "./locales/de/translation.json";
+import translationRU from "./locales/ru/translation.json";
+import translationCN from "./locales/cn/translation.json";
 
 i18n
+  .use(XHR)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-  // we init with resources
   resources: {
     en: {
-      translations: {
-        Your_avatar: "Avatar",
-        "This is your trading avatar":
-          "This is your trading avatar",
-        "Plugins to detect the user language":
-          "Plugins to detect the user language",
-        "Plugins to load translations": "Plugins to load translations",
-        "Optionally cache the translations":
-          "Optionally cache the translations",
-        Advantages: "Advantages",
-        "Flexibility to use other packages": "Flexibility to use other packages"
-      }
+      translations: translationEN
     },
     es: {
-    translations: {
-        Your_avatar: "Avatar",
-        "This is your trading avatar":
-            "Este es tu avatar para comprar y vender",
-        "Plugins to detect the user language":
-          "ユーザー言語を検出するためのプラグイン",
-        "Plugins to load translations": "翻訳をロードするためのプラグイン",
-        "Optionally cache the translations": "必要に応じて翻訳をキャッシュする",
-        Advantages: "利点",
-        "Flexibility to use other packages": "他のパッケージを使用する柔軟性"
-      }
+      translations: translationES
     },
 
     ru: {
@@ -97,7 +83,8 @@ i18n
   },
 
   react: {
-    wait: true
+    wait: true,
+    useSuspense: true
   }
 });
 

frontend/src/components/locales/cn/translation.json

@@ -0,0 +1,4 @@
+{
+    "UserGenPage": "User Generation Page and Landing Page",
+    "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
+}

frontend/src/components/locales/de/translation.json

@@ -0,0 +1,4 @@
+{
+    "UserGenPage": "User Generation Page and Landing Page",
+    "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
+}

frontend/src/components/locales/en/translation.json

@@ -0,0 +1,4 @@
+{
+    "UserGenPage": "User Generation Page and Landing Page",
+    "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
+}

frontend/src/components/locales/es/translation.json

@@ -0,0 +1,10 @@
+{
+    "UserGenPage": "User Generation Page and Landing Page",
+    "Simple and Private LN P2P Exchange":"Intercambio LN P2P Fácil y Privado",
+    "This is your trading avatar":"Este es tu avatar de compraventa",
+    "Plugins to detect the user language":"ユーザー言語を検出するためのプラグイン",
+    "Plugins to load translations": "翻訳をロードするためのプラグイン",
+    "Optionally cache the translations": "必要に応じて翻訳をキャッシュする",
+    "Advantages": "利点",
+    "Flexibility to use other packages": "他のパッケージを使用する柔軟性"
+  }

frontend/src/components/locales/ru/translation.json

@@ -0,0 +1,4 @@
+{
+    "UserGenPage": "User Generation Page and Landing Page",
+    "Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
+}