@lifi/widget 3.0.0-alpha.7 → 3.0.0-alpha.8

package/components/Step/CircularProgress.tsx

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

package/components/Step/DestinationWalletAddress.tsx

@@ -0,0 +1,55 @@
+import type { LiFiStepExtended } from '@lifi/sdk';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+import { LinkButton } from './StepProcess.style';
+
+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' : 'NOT_STARTED'}>
+          <WalletIcon
+            color={isDone ? 'success' : 'inherit'}
+            sx={{
+              position: 'absolute',
+              fontSize: '1rem',
+            }}
+          />
+        </CircularIcon>
+        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
+          {isDone
+            ? t('main.sentToAddress', {
+                address: toAddress,
+              })
+            : t('main.sendToAddress', {
+                address: toAddress,
+              })}
+        </Typography>
+        <LinkButton
+          size="small"
+          edge="end"
+          LinkComponent={Link}
+          href={toAddressLink}
+          target="_blank"
+          rel="nofollow noreferrer"
+        >
+          <LinkRoundedIcon />
+        </LinkButton>
+      </Box>
+    </Box>
+  );
+};

package/components/Step/GasStepProcess.tsx

@@ -0,0 +1,45 @@
+import type { LiFiStepExtended } from '@lifi/sdk';
+import EvStationIcon from '@mui/icons-material/EvStation';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+
+export const GasStepProcess: React.FC<{
+  step: LiFiStepExtended;
+}> = ({ step }) => {
+  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' : 'NOT_STARTED'}>
+          <EvStationIcon
+            color={isDone ? 'success' : 'inherit'}
+            sx={{
+              position: 'absolute',
+              fontSize: '1rem',
+            }}
+          />
+        </CircularIcon>
+        <Typography ml={2} flex={1} fontSize={14} fontWeight={400}>
+          {t('format.currency', {
+            value:
+              (step.execution?.gasAmountUSD ||
+                step.estimate.gasCosts?.reduce(
+                  (amount, gasCost) =>
+                    amount + parseFloat(gasCost.amountUSD || '0'),
+                  0,
+                )) ??
+              0,
+          })}{' '}
+          {isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};

package/components/Step/Step.tsx

@@ -0,0 +1,96 @@
+/* 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, CardTitle } from '../../components/Card';
+import { StepActions } from '../../components/StepActions';
+import { Token } from '../../components/Token';
+import { useAvailableChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { shortenAddress } from '../../utils';
+import { DestinationWalletAddress } from './DestinationWalletAddress';
+import { GasStepProcess } from './GasStepProcess';
+import { StepProcess } from './StepProcess';
+import { StepTimer } from './StepTimer';
+
+export const Step: React.FC<{
+  step: LiFiStepExtended;
+  fromToken?: TokenAmount;
+  toToken?: TokenAmount;
+  toAddress?: string;
+}> = ({ step, fromToken, toToken, toAddress }) => {
+  const { t } = useTranslation();
+  const { getChainById } = useAvailableChains();
+  const { subvariant } = useWidgetConfig();
+
+  const stepHasError = step.execution?.process.some(
+    (process) => process.status === 'FAILED',
+  );
+
+  const getCardTitle = () => {
+    switch (step.type) {
+      case 'lifi':
+        const hasCrossStep = step.includedSteps.some(
+          (step) => step.type === 'cross',
+        );
+        const hasSwapStep = step.includedSteps.some(
+          (step) => step.type === 'swap',
+        );
+        if (hasCrossStep && hasSwapStep) {
+          return subvariant === 'nft'
+            ? t('main.stepBridgeAndBuy')
+            : t('main.stepSwapAndBridge');
+        }
+        if (hasCrossStep) {
+          return subvariant === 'nft'
+            ? t('main.stepBridgeAndBuy')
+            : t('main.stepBridge');
+        }
+        return subvariant === 'nft'
+          ? t('main.stepSwapAndBuy')
+          : t('main.stepSwap');
+      default:
+        return subvariant === 'nft'
+          ? t('main.stepSwapAndBuy')
+          : t('main.stepSwap');
+    }
+  };
+
+  const formattedToAddress = shortenAddress(toAddress);
+  const toAddressLink = toAddress
+    ? `${getChainById(step.action.toChainId)?.metamask
+        .blockExplorerUrls[0]}address/${toAddress}`
+    : undefined;
+
+  return (
+    <Card variant={stepHasError ? 'error' : 'default'}>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        <CardTitle flex={1}>{getCardTitle()}</CardTitle>
+        <CardTitle sx={{ fontWeight: 500 }}>
+          <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} />
+        ))}
+        <GasStepProcess step={step} />
+        {formattedToAddress && toAddressLink ? (
+          <DestinationWalletAddress
+            step={step}
+            toAddress={formattedToAddress}
+            toAddressLink={toAddressLink}
+          />
+        ) : null}
+        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
+      </Box>
+    </Card>
+  );
+};

package/components/Step/StepList.tsx

@@ -0,0 +1,45 @@
+import type { RouteExtended, TokenAmount } from '@lifi/sdk';
+import { Fragment } from 'react';
+import { StepDivider } from '../../components/StepDivider';
+import type { WidgetSubvariant } from '../../types';
+import { Step } from './Step';
+
+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;
+    const toToken: TokenAmount | undefined =
+      index === lastIndex
+        ? {
+            ...(step.execution?.toToken ?? step.action?.toToken),
+            amount: step.execution?.toAmount
+              ? BigInt(step.execution.toAmount)
+              : subvariant === 'nft'
+                ? BigInt(route.toAmount)
+                : BigInt(step.estimate.toAmount),
+          }
+        : undefined;
+    const toAddress =
+      index === lastIndex && route.fromAddress !== route.toAddress
+        ? route.toAddress
+        : undefined;
+    return (
+      <Fragment key={step.id}>
+        <Step
+          step={step}
+          fromToken={fromToken}
+          toToken={toToken}
+          toAddress={toAddress}
+        />
+        {steps.length > 1 && index !== steps.length - 1 ? (
+          <StepDivider />
+        ) : null}
+      </Fragment>
+    );
+  });

package/components/Step/StepProcess.style.tsx

@@ -0,0 +1,9 @@
+import type { IconButtonProps, LinkProps } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const LinkButton = styled(IconButton)<IconButtonProps & LinkProps>(
+  ({ theme }) => ({
+    padding: theme.spacing(0.5),
+  }),
+);

package/components/Step/StepProcess.tsx

@@ -0,0 +1,55 @@
+import type { LiFiStep, Process } from '@lifi/sdk';
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import { Box, Link, Typography } from '@mui/material';
+import { useProcessMessage } from '../../hooks';
+import { CircularProgress } from './CircularProgress';
+import { LinkButton } from './StepProcess.style';
+
+export const StepProcess: React.FC<{
+  step: LiFiStep;
+  process: Process;
+}> = ({ step, process }) => {
+  const { title, message } = useProcessMessage(step, process);
+  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.txLink ? (
+          <LinkButton
+            size="small"
+            edge="end"
+            LinkComponent={Link}
+            href={process.txLink}
+            target="_blank"
+            rel="nofollow noreferrer"
+          >
+            <LinkRoundedIcon />
+          </LinkButton>
+        ) : null}
+      </Box>
+      {message ? (
+        <Typography
+          ml={6}
+          fontSize={14}
+          fontWeight={500}
+          color="text.secondary"
+        >
+          {message}
+        </Typography>
+      ) : null}
+    </Box>
+  );
+};

package/components/Step/StepTimer.tsx

@@ -0,0 +1,80 @@
+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/components/Step/index.ts

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './StepList';

package/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',
+}));