@lifi/widget 3.7.0 → 3.8.0-beta.1

package/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

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

package/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -1,100 +0,0 @@
-import type {
-  ExtendedTransactionInfo,
-  FullStatusData,
-  StatusResponse,
-  TokenAmount,
-} from '@lifi/sdk';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Card } from '../../components/Card/Card.js';
-import { Token } from '../../components/Token/Token.js';
-import { TokenDivider } from '../../components/Token/Token.style.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-
-export const TransactionHistoryItem: React.FC<{
-  transaction: StatusResponse;
-  size: number;
-  start: number;
-}> = ({ transaction, size, start }) => {
-  const { i18n } = useTranslation();
-  const navigate = useNavigate();
-
-  const sending = transaction.sending as ExtendedTransactionInfo;
-  const receiving = (transaction as FullStatusData)
-    .receiving as ExtendedTransactionInfo;
-
-  const handleClick = () => {
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
-        transactionHash: (transaction as FullStatusData).sending.txHash,
-      },
-    });
-  };
-
-  const startedAt = new Date((sending.timestamp ?? 0) * 1000);
-
-  if (!sending.token?.chainId || !receiving.token?.chainId) {
-    return null;
-  }
-
-  const fromToken: TokenAmount = {
-    ...sending.token,
-    amount: BigInt(sending.amount ?? '0'),
-    priceUSD: sending.token.priceUSD ?? '0',
-    symbol: sending.token?.symbol ?? '',
-    decimals: sending.token?.decimals ?? 0,
-    name: sending.token?.name ?? '',
-    chainId: sending.token?.chainId,
-  };
-
-  const toToken: TokenAmount = {
-    ...receiving.token,
-    amount: BigInt(receiving.amount ?? '0'),
-    priceUSD: receiving.token.priceUSD ?? '0',
-    symbol: receiving.token?.symbol ?? '',
-    decimals: receiving.token?.decimals ?? 0,
-    name: receiving.token?.name ?? '',
-    chainId: receiving.token?.chainId,
-  };
-
-  return (
-    <Card
-      onClick={handleClick}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        // height: `${size}px`,
-        transform: `translateY(${start}px)`,
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-        pt={1.75}
-        px={2}
-      >
-        <Typography fontSize={12}>
-          {startedAt.toLocaleString(i18n.language, { dateStyle: 'long' })}
-        </Typography>
-        <Typography fontSize={12}>
-          {startedAt.toLocaleString(i18n.language, {
-            timeStyle: 'short',
-          })}
-        </Typography>
-      </Box>
-      <Box px={2} py={2}>
-        <Token token={fromToken} />
-        <Box pl={2.375} py={0.5}>
-          <TokenDivider />
-        </Box>
-        <Token token={toToken} />
-      </Box>
-    </Card>
-  );
-};

package/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,71 +0,0 @@
-import type { FullStatusData } from '@lifi/sdk';
-import { List } from '@mui/material';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PageContainer } from '../../components/PageContainer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useTransactionHistory } from '../../hooks/useTransactionHistory.js';
-import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js';
-import { TransactionHistoryItem } from './TransactionHistoryItem.js';
-import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js';
-import { minTransactionListHeight } from './constants.js';
-
-export const TransactionHistoryPage: React.FC = () => {
-  // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
-  const parentRef = useRef<HTMLDivElement | null>(null);
-  const { data: transactions, isLoading } = useTransactionHistory();
-
-  const { t } = useTranslation();
-  useHeader(t(`header.transactionHistory`));
-
-  const { getVirtualItems, getTotalSize } = useVirtualizer({
-    count: transactions.length,
-    overscan: 10,
-    paddingEnd: 12,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 186,
-    getItemKey: (index) =>
-      `${(transactions[index] as FullStatusData).transactionId}-${index}`,
-  });
-
-  if (!transactions.length && !isLoading) {
-    return <TransactionHistoryEmpty />;
-  }
-
-  return (
-    <PageContainer
-      ref={parentRef}
-      style={{ height: minTransactionListHeight, overflow: 'auto' }}
-    >
-      {isLoading ? (
-        <List disablePadding>
-          {Array.from({ length: 3 }).map((_, index) => (
-            <TransactionHistoryItemSkeleton key={index} />
-          ))}
-        </List>
-      ) : (
-        <List
-          style={{
-            height: getTotalSize(),
-            width: '100%',
-            position: 'relative',
-          }}
-          disablePadding
-        >
-          {getVirtualItems().map((item) => {
-            const transaction = transactions[item.index];
-            return (
-              <TransactionHistoryItem
-                key={item.key}
-                size={item.size}
-                start={item.start}
-                transaction={transaction}
-              />
-            );
-          })}
-        </List>
-      )}
-    </PageContainer>
-  );
-};

package/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -1,48 +0,0 @@
-import { Box, Skeleton } from '@mui/material';
-import { Card } from '../../components/Card/Card.js';
-import { TokenSkeleton } from '../../components/Token/Token.js';
-import { TokenDivider } from '../../components/Token/Token.style.js';
-
-export const TransactionHistoryItemSkeleton = () => {
-  return (
-    <Card
-      style={{
-        marginBottom: '16px',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-        pt={2}
-        px={2}
-      >
-        <Skeleton
-          variant="rectangular"
-          width={96}
-          height={16}
-          sx={(theme) => ({
-            borderRadius: `${theme.shape.borderRadius}px`,
-          })}
-        />
-        <Skeleton
-          variant="rectangular"
-          width={64}
-          height={16}
-          sx={(theme) => ({
-            borderRadius: `${theme.shape.borderRadius}px`,
-          })}
-        />
-      </Box>
-      <Box px={2} py={2}>
-        <TokenSkeleton />
-        <Box pl={2.375} py={0.5}>
-          <TokenDivider />
-        </Box>
-        <TokenSkeleton />
-      </Box>
-    </Card>
-  );
-};

package/pages/TransactionHistoryPage/constants.ts

@@ -1 +0,0 @@
-export const minTransactionListHeight = 544;

package/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -1,161 +0,0 @@
-import type { ExchangeRateUpdateParams } from '@lifi/sdk';
-import { WarningRounded } from '@mui/icons-material';
-import { Box, Button, Typography } from '@mui/material';
-import type { MutableRefObject } from 'react';
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
-import { formatTokenAmount } from '../../utils/format.js';
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
-
-export interface ExchangeRateBottomSheetBase {
-  isOpen(): void;
-  open(
-    resolver: (value: boolean) => void,
-    data: ExchangeRateUpdateParams,
-  ): void;
-  close(value?: boolean, bottomSheetClose?: boolean): void;
-}
-
-interface ExchangeRateBottomSheetProps {
-  data?: ExchangeRateUpdateParams;
-  onContinue?(): void;
-  onCancel?(): void;
-}
-
-export const ExchangeRateBottomSheet = forwardRef<
-  ExchangeRateBottomSheetBase,
-  ExchangeRateBottomSheetProps
->(({ onContinue, onCancel }, ref) => {
-  const [data, setData] = useState<ExchangeRateUpdateParams>();
-  const bottomSheetRef = useRef<BottomSheetBase>(null);
-  const resolverRef = useRef<(value: boolean) => void>();
-
-  const handleContinue = () => {
-    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true);
-    onContinue?.();
-  };
-
-  const handleCancel = useCallback(() => {
-    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
-      false,
-    );
-    onCancel?.();
-  }, [onCancel, ref]);
-
-  const handleClose = useCallback(() => {
-    (ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
-      false,
-      false,
-    );
-    onCancel?.();
-  }, [onCancel, ref]);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      isOpen: () => bottomSheetRef.current?.isOpen(),
-      open: (resolver, data) => {
-        setData(data);
-        resolverRef.current = resolver;
-        bottomSheetRef.current?.open();
-      },
-      close: (value = false, bottomSheetClose = true) => {
-        resolverRef.current?.(value);
-        if (bottomSheetClose) {
-          bottomSheetRef.current?.close();
-        }
-      },
-    }),
-    [],
-  );
-
-  return (
-    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
-      <ExchangeRateBottomSheetContent
-        data={data}
-        onContinue={handleContinue}
-        onCancel={handleCancel}
-      />
-    </BottomSheet>
-  );
-});
-
-const ExchangeRateBottomSheetContent: React.FC<
-  ExchangeRateBottomSheetProps
-> = ({ data, onCancel, onContinue }) => {
-  const { t } = useTranslation();
-  const ref = useRef<HTMLElement>();
-  useSetContentHeight(ref);
-
-  if (!data) {
-    return;
-  }
-
-  const oldAmount = BigInt(data.oldToAmount || 1);
-  const rateChange = (
-    (Number((BigInt(data.newToAmount || 0) * 1_000_000n) / oldAmount) /
-      1_000_000) *
-      100 -
-    100
-  ).toFixed(2);
-
-  return (
-    <Box p={3} ref={ref}>
-      <CenterContainer>
-        <IconCircle status="warning" mb={1}>
-          <WarningRounded color="warning" />
-        </IconCircle>
-        <Typography py={1} fontSize={18} fontWeight={700}>
-          {t('warning.title.rateChanged')}
-        </Typography>
-      </CenterContainer>
-      <Typography py={1}>{t('warning.message.rateChanged')}</Typography>
-      <Box display="flex" justifyContent="space-between" mt={1}>
-        <Typography>{t('main.quotedAmount')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.number', {
-            value: formatTokenAmount(
-              BigInt(data.oldToAmount),
-              data.toToken.decimals,
-            ),
-          })}{' '}
-          {data?.toToken.symbol}
-        </Typography>
-      </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.currentAmount')}</Typography>
-        <Typography fontWeight={600}>
-          {t('format.number', {
-            value: formatTokenAmount(
-              BigInt(data?.newToAmount),
-              data?.toToken.decimals,
-            ),
-          })}{' '}
-          {data?.toToken.symbol}
-        </Typography>
-      </Box>
-      <Box display="flex" justifyContent="space-between" mt={0.25}>
-        <Typography>{t('main.rateChange')}</Typography>
-        <Typography fontWeight={600}>{rateChange}%</Typography>
-      </Box>
-      <Box display="flex" mt={3}>
-        <Button variant="text" onClick={onCancel} fullWidth>
-          {t('button.cancel')}
-        </Button>
-        <Box display="flex" p={1} />
-        <Button variant="contained" onClick={onContinue} fullWidth>
-          {t('button.continue')}
-        </Button>
-      </Box>
-    </Box>
-  );
-};

package/pages/TransactionPage/RouteTracker.tsx

@@ -1,68 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
-import { useRoutes } from '../../hooks/useRoutes.js';
-import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js';
-import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
-
-export interface RouteTrackerProps {
-  observableRouteId: string;
-  onChange: Dispatch<SetStateAction<string>>;
-  onFetching: Dispatch<SetStateAction<boolean>>;
-}
-
-export const RouteTracker = ({
-  observableRouteId,
-  onChange,
-  onFetching,
-}: RouteTrackerProps) => {
-  const routeExecutionStore = useRouteExecutionStoreContext();
-  const setExecutableRoute = useSetExecutableRoute();
-  const [observableRoute] = useState(
-    () => routeExecutionStore.getState().routes[observableRouteId]?.route,
-  );
-  const observableRouteIdRef = useRef(observableRoute?.id);
-  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes(
-    { observableRoute },
-  );
-  const currentRoute = routes?.[0];
-
-  /**
-   * The reviewable route is the route that the user currently sees on the review page.
-   * The observable route is the route for which we track bridges and exchanges.
-   * This allows us to query the route using the same tool each time we refresh.
-   * The observable and reviewable routes can be the same when we first enter the review page.
-   */
-  useEffect(() => {
-    if (
-      observableRouteIdRef.current &&
-      currentRoute &&
-      observableRouteIdRef.current !== currentRoute.id
-    ) {
-      const reviewableRouteId = observableRouteIdRef.current;
-      observableRouteIdRef.current = currentRoute.id;
-      setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId]);
-      onChange(currentRoute.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentRoute?.id, observableRouteId]);
-
-  useEffect(() => {
-    onFetching(isFetching);
-  }, [isFetching, onFetching]);
-
-  const handleRefetch = () => {
-    refetch();
-  };
-
-  return (
-    <ProgressToNextUpdate
-      updatedAt={dataUpdatedAt || new Date().getTime()}
-      timeToUpdate={refetchTime}
-      isLoading={isFetching}
-      onClick={handleRefetch}
-      sx={{ marginRight: -1 }}
-      size="medium"
-    />
-  );
-};

package/pages/TransactionPage/StartTransactionButton.tsx

@@ -1,30 +0,0 @@
-import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
-import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js';
-import { useGasSufficiency } from '../../hooks/useGasSufficiency.js';
-import type { StartTransactionButtonProps } from './types.js';
-
-export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
-  onClick,
-  route,
-  text,
-  loading,
-}) => {
-  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
-    useGasSufficiency(route);
-  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
-    useFromTokenSufficiency(route);
-
-  const shouldDisableButton =
-    insufficientFromToken || !!insufficientGas?.length;
-
-  return (
-    <BaseTransactionButton
-      onClick={onClick}
-      text={text}
-      disabled={shouldDisableButton}
-      loading={
-        isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading
-      }
-    />
-  );
-};

package/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,62 +0,0 @@
-import type { Theme } from '@mui/material';
-import { Box, alpha, darken, styled } from '@mui/material';
-import { RouteExecutionStatus } from '../../stores/routes/types.js';
-
-type StatusColor = RouteExecutionStatus | 'warning';
-
-const getStatusColor = (status: StatusColor, theme: Theme) => {
-  switch (status) {
-    case RouteExecutionStatus.Done:
-      return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
-    case RouteExecutionStatus.Failed:
-      return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
-    case 'warning':
-      return {
-        color: theme.palette.warning.main,
-        alpha: 0.48,
-        darken: theme.palette.mode === 'light' ? 0.32 : 0,
-      };
-    default:
-      return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
-  }
-};
-
-export const CenterContainer = styled(Box)(({ theme }) => ({
-  display: 'grid',
-  placeItems: 'center',
-  position: 'relative',
-}));
-
-export const IconCircle = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'status',
-})<{ status: StatusColor }>(({ theme, status }) => {
-  const {
-    color,
-    alpha: alphaValue,
-    darken: darkenValue,
-  } = getStatusColor(status, theme);
-  return {
-    backgroundColor: alpha(color, alphaValue),
-    borderRadius: '50%',
-    width: 64,
-    height: 64,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    '& > svg': {
-      color: darken(color, darkenValue),
-      width: 32,
-      height: 32,
-    },
-  };
-});
-
-export const MessageSkeletonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: 64,
-  gap: theme.spacing(0.5),
-  paddingTop: theme.spacing(1),
-}));