feat: add checkboxes to bridges and exchanges selection

lifinance · Sep 5, 2022 · 88a4e5d · 88a4e5d
1 parent 3c4d3fe
commit 88a4e5d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git 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
@@ -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>