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

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,114 +0,0 @@
-import type { ChangeEventHandler, FocusEventHandler } from 'react';
-import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import PercentIcon from '@mui/icons-material/Percent';
-import { useSettings, useSettingsStore } from '../../../stores';
-import { useSettingMonitor } from '../../../hooks';
-import { formatSlippage } from '../../../utils';
-import {
-  SettingsFieldSet,
-  SlippageCustomInput,
-  SlippageDefaultButton,
-  SlippageLimitsWarningContainer,
-} from './SlippageSettings.style';
-import { Box, Typography } from '@mui/material';
-import { SettingCardExpandable, BadgedValue } from '../SettingsCard';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-
-const slippageDefault = '0.5';
-
-export const SlippageSettings: React.FC = () => {
-  const { t } = useTranslation();
-  const { isSlippageOutsideRecommendedLimits, isSlippageChanged } =
-    useSettingMonitor();
-  const { slippage } = useSettings(['slippage']);
-  const setValue = useSettingsStore((state) => state.setValue);
-  const defaultValue = useRef(slippage);
-  const [focused, setFocused] = useState<'input' | 'button' | undefined>();
-
-  const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
-  };
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target;
-
-    setValue(
-      'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current, true),
-    );
-  };
-
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused(undefined);
-
-    const { value } = event.target;
-
-    setValue(
-      'slippage',
-      formatSlippage(value || slippageDefault, defaultValue.current),
-    );
-  };
-
-  const customInputValue =
-    !slippage || slippage === slippageDefault ? '' : slippage;
-
-  const badgeColor = isSlippageOutsideRecommendedLimits
-    ? 'warning'
-    : isSlippageChanged
-      ? 'info'
-      : undefined;
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue
-          badgeColor={badgeColor}
-          showBadge={!!badgeColor}
-        >{`${slippage}%`}</BadgedValue>
-      }
-      icon={<PercentIcon />}
-      title={t(`settings.slippage`)}
-    >
-      <Box mt={1.5}>
-        <SettingsFieldSet>
-          <SlippageDefaultButton
-            selected={slippageDefault === slippage && focused !== 'input'}
-            onFocus={() => {
-              setFocused('button');
-            }}
-            onBlur={() => {
-              setFocused(undefined);
-            }}
-            onClick={handleDefaultClick}
-            disableRipple
-          >
-            {slippageDefault}
-          </SlippageDefaultButton>
-          <SlippageCustomInput
-            selected={slippageDefault !== slippage && focused !== 'button'}
-            placeholder={focused === 'input' ? '' : t('settings.custom')}
-            inputProps={{
-              inputMode: 'decimal',
-            }}
-            onChange={handleInputUpdate}
-            onFocus={() => {
-              setFocused('input');
-            }}
-            onBlur={handleInputBlur}
-            value={customInputValue}
-            autoComplete="off"
-          />
-        </SettingsFieldSet>
-        {isSlippageOutsideRecommendedLimits && (
-          <SlippageLimitsWarningContainer>
-            <WarningRoundedIcon color="warning" />
-            <Typography fontSize={13} fontWeight={400}>
-              {t('warning.message.slippageOutsideRecommendedLimits')}
-            </Typography>
-          </SlippageLimitsWarningContainer>
-        )}
-      </Box>
-    </SettingCardExpandable>
-  );
-};

package/src/pages/SettingsPage/ThemeSettings.tsx

@@ -1,84 +0,0 @@
-import type { Appearance } from '../../types';
-import { HiddenUI } from '../../types';
-import { useWidgetConfig } from '../../providers';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import BrightnessAuto from '@mui/icons-material/BrightnessAuto';
-import Nightlight from '@mui/icons-material/Nightlight';
-import { Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useAppearance } from '../../stores';
-import { SettingCardExpandable, SummaryValue } from './SettingsCard';
-import { Tab, Tabs } from '../../components/Tabs';
-
-const themeIcons = {
-  light: LightModeIcon,
-  dark: Nightlight,
-  auto: BrightnessAuto,
-};
-
-interface ThemeTabProps {
-  title: string;
-  value: Appearance;
-  Icon: React.ReactElement;
-}
-
-// If the Tab is not the direct child of the Tabs component you can loose the switching
-// The component passes the props to the Tab component so switching isn't lost
-const ThemeTab: React.FC<ThemeTabProps> = ({
-  title,
-  value,
-  Icon,
-  ...props
-}) => (
-  <Tooltip title={title} arrow>
-    <Tab icon={Icon} value={value} {...props} disableRipple />
-  </Tooltip>
-);
-
-export const ThemeSettings: React.FC = () => {
-  const { t } = useTranslation();
-  const [appearance, setAppearance] = useAppearance();
-  const { hiddenUI } = useWidgetConfig();
-
-  if (hiddenUI?.includes(HiddenUI.Appearance)) {
-    return null;
-  }
-
-  const ThemeIcon = themeIcons[appearance];
-
-  const handleThemeChange = (
-    _: React.SyntheticEvent,
-    appearance: Appearance,
-  ) => {
-    setAppearance(appearance);
-  };
-
-  return (
-    <SettingCardExpandable
-      value={<SummaryValue>{t(`button.${appearance}`)} </SummaryValue>}
-      icon={<ThemeIcon />}
-      title={t('settings.theme')}
-    >
-      <Tabs
-        value={appearance}
-        aria-label="tabs"
-        indicatorColor="primary"
-        onChange={handleThemeChange}
-        sx={{ mt: 1.5 }}
-      >
-        {Object.entries(themeIcons).map(([theme, Icon]) => {
-          const supportedThemeOption = theme as Appearance;
-
-          return (
-            <ThemeTab
-              key={supportedThemeOption}
-              title={t(`button.${supportedThemeOption}`)}
-              value={supportedThemeOption}
-              Icon={<Icon />}
-            />
-          );
-        })}
-      </Tabs>
-    </SettingCardExpandable>
-  );
-};

package/src/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -1,32 +0,0 @@
-import { Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useWidgetEvents } from '../../hooks/';
-import { WidgetEvent } from '../../types/events';
-
-interface ContactSupportButtonProps {
-  supportId?: string;
-}
-
-export const ContactSupportButton = ({
-  supportId,
-}: ContactSupportButtonProps) => {
-  const { t } = useTranslation();
-  const widgetEvents = useWidgetEvents();
-
-  const handleClick = () => {
-    if (!widgetEvents.all.has(WidgetEvent.ContactSupport)) {
-      const url = 'https://discord.gg/lifi';
-      const target = '_blank';
-      const rel = 'nofollow noreferrer';
-      window.open(url, target, rel);
-    } else {
-      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId });
-    }
-  };
-
-  return (
-    <Button onClick={handleClick} fullWidth>
-      {t('button.contactSupport')}
-    </Button>
-  );
-};

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.style.tsx

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

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,144 +0,0 @@
-import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
-import { Box, IconButton, Typography } from '@mui/material';
-import { useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { Card, CardTitle } from '../../components/Card';
-import { ContractComponent } from '../../components/ContractComponent';
-import { Insurance } from '../../components/Insurance';
-import { getStepList } from '../../components/Step';
-import { useNavigateBack, useTools, useTransactionDetails } from '../../hooks';
-import { useWidgetConfig } from '../../providers';
-import { getSourceTxHash, useRouteExecutionStore } from '../../stores';
-import { formatTokenAmount, navigationRoutes } from '../../utils';
-import { buildRouteFromTxHistory } from '../../utils/converters';
-import { ContactSupportButton } from './ContactSupportButton';
-import { Container } from './TransactionDetailsPage.style';
-import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton';
-
-export const TransactionDetailsPage: React.FC = () => {
-  const { t, i18n } = useTranslation();
-  const { navigate } = useNavigateBack();
-  const { subvariant, contractComponent, contractSecondaryComponent } =
-    useWidgetConfig();
-  const { state }: any = useLocation();
-  const { tools } = useTools();
-  const storedRouteExecution = useRouteExecutionStore(
-    (store) => store.routes[state?.routeId],
-  );
-
-  const { transaction, isLoading } = useTransactionDetails(
-    state?.transactionHash,
-  );
-
-  const routeExecution = useMemo(() => {
-    if (storedRouteExecution) {
-      return storedRouteExecution;
-    }
-    if (isLoading) {
-      return;
-    }
-    if (transaction) {
-      const routeExecution = buildRouteFromTxHistory(transaction, tools);
-      return routeExecution;
-    }
-  }, [isLoading, storedRouteExecution, tools, transaction]);
-
-  useEffect(() => {
-    if (!isLoading && !routeExecution) {
-      navigate(navigationRoutes.home);
-    }
-  }, [isLoading, navigate, routeExecution]);
-
-  const copySupportId = async () => {
-    await navigator.clipboard.writeText(supportId);
-  };
-
-  const sourceTxHash = getSourceTxHash(routeExecution?.route);
-
-  const insuranceCoverageId = sourceTxHash ?? routeExecution?.route.fromAddress;
-
-  let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
-
-  if (process.env.NODE_ENV === 'development') {
-    supportId += `_${routeExecution?.route.id}`;
-  }
-
-  const startedAt = new Date(
-    (routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
-      (storedRouteExecution ? 1 : 1000), // local and BE routes have different ms handling
-  );
-
-  return isLoading && !storedRouteExecution ? (
-    <TransactionDetailsSkeleton />
-  ) : (
-    <Container>
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-        pb={1}
-      >
-        <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
-            dateStyle: 'long',
-          }).format(startedAt)}
-        </Typography>
-        <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
-            timeStyle: 'short',
-          }).format(startedAt)}
-        </Typography>
-      </Box>
-      {getStepList(routeExecution?.route, subvariant)}
-      {subvariant === 'nft' ? (
-        <ContractComponent mt={2}>
-          {contractSecondaryComponent || contractComponent}
-        </ContractComponent>
-      ) : null}
-      {routeExecution?.route?.insurance?.state === 'INSURED' ? (
-        <Insurance
-          mt={2}
-          status={routeExecution.status}
-          feeAmountUsd={routeExecution.route.insurance.feeAmountUsd}
-          insuredAmount={formatTokenAmount(
-            BigInt(routeExecution.route.toAmountMin),
-            routeExecution.route.toToken.decimals,
-          )}
-          insuredTokenSymbol={routeExecution.route.toToken.symbol}
-          insurableRouteId={routeExecution.route.id}
-          insuranceCoverageId={insuranceCoverageId}
-        />
-      ) : null}
-      <Card mt={2}>
-        <Box
-          sx={{
-            display: 'flex',
-            flex: 1,
-          }}
-        >
-          <CardTitle flex={1}>{t('main.supportId')}</CardTitle>
-          <Box mr={1} mt={1}>
-            <IconButton size="medium" onClick={copySupportId}>
-              <ContentCopyIcon fontSize="small" />
-            </IconButton>
-          </Box>
-        </Box>
-        <Typography
-          variant="body2"
-          pt={1}
-          pb={2}
-          px={2}
-          sx={{ wordBreak: 'break-all' }}
-        >
-          {supportId}
-        </Typography>
-      </Card>
-      <Box mt={2} mb={2.5}>
-        <ContactSupportButton supportId={supportId} />
-      </Box>
-    </Container>
-  );
-};

package/src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx

@@ -1,113 +0,0 @@
-import { Box, Container, Skeleton } from '@mui/material';
-import { Card } from '../../components/Card';
-
-const DetailedTextSkeleton = () => {
-  return (
-    <Box display="flex" ml={6}>
-      <Skeleton width={64} height={16} variant="text" />
-      <Skeleton
-        width={96}
-        height={16}
-        variant="text"
-        sx={{ marginLeft: 0.5 }}
-      />
-    </Box>
-  );
-};
-
-const TransactionDetailsTokenSkeleton = () => {
-  return (
-    <Box py={1}>
-      <Box display="flex" flex={1} alignItems="center">
-        <Skeleton
-          variant="rounded"
-          width={32}
-          height={32}
-          sx={{
-            borderRadius: '100%',
-          }}
-        />
-        <Box display="flex" flexDirection="column" flex={1} ml={2}>
-          <Skeleton width={64} height={32} variant="text" />
-        </Box>
-      </Box>
-      <DetailedTextSkeleton />
-    </Box>
-  );
-};
-
-export const TransactionDetailsSkeleton = () => {
-  return (
-    <Container>
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-        pb={1}
-        pt={0.75}
-      >
-        <Skeleton width={96} height={20} variant="text" />
-        <Skeleton width={40} height={20} variant="text" />
-      </Box>
-      <Card mb={3} variant="default" sx={{ paddingX: 2 }}>
-        <Box pt={2.5}>
-          <Skeleton width={64} height={12} variant="rounded" />
-        </Box>
-        <Box py={1}>
-          {/* Token skeleton */}
-          <TransactionDetailsTokenSkeleton />
-          {/* Bridge skeleton */}
-          <Box py={1}>
-            <Box display="flex" flex={1} alignItems="center">
-              <Skeleton
-                variant="rounded"
-                width={32}
-                height={32}
-                sx={{
-                  borderRadius: '100%',
-                }}
-              />
-              <Box display="flex" flexDirection="column" flex={1} ml={2}>
-                <Skeleton width={96} height={32} variant="text" />
-              </Box>
-            </Box>
-            <DetailedTextSkeleton />
-            <DetailedTextSkeleton />
-          </Box>
-          {/* Steps skeleton */}
-          {Array.from({ length: 3 }).map((_, key) => (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-              }}
-              py={1}
-              key={key}
-            >
-              <Skeleton
-                variant="rounded"
-                width={32}
-                height={32}
-                sx={{
-                  borderRadius: '100%',
-                }}
-              />
-              <Skeleton
-                sx={{
-                  ml: 2,
-                }}
-                width={96}
-                height={32}
-                variant="text"
-              />
-            </Box>
-          ))}
-          {/* Receiving Token skeleton */}
-          <TransactionDetailsTokenSkeleton />
-        </Box>
-      </Card>
-    </Container>
-  );
-};

package/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -1,34 +0,0 @@
-import ReceiptLongRoundedIcon from '@mui/icons-material/ReceiptLongRounded';
-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}>
-        <ReceiptLongRoundedIcon 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/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -1,102 +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';
-import { Token, TokenDivider } from '../../components/Token';
-import { navigationRoutes } from '../../utils';
-
-export const TransactionHistoryItem: React.FC<{
-  transaction: StatusResponse;
-  size: number;
-  start: number;
-}> = ({ transaction, size, start }) => {
-  const { i18n } = useTranslation();
-  const navigate = useNavigate();
-
-  const sending: ExtendedTransactionInfo =
-    transaction.sending as ExtendedTransactionInfo;
-  const receiving: ExtendedTransactionInfo =
-    transaction.receiving as ExtendedTransactionInfo;
-
-  const handleClick = () => {
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
-        transactionHash: (transaction as FullStatusData).sending.txHash,
-      },
-    });
-  };
-
-  const startedAt = new Date(
-    ((sending as ExtendedTransactionInfo).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}>
-          {new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(
-            startedAt,
-          )}
-        </Typography>
-        <Typography fontSize={12}>
-          {new Intl.DateTimeFormat(i18n.language, {
-            timeStyle: 'short',
-          }).format(startedAt)}
-        </Typography>
-      </Box>
-      <Box py={1}>
-        <Token token={fromToken} px={2} pt={1} connected />
-        <TokenDivider />
-        <Token token={toToken} px={2} pt={0.5} pb={1} />
-      </Box>
-    </Card>
-  );
-};

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,62 +0,0 @@
-import type { FullStatusData } from '@lifi/sdk';
-import { Container, List } from '@mui/material';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
-import { useTransactionHistory } from '../../hooks/useTransactionHistory';
-import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
-import { TransactionHistoryItem } from './TransactionHistoryItem';
-import { TransactionHistorySkeleton } from './TransactionHistorySkeleton';
-import { minTransactionListHeight } from './constants';
-
-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 { getVirtualItems, getTotalSize } = useVirtualizer({
-    count: transactions.length,
-    overscan: 10,
-    paddingStart: 8,
-    paddingEnd: 12,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 194,
-    getItemKey: (index) =>
-      `${(transactions[index] as FullStatusData).transactionId}-${index}`,
-  });
-
-  if (!transactions.length && !isLoading) {
-    return <TransactionHistoryEmpty />;
-  }
-
-  return (
-    <Container
-      ref={parentRef}
-      style={{ height: minTransactionListHeight, overflow: 'auto' }}
-    >
-      <List
-        style={{ height: getTotalSize(), width: '100%', position: 'relative' }}
-        disablePadding
-      >
-        {isLoading ? (
-          <List disablePadding sx={{ paddingTop: 1 }}>
-            {Array.from({ length: 3 }).map((_, index) => (
-              <TransactionHistorySkeleton key={index} />
-            ))}
-          </List>
-        ) : (
-          getVirtualItems().map((item) => {
-            const transaction = transactions[item.index];
-            return (
-              <TransactionHistoryItem
-                key={item.key}
-                size={item.size}
-                start={item.start}
-                transaction={transaction}
-              />
-            );
-          })
-        )}
-      </List>
-    </Container>
-  );
-};