@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -0,0 +1,135 @@
+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 {
+  SkeletonAmountContainer,
+  SkeletonCard,
+  SkeletonCardRow,
+  SkeletonHeaderAppBar,
+  SkeletonHeaderContainer,
+  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 sx={{ display: 'flex', flexDirection: 'column' }}>
+          <SkeletonHeaderContainer>
+            {!hiddenUI.includes('walletMenu') ? (
+              <SkeletonHeaderAppBar>
+                <SkeletonWalletMenuButton />
+              </SkeletonHeaderAppBar>
+            ) : null}
+            <SkeletonHeaderAppBar
+              sx={{ justifyContent: 'space-between', height: 40 }}
+            >
+              <Skeleton width={126} height={34} variant="text" />
+              <SkeletonIcon />
+            </SkeletonHeaderAppBar>
+          </SkeletonHeaderContainer>
+
+          <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>
+          </FlexContainer>
+          {!hiddenUI.includes('poweredBy') ? (
+            <SkeletonPoweredByContainer>
+              <Skeleton width={96} height={18} variant="text" />
+            </SkeletonPoweredByContainer>
+          ) : null}
+        </RelativeContainer>
+      </AppExpandedContainer>
+    </ThemeProvider>
+  )
+}

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

@@ -0,0 +1,86 @@
+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/src/components/Step/CircularProgress.tsx

@@ -0,0 +1,58 @@
+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/src/components/Step/DestinationWalletAddress.tsx

@@ -0,0 +1,53 @@
+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/src/components/Step/Step.tsx

@@ -0,0 +1,110 @@
+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/src/components/Step/StepList.tsx

@@ -0,0 +1,54 @@
+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/src/components/Step/StepProcess.tsx

@@ -0,0 +1,67 @@
+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/src/components/Step/StepTimer.tsx

@@ -0,0 +1,123 @@
+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>
+  )
+}