@lifi/widget 3.7.0 → 3.8.0-beta.1

package/index.ts

@@ -1,25 +0,0 @@
-export * from '@lifi/types';
-export { App as LiFiWidget } from './App.js';
-export type { WidgetDrawer } from './AppDrawer.js';
-export * from './components/ContractComponent/ItemPrice.js';
-export * from './components/ContractComponent/NFT/NFT.js';
-export * from './components/ContractComponent/NFT/NFTBase.js';
-export * from './components/ContractComponent/NFT/types.js';
-export * from './components/Skeleton/WidgetSkeleton.js';
-export { defaultMaxHeight } from './config/constants.js';
-export * from './config/version.js';
-export { useAccount } from './hooks/useAccount.js';
-export { useAvailableChains } from './hooks/useAvailableChains.js';
-export { useWallets, walletComparator } from './hooks/useWallets.js';
-export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js';
-export * from './stores/form/types.js';
-export { useFieldActions } from './stores/form/useFieldActions.js';
-export { useFieldValues } from './stores/form/useFieldValues.js';
-export { azureLightTheme } from './themes/azureLight.js';
-export { jumperTheme } from './themes/jumper.js';
-export * from './themes/palettes.js';
-export { watermelonLightTheme } from './themes/watermelonLight.js';
-export { windows95Theme } from './themes/windows95.js';
-export * from './types/events.js';
-export type { TokenAmount } from './types/token.js';
-export * from './types/widget.js';

package/pages/ActiveTransactionsPage/ActiveTransactionsEmpty.tsx

@@ -1,34 +0,0 @@
-import { SwapHoriz } from '@mui/icons-material';
-import { Container, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-export const ActiveTransactionsEmpty: React.FC = () => {
-  const { t } = useTranslation();
-  return (
-    <Container
-      sx={{
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingY: 12,
-      }}
-    >
-      <Typography fontSize={48}>
-        <SwapHoriz fontSize="inherit" />
-      </Typography>
-      <Typography fontSize={18} fontWeight={700}>
-        {t('info.title.emptyActiveTransactions')}
-      </Typography>
-      <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
-      >
-        {t('info.message.emptyActiveTransactions')}
-      </Typography>
-    </Container>
-  );
-};

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,95 +0,0 @@
-import { DeleteOutline } from '@mui/icons-material';
-import type { IconButtonProps } from '@mui/material';
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  IconButton,
-  List,
-  useTheme,
-} from '@mui/material';
-import { useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ActiveTransactionItem } from '../../components/ActiveTransactions/ActiveTransactionItem.js';
-import { Dialog } from '../../components/Dialog.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
-import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js';
-import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty.js';
-
-const DeleteIconButton: React.FC<IconButtonProps> = ({ onClick }) => {
-  const theme = useTheme();
-
-  return (
-    <IconButton
-      size="medium"
-      edge={theme?.navigation?.edge ? 'end' : false}
-      onClick={onClick}
-    >
-      <DeleteOutline />
-    </IconButton>
-  );
-};
-
-export const ActiveTransactionsPage = () => {
-  const { t } = useTranslation();
-  const executingRoutes = useExecutingRoutesIds();
-  const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
-  const [open, setOpen] = useState(false);
-
-  const toggleDialog = useCallback(() => {
-    setOpen((open) => !open);
-  }, []);
-
-  const headerAction = useMemo(
-    () =>
-      executingRoutes.length ? (
-        <DeleteIconButton onClick={toggleDialog} />
-      ) : undefined,
-    [executingRoutes.length, toggleDialog],
-  );
-
-  useHeader(t(`header.activeTransactions`), headerAction);
-
-  if (!executingRoutes.length) {
-    return <ActiveTransactionsEmpty />;
-  }
-
-  return (
-    <PageContainer disableGutters>
-      <List
-        sx={{
-          paddingTop: 0,
-          paddingLeft: 1.5,
-          paddingRight: 1.5,
-          paddingBottom: 1.5,
-        }}
-      >
-        {executingRoutes.map((routeId) => (
-          <ActiveTransactionItem key={routeId} routeId={routeId} />
-        ))}
-      </List>
-      <Dialog open={open} onClose={toggleDialog}>
-        <DialogTitle>{t('warning.title.deleteActiveTransactions')}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            {t('warning.message.deleteActiveTransactions')}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={toggleDialog}>{t('button.cancel')}</Button>
-          <Button
-            variant="contained"
-            onClick={() => deleteRoutes('active')}
-            autoFocus
-          >
-            {t('button.delete')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </PageContainer>
-  );
-};

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 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 { useAccount } from '../../hooks/useAccount.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,95 +0,0 @@
-import type { ExtendedChain } from '@lifi/sdk';
-import { Avatar, debounce, ListItemAvatar } from '@mui/material';
-import { type FormEventHandler, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
-import { FullPageContainer } from '../../components/FullPageContainer.js';
-import { ListItemButton } from '../../components/ListItemButton.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 { useTokenSelect } from '../../components/TokenList/useTokenSelect.js';
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useScrollableContainer } from '../../hooks/useScrollableContainer.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 elementId = useDefaultElementId();
-  const scrollableContainer = useScrollableContainer(elementId);
-
-  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();
-    }
-  };
-
-  const [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
-    chains ?? [],
-  );
-
-  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
-    const value = (e.target as HTMLInputElement).value;
-
-    if (!value) {
-      setFilteredChains(chains ?? []);
-    } else {
-      setFilteredChains(
-        chains
-          ? chains.filter((chain) =>
-              chain.name.toLowerCase().includes(value.toLowerCase()),
-            )
-          : [],
-      );
-    }
-
-    if (scrollableContainer) {
-      scrollableContainer.scrollTop = 0;
-    }
-  };
-
-  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
-
-  return (
-    <FullPageContainer disableGutters>
-      <StickySearchInput
-        onChange={debouncedSearchInputChange}
-        placeholder={t('main.searchChains')}
-      />
-      {filteredChains.length ? (
-        <SearchList>
-          {filteredChains.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>
-          ))}
-        </SearchList>
-      ) : (
-        <SearchNotFound
-          message={t('info.message.emptyChainList')}
-          adjustForStickySearchInput
-        />
-      )}
-    </FullPageContainer>
-  );
-};

package/pages/SelectChainPage/types.ts

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