@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,48 +0,0 @@
-import type { ExtendedChain } from '@lifi/sdk';
-import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
-import { useChainSelect } from '../../components/ChainSelect';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { useTokenSelect } from '../../components/TokenList';
-import { useNavigateBack } from '../../hooks';
-import type { SelectChainPageProps } from './types';
-
-export const SelectChainPage: React.FC<SelectChainPageProps> = ({
-  formType,
-  selectNativeToken,
-}) => {
-  const { navigateBack } = useNavigateBack();
-  const { chains, setCurrentChain } = useChainSelect(formType);
-  const selectToken = useTokenSelect(formType, navigateBack);
-
-  const handleClick = async (chain: ExtendedChain) => {
-    if (selectNativeToken) {
-      selectToken(chain.nativeToken.address, chain.id);
-    } else {
-      setCurrentChain(chain.id);
-      navigateBack();
-    }
-  };
-
-  return (
-    <Container disableGutters>
-      <List
-        sx={{
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-        }}
-      >
-        {chains?.map((chain) => (
-          <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
-            <ListItemAvatar>
-              <Avatar src={chain.logoURI} alt={chain.name}>
-                {chain.name[0]}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={chain.name} />
-          </ListItemButton>
-        ))}
-      </List>
-    </Container>
-  );
-};

package/src/pages/SelectChainPage/types.ts

@@ -1,5 +0,0 @@
-import type { FormTypeProps } from '../../providers';
-
-export interface SelectChainPageProps extends FormTypeProps {
-  selectNativeToken?: boolean;
-}

package/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -1,130 +0,0 @@
-import type { MouseEventHandler } from 'react';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import CheckIcon from '@mui/icons-material/Check';
-import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
-import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
-import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
-import {
-  Avatar,
-  Container,
-  IconButton,
-  List,
-  ListItemAvatar,
-  Tooltip,
-} from '@mui/material';
-import { shallow } from 'zustand/shallow';
-import { ListItemText } from '../../components/ListItemText';
-import { useTools } from '../../hooks';
-import { useHeaderStoreContext, useSettingsStore } from '../../stores';
-import { SettingsListItemButton } from '../../components/SettingsListItemButton';
-
-interface SelectAllCheckboxProps {
-  allCheckboxesSelected: boolean;
-  onClick: MouseEventHandler;
-  anyCheckboxesSelected: boolean;
-}
-
-const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
-  allCheckboxesSelected,
-  anyCheckboxesSelected,
-  onClick,
-}) => {
-  const { t } = useTranslation();
-  const tooltipTitle = allCheckboxesSelected
-    ? t('tooltip.deselectAll')
-    : t('tooltip.selectAll');
-
-  return (
-    <Tooltip title={tooltipTitle} arrow>
-      <IconButton size="medium" edge="end" onClick={onClick}>
-        {allCheckboxesSelected ? (
-          <CheckBoxOutlinedIcon />
-        ) : anyCheckboxesSelected ? (
-          <IndeterminateCheckBoxOutlinedIcon />
-        ) : (
-          <CheckBoxOutlineBlankOutlinedIcon />
-        )}
-      </IconButton>
-    </Tooltip>
-  );
-};
-
-export const SelectEnabledToolsPage: React.FC<{
-  type: 'Bridges' | 'Exchanges';
-}> = ({ type }) => {
-  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges';
-  const { tools } = useTools();
-  const [enabledTools, setTools] = useSettingsStore(
-    (state) => [state[`enabled${type}`], state.setTools],
-    shallow,
-  );
-  const headerStoreContext = useHeaderStoreContext();
-
-  const handleClick = (key: string) => {
-    if (!tools) {
-      return;
-    }
-    const toolKeys = tools[typeKey].map((tool) => tool.key);
-    if (enabledTools?.includes(key)) {
-      setTools(
-        type,
-        enabledTools.filter((toolKey) => toolKey !== key),
-        toolKeys,
-      );
-    } else {
-      setTools(type, [...enabledTools, key], toolKeys);
-    }
-  };
-
-  useEffect(() => {
-    const allToolsSelected = tools?.[typeKey].length === enabledTools.length;
-    const toggleCheckboxes = () => {
-      if (!tools) {
-        return;
-      }
-      const toolKeys = tools[typeKey].map((tool) => tool.key);
-      if (allToolsSelected) {
-        setTools(type, [], toolKeys);
-      } else {
-        setTools(type, toolKeys, toolKeys);
-      }
-    };
-
-    return headerStoreContext
-      .getState()
-      .setAction(
-        <SelectAllCheckbox
-          allCheckboxesSelected={allToolsSelected}
-          anyCheckboxesSelected={!!enabledTools.length}
-          onClick={toggleCheckboxes}
-        />,
-      );
-  }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
-
-  return (
-    <Container disableGutters>
-      <List
-        sx={{
-          paddingLeft: 1.5,
-          paddingRight: 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?.includes(tool.key) && <CheckIcon color="primary" />}
-          </SettingsListItemButton>
-        ))}
-      </List>
-    </Container>
-  );
-};

package/src/pages/SelectNativeTokenPage/SelectNativeTokenPage.tsx

@@ -1,43 +0,0 @@
-import { Container, List, ListItemAvatar } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { ListItemButton } from '../../components/ListItemButton';
-import { ListItemText } from '../../components/ListItemText';
-import { TokenAvatar } from '../../components/TokenAvatar';
-import { useTokenSelect } from '../../components/TokenList';
-import { useChains, useNavigateBack } from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-
-export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
-  formType,
-}) => {
-  const { t } = useTranslation();
-  const { navigateBack } = useNavigateBack();
-  const { chains } = useChains();
-  const selectToken = useTokenSelect(formType, navigateBack);
-
-  return (
-    <Container disableGutters>
-      <List
-        sx={{
-          paddingLeft: 1.5,
-          paddingRight: 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>
-    </Container>
-  );
-};

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,42 +0,0 @@
-import SearchIcon from '@mui/icons-material/Search';
-import { FormControl, InputAdornment } from '@mui/material';
-import { useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card';
-import { FormKey } from '../../providers';
-import { Input } from './SearchTokenInput.style';
-
-export const SearchTokenInput = () => {
-  const { t } = useTranslation();
-  const { register, setValue } = useFormContext();
-
-  useEffect(
-    () => () => {
-      setValue(FormKey.TokenSearchFilter, '');
-    },
-    [setValue],
-  );
-
-  return (
-    <Card>
-      <FormControl fullWidth>
-        <Input
-          size="small"
-          placeholder={t(`main.tokenSearch`) as string}
-          defaultValue=""
-          endAdornment={
-            <InputAdornment position="end">
-              <SearchIcon />
-            </InputAdornment>
-          }
-          inputProps={{
-            inputMode: 'search',
-            ...register(FormKey.TokenSearchFilter),
-          }}
-          autoComplete="off"
-        />
-      </FormControl>
-    </Card>
-  );
-};

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,51 +0,0 @@
-import { Box, Container } from '@mui/material';
-import type { FC } from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { ChainSelect } from '../../components/ChainSelect';
-import { TokenList } from '../../components/TokenList';
-import {
-  useContentHeight,
-  useNavigateBack,
-  useScrollableOverflowHidden,
-  useSwapOnly,
-} from '../../hooks';
-import type { FormTypeProps } from '../../providers';
-import { SearchTokenInput } from './SearchTokenInput';
-
-const minTokenListHeight = 360;
-
-export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
-  useScrollableOverflowHidden();
-  const { navigateBack } = useNavigateBack();
-  const headerRef = useRef<HTMLElement>(null);
-  const contentHeight = useContentHeight();
-  const [tokenListHeight, setTokenListHeight] = useState(0);
-  const swapOnly = useSwapOnly();
-
-  useLayoutEffect(() => {
-    setTokenListHeight(
-      Math.max(
-        contentHeight - (headerRef.current?.offsetHeight ?? 0),
-        minTokenListHeight,
-      ),
-    );
-  }, [contentHeight]);
-
-  const hideChainSelect = swapOnly && formType === 'to';
-
-  return (
-    <Container disableGutters>
-      <Box pt={1} pb={2} px={3} ref={headerRef}>
-        {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
-        <Box mt={!hideChainSelect ? 2 : 0}>
-          <SearchTokenInput />
-        </Box>
-      </Box>
-      <TokenList
-        height={tokenListHeight}
-        onClick={navigateBack}
-        formType={formType}
-      />
-    </Container>
-  );
-};

package/src/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -1,64 +0,0 @@
-import { ChainType } from '@lifi/sdk';
-import { getWalletIcon, 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';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
-
-interface EVMListItemButtonProps {
-  connectedConnector?: Connector;
-  connector: 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.id);
-    if (!identityCheckPassed) {
-      onNotInstalled(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();
-  };
-
-  return (
-    <ListItemButton key={connector.uid} onClick={handleEVMConnect}>
-      <ListItemAvatar>
-        <Avatar
-          src={connector.icon || getWalletIcon(connector.id)}
-          alt={connector.name}
-        >
-          {connector.name[0]}
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText primary={connector.name} />
-    </ListItemButton>
-  );
-};

package/src/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -1,127 +0,0 @@
-import { isWalletInstalled } from '@lifi/wallet-management';
-import type { Theme } from '@mui/material';
-import {
-  Button,
-  Container,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  List,
-  useMediaQuery,
-} from '@mui/material';
-import { WalletReadyState } from '@solana/wallet-adapter-base';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { Connector } from 'wagmi';
-import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
-import { Dialog } from '../../components/Dialog';
-import { EVMListItemButton } from './EVMListItemButton';
-import { SVMListItemButton } from './SVMListItemButton';
-import { walletComparator } from './utils';
-
-export const SelectWalletPage = () => {
-  const { t } = useTranslation();
-  const account = useWagmiAccount();
-  const { connectors } = useConnect();
-  const [walletIdentity, setWalletIdentity] = useState<{
-    show: boolean;
-    connector?: Connector;
-  }>({ show: false });
-  const { wallets: solanaWallets } = useWallet();
-
-  const isDesktopView = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.up('sm'),
-  );
-
-  const closeDialog = () => {
-    setWalletIdentity((state) => ({
-      ...state,
-      show: false,
-    }));
-  };
-
-  const handleNotInstalled = useCallback(async (connector: Connector) => {
-    setWalletIdentity({
-      show: true,
-      connector,
-    });
-  }, []);
-
-  const wallets = useMemo(() => {
-    const evmInstalled = connectors.filter(
-      (connector) =>
-        isWalletInstalled(connector.id) &&
-        // We should not show already connected connectors
-        account.connector?.id !== connector.id,
-    );
-    const evmNotDetected = connectors.filter(
-      (connector) => !isWalletInstalled(connector.id),
-    );
-    const svmInstalled = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState === WalletReadyState.Installed &&
-        // We should not show already connected connectors
-        !connector.adapter.connected,
-    );
-    const svmNotDetected = solanaWallets?.filter(
-      (connector) =>
-        connector.adapter.readyState !== WalletReadyState.Installed,
-    );
-
-    const installedWallets = [...evmInstalled, ...svmInstalled].sort(
-      walletComparator,
-    );
-
-    if (isDesktopView) {
-      const notDetectedWallets = [...evmNotDetected, ...svmNotDetected].sort(
-        walletComparator,
-      );
-      installedWallets.push(...notDetectedWallets);
-    }
-
-    return installedWallets;
-  }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
-
-  return (
-    <Container disableGutters>
-      <List
-        sx={{
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-        }}
-      >
-        {wallets?.map((connector) =>
-          (connector as Connector).uid ? (
-            <EVMListItemButton
-              key={(connector as Connector).uid}
-              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>
-    </Container>
-  );
-};

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,50 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { shallow } from 'zustand/shallow';
-import AirlineStopsIcon from '@mui/icons-material/AirlineStops';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import { useSettingsStore } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { useSettingMonitor } from '../../hooks';
-import { SettingCardButton, BadgedValue } from './SettingsCard';
-
-const supportedIcons = {
-  Bridges: AirlineStopsIcon,
-  Exchanges: SwapHorizIcon,
-};
-
-export const BridgeAndExchangeSettings: React.FC<{
-  type: 'Bridges' | 'Exchanges';
-}> = ({ type }) => {
-  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [enabledTools, tools] = useSettingsStore((state) => {
-    const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
-    return [enabledTools.filter(Boolean).length, enabledTools.length];
-  }, shallow);
-
-  const customisationLookUp = {
-    Bridges: isBridgesChanged,
-    Exchanges: isExchangesChanged,
-  };
-
-  const handleClick = () => {
-    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges']);
-  };
-
-  const Icon = supportedIcons[type];
-
-  return (
-    <SettingCardButton
-      onClick={handleClick}
-      icon={<Icon />}
-      title={t(`settings.enabled${type}`)}
-    >
-      <BadgedValue
-        badgeColor="info"
-        showBadge={customisationLookUp[type]}
-      >{`${enabledTools}/${tools}`}</BadgedValue>
-    </SettingCardButton>
-  );
-};

package/src/pages/SettingsPage/GasPriceSettings.tsx

@@ -1,45 +0,0 @@
-import EvStationIcon from '@mui/icons-material/EvStation';
-import { useTranslation } from 'react-i18next';
-import { useSettings, useSettingsStore } from '../../stores';
-import { Tab, Tabs } from '../../components/Tabs';
-import { useSettingMonitor } from '../../hooks';
-import { SettingCardExpandable, BadgedValue } from './SettingsCard';
-
-export const GasPriceSettings: React.FC = () => {
-  const { t } = useTranslation();
-  const setValue = useSettingsStore((state) => state.setValue);
-  const { isGasPriceChanged } = useSettingMonitor();
-  const { gasPrice } = useSettings(['gasPrice']);
-
-  const handleGasPriceChange = (_: React.SyntheticEvent, gasPrice: string) => {
-    setValue('gasPrice', gasPrice);
-  };
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue badgeColor="info" showBadge={isGasPriceChanged}>
-          {t(`settings.gasPrice.${gasPrice}` as any)}
-        </BadgedValue>
-      }
-      icon={<EvStationIcon />}
-      title={t(`settings.gasPrice.title`)}
-    >
-      <Tabs
-        value={gasPrice}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleGasPriceChange}
-        sx={{ mt: 1.5 }}
-      >
-        <Tab label={t(`settings.gasPrice.slow`)} value="slow" disableRipple />
-        <Tab
-          label={t(`settings.gasPrice.normal`)}
-          value="normal"
-          disableRipple
-        />
-        <Tab label={t(`settings.gasPrice.fast`)} value="fast" disableRipple />
-      </Tabs>
-    </SettingCardExpandable>
-  );
-};

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,33 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import LanguageIcon from '@mui/icons-material/Language';
-import { useWidgetConfig } from '../../providers';
-import { HiddenUI } from '../../types';
-import { navigationRoutes } from '../../utils';
-import { useLanguages } from '../../hooks';
-import { SettingCardButton, SummaryValue } from './SettingsCard';
-
-export const LanguageSetting: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { hiddenUI } = useWidgetConfig();
-  const { selectedLanguageDisplayName } = useLanguages();
-
-  if (hiddenUI?.includes(HiddenUI.Language)) {
-    return null;
-  }
-
-  const handleClick = () => {
-    navigate(navigationRoutes.languages);
-  };
-
-  return (
-    <SettingCardButton
-      onClick={handleClick}
-      icon={<LanguageIcon />}
-      title={t(`language.title`)}
-    >
-      <SummaryValue>{selectedLanguageDisplayName}</SummaryValue>
-    </SettingCardButton>
-  );
-};

package/src/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,12 +0,0 @@
-import { getContrastAlphaColor } from '../../utils';
-import { Box, styled } from '@mui/material';
-
-export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: getContrastAlphaColor(theme.palette.mode, '4%'),
-  borderRadius: '16px',
-  padding: '16px',
-
-  [`svg`]: {
-    fill: getContrastAlphaColor(theme.palette.mode, '40%'),
-  },
-}));