@lifi/widget 3.7.0 → 3.8.0-beta.0

package/components/StepActions/StepActions.tsx

@@ -1,338 +0,0 @@
-import type { LiFiStep, StepExtended } from '@lifi/sdk';
-import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material';
-import type { StepIconProps } from '@mui/material';
-import {
-  Badge,
-  Box,
-  Collapse,
-  Step as MuiStep,
-  Stepper,
-  Typography,
-} from '@mui/material';
-import type { MouseEventHandler } from 'react';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { formatUnits } from 'viem';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { LiFiToolLogo } from '../../icons/lifi.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { HiddenUI } from '../../types/widget.js';
-import { formatTokenAmount } from '../../utils/format.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { SmallAvatar } from '../SmallAvatar.js';
-import {
-  StepAvatar,
-  StepConnector,
-  StepContent,
-  StepLabel,
-  StepLabelTypography,
-} from './StepActions.style.js';
-import { StepFees } from './StepFees.js';
-import type {
-  IncludedStepsProps,
-  StepActionsProps,
-  StepDetailsLabelProps,
-} from './types.js';
-
-export const StepActions: React.FC<StepActionsProps> = ({
-  step,
-  dense,
-  ...other
-}) => {
-  const { t } = useTranslation();
-  const { subvariant } = useWidgetConfig();
-  const [cardExpanded, setCardExpanded] = useState(false);
-
-  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation();
-    setCardExpanded((expanded) => !expanded);
-  };
-
-  // FIXME: step transaction request overrides step tool details, but not included step tool details
-  const toolDetails =
-    subvariant === 'custom'
-      ? step.includedSteps.find(
-          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom',
-        )?.toolDetails || step.toolDetails
-      : step.toolDetails;
-
-  return (
-    <Box {...other}>
-      <Box display="flex" alignItems="center">
-        <Badge
-          overlap="circular"
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          badgeContent={<SmallAvatar src={LiFiToolLogo} />}
-        >
-          <StepAvatar
-            variant="circular"
-            src={toolDetails.logoURI ?? LiFiToolLogo}
-            alt={toolDetails.name}
-          >
-            {toolDetails.name[0]}
-          </StepAvatar>
-        </Badge>
-        <Box flex={1}>
-          <Typography fontSize={18} fontWeight={600} lineHeight={1.3334} ml={2}>
-            {toolDetails.name?.includes('LI.FI')
-              ? toolDetails.name
-              : t(`main.stepDetails`, {
-                  tool: toolDetails.name,
-                })}
-          </Typography>
-          <StepFees ml={2} step={step} />
-        </Box>
-        {dense ? (
-          <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? (
-              <ExpandLess fontSize="inherit" />
-            ) : (
-              <ExpandMore fontSize="inherit" />
-            )}
-          </CardIconButton>
-        ) : null}
-      </Box>
-      {dense ? (
-        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-          <IncludedSteps step={step} />
-        </Collapse>
-      ) : (
-        <IncludedSteps step={step} />
-      )}
-    </Box>
-  );
-};
-
-export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
-  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
-    useWidgetConfig();
-
-  let includedSteps = step.includedSteps;
-  if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
-    const feeCollectionStep = includedSteps.find(
-      (step) => step.tool === 'feeCollection',
-    );
-    if (feeCollectionStep) {
-      includedSteps = structuredClone(
-        includedSteps.filter((step) => step.tool !== 'feeCollection'),
-      );
-      includedSteps[0].estimate.fromAmount =
-        feeCollectionStep.estimate.fromAmount;
-    }
-  }
-
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const StepIconComponent = ({ icon }: StepIconProps) => {
-    const includedStep = includedSteps?.[Number(icon) - 1];
-    const feeCollectionStep =
-      includedStep?.type === 'protocol' &&
-      includedStep?.tool === 'feeCollection';
-    const toolName =
-      feeCollectionStep && feeConfig?.name
-        ? feeConfig?.name
-        : includedStep?.toolDetails.name;
-    const toolLogoURI =
-      feeCollectionStep && feeConfig?.logoURI
-        ? feeConfig?.logoURI
-        : includedStep?.toolDetails.logoURI;
-    return toolLogoURI ? (
-      <SmallAvatar
-        src={toolLogoURI}
-        alt={toolName}
-        sx={{ width: 20, height: 20 }}
-      >
-        {toolName?.[0]}
-      </SmallAvatar>
-    ) : null;
-  };
-
-  return (
-    <Box mt={1}>
-      <Stepper
-        orientation="vertical"
-        connector={<StepConnector />}
-        activeStep={-1}
-      >
-        {includedSteps.map((step, i, includedSteps) => (
-          <MuiStep key={step.id} expanded>
-            <StepLabel StepIconComponent={StepIconComponent}>
-              {step.type === 'custom' && subvariant === 'custom' ? (
-                <CustomStepDetailsLabel
-                  step={step}
-                  subvariant={subvariant}
-                  subvariantOptions={subvariantOptions}
-                />
-              ) : step.type === 'cross' ? (
-                <BridgeStepDetailsLabel step={step} />
-              ) : step.type === 'protocol' ? (
-                <ProtocolStepDetailsLabel step={step} feeConfig={feeConfig} />
-              ) : (
-                <SwapStepDetailsLabel step={step} />
-              )}
-            </StepLabel>
-            <StepContent last={i === includedSteps.length - 1}>
-              <StepDetailsContent step={step} />
-            </StepContent>
-          </MuiStep>
-        ))}
-      </Stepper>
-    </Box>
-  );
-};
-
-export const StepDetailsContent: React.FC<{
-  step: StepExtended;
-}> = ({ step }) => {
-  const { t } = useTranslation();
-
-  const sameTokenProtocolStep =
-    step.action.fromToken.chainId === step.action.toToken.chainId &&
-    step.action.fromToken.address === step.action.toToken.address;
-
-  let fromAmount: string | undefined;
-  if (sameTokenProtocolStep) {
-    const estimatedFromAmount =
-      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
-
-    fromAmount =
-      estimatedFromAmount > 0n
-        ? formatUnits(estimatedFromAmount, step.action.fromToken.decimals)
-        : formatUnits(
-            BigInt(step.estimate.fromAmount),
-            step.action.fromToken.decimals,
-          );
-  } else {
-    fromAmount = formatTokenAmount(
-      BigInt(step.estimate.fromAmount),
-      step.action.fromToken.decimals,
-    );
-  }
-
-  const showToAmount =
-    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
-
-  return (
-    <Typography
-      fontSize={12}
-      lineHeight={1}
-      fontWeight="500"
-      color="text.secondary"
-      alignItems="center"
-      display="flex"
-    >
-      {!showToAmount ? (
-        <>
-          {formatUnits(
-            BigInt(step.estimate.fromAmount),
-            step.action.fromToken.decimals,
-          )}{' '}
-          {step.action.fromToken.symbol}
-          {' - '}
-        </>
-      ) : null}
-      {t('format.number', {
-        value: fromAmount,
-      })}{' '}
-      {step.action.fromToken.symbol}
-      {showToAmount ? (
-        <>
-          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
-          {t('format.number', {
-            value: formatTokenAmount(
-              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
-              step.execution?.toToken?.decimals ?? step.action.toToken.decimals,
-            ),
-          })}{' '}
-          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
-        </>
-      ) : (
-        ` (${t('format.currency', {
-          value:
-            parseFloat(fromAmount) * parseFloat(step.action.fromToken.priceUSD),
-        })})`
-      )}
-    </Typography>
-  );
-};
-
-export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
-  step,
-  subvariant,
-  subvariantOptions,
-}) => {
-  const { t } = useTranslation();
-
-  if (!subvariant) {
-    return null;
-  }
-
-  // FIXME: step transaction request overrides step tool details, but not included step tool details
-  const toolDetails =
-    subvariant === 'custom' &&
-    (step as unknown as LiFiStep).includedSteps?.length > 0
-      ? (step as unknown as LiFiStep).includedSteps.find(
-          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom',
-        )?.toolDetails || step.toolDetails
-      : step.toolDetails;
-
-  const stepDetailsKey =
-    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout';
-
-  return (
-    <StepLabelTypography>
-      {t(`main.${stepDetailsKey}StepDetails`, {
-        tool: toolDetails.name,
-      })}
-    </StepLabelTypography>
-  );
-};
-
-export const BridgeStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
-  const { t } = useTranslation();
-  const { getChainById } = useAvailableChains();
-  return (
-    <StepLabelTypography>
-      {t('main.bridgeStepDetails', {
-        from: getChainById(step.action.fromChainId)?.name,
-        to: getChainById(step.action.toChainId)?.name,
-        tool: step.toolDetails.name,
-      })}
-    </StepLabelTypography>
-  );
-};
-
-export const SwapStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
-  const { t } = useTranslation();
-  const { getChainById } = useAvailableChains();
-  return (
-    <StepLabelTypography>
-      {t('main.swapStepDetails', {
-        chain: getChainById(step.action.fromChainId)?.name,
-        tool: step.toolDetails.name,
-      })}
-    </StepLabelTypography>
-  );
-};
-
-export const ProtocolStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step, feeConfig }) => {
-  const { t } = useTranslation();
-  return (
-    <StepLabelTypography>
-      {step.toolDetails.key === 'feeCollection'
-        ? feeConfig?.name
-          ? t('main.fees.integrator', { tool: feeConfig.name })
-          : t('main.fees.defaultIntegrator')
-        : step.toolDetails.key === 'lifuelProtocol'
-          ? t('main.refuelStepDetails', {
-              tool: step.toolDetails.name,
-            })
-          : step.toolDetails.name}
-    </StepLabelTypography>
-  );
-};

package/components/StepActions/StepFees.tsx

@@ -1,44 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import type { TypographyProps } from '@mui/material';
-import { Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { getStepFeeCostsBreakdown } from '../../utils/fees.js';
-
-export const StepFees: React.FC<
-  TypographyProps & {
-    step: LiFiStepExtended;
-  }
-> = ({ step, ...other }) => {
-  const { t } = useTranslation();
-
-  const isDone = step.execution?.status === 'DONE';
-  const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts;
-  const feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts;
-  let fees = 0;
-
-  if (gasCosts) {
-    const { amountUSD } = getStepFeeCostsBreakdown(gasCosts);
-    fees += amountUSD;
-  }
-
-  if (feeCosts) {
-    const filteredfeeCosts = feeCosts?.filter((fee) => !fee.included);
-    if (filteredfeeCosts?.length) {
-      const { amountUSD } = getStepFeeCostsBreakdown(filteredfeeCosts);
-      fees += amountUSD;
-    }
-  }
-
-  return (
-    <Typography
-      fontSize={12}
-      fontWeight="500"
-      color="text.secondary"
-      lineHeight={1.3334}
-      {...other}
-    >
-      {t(`format.currency`, { value: fees })}{' '}
-      {isDone ? t('main.fees.paid') : t('main.fees.estimated')}
-    </Typography>
-  );
-};

package/components/StepActions/types.ts

@@ -1,23 +0,0 @@
-import type { LiFiStep, Step } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import type {
-  SubvariantOptions,
-  WidgetFeeConfig,
-  WidgetSubvariant,
-} from '../../types/widget.js';
-
-export interface StepActionsProps extends BoxProps {
-  step: LiFiStep;
-  dense?: boolean;
-}
-
-export interface StepDetailsLabelProps {
-  step: Step;
-  subvariant?: Extract<WidgetSubvariant, 'custom'>;
-  subvariantOptions?: SubvariantOptions;
-  feeConfig?: WidgetFeeConfig;
-}
-
-export interface IncludedStepsProps {
-  step: LiFiStep;
-}

package/components/StepDivider/StepDivider.style.tsx

@@ -1,8 +0,0 @@
-import { Container as MuiContainer, styled } from '@mui/material';
-
-export const Container = styled(MuiContainer)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: theme.spacing(2),
-}));

package/components/StepDivider/StepDivider.tsx

@@ -1,10 +0,0 @@
-import { Divider } from '@mui/material';
-import { Container } from './StepDivider.style.js';
-
-export const StepDivider: React.FC = () => {
-  return (
-    <Container>
-      <Divider orientation="vertical" flexItem />
-    </Container>
-  );
-};

package/components/Switch.tsx

@@ -1,59 +0,0 @@
-import {
-  Switch as MuiSwitch,
-  alpha,
-  styled,
-  switchClasses,
-} from '@mui/material';
-
-export const Switch = styled(MuiSwitch)(({ theme }) => ({
-  width: 42,
-  height: 24,
-  padding: 0,
-  [`.${switchClasses.switchBase}`]: {
-    padding: 0,
-    margin: theme.spacing(0.25),
-    transitionDuration: theme.transitions.duration.standard,
-    [`&.${switchClasses.checked}`]: {
-      transform: 'translateX(18px)',
-      color: theme.palette.common.white,
-      [`& + .${switchClasses.track}`]: {
-        backgroundColor: theme.palette.primary.main,
-        opacity: 1,
-        border: 0,
-      },
-      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-        opacity: 0.5,
-      },
-    },
-    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-      color: theme.palette.primary.main,
-      border: '6px solid',
-      borderColor: theme.palette.common.white,
-    },
-    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color:
-        theme.palette.mode === 'light'
-          ? alpha(theme.palette.common.black, 0.12)
-          : alpha(theme.palette.common.white, 0.12),
-    },
-    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-    },
-  },
-  [`.${switchClasses.thumb}`]: {
-    boxSizing: 'border-box',
-    width: 20,
-    height: 20,
-  },
-  [`.${switchClasses.track}`]: {
-    borderRadius: 24 / 2,
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.16)
-        : alpha(theme.palette.common.white, 0.16),
-    opacity: 1,
-    transition: theme.transitions.create(['background-color'], {
-      duration: theme.transitions.duration.standard,
-    }),
-  },
-}));

package/components/Tabs/Tabs.style.tsx

@@ -1,53 +0,0 @@
-import type { TabProps } from '@mui/material';
-import {
-  Tab as MuiTab,
-  Tabs as MuiTabs,
-  alpha,
-  styled,
-  tabClasses,
-  tabsClasses,
-} from '@mui/material';
-
-export const Tabs = styled(MuiTabs)(({ theme }) => ({
-  flex: 1,
-  [`.${tabsClasses.indicator}`]: {
-    top: theme.spacing(0.5),
-    left: theme.spacing(0.5),
-    height: `calc(100% - ${theme.spacing(1)})`,
-    width: `calc(100% - ${theme.spacing(1)})`,
-  },
-  [`.${tabsClasses.fixed}`]: {
-    padding: theme.spacing(0.5),
-  },
-}));
-
-export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? alpha(theme.palette.common.black, 0.04)
-      : alpha(theme.palette.common.white, 0.08),
-  [`.${tabsClasses.indicator}`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.background.paper
-        : alpha(theme.palette.common.black, 0.56),
-  },
-}));
-
-export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
-  zIndex: 1,
-  flex: 1,
-  textTransform: 'none',
-  fontSize: '1rem',
-  fontWeight: 700,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.common.black
-      : theme.palette.common.white,
-  [`&.${tabClasses.selected}`]: {
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white,
-  },
-}));

package/components/TextFitter/TextFitter.tsx

@@ -1,86 +0,0 @@
-import { useTheme } from '@mui/material';
-import type { PropsWithChildren } from 'react';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-import type { TextFitterProps } from './types.js';
-
-const initialState = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-};
-
-export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
-  children,
-  width = '100%',
-  height,
-  maxHeight,
-  preserveAspectRatio = 'xMinYMid meet',
-  textStyle,
-  svgStyle,
-  cropTop,
-  cropBottom,
-  onFit,
-}) => {
-  const theme = useTheme();
-  const textRef = useRef<SVGTextElement>(null);
-  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState);
-
-  const [ref] = useInView({
-    onChange(inView) {
-      if (inView) {
-        calculateBox();
-      }
-    },
-  });
-
-  const calculateBox = useCallback(() => {
-    if (!textRef.current) {
-      return;
-    }
-    const box = textRef.current.getBBox();
-    if (cropTop) {
-      box.y += box.height * cropTop;
-      box.height -= box.height * cropTop;
-    }
-    if (cropBottom) {
-      box.height -= box.height * cropBottom;
-    }
-    setViewBox(box);
-    onFit?.();
-  }, [cropBottom, cropTop, onFit]);
-
-  useLayoutEffect(() => {
-    calculateBox();
-  }, [calculateBox, children]);
-
-  useLayoutEffect(() => {
-    if (document.fonts) {
-      document.fonts.ready.then(() => {
-        calculateBox();
-      });
-    }
-  }, [calculateBox]);
-
-  return (
-    <svg
-      style={svgStyle}
-      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
-      width={width}
-      height={height}
-      // height={
-      //   textRect.height && maxHeight && textRect.height >= maxHeight
-      //     ? maxHeight
-      //     : height
-      // }
-      preserveAspectRatio={preserveAspectRatio}
-      fill={theme.palette.text.primary}
-      ref={ref}
-    >
-      <text x={0} y={0} style={textStyle} ref={textRef}>
-        {children}
-      </text>
-    </svg>
-  );
-};

package/components/TextFitter/types.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export interface TextFitterProps {
-  textStyle?: CSSProperties;
-  svgStyle?: CSSProperties;
-  onFit?(): void;
-  maxHeight?: string | number;
-  height?: string | number;
-  width?: string | number;
-  preserveAspectRatio?: string;
-  cropTop?: number;
-  cropBottom?: number;
-}

package/components/ToAddressRequiredMessage.tsx

@@ -1,38 +0,0 @@
-import type { Route } from '@lifi/sdk';
-import { Wallet } from '@mui/icons-material';
-import type { BoxProps } from '@mui/material';
-import { Box, Collapse, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useToAddressRequirements } from '../hooks/useToAddressRequirements.js';
-import { useFieldValues } from '../stores/form/useFieldValues.js';
-import { AlertMessage } from './AlertMessage/AlertMessage.js';
-
-interface ToAddressRequiredMessageProps extends BoxProps {
-  route?: Route;
-}
-
-export const ToAddressRequiredMessage: React.FC<
-  ToAddressRequiredMessageProps
-> = ({ route, ...props }) => {
-  const { t } = useTranslation();
-  const [toAddress] = useFieldValues('toAddress');
-  const { requiredToAddress } = useToAddressRequirements();
-
-  const showMessage = route && requiredToAddress && !toAddress;
-
-  return (
-    <Collapse timeout={225} in={showMessage} unmountOnExit mountOnEnter>
-      <Box {...props}>
-        <AlertMessage
-          title={
-            <Typography variant="body2" px={1} color="text.primary">
-              {t('info.message.toAddressIsRequired')}
-            </Typography>
-          }
-          icon={<Wallet />}
-          multilineTitle
-        />
-      </Box>
-    </Collapse>
-  );
-};