Add payment method translations

frontend/src/components/BottomBar.js

@@ -577,10 +577,10 @@ bottomBarDesktop =()=>{
     )
 }
     handleChangeLang=(e)=>{
-        const { i18n} = this.props;
-        console.log(i18n)
+        const { i18n } = this.props;
         i18n.changeLanguage(e.target.value)
     }
+
     LangSelect = () => {
         const { i18n} = this.props;
         return(

frontend/src/components/PaymentText.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { withTranslation, Trans} from "react-i18next";
 import PaymentIcon from './PaymentIcons'
 import {Tooltip} from "@mui/material"
 
@@ -46,13 +47,14 @@ const someMethods = [
     {name: "WBTC",icon:'wbtc'},
   ];
 
-export default class PaymentText extends Component {
+class PaymentText extends Component {
     constructor(props) {
       super(props);
     }
     
 
     parseText(){
+        const { t } = this.props;
         var rows = [];
         var custom_methods = this.props.text;
         // Adds icons for each PaymentMethod that matches
@@ -60,7 +62,7 @@ export default class PaymentText extends Component {
             if(this.props.text.includes(method.name)){
                 custom_methods = custom_methods.replace(method.name,'')
                 rows.push(
-                    <Tooltip placement="top" enterTouchDelay="0" title={method.name} >
+                    <Tooltip placement="top" enterTouchDelay="0" title={t(method.name)}>
                         <div style={{display: 'inline-block', width: this.props.size+2, height: this.props.size}}>
                             <PaymentIcon width={this.props.size} height={this.props.size} icon={method.icon}/>
                         </div>
@@ -94,4 +96,6 @@ export default class PaymentText extends Component {
         </div>
       )
     }
-  };
+};
+
+export default withTranslation()(PaymentText);

frontend/src/components/autocompletePayments.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
@@ -189,6 +190,7 @@ const Listbox = styled('ul')(
 );
 
 export default function AutocompletePayments(props) {
+  const { t, i18n } = useTranslation();
   const {
     getRootProps,
     getInputLabelProps,
@@ -238,7 +240,7 @@ export default function AutocompletePayments(props) {
         <Label {...getInputLabelProps()} error={props.error}>{props.label}</Label>
         <InputWrapper ref={setAnchorEl} error={props.error} className={focused ? 'focused' : ''}>
           {value.map((option, index) => (
-            <StyledTag label={option.name} icon={option.icon} {...getTagProps({ index })} />
+            <StyledTag label={t(option.name)} icon={option.icon} {...getTagProps({ index })} />
           ))}
           <input {...getInputProps()} value={val}/>
         </InputWrapper>
@@ -254,7 +256,7 @@ export default function AutocompletePayments(props) {
                   <div style={{position:'relative', right: '4px', top:'4px'}}>
                     <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
                   </div>
-                  {option.name}
+                  {t(option.name)}
               </Button>
               <div style={{position:'relative', top: '5px'}}><CheckIcon/></div>
             </li>

frontend/src/components/i18n.js

@@ -23,7 +23,7 @@ i18n
   },
   
   fallbackLng: "en",
-  debug: true,
+  debug: false,
 
   // have a common namespace used around the full app
   ns: ["translations"],

frontend/src/locales/de.json

@@ -65,6 +65,15 @@
     "Must be less than {{maxSats}": "Must be less than {{maxSats}}",
     "Must be more than {{minSats}}": "Must be more than {{minSats}}",
 
+    
+    "PAYMENT METHODS - autocompletePayments.js": "Payment method strings",
+    "not specified":"Not specified",
+    "Instant SEPA":"Instant SEPA",
+    "Amazon GiftCard":"Amazon GiftCard",
+    "Google Play Gift Code":"Google Play Gift Code",
+    "Cash F2F":"Cash F2F",
+    "On-Chain BTC":"On-Chain BTC",
+
 
     "BOOK PAGE - BookPage.js":"The Book Order page",
     "Seller":"Seller",

frontend/src/locales/en.json

@@ -65,6 +65,15 @@
     "Must be less than {{maxSats}": "Must be less than {{maxSats}}",
     "Must be more than {{minSats}}": "Must be more than {{minSats}}",
 
+    
+    "PAYMENT METHODS - autocompletePayments.js": "Payment method strings",
+    "not specified":"Not specified",
+    "Instant SEPA":"Instant SEPA",
+    "Amazon GiftCard":"Amazon GiftCard",
+    "Google Play Gift Code":"Google Play Gift Code",
+    "Cash F2F":"Cash F2F",
+    "On-Chain BTC":"On-Chain BTC",
+
 
     "BOOK PAGE - BookPage.js":"The Book Order page",
     "Seller":"Seller",
@@ -195,6 +204,7 @@
     "You asked for a collaborative cancellation":"You asked for a collaborative cancellation",
     "Invoice expired. You did not confirm publishing the order in time. Make a new order.":"Invoice expired. You did not confirm publishing the order in time. Make a new order.",
     "This order has been cancelled by the maker":"This order has been cancelled by the maker",
+    "Invoice expired. You did not confirm taking the order in time.":"Invoice expired. You did not confirm taking the order in time.",
     "Penalty lifted, good to go!":"Penalty lifted, good to go!",
     "You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s":"You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",
     "Too low":"Too low",

frontend/src/locales/es.json

@@ -66,6 +66,15 @@
     "Must be more than {{minSats}}": "Debe ser más de {{minSats}}",
 
 
+    "PAYMENT METHODS - autocompletePayments.js": "Payment method strings",
+    "not specified":"Sin especificar",
+    "Instant SEPA":"SEPA Instantánea",
+    "Amazon GiftCard":"Amazon Tarjeta Regalo",
+    "Google Play Gift Code":"Google Play Tarjeta Regalo",
+    "Cash F2F":"Efectivo en persona",
+    "On-Chain BTC":"On-Chain BTC",
+
+
     "BOOK PAGE - BookPage.js":"The Book Order page",
     "Seller":"Vendedor",
     "Buyer":"Comprador",
@@ -286,7 +295,7 @@
     "Confirm": "Confirmar",
     "🎉Trade finished!🥳": "🎉¡Intercambio finalizado!🥳",
     "rate_robosats": "¿Qué opinas de 🤖<1>RoboSats</1>⚡?",
-    "Thank you! RoboSats loves you too ❤️": "¡Muchas gracias! RoboSats te quiere también ❤️",
+    "Thank you! RoboSats loves you too ❤️": "¡Muchas gracias! RoboSats también te ❤️",
     "RoboSats gets better with more liquidity and users. Tell a bitcoiner friend about Robosats!": "RoboSats mejora con más liquidez y usuarios. ¡Cuéntale a un amigo bitcoiner sobre RoboSats!",
     "Thank you for using Robosats!": "¡Gracias por usar RoboSats!",
     "let_us_know_hot_to_improve": "Dinos cómo podría mejorar la plataforma (<1>Telegram</1> / <3>Github</3>)",
@@ -297,7 +306,7 @@
     "Lightning Routing Failed": "Fallo en el enrutamiento de Lightning",
     "Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ": "Tu factura ha expirado o se han hecho más de 3 intentos de pago. La cartera Muun no está recomendada. ",
     "Check the list of compatible wallets": "Mira la lista de carteras compatibles",
-    "RoboSats will try to pay your invoice 3 times every 5 minutes. If it keeps failing, you will be able to submit a new invoice. Check whether you have enough inbound liquidity. Remember that lightning nodes must be online in order to receive payments.": "RoboSats intentará pagar tu factura 3 veces cada 5 minutos. Si sigue fallando, podras presentar una nueva factura. Comprueba si tienes suficiente liquidez entrante. Recuerda que los nodos de Lightning tienen que estar en línea para poder recibir pagos.",
+    "RoboSats will try to pay your invoice 3 times every 5 minutes. If it keeps failing, you will be able to submit a new invoice. Check whether you have enough inbound liquidity. Remember that lightning nodes must be online in order to receive payments.": "RoboSats intentará pagar tu factura 3 veces cada 5 minutos. Si sigue fallando, podrás presentar una nueva factura. Comprueba si tienes suficiente liquidez entrante. Recuerda que los nodos de Lightning tienen que estar en línea para poder recibir pagos.",
     "Next attempt in": "Próximo intento en",
     "Do you want to open a dispute?": "¿Quieres abrir una disputa?",
     "The RoboSats staff will examine the statements and evidence provided. You need to build a complete case, as the staff cannot read the chat. It is best to provide a burner contact method with your statement. The satoshis in the trade escrow will be sent to the dispute winner, while the dispute loser will lose the bond.": "El equipo de RoboSats examinará las declaraciones y evidencias presentadas. Como el equipo no puede leer el chat, necesitas escribir una declaració completa y exhaustiva. Es mejor dar un método de contacto de usar y tirar con tu declaración. Los Sats del colateral serán enviados al ganador de la disputa, mientras que el perdedor perderá la fianza.",

frontend/src/locales/ru.json

@@ -65,6 +65,15 @@
     "Must be less than {{maxSats}": "Must be less than {{maxSats}}",
     "Must be more than {{minSats}}": "Must be more than {{minSats}}",
 
+    
+    "PAYMENT METHODS - autocompletePayments.js": "Payment method strings",
+    "not specified":"Not specified",
+    "Instant SEPA":"Instant SEPA",
+    "Amazon GiftCard":"Amazon GiftCard",
+    "Google Play Gift Code":"Google Play Gift Code",
+    "Cash F2F":"Cash F2F",
+    "On-Chain BTC":"On-Chain BTC",
+
 
     "BOOK PAGE - BookPage.js":"The Book Order page",
     "Seller":"Seller",

frontend/src/locales/zh.json

@@ -65,6 +65,15 @@
     "Must be less than {{maxSats}": "Must be less than {{maxSats}}",
     "Must be more than {{minSats}}": "Must be more than {{minSats}}",
 
+    
+    "PAYMENT METHODS - autocompletePayments.js": "Payment method strings",
+    "not specified":"Not specified",
+    "Instant SEPA":"Instant SEPA",
+    "Amazon GiftCard":"Amazon GiftCard",
+    "Google Play Gift Code":"Google Play Gift Code",
+    "Cash F2F":"Cash F2F",
+    "On-Chain BTC":"On-Chain BTC",
+
 
     "BOOK PAGE - BookPage.js":"The Book Order page",
     "Seller":"Seller",