@lifi/widget 3.8.2 → 3.10.0

package/src/i18n/uk.json

@@ -16,10 +16,10 @@
     "bridgeReview": "Переглянути бридж",
     "buy": "Придбати",
     "cancel": "Скасувати",
-    "changeWallet": "Змінити гаманець",
     "checkoutReview": "Перегляд покупки",
     "close": "Закрити",
     "confirm": "Підтвердити",
+    "connectAnotherWallet": "Під'єднати інший гаманець",
     "connectWallet": "Під'єднати гаманець",
     "contactSupport": "Служба підтримки",
     "continue": "Продовжити",
@@ -142,6 +142,7 @@
       "signatureRejected": "Для завершення транзакції потрібен ваш підпис. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}} залишаються у вашому гаманці.",
       "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/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/BookmarksPage.tsx

@@ -58,6 +58,7 @@ export const BookmarksPage = () => {
   const handleBookmarkSelected = (bookmark: Bookmark) => {
     setFieldValue('toAddress', bookmark.address, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark(bookmark)
     setSendToWallet(true)

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -40,6 +40,7 @@ export const ConfirmAddressSheet = forwardRef<
     if (validatedBookmark) {
       setFieldValue('toAddress', validatedBookmark.address, {
         isTouched: true,
+        isDirty: true,
       })
       onConfirm?.(validatedBookmark)
       setSendToWallet(true)

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'
@@ -47,6 +47,7 @@ export const ConnectedWalletsPage = () => {
   const handleWalletSelected = (account: Account) => {
     setFieldValue('toAddress', account.address!, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark({
       name: account.connector?.name,
@@ -138,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'
@@ -60,6 +60,7 @@ export const RecentWalletsPage = () => {
     addRecentWallet(recentWallet)
     setFieldValue('toAddress', recentWallet.address, {
       isTouched: true,
+      isDirty: true,
     })
     setSelectedBookmark(recentWallet)
     setSendToWallet(true)
@@ -174,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/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -43,7 +43,10 @@ export const SendToConfiguredWalletPage = () => {
 
   const handleCuratedSelected = (toAddress: ToAddress) => {
     setSelectedBookmark(toAddress)
-    setFieldValue('toAddress', toAddress.address, { isTouched: true })
+    setFieldValue('toAddress', toAddress.address, {
+      isTouched: true,
+      isDirty: true,
+    })
     navigateBack()
   }
 

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/stores/form/createFormStore.ts

@@ -102,6 +102,8 @@ export const createFormStore = (defaultValues?: DefaultValues) =>
       },
       isTouched: (fieldName: FormFieldNames) =>
         !!get().userValues[fieldName]?.isTouched,
+      isDirty: (fieldName: FormFieldNames) =>
+        !!get().userValues[fieldName]?.isDirty,
       setAsTouched: (fieldName: FormFieldNames) => {
         const userValues = {
           ...get().userValues,

package/src/stores/form/types.ts

@@ -70,6 +70,7 @@ export interface FormActions {
   setDefaultValues: (formValues: DefaultValues) => void
   setUserAndDefaultValues: (formValues: Partial<DefaultValues>) => void
   isTouched: (fieldName: FormFieldNames) => boolean
+  isDirty: (fieldName: FormFieldNames) => boolean
   setAsTouched: (fieldName: FormFieldNames) => void
   resetField: (fieldName: FormFieldNames, resetOptions?: ResetOptions) => void
   setFieldValue: (

package/src/stores/form/useFieldActions.ts

@@ -18,6 +18,7 @@ export const useFieldActions = () => {
     (store) => ({
       getFieldValues: store.getFieldValues,
       isTouched: store.isTouched,
+      isDirty: store.isDirty,
       resetField: store.resetField,
       setAsTouched: store.setAsTouched,
       setDefaultValues: store.setDefaultValues,

package/src/stores/header/useHeaderStore.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useRef } from 'react'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { PersistStoreProps, PersistStoreProviderProps } from '../types.js'
+import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
 
 export const HeaderStoreContext = createContext<HeaderStore | null>(null)

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