From 88a4e5d2707d6f9f24262c52f37134d1459bb0ac Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Mon, 5 Sep 2022 12:31:54 +0100
Subject: [PATCH] feat: add checkboxes to bridges and exchanges selection

---
 .../SettingsPage/EnabledBridgesSelect.tsx     | 18 ++++++++++++++---
 .../SettingsPage/EnabledExchangesSelect.tsx   | 20 +++++++++++++++----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/widget/src/pages/SettingsPage/EnabledBridgesSelect.tsx b/packages/widget/src/pages/SettingsPage/EnabledBridgesSelect.tsx
index b3a666bf6..6b64d3437 100644
--- a/packages/widget/src/pages/SettingsPage/EnabledBridgesSelect.tsx
+++ b/packages/widget/src/pages/SettingsPage/EnabledBridgesSelect.tsx
@@ -1,6 +1,13 @@
 import type { Bridge } from '@lifi/sdk';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import {
+  Box,
+  Checkbox,
+  Chip,
+  FormControl,
+  MenuItem,
+  Skeleton,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
@@ -23,7 +30,7 @@ export const EnabledBridgesSelect: React.FC = () => {
         <Select
           multiple
           placeholder={t(`settings.selectEnabledBridges`)}
-          MenuProps={{ elevation: 2 }}
+          MenuProps={{ elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }}
           IconComponent={KeyboardArrowDownIcon}
           value={enabledBridges ?? []}
           onChange={(event) => {
@@ -41,7 +48,12 @@ export const EnabledBridgesSelect: React.FC = () => {
           )}
         >
           {tools.bridges.map((bridge: Bridge) => (
-            <MenuItem key={bridge.key} value={bridge.key}>
+            <MenuItem
+              key={bridge.key}
+              value={bridge.key}
+              sx={{ paddingTop: 0, paddingBottom: 0 }}
+            >
+              <Checkbox checked={enabledBridges?.includes(bridge.key)} />
               {bridge.name}
             </MenuItem>
           ))}
diff --git a/packages/widget/src/pages/SettingsPage/EnabledExchangesSelect.tsx b/packages/widget/src/pages/SettingsPage/EnabledExchangesSelect.tsx
index 06bbd0205..cead7577a 100644
--- a/packages/widget/src/pages/SettingsPage/EnabledExchangesSelect.tsx
+++ b/packages/widget/src/pages/SettingsPage/EnabledExchangesSelect.tsx
@@ -1,5 +1,12 @@
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import { Box, Chip, FormControl, MenuItem, Skeleton } from '@mui/material';
+import {
+  Box,
+  Checkbox,
+  Chip,
+  FormControl,
+  MenuItem,
+  Skeleton,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
@@ -30,7 +37,7 @@ export const EnabledExchangesSelect: React.FC = () => {
               tools.exchanges,
             );
           }}
-          MenuProps={{ elevation: 2 }}
+          MenuProps={{ elevation: 2, PaperProps: { sx: { maxHeight: 320 } } }}
           IconComponent={KeyboardArrowDownIcon}
           renderValue={(selected) => (
             <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
@@ -44,8 +51,13 @@ export const EnabledExchangesSelect: React.FC = () => {
           )}
         >
           {tools.exchanges.map((exchange) => (
-            <MenuItem key={exchange.key} value={exchange.key}>
-              {exchange.key}
+            <MenuItem
+              key={exchange.key}
+              value={exchange.key}
+              sx={{ paddingTop: 0, paddingBottom: 0 }}
+            >
+              <Checkbox checked={enabledExchanges?.includes(exchange.key)} />
+              {exchange.name}
             </MenuItem>
           ))}
         </Select>