@lifi/widget 3.27.6 → 3.29.0-beta.0

package/src/pages/SelectEnabledToolsPage.tsx

@@ -1,25 +1,16 @@
-import type { ToolsResponse } from '@lifi/sdk'
-import Check from '@mui/icons-material/Check'
-import CheckBoxOutlineBlankOutlined from '@mui/icons-material/CheckBoxOutlineBlankOutlined'
-import CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined'
-import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'
+import { Checkbox, debounce, Tooltip } from '@mui/material'
+import type { ChangeEvent } from 'react'
 import {
-  Avatar,
-  debounce,
-  IconButton,
-  ListItemAvatar,
-  Tooltip,
-  useTheme,
-} from '@mui/material'
-import type { MouseEventHandler } from 'react'
-import { type FormEventHandler, useMemo, useState } from 'react'
+  type FormEventHandler,
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { FullPageContainer } from '../components/FullPageContainer.js'
-import { ListItemText } from '../components/ListItemText.js'
 import { StickySearchInput } from '../components/Search/SearchInput.js'
-import { SearchList } from '../components/Search/SearchInput.style.js'
-import { SearchNotFound } from '../components/Search/SearchNotFound.js'
-import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
+import { type ToolCollectionTypes, Tools } from '../components/Tools/Tools.js'
 import { useDefaultElementId } from '../hooks/useDefaultElementId.js'
 import { useHeader } from '../hooks/useHeader.js'
 import { useScrollableContainer } from '../hooks/useScrollableContainer.js'
@@ -29,63 +20,73 @@ import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
 
 interface SelectAllCheckboxProps {
   allCheckboxesSelected: boolean
-  onClick: MouseEventHandler
+  onClick: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void
   anyCheckboxesSelected: boolean
   noCheckboxesAvailable: boolean
 }
 
-const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
-  allCheckboxesSelected,
-  anyCheckboxesSelected,
-  noCheckboxesAvailable,
-  onClick,
-}) => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  const tooltipTitle = noCheckboxesAvailable
-    ? undefined
-    : allCheckboxesSelected
-      ? t('tooltip.deselectAll')
-      : t('tooltip.selectAll')
-
-  return (
-    <Tooltip title={tooltipTitle}>
-      <IconButton
-        size="medium"
-        edge={theme?.navigation?.edge ? 'end' : false}
-        onClick={onClick}
-      >
-        {allCheckboxesSelected ? (
-          <CheckBoxOutlined />
-        ) : anyCheckboxesSelected ? (
-          <IndeterminateCheckBoxOutlined />
-        ) : (
-          <CheckBoxOutlineBlankOutlined />
-        )}
-      </IconButton>
-    </Tooltip>
-  )
-}
+const SelectAllCheckbox = memo<SelectAllCheckboxProps>(
+  ({
+    allCheckboxesSelected,
+    anyCheckboxesSelected,
+    noCheckboxesAvailable,
+    onClick,
+  }) => {
+    const { t } = useTranslation()
+    const tooltipTitle = noCheckboxesAvailable
+      ? undefined
+      : allCheckboxesSelected
+        ? t('tooltip.deselectAll')
+        : t('tooltip.selectAll')
 
-type ToolCollectionTypes = ToolsResponse['exchanges'] | ToolsResponse['bridges']
+    return (
+      <Tooltip title={tooltipTitle}>
+        <Checkbox
+          id="select-all"
+          checked={allCheckboxesSelected}
+          indeterminate={anyCheckboxesSelected && !allCheckboxesSelected}
+          onChange={onClick}
+          disabled={noCheckboxesAvailable}
+          sx={{ mr: -1.5 }}
+        />
+      </Tooltip>
+    )
+  }
+)
 
 export const SelectEnabledToolsPage: React.FC<{
   type: 'Bridges' | 'Exchanges'
 }> = ({ type }) => {
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
   const { tools } = useTools()
-  const { setToolValue, toggleToolKeys } = useSettingsActions()
-  const [enabledTools, disabledTools] = useSettingsStore((state) => [
-    state[`_enabled${type}`],
-    state[`disabled${type}`],
-  ])
+  const { toggleToolKeys } = useSettingsActions()
+
+  const disabledTools = useSettingsStore((state) => state[`disabled${type}`])
 
   const { t } = useTranslation()
   const elementId = useDefaultElementId()
   const scrollableContainer = useScrollableContainer(elementId)
-  const [filteredTools, setFilteredTools] = useState<ToolCollectionTypes>(
-    tools?.[typeKey] ?? []
-  )
+  const [searchValue, setSearchValue] = useState('')
+
+  const filteredTools = useMemo(() => {
+    const toolsList = tools?.[typeKey] ?? []
+
+    if (!searchValue) {
+      return toolsList
+    }
+
+    const lowerSearchValue = searchValue.toLowerCase()
+    return toolsList.filter((tool) =>
+      tool.name.toLowerCase().includes(lowerSearchValue)
+    ) as ToolCollectionTypes
+  }, [tools, typeKey, searchValue])
+
+  const handleSelectAll = useCallback(() => {
+    toggleToolKeys(
+      type,
+      filteredTools.map((tool) => tool.key)
+    )
+  }, [toggleToolKeys, type, filteredTools])
 
   const headerAction = useMemo(
     () => (
@@ -99,42 +100,26 @@ export const SelectEnabledToolsPage: React.FC<{
           filteredTools.some((tool) => disabledTools.includes(tool.key))
         }
         noCheckboxesAvailable={!filteredTools.length}
-        onClick={() =>
-          toggleToolKeys(
-            type,
-            filteredTools.map((tool) => tool.key)
-          )
-        }
+        onClick={handleSelectAll}
       />
     ),
-    [disabledTools, toggleToolKeys, type, filteredTools]
+    [disabledTools, handleSelectAll, filteredTools]
   )
 
   useHeader(t(`settings.enabled${type}`), headerAction)
 
-  const handleClick = (key: string) => {
-    setToolValue(type, key, !enabledTools[key])
-  }
+  const handleSearchInputChange: FormEventHandler<HTMLInputElement> =
+    useCallback(
+      (e) => {
+        const value = (e.target as HTMLInputElement).value
+        setSearchValue(value)
 
-  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
-    const value = (e.target as HTMLInputElement).value
-
-    if (!value) {
-      setFilteredTools(tools?.[typeKey] ?? [])
-    } else {
-      setFilteredTools(
-        (tools?.[typeKey]
-          ? tools[typeKey].filter((tool) =>
-              tool.name.toLowerCase().includes(value.toLowerCase())
-            )
-          : []) as ToolCollectionTypes
-      )
-    }
-
-    if (scrollableContainer) {
-      scrollableContainer.scrollTop = 0
-    }
-  }
+        if (scrollableContainer) {
+          scrollableContainer.scrollTop = 0
+        }
+      },
+      [scrollableContainer]
+    )
 
   const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)
 
@@ -144,29 +129,7 @@ export const SelectEnabledToolsPage: React.FC<{
         onChange={debouncedSearchInputChange}
         placeholder={t(`main.search${type}`)}
       />
-      {filteredTools.length ? (
-        <SearchList className="long-list" data-testid={`${typeKey}-list`}>
-          {filteredTools.map((tool) => (
-            <SettingsListItemButton
-              key={tool.name}
-              onClick={() => handleClick(tool.key)}
-            >
-              <ListItemAvatar>
-                <Avatar src={tool.logoURI} alt={tool.name}>
-                  {tool.name[0]}
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={tool.name} />
-              {enabledTools[tool.key] && <Check color="primary" />}
-            </SettingsListItemButton>
-          ))}
-        </SearchList>
-      ) : (
-        <SearchNotFound
-          message={t(`info.message.empty${type}List`)}
-          adjustForStickySearchInput
-        />
-      )}
+      <Tools filteredTools={filteredTools} type={type} />
     </FullPageContainer>
   )
 }

package/src/stores/routes/createRouteExecutionStore.ts

@@ -86,19 +86,6 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
             })
           }
         },
-        restartRoute: (routeId: string) => {
-          if (get().routes[routeId]) {
-            set((state: RouteExecutionState) => ({
-              routes: {
-                ...state.routes,
-                [routeId]: {
-                  ...state.routes[routeId]!,
-                  status: RouteExecutionStatus.Pending,
-                },
-              },
-            }))
-          }
-        },
         deleteRoute: (routeId: string) => {
           if (get().routes[routeId]) {
             set((state: RouteExecutionState) => {

package/src/stores/routes/types.ts

@@ -9,7 +9,6 @@ export interface RouteExecutionState {
   routes: Partial<Record<string, RouteExecution>>
   setExecutableRoute: (route: Route, observableRouteIds?: string[]) => void
   updateRoute: (route: Route) => void
-  restartRoute: (routeId: string) => void
   deleteRoute: (routeId: string) => void
   deleteRoutes: (type: 'completed' | 'active') => void
 }

package/src/themes/createTheme.ts

@@ -475,6 +475,16 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       MuiNavigationTab: {
         ...widgetTheme.components?.MuiNavigationTab,
       },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            '&:hover': {
+              backgroundColor: 'transparent',
+            },
+          },
+        },
+        ...widgetTheme.components?.MuiCheckbox,
+      },
     },
   })
 

package/src/themes/windows95.ts

@@ -1,4 +1,4 @@
-import { tabsClasses } from '@mui/material'
+import { checkboxClasses, tabsClasses } from '@mui/material'
 import type { WidgetTheme } from '../types/widget.js'
 
 export const windows95Theme: WidgetTheme = {
@@ -113,5 +113,21 @@ export const windows95Theme: WidgetTheme = {
         },
       },
     },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: '#0a0a0a',
+          '&:hover': {
+            backgroundColor: 'transparent',
+          },
+          [`&.${checkboxClasses.checked}`]: {
+            color: '#0a0a0a',
+          },
+          [`&.${checkboxClasses.indeterminate}`]: {
+            color: '#0a0a0a',
+          },
+        },
+      },
+    },
   },
 }

package/src/types/widget.ts

@@ -65,6 +65,7 @@ export type WidgetThemeComponents = Partial<
     | 'MuiNavigationTabs'
     | 'MuiNavigationTab'
     | 'MuiTabs'
+    | 'MuiCheckbox'
   >
 >