@lifi/widget 4.0.0-beta.1 → 4.0.0-beta.10

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -1,63 +1,60 @@
 import Wallet from '@mui/icons-material/Wallet'
-import { Button, Tooltip } from '@mui/material'
+import Button from '@mui/material/Button'
+import Collapse from '@mui/material/Collapse'
+import Tooltip from '@mui/material/Tooltip'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import {
-  sendToWalletStore,
-  useSendToWalletStore,
-} from '../../stores/settings/useSendToWalletStore.js'
-import { WidgetEvent } from '../../types/events.js'
 import { DisabledUI, HiddenUI } from '../../types/widget.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
-export const SendToWalletExpandButton: React.FC = () => {
+export const SendToWalletExpandButton = (): JSX.Element => {
   const { t } = useTranslation()
-  const { disabledUI, hiddenUI } = useWidgetConfig()
-  const { setFieldValue } = useFieldActions()
-  const { setSelectedBookmark } = useBookmarkActions()
-  const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore(
-    (state) => state
-  )
-  const [toAddressFieldValue] = useFieldValues('toAddress')
+  const navigate = useNavigate()
+  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress)
+  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress)
   const { requiredToAddress } = useToAddressRequirements()
+  const [toAddressValue] = useFieldValues('toAddress')
 
-  if (requiredToAddress || hiddenUI?.includes(HiddenUI.ToAddress)) {
-    return null
-  }
-
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setFieldValue('toAddress', '', { isTouched: true })
-      setSelectedBookmark()
-    }
-    setSendToWallet(!showSendToWallet)
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      sendToWalletStore.getState().showSendToWallet
-    )
-  }
+  const visible =
+    !hiddenToAddress &&
+    !disabledToAddress &&
+    !toAddressValue &&
+    !requiredToAddress
 
-  const buttonVariant =
-    showSendToWallet || Boolean(toAddressFieldValue) ? 'contained' : 'text'
+  const handleClick = () =>
+    navigate({
+      to: toAddresses?.length
+        ? navigationRoutes.configuredWallets
+        : navigationRoutes.sendToWallet,
+    })
 
   return (
-    <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
-      <Button
-        variant={buttonVariant}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          width: 48,
-          height: 48,
-        }}
-      >
-        <Wallet />
-      </Button>
-    </Tooltip>
+    <Collapse
+      orientation="horizontal"
+      in={visible}
+      timeout={225}
+      mountOnEnter
+      unmountOnExit
+    >
+      <Tooltip title={t('main.sendToWallet')} placement="bottom-end">
+        <Button
+          variant="text"
+          onClick={handleClick}
+          sx={{
+            ml: 1.5,
+            minWidth: 48,
+            width: 48,
+            height: 48,
+          }}
+        >
+          <Wallet />
+        </Button>
+      </Tooltip>
+    </Collapse>
   )
 }

package/src/components/SettingsListItemButton.tsx

@@ -1,8 +1,9 @@
 import { styled } from '@mui/material'
+import type React from 'react'
 import { ListItemButton as ListItemButtonBase } from './ListItemButton.js'
 
-export const SettingsListItemButton = styled(ListItemButtonBase)(
-  ({ theme }) => ({
-    paddingRight: theme.spacing(1),
-  })
-)
+export const SettingsListItemButton: React.FC<
+  React.ComponentProps<typeof ListItemButtonBase>
+> = styled(ListItemButtonBase)(({ theme }) => ({
+  paddingRight: theme.spacing(1),
+}))

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

@@ -1,30 +1,37 @@
 import { Box, Button, Card as MuiCard, styled } from '@mui/material'
+import type React from 'react'
 import { InputCard } from '../../components/Card/InputCard.js'
 
-export const SkeletonHeaderAppBar = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  color: theme.vars?.palette?.text.primary,
-  paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
-}))
+export const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    color: theme.vars?.palette?.text.primary,
+    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),
+  }))
 
-export const SkeletonWalletMenuButtonContainer = styled(Box)(({ theme }) => ({
+export const SkeletonWalletMenuButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = 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 SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    marginTop: theme.spacing(1.5),
+  }))
 
-export const SkeletonAmountContainer = styled(Box)({
+export const SkeletonAmountContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -32,32 +39,43 @@ export const SkeletonAmountContainer = styled(Box)({
   overflowY: 'hidden',
 })
 
-export const SkeletonCard = styled(MuiCard)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 2),
-}))
+export const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =
+  styled(MuiCard)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 2),
+  }))
 
-export const SkeletonInputCard = styled(InputCard)(({ theme }) => ({
+export const SkeletonInputCard: React.FC<
+  React.ComponentProps<typeof InputCard>
+> = styled(InputCard)(({ theme }) => ({
   padding: theme.spacing(1.5, 2, 2),
 }))
 
-export const SkeletonReviewButtonContainer = styled(Box)(({ theme }) => ({
+export const SkeletonReviewButtonContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1.5),
   alignItems: 'center',
 }))
 
-export const SkeletonReviewButton = styled(Button)({
+export const SkeletonReviewButton: React.FC<
+  React.ComponentProps<typeof Button>
+> = styled(Button)({
   height: 48,
   pointerEvents: 'none',
 })
-export const SkeletonSendToWalletButton = styled(Button)({
+export const SkeletonSendToWalletButton: React.FC<
+  React.ComponentProps<typeof Button>
+> = styled(Button)({
   height: 48,
   minWidth: 48,
   width: 48,
   pointerEvents: 'none',
 })
 
-export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
+export const SkeletonPoweredByContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-end',
@@ -67,7 +85,9 @@ export const SkeletonPoweredByContainer = styled(Box)(({ theme }) => ({
   paddingRight: theme.spacing(3),
 }))
 
-export const SkeletonHeaderContainer = styled(Box)(({ theme }) => {
+export const SkeletonHeaderContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => {
   return {
     display: 'flex',
     flexDirection: 'column',

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -1,5 +1,5 @@
 import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'
-import { useMemo } from 'react'
+import { type JSX, useMemo } from 'react'
 import { createTheme } from '../../themes/createTheme.js'
 import type { WidgetConfigPartialProps } from '../../types/widget.js'
 import {
@@ -64,7 +64,9 @@ const SkeletonYouPayCard = () => (
   </SkeletonInputCard>
 )
 
-export const WidgetSkeleton = ({ config }: WidgetConfigPartialProps) => {
+export const WidgetSkeleton = ({
+  config,
+}: WidgetConfigPartialProps): JSX.Element => {
   const appearance = config?.appearance
   const hiddenUI = config?.hiddenUI || []
   const requiredUI = config?.requiredUI || []

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

@@ -7,6 +7,7 @@ import {
   CircularProgress as MuiCircularProgress,
   styled,
 } from '@mui/material'
+import type React from 'react'
 
 const getStatusColor = (
   theme: Theme,
@@ -30,7 +31,12 @@ const getStatusColor = (
   }
 }
 
-export const CircularIcon = styled(Box, {
+export const CircularIcon: React.FC<
+  React.ComponentProps<typeof Box> & {
+    status?: ExecutionActionStatus
+    substatus?: Substatus
+  }
+> = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
 })<{ status?: ExecutionActionStatus; substatus?: Substatus }>(
   ({ theme, status, substatus }) => {
@@ -80,7 +86,9 @@ const circleAnimation = keyframes`
 
 // 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)`
+export const CircularProgressPending: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)`
   color: ${({ theme }) => theme.vars.palette.primary.main};
   ${({ theme }) =>
     theme.applyStyles('dark', {

package/src/components/Step/CircularProgress.tsx

@@ -8,7 +8,7 @@ import {
   CircularProgressPending,
 } from './CircularProgress.style.js'
 
-export function CircularProgress({ action }: { action: ExecutionAction }) {
+export function CircularProgress({ action }: { action: ExecutionAction }): any {
   return (
     <CircularIcon status={action.status} substatus={action.substatus}>
       {action.status === 'STARTED' || action.status === 'PENDING' ? (

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

@@ -0,0 +1,33 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+import { AvatarMasked } from '../Avatar/Avatar.style.js'
+
+export const StepLabelTypography: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.3334,
+  color: theme.vars.palette.text.primary,
+  whiteSpace: 'nowrap',
+}))
+
+export const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =
+  styled(AvatarMasked)(({ theme }) => ({
+    color: theme.vars.palette.text.primary,
+    backgroundColor: 'transparent',
+  }))
+
+export const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  }))
+
+export const StepActionsTitle: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(() => ({
+  fontSize: 12,
+  fontWeight: 700,
+}))

package/src/components/Step/StepActions.tsx

@@ -0,0 +1,320 @@
+import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import { Box, Divider, Tooltip } from '@mui/material'
+import { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { Card } from '../Card/Card.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import type { StepDetailsLabelProps } from '../StepActions/types.js'
+import {
+  StepActionsHeader,
+  StepActionsTitle,
+  StepLabelTypography,
+} from './StepActions.style.js'
+
+export const StepActions: React.FC<{
+  route: RouteExtended
+}> = ({ route }) => {
+  const { t } = useTranslation()
+  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
+    useWidgetConfig()
+  const { isGaslessStep } = useEthereumContext()
+
+  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)
+
+  const flatSteps = route.steps.flatMap((routeStep) => {
+    let steps = routeStep.includedSteps
+    if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')
+      if (feeCollectionStep) {
+        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))
+        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount
+      }
+    }
+    const hasGaslessSupport = !!isGaslessStep?.(routeStep)
+    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))
+  })
+
+  const tooltipContent = (
+    <Card indented>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: '32px 1fr',
+          columnGap: 1.5,
+        }}
+      >
+        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+          const showDivider = i !== arr.length - 1
+          const isFeeCollection =
+            step.type === 'protocol' && step.tool === 'feeCollection'
+          const toolName =
+            isFeeCollection && feeConfig?.name
+              ? feeConfig.name
+              : step.toolDetails.name
+          const toolLogoURI =
+            isFeeCollection && feeConfig?.logoURI
+              ? feeConfig.logoURI
+              : step.toolDetails.logoURI
+
+          return (
+            <Fragment key={step.id}>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                {toolLogoURI ? (
+                  <SmallAvatar
+                    src={toolLogoURI}
+                    alt={toolName}
+                    sx={{ width: 32, height: 32 }}
+                  >
+                    {toolName?.[0]}
+                  </SmallAvatar>
+                ) : null}
+              </Box>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}
+              >
+                {step.type === 'custom' && subvariant === 'custom' ? (
+                  <CustomStepDetailsLabel
+                    step={step}
+                    subvariant={subvariant}
+                    subvariantOptions={subvariantOptions}
+                  />
+                ) : step.type === 'cross' ? (
+                  <BridgeStepDetailsLabel step={step} />
+                ) : step.type === 'protocol' ? (
+                  <ProtocolStepDetailsLabel
+                    step={step}
+                    feeConfig={feeConfig}
+                    relayerSupport={hasGaslessSupport}
+                  />
+                ) : (
+                  <SwapStepDetailsLabel step={step} />
+                )}
+                <StepDetailsContent step={step} />
+              </Box>
+              {showDivider && (
+                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>
+                  <Divider
+                    orientation="vertical"
+                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}
+                  />
+                </Box>
+              )}
+              {showDivider && <Box />}
+            </Fragment>
+          )
+        })}
+      </Box>
+    </Card>
+  )
+
+  return (
+    <StepActionsHeader>
+      <StepActionsTitle>{t('main.route')}</StepActionsTitle>
+      <Tooltip
+        title={tooltipContent}
+        placement="bottom-end"
+        arrow={false}
+        slotProps={{
+          tooltip: {
+            sx: {
+              bgcolor: 'transparent',
+              p: 0,
+              boxShadow: 'none',
+              maxWidth: 'none',
+            },
+          },
+          transition: {
+            style: { transformOrigin: 'right top' },
+          },
+        }}
+      >
+        <CardIconButton
+          size="small"
+          sx={(theme) => ({
+            borderRadius: theme.vars.shape.borderRadiusSecondary,
+          })}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {headerIncludedSteps.map((includedStep, index) => (
+              <Fragment key={index}>
+                {index > 0 ? (
+                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />
+                ) : null}
+                <SmallAvatar
+                  src={includedStep.toolDetails.logoURI}
+                  alt={includedStep.toolDetails.name}
+                  sx={{ width: 16, height: 16 }}
+                >
+                  {includedStep.toolDetails.name[0]}
+                </SmallAvatar>
+              </Fragment>
+            ))}
+          </Box>
+        </CardIconButton>
+      </Tooltip>
+    </StepActionsHeader>
+  )
+}
+
+const StepDetailsContent: React.FC<{
+  step: StepExtended
+}> = ({ step }) => {
+  const { t } = useTranslation()
+
+  const sameTokenProtocolStep =
+    step.action.fromToken.chainId === step.action.toToken.chainId &&
+    step.action.fromToken.address === step.action.toToken.address
+
+  let fromAmount: string | undefined
+  if (sameTokenProtocolStep) {
+    const estimatedFromAmount =
+      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)
+
+    fromAmount =
+      estimatedFromAmount > 0n
+        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)
+        : formatTokenAmount(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals
+          )
+  } else {
+    fromAmount = formatTokenAmount(
+      BigInt(step.estimate.fromAmount),
+      step.action.fromToken.decimals
+    )
+  }
+
+  const showToAmount =
+    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep
+
+  return (
+    <StepLabelTypography>
+      {!showToAmount ? (
+        <>
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.estimate.fromAmount),
+              step.action.fromToken.decimals
+            ),
+          })}{' '}
+          {step.action.fromToken.symbol}
+          {' - '}
+        </>
+      ) : null}
+      {t('format.tokenAmount', {
+        value: fromAmount,
+      })}{' '}
+      {step.action.fromToken.symbol}
+      {showToAmount ? (
+        <>
+          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
+          {t('format.tokenAmount', {
+            value: formatTokenAmount(
+              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
+              step.execution?.toToken?.decimals ?? step.action.toToken.decimals
+            ),
+          })}{' '}
+          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
+        </>
+      ) : (
+        ` (${t('format.currency', {
+          value: formatTokenPrice(
+            fromAmount,
+            step.action.fromToken.priceUSD,
+            step.action.fromToken.decimals
+          ),
+        })})`
+      )}
+    </StepLabelTypography>
+  )
+}
+
+const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+  step,
+  subvariant,
+  subvariantOptions,
+}) => {
+  const { t } = useTranslation()
+
+  if (!subvariant) {
+    return null
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'custom' &&
+    (step as unknown as LiFiStep).includedSteps?.length > 0
+      ? (step as unknown as LiFiStep).includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  const stepDetailsKey =
+    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'
+
+  return (
+    <StepLabelTypography>
+      {t(`main.${stepDetailsKey}StepDetails`, {
+        tool: toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const BridgeStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.bridgeStepDetails', {
+        from: getChainById(step.action.fromChainId)?.name,
+        to: getChainById(step.action.toChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const SwapStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.swapStepDetails', {
+        chain: getChainById(step.action.fromChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+const ProtocolStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step, feeConfig, relayerSupport }) => {
+  const { t } = useTranslation()
+  return (
+    <StepLabelTypography>
+      {step.toolDetails.key === 'feeCollection'
+        ? feeConfig?.name ||
+          (relayerSupport
+            ? t('main.fees.relayerService')
+            : t('main.fees.defaultIntegrator'))
+        : step.toolDetails.key === 'gasZip'
+          ? t('main.refuelStepDetails', {
+              tool: step.toolDetails.name,
+            })
+          : step.toolDetails.name}
+    </StepLabelTypography>
+  )
+}

package/src/components/Step/StepList.tsx

@@ -1,5 +1,5 @@
 import type { RouteExtended, TokenAmount } from '@lifi/sdk'
-import { Fragment } from 'react'
+import { Fragment, type JSX } from 'react'
 import { StepDivider } from '../../components/StepDivider/StepDivider.js'
 import type { WidgetSubvariant } from '../../types/widget.js'
 import { Step } from './Step.js'
@@ -7,7 +7,7 @@ import { Step } from './Step.js'
 export const getStepList = (
   route?: RouteExtended,
   subvariant?: WidgetSubvariant
-) =>
+): JSX.Element[] | undefined =>
   route?.steps.map((step, index, steps) => {
     const lastIndex = steps.length - 1
     const fromToken: TokenAmount | undefined =