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

package/src/components/Step/StepTimer.tsx

@@ -1,80 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useTimer } from 'react-timer-hook';
-
-const getExpiryTimestamp = (step: LiFiStepExtended) =>
-  new Date(
-    (step.execution?.process[0]?.startedAt ?? Date.now()) +
-      step.estimate.executionDuration * 1000,
-  );
-
-export const StepTimer: React.FC<{
-  step: LiFiStepExtended;
-  hideInProgress?: boolean;
-}> = ({ step, hideInProgress }) => {
-  const { t } = useTranslation();
-  const [isExpired, setExpired] = useState(false);
-  const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
-  const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
-  const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
-    autoStart: false,
-    expiryTimestamp,
-    onExpire: () => setExpired(true),
-  });
-
-  useEffect(() => {
-    if (isExpired || !step.execution) {
-      return;
-    }
-    if (!isExecutionStarted) {
-      setExecutionStarted(true);
-      restart(getExpiryTimestamp(step));
-    }
-    const shouldBePaused = step.execution.process.some(
-      (process) =>
-        process.status === 'ACTION_REQUIRED' || process.status === 'FAILED',
-    );
-    if (isRunning && shouldBePaused) {
-      pause();
-    } else if (!isRunning && !shouldBePaused) {
-      resume();
-    }
-  }, [
-    expiryTimestamp,
-    isExecutionStarted,
-    isExpired,
-    isRunning,
-    pause,
-    restart,
-    resume,
-    step,
-  ]);
-
-  if (!isExecutionStarted) {
-    return (
-      <>
-        {t('main.estimatedTime', {
-          value: Math.ceil(step.estimate.executionDuration / 60),
-        })}
-      </>
-    );
-  }
-
-  const isTimerExpired = isExpired || (!minutes && !seconds);
-
-  if (
-    step.execution?.status === 'DONE' ||
-    step.execution?.status === 'FAILED' ||
-    (isTimerExpired && hideInProgress)
-  ) {
-    return null;
-  }
-
-  return isTimerExpired ? (
-    <>{t('main.inProgress')}</>
-  ) : (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</>
-  );
-};

package/src/components/StepActions/StepActions.style.tsx

@@ -1,75 +0,0 @@
-import {
-  Avatar,
-  StepConnector as MuiStepConnector,
-  StepContent as MuiStepContent,
-  StepLabel as MuiStepLabel,
-} from '@mui/material';
-import { stepConnectorClasses } from '@mui/material/StepConnector';
-import { stepContentClasses } from '@mui/material/StepContent';
-import { stepLabelClasses } from '@mui/material/StepLabel';
-import { styled } from '@mui/material/styles';
-
-export const StepIcon = styled('span', {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
-})(({ theme }) => ({
-  width: 12,
-  height: 12,
-  borderRadius: '50%',
-  border: `2px solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-}));
-
-export const StepConnector = styled(MuiStepConnector, {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
-})(({ theme }) => ({
-  marginLeft: theme.spacing(1.875),
-  [`.${stepConnectorClasses.line}`]: {
-    minHeight: 8,
-    borderLeftWidth: 2,
-    borderColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-  },
-}));
-
-export const StepLabel = styled(MuiStepLabel, {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error', 'disabled'].includes(prop as string),
-})(({ theme }) => ({
-  padding: 0,
-  [`.${stepLabelClasses.iconContainer}`]: {
-    paddingLeft: theme.spacing(0.75),
-    paddingRight: theme.spacing(2.75),
-  },
-  [`&.${stepLabelClasses.disabled}`]: {
-    cursor: 'inherit',
-  },
-}));
-
-export const StepContent = styled(MuiStepContent, {
-  shouldForwardProp: (prop) =>
-    !['active', 'completed', 'error'].includes(prop as string),
-})(({ theme }) => ({
-  borderLeft: `2px solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-  marginLeft: theme.spacing(1.875),
-  paddingLeft: theme.spacing(3.875),
-  [`&.${stepContentClasses.last}`]: {
-    borderLeft: 'none',
-    paddingLeft: theme.spacing(4.1875),
-  },
-}));
-
-export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
-  color: theme.palette.text.primary,
-  backgroundColor: 'transparent',
-}));

package/src/components/StepActions/StepActions.tsx

@@ -1,295 +0,0 @@
-import type { LiFiStep, Step, StepExtended } from '@lifi/sdk';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-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';
-import { LiFiToolLogo } from '../../icons';
-import { useWidgetConfig } from '../../providers';
-import type { WidgetSubvariant } from '../../types';
-import { formatTokenAmount } from '../../utils';
-import { CardIconButton } from '../Card';
-import { SmallAvatar } from '../SmallAvatar';
-import {
-  StepAvatar,
-  StepConnector,
-  StepContent,
-  StepLabel,
-} from './StepActions.style';
-import type { StepActionsProps, StepDetailsLabelProps } from './types';
-
-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);
-  };
-
-  const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-
-  // FIXME: step transaction request overrides step tool details, but not included step tool details
-  const toolDetails =
-    subvariant === 'nft'
-      ? 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>
-        <Typography ml={2} fontSize={18} fontWeight="500" flex={1}>
-          {t(`main.stepDetails`, {
-            tool: toolDetails.name,
-          })}
-        </Typography>
-        {hasCollapsedSteps ? (
-          <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </CardIconButton>
-        ) : null}
-      </Box>
-      {hasCollapsedSteps ? (
-        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-          <IncludedSteps step={step} subvariant={subvariant} />
-        </Collapse>
-      ) : (
-        <IncludedSteps step={step} subvariant={subvariant} />
-      )}
-    </Box>
-  );
-};
-
-export const IncludedSteps: React.FC<{
-  step: LiFiStep;
-  subvariant?: WidgetSubvariant;
-}> = ({ step, subvariant }) => {
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const StepIconComponent = ({ icon }: StepIconProps) => {
-    const tool = step.includedSteps?.[Number(icon) - 1];
-
-    return tool ? (
-      <SmallAvatar
-        src={tool.toolDetails.logoURI}
-        alt={tool.toolDetails.name}
-        sx={{
-          boxSizing: 'content-box',
-        }}
-      >
-        {tool.toolDetails.name[0]}
-      </SmallAvatar>
-    ) : null;
-  };
-  const StepDetailsLabel =
-    step.tool === 'custom' && subvariant === 'nft'
-      ? CustomStepDetailsLabel
-      : step.type === 'lifi' &&
-          step.includedSteps.some((step) => step.type === 'cross')
-        ? CrossStepDetailsLabel
-        : SwapStepDetailsLabel;
-  return step.includedSteps.length > 1 ? (
-    <Box mt={1.5}>
-      <Stepper
-        orientation="vertical"
-        connector={<StepConnector />}
-        activeStep={-1}
-      >
-        {step.includedSteps.map((step, i) => (
-          <MuiStep key={step.id} expanded>
-            <StepLabel StepIconComponent={StepIconComponent}>
-              {step.type === 'custom' && subvariant === 'nft' ? (
-                <CustomStepDetailsLabel step={step} subvariant={subvariant} />
-              ) : step.type === 'cross' ? (
-                <CrossStepDetailsLabel step={step} />
-              ) : step.type === 'protocol' ? (
-                <ProtocolStepDetailsLabel step={step} />
-              ) : (
-                <SwapStepDetailsLabel step={step} />
-              )}
-            </StepLabel>
-            <StepContent>
-              <StepDetailsContent step={step} subvariant={subvariant} />
-            </StepContent>
-          </MuiStep>
-        ))}
-      </Stepper>
-    </Box>
-  ) : (
-    <Box ml={6}>
-      <StepDetailsLabel
-        step={step as unknown as Step}
-        subvariant={subvariant === 'nft' ? subvariant : undefined}
-      />
-      <StepDetailsContent
-        step={step as unknown as Step}
-        subvariant={subvariant}
-      />
-    </Box>
-  );
-};
-
-export const StepDetailsContent: React.FC<{
-  step: StepExtended;
-  subvariant?: WidgetSubvariant;
-}> = ({ step, subvariant }) => {
-  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}
-      fontWeight="500"
-      color="text.secondary"
-      alignItems="center"
-      display="flex"
-    >
-      {t('format.number', {
-        value: fromAmount,
-      })}{' '}
-      {step.action.fromToken.symbol}
-      {showToAmount ? (
-        <>
-          <ArrowForwardIcon sx={{ fontSize: 18, paddingX: 0.5 }} />
-          {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}
-        </>
-      ) : null}
-    </Typography>
-  );
-};
-
-export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
-  step,
-  subvariant,
-}) => {
-  const { t } = useTranslation();
-
-  if (!subvariant) {
-    return null;
-  }
-
-  // FIXME: step transaction request overrides step tool details, but not included step tool details
-  const toolDetails =
-    subvariant === 'nft' &&
-    (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;
-
-  return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
-      {t(`main.${subvariant}StepDetails`, {
-        tool: toolDetails.name,
-      })}
-    </Typography>
-  );
-};
-
-export const CrossStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
-  const { t } = useTranslation();
-  const { getChainById } = useAvailableChains();
-  return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
-      {t('main.crossStepDetails', {
-        from: getChainById(step.action.fromChainId)?.name,
-        to: getChainById(step.action.toChainId)?.name,
-        tool: step.toolDetails.name,
-      })}
-    </Typography>
-  );
-};
-
-export const SwapStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
-  const { t } = useTranslation();
-  const { getChainById } = useAvailableChains();
-  return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
-      {t('main.swapStepDetails', {
-        chain: getChainById(step.action.fromChainId)?.name,
-        tool: step.toolDetails.name,
-      })}
-    </Typography>
-  );
-};
-
-export const ProtocolStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step }) => {
-  const { t } = useTranslation();
-  return (
-    <Typography fontSize={12} fontWeight="500" color="text.secondary">
-      {step.toolDetails.key === 'lifuelProtocol'
-        ? t('main.refuelStepDetails', {
-            tool: step.toolDetails.name,
-          })
-        : step.toolDetails.name}
-    </Typography>
-  );
-};

package/src/components/StepActions/types.ts

@@ -1,13 +0,0 @@
-import type { LiFiStep, Step } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import type { WidgetSubvariant } from '../../types';
-
-export interface StepActionsProps extends BoxProps {
-  step: LiFiStep;
-  dense?: boolean;
-}
-
-export interface StepDetailsLabelProps {
-  step: Step;
-  subvariant?: Extract<WidgetSubvariant, 'nft'>;
-}

package/src/components/StepDivider/StepDivider.style.tsx

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

package/src/components/StepDivider/StepDivider.tsx

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

package/src/components/Switch.tsx

@@ -1,56 +0,0 @@
-import { Switch as MuiSwitch } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-import { switchClasses } from '@mui/material/Switch';
-
-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/src/components/Tabs/Tabs.style.tsx

@@ -1,54 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import type { TabProps, TabsProps } from '@mui/material';
-import {
-  Tab as MuiTab,
-  Tabs as MuiTabs,
-  tabClasses,
-  tabsClasses,
-} from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-import { getCardFieldsetBackgroundColor } from '../../utils';
-
-export const Tabs: StyledComponent<TabsProps> = styled(MuiTabs)(
-  ({ theme }) => ({
-    backgroundColor: getCardFieldsetBackgroundColor(theme),
-    borderRadius: Math.max(
-      theme.shape.borderRadius,
-      theme.shape.borderRadiusSecondary,
-    ),
-    padding: theme.spacing(0.5),
-    flex: 1,
-    [`.${tabsClasses.indicator}`]: {
-      height: '100%',
-      width: '100%',
-      backgroundColor:
-        theme.palette.mode === 'dark'
-          ? theme.palette.background.default
-          : theme.palette.common.white,
-      borderRadius:
-        Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary) -
-        4,
-      boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
-    },
-  }),
-);
-
-export const Tab = styled(MuiTab, {
-  shouldForwardProp: (prop) => prop !== 'isDarkMode',
-})<TabProps>(({ theme }) => ({
-  zIndex: 1,
-  flex: 1,
-  textTransform: 'none',
-  fontSize: '1rem',
-  fontWeight: 700,
-  color:
-    theme.palette.mode === 'dark'
-      ? theme.palette.common.white
-      : theme.palette.common.black,
-  [`&.${tabClasses.selected}`]: {
-    color:
-      theme.palette.mode === 'dark'
-        ? theme.palette.common.white
-        : theme.palette.common.black,
-  },
-}));

package/src/components/TextFitter/TextFitter.tsx

@@ -1,86 +0,0 @@
-import { useTheme } from '@mui/material/styles';
-import type { PropsWithChildren } from 'react';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-import type { TextFitterProps } from './types';
-
-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/src/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;
-}