@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -0,0 +1,58 @@
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Button, Tooltip } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+
+export const SendToWalletButton: React.FC = () => {
+  const { t } = useTranslation();
+  const { setValue } = useFormContext();
+  const emitter = useWidgetEvents();
+  const { disabledUI, hiddenUI } = useWidgetConfig();
+  const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+
+  const requiredToAddress = useRequiredToAddress();
+
+  if (
+    !showDestinationWallet ||
+    hiddenUI?.includes(HiddenUI.ToAddress) ||
+    requiredToAddress
+  ) {
+    return null;
+  }
+
+  const handleClick = () => {
+    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
+      setValue(FormKey.ToAddress, '', { shouldTouch: true });
+    }
+    toggleSendToWallet();
+    emitter.emit(
+      WidgetEvent.SendToWalletToggled,
+      useSendToWalletStore.getState().showSendToWallet,
+    );
+  };
+
+  return (
+    <Tooltip
+      title={t('main.sendToWallet')}
+      placement="bottom-end"
+      enterDelay={400}
+      arrow
+    >
+      <Button
+        variant={showSendToWallet ? 'contained' : 'text'}
+        onClick={handleClick}
+        sx={{
+          minWidth: 48,
+          marginLeft: 1,
+        }}
+      >
+        <WalletIcon />
+      </Button>
+    </Tooltip>
+  );
+};

package/src/components/SettingsListItemButton.tsx

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from './ListItemButton';
+
+export const SettingsListItemButton = styled(ListItemButtonBase)(
+  ({ theme }) => ({
+    paddingRight: theme.spacing(1),
+  }),
+);

package/src/components/SmallAvatar.tsx

@@ -0,0 +1,28 @@
+import { Avatar, Box, Skeleton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 16,
+  height: 16,
+  border: `2px solid ${theme.palette.background.paper}`,
+}));
+
+export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
+  border: `2px solid ${theme.palette.background.paper}`,
+  width: 16,
+  height: 16,
+}));
+
+export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  borderRadius: '50%',
+}));
+
+export const SmallAvatarSkeleton = () => {
+  return (
+    <SmallAvatarSkeletonContainer>
+      <SmallAvatarSkeletonBase variant="circular" />
+    </SmallAvatarSkeletonContainer>
+  );
+};

package/src/components/Step/CircularProgress.style.tsx

@@ -0,0 +1,82 @@
+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)
+      ? 2
+      : 0,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    width: 32,
+    height: 32,
+    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;
+  left: -2px;
+  .${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/src/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/src/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/src/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/src/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/src/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/src/components/Step/StepProcess.style.tsx

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

package/src/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/src/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}`}</>
+  );
+};