Fixes #90, Fixes #89, Fixes #88

frontend/src/components/BookPage.js

@@ -293,7 +293,7 @@ class BookPage extends Component {
                       style: {textAlign:"center"}
                   }}
                   onChange={this.handleCurrencyChange}
-              >     <MenuItem value={0}>{"🌍 "+t("ANY_currency")}</MenuItem>
+              >     <MenuItem value={0}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags('ANY')}{" "+t("ANY_currency")}</div></MenuItem>
                     {
                       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/InfoDialog.js

@@ -55,9 +55,9 @@ class InfoDialog extends Component {
 
             <p>{t("At no point, AnonymousAlice01 and BafflingBob02 have to entrust the bitcoin funds to each other. In case they have a conflict, RoboSats staff will help resolving the dispute.")} 
               {t("You can find a step-by-step description of the trade pipeline in ")}
-              <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>{t("How it works")}</Link>
+              <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>{t("How it works")}</Link>.
-              {t("You can also check the full guide in ")}
+              {" "+t("You can also check the full guide in ")}
-              <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>{t("How to use")}</Link></p>
+              <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>{t("How to use")}</Link>.</p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("What payment methods are accepted?")}</Typography>
@@ -86,7 +86,7 @@ class InfoDialog extends Component {
           <Typography component="body2" variant="body2">
             <p> {t("The buyer and the seller never have to trust each other. Some trust on RoboSats is needed since linking the seller's hold invoice and buyer payment is not atomic (yet). In addition, disputes are solved by the RoboSats staff.")}</p> 
             <p> {t("To be totally clear. Trust requirements are minimized. However, there is still one way RoboSats could run away with your satoshis: by not releasing the satoshis to the buyer. It could be argued that such move is not in RoboSats' interest as it would damage the reputation for a small payout. However, you should hesitate and only trade small quantities at a time. For large amounts use an onchain escrow service such as Bisq")}</p> 
-            <p> {t("You can build more trust on RoboSats by inspecting the source code.")} <Link href='https://github.com/reckless-satoshi/robosats'> {t("Project source code")} </Link> </p>
+            <p> {t("You can build more trust on RoboSats by inspecting the source code.")} <Link href='https://github.com/reckless-satoshi/robosats'> {t("Project source code")}</Link>. </p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("What happens if RoboSats suddenly disappears?")}</Typography>

frontend/src/components/PaymentText.js

@@ -8,6 +8,7 @@ const someMethods = [
     {name: "Zelle",icon:'zelle'},
     {name: "Strike",icon:'strike'},
     {name: "Rebellion",icon:'rebellion'},
+    {name: "Instant SEPA", icon:'sepa'},
     {name: "Interac e-Transfer",icon:'interac'},
     {name: "Wise",icon:'wise'},
     {name: "Venmo",icon:'venmo'},
@@ -64,9 +65,8 @@ export default class PaymentText extends Component {
         })
 
         // Adds a Custom icon if there are words that do not match
-        var chars_left = custom_methods.replace(' ','')
+        var chars_left = custom_methods.replace('   ','').replace('  ','').replace(' ','').replace(' ','').replace(' ','')
-        chars_left = chars_left.replace(' ','')
+        
-
         if(chars_left.length > 0){rows.push(
             <Tooltip placement="top" enterTouchDelay="0" title={this.props.verbose ? this.props.othersText: this.props.othersText+": "+ custom_methods} >
                 <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'-1px'}}>

frontend/src/components/UserGenPage.js

@@ -244,7 +244,7 @@ class UserGenPage extends Component {
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
               <Button disabled={this.state.loadingRobot} color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
-              <Button color='inherit' onClick={this.handleClickOpenInfo}>{t("Info")}</Button>
+              <Button color='inherit' style={{color: '#111111'}} onClick={this.handleClickOpenInfo}>{t("Info")}</Button>
               <this.InfoDialog/>
               <Button disabled={this.state.loadingRobot} color='secondary' to='/book/' component={Link}>{t("View Book")}</Button>
             </ButtonGroup>

frontend/src/components/autocompletePayments.js

@@ -285,6 +285,7 @@ var somePaymentMethods = [
   {name: "Zelle",icon:'zelle'},
   {name: "Strike",icon:'strike'},
   {name: "Rebellion",icon:'rebellion'},
+  {name: "Instant SEPA", icon:'sepa'},
   {name: "Interac e-Transfer",icon:'interac'},
   {name: "Wise",icon:'wise'},
   {name: "Venmo",icon:'venmo'},

frontend/src/components/getFlags.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import Flags from 'country-flag-icons/react/3x2'
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
+import GoldIcon from './icons/GoldIcon';
+import EarthIcon from './icons/EarthIcon'
 
 export default function getFlags(code){
     const props = {width:20,height:20}
@@ -66,7 +68,8 @@ export default function getFlags(code){
     if(code == 'VND') flag = <Flags.VN {...props}/>;
     if(code == 'XOF') flag = <Flags.SE {...props}/>;
     if(code == 'TWD') flag = <Flags.TW {...props}/>;
-    if(code == 'XAU') return '🟨';
+    if(code == 'ANY') flag = <EarthIcon {...props}/>;
-    if(code == 'BTC') return <SwapCallsIcon color="primary"/>;
+    if(code == 'XAU') flag = <GoldIcon {...props}/>;
+    if(code == 'BTC') flag = <SwapCallsIcon color="primary"/>;
     return <div style={{width:28, height: 20}}>{flag}</div>;
 };

frontend/src/components/i18n.js

@@ -35,7 +35,7 @@ i18n
     escapeValue: false,
     formatSeparator: ","
   },
-
+  
   react: {
     wait: true,
     useSuspense: false,

frontend/src/components/icons/EarthIcon.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import { SvgIcon } from "@mui/material"
+
+export default function EarthIcon(props) {
+    return (
+      <SvgIcon {...props} x="0px" y="0px" viewBox="0 0 440.45 440.45" >
+        <g id="XMLID_34_">
+          <g>
+            <path style={{fill:"#1EA6C6"}} d="M102.62,211.975c0.02,0.08,0.04,0.15,0.06,0.23c1.91,7.94,3.42,19.8,1.63,35.19
+              c-1.91,16.48,5.5,32.66,19.11,42.15l18.56,12.95c0,0-6.37,48.72,11.31,74.36v0.01C65.91,359.665,0,282.645,0,190.225
+              c0-53.81,22.35-102.41,58.27-137c-14.15,28.48-28.54,72.45-8.29,109.27c9.27,16.85,23.9,27.78,40.15,34.8
+              C96.36,199.975,101.02,205.395,102.62,211.975z"/>
+            <path style={{fill:"#1EA6C6"}} d="M190.23,0.005c41.46,0,79.82,13.26,111.07,35.79c0,0-16.37,25.11-15.71,50.17
+              c0.15,5.99,4.84,10.89,10.81,11.52c0.42,0.04,0.85,0.07,1.27,0.07c4.55,0,8.75-2.58,10.81-6.73c4.38-8.78,15.91-19.42,45.02,1.77
+              l0.01-0.01c2.17,3.61,4.22,7.3,6.14,11.07c0,0-10.16,2.28-23.77,0.6c-3.78-0.47-7.6,0.45-10.69,2.67
+              c-2.15,1.55-4.62,3.78-7.36,6.53c-13.89,13.96-16.19,43-16.19,43c-0.27,6.06,0,12.76,0.97,20.16
+              c2.17,16.44,17.24,28.04,33.65,25.64c0.24-0.03,0.48-0.07,0.72-0.1c11.84-1.84,22.65,7.09,23.33,19.05
+              c0.61,10.79,2.91,23.02,8.98,33.34h0.01c-26.37,73.4-96.59,125.9-179.07,125.9c-12.64,0-24.99-1.23-36.94-3.58v-0.01
+              c0,0,5.35-5.01,19.39-19.59l29.58-31.37c8.54-9.38,17.06-19.07,24.47-28.12c13.17-16.09,9.01-40.13-8.76-50.92
+              c-16.59-10.07-36.14-23.07-48.73-35.16c-6.33-6.07-15.04-8.98-23.76-8.04c-11.2,1.21-27.07,3.65-42.8,8.55
+              c2.7-26.79-43.7-50.71-31.7-71.71c6.5-11.39,17.42-11.6,26.05-9.41c6.87,1.74,14.08-0.76,18.54-6.27
+              c10.56-13.03,33.63-25.24,50.49-32.96c11.05-5.05,14.62-18.98,7.36-28.71c-22.27-29.9-53.82-49.59-53.82-49.59
+              C141.44,4.815,165.27,0.005,190.23,0.005z M197.98,61.495l23-30c0,0-10-9-46-12C167.79,18.895,194.98,38.495,197.98,61.495z"/>
+            <path style={{fill:"#F7CF52"}} d="M353.51,92.585l-0.01,0.01c-29.11-21.19-40.64-10.55-45.02-1.77c-2.06,4.15-6.26,6.73-10.81,6.73
+              c-0.42,0-0.85-0.03-1.27-0.07c-5.97-0.63-10.66-5.53-10.81-11.52c-0.66-25.06,15.71-50.17,15.71-50.17
+              C322.33,50.935,340.14,70.275,353.51,92.585z"/>
+            <path style={{fill:"#F7CF52"}} d="M380.45,190.225c0,22.57-3.93,44.23-11.15,64.32h-0.01c-6.07-10.32-8.37-22.55-8.98-33.34
+              c-0.68-11.96-11.49-20.89-23.33-19.05c-0.24,0.03-0.48,0.07-0.72,0.1c-16.41,2.4-31.48-9.2-33.65-25.64
+              c-0.97-7.4-1.24-14.1-0.97-20.16c0,0,2.3-29.04,16.19-43c2.74-2.75,5.21-4.98,7.36-6.53c3.09-2.22,6.91-3.14,10.69-2.67
+              c13.61,1.68,23.77-0.6,23.77-0.6C372.95,129.625,380.45,159.045,380.45,190.225z"/>
+            <path style={{fill:"#F7CF52"}} d="M220.98,31.495l-23,30c-3-23-30.19-42.6-23-42C210.98,22.495,220.98,31.495,220.98,31.495z"/>
+            <path style={{fill:"#F7CF52"}} d="M173.42,63.145c7.26,9.73,3.69,23.66-7.36,28.71c-16.86,7.72-39.93,19.93-50.49,32.96
+              c-4.46,5.51-11.67,8.01-18.54,6.27c-8.63-2.19-19.55-1.98-26.05,9.41c-12,21,34.4,44.92,31.7,71.71
+              c-0.02-0.08-0.04-0.15-0.06-0.23c-1.6-6.58-6.26-12-12.49-14.68c-16.25-7.02-30.88-17.95-40.15-34.8
+              c-20.25-36.82-5.86-80.79,8.29-109.27c17.54-16.91,38.33-30.47,61.33-39.67C119.6,13.555,151.15,33.245,173.42,63.145z"/>
+            <path style={{fill:"#F7CF52"}} d="M217.97,246.855c17.77,10.79,21.93,34.83,8.76,50.92c-7.41,9.05-15.93,18.74-24.47,28.12
+              l-29.58,31.37c-14.04,14.58-19.39,19.59-19.39,19.59c-17.68-25.64-11.31-74.36-11.31-74.36l-18.56-12.95
+              c-13.61-9.49-21.02-25.67-19.11-42.15c1.79-15.39,0.28-27.25-1.63-35.19c15.73-4.9,31.6-7.34,42.8-8.55
+              c8.72-0.94,17.43,1.97,23.76,8.04C181.83,223.785,201.38,236.785,217.97,246.855z"/>
+          </g>
+        </g>
+        <path style={{opacity:"0.3",fill:"#808080",enableBackground:"new"}} d="M190.23,0.005c5.8,0,11.54,0.26,17.2,0.77
+          C110.48,9.515,34.5,90.995,34.5,190.225c0,99.25,76.01,180.74,172.99,189.45c-5.68,0.51-11.44,0.77-17.26,0.77
+          C85.17,380.445,0,295.285,0,190.225S85.17,0.005,190.23,0.005z"/>
+      </SvgIcon>
+    );
+  }

frontend/src/components/icons/GoldIcon.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { SvgIcon } from "@mui/material"
+
+export default function GoldIcon(props) {
+    return (
+      <SvgIcon x="0px" y="0px" viewBox="0 0 511.882 511.882">
+        <polygon style={{fill:"#F6BB42"}} points="350.216,176.572 278.374,158.615 37.038,264.123 0,338.207 125.753,374.324 386.13,258.531 
+          "/>
+        <polygon style={{fill:"#FFCE54"}} points="350.216,176.572 107.756,284.345 125.753,374.324 386.13,258.531 "/>
+        <polygon style={{fill:"#E8AA3D"}} points="107.756,284.345 37.038,264.123 0.015,338.207 125.753,374.324 "/>
+        <polygon style={{fill:"#F6BB42"}} points="475.969,212.682 404.127,194.717 162.791,300.232 125.753,374.324 251.504,410.41 
+          511.882,294.625 "/>
+        <polygon style={{fill:"#FFCE54"}} points="475.969,212.682 233.508,320.431 251.504,410.41 511.882,294.625 "/>
+        <polygon style={{fill:"#E8AA3D"}} points="233.508,320.431 162.791,300.232 125.753,374.324 251.504,410.41 "/>
+        <polygon style={{fill:"#F6BB42"}} points="396.316,119.429 324.488,101.473 103.867,198.435 66.843,272.519 192.596,308.621 
+          432.245,201.379 "/>
+        <polygon style={{fill:"#FFCE54"}} points="396.316,119.429 174.6,218.641 192.596,308.621 432.245,201.379 "/>
+        <polygon style={{fill:"#E8AA3D"}} points="174.6,218.641 103.867,198.435 66.843,272.519 192.596,308.621 "/>
+      </SvgIcon>
+    );
+  }

frontend/src/components/payment-methods/webp/code/code.html

@@ -0,0 +1,4 @@
+*
+<img
+  src="data:image/webp;base64,"
+/>

frontend/src/components/payment-methods/webp/code/code.js

@@ -0,0 +1,6 @@
+{
+  : {
+    title: "*",
+    image: "data:image/webp;base64,",
+  },
+};

frontend/src/locales/CONTRIBUTING.MD

@@ -9,6 +9,7 @@ Simply create a new translation file in `frontend/src/locales` (Same folder wher
 
 ## Guidelines
 
+<<<<<<< HEAD
 Each language .json dictionary contains pairs of keys and values in the following format { "key1":"value1", "key2":"value2", ...}. Most keys are the literal English sentence. These simply have to be translated on the right side, for example, in order to translate the `Make Order` button to Spanish we edit the json file to look like this `{... "Make Order":"Crear Orden",...}`.
 
 1. **Not all keys are explicit sentences.** Some keys are not the English senstence but a variable names e.g. "phone_unsafe_alert". In this case you must take a look at the value originally in `en.json`. 
@@ -28,6 +29,29 @@ Each language .json dictionary contains pairs of keys and values in the followin
 8. **Understand the context, where will this string be displayed?** Literal translations might not work well in some languages. While in English the wording is always similar regardless of the position in the UI, in some languages it might be very different if you are translating a button (the user is taking an action) or if you are simply translating a tooltip. It might be clever to translate the strings while looking at the app. However, many strings can only be found while trading. The testnet RoboSats site is great for this use, as you can explore the whole app simply interacting with it with a testnet lightning wallet. However, if you cannot find where a string is displayed, it might be faster to simply write a message on the telegram group @robosats.
 
 9. **Congratulate yourself!** Seriously, it's so awesome you are looking into building up freedom tools!!
+=======
+Each language .json dictionary contains pairs of keys and values in the following format { "key1":"value1", "key2":"value2", ...}. Most keys are the literal English sentence. These simply have to be translated on the right side, for example, in order to translate the `Make Order` button to Spanish we should change the file to look like this `{... "Make Order":"Crear Orden",...}`.
+
+1. **Not all keys are explicit sentences.** Some keys are variable names e.g. "phone_unsafe_alert". In these case you must take a look at the value originally in `en.json`. 
+
+2. **The language dictionary is split into 9 sections.** The first key of each section is a reference and does not need to be translated. For example, the second section starts with the key:value `"USER GENERATION PAGE - UserGenPage.js": "Landing Page and User Generation"` . It does not need to be translated, it is just information for the translator to understand what part of the app he will be working on.
+
+3. **Try to keep a similar length to the original sentence.** In most cases it will be okay if the translation is shorter. However, translations that result in a higher character count might break the UI! Of course, it might not always be possible to stick to the length of the English sentence. In those cases the UI might have to be changed, contact the responsible person for such a change.
+
+4. **Some sentences contain variables**, for example, {{currencyCode}}. It will insert the currency code where the variable is found. E.g., `"Pay 30 {{currencyCode}}"` will render into "Pay 30 USD".
+
+5. **Some sentences contain HTML tags.** These tags are usually hyperlinks. For example in `{"phone_unsafe_alert": "Use <1>Tor Browser</1> and visit the <3>Onion</3> site."}` the children text of <1> (Tor Browser) will link to the Tor Download website, and the children of <3> will link to the RoboSats Onion site.
+
+6. **Some text is high priority, some other text is low priority.** Some keys are likely to change soon or they might not be so relevant for the user of the app. The translation files are sorted from top to bottom by the priority of the translation. The keys by the end of the translation file are more likely to change. It is best to translate from top to bottom.
+
+7. Use a spell checker ;)
+
+8. **Understand the context of where the translation will be displayed.** Literal translations might not work well to some languages. While in English the wording is always similar, in some languages it might be very different if you are translating a button (the user is taking an action) or if you are simply translating a tooltip.
+
+To understand the context it might be clever to translate the strings while looking at the app. However, many strings can only be found while trading. The testnet RoboSats site is great for this as you can explore the whole app simply interacting with it with testnet bitcoin. However, in case of doubt where a text is displayed, it might be faster to simply write a message on the community group @robosats in Telegram.
+
+9. Congratulate yourself! Seriously, it's so awesome you are looking into building up freedom tools!!
+>>>>>>> i18n
 
 
 

frontend/src/locales/en.json

@@ -42,7 +42,7 @@
     "Explicit":"Explicit",
     "Set a fix amount of satoshis":"Set a fix amount of satoshis",
     "Satoshis":"Satoshis",
-    "Let the taker chose an amount within the range":"Let the taker chose an amount within the range",
+    "Let the taker chose an amount within the range":"Let the taker choose an amount within the range",
     "Enable Amount Range":"Enable Amount Range",
     "From": "From",
     "to":"to",
@@ -216,7 +216,7 @@
     "Collaborative Cancel":"Collaborative Cancel",
     "Invalid Order Id":"Invalid Order Id",
     "You must have a robot avatar to see the order details":"You must have a robot avatar to see the order details",
-    "This order has been cancelled collaborativelly":"This order has been cancelled collaborativelly",
+    "This order has been cancelled collaborativelly":"This order has been cancelled collaboratively",
     "You are not allowed to see this order":"You are not allowed to see this order",
     "The Robotic Satoshis working in the warehouse did not understand you. Please, fill a Bug Issue in Github https://github.com/reckless-satoshi/robosats/issues":"The Robotic Satoshis working in the warehouse did not understand you. Please, fill a Bug Issue in Github https://github.com/reckless-satoshi/robosats/issues",
 

frontend/static/css/index.css

@@ -133,4 +133,6 @@ input[type=number] {
   transform: scaleX(-1);
   border: 0.3px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);
-}
+}
+
+.MuiButton-textInherit {color : '#111111';}