@lifi/widget 3.7.0 → 3.8.0-beta.1

package/pages/SelectEnabledToolsPage.tsx

@@ -1,181 +0,0 @@
-import type { ToolsResponse } from '@lifi/sdk';
-import {
-  Check,
-  CheckBoxOutlineBlankOutlined,
-  CheckBoxOutlined,
-  IndeterminateCheckBoxOutlined,
-} from '@mui/icons-material';
-import {
-  Avatar,
-  debounce,
-  IconButton,
-  ListItemAvatar,
-  Tooltip,
-  useTheme,
-} from '@mui/material';
-import type { MouseEventHandler } 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 { 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';
-
-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 = 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>
-  );
-};
-
-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, toggleToolKeys] =
-    useSettingsStore(
-      (state) => [
-        state[`_enabled${type}`],
-        state[`disabled${type}`],
-        state.setToolValue,
-        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={
-          !!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, toggleToolKeys, type, filteredTools],
-  );
-
-  useHeader(t(`settings.enabled${type}`), headerAction);
-
-  const handleClick = (key: string) => {
-    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 (
-    <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/SelectNativeTokenPage.tsx

@@ -1,47 +0,0 @@
-import { List, ListItemAvatar } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { TokenAvatar } from '../components/Avatar/TokenAvatar.js';
-import { ListItemButton } from '../components/ListItemButton.js';
-import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.js';
-import { useTokenSelect } from '../components/TokenList/useTokenSelect.js';
-import { useChains } from '../hooks/useChains.js';
-import { useNavigateBack } from '../hooks/useNavigateBack.js';
-import type { FormTypeProps } from '../stores/form/types.js';
-
-export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
-  formType,
-}) => {
-  const { t } = useTranslation();
-  const { navigateBack } = useNavigateBack();
-  const { chains } = useChains();
-  const selectToken = useTokenSelect(formType, navigateBack);
-
-  return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {chains?.map((chain) => (
-          <ListItemButton
-            key={chain.id}
-            onClick={() => selectToken(chain.nativeToken.address, chain.id)}
-          >
-            <ListItemAvatar>
-              <TokenAvatar token={chain.nativeToken} chain={chain} />
-            </ListItemAvatar>
-            <ListItemText
-              primary={chain.nativeToken.symbol}
-              secondary={t('main.onChain', { chainName: chain.name })}
-            />
-          </ListItemButton>
-        ))}
-      </List>
-    </PageContainer>
-  );
-};

package/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material';
-import { Input as InputBase } from '../../components/Input.js';
-
-export const Input = styled(InputBase)(({ theme }) => ({
-  paddingRight: theme.spacing(1.5),
-}));

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SearchInput } from '../../components/Search/SearchInput.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldController } from '../../stores/form/useFieldController.js';
-
-export const SearchTokenInput = () => {
-  const { t } = useTranslation();
-  const { setFieldValue } = useFieldActions();
-  const { onChange, onBlur, name, value } = useFieldController({
-    name: 'tokenSearchFilter',
-  });
-
-  useEffect(
-    () => () => {
-      setFieldValue('tokenSearchFilter', '');
-    },
-    [setFieldValue],
-  );
-
-  return (
-    <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

@@ -1,60 +0,0 @@
-import { Box } from '@mui/material';
-import type { FC } from 'react';
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ChainSelect } from '../../components/ChainSelect/ChainSelect.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';
-import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { FormTypeProps } from '../../stores/form/types.js';
-import { SearchTokenInput } from './SearchTokenInput.js';
-import { useTokenListHeight } from './useTokenListHeight.js';
-
-export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
-  useScrollableOverflowHidden();
-  const { navigateBack } = useNavigateBack();
-  const headerRef = useRef<HTMLElement>(null);
-  const listParentRef = useRef<HTMLUListElement | null>(null);
-  const { tokenListHeight, minListHeight } = useTokenListHeight({
-    listParentRef,
-    headerRef,
-  });
-
-  const swapOnly = useSwapOnly();
-
-  const { subvariant } = useWidgetConfig();
-  const { t } = useTranslation();
-  const title =
-    formType === 'from'
-      ? subvariant === 'custom'
-        ? t(`header.payWith`)
-        : t(`header.from`)
-      : t(`header.to`);
-
-  useHeader(title);
-
-  const hideChainSelect = swapOnly && formType === 'to';
-
-  return (
-    <FullPageContainer disableGutters>
-      <Box pb={2} px={3} ref={headerRef}>
-        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box mt={!hideChainSelect ? 2 : 0}>
-          <SearchTokenInput />
-        </Box>
-      </Box>
-      <Box height={minListHeight}>
-        <TokenList
-          parentRef={listParentRef}
-          height={tokenListHeight}
-          onClick={navigateBack}
-          formType={formType}
-        />
-      </Box>
-    </FullPageContainer>
-  );
-};

package/pages/SelectTokenPage/types.ts

@@ -1,4 +0,0 @@
-export enum TokenFilterType {
-  My,
-  All,
-}

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -1,108 +0,0 @@
-import { debounce, useTheme } from '@mui/material';
-import type { MutableRefObject } from 'react';
-import { useLayoutEffect, useState } from 'react';
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import {
-  ElementId,
-  getAppContainer,
-  getHeaderElement,
-  getScrollableContainer,
-} from '../../utils/elements.js';
-
-const getContentHeight = (
-  elementId: string,
-  listParentRef: MutableRefObject<HTMLUListElement | null>,
-) => {
-  const containerElement = getScrollableContainer(elementId);
-
-  const headerElement = getHeaderElement(elementId);
-
-  const listParentElement = listParentRef?.current;
-
-  let oldHeight;
-
-  // This covers the case where in full height flex mode when the browser height is reduced
-  // - this allows the virtualised token list to be made smaller
-  if (listParentElement) {
-    oldHeight = listParentElement.style.height;
-    listParentElement.style.height = '0';
-  }
-
-  if (!containerElement || !headerElement) {
-    console.warn(
-      `Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`,
-    );
-    return 0;
-  }
-  const { height: containerHeight } = containerElement.getBoundingClientRect();
-  const { height: headerHeight } = headerElement.getBoundingClientRect();
-
-  // This covers the case where in full height flex mode when the browser height is reduced the
-  // - this allows the virtualised token list to be set to minimum size
-  if (listParentElement && oldHeight) {
-    listParentElement.style.height = oldHeight;
-  }
-
-  return containerHeight - headerHeight;
-};
-
-interface UseContentHeightProps {
-  listParentRef: MutableRefObject<HTMLUListElement | null>;
-  headerRef: MutableRefObject<HTMLElement | null>;
-}
-
-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,
-}: UseContentHeightProps) => {
-  const elementId = useDefaultElementId();
-  const [contentHeight, setContentHeight] = useState<number>(0);
-  const theme = useTheme();
-
-  useLayoutEffect(() => {
-    const handleResize = () => {
-      setContentHeight(getContentHeight(elementId, listParentRef));
-    };
-
-    const processResize = debounce(() => handleResize(), 40);
-
-    // calling this on initial mount prevents the lists resizing appearing glitchy
-    handleResize();
-
-    const appContainer = getAppContainer(elementId);
-
-    let resizeObserver: ResizeObserver;
-    if (appContainer) {
-      resizeObserver = new ResizeObserver(processResize);
-      resizeObserver.observe(appContainer);
-    }
-
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [elementId, listParentRef]);
-
-  const minListHeight =
-    theme.container?.height === '100%'
-      ? minMobileTokenListHeight
-      : minTokenListHeight;
-
-  const tokenListHeight = Math.max(
-    contentHeight - (headerRef.current?.offsetHeight ?? 0),
-    minListHeight,
-  );
-
-  return {
-    minListHeight,
-    tokenListHeight,
-  };
-};

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,74 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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>
-  );
-};