@lifi/widget 3.14.0-beta.0 → 3.14.0

package/src/hooks/useProcessMessage.ts

@@ -39,7 +39,6 @@ const processStatusMessages: Record<
       ProcessStatus,
       (
         t: TFunction,
-        step: LiFiStep,
         subvariant?: WidgetSubvariant,
         subvariantOptions?: SubvariantOptions
       ) => string
@@ -48,18 +47,9 @@ const processStatusMessages: Record<
 > = {
   TOKEN_ALLOWANCE: {
     STARTED: (t) => t('main.process.tokenAllowance.started'),
-    ACTION_REQUIRED: (t, step) =>
-      t('main.process.tokenAllowance.actionRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
-    PENDING: (t, step) =>
-      t('main.process.tokenAllowance.pending', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
-    DONE: (t, step) =>
-      t('main.process.tokenAllowance.done', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
+    ACTION_REQUIRED: (t) => t('main.process.tokenAllowance.pending'),
+    PENDING: (t) => t('main.process.tokenAllowance.pending'),
+    DONE: (t) => t('main.process.tokenAllowance.done'),
   },
   SWITCH_CHAIN: {
     ACTION_REQUIRED: (t) => t('main.process.switchChain.actionRequired'),
@@ -67,30 +57,22 @@ const processStatusMessages: Record<
   },
   SWAP: {
     STARTED: (t) => t('main.process.swap.started'),
-    PERMIT_REQUIRED: (t, step) =>
-      t('main.process.swap.permitRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
     ACTION_REQUIRED: (t) => t('main.process.swap.actionRequired'),
     PENDING: (t) => t('main.process.swap.pending'),
-    DONE: (t, _, subvariant, subvariantOptions) =>
+    DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.swap.done'),
   },
   CROSS_CHAIN: {
     STARTED: (t) => t('main.process.bridge.started'),
-    PERMIT_REQUIRED: (t, step) =>
-      t('main.process.bridge.permitRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
     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, subvariantOptions) =>
+    DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.receivingChain.done'),
@@ -247,7 +229,6 @@ export function getProcessMessage(
     ]?.(t) ??
     processStatusMessages[process.type]?.[process.status]?.(
       t,
-      step,
       subvariant,
       subvariantOptions
     )

package/src/hooks/useRoutes.ts

@@ -1,12 +1,5 @@
-import type { Route, Token } from '@lifi/sdk'
-import {
-  LiFiErrorCode,
-  convertQuoteToRoute,
-  getContractCallsQuote,
-  getRelayerQuote,
-  getRoutes,
-  isEVMPermitStep,
-} from '@lifi/sdk'
+import type { Route, RoutesResponse, Token } from '@lifi/sdk'
+import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { parseUnits } from 'viem'
@@ -39,7 +32,6 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     exchanges,
     fee,
     feeConfig,
-    useRelayerRoutes,
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -266,9 +258,27 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             contractCallQuote.toolDetails = toolDetails
           }
 
-          const route: Route = convertQuoteToRoute(contractCallQuote)
+          const route: Route = {
+            id: crypto.randomUUID(),
+            fromChainId: contractCallQuote.action.fromChainId,
+            fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
+            fromAmount: contractCallQuote.action.fromAmount,
+            fromToken: contractCallQuote.action.fromToken,
+            fromAddress: contractCallQuote.action.fromAddress,
+            toChainId: contractCallQuote.action.toChainId,
+            toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
+            toAmount: contractCallQuote.estimate.toAmount,
+            toAmountMin: contractCallQuote.estimate.toAmountMin,
+            toToken: toToken!,
+            toAddress:
+              contractCallQuote.action.toAddress ||
+              contractCallQuote.action.fromAddress,
+            gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
+            steps: [contractCallQuote],
+            insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
+          }
 
-          return [route]
+          return { routes: [route] } as RoutesResponse
         }
 
         // Prevent sending a request for the same chain token combinations.
@@ -276,110 +286,50 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return
         }
 
-        const isObservableRelayerRoute =
-          observableRoute?.steps?.some(isEVMPermitStep)
-
-        const shouldUseMainRoutes =
-          !observableRoute || !isObservableRelayerRoute
-        const shouldUseRelayerQuote =
-          fromAddress &&
-          useRelayerRoutes &&
-          (!observableRoute || isObservableRelayerRoute)
-
-        const [routesResult, relayerRouteResult] = await Promise.all([
-          shouldUseMainRoutes
-            ? getRoutes(
-                {
-                  fromAddress,
-                  fromAmount: fromAmount.toString(),
-                  fromChainId,
-                  fromTokenAddress,
-                  toAddress,
-                  toChainId,
-                  toTokenAddress,
-                  fromAmountForGas:
-                    enabledRefuel && gasRecommendationFromAmount
-                      ? gasRecommendationFromAmount
-                      : undefined,
-                  options: {
-                    allowSwitchChain:
-                      subvariant === 'refuel' ? false : allowSwitchChain,
-                    bridges:
-                      allowBridges?.length || disabledBridges.length
-                        ? {
-                            allow: allowBridges,
-                            deny: disabledBridges.length
-                              ? disabledBridges
-                              : undefined,
-                          }
+        const data = await getRoutes(
+          {
+            fromAddress,
+            fromAmount: fromAmount.toString(),
+            fromChainId,
+            fromTokenAddress,
+            toAddress,
+            toChainId,
+            toTokenAddress,
+            fromAmountForGas:
+              enabledRefuel && gasRecommendationFromAmount
+                ? gasRecommendationFromAmount
+                : undefined,
+            options: {
+              allowSwitchChain:
+                subvariant === 'refuel' ? false : allowSwitchChain,
+              bridges:
+                allowBridges?.length || disabledBridges.length
+                  ? {
+                      allow: allowBridges,
+                      deny: disabledBridges.length
+                        ? disabledBridges
                         : undefined,
-                    exchanges:
-                      allowExchanges?.length || disabledExchanges.length
-                        ? {
-                            allow: allowExchanges,
-                            deny: disabledExchanges.length
-                              ? disabledExchanges
-                              : undefined,
-                          }
+                    }
+                  : undefined,
+              exchanges:
+                allowExchanges?.length || disabledExchanges.length
+                  ? {
+                      allow: allowExchanges,
+                      deny: disabledExchanges.length
+                        ? disabledExchanges
                         : undefined,
-                    order: routePriority,
-                    slippage: formattedSlippage,
-                    fee: calculatedFee || fee,
-                  },
-                },
-                { signal }
-              )
-            : Promise.resolve(null),
-          shouldUseRelayerQuote
-            ? getRelayerQuote(
-                {
-                  fromAddress,
-                  fromAmount: fromAmount.toString(),
-                  fromChain: fromChainId,
-                  fromToken: fromTokenAddress,
-                  toAddress,
-                  toChain: toChainId,
-                  toToken: toTokenAddress,
-                  fromAmountForGas:
-                    enabledRefuel && gasRecommendationFromAmount
-                      ? gasRecommendationFromAmount
-                      : undefined,
-                  order: routePriority,
-                  slippage: formattedSlippage,
-                  fee: calculatedFee || fee,
-                  ...(allowBridges?.length || disabledBridges.length
-                    ? {
-                        allowBridges: allowBridges,
-                        denyBridges: disabledBridges.length
-                          ? disabledBridges
-                          : undefined,
-                      }
-                    : undefined),
-                  ...(allowExchanges?.length || disabledExchanges.length
-                    ? {
-                        allowExchanges: allowExchanges,
-                        denyExchanges: disabledExchanges.length
-                          ? disabledExchanges
-                          : undefined,
-                      }
-                    : undefined),
-                },
-                { signal }
-              )
-                .then((response) => {
-                  const quote = {
-                    ...response.data.quote.step,
-                    ...response.data.quote,
-                  }
-                  return convertQuoteToRoute(quote)
-                })
-                .catch(() => null)
-            : Promise.resolve(null),
-        ])
-
-        if (routesResult?.routes[0] && fromAddress) {
+                    }
+                  : undefined,
+              order: routePriority,
+              slippage: formattedSlippage,
+              fee: calculatedFee || fee,
+            },
+          },
+          { signal }
+        )
+        if (data.routes[0] && fromAddress) {
           // Update local tokens cache to keep priceUSD in sync
-          const { fromToken, toToken } = routesResult.routes[0]
+          const { fromToken, toToken } = data.routes[0]
           ;[fromToken, toToken].forEach((token) => {
             queryClient.setQueriesData<Token[]>(
               { queryKey: ['token-balances', fromAddress, token.chainId] },
@@ -399,16 +349,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             )
           })
         }
-
-        const routes = routesResult?.routes ?? []
-
-        // Add relayer route if available
-        if (relayerRouteResult) {
-          routes.splice(1, 0, relayerRouteResult)
-        }
-
-        emitter.emit(WidgetEvent.AvailableRoutes, routes)
-        return routes
+        emitter.emit(WidgetEvent.AvailableRoutes, data.routes)
+        return data
       },
       enabled: isEnabled,
       staleTime: refetchTime,
@@ -419,9 +361,6 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         )
       },
       retry(failureCount, error: any) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Route query failed:', { failureCount, error })
-        }
         if (failureCount >= 5) {
           return false
         }
@@ -443,7 +382,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   }
 
   return {
-    routes: data,
+    routes: data?.routes,
     isLoading: isEnabled && isLoading,
     isFetching,
     isFetched,

package/src/i18n/en.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "{{value, currencyExt(currency: USD)}}",
     "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": "{{value, percent(maximumFractionDigits: 2)}}"
+    "percent": "{{value, percent(maximumFractionDigits: 2)}}",
+    "tokenAmount": "{{value, numberExt}}"
   },
   "button": {
     "auto": "Auto",
@@ -88,7 +89,8 @@
       "emptyBridgesList": "We couldn't find any bridges that match your search",
       "emptyExchangesList": "We couldn't find any exchanges that match your search",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "fundsToExchange": "Funds sent to an exchange may be lost",
+      "smartContractAccount": "Always ensure your smart contract account is set up on the destination chain to avoid potential fund loss.",
+      "fundsToExchange": "Funds sent directly to exchanges might not be recoverable.",
       "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
       "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."
     },
@@ -220,10 +222,9 @@
     "priceImpact": "Price impact",
     "process": {
       "bridge": {
-        "permitRequired": "Sign permit for {{tokenSymbol}}",
-        "actionRequired": "Sign bridge transaction",
+        "actionRequired": "Please sign the transaction",
         "done": "Bridge transaction confirmed",
-        "pending": "Bridge transaction pending",
+        "pending": "Waiting for bridge transaction",
         "started": "Preparing bridge transaction"
       },
       "checkout": {
@@ -239,21 +240,19 @@
         "refunded": "Bridge transaction refunded"
       },
       "swap": {
-        "permitRequired": "Sign permit for {{tokenSymbol}}",
-        "actionRequired": "Sign swap transaction",
+        "actionRequired": "Please sign the transaction",
         "done": "Swap completed",
-        "pending": "Swap transaction pending",
+        "pending": "Waiting for swap transaction",
         "started": "Preparing swap transaction"
       },
       "switchChain": {
-        "actionRequired": "Confirm chain switch",
-        "done": "Chain switched"
+        "actionRequired": "Chain switch required",
+        "done": "Chain switched successfully"
       },
       "tokenAllowance": {
-        "actionRequired": "Approve {{tokenSymbol}} spending",
-        "done": "{{tokenSymbol}} spending approved",
-        "pending": "{{tokenSymbol}} approval pending",
-        "started": "Preparing approval transaction"
+        "done": "Token allowance approved",
+        "pending": "Waiting for token allowance",
+        "started": "Setting token allowance"
       }
     },
     "quotedAmount": "Quoted amount",
@@ -281,8 +280,7 @@
     "transferId": "Transfer ID",
     "tags": {
       "cheapest": "Best Return",
-      "fastest": "Fastest",
-      "gasless": "Gasless"
+      "fastest": "Fastest"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -1,11 +1,12 @@
-import { Info, Wallet } from '@mui/icons-material'
-import { Button, Typography } from '@mui/material'
+import { Info, Wallet, Warning } from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
 import type { MutableRefObject } from 'react'
 import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { useIsContractAddress } from '../../hooks/useIsContractAddress.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -21,16 +22,22 @@ import {
 interface ConfirmAddressSheetProps {
   onConfirm: (wallet: Bookmark) => void
   validatedBookmark?: Bookmark
+  chainId?: number
 }
 
 export const ConfirmAddressSheet = forwardRef<
   BottomSheetBase,
   ConfirmAddressSheetProps
->(({ validatedBookmark, onConfirm }, ref) => {
+>(({ validatedBookmark, onConfirm, chainId }, ref) => {
   const { t } = useTranslation()
   const { navigateBack } = useNavigateBack()
   const { setFieldValue } = useFieldActions()
   const { setSendToWallet } = useSendToWalletActions()
+  const isContractAddress = useIsContractAddress(
+    validatedBookmark?.address,
+    chainId,
+    validatedBookmark?.chainType
+  )
 
   const handleClose = () => {
     ;(ref as MutableRefObject<BottomSheetBase>).current?.close()
@@ -71,12 +78,27 @@ export const ConfirmAddressSheet = forwardRef<
         </SheetAddressContainer>
         <AlertMessage
           title={
-            <Typography variant="body2">
-              {t('info.message.fundsToExchange')}
-            </Typography>
+            <Box sx={{ display: 'grid', gap: 1 }}>
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.fundsToExchange')}
+              </Typography>
+            </Box>
           }
           icon={<Info />}
+          multiline
         />
+        {isContractAddress ? (
+          <AlertMessage
+            title={
+              <Typography variant="body2" fontWeight={500}>
+                {t('info.message.smartContractAccount')}
+              </Typography>
+            }
+            icon={<Warning />}
+            severity="warning"
+            multiline
+          />
+        ) : null}
         <SendToWalletButtonRow>
           <Button variant="text" onClick={handleClose} fullWidth>
             {t('button.cancel')}

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,3 +1,4 @@
+import { ChainType } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import {
   Error as ErrorIcon,
@@ -58,8 +59,6 @@ export const SendToWalletPage = () => {
   const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
   const [errorMessage, setErrorMessage] = useState('')
   const { validateAddress, isValidating } = useAddressValidation()
-  const { accounts } = useAccount()
-  const connectedWallets = accounts.filter((account) => account.isConnected)
   const { requiredToChainType } = useToAddressRequirements()
   const [toChainId] = useFieldValues('toChain')
   const { chain: toChain } = useChain(toChainId)
@@ -67,6 +66,12 @@ export const SendToWalletPage = () => {
   const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)
   const { variant } = useWidgetConfig()
 
+  const { accounts } = useAccount()
+  const connectedWallets = accounts.filter((account) => account.isConnected)
+  const connectedEVMChainId = connectedWallets.find(
+    (account) => account.chainType === ChainType.EVM
+  )?.chainId
+
   useHeader(t('header.sendToWallet'))
 
   const handleInputChange = (e: ChangeEvent) => {
@@ -241,6 +246,7 @@ export const SendToWalletPage = () => {
           ref={confirmAddressSheetRef}
           validatedBookmark={validatedWallet}
           onConfirm={handleOnConfirm}
+          chainId={connectedEVMChainId || toChainId}
         />
         <BookmarkAddressSheet
           ref={bookmarkAddressSheetRef}

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -146,7 +146,7 @@ const ExchangeRateBottomSheetContent: React.FC<
             fontWeight: 600,
           }}
         >
-          {t('format.number', {
+          {t('format.tokenAmount', {
             value: formatTokenAmount(
               BigInt(data.oldToAmount),
               data.toToken.decimals
@@ -168,7 +168,7 @@ const ExchangeRateBottomSheetContent: React.FC<
             fontWeight: 600,
           }}
         >
-          {t('format.number', {
+          {t('format.tokenAmount', {
             value: formatTokenAmount(
               BigInt(data?.newToAmount),
               data?.toToken.decimals

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -4,11 +4,12 @@ import { useMemo } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import * as supportedLanguages from '../../i18n/index.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
+import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
 import { deepMerge } from '../../utils/deepMerge.js'
 import { isItemAllowed } from '../../utils/item.js'
+import { percentFormatter } from '../../utils/percentFormatter.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { currencyExtendedFormatter } from './currencyExtendedFormatter.js'
-import { percentFormatter } from './percentFormatter.js'
 import type { LanguageKey, LanguageTranslationResources } from './types.js'
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
@@ -63,6 +64,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
 
     i18n.init()
 
+    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)
     i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)
     i18n.services.formatter?.addCached('percent', percentFormatter)
 

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -5,18 +5,20 @@ import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk'
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useEffect } from 'react'
-import { useConfig as useWagmiConfig } from 'wagmi'
+import { useAccount, useConfig as useWagmiConfig } from 'wagmi'
 import {
   getConnectorClient as getWagmiConnectorClient,
   switchChain,
 } from 'wagmi/actions'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { getSafeMultisigConfig } from './getSafeMultisigConfig.js'
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig()
   const { wallet } = useWallet()
   const wagmiConfig = useWagmiConfig()
   const bigmiConfig = useBigmiConfig()
+  const account = useAccount({ config: wagmiConfig })
 
   useEffect(() => {
     // Configure SDK Providers
@@ -31,6 +33,11 @@ export const SDKProviders = () => {
       (provider) => provider.type === ChainType.UTXO
     )
     if (!hasConfiguredEVMProvider) {
+      // TODO: refactor this in favor of EIP-5792: Wallet Call API
+      const multisig =
+        account.connector?.id === 'safe'
+          ? getSafeMultisigConfig(account.connector)
+          : undefined
       providers.push(
         EVM({
           getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
@@ -38,6 +45,7 @@ export const SDKProviders = () => {
             const chain = await switchChain(wagmiConfig, { chainId })
             return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id })
           },
+          multisig,
         })
       )
     }
@@ -61,7 +69,13 @@ export const SDKProviders = () => {
       providers.push(...sdkConfig.providers)
     }
     config.setProviders(providers)
-  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter])
+  }, [
+    account.connector,
+    bigmiConfig,
+    sdkConfig?.providers,
+    wagmiConfig,
+    wallet?.adapter,
+  ])
 
   return null
 }