@openocean.finance/widget 1.0.0

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -0,0 +1,259 @@
+import type { ExchangeRateUpdateParams } from '@lifi/sdk'
+import { Delete } from '@mui/icons-material'
+import { Box, Button, Tooltip } from '@mui/material'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { getStepList } from '../../components/Step/StepList.js'
+import { TransactionDetails } from '../../components/TransactionDetails.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useRouteExecution } from '../../hooks/useRouteExecution.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { WidgetEvent } from '../../types/events.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'
+import { RouteTracker } from './RouteTracker.js'
+import { StartTransactionButton } from './StartTransactionButton.js'
+import { StatusBottomSheet } from './StatusBottomSheet.js'
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import {
+  calculateValueLossPercentage,
+  getTokenValueLossThreshold,
+} from './utils.js'
+
+export const TransactionPage: React.FC = () => {
+  const { t } = useTranslation()
+  const { setFieldValue } = useFieldActions()
+  const emitter = useWidgetEvents()
+  const { navigateBack } = useNavigateBack()
+  const { subvariant, subvariantOptions, contractSecondaryComponent } =
+    useWidgetConfig()
+  const { state }: any = useLocation()
+  const stateRouteId = state?.routeId
+  const [routeId, setRouteId] = useState<string>(stateRouteId)
+  const [routeRefreshing, setRouteRefreshing] = useState(false)
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
+  const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
+
+  const onAcceptExchangeRateUpdate = (
+    resolver: (value: boolean) => void,
+    data: ExchangeRateUpdateParams
+  ) => {
+    exchangeRateBottomSheetRef.current?.open(resolver, data)
+  }
+
+  const { route, status, executeRoute, restartRoute, deleteRoute } =
+    useRouteExecution({
+      routeId: routeId,
+      onAcceptExchangeRateUpdate,
+    })
+
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route?.toChainId)
+
+  const getHeaderTitle = () => {
+    if (subvariant === 'custom') {
+      return t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
+    }
+    if (route) {
+      const transactionType =
+        route.fromChainId === route.toChainId ? 'swap' : 'bridge'
+      return status === RouteExecutionStatus.Idle
+        ? t(`Confirm ${transactionType}`)
+        : t(`header.${transactionType}`)
+    }
+
+    return t('header.exchange')
+  }
+
+  const headerAction = useMemo(
+    () =>
+      status === RouteExecutionStatus.Idle ? (
+        <RouteTracker
+          observableRouteId={stateRouteId}
+          onChange={setRouteId}
+          onFetching={setRouteRefreshing}
+        />
+      ) : undefined,
+    [stateRouteId, status]
+  )
+
+  useHeader(getHeaderTitle(), headerAction)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
+  useEffect(() => {
+    if (status === RouteExecutionStatus.Idle) {
+      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)
+    }
+  }, [])
+
+  if (!route) {
+    return null
+  }
+
+  const handleExecuteRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD
+        ),
+      })
+    }
+    tokenValueBottomSheetRef.current?.close()
+    executeRoute()
+    setFieldValue('fromAmount', '')
+    if (subvariant === 'custom') {
+      setFieldValue('fromToken', '')
+      setFieldValue('toToken', '')
+    }
+  }
+
+  const handleStartClick = async () => {
+    if (status === RouteExecutionStatus.Idle) {
+      if (
+        toAddress &&
+        !hasActivity &&
+        !isLoadingAddressActivity &&
+        isActivityAddressFetched
+      ) {
+        confirmToAddressSheetRef.current?.open()
+        return
+      }
+
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD
+      )
+      if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
+        tokenValueBottomSheetRef.current?.open()
+      } else {
+        handleExecuteRoute()
+      }
+    }
+    if (status === RouteExecutionStatus.Failed) {
+      restartRoute()
+    }
+  }
+
+  const handleRemoveRoute = () => {
+    navigateBack()
+    deleteRoute()
+  }
+
+  const getButtonText = (): string => {
+    switch (status) {
+      case RouteExecutionStatus.Idle:
+        switch (subvariant) {
+          case 'custom':
+            return subvariantOptions?.custom === 'deposit'
+              ? t('button.deposit')
+              : t('button.buy')
+          case 'refuel':
+            return t('button.startBridging')
+          default: {
+            const transactionType =
+              route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'
+            return t(`button.start${transactionType}`)
+          }
+        }
+      case RouteExecutionStatus.Failed:
+        return t('button.tryAgain')
+      default:
+        return ''
+    }
+  }
+
+  return (
+    <PageContainer bottomGutters>
+      {getStepList(route, subvariant)}
+      {subvariant === 'custom' && contractSecondaryComponent ? (
+        <ContractComponent sx={{ marginTop: 2 }}>
+          {contractSecondaryComponent}
+        </ContractComponent>
+      ) : null}
+      <TransactionDetails route={route} sx={{ marginTop: 2 }} />
+      {status === RouteExecutionStatus.Idle ||
+      status === RouteExecutionStatus.Failed ? (
+        <>
+          <WarningMessages mt={2} route={route} allowInteraction />
+          <Box
+            sx={{
+              mt: 2,
+              display: 'flex',
+            }}
+          >
+            <StartTransactionButton
+              text={getButtonText()}
+              onClick={handleStartClick}
+              route={route}
+              loading={routeRefreshing || isLoadingAddressActivity}
+            />
+            {status === RouteExecutionStatus.Failed ? (
+              <Tooltip
+                title={t('button.removeTransaction')}
+                placement="bottom-end"
+              >
+                <Button
+                  onClick={handleRemoveRoute}
+                  sx={{
+                    minWidth: 48,
+                    marginLeft: 1,
+                  }}
+                >
+                  <Delete />
+                </Button>
+              </Tooltip>
+            ) : null}
+          </Box>
+        </>
+      ) : null}
+      {status ? <StatusBottomSheet status={status} route={route} /> : null}
+      {subvariant !== 'custom' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={handleExecuteRoute}
+        />
+      ) : null}
+      <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
+      <ConfirmToAddressSheet
+        ref={confirmToAddressSheetRef}
+        onContinue={handleExecuteRoute}
+        toAddress={toAddress!}
+        toChainId={route.toChainId!}
+      />
+    </PageContainer>
+  )
+}

package/src/pages/TransactionPage/types.ts

@@ -0,0 +1,7 @@
+import type { Route } from '@lifi/sdk'
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton/types.js'
+
+export interface StartTransactionButtonProps
+  extends BaseTransactionButtonProps {
+  route?: Route
+}

package/src/pages/TransactionPage/utils.ts

@@ -0,0 +1,25 @@
+export const calculateValueLossPercentage = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number
+) => {
+  return Number.parseFloat(
+    (
+      (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
+      100
+    ).toFixed(2)
+  )
+}
+
+export const getTokenValueLossThreshold = (
+  fromAmountUSD: number,
+  toAmountUSD: number,
+  gasCostUSD: number,
+  feeCostUSD: number
+) => {
+  if (!fromAmountUSD || !toAmountUSD) {
+    return false
+  }
+  return toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) < 0.9
+}

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -0,0 +1,75 @@
+import type { i18n } from 'i18next'
+import { createInstance } from 'i18next'
+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 { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.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 type { LanguageKey, LanguageTranslationResources } from './types.js'
+
+export const I18nProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const { languageResources, languages } = useWidgetConfig()
+  const { language } = useSettings(['language'])
+
+  const i18n = useMemo(() => {
+    let resources = (Object.keys(supportedLanguages) as LanguageKey[])
+      .filter((lng) => isItemAllowed(lng, languages))
+      .reduce((resources, lng) => {
+        resources[lng] = {
+          translation: languageResources?.[lng]
+            ? (deepMerge(
+                supportedLanguages[lng],
+                languageResources[lng]
+              ) as any)
+            : supportedLanguages[lng],
+        }
+        return resources
+      }, {} as LanguageTranslationResources)
+
+    if (languageResources) {
+      resources = Object.keys(languageResources).reduce((resources, lng) => {
+        if (!resources[lng]) {
+          resources[lng] = {
+            translation: languageResources[lng as LanguageKey]!,
+          }
+        }
+        return resources
+      }, resources)
+    }
+
+    const i18n = createInstance({
+      lng: languages?.default || language,
+      fallbackLng: resources.en
+        ? 'en'
+        : languages?.default ||
+          languages?.allow?.[0] ||
+          Object.keys(resources)?.[0],
+      lowerCaseLng: true,
+      interpolation: {
+        escapeValue: false,
+      },
+      resources,
+      detection: {
+        caches: [],
+      },
+      returnEmptyString: false,
+    })
+
+    i18n.init()
+
+    i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)
+    i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)
+    i18n.services.formatter?.addCached('percent', percentFormatter)
+
+    return i18n
+  }, [language, languageResources, languages])
+
+  return <I18nextProvider i18n={i18n as i18n}>{children}</I18nextProvider>
+}

package/src/providers/I18nProvider/types.ts

@@ -0,0 +1,27 @@
+import type * as languages from '../../i18n/index.js'
+
+export type PartialResource<T> = T extends object
+  ? {
+      [P in keyof T]?: PartialResource<T[P]>
+    }
+  : T
+
+export type LanguageKey = keyof typeof languages
+
+export type LanguageResource = typeof languages.en
+
+export type LanguageResources =
+  | {
+      [K in LanguageKey]?: PartialResource<LanguageResource>
+    }
+  | {
+      [language: string]: PartialResource<LanguageResource>
+    }
+
+export type LanguageTranslationResource = {
+  [N in 'translation']: PartialResource<LanguageResource>
+}
+
+export type LanguageTranslationResources = {
+  [language: string]: LanguageTranslationResource
+}

package/src/providers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,42 @@
+import type { PaletteMode } from '@mui/material'
+import { ThemeProvider as MuiThemeProvider, useMediaQuery } from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { useAppearance } from '../../stores/settings/useAppearance.js'
+import { createTheme } from '../../themes/createTheme.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+
+export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const { appearance: colorSchemeMode, theme: themeConfig } = useWidgetConfig()
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const [appearance, setAppearance] = useAppearance()
+  const [mode, setMode] = useState<PaletteMode>(
+    (colorSchemeMode ?? appearance === 'auto')
+      ? prefersDarkMode
+        ? 'dark'
+        : 'light'
+      : appearance
+  )
+
+  useEffect(() => {
+    if (appearance === 'auto') {
+      setMode(prefersDarkMode ? 'dark' : 'light')
+    } else {
+      setMode(appearance)
+    }
+  }, [appearance, prefersDarkMode])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setAppearance is stable
+  useEffect(() => {
+    if (colorSchemeMode) {
+      setAppearance(colorSchemeMode)
+    }
+  }, [colorSchemeMode])
+
+  const theme = useMemo(
+    () => createTheme(mode, themeConfig),
+    [mode, themeConfig]
+  )
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+}

package/src/providers/WalletProvider/EVMBaseProvider.tsx

@@ -0,0 +1,38 @@
+import type { DefaultWagmiConfigResult } from '@openocean.finance/wallet-management'
+import {
+  createDefaultWagmiConfig,
+  useSyncWagmiConfig,
+} from '@openocean.finance/wallet-management'
+import { type FC, type PropsWithChildren, useRef } from 'react'
+import { WagmiProvider } from 'wagmi'
+import { defaultCoinbaseConfig } from '../../config/coinbase.js'
+import { defaultMetaMaskConfig } from '../../config/metaMask.js'
+import { defaultWalletConnectConfig } from '../../config/walletConnect.js'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+
+export const EVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { walletConfig } = useWidgetConfig()
+  const { chains } = useAvailableChains()
+  const wagmi = useRef<DefaultWagmiConfigResult>(null)
+
+  if (!wagmi.current) {
+    wagmi.current = createDefaultWagmiConfig({
+      coinbase: walletConfig?.coinbase ?? defaultCoinbaseConfig,
+      metaMask: walletConfig?.metaMask ?? defaultMetaMaskConfig,
+      walletConnect: walletConfig?.walletConnect ?? defaultWalletConnectConfig,
+      wagmiConfig: {
+        ssr: true,
+      },
+      lazy: true,
+    })
+  }
+
+  useSyncWagmiConfig(wagmi.current.config, wagmi.current.connectors, chains)
+
+  return (
+    <WagmiProvider config={wagmi.current.config} reconnectOnMount={false}>
+      {children}
+    </WagmiProvider>
+  )
+}

package/src/providers/WalletProvider/EVMExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const EVMExternalContext = createContext<boolean>(false)

package/src/providers/WalletProvider/EVMProvider.tsx

@@ -0,0 +1,24 @@
+import { ChainType } from '@lifi/sdk'
+import { type FC, type PropsWithChildren, useContext } from 'react'
+import { WagmiContext } from 'wagmi'
+import { isItemAllowed } from '../../utils/item.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { EVMBaseProvider } from './EVMBaseProvider.js'
+import { EVMExternalContext } from './EVMExternalContext.js'
+
+export function useInWagmiContext(): boolean {
+  const { chains } = useWidgetConfig()
+  const context = useContext(WagmiContext)
+  return Boolean(context) && isItemAllowed(ChainType.EVM, chains?.types)
+}
+
+export const EVMProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inWagmiContext = useInWagmiContext()
+  return inWagmiContext ? (
+    <EVMExternalContext.Provider value={inWagmiContext}>
+      {children}
+    </EVMExternalContext.Provider>
+  ) : (
+    <EVMBaseProvider>{children}</EVMBaseProvider>
+  )
+}

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -0,0 +1,67 @@
+import { getConnectorClient as getBigmiConnectorClient } from '@bigmi/client'
+import { useConfig as useBigmiConfig } from '@bigmi/react'
+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 { useEffect } from 'react'
+import { useConfig as useWagmiConfig } from 'wagmi'
+import {
+  getConnectorClient as getWagmiConnectorClient,
+  switchChain,
+} from 'wagmi/actions'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+
+export const SDKProviders = () => {
+  const { sdkConfig } = useWidgetConfig()
+  const { wallet } = useWallet()
+  const wagmiConfig = useWagmiConfig()
+  const bigmiConfig = useBigmiConfig()
+
+  useEffect(() => {
+    // Configure SDK Providers
+    const providers: SDKProvider[] = []
+    const hasConfiguredEVMProvider = sdkConfig?.providers?.find(
+      (provider) => provider.type === ChainType.EVM
+    )
+    const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.SVM
+    )
+    const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
+      (provider) => provider.type === ChainType.UTXO
+    )
+    if (!hasConfiguredEVMProvider) {
+      providers.push(
+        EVM({
+          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
+          switchChain: async (chainId: number) => {
+            const chain = await switchChain(wagmiConfig, { chainId })
+            return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id })
+          },
+        })
+      )
+    }
+    if (!hasConfiguredSVMProvider) {
+      providers.push(
+        Solana({
+          async getWalletAdapter() {
+            return wallet?.adapter as SignerWalletAdapter
+          },
+        })
+      )
+    }
+    if (!hasConfiguredUTXOProvider) {
+      providers.push(
+        UTXO({
+          getWalletClient: () => getBigmiConnectorClient(bigmiConfig),
+        })
+      )
+    }
+    if (sdkConfig?.providers?.length) {
+      providers.push(...sdkConfig.providers)
+    }
+    config.setProviders(providers)
+  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter])
+
+  return null
+}

package/src/providers/WalletProvider/SVMBaseProvider.tsx

@@ -0,0 +1,33 @@
+import type { Adapter } from '@solana/wallet-adapter-base'
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
+import {
+  ConnectionProvider,
+  WalletProvider,
+} from '@solana/wallet-adapter-react'
+import { clusterApiUrl } from '@solana/web3.js'
+import type { FC, PropsWithChildren } from 'react'
+
+const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet)
+/**
+ * Wallets that implement either of these standards will be available automatically.
+ *
+ *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
+ *     (https://github.com/solana-mobile/mobile-wallet-adapter)
+ *   - Solana Wallet Standard
+ *     (https://github.com/solana-labs/wallet-standard)
+ *
+ * If you wish to support a wallet that supports neither of those standards,
+ * instantiate its legacy wallet adapter here. Common legacy adapters can be found
+ * in the npm package `@solana/wallet-adapter-wallets`.
+ */
+const wallets: Adapter[] = []
+
+export const SVMBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        {children}
+      </WalletProvider>
+    </ConnectionProvider>
+  )
+}

package/src/providers/WalletProvider/SVMExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const SVMExternalContext = createContext<boolean>(false)

package/src/providers/WalletProvider/SVMProvider.tsx

@@ -0,0 +1,27 @@
+import { ChainType } from '@lifi/sdk'
+import { ConnectionContext } from '@solana/wallet-adapter-react'
+import { type FC, type PropsWithChildren, useContext } from 'react'
+import { isItemAllowed } from '../../utils/item.js'
+import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import { SVMBaseProvider } from './SVMBaseProvider.js'
+import { SVMExternalContext } from './SVMExternalContext.js'
+
+export function useInSolanaContext(): boolean {
+  const { chains } = useWidgetConfig()
+  const context = useContext(ConnectionContext)
+  return (
+    Boolean(context?.connection) && isItemAllowed(ChainType.SVM, chains?.types)
+  )
+}
+
+export const SVMProvider: FC<PropsWithChildren> = ({ children }) => {
+  const inSolanaContext = useInSolanaContext()
+
+  return inSolanaContext ? (
+    <SVMExternalContext.Provider value={inSolanaContext}>
+      {children}
+    </SVMExternalContext.Provider>
+  ) : (
+    <SVMBaseProvider>{children}</SVMBaseProvider>
+  )
+}

package/src/providers/WalletProvider/UTXOBaseProvider.tsx

@@ -0,0 +1,25 @@
+import { BigmiProvider, useReconnect } from '@bigmi/react'
+import type { DefaultWagmiConfigResult } from '@openocean.finance/wallet-management'
+import { createDefaultBigmiConfig } from '@openocean.finance/wallet-management'
+import { type FC, type PropsWithChildren, useRef } from 'react'
+
+export const UTXOBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+  const bigmi = useRef<DefaultWagmiConfigResult>(null)
+
+  if (!bigmi.current) {
+    bigmi.current = createDefaultBigmiConfig({
+      bigmiConfig: {
+        ssr: true,
+        multiInjectedProviderDiscovery: false,
+      },
+    })
+  }
+
+  useReconnect(bigmi.current.config)
+
+  return (
+    <BigmiProvider config={bigmi.current.config} reconnectOnMount={false}>
+      {children}
+    </BigmiProvider>
+  )
+}

package/src/providers/WalletProvider/UTXOExternalContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const UTXOExternalContext = createContext<boolean>(false)