Add autocomplete, icons, custom selector

.gitignore

@@ -652,4 +652,6 @@ api/lightning/router*
 api/lightning/googleapis*
 frontend/static/admin*
 frontend/static/rest_framework*
-frontend/static/import_export*
+frontend/static/import_export*
+frontend/src/components/payment-method-images/code*
+frontend/src/components/payment-method-images/webp*

api/logics.py

@@ -362,6 +362,7 @@ class Logics:
         # Make order public again
         order.taker = None
         order.taker_bond = None
+        order.last_satoshis = cls.satoshis_now(order)
         cls.publish_order(order)
         return True
 

control/admin.py

@@ -21,7 +21,6 @@ class AccountingDayAdmin(ImportExportModelAdmin):
         "outstanding_earned_rewards",
         "outstanding_pending_disputes",
         "lifetime_rewards_claimed",
-        "outstanding_earned_rewards",
         "earned_rewards",
         "disputes",
         "rewards_claimed",

docker-compose.yml

@@ -27,7 +27,7 @@ services:
     build: ./frontend
     container_name: npm-dev
     restart: always
-    command: npm run build
+    command: npm run dev
     volumes:
       - ./frontend:/usr/src/frontend
 

frontend/package-lock.json

@@ -3393,6 +3393,11 @@
         "yaml": "^1.7.2"
       }
     },
+    "country-flag-icons": {
+      "version": "1.4.25",
+      "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.4.25.tgz",
+      "integrity": "sha512-1sF/6cit7MYfmxrqNiVN0ijLGv10xtV8egAUwUgIW6Q/Y6d7SuuVw5TOBnG7qIFqrNjxaPNoIAZmx7yOEuZvDA=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6350,11 +6355,6 @@
         "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",
@@ -6693,6 +6693,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-world-flags": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.4.0.tgz",
+      "integrity": "sha512-SkOzl/v6LYBphJNSeeQXTogAiLZN1Yy2HFx2Qjda/82MCWFimj9cenmOXASbfbKeqFbo/17M8HauY6mfzWmTDw==",
+      "requires": {
+        "svg-country-flags": "^1.2.7",
+        "world-countries": "^4.0.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -7649,6 +7658,11 @@
         "has-flag": "^4.0.0"
       }
     },
+    "svg-country-flags": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
+      "integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -8157,6 +8171,11 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "world-countries": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/world-countries/-/world-countries-4.0.0.tgz",
+      "integrity": "sha512-LsFFYmggquj0U+i7VUaJOZYz5F4QNu+oceGw8odnyVHMT2LxYSdVncqdouOEnq1esr7yCakp9+3BZTztuSw1Pg=="
+    },
     "wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",

frontend/package.json

@@ -31,16 +31,17 @@
     "@mui/material": "^5.2.7",
     "@mui/system": "^5.2.6",
     "@mui/x-data-grid": "^5.2.2",
+    "country-flag-icons": "^1.4.25",
     "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",
     "react-qr-reader": "^2.2.1",
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^5.2.0",
+    "react-world-flags": "^1.4.0",
     "reconnecting-websocket": "^4.4.0",
     "websocket": "^1.0.34"
   }

frontend/src/components/BookPage.js

@@ -261,6 +261,8 @@ export default class BookPage extends Component {
                 I want to 
               </FormHelperText>
               <Select
+                  sx={{width:90}}
+                  autoWidth={true}
                   label="Select Order Type"
                   required="true" 
                   value={this.state.type} 
@@ -281,6 +283,8 @@ export default class BookPage extends Component {
                 and {this.state.type == 0 ? ' receive' : (this.state.type == 1 ? ' pay with' : ' use' )} 
               </FormHelperText>
               <Select
+                  //autoWidth={true}
+                  sx={{width:110}}
                   label="Select Payment Currency"
                   required="true" 
                   value={this.state.currency} 

frontend/src/components/MakerPage.js

@@ -4,8 +4,8 @@ import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
 import { Link as LinkRouter } from 'react-router-dom'
 import { styled } from '@mui/material/styles';
-import getFlags from './getFlags'
-
+import getFlags from './getFlags';
+import AutocompletePayments from './autocompletePayments';
 import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 
@@ -159,10 +159,10 @@ export default class MakerPage extends Component {
         });
     }
 
-    handlePaymentMethodChange=(e)=>{
+    handlePaymentMethodChange=(value)=>{
         this.setState({
-            payment_method: e.target.value,
-            badPaymentMethod: e.target.value.length > 35,    
+            payment_method: value,
+            badPaymentMethod: value.length > 35,    
         });
     }
     handlePremiumChange=(e)=>{
@@ -255,6 +255,7 @@ export default class MakerPage extends Component {
         return(
             <Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
             <Grid item xs={12} align="center" spacing={1}>
+                <div style={{position:'relative', left:'5px'}}>
                 <FormControl component="fieldset">
                     <FormHelperText>
                         Buy or Sell Bitcoin?
@@ -274,10 +275,11 @@ export default class MakerPage extends Component {
                         />
                     </RadioGroup>
                 </FormControl>
+                </div>
             </Grid>
             
             <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
-                    <div style={{maxWidth:140}}>
+                    <div style={{maxWidth:150}}>
                     <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin">
                         <TextField
                             disabled = {this.state.enableAmountRange}
@@ -298,6 +300,7 @@ export default class MakerPage extends Component {
                         </div>
                         <div >
                             <Select
+                                sx={{width:'120px'}}
                                 required="true" 
                                 defaultValue={this.defaultCurrency} 
                                 inputProps={{
@@ -312,10 +315,9 @@ export default class MakerPage extends Component {
                         </div>
 
             </Grid>
-            <br/>
             <Grid item xs={12} align="center">
-                <Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Instant recommended (e.g., Revolut, CashApp ...)">
-                    <TextField 
+                <Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Fast methods are highly recommended.">
+                    {/* <TextField 
                         sx={{width:240}}
                         label={this.state.currency==1000 ? "Swap Destination (e.g. rBTC)":"Fiat Payment Method(s)"}
                         error={this.state.badPaymentMethod}
@@ -327,7 +329,18 @@ export default class MakerPage extends Component {
                             maxLength: 35
                         }}
                         onChange={this.handlePaymentMethodChange}
-                    />
+                    /> */}
+                    <AutocompletePayments
+                        onAutocompleteChange={this.handlePaymentMethodChange}
+                        // inputProps={{
+                        //     style: {textAlign:"center"},
+                        //     maxLength: 35
+                        // }}
+                        type="text" 
+                        error={this.state.badPaymentMethod}
+                        helperText={this.state.badPaymentMethod ? "Must be shorter than 35 characters":""}
+                        label={this.state.currency==1000 ? "Swap Destination (e.g. rBTC)":"Fiat Payment Method(s)"}
+                        />
                 </Tooltip>
             </Grid>
 

frontend/src/components/PaymentText.js

@@ -0,0 +1,44 @@
+import PaymentIcon from './PaymentIcons'
+import React, { Component } from 'react'
+
+const somePaymentMethods = [
+    {name: "Revolut",icon:'revolut'},
+    {name: "CashApp",icon:'cashapp'},
+    {name: "Zelle",icon:'zelle'},
+    {name: "Strike",icon:'strike'},
+    {name: "Rebellion",icon:'rebellion'},
+    {name: "Interac e-Transfer",icon:'interac'},
+    {name: "Wise",icon:'wise'},
+    {name: "Venmo",icon:'venmo'},
+    {name: "Faster Payments",icon:'faster'},
+    {name: "Paypal",icon:'paypal'},
+    {name: "LINE Pay",icon:'linepay'},
+    {name: "PromptPay",icon:'promptpay'},
+    {name: "Bizum",icon:'bizum'},
+    {name: "N26",icon:'n26'},
+    {name: "Amazon GiftCard",icon:'amazon'},
+    {name: "Bancolombia",icon:'bancolombia'},
+    {name: "SPEI",icon:'spei'},
+    {name: "PIX",icon:'pix'},
+    {name: "HalCash",icon:'halcash'},
+    {name: "Vivid",icon:'vivid'},
+    {name: "Google Play Gift Code",icon:'googleplay'},
+    {name: "Nequi",icon:'nequi'},
+    {name: "MercadoPago",icon:'mercadopago'},
+    {name: "Monero",icon:'monero'},
+    {name: "USDT",icon:'usdt'},
+    {name: "Dollar on Chain",icon:'doc'},
+  ];
+
+export default class PaymentText extends Component {
+    constructor(props) {
+      super(props);
+    }
+    this.props.text
+
+    render() {
+      return ( 
+        <img {...this.props} src={icons[this.props.icon].image} style={{borderRadius: '23%'}}/>
+      )
+    }
+  };

frontend/src/components/UnsafeAlert.js

@@ -43,7 +43,7 @@ export default class UnsafeAlert extends Component {
         <Alert severity="warning" sx={{maxHeight:"120px"}}>
         <AlertTitle>You are not using RoboSats privately</AlertTitle>
           You will not be able to complete a 
-          trade. Use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link chref='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.
+          trade. Use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link href='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.
         <div style={{width: '100%'}}>
         </div>
         <div align="center">

frontend/src/components/autocompletePayments.js

@@ -0,0 +1,303 @@
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { styled } from '@mui/material/styles';
+import PaymentIcon from './PaymentIcons';
+import {Button} from "@mui/material";
+import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
+
+const Root = styled('div')(
+  ({ theme }) => `
+  color: ${
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+  };
+  font-size: 14px;
+`,
+);
+
+const Label = styled('label')(
+    ({ theme }) => `
+  color: ${theme.palette.mode === 'dark' ? '#cfcfcf' : '#717171'};
+  aling: center;
+  padding: 0 0 4px;
+  line-height: 1.5;
+  display: block;
+  font-size: 13px;
+`,
+);
+
+const InputWrapper = styled('div')(
+  ({ theme }) => `
+  width: 244px;
+  min-height: 44px;
+  max-height: 166px;
+  max-rows: 5;
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4'};
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
+  border-radius: 4px;
+  padding: 1px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y:auto;
+  
+  &:hover {
+    border-color: ${theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f'};
+  }
+
+  &.focused {
+    border: 2px solid ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
+  }
+
+  & input {
+    background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
+    color: ${
+      theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)'
+    };
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px 6px;
+    width: 0;
+    min-width: 30px;
+    font-size: 15px;
+    flex-grow: 1;
+    border: 0;
+    margin: 0;
+    outline: 0;
+    max-height: 166px;
+  }
+`,
+);
+
+function Tag(props) {
+  const { label, icon, onDelete, ...other } = props;
+  return (
+    <div {...other}>
+        <div style={{position:'relative',left:'-5px',top:'4px'}}>
+          <PaymentIcon width={22} height={22} icon={icon}/>
+        </div>
+        <span style={{position:'relative',left:'2px'}}>{label}</span>
+      <CloseIcon onClick={onDelete} />
+    </div>
+  );
+}
+
+Tag.propTypes = {
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+const StyledTag = styled(Tag)(
+  ({ theme }) => `
+  display: flex;
+  align-items: center;
+  height: 34px;
+  margin: 2px;
+  line-height: 22px;
+  background-color: ${
+    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa'
+  };
+  border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'};
+  border-radius: 2px;
+  box-sizing: content-box;
+  padding: 0 4px 0 10px;
+  outline: 0;
+  overflow: hidden;
+
+  &:focus {
+    border-color: ${theme.palette.mode === 'dark' ? '#177ddc' : '#40a9ff'};
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
+  }
+
+  & span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 15px;
+  }
+
+  & svg {
+    font-size: 15px;
+    cursor: pointer;
+    padding: 4px;
+  }
+`,
+);
+
+const ListHeader = styled('span')(
+    ({ theme }) => `
+  color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'};
+  aling: center;
+  width: 187px;
+  display: inline-block;
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
+  font-size: 12px;
+`,
+);
+
+const Listbox = styled('ul')(
+  ({ theme }) => `
+  width: 244px;
+  margin: 2px 0 0;
+  padding: 0;
+  position: absolute;
+  list-style: none;
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
+  overflow: auto;
+  max-height: 250px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 999;
+
+  & li {
+    padding: 5px 12px;
+    display: flex;
+
+    & span {
+      flex-grow: 1;
+    }
+
+    & svg {
+      color: transparent;
+    }
+  }
+
+  & li[aria-selected='true'] {
+    background-color: ${theme.palette.mode === 'dark' ? '#2b2b2b' : '#fafafa'};
+    font-weight: 600;
+
+    & svg {
+      color: #1890ff;
+    }
+  }
+
+  & li[data-focus='true'] {
+    background-color: ${theme.palette.mode === 'dark' ? '#003b57' : '#e6f7ff'};
+    cursor: pointer;
+
+    & svg {
+      color: currentColor;
+    }
+  }
+`,
+);
+
+export default function AutocompletePayments(props) {
+  const {
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getTagProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+    value,
+    focused="true",
+    setAnchorEl,
+  } = useAutocomplete({
+    sx: {width:'200px', align:'left'},
+    id: 'payment-methods',
+    multiple: true,
+    options: somePaymentMethods,
+    getOptionLabel: (option) => option.name,
+    onInputChange: (e) => setVal(e.target.value) & props.onAutocompleteChange(optionsToString()),
+    onChange: () => props.onAutocompleteChange(optionsToString()),
+  });
+  const [val, setVal] = useState();
+
+  function optionsToString(){
+    var str = '';
+    var arrayLength = value.length;
+      for (var i = 0; i < arrayLength; i++) {
+          str += value[i].name + ' ';
+      }
+    return str;
+  }
+
+  function handleAddNew(inputProps){
+    console.log(inputProps)
+    somePaymentMethods.push({name: inputProps.value, icon:'custom'})
+    var a = value.push({name: inputProps.value, icon:'custom'});
+    setVal(() => "");
+
+    if(a || a == null){props.onAutocompleteChange(optionsToString())}
+  };
+
+  // function handleInputChange(e){
+  //   getInputProps().onChange(e)
+  //   setVal(() => e.target.value);
+  // };
+
+  return (
+    <Root>
+    {console.log(()=>props.onAutocompleteChange(value))}
+    <div style={{height:'5px'}}></div>
+      <div {...getRootProps()} >
+        <Label {...getInputLabelProps()}>Payment method(s)</Label>
+        <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
+          {value.map((option, index) => (
+            <StyledTag label={option.name} icon={option.icon} {...getTagProps({ index })} />
+          ))}
+          <input {...getInputProps()} value={val}/>
+        </InputWrapper>
+      </div>
+      {groupedOptions.length > 0 ? (
+        <Listbox {...getListboxProps()}>
+            <div style={{position:'fixed', minHeight:'20px',  marginLeft: '30px', marginTop: '-13px'}}>
+                <ListHeader><i>You can add any method </i></ListHeader>
+            </div>
+          {groupedOptions.map((option, index) => (
+            <li {...getOptionProps({ option, index })}>
+              <span align="left">{option.name}</span>
+              <CheckIcon fontSize="small" />
+            </li>
+          ))}
+        </Listbox>
+      ) : 
+      //Here goes what happens if there is no groupedOptions
+      (getInputProps().value.length > 0 ?
+        <Listbox {...getListboxProps()}>
+          <Button sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon/>Add</Button>
+        </Listbox>
+        :null)
+      }
+    </Root>
+  );
+}
+
+// Most used Payment Methods RoboSats (First Month)
+var somePaymentMethods = [
+  {name: "Revolut",icon:'revolut'},
+  {name: "CashApp",icon:'cashapp'},
+  {name: "Zelle",icon:'zelle'},
+  {name: "Strike",icon:'strike'},
+  {name: "Rebellion",icon:'rebellion'},
+  {name: "Interac e-Transfer",icon:'interac'},
+  {name: "Wise",icon:'wise'},
+  {name: "Venmo",icon:'venmo'},
+  {name: "Faster Payments",icon:'faster'},
+  {name: "Paypal",icon:'paypal'},
+  {name: "LINE Pay",icon:'linepay'},
+  {name: "PromptPay",icon:'promptpay'},
+  {name: "Bizum",icon:'bizum'},
+  {name: "N26",icon:'n26'},
+  {name: "Amazon GiftCard",icon:'amazon'},
+  {name: "Bancolombia",icon:'bancolombia'},
+  {name: "SPEI",icon:'spei'},
+  {name: "PIX",icon:'pix'},
+  {name: "HalCash",icon:'halcash'},
+  {name: "Vivid",icon:'vivid'},
+  {name: "Google Play Gift Code",icon:'googleplay'},
+  {name: "Nequi",icon:'nequi'},
+  {name: "MercadoPago",icon:'mercadopago'},
+  {name: "Monero",icon:'monero'},
+  {name: "USDT",icon:'usdt'},
+  {name: "Airtel Money",icon:'airtel'},
+  {name: "MTN Money",icon:'mtn'},
+  {name: "M-Pesa",icon:'mpesa'},
+  {name: "MoMo",icon:'momo'},
+  {name: "Tigo Pesa",icon:'tigopesa'},
+  {name: "Cash F2F",icon:'cash'},
+];

frontend/src/components/getFlags.js

@@ -1,13 +1,72 @@
 import React, { Component } from 'react';
-import Flag from 'react-flagkit';
+import Flags from 'country-flag-icons/react/3x2'
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 
 export default function getFlags(code){
-    if(code == 'BTC') return <SwapCallsIcon color="primary"/>;
+    const props = {width:20,height:20}
+    var flag = "";
+    
+    if(code == 'AUD') flag = <Flags.AU {...props}/>;
+    if(code == 'ARS') flag = <Flags.AR {...props}/>;
+    if(code == 'BRL') flag = <Flags.BR {...props}/>;
+    if(code == 'CAD') flag = <Flags.CA {...props}/>;
+    if(code == 'CHF') flag = <Flags.CH {...props}/>;
+    if(code == 'CLP') flag = <Flags.CL {...props}/>;
+    if(code == 'CNY') flag = <Flags.CN {...props}/>;
+    if(code == 'EUR') flag = <Flags.EU {...props}/>;
+    if(code == 'HRK') flag = <Flags.HR {...props}/>;
+    if(code == 'CZK') flag = <Flags.CZ {...props}/>;
+    if(code == 'DKK') flag = <Flags.DK {...props}/>;
+    if(code == 'GBP') flag = <Flags.GB {...props}/>;
+    if(code == 'HKD') flag = <Flags.HK {...props}/>;
+    if(code == 'HUF') flag = <Flags.HU {...props}/>;
+    if(code == 'INR') flag = <Flags.IN {...props}/>;
+    if(code == 'ISK') flag = <Flags.IS {...props}/>;
+    if(code == 'JPY') flag = <Flags.JP {...props}/>;
+    if(code == 'KRW') flag = <Flags.KR {...props}/>;
+    if(code == 'MXN') flag = <Flags.MX {...props}/>;
+    if(code == 'NOK') flag = <Flags.NO {...props}/>;
+    if(code == 'NZD') flag = <Flags.NZ {...props}/>;
+    if(code == 'PLN') flag = <Flags.PL {...props}/>;
+    if(code == 'RON') flag = <Flags.RO {...props}/>;
+    if(code == 'RUB') flag = <Flags.RU {...props}/>;
+    if(code == 'SEK') flag = <Flags.SE {...props}/>;
+    if(code == 'SGD') flag = <Flags.SG {...props}/>;
+    if(code == 'VES') flag = <Flags.VE {...props}/>;
+    if(code == 'TRY') flag = <Flags.TR {...props}/>;
+    if(code == 'USD') flag = <Flags.US {...props}/>;
+    if(code == 'ZAR') flag = <Flags.ZA {...props}/>;
+    if(code == 'COP') flag = <Flags.CO {...props}/>;
+    if(code == 'PEN') flag = <Flags.PE {...props}/>;
+    if(code == 'UYU') flag = <Flags.UY {...props}/>;
+    if(code == 'PYG') flag = <Flags.PY {...props}/>;
+    if(code == 'BOB') flag = <Flags.BO {...props}/>;
+    if(code == 'IDR') flag = <Flags.ID {...props}/>;
+    if(code == 'ANG') flag = <Flags.CW {...props}/>;
+    if(code == 'CRC') flag = <Flags.CR {...props}/>;
+    if(code == 'CUP') flag = <Flags.CU {...props}/>;
+    if(code == 'DOP') flag = <Flags.DO {...props}/>;
+    if(code == 'GHS') flag = <Flags.GH {...props}/>;
+    if(code == 'GTQ') flag = <Flags.GT {...props}/>;
+    if(code == 'ILS') flag = <Flags.IL {...props}/>;
+    if(code == 'JMD') flag = <Flags.JM {...props}/>;
+    if(code == 'KES') flag = <Flags.KE {...props}/>;
+    if(code == 'KZT') flag = <Flags.KZ {...props}/>;
+    if(code == 'MYR') flag = <Flags.MY {...props}/>;
+    if(code == 'NAD') flag = <Flags.NA {...props}/>;
+    if(code == 'NGN') flag = <Flags.NG {...props}/>;
+    if(code == 'AZN') flag = <Flags.AZ {...props}/>;
+    if(code == 'PAB') flag = <Flags.PA {...props}/>;
+    if(code == 'PHP') flag = <Flags.PH {...props}/>;
+    if(code == 'PKR') flag = <Flags.PK {...props}/>;
+    if(code == 'QAR') flag = <Flags.QA {...props}/>;
+    if(code == 'SAR') flag = <Flags.SA {...props}/>;
+    if(code == 'THB') flag = <Flags.TH {...props}/>;
+    if(code == 'TTD') flag = <Flags.TT {...props}/>;
+    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 == 'AZN') return '🇦🇿'; // code AZ not working
-    if(code == 'XOF') code = 'SN';
-    if(code == 'ANG') code = 'CW';
-    return <div style={{width:24, height: 18}}><Flag country={code.substring(0,2)} size={18}/></div>;
+    if(code == 'BTC') return <SwapCallsIcon color="primary"/>;
+    return <div style={{width:28, height: 20}}>{flag}</div>;
 };

frontend/src/components/payment-method-images/gen-webp.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+mkdir webp 2>/dev/null
+
+for f in *.{png,jpg}
+do
+  echo ""
+  title=$(echo $f | sed 's/\.[^.]*$//')
+  echo "Processing $f..."
+  cwebp "$f" -q 30 -resize 225 225 -o webp/"$(echo $f | rev | cut -d"." -f2- | rev).webp" < /dev/null
+  echo ""
+done

frontend/src/components/payment-method-images/readme.MD

@@ -0,0 +1,9 @@
+# About
+
+Scripts taken from https://github.com/hsjoberg/blixt-wallet/blob/master/contrib/service-image/ for creating images to be used as payment method icons.
+
+# How to use
+
+1. Run `./gen-webp.sh` to generate the WebP files to used
+2. Run `./gen-code.sh` to generate code to either be used in react js source files
+3. Copy/Paste and replace the dict from `payment-method-images/code/codejs` to `components/PaymentIcons.js`