Include flags in-app (replace unicode emojis)

frontend/package-lock.json

@@ -6350,6 +6350,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-flagkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-flagkit/-/react-flagkit-2.0.4.tgz",
+      "integrity": "sha512-e0Rak6VG1+KemBFqLqTPzFDLYS40lEW1YOpG9s68WDoEoQiC0YPEXDkIGLorNgP6omJztcg/OtcjSqAKM2O1cw=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

frontend/package.json

@@ -34,6 +34,7 @@
     "date-fns": "^2.28.0",
     "material-ui-image": "^3.3.2",
     "react-countdown": "^2.3.2",
+    "react-flagkit": "^2.0.4",
     "react-native": "^0.66.4",
     "react-native-svg": "^12.1.1",
     "react-qr-code": "^2.0.3",

frontend/src/components/MakerPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { LinearProgress, Link, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
+import { InputAdornment, LinearProgress, Link, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
 import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link as LinkRouter } from 'react-router-dom'
@@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles';
 import getFlags from './getFlags'
 
 import LockIcon from '@mui/icons-material/Lock';
+import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 
 function getCookie(name) {
     let cookieValue = null;
@@ -561,6 +562,16 @@ export default class MakerPage extends Component {
                             views={['hours', 'minutes']}
                             inputFormat="HH:mm"
                             mask="__:__"
+                            components={{
+                                OpenPickerIcon: HourglassTopIcon
+                              }}
+                            open={this.state.openTimePicker}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <HourglassTopIcon />
+                                    </InputAdornment>)
+                                }}
                             renderInput={(props) => <TextField {...props} />}
                             label="Public Duration (HH:mm)"
                             value={this.state.publicExpiryTime}

frontend/src/components/OrderPage.js

@@ -543,7 +543,9 @@ export default class OrderPage extends Component {
             
             <ListItem>
               <ListItemIcon>
-               {getFlags(this.state.currencyCode)}
+                <div style={{zoom:1.25,opacity: 0.7}}>
+                  {getFlags(this.state.currencyCode)}
+                </div>
               </ListItemIcon>
               {this.state.has_range & this.state.amount == null ?
               <ListItemText primary={parseFloat(Number(this.state.min_amount).toPrecision(2))

frontend/src/components/getFlags.js

@@ -1,69 +1,13 @@
 import React, { Component } from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
+import Flag from 'react-flagkit';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 
 export default function getFlags(code){
-    if(code == 'AUD') return '🇦🇺';
-    if(code == 'ARS') return '🇦🇷';
-    if(code == 'BRL') return '🇧🇷';
-    if(code == 'CAD') return '🇨🇦';
-    if(code == 'CHF') return '🇨🇭';
-    if(code == 'CLP') return '🇨🇱';
-    if(code == 'CNY') return '🇨🇳';
-    if(code == 'EUR') return '🇪🇺';
-    if(code == 'HRK') return '🇨🇷';
-    if(code == 'CZK') return '🇨🇿';
-    if(code == 'DKK') return '🇩🇰';
-    if(code == 'GBP') return '🇬🇧';
-    if(code == 'HKD') return '🇭🇰';
-    if(code == 'HUF') return '🇭🇺';
-    if(code == 'INR') return '🇮🇳';
-    if(code == 'ISK') return '🇮🇸';
-    if(code == 'JPY') return '🇯🇵';
-    if(code == 'KRW') return '🇰🇷';
-    if(code == 'MXN') return '🇲🇽';
-    if(code == 'NOK') return '🇳🇴';
-    if(code == 'NZD') return '🇳🇿';
-    if(code == 'PLN') return '🇵🇱';
-    if(code == 'RON') return '🇷🇴';
-    if(code == 'RUB') return '🇷🇺';
-    if(code == 'SEK') return '🇸🇪';
-    if(code == 'SGD') return '🇸🇬';
-    if(code == 'VES') return '🇻🇪';
-    if(code == 'TRY') return '🇹🇷';
-    if(code == 'USD') return '🇺🇸';
-    if(code == 'ZAR') return '🇿🇦';
-    if(code == 'COP') return '🇨🇴';
-    if(code == 'PEN') return '🇵🇪';
-    if(code == 'UYU') return '🇺🇾';
-    if(code == 'PYG') return '🇵🇾';
-    if(code == 'BOB') return '🇧🇴';
-    if(code == 'IDR') return '🇮🇩';
-    if(code == 'ANG') return '🇧🇶';
-    if(code == 'CRC') return '🇨🇷';
-    if(code == 'CUP') return '🇨🇺';
-    if(code == 'DOP') return '🇩🇴';
-    if(code == 'GHS') return '🇬🇭';
-    if(code == 'GTQ') return '🇬🇹';
-    if(code == 'ILS') return '🇮🇱';
-    if(code == 'JMD') return '🇯🇲';
-    if(code == 'KES') return '🇰🇪';
-    if(code == 'KZT') return '🇰🇿';
-    if(code == 'MYR') return '🇲🇲';
-    if(code == 'NAD') return '🇳🇦';
-    if(code == 'NGN') return '🇳🇬';
-    if(code == 'AZN') return '🇦🇿';
-    if(code == 'PAB') return '🇵🇦';
-    if(code == 'PHP') return '🇵🇭';
-    if(code == 'PKR') return '🇵🇰';
-    if(code == 'QAR') return '🇶🇦';
-    if(code == 'SAR') return '🇸🇦';
-    if(code == 'THB') return '🇹🇭';
-    if(code == 'TTD') return '🇹🇹';
-    if(code == 'VND') return '🇻🇳';
-    if(code == 'XOF') return '🇸🇳';
-    if(code == 'TWD') return '🇹🇼';
-    if(code == 'XAU') return '🟨';
     if(code == 'BTC') return <SwapCallsIcon color="primary"/>;
-    return '🏳';
+    if(code == 'XAU') return '🟨';
+
+    if(code == 'AZN') return '🇦🇿'; // code AZ not working
+    if(code == 'XOF') code = 'SN';
+    if(code == 'ANG') code = 'CW';
+    return <div style={{width:24, height: 16}}><Flag country={code.substring(0,2)} size={18}/></div>;
 };