@lifi/widget 3.7.0-beta.6 → 3.7.0

package/pages/SelectEnabledToolsPage.tsx

@@ -1,3 +1,4 @@
+import type { ToolsResponse } from '@lifi/sdk';
 import {
   Check,
   CheckBoxOutlineBlankOutlined,
@@ -6,20 +7,25 @@ import {
 } from '@mui/icons-material';
 import {
   Avatar,
+  debounce,
   IconButton,
-  List,
   ListItemAvatar,
   Tooltip,
   useTheme,
 } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-import { useMemo } from 'react';
+import { type FormEventHandler, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
+import { FullPageContainer } from '../components/FullPageContainer.js';
 import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.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 { useDefaultElementId } from '../hooks/useDefaultElementId.js';
 import { useHeader } from '../hooks/useHeader.js';
+import { useScrollableContainer } from '../hooks/useScrollableContainer.js';
 import { useTools } from '../hooks/useTools.js';
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
 
@@ -27,18 +33,22 @@ interface SelectAllCheckboxProps {
   allCheckboxesSelected: boolean;
   onClick: MouseEventHandler;
   anyCheckboxesSelected: boolean;
+  noCheckboxesAvailable: boolean;
 }
 
 const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   allCheckboxesSelected,
   anyCheckboxesSelected,
+  noCheckboxesAvailable,
   onClick,
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const tooltipTitle = allCheckboxesSelected
-    ? t('tooltip.deselectAll')
-    : t('tooltip.selectAll');
+  const tooltipTitle = noCheckboxesAvailable
+    ? undefined
+    : allCheckboxesSelected
+      ? t('tooltip.deselectAll')
+      : t('tooltip.selectAll');
 
   return (
     <Tooltip title={tooltipTitle}>
@@ -59,33 +69,54 @@ const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
   );
 };
 
+type ToolCollectionTypes =
+  | ToolsResponse['exchanges']
+  | ToolsResponse['bridges'];
+
 export const SelectEnabledToolsPage: React.FC<{
   type: 'Bridges' | 'Exchanges';
 }> = ({ type }) => {
   const typeKey = type.toLowerCase() as 'bridges' | 'exchanges';
   const { tools } = useTools();
-  const [enabledTools, disabledTools, setToolValue, toggleTools] =
+  const [enabledTools, disabledTools, setToolValue, toggleToolKeys] =
     useSettingsStore(
       (state) => [
         state[`_enabled${type}`],
         state[`disabled${type}`],
         state.setToolValue,
-        state.toggleTools,
+        state.toggleToolKeys,
       ],
       shallow,
     );
 
   const { t } = useTranslation();
+  const elementId = useDefaultElementId();
+  const scrollableContainer = useScrollableContainer(elementId);
+  const [filteredTools, setFilteredTools] = useState<ToolCollectionTypes>(
+    tools?.[typeKey] ?? [],
+  );
 
   const headerAction = useMemo(
     () => (
       <SelectAllCheckbox
-        allCheckboxesSelected={!disabledTools.length}
-        anyCheckboxesSelected={Boolean(disabledTools.length)}
-        onClick={() => toggleTools(type)}
+        allCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.every((tool) => !disabledTools.includes(tool.key))
+        }
+        anyCheckboxesSelected={
+          !!filteredTools.length &&
+          filteredTools.some((tool) => disabledTools.includes(tool.key))
+        }
+        noCheckboxesAvailable={!filteredTools.length}
+        onClick={() =>
+          toggleToolKeys(
+            type,
+            filteredTools.map((tool) => tool.key),
+          )
+        }
       />
     ),
-    [disabledTools.length, toggleTools, type],
+    [disabledTools, toggleToolKeys, type, filteredTools],
   );
 
   useHeader(t(`settings.enabled${type}`), headerAction);
@@ -94,31 +125,57 @@ export const SelectEnabledToolsPage: React.FC<{
     setToolValue(type, key, !enabledTools[key]);
   };
 
+  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;
+    }
+  };
+
+  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
+
   return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {tools?.[typeKey].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>
-        ))}
-      </List>
-    </PageContainer>
+    <FullPageContainer disableGutters>
+      <StickySearchInput
+        onChange={debouncedSearchInputChange}
+        placeholder={t(`main.search${type}`)}
+      />
+      {filteredTools.length ? (
+        <SearchList>
+          {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
+        />
+      )}
+    </FullPageContainer>
   );
 };

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,11 +1,8 @@
-import { Search } from '@mui/icons-material';
-import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { InputCard } from '../../components/Card/InputCard.js';
+import { SearchInput } from '../../components/Search/SearchInput.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
-import { Input } from './SearchTokenInput.style.js';
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation();
@@ -22,27 +19,12 @@ export const SearchTokenInput = () => {
   );
 
   return (
-    <InputCard>
-      <FormControl fullWidth>
-        <Input
-          size="small"
-          placeholder={t(`main.tokenSearch`) as string}
-          endAdornment={
-            <InputAdornment position="end">
-              <Search />
-            </InputAdornment>
-          }
-          inputProps={{
-            inputMode: 'search',
-            onChange: (e) => onChange((e.target as HTMLInputElement).value),
-            onBlur,
-            name,
-            value,
-            maxLength: 128,
-          }}
-          autoComplete="off"
-        />
-      </FormControl>
-    </InputCard>
+    <SearchInput
+      name={name}
+      placeholder={t(`main.tokenSearch`)}
+      onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+      onBlur={onBlur}
+      value={value as string | undefined}
+    />
   );
 };

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
-import { PageContainer } from '../../components/PageContainer.js';
+import { FullPageContainer } from '../../components/FullPageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
@@ -40,7 +40,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
-    <PageContainer disableGutters>
+    <FullPageContainer disableGutters>
       <Box pb={2} px={3} ref={headerRef}>
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
@@ -55,6 +55,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           formType={formType}
         />
       </Box>
-    </PageContainer>
+    </FullPageContainer>
   );
 };

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -1,30 +1,21 @@
-import { useTheme } from '@mui/material';
+import { debounce, useTheme } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { ElementId, createElementId } from '../../utils/elements.js';
-
-const debounce = (func: Function, timeout = 300) => {
-  let timer: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
-};
+import {
+  ElementId,
+  getAppContainer,
+  getHeaderElement,
+  getScrollableContainer,
+} from '../../utils/elements.js';
 
 const getContentHeight = (
   elementId: string,
   listParentRef: MutableRefObject<HTMLUListElement | null>,
 ) => {
-  const containerElement = document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
+  const containerElement = getScrollableContainer(elementId);
 
-  const headerElement = document.getElementById(
-    createElementId(ElementId.Header, elementId),
-  );
+  const headerElement = getHeaderElement(elementId);
 
   const listParentElement = listParentRef?.current;
 
@@ -63,6 +54,10 @@ interface UseContentHeightProps {
 export const minTokenListHeight = 360;
 export const minMobileTokenListHeight = 160;
 
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
+
 export const useTokenListHeight = ({
   listParentRef,
   headerRef,
@@ -81,9 +76,7 @@ export const useTokenListHeight = ({
     // calling this on initial mount prevents the lists resizing appearing glitchy
     handleResize();
 
-    const appContainer = document.getElementById(
-      createElementId(ElementId.AppExpandedContainer, elementId),
-    );
+    const appContainer = getAppContainer(elementId);
 
     let resizeObserver: ResizeObserver;
     if (appContainer) {

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -0,0 +1,74 @@
+import { ChainType } from '@lifi/sdk';
+import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  isWalletInstalledAsync,
+} from '@lifi/wallet-management';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { useConnect, useDisconnect } from 'wagmi';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
+
+interface EVMListItemButtonProps {
+  connectedConnector?: Connector;
+  connector: CreateConnectorFnExtended | Connector;
+  onNotInstalled(connector: Connector): void;
+}
+
+export const EVMListItemButton = ({
+  connectedConnector,
+  connector,
+  onNotInstalled,
+}: EVMListItemButtonProps) => {
+  const { navigateBack } = useNavigateBack();
+  const emitter = useWidgetEvents();
+  const { connectAsync } = useConnect();
+  const { disconnectAsync } = useDisconnect();
+
+  const handleEVMConnect = async () => {
+    const identityCheckPassed = await isWalletInstalledAsync(
+      (connector as Connector).id,
+    );
+    if (!identityCheckPassed) {
+      onNotInstalled(connector as Connector);
+      return;
+    }
+    if (connectedConnector) {
+      await disconnectAsync({ connector: connectedConnector });
+    }
+    await connectAsync(
+      { connector },
+      {
+        onSuccess(data) {
+          emitter.emit(WidgetEvent.WalletConnected, {
+            address: data.accounts[0],
+            chainId: data.chainId,
+            chainType: ChainType.EVM,
+          });
+        },
+      },
+    );
+    navigateBack();
+  };
+
+  const connectorName: string =
+    (connector as CreateConnectorFnExtended).displayName || connector.name;
+
+  return (
+    <ListItemButton key={connector.id} onClick={handleEVMConnect}>
+      <ListItemAvatar>
+        <Avatar
+          src={getConnectorIcon(connector as Connector)}
+          alt={connectorName}
+        >
+          {connectorName?.[0]}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={connectorName} />
+    </ListItemButton>
+  );
+};

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -0,0 +1,47 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
+
+interface SVMListItemButtonProps {
+  wallet: Wallet;
+}
+
+export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
+  const { navigateBack } = useNavigateBack();
+  const emitter = useWidgetEvents();
+  const { select, disconnect, connected } = useWallet();
+
+  const connect = async () => {
+    if (connected) {
+      await disconnect();
+    }
+    select(wallet.adapter.name);
+    // We use autoConnect on wallet selection
+    // await solanaConnect();
+    wallet.adapter.once('connect', (publicKey) => {
+      emitter.emit(WidgetEvent.WalletConnected, {
+        address: publicKey?.toString(),
+        chainId: ChainId.SOL,
+        chainType: ChainType.SVM,
+      });
+    });
+    navigateBack();
+  };
+
+  return (
+    <ListItemButton key={wallet.adapter.name} onClick={connect}>
+      <ListItemAvatar>
+        <Avatar src={wallet.adapter.icon} alt={wallet.adapter.name}>
+          {wallet.adapter.name[0]}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={`${wallet.adapter.name} (Solana)`} />
+    </ListItemButton>
+  );
+};

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -0,0 +1,90 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  List,
+} from '@mui/material';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Connector } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
+import { Dialog } from '../../components/Dialog.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useWallets } from '../../hooks/useWallets.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { EVMListItemButton } from './EVMListItemButton.js';
+import { SVMListItemButton } from './SVMListItemButton.js';
+
+export const SelectWalletPage = () => {
+  const { t } = useTranslation();
+  const { chains, walletConfig } = useWidgetConfig();
+  const account = useWagmiAccount();
+  const [walletIdentity, setWalletIdentity] = useState<{
+    show: boolean;
+    connector?: Connector;
+  }>({ show: false });
+
+  useHeader(t(`header.selectWallet`));
+
+  const closeDialog = () => {
+    setWalletIdentity((state) => ({
+      ...state,
+      show: false,
+    }));
+  };
+
+  const handleNotInstalled = useCallback(async (connector: Connector) => {
+    setWalletIdentity({
+      show: true,
+      connector,
+    });
+  }, []);
+
+  const wallets = useWallets(walletConfig, chains);
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {wallets?.map((connector) =>
+          (connector as Connector).id ? (
+            <EVMListItemButton
+              key={(connector as Connector).id}
+              connector={connector as Connector}
+              connectedConnector={account.connector}
+              onNotInstalled={handleNotInstalled}
+            />
+          ) : (
+            <SVMListItemButton
+              key={(connector as Wallet).adapter.name}
+              wallet={connector as Wallet}
+            />
+          ),
+        )}
+      </List>
+      <Dialog open={walletIdentity.show} onClose={closeDialog}>
+        <DialogContent>
+          <DialogContentText>
+            {t('wallet.extensionNotFound', {
+              name: walletIdentity.connector?.name,
+            })}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={closeDialog} autoFocus>
+            {t('button.ok')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </PageContainer>
+  );
+};

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,5 +1,3 @@
-import type { Account } from '@lifi/wallet-management';
-import { useAccount } from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   MoreHoriz,
@@ -14,6 +12,8 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,4 +1,3 @@
-import { useAccount } from '@lifi/wallet-management';
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
@@ -8,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
 import { ButtonTertiary } from '../../components/ButtonTertiary.js';
 import { CardButton } from '../../components/Card/CardButton.js';
+import { useAccount } from '../../hooks/useAccount.js';
 import {
   AddressType,
   useAddressValidation,

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -301,7 +301,12 @@ export const StatusBottomSheetContent: React.FC<
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
       {VcComponent ? <VcComponent route={route} /> : null}
-      <Box mt={2}>
+      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
+        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
+          </Button>
+        ) : null}
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
           {hasEnumFlag(status, RouteExecutionStatus.Done)
@@ -312,13 +317,6 @@ export const StatusBottomSheetContent: React.FC<
             : null}
         </Button>
       </Box>
-      {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-        <Box mt={2}>
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        </Box>
-      ) : null}
     </Box>
   );
 };

package/providers/I18nProvider/types.ts

@@ -12,14 +12,14 @@ export type LanguageResource = typeof languages.en;
 
 export type LanguageResources =
   | {
-      [K in LanguageKey]?: PartialResource<LanguageResource>;
+      [language in LanguageKey]?: PartialResource<LanguageResource>;
     }
   | {
       [language: string]: PartialResource<LanguageResource>;
     };
 
 export type LanguageTranslationResource = {
-  [N in 'translation']: PartialResource<LanguageResource>;
+  [namespace in 'translation']: PartialResource<LanguageResource>;
 };
 
 export type LanguageTranslationResources = {