@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -1,77 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { Route } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import { useEffect } from 'react';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import {
-  RouteCard,
-  RouteCardSkeleton,
-  RouteNotFoundCard,
-} from '../../components/RouteCard';
-import { useNavigateBack, useRoutes } from '../../hooks';
-import { useHeaderStoreContext, useSetExecutableRoute } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { Stack } from './RoutesPage.style';
-
-export const RoutesPage: React.FC<BoxProps> = () => {
-  const { navigateBack, navigate } = useNavigateBack();
-  const { routes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } =
-    useRoutes();
-  const setExecutableRoute = useSetExecutableRoute();
-  const headerStoreContext = useHeaderStoreContext();
-
-  const handleRouteClick = (route: Route) => {
-    setExecutableRoute(route);
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
-    });
-  };
-
-  useEffect(() => {
-    if (!routes?.length && !isLoading && !isFetching) {
-      navigateBack();
-    }
-    // redirect to the home page if no routes are found on page reload
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    return headerStoreContext
-      .getState()
-      .setAction(
-        <ProgressToNextUpdate
-          updatedAt={dataUpdatedAt || new Date().getTime()}
-          timeToUpdate={refetchTime}
-          isLoading={isFetching}
-          onClick={() => refetch()}
-          sx={{ marginRight: -1 }}
-          size="medium"
-          edge="end"
-        />,
-      );
-  }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);
-
-  const routeNotFound = !routes?.length && !isLoading && !isFetching;
-
-  return (
-    <Stack direction="column" spacing={2} flex={1}>
-      {routeNotFound ? (
-        <RouteNotFoundCard />
-      ) : isLoading ? (
-        Array.from({ length: 3 }).map((_, index) => (
-          <RouteCardSkeleton key={index} />
-        ))
-      ) : (
-        routes?.map((route: Route, index: number) => (
-          <RouteCard
-            key={route.id}
-            route={route}
-            onClick={() => handleRouteClick(route)}
-            active={index === 0}
-            expanded={routes?.length <= 2}
-          />
-        ))
-      )}
-    </Stack>
-  );
-};

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.style.tsx

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

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/SelectTokenPage/types.ts

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

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/SVMListItemButton.tsx

@@ -1,46 +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';
-import { ListItemText } from '../../components/ListItemText';
-import { useNavigateBack, useWidgetEvents } from '../../hooks';
-import { WidgetEvent } from '../../types';
-
-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/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,
-} from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-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/SelectWalletPage/utils.ts

@@ -1,26 +0,0 @@
-import { getWalletPriority } from '@lifi/wallet-management';
-import type { Wallet } from '@solana/wallet-adapter-react';
-import type { Connector } from 'wagmi';
-
-export const walletComparator = (
-  a: Connector | Wallet,
-  b: Connector | Wallet,
-) => {
-  let aId = (a as Connector).id || (a as Wallet).adapter?.name;
-  let bId = (b as Connector).id || (b as Wallet).adapter?.name;
-
-  const priorityA = getWalletPriority(aId);
-  const priorityB = getWalletPriority(bId);
-
-  if (priorityA !== priorityB) {
-    return priorityA - priorityB;
-  }
-
-  if (aId < bId) {
-    return -1;
-  }
-  if (aId > bId) {
-    return 1;
-  }
-  return 0;
-};