@openocean.finance/widget 1.0.0

package/src/components/SettingsListItemButton.tsx

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

package/src/components/Skeleton/WidgetSkeleton.style.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Card as MuiCard, styled } from '@mui/material'
+import { InputCard } from '../../components/Card/InputCard.js'
+
+export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  color: theme.palette?.text.primary,
+  paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
+}))
+
+export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(1, 0, 1, 1.5),
+  gap: theme.spacing(1),
+}))
+
+export const SkeletonCardRow = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(2),
+  alignItems: 'center',
+  marginTop: theme.spacing(1.5),
+}))
+
+export const SkeletonAmountContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  height: 40,
+  overflowY: 'hidden',
+})
+
+export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
+  padding: theme.spacing(1.5, 2, 2),
+}))
+
+export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
+  padding: theme.spacing(1.5, 2, 2),
+}))
+
+export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(1.5),
+  alignItems: 'center',
+}))
+
+export const SkeletonReviewButton = styled(Button)({
+  height: 48,
+  pointerEvents: 'none',
+})
+export const SkeletonSendToWalletButton = styled(Button)({
+  height: 48,
+  minWidth: 48,
+  width: 48,
+  pointerEvents: 'none',
+})
+
+export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexGrow: 1,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  paddingBottom: theme.spacing(2),
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+}))
+
+export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.palette.background.default,
+    backdropFilter: 'blur(12px)',
+    position: 'relative',
+    top: 0,
+    zIndex: 1200,
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1.5, 3, 1.5, 3),
+    overflow: 'auto',
+  }
+})

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,65 @@
+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
+      sx={{
+        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
+          sx={{
+            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,124 @@
+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 { 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 { StepTimer } from '../Timer/StepTimer.js'
+import { DestinationWalletAddress } from './DestinationWalletAddress.js'
+import { StepProcess } from './StepProcess.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 = () => {
+    const hasBridgeStep = step.includedSteps.some(
+      (step) => step.type === 'cross'
+    )
+    const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap')
+    const hasCustomStep = step.includedSteps.some(
+      (step) => step.type === 'custom'
+    )
+
+    const isCustomVariant = hasCustomStep && subvariant === 'custom'
+
+    switch (step.type) {
+      case 'lifi': {
+        if (hasBridgeStep && hasSwapStep) {
+          return isCustomVariant
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepBridgeAndDeposit')
+              : t('main.stepBridgeAndBuy')
+            : t('main.stepSwapAndBridge')
+        }
+        if (hasBridgeStep) {
+          return isCustomVariant
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepBridgeAndDeposit')
+              : t('main.stepBridgeAndBuy')
+            : t('main.stepBridge')
+        }
+        if (hasSwapStep) {
+          return isCustomVariant
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepSwapAndDeposit')
+              : t('main.stepSwapAndBuy')
+            : t('main.stepSwap')
+        }
+        return isCustomVariant
+          ? subvariantOptions?.custom === 'deposit'
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
+          : t('main.stepSwap')
+      }
+      default:
+        return isCustomVariant
+          ? subvariantOptions?.custom === 'deposit'
+            ? t('main.stepDeposit')
+            : t('main.stepBuy')
+          : 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
+        sx={{
+          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,77 @@
+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
+      sx={{
+        px: 2,
+        py: 1,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <CircularProgress process={process} />
+        <Typography
+          sx={{
+            marginLeft: 2,
+            marginRight: 0.5,
+            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: step.action.fromChainId,
+                  })
+                : getTransactionLink({
+                    txLink: process.txLink!,
+                    chain: step.action.fromChainId,
+                  })
+            }
+            target="_blank"
+            rel="nofollow noreferrer"
+          >
+            <OpenInNewRounded fontSize="inherit" />
+          </CardIconButton>
+        ) : null}
+      </Box>
+      {message ? (
+        <Typography
+          sx={{
+            ml: 7,
+            fontSize: 14,
+            fontWeight: 500,
+            color: 'text.secondary',
+          }}
+        >
+          {message}
+        </Typography>
+      ) : null}
+    </Box>
+  )
+}