diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx index a182408b..58e1e3af 100644 --- a/frontend/src/components/BookTable/BookControl.tsx +++ b/frontend/src/components/BookTable/BookControl.tsx @@ -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('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): 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 = ; + if (value === 'sell') { + component = ; + } else if (value === 'buy') { + component = ; + } else if (value === 'swapin') { + component = ; + } else if (value === 'swapout') { + component = ; + } + + return ( +
+ {component} +
+ ); }; return ( @@ -89,63 +114,69 @@ const BookControl = ({ ) : null} - {width > small ? ( - - - - - - - - - - ) : null} - - - - {typeZeroText} - - - {typeOneText} - - + +
+ + + {' ' + t('Any')} + +
+ + +
+ + + {' ' + t('Sell')} + +
+ + +
+ + + {' ' + t('Buy')} + +
+ + +
+ + + {' ' + t('Swap In')} + +
+ + +
+ + + {' ' + t('Swap Out')} + +
+ + {width > large && fav.mode === 'fiat' ? ( @@ -318,68 +349,66 @@ const BookControl = ({ ) : null} {width > large ? ( - <> - - - {fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')} - - - - - - + + + {fav.currency === 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('hosted by')} + + ) : null} + + + diff --git a/frontend/static/locales/ca.json b/frontend/static/locales/ca.json index fe3e4816..670b4805 100644 --- a/frontend/static/locales/ca.json +++ b/frontend/static/locales/ca.json @@ -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", diff --git a/frontend/static/locales/cs.json b/frontend/static/locales/cs.json index 64ffa9db..17105da9 100644 --- a/frontend/static/locales/cs.json +++ b/frontend/static/locales/cs.json @@ -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", diff --git a/frontend/static/locales/de.json b/frontend/static/locales/de.json index d0e9885b..5d63d6d5 100644 --- a/frontend/static/locales/de.json +++ b/frontend/static/locales/de.json @@ -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", diff --git a/frontend/static/locales/en.json b/frontend/static/locales/en.json index 48f45e96..f2bc7d02 100644 --- a/frontend/static/locales/en.json +++ b/frontend/static/locales/en.json @@ -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", diff --git a/frontend/static/locales/es.json b/frontend/static/locales/es.json index 7e895281..c8c8477c 100644 --- a/frontend/static/locales/es.json +++ b/frontend/static/locales/es.json @@ -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", diff --git a/frontend/static/locales/eu.json b/frontend/static/locales/eu.json index a62e4cc3..555d7338 100644 --- a/frontend/static/locales/eu.json +++ b/frontend/static/locales/eu.json @@ -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", diff --git a/frontend/static/locales/fr.json b/frontend/static/locales/fr.json index def2ac2e..b0b631e0 100644 --- a/frontend/static/locales/fr.json +++ b/frontend/static/locales/fr.json @@ -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", diff --git a/frontend/static/locales/it.json b/frontend/static/locales/it.json index 76d1017f..93ea69d9 100644 --- a/frontend/static/locales/it.json +++ b/frontend/static/locales/it.json @@ -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", diff --git a/frontend/static/locales/ja.json b/frontend/static/locales/ja.json index 6f2e0082..43e7a3b1 100644 --- a/frontend/static/locales/ja.json +++ b/frontend/static/locales/ja.json @@ -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": "そして使用するのは", diff --git a/frontend/static/locales/pl.json b/frontend/static/locales/pl.json index 27eda701..9fcb2b66 100644 --- a/frontend/static/locales/pl.json +++ b/frontend/static/locales/pl.json @@ -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ć", diff --git a/frontend/static/locales/pt.json b/frontend/static/locales/pt.json index 24288734..cee04adc 100644 --- a/frontend/static/locales/pt.json +++ b/frontend/static/locales/pt.json @@ -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", diff --git a/frontend/static/locales/ru.json b/frontend/static/locales/ru.json index 1c894a9f..68709c55 100644 --- a/frontend/static/locales/ru.json +++ b/frontend/static/locales/ru.json @@ -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": "и использовать", diff --git a/frontend/static/locales/sv.json b/frontend/static/locales/sv.json index 9f06967f..58f2934f 100644 --- a/frontend/static/locales/sv.json +++ b/frontend/static/locales/sv.json @@ -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", diff --git a/frontend/static/locales/sw.json b/frontend/static/locales/sw.json index 342ae84c..d866a857 100644 --- a/frontend/static/locales/sw.json +++ b/frontend/static/locales/sw.json @@ -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", diff --git a/frontend/static/locales/th.json b/frontend/static/locales/th.json index 04d403b2..ec74624f 100644 --- a/frontend/static/locales/th.json +++ b/frontend/static/locales/th.json @@ -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": "และใช้", diff --git a/frontend/static/locales/zh-SI.json b/frontend/static/locales/zh-SI.json index 8a22aec5..726dfa45 100644 --- a/frontend/static/locales/zh-SI.json +++ b/frontend/static/locales/zh-SI.json @@ -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": "并使用", diff --git a/frontend/static/locales/zh-TR.json b/frontend/static/locales/zh-TR.json index 0ee1c4d7..de00cb01 100644 --- a/frontend/static/locales/zh-TR.json +++ b/frontend/static/locales/zh-TR.json @@ -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": "並使用",