@lifi/widget 3.7.0-beta.6 → 3.7.0-beta.8

package/components/Skeleton/WidgetSkeleton.tsx

@@ -1,136 +0,0 @@
-import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material';
-import { useMemo } from 'react';
-import { createTheme } from '../../themes/createTheme.js';
-import type { WidgetConfigPartialProps } from '../../types/widget.js';
-import {
-  AppExpandedContainer,
-  FlexContainer,
-  RelativeContainer,
-} from '../AppContainer.js';
-import { Container as HeaderContainer } from '../Header/Header.style.js';
-import {
-  SkeletonAmountContainer,
-  SkeletonCard,
-  SkeletonCardRow,
-  SkeletonHeaderAppBar,
-  SkeletonInputCard,
-  SkeletonPoweredByContainer,
-  SkeletonReviewButton,
-  SkeletonReviewButtonContainer,
-  SkeletonSendToWalletButton,
-  SkeletonWalletMenuButtonContainer,
-} from './WidgetSkeleton.style.js';
-
-const SkeletonIcon = () => (
-  <Skeleton width={24} height={24} variant="rounded" />
-);
-const SkeletonWalletMenuButton = () => (
-  <SkeletonWalletMenuButtonContainer>
-    <Skeleton width={98} height={19} variant="text" />
-    <SkeletonIcon />
-  </SkeletonWalletMenuButtonContainer>
-);
-
-interface SkeletonSelectCardProps {
-  titleWidth?: number;
-  placeholderWidth?: number;
-}
-const SkeletonSelectCard = ({
-  titleWidth = 36,
-  placeholderWidth = 195,
-}: SkeletonSelectCardProps) => (
-  <SkeletonCard elevation={0}>
-    <Skeleton width={titleWidth} height={22} variant="text" />
-    <SkeletonCardRow>
-      <Skeleton width={40} height={40} variant="circular" />
-      <Skeleton width={placeholderWidth} height={27} variant="text" />
-    </SkeletonCardRow>
-  </SkeletonCard>
-);
-
-const SkeletonYouPayCard = () => (
-  <SkeletonInputCard elevation={0}>
-    <Skeleton width={55} height={22} variant="text" />
-    <SkeletonCardRow>
-      <Skeleton width={40} height={40} variant="circular" />
-      <SkeletonAmountContainer>
-        <Skeleton
-          width={48}
-          height={37}
-          variant="text"
-          sx={{ marginTop: -0.75 }}
-        />
-        <Skeleton width={48} height={12} variant="text" />
-      </SkeletonAmountContainer>
-    </SkeletonCardRow>
-  </SkeletonInputCard>
-);
-
-export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
-  const appearance = config?.appearance;
-  const hiddenUI = config?.hiddenUI || [];
-  const requiredUI = config?.requiredUI || [];
-  const configTheme = config?.theme;
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const appearanceMode =
-    !appearance || appearance === 'auto'
-      ? prefersDarkMode
-        ? 'dark'
-        : 'light'
-      : appearance;
-
-  const theme = useMemo(
-    () => createTheme(appearanceMode, configTheme),
-    [appearanceMode, configTheme],
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <AppExpandedContainer>
-        <RelativeContainer>
-          <HeaderContainer>
-            {!hiddenUI.includes('walletMenu') ? (
-              <SkeletonHeaderAppBar>
-                <SkeletonWalletMenuButton />
-              </SkeletonHeaderAppBar>
-            ) : null}
-            <SkeletonHeaderAppBar
-              sx={{ justifyContent: 'space-between', height: 40 }}
-            >
-              <Skeleton width={126} height={34} variant="text" />
-              <SkeletonIcon />
-            </SkeletonHeaderAppBar>
-          </HeaderContainer>
-          <FlexContainer
-            sx={{
-              gap: 2,
-              paddingBottom: hiddenUI.includes('poweredBy') ? 3 : 2,
-            }}
-          >
-            <SkeletonSelectCard />
-            <SkeletonSelectCard />
-            <SkeletonYouPayCard />
-            {requiredUI.includes('toAddress') ? (
-              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />
-            ) : null}
-            <SkeletonReviewButtonContainer>
-              <SkeletonReviewButton variant="contained" fullWidth>
-                &nbsp;
-              </SkeletonReviewButton>
-              {!requiredUI.includes('toAddress') ? (
-                <SkeletonSendToWalletButton variant="text" fullWidth>
-                  &nbsp;
-                </SkeletonSendToWalletButton>
-              ) : null}
-            </SkeletonReviewButtonContainer>
-            {!hiddenUI.includes('poweredBy') ? (
-              <SkeletonPoweredByContainer>
-                <Skeleton width={96} height={18} variant="text" />
-              </SkeletonPoweredByContainer>
-            ) : null}
-          </FlexContainer>
-        </RelativeContainer>
-      </AppExpandedContainer>
-    </ThemeProvider>
-  );
-};

package/components/Step/CircularProgress.style.tsx

@@ -1,86 +0,0 @@
-import type { ProcessStatus, Substatus } from '@lifi/sdk';
-import type { Theme } from '@mui/material';
-import {
-  Box,
-  CircularProgress as MuiCircularProgress,
-  alpha,
-  circularProgressClasses,
-  keyframes,
-  styled,
-} from '@mui/material';
-
-const getStatusColor = (
-  theme: Theme,
-  status?: ProcessStatus,
-  substatus?: Substatus,
-) => {
-  switch (status) {
-    case 'ACTION_REQUIRED':
-      return alpha(theme.palette.info.main, 0.12);
-    case 'DONE':
-      if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
-        return alpha(theme.palette.warning.main, 0.48);
-      }
-      return alpha(theme.palette.success.main, 0.12);
-    case 'FAILED':
-      return alpha(theme.palette.error.main, 0.12);
-    default:
-      return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
-  }
-};
-
-export const CircularIcon = styled(Box, {
-  shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
-})<{ status?: ProcessStatus; substatus?: Substatus }>(
-  ({ theme, status, substatus }) => ({
-    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? getStatusColor(theme, status, substatus)
-      : theme.palette.background.paper,
-    borderStyle: 'solid',
-    borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? 3
-      : 0,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    width: 40,
-    height: 40,
-    borderRadius: '50%',
-  }),
-);
-
-const circleAnimation = keyframes`
-  0% {
-    stroke-dashoffset: 129;
-    transform: rotate(0);
-  }
-  50% {
-    stroke-dashoffset: 56;
-    transform: rotate(45deg);
-  };
-  100% {
-    stroke-dashoffset: 129;
-    transform: rotate(360deg);
-  }
-`;
-
-// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
-export const CircularProgressPending = styled(MuiCircularProgress)`
-  color: ${({ theme }) =>
-    theme.palette.mode === 'light'
-      ? theme.palette.primary.main
-      : theme.palette.primary.light};
-  animation-duration: 3s;
-  position: absolute;
-  .${circularProgressClasses.circle} {
-    animation-duration: 2s;
-    animation-timing-function: linear;
-    animation-name: ${circleAnimation};
-    stroke-dasharray: 129;
-    stroke-dashoffset: 129;
-    stroke-linecap: round;
-    transform-origin: 100% 100%;
-  }
-`;

package/components/Step/CircularProgress.tsx

@@ -1,58 +0,0 @@
-import type { Process } from '@lifi/sdk';
-import {
-  Done,
-  ErrorRounded,
-  InfoRounded,
-  WarningRounded,
-} from '@mui/icons-material';
-import { darken } from '@mui/material';
-import {
-  CircularIcon,
-  CircularProgressPending,
-} from './CircularProgress.style.js';
-
-export function CircularProgress({ process }: { process: Process }) {
-  return (
-    <CircularIcon status={process.status} substatus={process.substatus}>
-      {process.status === 'STARTED' || process.status === 'PENDING' ? (
-        <CircularProgressPending size={40} />
-      ) : null}
-      {process.status === 'ACTION_REQUIRED' ? (
-        <InfoRounded
-          color="info"
-          sx={{
-            position: 'absolute',
-            fontSize: '1.5rem',
-          }}
-        />
-      ) : null}
-      {process.status === 'DONE' &&
-      (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
-        <WarningRounded
-          sx={(theme) => ({
-            position: 'absolute',
-            fontSize: '1.5rem',
-            color: darken(theme.palette.warning.main, 0.32),
-          })}
-        />
-      ) : process.status === 'DONE' ? (
-        <Done
-          color="success"
-          sx={{
-            position: 'absolute',
-            fontSize: '1.5rem',
-          }}
-        />
-      ) : null}
-      {process.status === 'FAILED' ? (
-        <ErrorRounded
-          color="error"
-          sx={{
-            position: 'absolute',
-            fontSize: '1.5rem',
-          }}
-        />
-      ) : null}
-    </CircularIcon>
-  );
-}

package/components/Step/DestinationWalletAddress.tsx

@@ -1,53 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import { LinkRounded, Wallet } from '@mui/icons-material';
-import { Box, Link, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CircularIcon } from './CircularProgress.style.js';
-
-export const DestinationWalletAddress: React.FC<{
-  step: LiFiStepExtended;
-  toAddress: string;
-  toAddressLink: string;
-}> = ({ step, toAddress, toAddressLink }) => {
-  const { t } = useTranslation();
-  const isDone = step.execution?.status === 'DONE';
-  return (
-    <Box px={2} py={1}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <CircularIcon status={isDone ? 'DONE' : undefined}>
-          <Wallet
-            color={isDone ? 'success' : 'inherit'}
-            sx={{
-              position: 'absolute',
-              fontSize: '1.25rem',
-            }}
-          />
-        </CircularIcon>
-        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
-          {isDone
-            ? t('main.sentToAddress', {
-                address: toAddress,
-              })
-            : t('main.sendToAddress', {
-                address: toAddress,
-              })}
-        </Typography>
-        <CardIconButton
-          size="medium"
-          LinkComponent={Link}
-          href={toAddressLink}
-          target="_blank"
-          rel="nofollow noreferrer"
-        >
-          <LinkRounded />
-        </CardIconButton>
-      </Box>
-    </Box>
-  );
-};

package/components/Step/Step.tsx

@@ -1,110 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import type { LiFiStepExtended, TokenAmount } from '@lifi/sdk';
-import { Box } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Card } from '../../components/Card/Card.js';
-import { CardTitle } from '../../components/Card/CardTitle.js';
-import { StepActions } from '../../components/StepActions/StepActions.js';
-import { Token } from '../../components/Token/Token.js';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { shortenAddress } from '../../utils/wallet.js';
-import { DestinationWalletAddress } from './DestinationWalletAddress.js';
-import { StepProcess } from './StepProcess.js';
-import { StepTimer } from './StepTimer.js';
-
-export const Step: React.FC<{
-  step: LiFiStepExtended;
-  fromToken?: TokenAmount;
-  toToken?: TokenAmount;
-  impactToken?: TokenAmount;
-  toAddress?: string;
-}> = ({ step, fromToken, toToken, impactToken, toAddress }) => {
-  const { t } = useTranslation();
-  const { subvariant, subvariantOptions } = useWidgetConfig();
-  const { getAddressLink } = useExplorer();
-  const stepHasError = step.execution?.process.some(
-    (process) => process.status === 'FAILED',
-  );
-
-  const getCardTitle = () => {
-    switch (step.type) {
-      case 'lifi':
-        const hasBridgeStep = step.includedSteps.some(
-          (step) => step.type === 'cross',
-        );
-        const hasSwapStep = step.includedSteps.some(
-          (step) => step.type === 'swap',
-        );
-        if (hasBridgeStep && hasSwapStep) {
-          return subvariant === 'custom'
-            ? subvariantOptions?.custom === 'deposit'
-              ? t('main.stepBridgeAndDeposit')
-              : t('main.stepBridgeAndBuy')
-            : t('main.stepSwapAndBridge');
-        }
-        if (hasBridgeStep) {
-          return subvariant === 'custom'
-            ? subvariantOptions?.custom === 'deposit'
-              ? t('main.stepBridgeAndDeposit')
-              : t('main.stepBridgeAndBuy')
-            : t('main.stepBridge');
-        }
-        return subvariant === 'custom'
-          ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
-          : t('main.stepSwap');
-      default:
-        return subvariant === 'custom'
-          ? subvariantOptions?.custom === 'deposit'
-            ? t('main.stepSwapAndDeposit')
-            : t('main.stepSwapAndBuy')
-          : t('main.stepSwap');
-    }
-  };
-
-  const formattedToAddress = shortenAddress(toAddress);
-  const toAddressLink = toAddress
-    ? getAddressLink(toAddress, step.action.toChainId)
-    : undefined;
-
-  return (
-    <Card type={stepHasError ? 'error' : 'default'}>
-      <Box
-        sx={{
-          display: 'flex',
-          flex: 1,
-        }}
-      >
-        <CardTitle flex={1}>{getCardTitle()}</CardTitle>
-        <CardTitle sx={{ fontWeight: 600 }}>
-          <StepTimer step={step} />
-        </CardTitle>
-      </Box>
-      <Box py={1}>
-        {fromToken ? <Token token={fromToken} px={2} py={1} /> : null}
-        <StepActions step={step} px={2} py={1} dense />
-        {step.execution?.process.map((process, index) => (
-          <StepProcess key={index} step={step} process={process} />
-        ))}
-        {formattedToAddress && toAddressLink ? (
-          <DestinationWalletAddress
-            step={step}
-            toAddress={formattedToAddress}
-            toAddressLink={toAddressLink}
-          />
-        ) : null}
-        {toToken ? (
-          <Token
-            token={toToken}
-            impactToken={impactToken}
-            enableImpactTokenTooltip
-            px={2}
-            py={1}
-          />
-        ) : null}
-      </Box>
-    </Card>
-  );
-};

package/components/Step/StepList.tsx

@@ -1,54 +0,0 @@
-import type { RouteExtended, TokenAmount } from '@lifi/sdk';
-import { Fragment } from 'react';
-import { StepDivider } from '../../components/StepDivider/StepDivider.js';
-import type { WidgetSubvariant } from '../../types/widget.js';
-import { Step } from './Step.js';
-
-export const getStepList = (
-  route?: RouteExtended,
-  subvariant?: WidgetSubvariant,
-) =>
-  route?.steps.map((step, index, steps) => {
-    const lastIndex = steps.length - 1;
-    const fromToken: TokenAmount | undefined =
-      index === 0
-        ? {
-            ...step.action.fromToken,
-            amount: BigInt(step.action.fromAmount),
-          }
-        : undefined;
-    let toToken: TokenAmount | undefined;
-    let impactToken: TokenAmount | undefined;
-    if (index === lastIndex) {
-      toToken = {
-        ...(step.execution?.toToken ?? step.action.toToken),
-        amount: step.execution?.toAmount
-          ? BigInt(step.execution.toAmount)
-          : subvariant === 'custom'
-            ? BigInt(route.toAmount)
-            : BigInt(step.estimate.toAmount),
-      };
-      impactToken = {
-        ...steps[0].action.fromToken,
-        amount: BigInt(steps[0].action.fromAmount),
-      };
-    }
-    const toAddress =
-      index === lastIndex && route.fromAddress !== route.toAddress
-        ? route.toAddress
-        : undefined;
-    return (
-      <Fragment key={step.id}>
-        <Step
-          step={step}
-          fromToken={fromToken}
-          toToken={toToken}
-          impactToken={impactToken}
-          toAddress={toAddress}
-        />
-        {steps.length > 1 && index !== steps.length - 1 ? (
-          <StepDivider />
-        ) : null}
-      </Fragment>
-    );
-  });

package/components/Step/StepProcess.tsx

@@ -1,67 +0,0 @@
-import type { LiFiStep, Process } from '@lifi/sdk';
-import { OpenInNewRounded } from '@mui/icons-material';
-import { Box, Link, Typography } from '@mui/material';
-import { useExplorer } from '../../hooks/useExplorer.js';
-import { useProcessMessage } from '../../hooks/useProcessMessage.js';
-import { CardIconButton } from '../Card/CardIconButton.js';
-import { CircularProgress } from './CircularProgress.js';
-
-export const StepProcess: React.FC<{
-  step: LiFiStep;
-  process: Process;
-}> = ({ step, process }) => {
-  const { title, message } = useProcessMessage(step, process);
-  const { getTransactionLink } = useExplorer();
-
-  return (
-    <Box px={2} py={1}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <CircularProgress process={process} />
-        <Typography
-          mx={2}
-          flex={1}
-          fontSize={14}
-          fontWeight={process.error ? 600 : 400}
-        >
-          {title}
-        </Typography>
-        {process.txHash || process.txLink ? (
-          <CardIconButton
-            size="small"
-            LinkComponent={Link}
-            href={
-              process.txHash
-                ? getTransactionLink({
-                    txHash: process.txHash,
-                    chain: process.chainId,
-                  })
-                : getTransactionLink({
-                    txLink: process.txLink!,
-                    chain: process.chainId,
-                  })
-            }
-            target="_blank"
-            rel="nofollow noreferrer"
-          >
-            <OpenInNewRounded fontSize="inherit" />
-          </CardIconButton>
-        ) : null}
-      </Box>
-      {message ? (
-        <Typography
-          ml={7}
-          fontSize={14}
-          fontWeight={500}
-          color="text.secondary"
-        >
-          {message}
-        </Typography>
-      ) : null}
-    </Box>
-  );
-};

package/components/Step/StepTimer.tsx

@@ -1,123 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk';
-import { AccessTimeFilled } from '@mui/icons-material';
-import { Box, Tooltip } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useTimer } from '../../hooks/timer/useTimer.js';
-import { IconTypography } from '../IconTypography.js';
-
-const getExecutionProcess = (step: LiFiStepExtended) =>
-  step.execution?.process.findLast(
-    (process) =>
-      process.type === 'SWAP' ||
-      process.type === 'CROSS_CHAIN' ||
-      process.type === 'RECEIVING_CHAIN',
-  );
-
-const getExpiryTimestamp = (step: LiFiStepExtended) =>
-  new Date(
-    (getExecutionProcess(step)?.startedAt ?? Date.now()) +
-      step.estimate.executionDuration * 1000,
-  );
-
-export const StepTimer: React.FC<{
-  step: LiFiStepExtended;
-  hideInProgress?: boolean;
-}> = ({ step, hideInProgress }) => {
-  const { t, i18n } = useTranslation();
-  const [isExpired, setExpired] = useState(false);
-  const [isExecutionStarted, setExecutionStarted] = useState(
-    () => !!getExecutionProcess(step),
-  );
-  const [expiryTimestamp, setExpiryTimestamp] = useState(() =>
-    getExpiryTimestamp(step),
-  );
-  const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
-    autoStart: false,
-    expiryTimestamp,
-    onExpire: () => setExpired(true),
-  });
-
-  useEffect(() => {
-    const executionProcess = getExecutionProcess(step);
-    if (!executionProcess) {
-      return;
-    }
-    const shouldRestart = executionProcess.status === 'FAILED';
-    const shouldPause = executionProcess.status === 'ACTION_REQUIRED';
-    const shouldStart =
-      executionProcess.status === 'STARTED' ||
-      executionProcess.status === 'PENDING';
-    const shouldResume = executionProcess.status === 'PENDING';
-    if (isExecutionStarted && shouldRestart) {
-      setExecutionStarted(false);
-      setExpired(false);
-      return;
-    }
-    if (isExecutionStarted && isExpired) {
-      return;
-    }
-    if (!isExecutionStarted && shouldStart) {
-      const expiryTimestamp = getExpiryTimestamp(step);
-      setExecutionStarted(true);
-      setExpired(false);
-      setExpiryTimestamp(expiryTimestamp);
-      restart(expiryTimestamp);
-      return;
-    }
-    if (isRunning && shouldPause) {
-      pause();
-    } else if (!isRunning && shouldResume) {
-      resume();
-    }
-  }, [isExecutionStarted, isExpired, isRunning, pause, restart, resume, step]);
-
-  if (!isExecutionStarted) {
-    const showSeconds = step.estimate.executionDuration < 60;
-    const duration = showSeconds
-      ? Math.floor(step.estimate.executionDuration)
-      : Math.floor(step.estimate.executionDuration / 60);
-    return (
-      <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
-        <Box component="span" display="flex" alignItems="center">
-          <IconTypography component="span" mr={0.5} fontSize={16}>
-            <AccessTimeFilled fontSize="inherit" />
-          </IconTypography>
-          <Box component="span">
-            {duration.toLocaleString(i18n.language, {
-              style: 'unit',
-              unit: showSeconds ? 'second' : 'minute',
-              unitDisplay: 'narrow',
-            })}
-          </Box>
-        </Box>
-      </Tooltip>
-    );
-  }
-
-  const isTimerExpired = isExpired || (!minutes && !seconds);
-
-  if (
-    step.execution?.status === 'DONE' ||
-    step.execution?.status === 'FAILED' ||
-    (isTimerExpired && hideInProgress)
-  ) {
-    return null;
-  }
-
-  return isTimerExpired ? (
-    t('main.inProgress')
-  ) : (
-    <Tooltip title={t(`tooltip.estimatedTime`)} sx={{ cursor: 'help' }}>
-      <Box component="span" display="flex" alignItems="center">
-        <IconTypography component="span" mr={0.5} fontSize={16}>
-          <AccessTimeFilled fontSize="inherit" />
-        </IconTypography>
-        <Box
-          component="span"
-          sx={{ fontVariantNumeric: 'tabular-nums', cursor: 'help' }}
-        >{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</Box>
-      </Box>
-    </Tooltip>
-  );
-};