Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-09 15:51:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor order type filter

Browse Source
This commit is contained in:
koalasat 2024-11-25 14:08:32 +01:00
parent ce4a96b9ca
commit 6f62e6602f
No known key found for this signature in database
GPG Key ID: 2F7F61C6146AB157
18 changed files with 196 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
frontend/src/components/BookTable/BookControl.tsx
View File

@ -1,21 +1,11 @@
import React, { useContext, useMemo } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Typography,
Grid,
ToggleButton,
ToggleButtonGroup,
Select,
Divider,
MenuItem,
Box,
Tooltip,
} from '@mui/material';
import { Typography, Grid, Select, Divider, MenuItem, Box } from '@mui/material';
import currencyDict from '../../../static/assets/currencies.json';
import { useTheme } from '@mui/system';
import { AutocompletePayments } from '../MakerForm';
import { fiatMethods, swapMethods, PaymentIcon } from '../PaymentMethods';
import { FlagWithProps } from '../Icons';
import { FlagWithProps, SendReceiveIcon } from '../Icons';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
@ -41,16 +31,24 @@ const BookControl = ({
const { t, i18n } = useTranslation();
const theme = useTheme();
const [typeZeroText, typeOneText, small, medium, large] = useMemo(() => {
const typeZeroText = fav.mode === 'fiat' ? t('Buy') : t('Swap In');
const typeOneText = fav.mode === 'fiat' ? t('Sell') : t('Swap Out');
const small =
(typeZeroText.length + typeOneText.length) * 0.7 + (fav.mode === 'fiat' ? 16 : 7.5);
const [orderType, setOrderType] = useState<string>('any');
const [small, medium, large] = useMemo(() => {
const small = fav.mode === 'fiat' ? 16 : 7.5;
const medium = small + 13;
const large = medium + (t('and use').length + t('pay with').length) * 0.6 + 5;
return [typeZeroText, typeOneText, small, medium, large];
return [small, medium, large];
}, [i18n.language, fav.mode]);
useEffect(() => {
if (fav.type === null) {
setOrderType('any');
} else if (fav.mode === 'fiat') {
setOrderType(fav.type === 0 ? 'buy' : 'sell');
} else {
setOrderType(fav.type === 0 ? 'swapout' : 'swapin');
}
}, [fav.mode, fav.type]);
const handleCurrencyChange = function (e: React.ChangeEvent<HTMLInputElement>): void {
const currency = Number(e.target.value);
setFav({ ...fav, currency, mode: currency === 1000 ? 'swap' : 'fiat' });
@ -61,14 +59,41 @@ const BookControl = ({
setFav({ ...fav, coordinator });
};
const handleTypeChange = function (mouseEvent: React.MouseEvent, val: number): void {
setFav({ ...fav, type: val });
const handleOrderTypeChange = (mouseEvent: React.MouseEvent, select: object): void => {
if (select.props.value === 'sell') {
const currency = fav.currency === 1000 ? 0 : fav.currency;
setFav({ ...fav, mode: 'fiat', type: 1, currency });
} else if (select.props.value === 'buy') {
const currency = fav.currency === 1000 ? 0 : fav.currency;
setFav({ ...fav, mode: 'fiat', type: 0, currency });
} else if (select.props.value === 'swapin') {
setFav({ ...fav, mode: 'swap', type: 1, currency: 1000 });
} else if (select.props.value === 'swapout') {
setFav({ ...fav, mode: 'swap', type: 0, currency: 1000 });
} else {
const currency = fav.currency === 1000 ? 0 : fav.currency;
setFav({ ...fav, mode: 'fiat', type: null, currency });
}
setOrderType(select.props.value);
};
const handleModeChange = function (mouseEvent: React.MouseEvent, val: number): void {
const mode = fav.mode === 'fiat' ? 'swap' : 'fiat';
const currency = fav.mode === 'fiat' ? 1000 : 0;
setFav({ ...fav, mode, currency });
const orderTypeIcon = (value: string): React.ReactNode => {
let component = <CheckBoxOutlineBlankIcon />;
if (value === 'sell') {
component = <SendReceiveIcon color='primary' />;
} else if (value === 'buy') {
component = <SendReceiveIcon color='secondary' />;
} else if (value === 'swapin') {
component = <SwapCalls color='primary' />;
} else if (value === 'swapout') {
component = <SwapCalls color='secondary' />;
}
return (
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', marginRight: 1 }}>
{component}
</div>
);
};
return (
@ -89,63 +114,69 @@ const BookControl = ({
</Grid>
) : null}
{width > small ? (
<Grid item>
<Tooltip
placement='bottom'
enterTouchDelay={200}
enterDelay={700}
enterNextDelay={2000}
title={t('Show Lightning swaps')}
>
<ToggleButtonGroup
sx={{
height: '2.6em',
backgroundColor: theme.palette.background.paper,
border: '0.5px solid',
borderColor: 'text.disabled',
'&:hover': {
borderColor: 'text.primary',
border: '1px solid',
},
}}
size='small'
exclusive={true}
value={fav.mode}
onChange={handleModeChange}
>
<ToggleButton value={'swap'} color={'secondary'}>
<SwapCalls />
</ToggleButton>
</ToggleButtonGroup>
</Tooltip>
</Grid>
) : null}
<Grid item>
<ToggleButtonGroup
<Select
sx={{
height: '2.6em',
backgroundColor: theme.palette.background.paper,
height: '2.3em',
border: '0.5px solid',
backgroundColor: theme.palette.background.paper,
borderRadius: '4px',
borderColor: 'text.disabled',
'&:hover': {
borderColor: 'text.primary',
border: '1px solid',
},
}}
size='small'
exclusive={true}
value={fav.type}
onChange={handleTypeChange}
label={t('Select Order Type')}
required={true}
value={orderType}
inputProps={{
style: { textAlign: 'center' },
}}
renderValue={orderTypeIcon}
onChange={handleOrderTypeChange}
>
<ToggleButton value={1} color={'primary'}>
{typeZeroText}
</ToggleButton>
<ToggleButton value={0} color={'secondary'}>
{typeOneText}
</ToggleButton>
</ToggleButtonGroup>
<MenuItem value='any' style={{ width: '8em' }}>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<CheckBoxOutlineBlankIcon />
<Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
{' ' + t('Any')}
</Typography>
</div>
</MenuItem>
<MenuItem value='sell' style={{ width: '8em' }}>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<SendReceiveIcon color='primary' />
<Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
{' ' + t('Sell')}
</Typography>
</div>
</MenuItem>
<MenuItem value='buy' style={{ width: '8em' }}>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<SendReceiveIcon color='secondary' />
<Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
{' ' + t('Buy')}
</Typography>
</div>
</MenuItem>
<MenuItem value='swapin' style={{ width: '8em' }}>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<SwapCalls color='primary' />
<Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
{' ' + t('Swap In')}
</Typography>
</div>
</MenuItem>
<MenuItem value='swapout' style={{ width: '8em' }}>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<SwapCalls color='secondary' />
<Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
{' ' + t('Swap Out')}
</Typography>
</div>
</MenuItem>
</Select>
</Grid>
{width > large && fav.mode === 'fiat' ? (
@ -318,68 +349,66 @@ const BookControl = ({
) : null}
{width > large ? (
<>
<Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'>
{fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')}
</Typography>
</Grid>
<Grid item>
<Select
autoWidth
sx={{
height: '2.3em',
border: '0.5px solid',
backgroundColor: theme.palette.background.paper,
borderRadius: '4px',
borderColor: 'text.disabled',
'&:hover': {
borderColor: 'text.primary',
},
}}
size='small'
label={t('Select Host')}
required={true}
value={fav.coordinator}
inputProps={{
style: { textAlign: 'center' },
}}
onChange={handleHostChange}
>
<MenuItem value='any'>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<FlagWithProps code='ANY' />
</div>
</MenuItem>
<MenuItem value='robosats'>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RoboSatsNoText sx={{ color: '#1976d2' }} />
</div>
</MenuItem>
{federation
.getCoordinators()
.filter((coord) => coord.enabled)
.map((coordinator) => (
<MenuItem
key={coordinator.shortAlias}
value={coordinator.shortAlias}
color='text.secondary'
>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RobotAvatar
shortAlias={coordinator.federated ? coordinator.shortAlias : undefined}
hashId={coordinator.federated ? undefined : coordinator.mainnet.onion}
style={{ width: '1.55em', height: '1.55em' }}
smooth={true}
small={true}
/>
</div>
</MenuItem>
))}
</Select>
</Grid>
</>
<Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'>
{fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')}
</Typography>
</Grid>
) : null}
<Grid item>
<Select
autoWidth
sx={{
height: '2.3em',
border: '0.5px solid',
backgroundColor: theme.palette.background.paper,
borderRadius: '4px',
borderColor: 'text.disabled',
'&:hover': {
borderColor: 'text.primary',
},
}}
size='small'
label={t('Select Host')}
required={true}
value={fav.coordinator}
inputProps={{
style: { textAlign: 'center' },
}}
onChange={handleHostChange}
>
<MenuItem value='any'>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<FlagWithProps code='ANY' />
</div>
</MenuItem>
<MenuItem value='robosats'>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RoboSatsNoText sx={{ color: '#1976d2' }} />
</div>
</MenuItem>
{federation
.getCoordinators()
.filter((coord) => coord.enabled)
.map((coordinator) => (
<MenuItem
key={coordinator.shortAlias}
value={coordinator.shortAlias}
color='text.secondary'
>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
<RobotAvatar
shortAlias={coordinator.federated ? coordinator.shortAlias : undefined}
hashId={coordinator.federated ? undefined : coordinator.mainnet.onion}
style={{ width: '1.55em', height: '1.55em' }}
smooth={true}
small={true}
/>
</div>
</MenuItem>
))}
</Select>
</Grid>
</Grid>
<Divider />
</Box>

3
frontend/static/locales/ca.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "TOT",
"Any": "Any",
"Buy": "Comprar",
"DESTINATION": "DESTÍ",
"I want to": "Vull",
"METHOD": "MÈTODE",
"Select Host": "Selecciona Amfitrió",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Selecciona moneda de pagament",
"Select Payment Method": "Tria mètode de pagament",
"Sell": "Vendre",
"Show Lightning swaps": "Mostra Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "i fer servir",

3
frontend/static/locales/cs.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "VŠE",
"Any": "Any",
"Buy": "Nákup",
"DESTINATION": "DESTINATION",
"I want to": "Já chci",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Vybrat měnu platby",
"Select Payment Method": "Select Payment Method",
"Sell": "Prodej",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "použít",

3
frontend/static/locales/de.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "ALLE",
"Any": "Any",
"Buy": "Kaufen",
"DESTINATION": "DESTINATION",
"I want to": "Ich möchte",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Währung auswählen",
"Select Payment Method": "Select Payment Method",
"Sell": "Verkaufen",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "und verwende",

3
frontend/static/locales/en.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "ANY",
"Any": "Any",
"Buy": "Buy",
"DESTINATION": "DESTINATION",
"I want to": "I want to",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Select Payment Currency",
"Select Payment Method": "Select Payment Method",
"Sell": "Sell",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "and use",

3
frontend/static/locales/es.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "TODO",
"Any": "Any",
"Buy": "Comprar",
"DESTINATION": "DESTINO",
"I want to": "Quiero",
"METHOD": "MÉTODO",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Selecciona moneda de pago",
"Select Payment Method": "Selecciona método de pago",
"Sell": "Vender",
"Show Lightning swaps": "Mostrar swaps Lightning",
"Swap In": "Swap a LN",
"Swap Out": "Swap desde LN",
"and use": "y usa",

3
frontend/static/locales/eu.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "ANY",
"Any": "Any",
"Buy": "Erosi",
"DESTINATION": "DESTINATION",
"I want to": "Nahi dut",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Aukeratu Ordainketa Txanpona",
"Select Payment Method": "Select Payment Method",
"Sell": "Saldu",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "eta erabili",

3
frontend/static/locales/fr.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "Tous",
"Any": "Any",
"Buy": "Acheter",
"DESTINATION": "DESTINATION",
"I want to": "Je veux",
"METHOD": "MÉTHODE",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Sélectionner la devise de paiement",
"Select Payment Method": "Sélectionner le mode de paiement",
"Sell": "Vendre",
"Show Lightning swaps": "Afficher les échanges Lightning",
"Swap In": "Échange LN->OC",
"Swap Out": "Échange OC->LN",
"and use": "et utiliser",

3
frontend/static/locales/it.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "QUALUNQUE",
"Any": "Any",
"Buy": "Compra",
"DESTINATION": "DESTINAZIONE",
"I want to": "Voglio",
"METHOD": "METODO",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Seleziona valuta di pagamento",
"Select Payment Method": "Seleziona il metodo di pagamento",
"Sell": "Vendere",
"Show Lightning swaps": "Mostra gli swap Lightning",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "ed usa",

3
frontend/static/locales/ja.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "すべて",
"Any": "Any",
"Buy": "購入",
"DESTINATION": "方向",
"I want to": "私はしたいのは：",
"METHOD": "方法",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "支払い通貨を選択してください。",
"Select Payment Method": "支払い方法を選択してください。",
"Sell": "売る",
"Show Lightning swaps": "ライトニングスワップを表示します。",
"Swap In": "スワップイン",
"Swap Out": "スワップアウト",
"and use": "そして使用するのは",

3
frontend/static/locales/pl.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "KAŻDY",
"Any": "Any",
"Buy": "Kupić",
"DESTINATION": "DESTINATION",
"I want to": "chcę",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Wybierz walutę płatności",
"Select Payment Method": "Select Payment Method",
"Sell": "Sprzedać",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "i użyć",

3
frontend/static/locales/pt.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "QUALQUER",
"Any": "Any",
"Buy": "Comprar",
"DESTINATION": "DESTINATION",
"I want to": "Eu quero",
"METHOD": "MÉTODO",
"Select Host": "Selecione Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Selecione a moeda de pagamento",
"Select Payment Method": "Selecione método de pagamento",
"Sell": "Vender",
"Show Lightning swaps": "Mostrar Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "e utilizar",

3
frontend/static/locales/ru.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "Любой",
"Any": "Any",
"Buy": "Купить",
"DESTINATION": "МЕСТО НАЗНАЧЕНИЯ",
"I want to": "Я хочу",
"METHOD": "МЕТОД",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Выбрать Валюту",
"Select Payment Method": "Выбрать способ оплаты",
"Sell": "Продать",
"Show Lightning swaps": "Показать Лайтнинг свопы",
"Swap In": "Своп в",
"Swap Out": "Своп из",
"and use": "и использовать",

3
frontend/static/locales/sv.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "ALLA",
"Any": "Any",
"Buy": "Köpa",
"DESTINATION": "DESTINATION",
"I want to": "Jag vill",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Välj betalningsvaluta",
"Select Payment Method": "Select Payment Method",
"Sell": "Sälja",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "och använda",

3
frontend/static/locales/sw.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "Yoyote",
"Any": "Any",
"Buy": "Nunua",
"DESTINATION": "MAELEKEZO",
"I want to": "Nataka",
"METHOD": "NJIA",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "Chagua Sarafu ya Malipo",
"Select Payment Method": "Chagua Njia ya Malipo",
"Sell": "Uza",
"Show Lightning swaps": "Onyesha Kubadilishana kwa Lightning",
"Swap In": "Badilisha Ndani",
"Swap Out": "Badilisha Nje",
"and use": "na tumia",

3
frontend/static/locales/th.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "ANY",
"Any": "Any",
"Buy": "ซื้อ",
"DESTINATION": "DESTINATION",
"I want to": "ฉันต้องการ",
"METHOD": "METHOD",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "เลือกสกุลเงิน",
"Select Payment Method": "Select Payment Method",
"Sell": "ขาย",
"Show Lightning swaps": "Show Lightning swaps",
"Swap In": "Swap In",
"Swap Out": "Swap Out",
"and use": "และใช้",

3
frontend/static/locales/zh-SI.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "任何",
"Any": "Any",
"Buy": "购买",
"DESTINATION": "目的地",
"I want to": "我想要",
"METHOD": "方式",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "选择支付货币",
"Select Payment Method": "选择付款方式",
"Sell": "出售",
"Show Lightning swaps": "显示闪电交换",
"Swap In": "换入",
"Swap Out": "换出",
"and use": "并使用",

3
frontend/static/locales/zh-TR.json
View File

@ -76,15 +76,16 @@
"URL": "URL",
"#13": "Phrases in components/BookTable/BookControl.tsx",
"ANY": "任何",
"Any": "Any",
"Buy": "購買",
"DESTINATION": "目的地",
"I want to": "我想要",
"METHOD": "方式",
"Select Host": "Select Host",
"Select Order Type": "Select Order Type",
"Select Payment Currency": "選擇支付貨幣",
"Select Payment Method": "選擇付款方式",
"Sell": "出售",
"Show Lightning swaps": "顯示閃電交換",
"Swap In": "換入",
"Swap Out": "換出",
"and use": "並使用",