Merge pull request #84 from Reckless-Satoshi/payment-methods-autocomplete

Add payment methods: autocomplete, icons, book column and order icon set.

.gitignore

@@ -653,3 +653,5 @@ api/lightning/googleapis*
 frontend/static/admin*
 frontend/static/rest_framework*
 frontend/static/import_export*
+frontend/src/components/payment-method-images/code*
+frontend/src/components/payment-method-images/webp*

api/logics.py

@@ -709,12 +709,14 @@ class Logics:
         order.save()
         return
 
-    def publish_order(order):
+    @classmethod
+    def publish_order(cls, order):
         order.status = Order.Status.PUB
         order.expires_at = order.created_at + timedelta(
             seconds=order.t_to_expire(Order.Status.PUB))
         if order.has_range:
             order.amount = None
+            order.last_satoshis = cls.satoshis_now(order)
         order.save()
         # send_message.delay(order.id,'order_published') # too spammy
         return

api/models.py

@@ -196,7 +196,7 @@ class Order(models.Model):
     has_range = models.BooleanField(default=False, null=False, blank=False)
     min_amount = models.DecimalField(max_digits=18, decimal_places=8, null=True, blank=True)
     max_amount = models.DecimalField(max_digits=18, decimal_places=8, null=True, blank=True)
-    payment_method = models.CharField(max_length=35,
+    payment_method = models.CharField(max_length=70,
                                       null=False,
                                       default="not specified",
                                       blank=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",

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

@@ -5,6 +5,7 @@ import { DataGrid } from '@mui/x-data-grid';
 import MediaQuery from 'react-responsive'
 import Image from 'material-ui-image'
 import getFlags from './getFlags'
+import PaymentText from './PaymentText'
 
 export default class BookPage extends Component {
   constructor(props) {
@@ -149,7 +150,11 @@ export default class BookPage extends Component {
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
           }},
-          { field: 'payment_method', headerName: 'Payment Method', width: 180 },
+          { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
+          { field: 'payment_icons', headerName: 'Payment', width: 180 ,
+          renderCell: (params) => {return (
+            <div style={{ cursor: "pointer", align:"center"}}><PaymentText size={20} text={params.row.payment_method}/></div>
+          )} },
           { field: 'price', headerName: 'Price', type: 'number', width: 140,
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
@@ -195,7 +200,7 @@ export default class BookPage extends Component {
 
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
-          { field: 'robot', headerName: 'Robot', width: 80, 
+          { field: 'robot', headerName: 'Robot', width: 64, 
             renderCell: (params) => {return (
               <Tooltip placement="right" enterTouchDelay="0" title={params.row.robot+" ("+params.row.robot_status+")"}>
                 <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
@@ -213,19 +218,23 @@ export default class BookPage extends Component {
             );
           } },
           { field: 'type', headerName: 'Is', width: 60, hide:'true'},
-          { field: 'amount', headerName: 'Amount', type: 'number', width: 90, 
+          { field: 'amount', headerName: 'Amount', type: 'number', width: 84, 
           renderCell: (params) => {return (
             <Tooltip placement="right" enterTouchDelay="0" title={params.row.type}>
               <div style={{ cursor: "pointer" }}>{this.amountToString(params.row.amount,params.row.has_range, params.row.min_amount, params.row.max_amount)}</div>
             </Tooltip>
           )} },
-          { field: 'currency', headerName: 'Currency', width: 100, 
+          { field: 'currency', headerName: 'Currency', width: 85, 
           renderCell: (params) => {return (
-            <Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
+            // <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>
-            </Tooltip>
+            // </Tooltip>
           )} },
           { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
+          { field: 'payment_icons', headerName: 'Pay', width: 75 ,
+          renderCell: (params) => {return (
+            <div style={{position:'relative', left:'-8px', cursor: "pointer", align:"center"}}><PaymentText size={16} text={params.row.payment_method}/></div>
+          )} },
           { field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
@@ -261,6 +270,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 +292,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} 
@@ -332,7 +345,7 @@ export default class BookPage extends Component {
 
             {/* Smartphone Book */}
             <MediaQuery maxWidth={929}>
-              <Paper elevation={0} style={{width: 380, maxHeight: 450, overflow: 'auto'}}>
+              <Paper elevation={0} style={{width: 395, maxHeight: 450, overflow: 'auto'}}>
                   <this.bookListTablePhone/>
               </Paper>
             </MediaQuery>

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,12 +159,19 @@ export default class MakerPage extends Component {
         });
     }
 
-    handlePaymentMethodChange=(e)=>{
+    handlePaymentMethodChange=(value)=>{
+        if (value.length > 50){
             this.setState({
-            payment_method: e.target.value,
+                badPaymentMethod: true,    
-            badPaymentMethod: e.target.value.length > 35,    
+            });
+        }else{
+        this.setState({
+            payment_method: value.substring(0,53),
+            badPaymentMethod: value.length > 50,    
         });
     }
+    }
+
     handlePremiumChange=(e)=>{
         if(e.target.value > 999){
             var bad_premium = "Must be less than 999%"
@@ -214,7 +221,7 @@ export default class MakerPage extends Component {
             body: JSON.stringify({
                 type: this.state.type,
                 currency: this.state.currency,
-                amount: this.state.amount,
+                amount: this.state.has_range ? null : this.state.amount,
                 has_range: this.state.enableAmountRange,
                 min_amount: this.state.minAmount,
                 max_amount: this.state.maxAmount,
@@ -255,6 +262,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 +282,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 +307,7 @@ export default class MakerPage extends Component {
                         </div>
                         <div >
                             <Select
+                                sx={{width:'120px'}}
                                 required="true" 
                                 defaultValue={this.defaultCurrency} 
                                 inputProps={{
@@ -312,21 +322,14 @@ 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 ...)">
+                <Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title="Enter your preferred fiat payment methods. Fast methods are highly recommended.">
-                    <TextField 
+                    <AutocompletePayments
-                        sx={{width:240}}
+                        onAutocompleteChange={this.handlePaymentMethodChange}
-                        label={this.state.currency==1000 ? "Swap Destination (e.g. rBTC)":"Fiat Payment Method(s)"}
+                        optionsType={this.state.currency==1000 ? "swap":"fiat"}
                         error={this.state.badPaymentMethod}
-                        helperText={this.state.badPaymentMethod ? "Must be shorter than 35 characters":""}
+                        helperText={this.state.badPaymentMethod ? "Must be shorter than 65 characters":""}
-                        type="text" 
+                        label={this.state.currency==1000 ? "Swap Destination(s)" : "Fiat Payment Method(s)"}
-                        require={true}  
-                        inputProps={{
-                            style: {textAlign:"center"},
-                            maxLength: 35
-                        }}
-                        onChange={this.handlePaymentMethodChange}
                         />
                 </Tooltip>
             </Grid>
@@ -492,7 +495,7 @@ export default class MakerPage extends Component {
                     size="small"
                     value={this.state.minAmount}
                     onChange={this.handleMinAmountChange}
-                    error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount}
+                    error={this.state.minAmount < this.getMinAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
                     sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
                   />
                 <span style={{width: 20}}>to</span>
@@ -501,7 +504,7 @@ export default class MakerPage extends Component {
                     size="small"
                     type="number" 
                     value={this.state.maxAmount}
-                    error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount}
+                    error={this.state.maxAmount > this.getMaxAmount() || this.state.maxAmount < this.state.minAmount || this.state.minAmount < this.state.maxAmount/(this.maxRangeAmountMultiple+0.15) || this.state.minAmount*(this.minRangeAmountMultiple-0.1) > this.state.maxAmount}
                     onChange={this.handleMaxAmountChange}
                     sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
                   />

frontend/src/components/OrderPage.js

@@ -3,6 +3,7 @@ import {TextField,Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgres
 import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
 import MediaQuery from 'react-responsive'
 
+import PaymentText from './PaymentText'
 import TradeBox from "./TradeBox";
 import getFlags from './getFlags'
 
@@ -562,7 +563,7 @@ export default class OrderPage extends Component {
               <ListItemIcon>
                 <PaymentsIcon/>
               </ListItemIcon>
-              <ListItemText primary={this.state.payment_method} secondary={this.state.currency==1000 ? "Swap destination":"Accepted payment methods"}/>
+              <ListItemText primary={<PaymentText size={20} verbose={true} text={this.state.payment_method}/>} secondary={this.state.currency==1000 ? "Swap destination":"Accepted payment methods"}/>
             </ListItem>
             <Divider />
 

frontend/src/components/PaymentText.js

@@ -0,0 +1,96 @@
+import PaymentIcon from './PaymentIcons'
+import React, { Component } from 'react'
+import {Tooltip} from "@mui/material"
+import { intlFormat } from 'date-fns';
+
+const someMethods = [
+    {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'},
+    {name: "On-Chain BTC",icon:'onchain'},
+    {name: "RBTC",icon:'rbtc'},
+    {name: "LBTC",icon:'lbtc'},
+    {name: "WBTC",icon:'wbtc'},
+  ];
+
+export default class PaymentText extends Component {
+    constructor(props) {
+      super(props);
+    }
+    
+
+    parseText(){
+        var rows = [];
+        var custom_methods = this.props.text;
+        // Adds icons for each PaymentMethod that matches
+        someMethods.forEach((method, i) =>{
+            if(this.props.text.includes(method.name)){
+                custom_methods = custom_methods.replace(method.name,'')
+                rows.push(
+                    <Tooltip placement="top" enterTouchDelay="0" title={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>
+                    </Tooltip>
+                );
+            }
+        })
+
+        // Adds a Custom icon if there are words that do not match
+        var words = this.props.text.match(/\b(\w+)\b/g)
+        var custom = false
+        words.forEach((word, i) =>{
+            if(!someMethods.map(item => item.name).includes(word)){ custom=true;}
+        });
+
+        if(custom==true){rows.push(
+            <Tooltip placement="top" enterTouchDelay="0" title={this.props.verbose ? "Others": "Other: "+ custom_methods} >
+                <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'1px'}}>
+                    <PaymentIcon width={this.props.size*1.1} height={this.props.size*1.1} icon={"custom"}/>
+                </div>
+            </Tooltip>
+            )}
+
+        if(this.props.verbose){
+            return (<>{rows} <span>{custom_methods}</span></>)
+        }else{
+            return rows
+        }
+    }
+
+    render() {
+      return ( 
+        <div style={{position:'flex',alignItems:'center', flexWrap:'wrap'}}>
+            {this.parseText()}
+        </div>
+      )
+    }
+  };

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,316 @@
+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 , error}) => `
+  color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') :  (error? '#dd0000':'#717171')};
+  aling: center;
+  padding: 0 0 4px;
+  line-height: 1.5; f44336
+  display: block;
+  font-size: 13px;
+`,
+);
+
+const InputWrapper = styled('div')(
+  ({ theme , error}) => `
+  width: 244px;
+  min-height: 44px;
+  max-height: 124px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#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' ? (error? '#f44336':'#ffffff') : (error? '#dd0000' :'#2f2f2f')};
+  }
+
+  &.focused {
+    border: 2px solid ${theme.palette.mode === 'dark' ? (error? '#f44336':'#90caf9') : (error? '#dd0000' :'#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: 124px;
+  }
+`,
+);
+
+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: 141px;
+  line-height:10px;
+  max-height: 10px;
+  display: inline-block;
+  background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'};
+  font-size: 12px;
+  pointer-events: none;
+`,
+);
+
+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: props.optionsType=="fiat" ? somePaymentMethods : someSwapDestinations,
+    getOptionLabel: (option) => option.name,
+    onInputChange: (e) => setVal(e ? (e.target.value ? e.target.value : "") : ""),
+    onChange: (event, value) => props.onAutocompleteChange(optionsToString(value)),
+    onClose: () => (setVal(() => "")),
+  });
+
+  const [val, setVal] = useState();
+
+  function optionsToString(newValue){
+    var str = '';
+    var arrayLength = newValue.length;
+      for (var i = 0; i < arrayLength; i++) {
+          str += newValue[i].name + ' ';
+      }
+    return str.slice(0, -1);
+  }
+
+  function handleAddNew(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(value))}
+    return false
+  };
+
+  return (
+    <Root>
+      <div style={{height:'5px'}}></div>
+      <div {...getRootProps()} >
+        
+        <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 })} />
+          ))}
+          <input {...getInputProps()} value={val}/>
+        </InputWrapper>
+      </div>
+      {groupedOptions.length > 0 ? (
+        <Listbox {...getListboxProps()}>
+            <div style={{position:'fixed', minHeight:'20px',  marginLeft: '53px', marginTop: '-13px'}}>
+                <ListHeader><i>You can add any method </i></ListHeader>
+            </div>
+            {val != null?
+              (val.length > 2 ?
+                <div style={{position:'relative',top:'3px'}}>
+                  <Button size="small" sx={{width:'240px'}} onClick={() => handleAddNew(getInputProps())}><DashboardCustomizeIcon sx={{width:18,height:18}}/>Add</Button>
+                </div>
+              :null)
+            :null}
+          {groupedOptions.map((option, index) => (
+            <li {...getOptionProps({ option, index })}>
+              <span style={{textAlign: '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 sx={{width:20,height:20}}/>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'},
+];
+
+var someSwapDestinations = [
+  {name: "On-Chain BTC",icon:'onchain'},
+  {name: "RBTC",icon:'rbtc'},
+  {name: "LBTC",icon:'lbtc'},
+  {name: "WBTC",icon:'wbtc'},
+];

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}
-    if(code == 'XAU') return '🟨';
+    var flag = "";
     
-    if(code == 'AZN') return '🇦🇿'; // code AZ not working
+    if(code == 'AUD') flag = <Flags.AU {...props}/>;
-    if(code == 'XOF') code = 'SN';
+    if(code == 'ARS') flag = <Flags.AR {...props}/>;
-    if(code == 'ANG') code = 'CW';
+    if(code == 'BRL') flag = <Flags.BR {...props}/>;
-    return <div style={{width:24, height: 18}}><Flag country={code.substring(0,2)} size={18}/></div>;
+    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 == '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`