RoboSats/robosats
1
1
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-09-11 14:05:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

Create FlagWithProps component

Browse Source 
This component replaces the function getFlags
This commit is contained in:
Fernando Porazzi 2022-05-06 11:32:37 +02:00
parent a1aa270cfd
commit 90939c42e5
No known key found for this signature in database
GPG Key ID: 9A3B39858C514F12
6 changed files with 113 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/BookPage.js
View File

@ -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
View 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
View File

@ -0,0 +1 @@
export { default } from "./FlagWithProps";

11
frontend/src/components/MakerPage.js
View File

@ -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>

4
frontend/src/components/OrderPage.js
View File

@ -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 ?

2
frontend/tsconfig.json
View File

@ -11,7 +11,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
"jsx": "react-jsx",
},
"include": ["src"]
}