@lifi/widget 3.9.0 → 3.10.0

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