@lifi/widget 3.7.0 → 3.8.0-beta.1

package/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx

@@ -1,44 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { createContext, useContext, useEffect, useId, useState } from 'react';
-
-const SettingsAccordionContext = createContext({
-  setOpenCard: (id: string) => {},
-  openCard: '',
-});
-
-export const SettingsCardAccordion: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
-  const [openCard, setOpenCard] = useState('');
-
-  return (
-    <SettingsAccordionContext.Provider value={{ openCard, setOpenCard }}>
-      {children}
-    </SettingsAccordionContext.Provider>
-  );
-};
-
-export const useSettingsCardExpandable = () => {
-  const settingCardExpandableId = useId();
-  const [expanded, setExpanded] = useState(false);
-  const { openCard, setOpenCard } = useContext(SettingsAccordionContext);
-  const toggleExpanded = () => {
-    const newExpanded = !expanded;
-    setExpanded(newExpanded);
-
-    if (newExpanded && openCard !== settingCardExpandableId) {
-      setOpenCard(settingCardExpandableId);
-    }
-  };
-
-  useEffect(() => {
-    if (openCard !== settingCardExpandableId) {
-      setExpanded(false);
-    }
-  }, [settingCardExpandableId, openCard]);
-
-  return {
-    expanded,
-    toggleExpanded,
-  };
-};

package/pages/SettingsPage/SettingsCard/types.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface SettingCardTitle {
-  icon: ReactNode;
-  title: ReactNode;
-}

package/pages/SettingsPage/SettingsPage.tsx

@@ -1,34 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { PageContainer } from '../../components/PageContainer.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js';
-import { GasPriceSettings } from './GasPriceSettings.js';
-import { LanguageSetting } from './LanguageSetting.js';
-import { ResetSettingsButton } from './ResetSettingsButton.js';
-import { RoutePrioritySettings } from './RoutePrioritySettings.js';
-import { SettingsList } from './SettingsCard/SettingCard.style.js';
-import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js';
-import { SlippageSettings } from './SlippageSettings/SlippageSettings.js';
-import { ThemeSettings } from './ThemeSettings.js';
-
-export const SettingsPage = () => {
-  const { t } = useTranslation();
-  useHeader(t(`header.settings`));
-
-  return (
-    <PageContainer bottomGutters>
-      <SettingsList>
-        <SettingsCardAccordion>
-          <ThemeSettings />
-          <LanguageSetting />
-          <RoutePrioritySettings />
-          <GasPriceSettings />
-          <SlippageSettings />
-          <BridgeAndExchangeSettings type="Bridges" />
-          <BridgeAndExchangeSettings type="Exchanges" />
-        </SettingsCardAccordion>
-      </SettingsList>
-      <ResetSettingsButton />
-    </PageContainer>
-  );
-};

package/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -1,98 +0,0 @@
-import type { Theme } from '@mui/material';
-import {
-  Box,
-  ButtonBase,
-  InputBase,
-  alpha,
-  inputBaseClasses,
-  styled,
-} from '@mui/material';
-
-export const SettingsFieldSet = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.04)
-      : alpha(theme.palette.common.white, 0.08),
-  borderRadius: theme.shape.borderRadius,
-  padding: theme.spacing(0.5),
-  gap: theme.spacing(0.5),
-  height: '3.5rem',
-}));
-
-const slippageControlSelected = (theme: Theme) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.background.paper
-      : alpha(theme.palette.common.black, 0.56),
-  borderRadius: theme.shape.borderRadius - 4,
-  boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
-});
-
-interface SlippageDefaultProps {
-  selected?: boolean;
-}
-
-export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(({
-  theme,
-  selected,
-}) => {
-  const selectedStyle = selected
-    ? {
-        '&:not(:focus)': {
-          ...slippageControlSelected(theme),
-        },
-      }
-    : {};
-
-  return {
-    height: '100%',
-    width: '100%',
-    fontSize: '1rem',
-    fontWeight: 700,
-    '&:focus': {
-      ...slippageControlSelected(theme),
-    },
-    ...selectedStyle,
-  };
-});
-
-export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(({
-  theme,
-  selected,
-}) => {
-  const selectedStyle = selected
-    ? {
-        '&:not(:focus)': {
-          ...slippageControlSelected(theme),
-        },
-      }
-    : {};
-
-  return {
-    height: '100%',
-    width: '100%',
-
-    [`.${inputBaseClasses.input}`]: {
-      height: '100%',
-      width: '100%',
-      padding: 0,
-      textAlign: 'center',
-      '&::placeholder': {
-        fontSize: '1rem',
-        fontWeight: 700,
-        opacity: 1,
-      },
-      '&:focus': {
-        ...slippageControlSelected(theme),
-      },
-      ...selectedStyle,
-    },
-  };
-});
-
-export const SlippageLimitsWarningContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(1.25),
-  marginTop: theme.spacing(1.5),
-}));

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,116 +0,0 @@
-import { Percent, WarningRounded } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import type { ChangeEventHandler, FocusEventHandler } from 'react';
-import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js';
-import { useSettings } from '../../../stores/settings/useSettings.js';
-import {
-  defaultSlippage,
-  useSettingsStore,
-} from '../../../stores/settings/useSettingsStore.js';
-import { formatSlippage } from '../../../utils/format.js';
-import { BadgedValue } from '../SettingsCard/BadgedValue.js';
-import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js';
-import {
-  SettingsFieldSet,
-  SlippageCustomInput,
-  SlippageDefaultButton,
-  SlippageLimitsWarningContainer,
-} from './SlippageSettings.style.js';
-
-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'>();
-
-  const handleDefaultClick = () => {
-    setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current));
-  };
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target;
-
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current, true),
-    );
-  };
-
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    setFocused(undefined);
-
-    const { value } = event.target;
-
-    setValue(
-      'slippage',
-      formatSlippage(value || defaultSlippage, defaultValue.current),
-    );
-  };
-
-  const customInputValue =
-    !slippage || slippage === defaultSlippage ? '' : slippage;
-
-  const badgeColor = isSlippageOutsideRecommendedLimits
-    ? 'warning'
-    : isSlippageChanged
-      ? 'info'
-      : undefined;
-
-  return (
-    <SettingCardExpandable
-      value={
-        <BadgedValue
-          badgeColor={badgeColor}
-          showBadge={!!badgeColor}
-        >{`${slippage}%`}</BadgedValue>
-      }
-      icon={<Percent />}
-      title={t(`settings.slippage`)}
-    >
-      <Box mt={1.5}>
-        <SettingsFieldSet>
-          <SlippageDefaultButton
-            selected={defaultSlippage === slippage && focused !== 'input'}
-            onFocus={() => {
-              setFocused('button');
-            }}
-            onBlur={() => {
-              setFocused(undefined);
-            }}
-            onClick={handleDefaultClick}
-            disableRipple
-          >
-            {defaultSlippage}
-          </SlippageDefaultButton>
-          <SlippageCustomInput
-            selected={defaultSlippage !== 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>
-            <WarningRounded color="warning" />
-            <Typography fontSize={13} fontWeight={400}>
-              {t('warning.message.slippageOutsideRecommendedLimits')}
-            </Typography>
-          </SlippageLimitsWarningContainer>
-        )}
-      </Box>
-    </SettingCardExpandable>
-  );
-};

package/pages/SettingsPage/ThemeSettings.tsx

@@ -1,83 +0,0 @@
-import { BrightnessAuto, LightMode, Nightlight } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CardValue } from '../../components/Card/CardButton.style.js';
-import { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useAppearance } from '../../stores/settings/useAppearance.js';
-import type { Appearance } from '../../types/widget.js';
-import { HiddenUI } from '../../types/widget.js';
-import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
-
-const themeIcons = {
-  light: LightMode,
-  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}>
-    <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={<CardValue>{t(`button.${appearance}`)} </CardValue>}
-      icon={<ThemeIcon />}
-      title={t('settings.theme')}
-    >
-      <CardTabs
-        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 />}
-            />
-          );
-        })}
-      </CardTabs>
-    </SettingCardExpandable>
-  );
-};

package/pages/TransactionDetailsPage/ContactSupportButton.tsx

@@ -1,32 +0,0 @@
-import { Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { WidgetEvent } from '../../types/events.js';
-
-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/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,119 +0,0 @@
-import type { FullStatusData } from '@lifi/sdk';
-import { Box, Typography } from '@mui/material';
-import { useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { getStepList } from '../../components/Step/StepList.js';
-import { TransactionDetails } from '../../components/TransactionDetails.js';
-import { useHeader } from '../../hooks/useHeader.js';
-import { useNavigateBack } from '../../hooks/useNavigateBack.js';
-import { useTools } from '../../hooks/useTools.js';
-import { useTransactionDetails } from '../../hooks/useTransactionDetails.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
-import { getSourceTxHash } from '../../stores/routes/utils.js';
-import { buildRouteFromTxHistory } from '../../utils/converters.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { ContactSupportButton } from './ContactSupportButton.js';
-import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
-import { TransferIdCard } from './TransferIdCard.js';
-
-export const TransactionDetailsPage: React.FC = () => {
-  const { t, i18n } = useTranslation();
-  const { navigate } = useNavigateBack();
-  const { subvariant, subvariantOptions, contractSecondaryComponent } =
-    useWidgetConfig();
-  const { state }: any = useLocation();
-  const { tools } = useTools();
-  const storedRouteExecution = useRouteExecutionStore(
-    (store) => store.routes[state?.routeId],
-  );
-
-  const { transaction, isLoading } = useTransactionDetails(
-    !storedRouteExecution && state?.transactionHash,
-  );
-
-  const title =
-    subvariant === 'custom'
-      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}Details`)
-      : t(`header.transactionDetails`);
-  useHeader(title);
-
-  const routeExecution = useMemo(() => {
-    if (storedRouteExecution) {
-      return storedRouteExecution;
-    }
-    if (isLoading) {
-      return;
-    }
-    if (transaction) {
-      const routeExecution = buildRouteFromTxHistory(
-        transaction as FullStatusData,
-        tools,
-      );
-      return routeExecution;
-    }
-  }, [isLoading, storedRouteExecution, tools, transaction]);
-
-  useEffect(() => {
-    if (!isLoading && !routeExecution) {
-      navigate(navigationRoutes.home);
-    }
-  }, [isLoading, navigate, routeExecution]);
-
-  const sourceTxHash = getSourceTxHash(routeExecution?.route);
-
-  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 />
-  ) : (
-    <PageContainer bottomGutters>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-        pb={1}
-      >
-        <Typography fontSize={12}>
-          {startedAt.toLocaleString(i18n.language, {
-            dateStyle: 'long',
-          })}
-        </Typography>
-        <Typography fontSize={12}>
-          {startedAt.toLocaleString(i18n.language, {
-            timeStyle: 'short',
-          })}
-        </Typography>
-      </Box>
-      {getStepList(routeExecution?.route, subvariant)}
-      {subvariant === 'custom' && contractSecondaryComponent ? (
-        <ContractComponent sx={{ marginTop: 2 }}>
-          {contractSecondaryComponent}
-        </ContractComponent>
-      ) : null}
-      {routeExecution?.route ? (
-        <TransactionDetails
-          route={routeExecution?.route}
-          sx={{ marginTop: 2 }}
-        />
-      ) : null}
-      <TransferIdCard transferId={supportId} />
-      <Box mt={2}>
-        <ContactSupportButton supportId={supportId} />
-      </Box>
-    </PageContainer>
-  );
-};

package/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx

@@ -1,70 +0,0 @@
-import { Box, Skeleton } from '@mui/material';
-import { Card } from '../../components/Card/Card.js';
-import { PageContainer } from '../../components/PageContainer.js';
-import { TokenSkeleton } from '../../components/Token/Token.js';
-
-export const TransactionDetailsSkeleton = () => {
-  return (
-    <PageContainer>
-      <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 sx={{ paddingX: 2, marginBottom: 3 }}>
-        <Box pt={2.5}>
-          <Skeleton width={64} height={12} variant="rounded" />
-        </Box>
-        <Box py={1}>
-          {/* Token skeleton */}
-          <Box py={1}>
-            <TokenSkeleton />
-          </Box>
-          {/* Bridge skeleton */}
-          <Box py={1}>
-            <TokenSkeleton disableDescription />
-          </Box>
-          {/* Steps skeleton */}
-          {Array.from({ length: 3 }).map((_, key) => (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-              }}
-              py={1}
-              key={key}
-            >
-              <Skeleton
-                variant="rounded"
-                width={40}
-                height={40}
-                sx={{
-                  borderRadius: '100%',
-                }}
-              />
-              <Skeleton
-                sx={{
-                  ml: 2,
-                }}
-                width={96}
-                height={24}
-                variant="text"
-              />
-            </Box>
-          ))}
-          {/* Receiving Token skeleton */}
-          <Box py={1}>
-            <TokenSkeleton />
-          </Box>
-        </Box>
-      </Card>
-    </PageContainer>
-  );
-};

package/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -1,67 +0,0 @@
-import { ContentCopyRounded, OpenInNew } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card/Card.js';
-import { CardIconButton } from '../../components/Card/CardIconButton.js';
-import { CardTitle } from '../../components/Card/CardTitle.js';
-import { useExplorer } from '../../hooks/useExplorer.js';
-
-interface TransferIdCardProps {
-  transferId: string;
-}
-
-const getTxHash = (transferId: string) =>
-  transferId.indexOf('_') !== -1
-    ? transferId.substring(0, transferId.indexOf('_'))
-    : transferId;
-
-export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
-  const { t } = useTranslation();
-  const { getTransactionLink } = useExplorer();
-
-  const copyTransferId = async () => {
-    await navigator.clipboard.writeText(transferId);
-  };
-
-  const openTransferIdInExplorer = () => {
-    const txHash = getTxHash(transferId);
-    window.open(getTransactionLink({ txHash }), '_blank');
-  };
-
-  return (
-    <Card sx={{ marginTop: 2 }}>
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-        }}
-      >
-        <CardTitle flex={1}>{t('main.transferId')}</CardTitle>
-        <Box
-          sx={{
-            gap: 1,
-            display: 'flex',
-            marginRight: 2,
-            marginTop: 1,
-          }}
-        >
-          <CardIconButton size="small" onClick={copyTransferId}>
-            <ContentCopyRounded fontSize="inherit" />
-          </CardIconButton>
-          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
-            <OpenInNew fontSize="inherit" />
-          </CardIconButton>
-        </Box>
-      </Box>
-      <Typography
-        variant="body2"
-        pt={1}
-        pb={2}
-        px={2}
-        sx={{ wordBreak: 'break-all' }}
-      >
-        {transferId}
-      </Typography>
-    </Card>
-  );
-};