@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -0,0 +1,77 @@
+/* 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

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

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

package/src/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

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

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

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

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

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

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

package/src/pages/SelectWalletPage/EVMListItemButton.tsx

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

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

@@ -0,0 +1,127 @@
+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/SelectWalletPage/utils.ts

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