Create FlagWithProps component

This component replaces the function getFlags

frontend/src/components/BookPage.js

@@ -7,7 +7,7 @@ import currencyDict from '../../static/assets/currencies.json';
 
 import MediaQuery from 'react-responsive'
 import Image from 'material-ui-image'
-import getFlags from './getFlags'
+import FlagWithProps from './FlagWithProps'
 import { pn } from "../utils/prettyNumbers";
 import PaymentText from './PaymentText'
 
@@ -137,7 +137,11 @@ class BookPage extends Component {
           )}},
           { field: 'currency', headerName: t("Currency"), width: 100,
           renderCell: (params) => {return (
-            <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
+            <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+              {params.row.currency+" "}
+              <FlagWithProps code={params.row.currency} />
+            </div>
+          )
           }},
           { field: 'payment_method', headerName: t("Payment Method"), width: 180 ,
           renderCell: (params) => {return (
@@ -234,7 +238,10 @@ class BookPage extends Component {
           { field: 'currency', headerName: t("Currency"), width: 85,
           renderCell: (params) => {return (
             // <Tooltip placement="left" enterTouchDelay={0} title={params.row.payment_method}>
-              <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>
+              <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                {params.row.currency+" "}
+                <FlagWithProps code={params.row.currency} />
+              </div>
             // </Tooltip>
           )} },
           { field: 'payment_method', headerName: t("Payment Method"), width: 180, hide:'true'},
@@ -395,10 +402,10 @@ class BookPage extends Component {
                       style: {textAlign:"center"}
                   }}
                   onChange={this.handleCurrencyChange}
-              >     <MenuItem value={0}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags('ANY')}{" "+t("ANY_currency")}</div></MenuItem>
+              >     <MenuItem value={0}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}><FlagWithProps code="ANY" />{" "+t("ANY_currency")}</div></MenuItem>
                     {
                       Object.entries(currencyDict)
-                      .map( ([key, value]) => <MenuItem key={key} value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
+                      .map( ([key, value]) => <MenuItem key={key} value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}><FlagWithProps code={value} />{" "+value}</div></MenuItem> )
                     }
               </Select>
             </FormControl>

frontend/src/components/FlagWithProps/FlagWithProps.tsx

@@ -0,0 +1,89 @@
+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'
+
+type Props = {
+  code: string;
+}
+
+const FlagWithProps = ({ code }: Props): JSX.Element => {
+  const defaultProps = {
+    width: 20,
+    height: 20,
+  };
+
+  let flag: JSX.Element | null = null;
+
+  if(code === 'AUD') flag = <Flags.AU {...defaultProps}/>;
+  if(code === 'ARS') flag = <Flags.AR {...defaultProps}/>;
+  if(code === 'BRL') flag = <Flags.BR {...defaultProps}/>;
+  if(code === 'CAD') flag = <Flags.CA {...defaultProps}/>;
+  if(code === 'CHF') flag = <Flags.CH {...defaultProps}/>;
+  if(code === 'CLP') flag = <Flags.CL {...defaultProps}/>;
+  if(code === 'CNY') flag = <Flags.CN {...defaultProps}/>;
+  if(code === 'EUR') flag = <Flags.EU {...defaultProps}/>;
+  if(code === 'HRK') flag = <Flags.HR {...defaultProps}/>;
+  if(code === 'CZK') flag = <Flags.CZ {...defaultProps}/>;
+  if(code === 'DKK') flag = <Flags.DK {...defaultProps}/>;
+  if(code === 'GBP') flag = <Flags.GB {...defaultProps}/>;
+  if(code === 'HKD') flag = <Flags.HK {...defaultProps}/>;
+  if(code === 'HUF') flag = <Flags.HU {...defaultProps}/>;
+  if(code === 'INR') flag = <Flags.IN {...defaultProps}/>;
+  if(code === 'ISK') flag = <Flags.IS {...defaultProps}/>;
+  if(code === 'JPY') flag = <Flags.JP {...defaultProps}/>;
+  if(code === 'KRW') flag = <Flags.KR {...defaultProps}/>;
+  if(code === 'MXN') flag = <Flags.MX {...defaultProps}/>;
+  if(code === 'NOK') flag = <Flags.NO {...defaultProps}/>;
+  if(code === 'NZD') flag = <Flags.NZ {...defaultProps}/>;
+  if(code === 'PLN') flag = <Flags.PL {...defaultProps}/>;
+  if(code === 'RON') flag = <Flags.RO {...defaultProps}/>;
+  if(code === 'RUB') flag = <Flags.RU {...defaultProps}/>;
+  if(code === 'SEK') flag = <Flags.SE {...defaultProps}/>;
+  if(code === 'SGD') flag = <Flags.SG {...defaultProps}/>;
+  if(code === 'VES') flag = <Flags.VE {...defaultProps}/>;
+  if(code === 'TRY') flag = <Flags.TR {...defaultProps}/>;
+  if(code === 'USD') flag = <Flags.US {...defaultProps}/>;
+  if(code === 'ZAR') flag = <Flags.ZA {...defaultProps}/>;
+  if(code === 'COP') flag = <Flags.CO {...defaultProps}/>;
+  if(code === 'PEN') flag = <Flags.PE {...defaultProps}/>;
+  if(code === 'UYU') flag = <Flags.UY {...defaultProps}/>;
+  if(code === 'PYG') flag = <Flags.PY {...defaultProps}/>;
+  if(code === 'BOB') flag = <Flags.BO {...defaultProps}/>;
+  if(code === 'IDR') flag = <Flags.ID {...defaultProps}/>;
+  if(code === 'ANG') flag = <Flags.CW {...defaultProps}/>;
+  if(code === 'CRC') flag = <Flags.CR {...defaultProps}/>;
+  if(code === 'CUP') flag = <Flags.CU {...defaultProps}/>;
+  if(code === 'DOP') flag = <Flags.DO {...defaultProps}/>;
+  if(code === 'GHS') flag = <Flags.GH {...defaultProps}/>;
+  if(code === 'GTQ') flag = <Flags.GT {...defaultProps}/>;
+  if(code === 'ILS') flag = <Flags.IL {...defaultProps}/>;
+  if(code === 'JMD') flag = <Flags.JM {...defaultProps}/>;
+  if(code === 'KES') flag = <Flags.KE {...defaultProps}/>;
+  if(code === 'KZT') flag = <Flags.KZ {...defaultProps}/>;
+  if(code === 'MYR') flag = <Flags.MY {...defaultProps}/>;
+  if(code === 'NAD') flag = <Flags.NA {...defaultProps}/>;
+  if(code === 'NGN') flag = <Flags.NG {...defaultProps}/>;
+  if(code === 'AZN') flag = <Flags.AZ {...defaultProps}/>;
+  if(code === 'PAB') flag = <Flags.PA {...defaultProps}/>;
+  if(code === 'PHP') flag = <Flags.PH {...defaultProps}/>;
+  if(code === 'PKR') flag = <Flags.PK {...defaultProps}/>;
+  if(code === 'QAR') flag = <Flags.QA {...defaultProps}/>;
+  if(code === 'SAR') flag = <Flags.SA {...defaultProps}/>;
+  if(code === 'THB') flag = <Flags.TH {...defaultProps}/>;
+  if(code === 'TTD') flag = <Flags.TT {...defaultProps}/>;
+  if(code === 'VND') flag = <Flags.VN {...defaultProps}/>;
+  if(code === 'XOF') flag = <Flags.BJ {...defaultProps}/>;
+  if(code === 'TWD') flag = <Flags.TW {...defaultProps}/>;
+  if(code === 'TZS') flag = <Flags.TZ {...defaultProps}/>;
+  if(code === 'XAF') flag = <Flags.CM {...defaultProps}/>;
+  if(code === 'ANY') flag = <EarthIcon {...defaultProps}/>;
+  if(code === 'XAU') flag = <GoldIcon {...defaultProps}/>;
+  if(code === 'BTC') flag = <SwapCallsIcon color="primary"/>;
+
+  return (
+    <div style={{width:28, height: 20}}>{flag}</div>
+  );
+};
+
+export default FlagWithProps;

frontend/src/components/FlagWithProps/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlagWithProps";

frontend/src/components/MakerPage.js

@@ -6,7 +6,7 @@ import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link as LinkRouter } from 'react-router-dom'
 
-import getFlags from './getFlags';
+import FlagWithProps from './FlagWithProps';
 import AutocompletePayments from './AutocompletePayments';
 import currencyDict from '../../static/assets/currencies.json';
 
@@ -57,7 +57,12 @@ class MakerPage extends Component {
         minAmount: null,
         maxAmount: null,
         loadingLimits: true,
+        amount: "",
+        badPaymentMethod: false,
         }
+    }
+
+    componentDidMount() {
     this.getLimits()
   }
 
@@ -319,7 +324,7 @@ class MakerPage extends Component {
                                 onChange={this.handleCurrencyChange}>
                                     {Object.entries(currencyDict)
                                     .map( ([key, value]) => <MenuItem key={key} value={parseInt(key)}>
-                                        <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
+                                        <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}><FlagWithProps code={value}/>{" "+value}</div>
                                         </MenuItem> )}
                             </Select>
                         </div>
@@ -404,7 +409,7 @@ class MakerPage extends Component {
                             />
                     </div>
                 <Grid item>
-                <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={this.state.is_explicit? t("Your order fixed exchange rate"): t("Your order's current exchange rate. Rate will move with the market.")}>
+                <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={this.state.is_explicit? t("Your order fixed exchange rate"): t("Your order's current exchange rate. Rate will move with the market.")}>
                     <Typography variant="caption" color="text.secondary">
                         {(this.state.is_explicit ? t("Order rate:"): t("Order current rate:"))+" "+pn(this.priceNow())+" "+this.state.currencyCode+"/BTC"}
                     </Typography>

frontend/src/components/OrderPage.js

@@ -9,7 +9,7 @@ import { Link as LinkRouter } from 'react-router-dom'
 
 import PaymentText from './PaymentText'
 import TradeBox from "./TradeBox";
-import getFlags from './getFlags'
+import FlagWithProps from './FlagWithProps'
 import { t } from "i18next";
 
 // icons
@@ -588,7 +588,7 @@ class OrderPage extends Component {
             <ListItem>
               <ListItemIcon>
                 <div style={{zoom:1.25,opacity: 0.7, '-ms-zoom': 1.25, '-webkit-zoom': 1.25,'-moz-transform':  'scale(1.25,1.25)', '-moz-transform-origin': 'left center'}}>
-                  {getFlags(this.state.currencyCode)}
+                  <FlagWithProps code={this.state.currencyCode} />
                 </div>
               </ListItemIcon>
               {this.state.has_range & this.state.amount == null ?

frontend/tsconfig.json

@@ -11,7 +11,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
   },
   "include": ["src"]
 }