@lifi/widget 3.21.3 → 3.22.0

package/src/hooks/useGasSufficiency.ts

@@ -1,7 +1,10 @@
-import type { EVMChain, RouteExtended, Token } from '@lifi/sdk'
-import { isRelayerStep } from '@lifi/sdk'
+import type { EVMChain, RouteExtended, Token, TokenAmount } from '@lifi/sdk'
+import { ChainType, isRelayerStep } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 import { getTokenBalancesWithRetry } from './useTokenBalance.js'
@@ -19,30 +22,64 @@ const refetchInterval = 30_000
 
 export const useGasSufficiency = (route?: RouteExtended) => {
   const { getChainById } = useAvailableChains()
-  const { account } = useAccount({
-    chainType: getChainById(route?.fromChainId)?.chainType,
+  const { account: EVMAccount, accounts } = useAccount({
+    chainType: ChainType.EVM,
   })
+  const { keyPrefix } = useWidgetConfig()
+
+  const { relevantAccounts, relevantAccountsQueryKey } = useMemo(() => {
+    const chainTypes = route?.steps.reduce((acc, step) => {
+      const chainType = getChainById(step.action.fromChainId)?.chainType
+      if (chainType) {
+        acc.add(chainType)
+      }
+      return acc
+    }, new Set<ChainType>())
+
+    const relevantAccounts = accounts.filter(
+      (account) =>
+        account.isConnected &&
+        account.address &&
+        chainTypes?.has(account.chainType)
+    )
+    return {
+      relevantAccounts,
+      relevantAccountsQueryKey: relevantAccounts
+        .map((account) => account.address)
+        .join(','),
+    }
+  }, [accounts, route?.steps, getChainById])
 
   const { isContractAddress, isLoading: isContractAddressLoading } =
-    useIsContractAddress(account.address, route?.fromChainId, account.chainType)
+    useIsContractAddress(
+      EVMAccount.address,
+      route?.fromChainId,
+      EVMAccount.chainType
+    )
 
   const { data: insufficientGas, isLoading } = useQuery({
     queryKey: [
-      'gas-sufficiency-check',
-      account.address,
+      getQueryKey('gas-sufficiency-check', keyPrefix),
+      relevantAccountsQueryKey,
       route?.id,
       isContractAddress,
     ] as const,
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
+    queryFn: async () => {
       if (!route) {
         return
       }
 
-      // If we have a relayer step with a permit (EIP-2612) for the from token, we don't need to check for gas sufficiency
-      if (
-        isRelayerStep(route.steps[0]) &&
-        route.steps[0].typedData.some((t) => t.primaryType === 'Permit')
-      ) {
+      // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
+      const filteredSteps = route.steps.filter(
+        (step) =>
+          !isRelayerStep(step) &&
+          !step.typedData?.some(
+            (t) => t.primaryType === 'Permit' || t.primaryType === 'Order'
+          )
+      )
+
+      // If all steps are filtered out, we don't need to check for gas sufficiency
+      if (!filteredSteps.length) {
         return
       }
 
@@ -51,7 +88,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .flatMap((step) => step.includedSteps)
         .some((includedStep) => includedStep.tool === 'gasZip')
 
-      const gasCosts = route.steps
+      const gasCosts = filteredSteps
         .filter((step) => !step.execution || step.execution.status !== 'DONE')
         .reduce(
           (groupedGasCosts, step) => {
@@ -70,6 +107,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   ? groupedGasCosts[token.chainId].gasAmount + gasCostAmount
                   : gasCostAmount,
                 token,
+                chain: getChainById(token.chainId),
               }
             }
             // Add fees paid in native tokens to gas sufficiency check (included: false)
@@ -88,11 +126,12 @@ export const useGasSufficiency = (route?: RouteExtended) => {
                   ? groupedGasCosts[token.chainId].gasAmount + feeCostAmount
                   : feeCostAmount,
                 token,
-              } as any
+                chain: getChainById(token.chainId),
+              }
             }
             return groupedGasCosts
           },
-          {} as Record<number, GasSufficiency>
+          {} as Record<string, GasSufficiency>
         )
 
       // Check whether we are sending a native token
@@ -104,15 +143,30 @@ export const useGasSufficiency = (route?: RouteExtended) => {
           gasCosts[route.fromChainId]?.gasAmount + BigInt(route.fromAmount)
       }
 
-      const tokenBalances = await getTokenBalancesWithRetry(
-        accountAddress!,
-        Object.values(gasCosts).map((item) => item.token)
+      const gasCostsValues = Object.values(gasCosts)
+
+      const balanceChecks = await Promise.allSettled(
+        relevantAccounts.map((account) => {
+          const relevantTokens = gasCostsValues
+            .filter((gasCost) => gasCost.chain?.chainType === account.chainType)
+            .map((item) => item.token)
+
+          return getTokenBalancesWithRetry(account.address!, relevantTokens)
+        })
       )
 
+      const tokenBalances = balanceChecks
+        .filter(
+          (result): result is PromiseFulfilledResult<TokenAmount[]> =>
+            result.status === 'fulfilled' && Boolean(result.value)
+        )
+        .flatMap((result) => result.value)
+
       if (!tokenBalances?.length) {
         return
       }
-      ;[route.fromChainId, route.toChainId].forEach((chainId) => {
+
+      Object.keys(gasCosts).forEach((chainId) => {
         if (gasCosts[chainId]) {
           const gasTokenBalance =
             tokenBalances?.find(
@@ -135,7 +189,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
             ...gasCosts[chainId],
             insufficient,
             insufficientAmount,
-            chain: insufficient ? getChainById(chainId) : undefined,
+            chain: insufficient ? getChainById(Number(chainId)) : undefined,
           }
         }
       })
@@ -150,7 +204,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     enabled: Boolean(
       !isContractAddress &&
         !isContractAddressLoading &&
-        account.address &&
+        relevantAccounts.length > 0 &&
         route
     ),
     refetchInterval,

package/src/hooks/useIsBatchingSupported.ts

@@ -1,16 +1,24 @@
 import { ChainType, isBatchingSupported } from '@lifi/sdk'
 import type { ExtendedChain } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { getQueryKey } from '../utils/queries.js'
 
 export function useIsBatchingSupported(
   chain?: ExtendedChain,
   address?: string
 ) {
+  const { keyPrefix } = useWidgetConfig()
+
   const enabled = Boolean(
     chain && chain.chainType === ChainType.EVM && !!address
   )
   const { data, isLoading } = useQuery({
-    queryKey: ['isBatchingSupported', chain?.id, address],
+    queryKey: [
+      getQueryKey('isBatchingSupported', keyPrefix),
+      chain?.id,
+      address,
+    ],
     queryFn: () => {
       return isBatchingSupported({ chainId: chain!.id })
     },

package/src/hooks/useIsContractAddress.ts

@@ -22,7 +22,7 @@ export const useIsContractAddress = (
     query: {
       refetchInterval: 300_000,
       staleTime: 300_000,
-      enabled: Boolean(chainType === ChainType.EVM && chainId),
+      enabled: chainType === ChainType.EVM && !!chainId && !!address,
     },
   })
 

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/useToAddressRequirements.ts

@@ -3,12 +3,12 @@ import { useAccount } from '@lifi/wallet-management'
 import { useChain } from '../hooks/useChain.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { RequiredUI } from '../types/widget.js'
+import { HiddenUI, RequiredUI } from '../types/widget.js'
 import { isDelegationDesignatorCode } from '../utils/eip7702.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 
 export const useToAddressRequirements = (route?: RouteExtended) => {
-  const { requiredUI } = useWidgetConfig()
+  const { requiredUI, hiddenUI } = useWidgetConfig()
   const [formFromChainId, formToChainId, formToAddress] = useFieldValues(
     'fromChain',
     'toChain',
@@ -57,9 +57,10 @@ export const useToAddressRequirements = (route?: RouteExtended) => {
     !fromContractCodeHasDelegationIndicator
 
   const requiredToAddress =
-    requiredUI?.includes(RequiredUI.ToAddress) ||
-    isDifferentChainType ||
-    isCrossChainContractAddress
+    (isDifferentChainType ||
+      isCrossChainContractAddress ||
+      requiredUI?.includes(RequiredUI.ToAddress)) &&
+    !hiddenUI?.includes(HiddenUI.ToAddress)
 
   const accountNotDeployedAtDestination =
     isFromContractAddress &&

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}
     />
   )
 }