@lifi/widget 2.9.4 → 3.0.0-alpha.1

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

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

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

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

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

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

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

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

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

package/src/components/TextFitter/TextFitter.tsx

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

@@ -0,0 +1,13 @@
+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/src/components/Token/Token.style.tsx

@@ -0,0 +1,46 @@
+import { Box, Typography } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+
+export const TextSecondaryContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'connected',
+})<{ connected?: boolean }>(({ theme, connected }) => ({
+  borderLeftWidth: connected ? 2 : 0,
+  borderLeftStyle: 'solid',
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  margin: connected
+    ? theme.spacing(0.5, 0, 0, 1.875)
+    : theme.spacing(0, 0, 0, 6),
+  padding: connected
+    ? theme.spacing(0, 0, 0, 3.875)
+    : theme.spacing(0, 0, 0, 0),
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexWrap: 'wrap',
+}));
+
+export const TextSecondary = styled(Typography, {
+  shouldForwardProp: (prop: string) => !['connected', 'dot'].includes(prop),
+})<{ connected?: boolean; dot?: boolean }>(({ theme, connected, dot }) => ({
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: dot
+    ? alpha(theme.palette.text.secondary, 0.56)
+    : theme.palette.text.secondary,
+  marginTop: connected ? 0 : theme.spacing(0.5),
+}));
+
+export const TokenDivider = styled(Box)(({ theme }) => ({
+  height: 12,
+  borderLeftWidth: 2,
+  borderLeftStyle: 'solid',
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+  margin: theme.spacing(0, 0, 0, 3.875),
+  padding: theme.spacing(0, 0, 0, 3.875),
+}));