@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.21

package/components/Step/CircularProgress.style.tsx

@@ -0,0 +1,81 @@
+import type { Status, Substatus } from '@lifi/sdk';
+import type { Theme } from '@mui/material';
+import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
+import { circularProgressClasses } from '@mui/material/CircularProgress';
+import { alpha, keyframes, styled } from '@mui/material/styles';
+
+const getStatusColor = (
+  theme: Theme,
+  status: Status,
+  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: Status; 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

@@ -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={40} />
+      ) : null}
+      {process.status === 'ACTION_REQUIRED' ? (
+        <InfoRoundedIcon
+          color="info"
+          sx={{
+            position: 'absolute',
+            fontSize: '1.5rem',
+          }}
+        />
+      ) : null}
+      {process.status === 'DONE' &&
+      (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (
+        <WarningRoundedIcon
+          sx={(theme) => ({
+            position: 'absolute',
+            fontSize: '1.5rem',
+            color: darken(theme.palette.warning.main, 0.32),
+          })}
+        />
+      ) : process.status === 'DONE' ? (
+        <DoneIcon
+          color="success"
+          sx={{
+            position: 'absolute',
+            fontSize: '1.5rem',
+          }}
+        />
+      ) : null}
+      {process.status === 'FAILED' ? (
+        <ErrorRoundedIcon
+          color="error"
+          sx={{
+            position: 'absolute',
+            fontSize: '1.5rem',
+          }}
+        />
+      ) : null}
+    </CircularIcon>
+  );
+}

package/components/Step/DestinationWalletAddress.tsx

@@ -0,0 +1,54 @@
+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: '1.25rem',
+            }}
+          />
+        </CircularIcon>
+        <Typography mx={2} flex={1} fontSize={14} fontWeight={400}>
+          {isDone
+            ? t('main.sentToAddress', {
+                address: toAddress,
+              })
+            : t('main.sendToAddress', {
+                address: toAddress,
+              })}
+        </Typography>
+        <LinkButton
+          size="medium"
+          LinkComponent={Link}
+          href={toAddressLink}
+          target="_blank"
+          rel="nofollow noreferrer"
+        >
+          <LinkRoundedIcon />
+        </LinkButton>
+      </Box>
+    </Box>
+  );
+};

package/components/Step/Step.tsx

@@ -0,0 +1,95 @@
+/* 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 { 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} />
+        ))}
+        {formattedToAddress && toAddressLink ? (
+          <DestinationWalletAddress
+            step={step}
+            toAddress={formattedToAddress}
+            toAddressLink={toAddressLink}
+          />
+        ) : null}
+        {toToken ? <Token token={toToken} px={2} py={1} /> : null}
+      </Box>
+    </Card>
+  );
+};

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,54 @@
+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="medium"
+            LinkComponent={Link}
+            href={process.txLink}
+            target="_blank"
+            rel="nofollow noreferrer"
+          >
+            <LinkRoundedIcon />
+          </LinkButton>
+        ) : null}
+      </Box>
+      {message ? (
+        <Typography
+          ml={7}
+          fontSize={14}
+          fontWeight={500}
+          color="text.secondary"
+        >
+          {message}
+        </Typography>
+      ) : null}
+    </Box>
+  );
+};

package/components/Step/StepTimer.tsx

@@ -0,0 +1,75 @@
+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, i18n } = 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 new Intl.NumberFormat(i18n.language, {
+      style: 'unit',
+      unit: 'minute',
+      unitDisplay: 'narrow',
+    }).format(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')
+    : `${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,86 @@
+import {
+  Avatar,
+  Box,
+  StepConnector as MuiStepConnector,
+  StepLabel as MuiStepLabel,
+  Typography,
+} from '@mui/material';
+import { stepConnectorClasses } from '@mui/material/StepConnector';
+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(2.375),
+  [`.${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,
+  alignItems: 'flex-start',
+  [`.${stepLabelClasses.iconContainer}`]: {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(3),
+  },
+  [`.${stepLabelClasses.labelContainer}`]: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`&.${stepLabelClasses.disabled}`]: {
+    cursor: 'inherit',
+  },
+}));
+
+export const StepLabelTypography = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.325,
+  color: theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0),
+}));
+
+export const StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !['last'].includes(prop as string),
+})<{ last: boolean }>(({ theme, last }) => ({
+  borderLeft: last
+    ? 'none'
+    : `2px solid ${
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[800]
+      }`,
+  margin: theme.spacing(0, 0, 0, 2.375),
+  paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),
+}));
+
+export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
+}));