@lifi/widget 3.9.0 → 3.10.1-alpha.0

package/src/i18n/vi.json

@@ -16,10 +16,10 @@
     "bridgeReview": "",
     "buy": "Mua",
     "cancel": "Huỷ bỏ",
-    "changeWallet": "Thay đổi ví",
     "checkoutReview": "",
     "close": "Đóng",
     "confirm": "Xác nhận",
+    "connectAnotherWallet": "",
     "connectWallet": "Kết nối ví",
     "contactSupport": "Liên hệ hỗ trợ",
     "continue": "Tiếp tục",
@@ -142,6 +142,7 @@
       "signatureRejected": "Cần có chữ ký để hoàn tất giao dịch. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} tại {{chainName}} vẫn còn trong ví của bạn.",
       "slippageThreshold": "Độ trượt giá lớn hơn ngưỡng xác định. Vui lòng yêu cầu một tuyến đường mới để nhận báo giá mới.",
       "transactionCanceled": "Giao dịch đã bị huỷ.",
+      "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "Vui lòng kiểm tra block explorer để biết thêm thông tin.",
       "transactionNotSent": "Giao dịch không được gửi.",
@@ -161,6 +162,7 @@
       "signatureRejected": "Yêu cầu chữ ký",
       "slippageNotMet": "Điều kiện trượt giá không được đáp ứng",
       "transactionCanceled": "Giao dịch bị huỷ",
+      "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "Giao dịch không thành công",
       "transactionSimulationFailed": "",
@@ -309,8 +311,5 @@
     "noBookmarkedWallets": "Không có ví được đánh dấu",
     "noConnectedWallets": "Không có ví được kết nối",
     "noRecentWallets": "Không có ví gần đây"
-  },
-  "wallet": {
-    "extensionNotFound": "Chắc chắn rằng tiện ích trên trình duyệt {{name}} đã được kích hoạt tước khi chọn ví này."
   }
 }

package/src/i18n/zh.json

@@ -16,10 +16,10 @@
     "bridgeReview": "",
     "buy": "购买",
     "cancel": "取消",
-    "changeWallet": "更换钱包",
     "checkoutReview": "",
     "close": "关闭",
     "confirm": "确认",
+    "connectAnotherWallet": "",
     "connectWallet": "关联钱包",
     "contactSupport": "联系技术支持",
     "continue": "继续",
@@ -142,6 +142,7 @@
       "signatureRejected": "需要您签名来完成此次交易。不用担心，{{chainName}} 链上 {{amount, number(maximumFractionDigits: 9)}} 个 {{tokenSymbol}} 仍在您的钱包里。",
       "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
       "transactionCanceled": "交易已被取消。",
+      "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "请查看区块浏览器以了解更多信息。",
       "transactionNotSent": "交易未能发送。",
@@ -161,6 +162,7 @@
       "signatureRejected": "交易需要签名。",
       "slippageNotMet": "滑点未满足",
       "transactionCanceled": "交易取消",
+      "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "交易失败",
       "transactionSimulationFailed": "",
@@ -309,8 +311,5 @@
     "noBookmarkedWallets": "没有收藏的钱包",
     "noConnectedWallets": "没有已连接的钱包",
     "noRecentWallets": "没有最近使用的钱包"
-  },
-  "wallet": {
-    "extensionNotFound": "在选择钱包之前，请确保只有{{name}} 浏览器的扩展应用处于激活状态。"
   }
 }

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -4,7 +4,7 @@ import {
   ContentCopyRounded,
   MoreHoriz,
   OpenInNewRounded,
-  TurnedIn,
+  Wallet,
 } from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useState } from 'react'
@@ -139,7 +139,7 @@ export const ConnectedWalletsPage = () => {
           )
         })}
         {!accounts.length && (
-          <EmptyListIndicator icon={<TurnedIn sx={{ fontSize: 48 }} />}>
+          <EmptyListIndicator icon={<Wallet sx={{ fontSize: 48 }} />}>
             {t('sendToWallet.noConnectedWallets')}
           </EmptyListIndicator>
         )}

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -1,10 +1,10 @@
 import {
   ContentCopyRounded,
   DeleteOutline,
+  History,
   MoreHoriz,
   OpenInNewRounded,
   TurnedInNot,
-  Wallet,
 } from '@mui/icons-material'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
 import { useId, useRef, useState } from 'react'
@@ -175,7 +175,7 @@ export const RecentWalletsPage = () => {
           </ListItem>
         ))}
         {!recentWallets.length && (
-          <EmptyListIndicator icon={<Wallet sx={{ fontSize: 48 }} />}>
+          <EmptyListIndicator icon={<History sx={{ fontSize: 48 }} />}>
             {t('sendToWallet.noRecentWallets')}
           </EmptyListIndicator>
         )}

package/src/providers/WalletProvider/SDKProviders.tsx

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

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -7,6 +7,7 @@ import { EVMProvider } from './EVMProvider.js'
 import { SDKProviders } from './SDKProviders.js'
 import { SVMProvider } from './SVMProvider.js'
 import { UTXOProvider } from './UTXOProvider.js'
+import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
@@ -24,10 +25,16 @@ export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
 export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
   const { walletConfig } = useWidgetConfig()
   const { i18n } = useTranslation()
+  const { internalChainTypes } = useExternalWalletProvider()
 
   const config: WalletManagementConfig = useMemo(() => {
-    return { locale: i18n.resolvedLanguage as never, ...walletConfig }
-  }, [i18n.resolvedLanguage, walletConfig])
+    return {
+      locale: i18n.resolvedLanguage as never,
+      enabledChainTypes: internalChainTypes,
+      ...walletConfig,
+    }
+  }, [i18n.resolvedLanguage, internalChainTypes, walletConfig])
+
   return (
     <WalletManagementProvider config={config}>
       {children}

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -0,0 +1,53 @@
+import { ChainType } from '@lifi/sdk'
+import { useContext, useMemo } from 'react'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { EVMExternalContext } from './EVMExternalContext.js'
+import { SVMExternalContext } from './SVMExternalContext.js'
+import { UTXOExternalContext } from './UTXOExternalContext.js'
+
+interface ExternalWalletProvider {
+  useExternalWalletProvidersOnly: boolean
+  externalChainTypes: ChainType[]
+  internalChainTypes: ChainType[]
+}
+
+const internalChainTypes = [ChainType.EVM, ChainType.SVM, ChainType.UTXO]
+
+export function useExternalWalletProvider(): ExternalWalletProvider {
+  const { walletConfig } = useWidgetConfig()
+  const hasExternalEVMContext = useContext(EVMExternalContext)
+  const hasExternalSVMContext = useContext(SVMExternalContext)
+  const hasExternalUTXOContext = useContext(UTXOExternalContext)
+
+  const data = useMemo(() => {
+    const providers: ChainType[] = []
+    if (hasExternalEVMContext) {
+      providers.push(ChainType.EVM)
+    }
+    if (hasExternalSVMContext) {
+      providers.push(ChainType.SVM)
+    }
+    if (hasExternalUTXOContext) {
+      providers.push(ChainType.UTXO)
+    }
+    const hasExternalProvider =
+      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext
+
+    const useExternalWalletProvidersOnly =
+      hasExternalProvider && !walletConfig?.usePartialWalletManagement
+    return {
+      useExternalWalletProvidersOnly,
+      externalChainTypes: providers,
+      internalChainTypes: internalChainTypes.filter(
+        (chainType) => !providers.includes(chainType)
+      ),
+    }
+  }, [
+    hasExternalEVMContext,
+    hasExternalSVMContext,
+    hasExternalUTXOContext,
+    walletConfig?.usePartialWalletManagement,
+  ])
+
+  return data
+}

package/src/stores/chains/ChainOrderStore.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useRef } from 'react'
 import type { StoreApi } from 'zustand'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { useChains } from '../../hooks/useChains.js'
+import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { isItemAllowed } from '../../utils/item.js'
 import type { FormType } from '../form/types.js'
@@ -22,10 +23,12 @@ export function ChainOrderStoreProvider({
   children,
   ...props
 }: PersistStoreProviderProps) {
-  const { chains: configChains } = useWidgetConfig()
+  const { chains: chainsConfig } = useWidgetConfig()
   const storeRef = useRef<ChainOrderStore>()
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
+  const { externalChainTypes, useExternalWalletProvidersOnly } =
+    useExternalWalletProvider()
 
   if (!storeRef.current) {
     storeRef.current = createChainOrderStore(props)
@@ -34,9 +37,22 @@ export function ChainOrderStoreProvider({
   useEffect(() => {
     if (chains) {
       ;(['from', 'to'] as FormType[]).forEach((key) => {
-        const filteredChains = configChains?.[key]
-          ? chains.filter((chain) => isItemAllowed(chain.id, configChains[key]))
-          : chains
+        const configChainIds = chainsConfig?.[key]
+        const isFromKey = key === 'from'
+
+        const filteredChains = chains.filter((chain) => {
+          const passesChainsConfigFilter = configChainIds
+            ? isItemAllowed(chain.id, configChainIds)
+            : true
+          // If the integrator uses external wallet management and has not opted in for partial wallet management,
+          // restrict the displayed chains to those compatible with external wallet management.
+          // This ensures users only see chains for which they can sign transactions.
+          const passesWalletConfigFilter = isFromKey
+            ? !useExternalWalletProvidersOnly ||
+              externalChainTypes.includes(chain.chainType)
+            : true
+          return passesChainsConfigFilter && passesWalletConfigFilter
+        })
         const chainOrder = storeRef.current?.getState().initializeChains(
           filteredChains.map((chain) => chain.id),
           key
@@ -49,7 +65,14 @@ export function ChainOrderStoreProvider({
         }
       })
     }
-  }, [chains, configChains, getFieldValues, setFieldValue])
+  }, [
+    chains,
+    chainsConfig,
+    externalChainTypes,
+    getFieldValues,
+    setFieldValue,
+    useExternalWalletProvidersOnly,
+  ])
 
   return (
     <ChainOrderStoreContext.Provider value={storeRef.current}>

package/src/types/widget.ts

@@ -108,6 +108,15 @@ export interface WidgetWalletConfig {
   walletConnect?: WalletConnectParameters
   coinbase?: CoinbaseWalletParameters
   metaMask?: MetaMaskParameters
+  /**
+   * Determines whether the widget should provide partial wallet management functionality.
+   *
+   * In partial mode, external wallet management will be used for "opt-out" providers,
+   * while the internal management is applied for any remaining providers that do not opt out.
+   * This allows a flexible balance between the integrator’s custom wallet menu and the widget’s native wallet menu.
+   * @default false
+   */
+  usePartialWalletManagement?: boolean
 }
 
 export interface WidgetSDKConfig

package/dist/esm/providers/WalletProvider/useHasExternalWalletProvider.d.ts

@@ -1,7 +0,0 @@
-import { ChainType } from '@lifi/sdk';
-interface ExternalWalletProvider {
-    hasExternalProvider: boolean;
-    availableChainTypes: ChainType[];
-}
-export declare function useHasExternalWalletProvider(): ExternalWalletProvider;
-export {};

package/dist/esm/providers/WalletProvider/useHasExternalWalletProvider.js

@@ -1,28 +0,0 @@
-import { ChainType } from '@lifi/sdk';
-import { useContext, useMemo } from 'react';
-import { EVMExternalContext } from './EVMExternalContext.js';
-import { SVMExternalContext } from './SVMExternalContext.js';
-import { UTXOExternalContext } from './UTXOExternalContext.js';
-export function useHasExternalWalletProvider() {
-    const hasExternalEVMContext = useContext(EVMExternalContext);
-    const hasExternalSVMContext = useContext(SVMExternalContext);
-    const hasExternalUTXOContext = useContext(UTXOExternalContext);
-    const providers = useMemo(() => {
-        const providers = [];
-        if (hasExternalEVMContext) {
-            providers.push(ChainType.EVM);
-        }
-        if (hasExternalSVMContext) {
-            providers.push(ChainType.SVM);
-        }
-        if (hasExternalUTXOContext) {
-            providers.push(ChainType.UTXO);
-        }
-        return providers;
-    }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext]);
-    return {
-        hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
-        availableChainTypes: providers,
-    };
-}
-//# sourceMappingURL=useHasExternalWalletProvider.js.map

package/dist/esm/providers/WalletProvider/useHasExternalWalletProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHasExternalWalletProvider.js","sourceRoot":"","sources":["../../../../src/providers/WalletProvider/useHasExternalWalletProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAO9D,MAAM,UAAU,4BAA4B;IAC1C,MAAM,qBAAqB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC5D,MAAM,qBAAqB,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC5D,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAE9D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAgB,EAAE,CAAA;QACjC,IAAI,qBAAqB,EAAE,CAAC;YAC1B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QAC/B,CAAC;QACD,IAAI,qBAAqB,EAAE,CAAC;YAC1B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;QAC/B,CAAC;QACD,IAAI,sBAAsB,EAAE,CAAC;YAC3B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QAChC,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,sBAAsB,CAAC,CAAC,CAAA;IAE1E,OAAO;QACL,mBAAmB,EACjB,qBAAqB,IAAI,qBAAqB,IAAI,sBAAsB;QAC1E,mBAAmB,EAAE,SAAS;KAC/B,CAAA;AACH,CAAC"}

package/src/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -1,36 +0,0 @@
-import { ChainType } from '@lifi/sdk'
-import { useContext, useMemo } from 'react'
-import { EVMExternalContext } from './EVMExternalContext.js'
-import { SVMExternalContext } from './SVMExternalContext.js'
-import { UTXOExternalContext } from './UTXOExternalContext.js'
-
-interface ExternalWalletProvider {
-  hasExternalProvider: boolean
-  availableChainTypes: ChainType[]
-}
-
-export function useHasExternalWalletProvider(): ExternalWalletProvider {
-  const hasExternalEVMContext = useContext(EVMExternalContext)
-  const hasExternalSVMContext = useContext(SVMExternalContext)
-  const hasExternalUTXOContext = useContext(UTXOExternalContext)
-
-  const providers = useMemo(() => {
-    const providers: ChainType[] = []
-    if (hasExternalEVMContext) {
-      providers.push(ChainType.EVM)
-    }
-    if (hasExternalSVMContext) {
-      providers.push(ChainType.SVM)
-    }
-    if (hasExternalUTXOContext) {
-      providers.push(ChainType.UTXO)
-    }
-    return providers
-  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext])
-
-  return {
-    hasExternalProvider:
-      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
-    availableChainTypes: providers,
-  }
-}