Add string to icons. Add payment icons to order and book page.

docker-compose.yml

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

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:'-5px', 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>
@@ -336,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

@@ -221,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,
@@ -495,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>
@@ -504,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/PaymentIcons.js

@@ -1,6 +1,7 @@
 import { TextField } from '@mui/material';
 import React, { Component } from 'react';
 import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
+import {Tooltip} from "@mui/material"
 
 let icons = {
   airtel: {
@@ -159,7 +160,7 @@ export default class PaymentIcon extends Component {
   }
   
   render() {
-    if(this.props.icon==="custom"){return <div style={{maxWidht:'2px'}}><DashboardCustomizeIcon sx={{...this.props}} color="primary"/></div>}
+    if(this.props.icon==="custom"){return <DashboardCustomizeIcon sx={{...this.props}} color="primary"/>}
     return ( 
       <img {...this.props} src={icons[this.props.icon].image} style={{borderRadius: '23%'}}/>
     )

frontend/src/components/PaymentText.js

@@ -1,7 +1,9 @@
 import PaymentIcon from './PaymentIcons'
 import React, { Component } from 'react'
+import {Tooltip} from "@mui/material"
+import { intlFormat } from 'date-fns';
 
-const somePaymentMethods = [
+const someMethods = [
     {name: "Revolut",icon:'revolut'},
     {name: "CashApp",icon:'cashapp'},
     {name: "Zelle",icon:'zelle'},
@@ -27,18 +29,67 @@ const somePaymentMethods = [
     {name: "MercadoPago",icon:'mercadopago'},
     {name: "Monero",icon:'monero'},
     {name: "USDT",icon:'usdt'},
-    {name: "Dollar on Chain",icon:'doc'},
+    {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);
     }
-    this.props.text
+    
+
+    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+1, 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) =>{
+            console.log(word);
+            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+1, 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 ( 
-        <img {...this.props} src={icons[this.props.icon].image} style={{borderRadius: '23%'}}/>
+        <div style={{position:'flex',alignItems:'center', flexWrap:'wrap'}}> {this.parseText()}</div>
       )
     }
   };

frontend/src/components/autocompletePayments.js

@@ -32,8 +32,7 @@ const InputWrapper = styled('div')(
   ({ theme , error}) => `
   width: 244px;
   min-height: 44px;
-  max-height: 128px;
+  max-height: 124px;
-  max-rows: 5;
   border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')};
   background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'};
   border-radius: 4px;
@@ -65,7 +64,7 @@ const InputWrapper = styled('div')(
     border: 0;
     margin: 0;
     outline: 0;
-    max-height: 128px;
+    max-height: 124px;
   }
 `,
 );