@lifi/widget 3.0.0-alpha.33 → 3.0.0-alpha.35

package/components/SelectTokenButton/SelectTokenButton.tsx

@@ -11,9 +11,12 @@ import { useFieldValues } from '../../stores/form/useFieldValues.js';
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
 import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { Card } from '../Card/Card.js';
 import { CardTitle } from '../Card/CardTitle.js';
-import { SelectTokenCardHeader } from './SelectTokenButton.style.js';
+import {
+  CardContent,
+  SelectTokenCard,
+  SelectTokenCardHeader,
+} from './SelectTokenButton.style.js';
 
 export const SelectTokenButton: React.FC<
   FormTypeProps & {
@@ -51,44 +54,46 @@ export const SelectTokenButton: React.FC<
         ? t('main.selectToken')
         : t('main.selectChainAndToken');
   const cardTitle: string =
-    formType === 'from' && subvariant === 'nft'
+    formType === 'from' && subvariant === 'custom'
       ? t(`header.payWith`)
       : t(`main.${formType}`);
   return (
-    <Card component="button" flex={1} onClick={onClick}>
-      <CardTitle>{cardTitle}</CardTitle>
-      {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
-        <SelectTokenCardHeader
-          avatar={<AvatarBadgedSkeleton />}
-          title={<Skeleton variant="text" width={64} height={24} />}
-          subheader={<Skeleton variant="text" width={72} height={16} />}
-          compact={compact}
-        />
-      ) : (
-        <SelectTokenCardHeader
-          avatar={
-            isSelected ? (
-              <TokenAvatar token={token} chain={chain} />
-            ) : (
-              <AvatarBadgedDefault />
-            )
-          }
-          title={isSelected ? token.symbol : defaultPlaceholder}
-          titleTypographyProps={{
-            title: isSelected ? token.symbol : defaultPlaceholder,
-          }}
-          subheader={isSelected ? chain.name : null}
-          subheaderTypographyProps={
-            isSelected
-              ? {
-                  title: chain.name,
-                }
-              : undefined
-          }
-          selected={isSelected}
-          compact={compact}
-        />
-      )}
-    </Card>
+    <SelectTokenCard component="button" onClick={onClick}>
+      <CardContent formType={formType} compact={compact}>
+        <CardTitle>{cardTitle}</CardTitle>
+        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
+          <SelectTokenCardHeader
+            avatar={<AvatarBadgedSkeleton />}
+            title={<Skeleton variant="text" width={64} height={24} />}
+            subheader={<Skeleton variant="text" width={72} height={16} />}
+            compact={compact}
+          />
+        ) : (
+          <SelectTokenCardHeader
+            avatar={
+              isSelected ? (
+                <TokenAvatar token={token} chain={chain} />
+              ) : (
+                <AvatarBadgedDefault />
+              )
+            }
+            title={isSelected ? token.symbol : defaultPlaceholder}
+            titleTypographyProps={{
+              title: isSelected ? token.symbol : defaultPlaceholder,
+            }}
+            subheader={isSelected ? chain.name : null}
+            subheaderTypographyProps={
+              isSelected
+                ? {
+                    title: chain.name,
+                  }
+                : undefined
+            }
+            selected={isSelected}
+            compact={compact}
+          />
+        )}
+      </CardContent>
+    </SelectTokenCard>
   );
 };

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,5 +1,4 @@
 import { CloseRounded } from '@mui/icons-material';
-import type { BoxProps } from '@mui/material';
 import { Box, Collapse } from '@mui/material';
 import type { MouseEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,12 +19,13 @@ import {
 import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { AccountAvatar } from '../Avatar/AccountAvatar.js';
+import type { CardProps } from '../Card/Card.js';
 import { Card } from '../Card/Card.js';
 import { CardIconButton } from '../Card/CardIconButton.js';
 import { CardTitle } from '../Card/CardTitle.js';
 import { SendToWalletCardHeader } from './SendToWallet.style.js';
 
-export const SendToWalletButton: React.FC<BoxProps> = (props) => {
+export const SendToWalletButton: React.FC<CardProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { disabledUI, hiddenUI, toAddress, toAddresses } = useWidgetConfig();
@@ -86,10 +86,10 @@ export const SendToWalletButton: React.FC<BoxProps> = (props) => {
   const headerSubheader =
     isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
 
-  const isSelected = !!toAddressFieldValue && !(toAddress && disabledToAddress);
-
   const disabledForChanges = Boolean(toAddress) && disabledToAddress;
 
+  const isSelected = !!toAddressFieldValue && !disabledForChanges;
+
   const handleOnClick = () => {
     navigate(
       toAddresses?.length
@@ -114,8 +114,7 @@ export const SendToWalletButton: React.FC<BoxProps> = (props) => {
       <Card
         component="button"
         onClick={disabledForChanges ? undefined : handleOnClick}
-        width="100%"
-        {...props}
+        sx={{ width: '100%', ...props.sx }}
       >
         <CardTitle required={requiredToAddress}>
           {t('header.sendToWallet')}
@@ -126,14 +125,15 @@ export const SendToWalletButton: React.FC<BoxProps> = (props) => {
               <AccountAvatar
                 chainId={chainId}
                 account={matchingConnectedAccount}
+                toAddress={toAddress}
                 empty={!toAddressFieldValue}
               />
             }
             title={headerTitle}
             subheader={headerSubheader}
-            selected={isSelected}
+            selected={isSelected || disabledForChanges}
             action={
-              isSelected && !disabledForChanges ? (
+              isSelected ? (
                 <CardIconButton onClick={clearSelectedBookmark} size="small">
                   <CloseRounded fontSize="inherit" />
                 </CardIconButton>

package/components/Step/Step.tsx

@@ -30,27 +30,27 @@ export const Step: React.FC<{
   const getCardTitle = () => {
     switch (step.type) {
       case 'lifi':
-        const hasCrossStep = step.includedSteps.some(
+        const hasBridgeStep = step.includedSteps.some(
           (step) => step.type === 'cross',
         );
         const hasSwapStep = step.includedSteps.some(
           (step) => step.type === 'swap',
         );
-        if (hasCrossStep && hasSwapStep) {
-          return subvariant === 'nft'
+        if (hasBridgeStep && hasSwapStep) {
+          return subvariant === 'custom'
             ? t('main.stepBridgeAndBuy')
             : t('main.stepSwapAndBridge');
         }
-        if (hasCrossStep) {
-          return subvariant === 'nft'
+        if (hasBridgeStep) {
+          return subvariant === 'custom'
             ? t('main.stepBridgeAndBuy')
             : t('main.stepBridge');
         }
-        return subvariant === 'nft'
+        return subvariant === 'custom'
           ? t('main.stepSwapAndBuy')
           : t('main.stepSwap');
       default:
-        return subvariant === 'nft'
+        return subvariant === 'custom'
           ? t('main.stepSwapAndBuy')
           : t('main.stepSwap');
     }
@@ -64,7 +64,7 @@ export const Step: React.FC<{
     : undefined;
 
   return (
-    <Card variant={stepHasError ? 'error' : 'default'}>
+    <Card type={stepHasError ? 'error' : 'default'}>
       <Box
         sx={{
           display: 'flex',

package/components/Step/StepList.tsx

@@ -20,7 +20,7 @@ export const getStepList = (
             ...(step.execution?.toToken ?? step.action?.toToken),
             amount: step.execution?.toAmount
               ? BigInt(step.execution.toAmount)
-              : subvariant === 'nft'
+              : subvariant === 'custom'
                 ? BigInt(route.toAmount)
                 : BigInt(step.estimate.toAmount),
           }

package/components/StepActions/StepActions.tsx

@@ -16,7 +16,6 @@ import { formatUnits } from 'viem';
 import { useAvailableChains } from '../../hooks/useAvailableChains.js';
 import { LiFiToolLogo } from '../../icons/lifi.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import type { WidgetSubvariant } from '../../types/widget.js';
 import { formatTokenAmount } from '../../utils/format.js';
 import { CardIconButton } from '../Card/CardIconButton.js';
 import { SmallAvatar } from '../SmallAvatar.js';
@@ -29,7 +28,11 @@ import {
 } from './StepActions.style.js';
 import { StepFeeBreakdown } from './StepFeeBreakdown.js';
 import { StepFees } from './StepFees.js';
-import type { StepActionsProps, StepDetailsLabelProps } from './types.js';
+import type {
+  IncludedStepsProps,
+  StepActionsProps,
+  StepDetailsLabelProps,
+} from './types.js';
 
 export const StepActions: React.FC<StepActionsProps> = ({
   step,
@@ -37,7 +40,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
   ...other
 }) => {
   const { t } = useTranslation();
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, subvariantOptions } = useWidgetConfig();
   const [cardExpanded, setCardExpanded] = useState(false);
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -47,7 +50,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
 
   // FIXME: step transaction request overrides step tool details, but not included step tool details
   const toolDetails =
-    subvariant === 'nft'
+    subvariant === 'custom'
       ? step.includedSteps.find(
           (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom',
         )?.toolDetails || step.toolDetails
@@ -70,7 +73,7 @@ export const StepActions: React.FC<StepActionsProps> = ({
           </StepAvatar>
         </Badge>
         <Box flex={1}>
-          <Typography fontSize={18} fontWeight="500" lineHeight={1.3334} ml={2}>
+          <Typography fontSize={18} fontWeight={600} lineHeight={1.3334} ml={2}>
             {t(`main.stepDetails`, {
               tool: toolDetails.name,
             })}
@@ -92,20 +95,29 @@ export const StepActions: React.FC<StepActionsProps> = ({
       </Box>
       {dense ? (
         <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-          <IncludedSteps step={step} subvariant={subvariant} />
+          <IncludedSteps
+            step={step}
+            subvariant={subvariant}
+            subvariantOptions={subvariantOptions}
+          />
           <StepFeeBreakdown step={step} />
         </Collapse>
       ) : (
-        <IncludedSteps step={step} subvariant={subvariant} />
+        <IncludedSteps
+          step={step}
+          subvariant={subvariant}
+          subvariantOptions={subvariantOptions}
+        />
       )}
     </Box>
   );
 };
 
-export const IncludedSteps: React.FC<{
-  step: LiFiStep;
-  subvariant?: WidgetSubvariant;
-}> = ({ step, subvariant }) => {
+export const IncludedSteps: React.FC<IncludedStepsProps> = ({
+  step,
+  subvariant,
+  subvariantOptions,
+}) => {
   // eslint-disable-next-line react/no-unstable-nested-components
   const StepIconComponent = ({ icon }: StepIconProps) => {
     const tool = step.includedSteps?.[Number(icon) - 1];
@@ -129,10 +141,14 @@ export const IncludedSteps: React.FC<{
         {step.includedSteps.map((step, i, includedSteps) => (
           <MuiStep key={step.id} expanded>
             <StepLabel StepIconComponent={StepIconComponent}>
-              {step.type === 'custom' && subvariant === 'nft' ? (
-                <CustomStepDetailsLabel step={step} subvariant={subvariant} />
+              {step.type === 'custom' && subvariant === 'custom' ? (
+                <CustomStepDetailsLabel
+                  step={step}
+                  subvariant={subvariant}
+                  subvariantOptions={subvariantOptions}
+                />
               ) : step.type === 'cross' ? (
-                <CrossStepDetailsLabel step={step} />
+                <BridgeStepDetailsLabel step={step} />
               ) : step.type === 'protocol' ? (
                 <ProtocolStepDetailsLabel step={step} />
               ) : (
@@ -140,7 +156,7 @@ export const IncludedSteps: React.FC<{
               )}
             </StepLabel>
             <StepContent last={i === includedSteps.length - 1}>
-              <StepDetailsContent step={step} subvariant={subvariant} />
+              <StepDetailsContent step={step} />
             </StepContent>
           </MuiStep>
         ))}
@@ -151,8 +167,7 @@ export const IncludedSteps: React.FC<{
 
 export const StepDetailsContent: React.FC<{
   step: StepExtended;
-  subvariant?: WidgetSubvariant;
-}> = ({ step, subvariant }) => {
+}> = ({ step }) => {
   const { t } = useTranslation();
 
   const sameTokenProtocolStep =
@@ -228,6 +243,7 @@ export const StepDetailsContent: React.FC<{
 export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
   step,
   subvariant,
+  subvariantOptions,
 }) => {
   const { t } = useTranslation();
 
@@ -237,30 +253,33 @@ export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
 
   // FIXME: step transaction request overrides step tool details, but not included step tool details
   const toolDetails =
-    subvariant === 'nft' &&
+    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.${subvariant}StepDetails`, {
+      {t(`main.${stepDetailsKey}StepDetails`, {
         tool: toolDetails.name,
       })}
     </StepLabelTypography>
   );
 };
 
-export const CrossStepDetailsLabel: React.FC<
+export const BridgeStepDetailsLabel: React.FC<
   Omit<StepDetailsLabelProps, 'variant'>
 > = ({ step }) => {
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   return (
     <StepLabelTypography>
-      {t('main.crossStepDetails', {
+      {t('main.bridgeStepDetails', {
         from: getChainById(step.action.fromChainId)?.name,
         to: getChainById(step.action.toChainId)?.name,
         tool: step.toolDetails.name,

package/components/StepActions/types.ts

@@ -1,6 +1,9 @@
 import type { LiFiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
-import type { WidgetSubvariant } from '../../types/widget.js';
+import type {
+  SubvariantOptions,
+  WidgetSubvariant,
+} from '../../types/widget.js';
 
 export interface StepActionsProps extends BoxProps {
   step: LiFiStep;
@@ -9,5 +12,12 @@ export interface StepActionsProps extends BoxProps {
 
 export interface StepDetailsLabelProps {
   step: Step;
-  subvariant?: Extract<WidgetSubvariant, 'nft'>;
+  subvariant?: Extract<WidgetSubvariant, 'custom'>;
+  subvariantOptions?: SubvariantOptions;
+}
+
+export interface IncludedStepsProps {
+  step: LiFiStep;
+  subvariant?: WidgetSubvariant;
+  subvariantOptions?: SubvariantOptions;
 }

package/components/TokenList/TokenList.style.tsx

@@ -19,7 +19,7 @@ export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
     color: 'inherit',
     backgroundColor: 'unset',
     minWidth: 'unset',
-    borderRadius: '50%',
+    borderRadius: theme.shape.borderRadiusTertiary,
     '&:hover': {
       backgroundColor: getContrastAlphaColor(theme, 0.04),
     },

package/components/TokenList/TokenList.tsx

@@ -13,6 +13,7 @@ import { TokenNotFound } from './TokenNotFound.js';
 import { VirtualizedTokenList } from './VirtualizedTokenList.js';
 import type { TokenListProps } from './types.js';
 import { useTokenSelect } from './useTokenSelect.js';
+import { filteredTokensComparator } from './utils.js';
 
 export const TokenList: FC<TokenListProps> = ({
   formType,
@@ -45,12 +46,14 @@ export const TokenList: FC<TokenListProps> = ({
   const searchFilter = normalizedSearchFilter?.toUpperCase() ?? '';
 
   filteredTokens = tokenSearchFilter
-    ? filteredTokens.filter(
-        (token) =>
-          token.name?.toUpperCase().includes(searchFilter) ||
-          token.symbol.toUpperCase().includes(searchFilter) ||
-          token.address.toUpperCase().includes(searchFilter),
-      )
+    ? filteredTokens
+        .filter(
+          (token) =>
+            token.name?.toUpperCase().includes(searchFilter) ||
+            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.address.toUpperCase().includes(searchFilter),
+        )
+        .sort(filteredTokensComparator(searchFilter))
     : filteredTokens;
 
   const tokenSearchEnabled =

package/components/TokenList/VirtualizedTokenList.tsx

@@ -81,36 +81,42 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
         const previousToken: TokenAmount | undefined = tokens[item.index - 1];
 
         const isFirstFeaturedToken = currentToken.featured && item.index === 0;
+
         const isTransitionFromFeaturedTokens =
           previousToken?.featured && !currentToken.featured;
+
         const isTransitionFromMyTokens =
           previousToken?.amount && !currentToken.amount;
+
         const isTransitionToMyTokens =
           isTransitionFromFeaturedTokens && currentToken.amount;
+
         const isTransitionToPopularTokens =
           (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
           currentToken.popular;
+
         const shouldShowAllTokensCategory =
-          (isTransitionFromMyTokens ||
-            isTransitionFromFeaturedTokens ||
-            (previousToken?.popular && !currentToken.popular)) &&
-          showCategories;
-
-        const startAdornmentLabel = (() => {
-          if (isFirstFeaturedToken) {
-            return t('main.featuredTokens');
-          }
-          if (isTransitionToMyTokens) {
-            return t('main.myTokens');
-          }
-          if (isTransitionToPopularTokens) {
-            return t('main.popularTokens');
-          }
-          if (shouldShowAllTokensCategory) {
-            return t('main.allTokens');
-          }
-          return null;
-        })();
+          isTransitionFromMyTokens ||
+          isTransitionFromFeaturedTokens ||
+          (previousToken?.popular && !currentToken.popular);
+
+        const startAdornmentLabel = showCategories
+          ? (() => {
+              if (isFirstFeaturedToken) {
+                return t('main.featuredTokens');
+              }
+              if (isTransitionToMyTokens) {
+                return t('main.myTokens');
+              }
+              if (isTransitionToPopularTokens) {
+                return t('main.popularTokens');
+              }
+              if (shouldShowAllTokensCategory) {
+                return t('main.allTokens');
+              }
+              return null;
+            })()
+          : null;
 
         return (
           <TokenListItem

package/components/TokenList/useTokenSelect.ts

@@ -33,7 +33,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       if (
         selectedOppositeToken === tokenAddress &&
         selectedOppositeChainId === selectedChainId &&
-        subvariant !== 'nft'
+        subvariant !== 'custom'
       ) {
         setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
           isDirty: true,

package/components/TokenList/utils.ts

@@ -0,0 +1,42 @@
+import type { TokenAmount } from '../../types/token.js';
+
+export const filteredTokensComparator = (searchFilter: string) => {
+  const isExactMatch = (token: TokenAmount) => {
+    return (
+      token.name?.toUpperCase() === searchFilter ||
+      token.symbol.toUpperCase() === searchFilter ||
+      token.address.toUpperCase() === searchFilter
+    );
+  };
+  return (tokenA: TokenAmount, tokenB: TokenAmount) => {
+    const isExactMatchA = isExactMatch(tokenA);
+    const isExactMatchB = isExactMatch(tokenB);
+
+    // Exact match with logo
+    if (isExactMatchB && tokenB.logoURI) {
+      return 1;
+    }
+    if (isExactMatchA && tokenA.logoURI) {
+      return -1;
+    }
+
+    // Any token with a logo (exact match or not)
+    if (tokenB.logoURI && !tokenA.logoURI) {
+      return 1;
+    }
+    if (tokenA.logoURI && !tokenB.logoURI) {
+      return -1;
+    }
+
+    // Exact match without logo
+    if (isExactMatchB && !tokenB.logoURI) {
+      return 1;
+    }
+    if (isExactMatchA && !tokenA.logoURI) {
+      return -1;
+    }
+
+    // All other tokens are considered equal in sorting priority
+    return 0;
+  };
+};

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.33';
+export const version = '3.0.0-alpha.35';

package/hooks/useProcessMessage.ts

@@ -11,24 +11,38 @@ import { LiFiErrorCode } from '@lifi/sdk';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import type { WidgetSubvariant } from '../types/widget.js';
+import type { SubvariantOptions, WidgetSubvariant } from '../types/widget.js';
 import { formatTokenAmount } from '../utils/format.js';
 import { useAvailableChains } from './useAvailableChains.js';
 
 export const useProcessMessage = (step?: LiFiStep, process?: Process) => {
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, subvariantOptions } = useWidgetConfig();
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
   if (!step || !process) {
     return {};
   }
-  return getProcessMessage(t, getChainById, step, process, subvariant);
+  return getProcessMessage(
+    t,
+    getChainById,
+    step,
+    process,
+    subvariant,
+    subvariantOptions,
+  );
 };
 
 const processStatusMessages: Record<
   ProcessType,
   Partial<
-    Record<Status, (t: TFunction, subvariant?: WidgetSubvariant) => string>
+    Record<
+      Status,
+      (
+        t: TFunction,
+        subvariant?: WidgetSubvariant,
+        subvariantOptions?: SubvariantOptions,
+      ) => string
+    >
   >
 > = {
   TOKEN_ALLOWANCE: {
@@ -45,22 +59,26 @@ const processStatusMessages: Record<
     STARTED: (t) => t(`main.process.swap.started`),
     ACTION_REQUIRED: (t) => t(`main.process.swap.actionRequired`),
     PENDING: (t) => t(`main.process.swap.pending`),
-    DONE: (t, subvariant) =>
-      subvariant === 'nft'
-        ? t(`main.process.nft.done`)
+    DONE: (t, subvariant, subvariantOptions) =>
+      subvariant === 'custom'
+        ? subvariantOptions?.custom
+          ? t(`main.process.${subvariantOptions?.custom}.done`)
+          : t(`main.process.checkout.done`)
         : t(`main.process.swap.done`),
   },
   CROSS_CHAIN: {
-    STARTED: (t) => t(`main.process.crossChain.started`),
-    ACTION_REQUIRED: (t) => t(`main.process.crossChain.actionRequired`),
-    PENDING: (t) => t(`main.process.crossChain.pending`),
-    DONE: (t) => t(`main.process.crossChain.done`),
+    STARTED: (t) => t(`main.process.bridge.started`),
+    ACTION_REQUIRED: (t) => t(`main.process.bridge.actionRequired`),
+    PENDING: (t) => t(`main.process.bridge.pending`),
+    DONE: (t) => t(`main.process.bridge.done`),
   },
   RECEIVING_CHAIN: {
     PENDING: (t) => t(`main.process.receivingChain.pending`),
-    DONE: (t, subvariant) =>
-      subvariant === 'nft'
-        ? t(`main.process.nft.done`)
+    DONE: (t, subvariant, subvariantOptions) =>
+      subvariant === 'custom'
+        ? subvariantOptions?.custom
+          ? t(`main.process.${subvariantOptions?.custom}.done`)
+          : t(`main.process.checkout.done`)
         : t(`main.process.receivingChain.done`),
   },
   TRANSACTION: {},
@@ -102,6 +120,7 @@ export function getProcessMessage(
   step: LiFiStep,
   process: Process,
   subvariant?: WidgetSubvariant,
+  subvariantOptions?: SubvariantOptions,
 ): {
   title?: string;
   message?: string;
@@ -197,6 +216,10 @@ export function getProcessMessage(
     processSubstatusMessages[process.status as StatusMessage]?.[
       process.substatus!
     ]?.(t) ??
-    processStatusMessages[process.type]?.[process.status]?.(t, subvariant);
+    processStatusMessages[process.type]?.[process.status]?.(
+      t,
+      subvariant,
+      subvariantOptions,
+    );
   return { title };
 }