@lifi/widget 3.10.1-alpha.0 → 3.12.0

package/src/hooks/useTokenBalance.ts

@@ -1,27 +1,21 @@
-import type { ExtendedChain } from '@lifi/sdk'
 import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'
-import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 
 const defaultRefetchInterval = 30_000
 
-export const useTokenBalance = (
-  accountAddress?: string,
-  token?: Token,
-  chain?: ExtendedChain
-) => {
-  const { account } = useAccount(
-    // When we provide chain we want to be sure that account address used is from the same ecosystem as token
-    chain ? { chainType: chain.chainType } : undefined
-  )
+export const useTokenBalance = (accountAddress?: string, token?: Token) => {
   const queryClient = useQueryClient()
-  const walletAddress = accountAddress || account.address
 
   const tokenBalanceQueryKey = useMemo(
     () =>
-      ['token-balance', walletAddress, token?.chainId, token?.address] as const,
-    [token?.address, token?.chainId, walletAddress]
+      [
+        'token-balance',
+        accountAddress,
+        token?.chainId,
+        token?.address,
+      ] as const,
+    [token?.address, token?.chainId, accountAddress]
   )
 
   const { data, isLoading, refetch } = useQuery({
@@ -73,18 +67,11 @@ export const useTokenBalance = (
       } as TokenAmount
     },
 
-    enabled: Boolean(walletAddress && token),
+    enabled: Boolean(accountAddress && token),
     refetchInterval: defaultRefetchInterval,
     staleTime: defaultRefetchInterval,
   })
 
-  const refetchAllBalances = () => {
-    queryClient.refetchQueries({
-      queryKey: ['token-balances', accountAddress, token?.chainId],
-      exact: false,
-    })
-  }
-
   const refetchNewBalance = useCallback(() => {
     queryClient.setQueryDefaults(tokenBalanceQueryKey, {
       refetchInterval: 250,
@@ -97,7 +84,6 @@ export const useTokenBalance = (
     isLoading,
     refetch,
     refetchNewBalance,
-    refetchAllBalances,
     getTokenBalancesWithRetry,
   }
 }

package/src/index.ts

@@ -24,3 +24,4 @@ export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'
 export { getPriceImpact } from './utils/getPriceImpact.js'
+export { navigationRoutes } from './utils/navigationRoutes.js'

package/src/pages/MainPage/ReviewButton.tsx

@@ -3,14 +3,17 @@ import { useNavigate } from 'react-router-dom'
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const emitter = useWidgetEvents()
   const { subvariant, subvariantOptions } = useWidgetConfig()
   const splitState = useSplitSubvariantStore((state) => state.state)
   const [toAddress] = useFieldValues('toAddress')
@@ -25,6 +28,10 @@ export const ReviewButton: React.FC = () => {
       navigate(navigationRoutes.transactionExecution, {
         state: { routeId: currentRoute.id },
       })
+      emitter.emit(WidgetEvent.RouteSelected, {
+        route: currentRoute,
+        routes: routes!,
+      })
     }
   }
 

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -11,12 +11,15 @@ import { useHeader } from '../../hooks/useHeader.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { Stack } from './RoutesPage.style.js'
 
 export const RoutesPage: React.FC<BoxProps> = () => {
   const { navigate } = useNavigateBack()
+  const emitter = useWidgetEvents()
   const {
     routes,
     isLoading,
@@ -54,6 +57,10 @@ export const RoutesPage: React.FC<BoxProps> = () => {
     navigate(navigationRoutes.transactionExecution, {
       state: { routeId: route.id },
     })
+    emitter.emit(WidgetEvent.RouteSelected, {
+      route,
+      routes: routes!,
+    })
   }
 
   const routeNotFound = !routes?.length && !isLoading && !isFetching

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -5,7 +5,6 @@ import {
   WarningRounded,
 } from '@mui/icons-material'
 import { Box, Button, Skeleton, Typography } from '@mui/material'
-import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
@@ -78,14 +77,12 @@ export const StatusBottomSheetContent: React.FC<
 > = ({ status, route, onClose }) => {
   const { t } = useTranslation()
   const { navigateBack, navigate } = useNavigateBack()
-  const queryClient = useQueryClient()
   const { setFieldValue } = useFieldActions()
   const {
     subvariant,
     subvariantOptions,
     contractSecondaryComponent,
     contractCompactComponent,
-    feeConfig,
   } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 
@@ -101,25 +98,22 @@ export const StatusBottomSheetContent: React.FC<
     ),
   }
 
-  const toChain = getChainById(toToken.chainId)
-
-  const { token, refetch, refetchNewBalance, refetchAllBalances } =
-    useTokenBalance(route.toAddress, toToken, toChain)
+  const { token, refetch, refetchNewBalance } = useTokenBalance(
+    route.toAddress,
+    toToken
+  )
 
-  const invalidateQueries = () => {
-    refetchAllBalances()
+  const cleanFields = () => {
     setFieldValue('fromAmount', '')
     setFieldValue('toAmount', '')
-    queryClient.invalidateQueries({ queryKey: ['transaction-history'] })
   }
 
   const handleDone = () => {
-    invalidateQueries()
+    cleanFields()
     navigateBack()
   }
 
   const handlePartialDone = () => {
-    invalidateQueries()
     if (
       toToken.chainId !== route.toToken.chainId &&
       toToken.address !== route.toToken.address
@@ -137,12 +131,14 @@ export const StatusBottomSheetContent: React.FC<
       setFieldValue('toToken', route.toToken.address, {
         isTouched: true,
       })
+    } else {
+      cleanFields()
     }
     navigateBack()
   }
 
   const handleClose = () => {
-    invalidateQueries()
+    cleanFields()
     onClose()
   }
 
@@ -179,7 +175,7 @@ export const StatusBottomSheetContent: React.FC<
         primaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: toChain?.name,
+          chainName: getChainById(toToken.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),
         })
       }
@@ -196,7 +192,7 @@ export const StatusBottomSheetContent: React.FC<
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: toChain?.name,
+          chainName: getChainById(toToken.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),
         })
       }
@@ -213,7 +209,7 @@ export const StatusBottomSheetContent: React.FC<
         secondaryMessage = t('success.message.exchangeSuccessful', {
           amount: formatTokenAmount(token.amount, token.decimals),
           tokenSymbol: token.symbol,
-          chainName: toChain?.name,
+          chainName: getChainById(toToken.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),
         })
       }
@@ -252,9 +248,6 @@ export const StatusBottomSheetContent: React.FC<
     hasEnumFlag(status, RouteExecutionStatus.Done) &&
     (contractCompactComponent || contractSecondaryComponent)
 
-  const VcComponent =
-    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined
-
   return (
     <Box p={3} ref={ref}>
       {!showContractComponent ? (
@@ -300,7 +293,6 @@ export const StatusBottomSheetContent: React.FC<
       {secondaryMessage ? (
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : 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>

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -1,43 +1,43 @@
 import { getConnectorClient as getBigmiConnectorClient } from '@bigmi/client'
 import { useConfig as useBigmiConfig } from '@bigmi/react'
-import type { EVMProvider, SDKProvider } from '@lifi/sdk'
+import type { SDKProvider } from '@lifi/sdk'
 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 { useContext, useEffect } from 'react'
-import { useConfig as useWagmiConfig } from 'wagmi'
+import { useEffect } from 'react'
+import { useAccount, useConfig as useWagmiConfig } from 'wagmi'
 import {
   getConnectorClient as getWagmiConnectorClient,
   switchChain,
 } from 'wagmi/actions'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
-import { EVMExternalContext } from './EVMExternalContext.js'
+import { getSafeMultisigConfig } from './getSafeMultisigConfig.js'
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig()
   const { wallet } = useWallet()
   const wagmiConfig = useWagmiConfig()
   const bigmiConfig = useBigmiConfig()
-  const hasExternalEVMContext = useContext(EVMExternalContext)
+  const account = useAccount({ config: wagmiConfig })
 
   useEffect(() => {
     // Configure SDK Providers
     const providers: SDKProvider[] = []
-    const configuredEVMProvider = sdkConfig?.providers?.find(
+    const hasConfiguredEVMProvider = sdkConfig?.providers?.find(
       (provider) => provider.type === ChainType.EVM
-    ) as EVMProvider | undefined
+    )
     const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.SVM
     )
     const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.UTXO
     )
-    // TODO: refactor this in favor of EIP-5792: Wallet Call API
-    const multisig =
-      !hasExternalEVMContext && configuredEVMProvider
-        ? configuredEVMProvider.multisig
-        : undefined
-    if (!configuredEVMProvider || multisig) {
+    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),
@@ -70,8 +70,8 @@ export const SDKProviders = () => {
     }
     config.setProviders(providers)
   }, [
+    account.connector,
     bigmiConfig,
-    hasExternalEVMContext,
     sdkConfig?.providers,
     wagmiConfig,
     wallet?.adapter,

package/src/providers/WalletProvider/getSafeMultisigConfig.ts

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { MultisigTransaction, MultisigTxDetails } from '@lifi/sdk'
+import type { Connector } from 'wagmi'
+
+enum TransactionStatus {
+  AWAITING_CONFIRMATIONS = 'AWAITING_CONFIRMATIONS',
+  AWAITING_EXECUTION = 'AWAITING_EXECUTION',
+  CANCELLED = 'CANCELLED',
+  FAILED = 'FAILED',
+  SUCCESS = 'SUCCESS',
+}
+
+type GatewayTransactionDetails = {
+  safeAddress: string
+  txId: string
+  executedAt?: number
+  txStatus: TransactionStatus
+  txHash?: string
+}
+
+export const getSafeMultisigConfig = (connector: Connector) => {
+  const getMultisigTransactionDetails = async (
+    txHash: string,
+    chainId: number,
+    updateIntermediateStatus?: () => void
+  ): Promise<MultisigTxDetails> => {
+    const safeAppProvider = (await connector.getProvider()) as any
+    const safeProviderSDK = safeAppProvider.sdk
+
+    const safeTransactionDetails: GatewayTransactionDetails =
+      await safeProviderSDK.txs.getBySafeTxHash(txHash)
+
+    const safeTxHash = safeTransactionDetails.txId
+
+    const safeApiTransactionResponse = await fetch(
+      `https://safe-client.safe.global/v1/chains/${chainId}/transactions/${safeTxHash}`
+    )
+
+    const safeApiTransactionDetails = await safeApiTransactionResponse.json()
+
+    const nonTerminalStatus = [
+      TransactionStatus.SUCCESS,
+      TransactionStatus.CANCELLED,
+      TransactionStatus.FAILED,
+    ]
+
+    const isSafeStatusPending =
+      !nonTerminalStatus.includes(safeTransactionDetails.txStatus) &&
+      !nonTerminalStatus.includes(safeApiTransactionDetails.txStatus)
+
+    const isAwaitingExecution = [
+      safeTransactionDetails.txStatus,
+      safeApiTransactionDetails.txStatus,
+    ].includes(TransactionStatus.AWAITING_EXECUTION)
+
+    if (isAwaitingExecution) {
+      updateIntermediateStatus?.()
+    }
+
+    if (isSafeStatusPending) {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 5000)
+      })
+
+      return await getMultisigTransactionDetails(
+        txHash,
+        chainId,
+        updateIntermediateStatus
+      )
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.SUCCESS)
+    ) {
+      return {
+        status: 'DONE',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.FAILED)
+    ) {
+      return {
+        status: 'FAILED',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (
+      [
+        safeTransactionDetails.txStatus,
+        safeApiTransactionDetails.txStatus,
+      ].includes(TransactionStatus.CANCELLED)
+    ) {
+      return {
+        status: 'CANCELLED',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    if (isSafeStatusPending) {
+      return {
+        status: 'PENDING',
+        txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+      }
+    }
+
+    return {
+      status: 'PENDING',
+      txHash: `0x${safeTransactionDetails.txHash?.slice(2)}`,
+    }
+  }
+
+  const sendBatchTransaction = async (
+    batchTransactions: MultisigTransaction[]
+  ): Promise<`0x${string}`> => {
+    const safeAppProvider = (await connector.getProvider()) as any
+    const safeProviderSDK = safeAppProvider.sdk
+
+    try {
+      const { safeTxHash } = await safeProviderSDK.txs.send({
+        txs: batchTransactions,
+      })
+
+      return `0x${safeTxHash.slice(2)}`
+    } catch (error) {
+      throw new Error(error as string)
+    }
+  }
+
+  return {
+    isMultisigWalletClient: connector?.id === 'safe',
+    shouldBatchTransactions: connector?.id === 'safe',
+    sendBatchTransaction,
+    getMultisigTransactionDetails,
+  }
+}

package/src/types/events.ts

@@ -2,6 +2,7 @@ import type { ChainId, ChainType, Process, Route } from '@lifi/sdk'
 import type { DefaultValues } from '../stores/form/types.js'
 import type { SettingsProps } from '../stores/settings/types.js'
 import type { NavigationRouteType } from '../utils/navigationRoutes.js'
+import type { TokenAmount } from './token.js'
 
 export enum WidgetEvent {
   RouteExecutionStarted = 'routeExecutionStarted',
@@ -9,6 +10,7 @@ export enum WidgetEvent {
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
   RouteHighValueLoss = 'routeHighValueLoss',
+  RouteSelected = 'routeSelected',
   AvailableRoutes = 'availableRoutes',
   ContactSupport = 'contactSupport',
   SourceChainTokenSelected = 'sourceChainTokenSelected',
@@ -26,6 +28,7 @@ export enum WidgetEvent {
   PageEntered = 'pageEntered',
   FormFieldChanged = 'formFieldChanged',
   SettingUpdated = 'settingUpdated',
+  TokenSearch = 'tokenSearch',
 }
 
 export type WidgetEvents = {
@@ -34,6 +37,7 @@ export type WidgetEvents = {
   routeExecutionCompleted: Route
   routeExecutionFailed: RouteExecutionUpdate
   routeHighValueLoss: RouteHighValueLossUpdate
+  routeSelected: RouteSelected
   availableRoutes: Route[]
   contactSupport: ContactSupport
   sourceChainTokenSelected: ChainTokenSelected
@@ -45,13 +49,14 @@ export type WidgetEvents = {
   widgetExpanded: boolean
   pageEntered: NavigationRouteType
   settingUpdated: SettingUpdated
+  tokenSearch: TokenSearch
 }
 
-export interface ContactSupport {
+export type ContactSupport = {
   supportId?: string
 }
 
-export interface RouteHighValueLossUpdate {
+export type RouteHighValueLossUpdate = {
   fromAmountUSD: number
   toAmountUSD: number
   gasCostUSD?: number
@@ -59,17 +64,27 @@ export interface RouteHighValueLossUpdate {
   valueLoss: number
 }
 
-export interface RouteExecutionUpdate {
+export type RouteExecutionUpdate = {
   route: Route
   process: Process
 }
 
-export interface ChainTokenSelected {
+export type RouteSelected = {
+  route: Route
+  routes: Route[]
+}
+
+export type TokenSearch = {
+  value: string
+  tokens: TokenAmount[]
+}
+
+export type ChainTokenSelected = {
   chainId: ChainId
   tokenAddress: string
 }
 
-export interface WalletConnected {
+export type WalletConnected = {
   address?: string
   chainId?: number
   chainType?: ChainType

package/src/types/widget.ts

@@ -3,7 +3,6 @@ import type {
   ChainType,
   ContractCall,
   Order,
-  RouteExtended,
   RouteOptions,
   SDKConfig,
   StaticToken,
@@ -19,7 +18,6 @@ import type {
 import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
 import type {
   CSSProperties,
-  FC,
   MutableRefObject,
   ReactNode,
   RefObject,
@@ -160,10 +158,6 @@ export interface WidgetFeeConfig {
    * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)
    */
   calculateFee?(params: CalculateFeeParams): Promise<number | undefined>
-  /**
-   * @internal
-   */
-  _vcComponent: FC<{ route: RouteExtended }>
 }
 
 export interface ToAddress {
@@ -212,9 +206,6 @@ export interface WidgetConfig {
   contractTool?: WidgetContractTool
   integrator: string
   apiKey?: string
-  /**
-   * @deprecated Use `feeConfig` instead.
-   */
   fee?: number
   feeConfig?: WidgetFeeConfig
   referrer?: string