@lifi/widget 3.21.4-alpha.0 → 3.22.0

package/src/hooks/useRouteExecution.ts

@@ -4,6 +4,7 @@ import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
 import { shallow } from 'zustand/shallow'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import {
   useRouteExecutionStore,
   useRouteExecutionStoreContext,
@@ -15,6 +16,7 @@ import {
   isRouteFailed,
 } from '../stores/routes/utils.js'
 import { WidgetEvent } from '../types/events.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useWidgetEvents } from './useWidgetEvents.js'
 
 interface RouteExecutionProps {
@@ -34,6 +36,7 @@ export const useRouteExecution = ({
   const queryClient = useQueryClient()
   const { account } = useAccount()
   const resumedAfterMount = useRef(false)
+  const { keyPrefix } = useWidgetConfig()
   const emitter = useWidgetEvents()
   const routeExecutionStoreContext = useRouteExecutionStoreContext()
   const routeExecution = useRouteExecutionStore(
@@ -73,16 +76,16 @@ export const useRouteExecution = ({
     if (executionCompleted || executionFailed) {
       const invalidateKeys = [
         [
-          'token-balances',
+          getQueryKey('token-balances', keyPrefix),
           clonedUpdatedRoute.fromAddress,
           clonedUpdatedRoute.fromChainId,
         ],
         [
-          'token-balances',
+          getQueryKey('token-balances', keyPrefix),
           clonedUpdatedRoute.toAddress,
           clonedUpdatedRoute.toChainId,
         ],
-        ['transaction-history'],
+        [getQueryKey('transaction-history', keyPrefix)],
       ]
       for (const key of invalidateKeys) {
         queryClient.invalidateQueries(
@@ -121,7 +124,10 @@ export const useRouteExecution = ({
       if (!routeExecution?.route) {
         throw new Error('Execution route not found.')
       }
-      queryClient.removeQueries({ queryKey: ['routes'], exact: false })
+      queryClient.removeQueries({
+        queryKey: [getQueryKey('routes', keyPrefix)],
+        exact: false,
+      })
       return executeRoute(routeExecution.route, {
         updateRouteHook,
         acceptExchangeRateUpdateHook,

package/src/hooks/useRouteRequiredAccountConnection.ts

@@ -0,0 +1,58 @@
+import type { ExtendedChain, Route } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useMemo } from 'react'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useChain } from './useChain.js'
+
+export const useRouteRequiredAccountConnection = (
+  route?: Route,
+  chain?: ExtendedChain
+) => {
+  const { account, accounts } = useAccount({ chainType: chain?.chainType })
+  const [toAddress] = useFieldValues('toAddress')
+  const { getChainById } = useChain()
+
+  return useMemo(() => {
+    if (!route?.steps.length) {
+      return {
+        connected: account.isConnected,
+      }
+    }
+
+    const connectedChainTypes = new Map(
+      accounts
+        .filter((account) => account.isConnected && account.address)
+        .map((account) => [account.chainType, account])
+    )
+
+    if (!connectedChainTypes.size) {
+      return {
+        connected: false,
+      }
+    }
+
+    for (const step of route.steps) {
+      const chain = getChainById(step.action.fromChainId)
+      if (!chain) {
+        continue
+      }
+
+      const connectedAccount = connectedChainTypes.get(chain.chainType)
+      const isToAddressSatisfied = toAddress
+        ? connectedAccount?.address === step.action.fromAddress
+        : true
+
+      if (!connectedAccount || !isToAddressSatisfied) {
+        return {
+          connected: false,
+          missingChain: chain,
+          missingAccountAddress: !isToAddressSatisfied
+            ? step.action.fromAddress
+            : undefined,
+        }
+      }
+    }
+
+    return { connected: true }
+  }, [account.isConnected, route, accounts, getChainById, toAddress])
+}

package/src/hooks/useRoutes.ts

@@ -19,6 +19,7 @@ import { useSettings } from '../stores/settings/useSettings.js'
 import { defaultSlippage } from '../stores/settings/useSettingsStore.js'
 import { WidgetEvent } from '../types/events.js'
 import { getChainTypeFromAddress } from '../utils/chainType.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useChain } from './useChain.js'
 import { useDebouncedWatch } from './useDebouncedWatch.js'
 import { useGasRefuel } from './useGasRefuel.js'
@@ -43,6 +44,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     fee,
     feeConfig,
     useRelayerRoutes,
+    keyPrefix,
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -135,7 +137,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
 
   // Some values should be strictly typed and isEnabled ensures that
   const queryKey = [
-    'routes',
+    getQueryKey('routes', keyPrefix),
     account.address,
     fromChain?.id as number,
     fromToken?.address as string,
@@ -399,7 +401,13 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           const { fromToken, toToken } = routesResult.routes[0]
           ;[fromToken, toToken].forEach((token) => {
             queryClient.setQueriesData<Token[]>(
-              { queryKey: ['token-balances', fromAddress, token.chainId] },
+              {
+                queryKey: [
+                  getQueryKey('token-balances', keyPrefix),
+                  fromAddress,
+                  token.chainId,
+                ],
+              },
               (data) => {
                 if (data) {
                   const clonedData = [...data]
@@ -464,11 +472,9 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
 
   const setReviewableRoute = (route: Route) => {
     const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
-    queryClient.setQueryData(
-      queryDataKey,
-      { routes: [route] },
-      { updatedAt: dataUpdatedAt || Date.now() }
-    )
+    queryClient.setQueryData(queryDataKey, [route], {
+      updatedAt: dataUpdatedAt || Date.now(),
+    })
     setExecutableRoute(route)
   }
 

package/src/hooks/useTokenBalance.ts

@@ -1,21 +1,24 @@
 import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 
 const defaultRefetchInterval = 30_000
 
 export const useTokenBalance = (accountAddress?: string, token?: Token) => {
   const queryClient = useQueryClient()
+  const { keyPrefix } = useWidgetConfig()
 
   const tokenBalanceQueryKey = useMemo(
     () =>
       [
-        'token-balance',
+        getQueryKey('token-balance', keyPrefix),
         accountAddress,
         token?.chainId,
         token?.address,
       ] as const,
-    [token?.address, token?.chainId, accountAddress]
+    [token?.address, token?.chainId, accountAddress, keyPrefix]
   )
 
   const { data, isLoading, refetch } = useQuery({
@@ -45,7 +48,13 @@ export const useTokenBalance = (accountAddress?: string, token?: Token) => {
       }
 
       queryClient.setQueriesData<TokenAmount[]>(
-        { queryKey: ['token-balances', accountAddress, tokenChainId] },
+        {
+          queryKey: [
+            getQueryKey('token-balances', keyPrefix),
+            accountAddress,
+            tokenChainId,
+          ],
+        },
         (data) => {
           if (data) {
             const clonedData = [...data]

package/src/hooks/useTokenBalances.ts

@@ -2,7 +2,9 @@ import { getTokenBalances } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
 import { formatUnits } from 'viem'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { TokenAmount } from '../types/token.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useTokens } from './useTokens.js'
 
 const defaultRefetchInterval = 32_000
@@ -11,6 +13,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
   const { tokens, featuredTokens, popularTokens, chain, isLoading } =
     useTokens(selectedChainId)
   const { account } = useAccount({ chainType: chain?.chainType })
+  const { keyPrefix } = useWidgetConfig()
 
   const isBalanceLoadingEnabled =
     Boolean(account.address) &&
@@ -23,7 +26,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
     refetch,
   } = useQuery({
     queryKey: [
-      'token-balances',
+      getQueryKey('token-balances', keyPrefix),
       account.address,
       selectedChainId,
       tokens?.length,

package/src/hooks/useTokenSearch.ts

@@ -1,6 +1,8 @@
 import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { TokenAmount } from '../types/token.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export const useTokenSearch = (
   chainId?: number,
@@ -8,8 +10,9 @@ export const useTokenSearch = (
   enabled?: boolean
 ) => {
   const queryClient = useQueryClient()
+  const { keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
-    queryKey: ['token-search', chainId, tokenQuery],
+    queryKey: [getQueryKey('token-search', keyPrefix), chainId, tokenQuery],
     queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
       const token = await getToken(chainId as ChainId, tokenQuery as string, {
         signal,
@@ -17,7 +20,7 @@ export const useTokenSearch = (
 
       if (token) {
         queryClient.setQueriesData<TokensResponse>(
-          { queryKey: ['tokens'] },
+          { queryKey: [getQueryKey('tokens', keyPrefix)] },
           (data) => {
             if (
               data &&

package/src/hooks/useTokens.ts

@@ -3,12 +3,13 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { TokenAmount } from '../types/token.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useChains } from './useChains.js'
 
 export const useTokens = (selectedChainId?: number) => {
-  const { tokens: configTokens } = useWidgetConfig()
+  const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
-    queryKey: ['tokens'],
+    queryKey: [getQueryKey('tokens', keyPrefix)],
     queryFn: () =>
       getTokens({
         chainTypes: [

package/src/hooks/useTools.ts

@@ -3,12 +3,13 @@ import { useQuery } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
 import { isItemAllowed } from '../utils/item.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export const useTools = () => {
-  const { bridges, exchanges } = useWidgetConfig()
+  const { bridges, exchanges, keyPrefix } = useWidgetConfig()
   const { data } = useQuery({
     queryKey: [
-      'tools',
+      getQueryKey('tools', keyPrefix),
       bridges?.allow,
       bridges?.deny,
       exchanges?.allow,

package/src/hooks/useTransactionDetails.ts

@@ -6,18 +6,27 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount()
   const queryClient = useQueryClient()
+  const { keyPrefix } = useWidgetConfig()
+
+  const transactionHistoryQueryKey = useMemo(
+    () => getQueryKey('transaction-history', keyPrefix),
+    [keyPrefix]
+  )
 
   const { data, isLoading } = useQuery({
-    queryKey: ['transaction-history', transactionHash],
+    queryKey: [transactionHistoryQueryKey, transactionHash],
     queryFn: async ({ queryKey: [, transactionHash], signal }) => {
       if (transactionHash) {
         for (const account of accounts) {
           const cachedHistory = queryClient.getQueryData<StatusResponse[]>([
-            'transaction-history',
+            transactionHistoryQueryKey,
             account.address,
           ])
 
@@ -41,7 +50,7 @@ export const useTransactionDetails = (transactionHash?: string) => {
 
         if (fromAddress) {
           queryClient.setQueryData<StatusResponse[]>(
-            ['transaction-history', fromAddress],
+            [transactionHistoryQueryKey, fromAddress],
             (data) => {
               return [...data!, transaction!]
             }
@@ -57,7 +66,7 @@ export const useTransactionDetails = (transactionHash?: string) => {
       for (const account of accounts) {
         const transaction = queryClient
           .getQueryData<StatusResponse[]>([
-            'transaction-history',
+            transactionHistoryQueryKey,
             account.address,
           ])
           ?.find((t) => t.sending.txHash === transactionHash)

package/src/hooks/useTransactionHistory.ts

@@ -3,13 +3,19 @@ import { type ExtendedTransactionInfo, getTransactionHistory } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import type { QueryFunction } from '@tanstack/react-query'
 import { useQueries } from '@tanstack/react-query'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount()
+  const { keyPrefix } = useWidgetConfig()
 
   const { data, isLoading } = useQueries({
     queries: accounts.map((account) => ({
-      queryKey: ['transaction-history', account.address],
+      queryKey: [
+        getQueryKey('transaction-history', keyPrefix),
+        account.address,
+      ],
       queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
         if (!accountAddress) {
           return []

package/src/i18n/en.json

@@ -21,6 +21,7 @@
     "close": "Close",
     "confirm": "Confirm",
     "connectAnotherWallet": "Connect another wallet",
+    "connectChainWallet": "Connect {{chain}} wallet",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -67,7 +68,9 @@
     "gas": "Gas",
     "payWith": "Pay with",
     "receive": "Receive",
+    "received": "Received",
     "recentWallets": "Recent wallets",
+    "refunded": "Refunded",
     "selectChain": "Select chain",
     "selectWallet": "Select your wallet",
     "send": "Send",
@@ -91,7 +94,8 @@
       "emptyTokenList": "We couldn't find tokens on {{chainName}} chain or you don't have any. Please search by contract address if your token doesn't appear or choose another chain.",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
       "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination.",
-      "toAddressIsRequired": "The destination wallet address is required to proceed with the transfer."
+      "toAddressIsRequired": "The destination wallet address is required to proceed with the transfer.",
+      "missingRouteRequiredAccount": "Connect your {{chainName}} wallet to proceed. {{address}}"
     },
     "title": {
       "autoRefuel": "Get {{chainName}} gas",
@@ -102,9 +106,7 @@
   },
   "success": {
     "message": {
-      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{tokenSymbol}} token.",
-      "exchangeSuccessful": "There are now {{amount, numberExt}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain.",
-      "checkoutSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
+      "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{tokenSymbol}} token."
     },
     "title": {
       "bridgePartiallySuccessful": "Bridge partially successful",

package/src/pages/MainPage/ReviewButton.tsx

@@ -73,6 +73,7 @@ export const ReviewButton: React.FC = () => {
       text={getButtonText()}
       onClick={handleClick}
       disabled={currentRoute && requiredToAddress && !toAddress}
+      route={currentRoute}
     />
   )
 }

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -21,6 +21,7 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
       text={text}
       disabled={hasNonGasMessages}
       loading={isLoading || loading}
+      route={route}
     />
   )
 }

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -52,23 +52,15 @@ export const IconCircle = styled(Box, {
   return {
     backgroundColor: `rgba(${color} / ${alphaValue})`,
     borderRadius: '50%',
-    width: 64,
-    height: 64,
+    width: 72,
+    height: 72,
     display: 'grid',
     position: 'relative',
     placeItems: 'center',
     '& > svg': {
       color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
-      width: 32,
-      height: 32,
+      width: 36,
+      height: 36,
     },
   }
 })
-
-export const MessageSkeletonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: 64,
-  gap: theme.spacing(0.5),
-  paddingTop: theme.spacing(1),
-}))

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -2,17 +2,18 @@ import Done from '@mui/icons-material/Done'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Skeleton, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Card } from '../../components/Card/Card.js'
+import { CardTitle } from '../../components/Card/CardTitle.js'
 import { Token } from '../../components/Token/Token.js'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { getProcessMessage } from '../../hooks/useProcessMessage.js'
 import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
-import { useTokenBalance } from '../../hooks/useTokenBalance.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import {
@@ -23,24 +24,12 @@ import { getSourceTxHash } from '../../stores/routes/utils.js'
 import { hasEnumFlag } from '../../utils/enum.js'
 import { formatTokenAmount } from '../../utils/format.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { shortenAddress } from '../../utils/wallet.js'
-import {
-  CenterContainer,
-  IconCircle,
-  MessageSkeletonContainer,
-} from './StatusBottomSheet.style.js'
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
 
 interface StatusBottomSheetContentProps extends RouteExecution {
   onClose(): void
 }
 
-const MessageSkeleton = () => (
-  <MessageSkeletonContainer>
-    <Skeleton height={24} variant="text" width="92%" />
-    <Skeleton height={24} variant="text" width="56%" />
-  </MessageSkeletonContainer>
-)
-
 export const StatusBottomSheet: React.FC<RouteExecution> = ({
   status,
   route,
@@ -97,11 +86,6 @@ export const StatusBottomSheetContent: React.FC<
     ),
   }
 
-  const { token, refetch, refetchNewBalance } = useTokenBalance(
-    route.toAddress,
-    toToken
-  )
-
   const cleanFields = () => {
     setFieldValue('fromAmount', '')
     setFieldValue('toAmount', '')
@@ -160,7 +144,7 @@ export const StatusBottomSheetContent: React.FC<
 
   let title: string | undefined
   let primaryMessage: string | undefined
-  let secondaryMessage: string | undefined
+  let failedMessage: string | undefined
   let handlePrimaryButton = handleDone
   switch (status) {
     case RouteExecutionStatus.Done: {
@@ -170,14 +154,6 @@ export const StatusBottomSheetContent: React.FC<
               `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`
             )
           : t(`success.title.${transactionType}Successful`)
-      if (token) {
-        primaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       handlePrimaryButton = handleDone
       break
     }
@@ -187,14 +163,6 @@ export const StatusBottomSheetContent: React.FC<
         tool: route.steps.at(-1)?.toolDetails.name,
         tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
       })
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       handlePrimaryButton = handlePartialDone
       break
     }
@@ -204,14 +172,6 @@ export const StatusBottomSheetContent: React.FC<
         tool: route.steps.at(-1)?.toolDetails.name,
         tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
       })
-      if (token) {
-        secondaryMessage = t('success.message.exchangeSuccessful', {
-          amount: formatTokenAmount(token.amount, token.decimals),
-          tokenSymbol: token.symbol,
-          chainName: getChainById(toToken.chainId)?.name,
-          walletAddress: shortenAddress(route.toAddress),
-        })
-      }
       break
     }
     case RouteExecutionStatus.Failed: {
@@ -226,7 +186,7 @@ export const StatusBottomSheetContent: React.FC<
       }
       const processMessage = getProcessMessage(t, getChainById, step, process)
       title = processMessage.title
-      primaryMessage = processMessage.message
+      failedMessage = processMessage.message
       handlePrimaryButton = handleClose
       break
     }
@@ -234,14 +194,6 @@ export const StatusBottomSheetContent: React.FC<
       break
   }
 
-  useEffect(() => {
-    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
-    if (hasSuccessFlag) {
-      refetchNewBalance()
-      refetch()
-    }
-  }, [refetch, refetchNewBalance, status])
-
   const showContractComponent =
     subvariant === 'custom' &&
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
@@ -289,36 +241,54 @@ export const StatusBottomSheetContent: React.FC<
       </CenterContainer>
       {showContractComponent ? (
         contractCompactComponent || contractSecondaryComponent
-      ) : (
-        <CenterContainer>
-          {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-            <Token token={toToken} py={1} disableDescription />
-          ) : null}
-        </CenterContainer>
-      )}
-      {!showContractComponent ? (
-        primaryMessage ? (
-          <Typography
-            sx={{
-              py: 1,
-            }}
-          >
-            {primaryMessage}
-          </Typography>
-        ) : (
-          <MessageSkeleton />
-        )
-      ) : null}
-      {secondaryMessage ? (
+      ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (
         <Typography
           sx={{
             py: 1,
           }}
         >
-          {secondaryMessage}
+          {failedMessage}
         </Typography>
+      ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            marginTop: 2,
+            marginBottom: VcComponent ? 2 : 3,
+          }}
+        >
+          <Card
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2,
+              padding: 2,
+            }}
+          >
+            <CardTitle sx={{ padding: 0 }}>
+              {hasEnumFlag(status, RouteExecutionStatus.Refunded)
+                ? t('header.refunded')
+                : t('header.received')}
+            </CardTitle>
+            <Token token={toToken} disableDescription={false} />
+            {primaryMessage && (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: '12px',
+                  lineHeight: '16px',
+                  fontWeight: 500,
+                }}
+              >
+                {primaryMessage}
+              </Typography>
+            )}
+          </Card>
+          {VcComponent ? <VcComponent route={route} /> : null}
+        </Box>
       ) : null}
-      {VcComponent ? <VcComponent route={route} /> : null}
       <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
         {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
           <Button variant="text" onClick={handleSeeDetails} fullWidth>