mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-15 03:46:24 +00:00
Add XHR i18n backend, include currencies_dict in APP
This commit is contained in:
parent
1061403487
commit
4c2ec14a2f
@ -27,7 +27,7 @@ services:
|
|||||||
build: ./frontend
|
build: ./frontend
|
||||||
container_name: npm-dev
|
container_name: npm-dev
|
||||||
restart: always
|
restart: always
|
||||||
command: npm run dev
|
command: npm run build
|
||||||
volumes:
|
volumes:
|
||||||
- ./frontend:/usr/src/frontend
|
- ./frontend:/usr/src/frontend
|
||||||
|
|
||||||
|
@ -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 { Badge, Tooltip, Paper, Button, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, ListItemText, ListItemAvatar, IconButton} from "@mui/material";
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { DataGrid } from '@mui/x-data-grid';
|
import { DataGrid } from '@mui/x-data-grid';
|
||||||
|
import currencyDict from '../../static/assets/currencies.json';
|
||||||
|
|
||||||
import MediaQuery from 'react-responsive'
|
import MediaQuery from 'react-responsive'
|
||||||
import Image from 'material-ui-image'
|
import Image from 'material-ui-image'
|
||||||
import getFlags from './getFlags'
|
import getFlags from './getFlags'
|
||||||
@ -12,11 +14,9 @@ export default class BookPage extends Component {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
orders: new Array({id:0,}),
|
orders: new Array({id:0,}),
|
||||||
currencies_dict: {"0":"ANY"},
|
|
||||||
loading: true,
|
loading: true,
|
||||||
pageSize: 6,
|
pageSize: 6,
|
||||||
};
|
};
|
||||||
this.getCurrencyDict()
|
|
||||||
this.getOrderDetails(this.props.type, this.props.currency)
|
this.getOrderDetails(this.props.type, this.props.currency)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -51,18 +51,9 @@ export default class BookPage extends Component {
|
|||||||
this.getOrderDetails(this.props.type, currency);
|
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){
|
getCurrencyCode(val){
|
||||||
if (val){
|
if (val){
|
||||||
return val == 0 ? 'ANY' : this.state.currencies_dict[val.toString()]
|
return val == 0 ? 'ANY' : currencyDict[val.toString()]
|
||||||
}else{
|
}else{
|
||||||
return 'ANY'
|
return 'ANY'
|
||||||
}
|
}
|
||||||
@ -300,7 +291,7 @@ export default class BookPage extends Component {
|
|||||||
onChange={this.handleCurrencyChange}
|
onChange={this.handleCurrencyChange}
|
||||||
> <MenuItem value={0}>🌍 ANY</MenuItem>
|
> <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> )
|
.map( ([key, value]) => <MenuItem value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
|
||||||
}
|
}
|
||||||
</Select>
|
</Select>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React, { Component } from 'react'
|
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 {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 MediaQuery from 'react-responsive'
|
||||||
import { Link as LinkRouter } from 'react-router-dom'
|
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 EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||||
import AmbossIcon from "./icons/AmbossIcon";
|
import AmbossIcon from "./icons/AmbossIcon";
|
||||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||||
|
import { t } from 'i18next';
|
||||||
|
|
||||||
// pretty numbers
|
// pretty numbers
|
||||||
function pn(x) {
|
function pn(x) {
|
||||||
@ -54,7 +56,7 @@ function getCookie(name) {
|
|||||||
return cookieValue;
|
return cookieValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class BottomBar extends Component {
|
class BottomBar extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
@ -581,13 +583,16 @@ bottomBarDesktop =()=>{
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
handleChangeLang=(e)=>{
|
handleChangeLang=(e)=>{
|
||||||
this.props.changeLang(e.target.value)
|
const { i18n} = this.props;
|
||||||
|
console.log(i18n)
|
||||||
|
i18n.changeLanguage(e.target.value)
|
||||||
}
|
}
|
||||||
LangSelect = () => {
|
LangSelect = () => {
|
||||||
|
const { i18n} = this.props;
|
||||||
return(
|
return(
|
||||||
<Select
|
<Select
|
||||||
size = 'small'
|
size = 'small'
|
||||||
defaultValue={'en'}
|
value = {i18n.resolvedLanguage}
|
||||||
inputProps={{
|
inputProps={{
|
||||||
style: {textAlign:"center"}
|
style: {textAlign:"center"}
|
||||||
}}
|
}}
|
||||||
@ -825,3 +830,4 @@ bottomBarPhone =()=>{
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
export default withTranslation()(BottomBar);
|
@ -8,6 +8,7 @@ import getFlags from './getFlags';
|
|||||||
import AutocompletePayments from './autocompletePayments';
|
import AutocompletePayments from './autocompletePayments';
|
||||||
import LockIcon from '@mui/icons-material/Lock';
|
import LockIcon from '@mui/icons-material/Lock';
|
||||||
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
import HourglassTopIcon from '@mui/icons-material/HourglassTop';
|
||||||
|
import currencyDict from '../../static/assets/currencies.json';
|
||||||
|
|
||||||
function getCookie(name) {
|
function getCookie(name) {
|
||||||
let cookieValue = null;
|
let cookieValue = null;
|
||||||
@ -57,7 +58,6 @@ export default class MakerPage extends Component {
|
|||||||
payment_method: this.defaultPaymentMethod,
|
payment_method: this.defaultPaymentMethod,
|
||||||
premium: 0,
|
premium: 0,
|
||||||
satoshis: null,
|
satoshis: null,
|
||||||
currencies_dict: {"1":"USD"},
|
|
||||||
showAdvanced: false,
|
showAdvanced: false,
|
||||||
allowBondless: false,
|
allowBondless: false,
|
||||||
publicExpiryTime: new Date(0, 0, 0, 23, 59),
|
publicExpiryTime: new Date(0, 0, 0, 23, 59),
|
||||||
@ -69,7 +69,6 @@ export default class MakerPage extends Component {
|
|||||||
maxAmount: null,
|
maxAmount: null,
|
||||||
loadingLimits: false,
|
loadingLimits: false,
|
||||||
}
|
}
|
||||||
this.getCurrencyDict()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getLimits() {
|
getLimits() {
|
||||||
@ -240,18 +239,8 @@ export default class MakerPage extends Component {
|
|||||||
& (data.id ? this.props.history.push('/order/' + data.id) :"")));
|
& (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){
|
getCurrencyCode(val){
|
||||||
return this.state.currencies_dict[val.toString()]
|
return currencyDict[val.toString()]
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInputBondSizeChange = (event) => {
|
handleInputBondSizeChange = (event) => {
|
||||||
@ -314,7 +303,7 @@ export default class MakerPage extends Component {
|
|||||||
style: {textAlign:"center"}
|
style: {textAlign:"center"}
|
||||||
}}
|
}}
|
||||||
onChange={this.handleCurrencyChange}>
|
onChange={this.handleCurrencyChange}>
|
||||||
{Object.entries(this.state.currencies_dict)
|
{Object.entries(currencyDict)
|
||||||
.map( ([key, value]) => <MenuItem value={parseInt(key)}>
|
.map( ([key, value]) => <MenuItem value={parseInt(key)}>
|
||||||
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
|
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
|
||||||
</MenuItem> )}
|
</MenuItem> )}
|
||||||
|
@ -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 {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 Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
|
||||||
import MediaQuery from 'react-responsive'
|
import MediaQuery from 'react-responsive'
|
||||||
|
import currencyDict from '../../static/assets/currencies.json';
|
||||||
|
|
||||||
import PaymentText from './PaymentText'
|
import PaymentText from './PaymentText'
|
||||||
import TradeBox from "./TradeBox";
|
import TradeBox from "./TradeBox";
|
||||||
@ -44,7 +45,6 @@ export default class OrderPage extends Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
is_explicit: false,
|
is_explicit: false,
|
||||||
delay: 60000, // Refresh every 60 seconds by default
|
delay: 60000, // Refresh every 60 seconds by default
|
||||||
currencies_dict: {"1":"USD"},
|
|
||||||
total_secs_exp: 300,
|
total_secs_exp: 300,
|
||||||
loading: true,
|
loading: true,
|
||||||
openCancel: false,
|
openCancel: false,
|
||||||
@ -53,7 +53,6 @@ export default class OrderPage extends Component {
|
|||||||
showContractBox: 1,
|
showContractBox: 1,
|
||||||
};
|
};
|
||||||
this.orderId = this.props.match.params.orderId;
|
this.orderId = this.props.match.params.orderId;
|
||||||
this.getCurrencyDict();
|
|
||||||
this.getOrderDetails();
|
this.getOrderDetails();
|
||||||
|
|
||||||
// Refresh delays according to Order status
|
// Refresh delays according to Order status
|
||||||
@ -274,7 +273,6 @@ export default class OrderPage extends Component {
|
|||||||
|
|
||||||
takeOrder=()=>{
|
takeOrder=()=>{
|
||||||
this.setState({loading:true})
|
this.setState({loading:true})
|
||||||
console.log(this.state.takeAmount)
|
|
||||||
const requestOptions = {
|
const requestOptions = {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
|
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
|
||||||
@ -288,22 +286,13 @@ export default class OrderPage extends Component {
|
|||||||
.then((data) => this.completeSetState(data));
|
.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.
|
// set delay to the one matching the order status. If null order status, delay goes to 9999999.
|
||||||
setDelay = (status)=>{
|
setDelay = (status)=>{
|
||||||
return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
|
return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
getCurrencyCode(val){
|
getCurrencyCode(val){
|
||||||
let code = val ? this.state.currencies_dict[val.toString()] : ""
|
let code = val ? currencyDict[val.toString()] : ""
|
||||||
return code
|
return code
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,17 +1,16 @@
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
|
import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import Image from 'material-ui-image'
|
import Image from 'material-ui-image'
|
||||||
import InfoDialog from './InfoDialog'
|
import InfoDialog from './InfoDialog'
|
||||||
|
|
||||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||||
import CasinoIcon from '@mui/icons-material/Casino';
|
import CasinoIcon from '@mui/icons-material/Casino';
|
||||||
import ContentCopy from "@mui/icons-material/ContentCopy";
|
import ContentCopy from "@mui/icons-material/ContentCopy";
|
||||||
import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
|
import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
|
||||||
|
|
||||||
import BoltIcon from '@mui/icons-material/Bolt';
|
import BoltIcon from '@mui/icons-material/Bolt';
|
||||||
|
|
||||||
import { withTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
function getCookie(name) {
|
function getCookie(name) {
|
||||||
let cookieValue = null;
|
let cookieValue = null;
|
||||||
if (document.cookie && document.cookie !== '') {
|
if (document.cookie && document.cookie !== '') {
|
||||||
@ -151,7 +150,7 @@ class UserGenPage extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { t, i18n} = this.props;
|
||||||
return (
|
return (
|
||||||
<Grid container spacing={1}>
|
<Grid container spacing={1}>
|
||||||
<Grid item>
|
<Grid item>
|
||||||
@ -265,7 +264,7 @@ class UserGenPage extends Component {
|
|||||||
<Grid item xs={0.8}/>
|
<Grid item xs={0.8}/>
|
||||||
<Grid item xs={7.5} align="right">
|
<Grid item xs={7.5} align="right">
|
||||||
<Typography component="h5" variant="h5">
|
<Typography component="h5" variant="h5">
|
||||||
Simple and Private LN P2P Exchange
|
{t("Simple and Private LN P2P Exchange")}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={2.5} align="left">
|
<Grid item xs={2.5} align="left">
|
||||||
|
@ -1,39 +1,25 @@
|
|||||||
import i18n from "i18next";
|
import i18n from "i18next";
|
||||||
import LanguageDetector from "i18next-browser-languagedetector";
|
import LanguageDetector from "i18next-browser-languagedetector";
|
||||||
import { initReactI18next } from "react-i18next";
|
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
|
i18n
|
||||||
|
.use(XHR)
|
||||||
.use(LanguageDetector)
|
.use(LanguageDetector)
|
||||||
.use(initReactI18next)
|
.use(initReactI18next)
|
||||||
.init({
|
.init({
|
||||||
// we init with resources
|
|
||||||
resources: {
|
resources: {
|
||||||
en: {
|
en: {
|
||||||
translations: {
|
translations: translationEN
|
||||||
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"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
es: {
|
es: {
|
||||||
translations: {
|
translations: translationES
|
||||||
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": "他のパッケージを使用する柔軟性"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
ru: {
|
ru: {
|
||||||
@ -97,7 +83,8 @@ i18n
|
|||||||
},
|
},
|
||||||
|
|
||||||
react: {
|
react: {
|
||||||
wait: true
|
wait: true,
|
||||||
|
useSuspense: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
4
frontend/src/components/locales/cn/translation.json
Normal file
4
frontend/src/components/locales/cn/translation.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"UserGenPage": "User Generation Page and Landing Page",
|
||||||
|
"Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
|
||||||
|
}
|
4
frontend/src/components/locales/de/translation.json
Normal file
4
frontend/src/components/locales/de/translation.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"UserGenPage": "User Generation Page and Landing Page",
|
||||||
|
"Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
|
||||||
|
}
|
4
frontend/src/components/locales/en/translation.json
Normal file
4
frontend/src/components/locales/en/translation.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"UserGenPage": "User Generation Page and Landing Page",
|
||||||
|
"Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
|
||||||
|
}
|
10
frontend/src/components/locales/es/translation.json
Normal file
10
frontend/src/components/locales/es/translation.json
Normal file
@ -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": "他のパッケージを使用する柔軟性"
|
||||||
|
}
|
4
frontend/src/components/locales/ru/translation.json
Normal file
4
frontend/src/components/locales/ru/translation.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"UserGenPage": "User Generation Page and Landing Page",
|
||||||
|
"Simple and Private LN P2P Exchange": "Simple and Private LN P2P Exchange"
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user