@lifi/widget 3.7.0-beta.0 → 3.7.0-beta.10

package/pages/LanguagesPage.tsx

@@ -1,43 +0,0 @@
-import { Check } from '@mui/icons-material';
-import { List } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.js';
-import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
-import { useHeader } from '../hooks/useHeader.js';
-import { useLanguages } from '../hooks/useLanguages.js';
-
-export const LanguagesPage: React.FC = () => {
-  const { t } = useTranslation();
-  const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
-    useLanguages();
-
-  useHeader(t(`language.title`));
-
-  if (availableLanguages.length < 1) {
-    return null;
-  }
-
-  return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {availableLanguages.map((language) => (
-          <SettingsListItemButton
-            key={language}
-            onClick={() => setLanguageWithCode(language)}
-          >
-            <ListItemText primary={t('language.name', { lng: language })} />
-            {selectedLanguageCode === language && <Check color="primary" />}
-          </SettingsListItemButton>
-        ))}
-      </List>
-    </PageContainer>
-  );
-};

package/pages/MainPage/MainMessages.tsx

@@ -1,17 +0,0 @@
-import type { BoxProps } from '@mui/material';
-import { GasMessage } from '../../components/GasMessage/GasMessage.js';
-import { ToAddressRequiredMessage } from '../../components/ToAddressRequiredMessage.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-
-export const MainMessages: React.FC<BoxProps> = (props) => {
-  const { routes } = useRoutes();
-
-  const currentRoute = routes?.[0];
-
-  return (
-    <>
-      <ToAddressRequiredMessage route={currentRoute} {...props} />
-      <GasMessage route={currentRoute} {...props} />
-    </>
-  );
-};

package/pages/MainPage/MainPage.style.tsx

@@ -1,8 +0,0 @@
-import { Container, styled } from '@mui/material';
-
-export const FormContainer = styled(Container)({
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  position: 'relative',
-});

package/pages/MainPage/MainPage.tsx

@@ -1,59 +0,0 @@
-import { Box } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js';
-import { AmountInput } from '../../components/AmountInput/AmountInput.js';
-import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { GasRefuelMessage } from '../../components/GasMessage/GasRefuelMessage.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js';
-import { Routes } from '../../components/Routes/Routes.js';
-import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
-import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
-import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useWideVariant } from '../../hooks/useWideVariant.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { HiddenUI } from '../../types/widget.js';
-import { MainMessages } from './MainMessages.js';
-import { ReviewButton } from './ReviewButton.js';
-
-export const MainPage: React.FC = () => {
-  const { t } = useTranslation();
-  const wideVariant = useWideVariant();
-  const { subvariant, subvariantOptions, contractComponent, hiddenUI } =
-    useWidgetConfig();
-  const custom = subvariant === 'custom';
-  const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);
-
-  const title =
-    subvariant === 'custom'
-      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
-      : subvariant === 'refuel'
-        ? t(`header.gas`)
-        : t(`header.exchange`);
-  useHeader(title);
-
-  return (
-    <PageContainer>
-      <ActiveTransactions sx={{ marginBottom: 2 }} />
-      {custom ? (
-        <ContractComponent sx={{ marginBottom: 2 }}>
-          {contractComponent}
-        </ContractComponent>
-      ) : null}
-      <SelectChainAndToken mb={2} />
-      {!custom ? (
-        <AmountInput formType="from" sx={{ marginBottom: 2 }} />
-      ) : null}
-      {!wideVariant ? <Routes sx={{ marginBottom: 2 }} /> : null}
-      <SendToWalletButton sx={{ marginBottom: 2 }} />
-      <GasRefuelMessage mb={2} />
-      <MainMessages mb={2} />
-      <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>
-        <ReviewButton />
-        <SendToWalletExpandButton />
-      </Box>
-      {showPoweredBy ? <PoweredBy /> : null}
-    </PageContainer>
-  );
-};

package/pages/MainPage/ReviewButton.tsx

@@ -1,71 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-
-export const ReviewButton: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { subvariant, subvariantOptions } = useWidgetConfig();
-  const splitState = useSplitSubvariantStore((state) => state.state);
-  const [toAddress] = useFieldValues('toAddress');
-  const { requiredToAddress } = useToAddressRequirements();
-  const { routes, setReviewableRoute } = useRoutes();
-
-  const currentRoute = routes?.[0];
-
-  const handleClick = async () => {
-    if (currentRoute) {
-      setReviewableRoute(currentRoute);
-      navigate(navigationRoutes.transactionExecution, {
-        state: { routeId: currentRoute.id },
-      });
-    }
-  };
-
-  const getButtonText = (): string => {
-    if (currentRoute) {
-      switch (subvariant) {
-        case 'custom':
-          return t(`button.${subvariantOptions?.custom ?? 'checkout'}Review`);
-        case 'refuel':
-          return t(`button.getGas`);
-        default:
-          const transactionType =
-            currentRoute.fromChainId === currentRoute.toChainId
-              ? 'swap'
-              : 'bridge';
-          return t(`button.${transactionType}Review`);
-      }
-    } else {
-      switch (subvariant) {
-        case 'custom':
-          return subvariantOptions?.custom === 'deposit'
-            ? t(`button.deposit`)
-            : t(`button.buy`);
-        case 'refuel':
-          return t(`button.getGas`);
-        case 'split':
-          if (splitState) {
-            return t(`button.${splitState}`);
-          }
-          return t(`button.exchange`);
-        default:
-          return t(`button.exchange`);
-      }
-    }
-  };
-
-  return (
-    <BaseTransactionButton
-      text={getButtonText()}
-      onClick={handleClick}
-      disabled={currentRoute && requiredToAddress && !toAddress}
-    />
-  );
-};

package/pages/RoutesPage/RoutesPage.style.ts

@@ -1,6 +0,0 @@
-import { Stack as MuiStack, styled } from '@mui/material';
-
-export const Stack = styled(MuiStack)(({ theme }) => ({
-  position: 'relative',
-  padding: theme.spacing(0, 3, 3, 3),
-}));

package/pages/RoutesPage/RoutesPage.tsx

@@ -1,88 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { Route } from '@lifi/sdk';
-import { useAccount } from '@lifi/wallet-management';
-import type { BoxProps } from '@mui/material';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
-import { RouteCard } from '../../components/RouteCard/RouteCard.js';
-import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js';
-import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { Stack } from './RoutesPage.style.js';
-
-export const RoutesPage: React.FC<BoxProps> = () => {
-  const { navigate } = useNavigateBack();
-  const {
-    routes,
-    isLoading,
-    isFetching,
-    dataUpdatedAt,
-    refetchTime,
-    fromChain,
-    refetch,
-    setReviewableRoute,
-  } = useRoutes();
-  const { account } = useAccount({ chainType: fromChain?.chainType });
-  const [toAddress] = useFieldValues('toAddress');
-  const { requiredToAddress } = useToAddressRequirements();
-
-  const { t } = useTranslation();
-
-  const headerAction = useMemo(
-    () => (
-      <ProgressToNextUpdate
-        updatedAt={dataUpdatedAt || new Date().getTime()}
-        timeToUpdate={refetchTime}
-        isLoading={isFetching}
-        onClick={() => refetch()}
-        sx={{ marginRight: -1 }}
-        size="medium"
-      />
-    ),
-    [dataUpdatedAt, isFetching, refetch, refetchTime],
-  );
-
-  useHeader(t(`header.receive`), headerAction);
-
-  const handleRouteClick = (route: Route) => {
-    setReviewableRoute(route);
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
-    });
-  };
-
-  const routeNotFound = !routes?.length && !isLoading && !isFetching;
-
-  const toAddressUnsatisfied = routes?.[0] && requiredToAddress && !toAddress;
-  const allowInteraction = account.isConnected && !toAddressUnsatisfied;
-
-  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={index}
-            route={route}
-            onClick={
-              allowInteraction ? () => handleRouteClick(route) : undefined
-            }
-            active={index === 0}
-            expanded={routes?.length === 1}
-          />
-        ))
-      )}
-    </Stack>
-  );
-};

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,56 +0,0 @@
-import type { ExtendedChain } from '@lifi/sdk';
-import { Avatar, List, ListItemAvatar } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useChainSelect } from '../../components/ChainSelect/useChainSelect.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 { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import type { SelectChainPageProps } from './types.js';
-
-export const SelectChainPage: React.FC<SelectChainPageProps> = ({
-  formType,
-  selectNativeToken,
-}) => {
-  const { navigateBack } = useNavigateBack();
-  const { chains, setCurrentChain } = useChainSelect(formType);
-  const selectToken = useTokenSelect(formType, navigateBack);
-
-  const { t } = useTranslation();
-  useHeader(t('header.selectChain'));
-
-  const handleClick = async (chain: ExtendedChain) => {
-    if (selectNativeToken) {
-      selectToken(chain.nativeToken.address, chain.id);
-    } else {
-      setCurrentChain(chain.id);
-      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={() => handleClick(chain)}>
-            <ListItemAvatar>
-              <Avatar src={chain.logoURI} alt={chain.name}>
-                {chain.name[0]}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={chain.name} />
-          </ListItemButton>
-        ))}
-      </List>
-    </PageContainer>
-  );
-};

package/pages/SelectChainPage/types.ts

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

package/pages/SelectEnabledToolsPage.tsx

@@ -1,124 +0,0 @@
-import {
-  Check,
-  CheckBoxOutlineBlankOutlined,
-  CheckBoxOutlined,
-  IndeterminateCheckBoxOutlined,
-} from '@mui/icons-material';
-import {
-  Avatar,
-  IconButton,
-  List,
-  ListItemAvatar,
-  Tooltip,
-  useTheme,
-} from '@mui/material';
-import type { MouseEventHandler } from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
-import { ListItemText } from '../components/ListItemText.js';
-import { PageContainer } from '../components/PageContainer.js';
-import { SettingsListItemButton } from '../components/SettingsListItemButton.js';
-import { useHeader } from '../hooks/useHeader.js';
-import { useTools } from '../hooks/useTools.js';
-import { useSettingsStore } from '../stores/settings/useSettingsStore.js';
-
-interface SelectAllCheckboxProps {
-  allCheckboxesSelected: boolean;
-  onClick: MouseEventHandler;
-  anyCheckboxesSelected: boolean;
-}
-
-const SelectAllCheckbox: React.FC<SelectAllCheckboxProps> = ({
-  allCheckboxesSelected,
-  anyCheckboxesSelected,
-  onClick,
-}) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const tooltipTitle = 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>
-  );
-};
-
-export const SelectEnabledToolsPage: React.FC<{
-  type: 'Bridges' | 'Exchanges';
-}> = ({ type }) => {
-  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges';
-  const { tools } = useTools();
-  const [enabledTools, disabledTools, setToolValue, toggleTools] =
-    useSettingsStore(
-      (state) => [
-        state[`_enabled${type}`],
-        state[`disabled${type}`],
-        state.setToolValue,
-        state.toggleTools,
-      ],
-      shallow,
-    );
-
-  const { t } = useTranslation();
-
-  const headerAction = useMemo(
-    () => (
-      <SelectAllCheckbox
-        allCheckboxesSelected={!disabledTools.length}
-        anyCheckboxesSelected={Boolean(disabledTools.length)}
-        onClick={() => toggleTools(type)}
-      />
-    ),
-    [disabledTools.length, toggleTools, type],
-  );
-
-  useHeader(t(`settings.enabled${type}`), headerAction);
-
-  const handleClick = (key: string) => {
-    setToolValue(type, key, !enabledTools[key]);
-  };
-
-  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>
-  );
-};

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,48 +0,0 @@
-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 { 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();
-  const { setFieldValue } = useFieldActions();
-  const { onChange, onBlur, name, value } = useFieldController({
-    name: 'tokenSearchFilter',
-  });
-
-  useEffect(
-    () => () => {
-      setFieldValue('tokenSearchFilter', '');
-    },
-    [setFieldValue],
-  );
-
-  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>
-  );
-};

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 { PageContainer } from '../../components/PageContainer.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 (
-    <PageContainer 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>
-    </PageContainer>
-  );
-};

package/pages/SelectTokenPage/types.ts

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