@lifi/widget 2.9.4 → 3.0.0-alpha.1

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

@@ -0,0 +1,114 @@
+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/SlippageSettings/index.ts

@@ -0,0 +1 @@
+export * from './SlippageSettings';

package/src/pages/SettingsPage/ThemeSettings.tsx

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

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

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

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

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

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

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

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