Refactor order type filter

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 {
+import { Typography, Grid, Select, Divider, MenuItem, Box } from '@mui/material';
-  Typography,
-  Grid,
-  ToggleButton,
-  ToggleButtonGroup,
-  Select,
-  Divider,
-  MenuItem,
-  Box,
-  Tooltip,
-} 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 [orderType, setOrderType] = useState<string>('any');
-    const typeZeroText = fav.mode === 'fiat' ? t('Buy') : t('Swap In');
+  const [small, medium, large] = useMemo(() => {
-    const typeOneText = fav.mode === 'fiat' ? t('Sell') : t('Swap Out');
+    const small = fav.mode === 'fiat' ? 16 : 7.5;
-    const small =
-      (typeZeroText.length + typeOneText.length) * 0.7 + (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 {
+  const handleOrderTypeChange = (mouseEvent: React.MouseEvent, select: object): void => {
-    setFav({ ...fav, type: val });
+    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 orderTypeIcon = (value: string): React.ReactNode => {
-    const mode = fav.mode === 'fiat' ? 'swap' : 'fiat';
+    let component = <CheckBoxOutlineBlankIcon />;
-    const currency = fav.mode === 'fiat' ? 1000 : 0;
+    if (value === 'sell') {
-    setFav({ ...fav, mode, currency });
+      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
+          <Select
-              placement='bottom'
-              enterTouchDelay={200}
-              enterDelay={700}
-              enterNextDelay={2000}
-              title={t('Show Lightning swaps')}
-            >
-              <ToggleButtonGroup
             sx={{
-                  height: '2.6em',
+              height: '2.3em',
-                  backgroundColor: theme.palette.background.paper,
               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}
+            label={t('Select Order Type')}
-                value={fav.mode}
+            required={true}
-                onChange={handleModeChange}
+            value={orderType}
-              >
+            inputProps={{
-                <ToggleButton value={'swap'} color={'secondary'}>
+              style: { textAlign: 'center' },
-                  <SwapCalls />
-                </ToggleButton>
-              </ToggleButtonGroup>
-            </Tooltip>
-          </Grid>
-        ) : null}
-
-        <Grid item>
-          <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'
+            renderValue={orderTypeIcon}
-            exclusive={true}
+            onChange={handleOrderTypeChange}
-            value={fav.type}
-            onChange={handleTypeChange}
           >
-            <ToggleButton value={1} color={'primary'}>
+            <MenuItem value='any' style={{ width: '8em' }}>
-              {typeZeroText}
+              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-            </ToggleButton>
+                <CheckBoxOutlineBlankIcon />
-            <ToggleButton value={0} color={'secondary'}>
+                <Typography sx={{ width: '2em' }} align='right' color='text.secondary'>
-              {typeOneText}
+                  {' ' + t('Any')}
-            </ToggleButton>
+                </Typography>
-          </ToggleButtonGroup>
+              </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,12 +349,12 @@ 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>
+        ) : null}
         <Grid item>
           <Select
             autoWidth
@@ -378,8 +409,6 @@ const BookControl = ({
               ))}
           </Select>
         </Grid>
-          </>
-        ) : null}
       </Grid>
       <Divider />
     </Box>

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",

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",

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",

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",

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",

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",

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",

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",

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": "そして使用するのは",

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ć",

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",

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": "и использовать",

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",

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",

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": "และใช้",

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": "并使用",

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": "並使用",