mirror of
https://github.com/RoboSats/robosats.git
synced 2024-09-11 14:05:51 +03:00
Create FlagWithProps component
This component replaces the function getFlags
This commit is contained in:
parent
a1aa270cfd
commit
90939c42e5
@ -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>
|
||||
|
89
frontend/src/components/FlagWithProps/FlagWithProps.tsx
Normal file
89
frontend/src/components/FlagWithProps/FlagWithProps.tsx
Normal file
@ -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;
|
1
frontend/src/components/FlagWithProps/index.ts
Normal file
1
frontend/src/components/FlagWithProps/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./FlagWithProps";
|
@ -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>
|
||||
|
@ -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 ?
|
||||
|
@ -11,7 +11,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
"jsx": "react-jsx",
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user