chore: update reown example

examples/reown/package.json

@@ -13,7 +13,7 @@
     "@lifi/wallet-management": "^3.22.5",
     "@lifi/widget": "^3.40.6",
     "@mui/material": "^7.3.6",
-    "@reown/appkit": ">=1.8.15",
+    "@reown/appkit": ">=1.8.17",
     "@reown/appkit-adapter-bitcoin": "^1.8.17",
     "@reown/appkit-adapter-solana": "^1.8.17",
     "@reown/appkit-adapter-wagmi": "^1.8.17",
@@ -26,7 +26,10 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "viem": "^2.45.1",
-    "wagmi": "^2.19.4"
+    "wagmi": "^3.3.2",
+    "@bigmi/client": "^0.7.0",
+    "@bigmi/core": "^0.7.0",
+    "@bigmi/react": "^0.7.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.13",

examples/reown/src/App.tsx

@@ -1,41 +1,57 @@
 import { ChainId, LiFiWidget } from '@lifi/widget'
+import { useAppKit } from '@reown/appkit/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WalletHeader } from './components/WalletHeader'
-import { WalletProvider } from './providers/WalletProvider'
+import { useCallback } from 'react'
+import { WalletHeader } from './components/WalletHeader.js'
+import { WalletProvider } from './providers/WalletProvider.js'
 
 const queryClient = new QueryClient()
 
-function App() {
+function Main() {
+  const { open } = useAppKit()
+  const handleOnConnect = useCallback(() => {
+    open?.()
+  }, [open])
+
   return (
     <main>
-      <QueryClientProvider client={queryClient}>
-        <WalletProvider>
-          {/* Rest of your app goes here */}
-          <WalletHeader />
-          <LiFiWidget
-            integrator="vite-example"
-            config={{
-              theme: {
-                container: {
-                  border: '1px solid rgb(234, 234, 234)',
-                  borderRadius: '16px',
-                },
-              },
-              sdkConfig: {
-                rpcUrls: {
-                  [ChainId.SOL]: [
-                    // Replace with your private Solana RPC
-                    'https://chaotic-restless-putty.solana-mainnet.quiknode.pro/',
-                    'https://dacey-pp61jd-fast-mainnet.helius-rpc.com/',
-                  ],
-                },
-              },
-            }}
-          />
-        </WalletProvider>
-      </QueryClientProvider>
+      {/* Rest of your app goes here */}
+      <WalletHeader />
+      <LiFiWidget
+        integrator="vite-example"
+        config={{
+          walletConfig: {
+            onConnect: handleOnConnect,
+          },
+          theme: {
+            container: {
+              border: '1px solid rgb(234, 234, 234)',
+              borderRadius: '16px',
+            },
+          },
+          sdkConfig: {
+            rpcUrls: {
+              [ChainId.SOL]: [
+                // Replace with your private Solana RPC
+                'https://chaotic-restless-putty.solana-mainnet.quiknode.pro/',
+                'https://dacey-pp61jd-fast-mainnet.helius-rpc.com/',
+              ],
+            },
+          },
+        }}
+      />
     </main>
   )
 }
 
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WalletProvider>
+        <Main />
+      </WalletProvider>
+    </QueryClientProvider>
+  )
+}
+
 export default App

examples/reown/src/providers/BitcoinProvider.tsx

@@ -0,0 +1,58 @@
+import type { Config } from '@bigmi/client'
+import { createConfig, reown } from '@bigmi/client'
+import { bitcoin, ChainId, createClient, http } from '@bigmi/core'
+import { BigmiProvider } from '@bigmi/react'
+import {
+  useAppKitAccount,
+  useAppKitProvider,
+  useWalletInfo,
+} from '@reown/appkit/react'
+import type { BitcoinConnector } from '@reown/appkit-adapter-bitcoin'
+import { type FC, type PropsWithChildren, useEffect } from 'react'
+
+const bigmiConfig = createConfig({
+  chains: [bitcoin],
+  client: ({ chain }) => createClient({ chain, transport: http() }),
+  multiInjectedProviderDiscovery: false,
+  ssr: true,
+}) as Config
+
+const BitcoinReownHandler: FC<PropsWithChildren> = ({ children }) => {
+  const { isConnected, address } = useAppKitAccount({ namespace: 'bip122' })
+  const { walletProvider } = useAppKitProvider<BitcoinConnector>('bip122')
+  const { walletInfo } = useWalletInfo('bip122')
+
+  useEffect(() => {
+    if (!isConnected || !walletProvider || !address) {
+      bigmiConfig._internal.connectors.setState([])
+      bigmiConfig.setState((state) => ({ ...state, connections: new Map() }))
+      return
+    }
+
+    const connector = bigmiConfig._internal.connectors.setup(
+      reown({
+        connector: walletProvider,
+        walletInfo,
+        address,
+      })
+    )
+
+    bigmiConfig._internal.connectors.setState([connector])
+
+    connector.getAccounts().then((accounts) => {
+      bigmiConfig._internal.events.connect({
+        accounts,
+        chainId: ChainId.BITCOIN_MAINNET,
+        uid: connector.uid,
+      })
+    })
+  }, [isConnected, walletProvider, address, walletInfo])
+
+  return <>{children}</>
+}
+
+export const BitcoinProvider: FC<PropsWithChildren> = ({ children }) => (
+  <BigmiProvider config={bigmiConfig} reconnectOnMount={true}>
+    <BitcoinReownHandler>{children}</BitcoinReownHandler>
+  </BigmiProvider>
+)

examples/reown/src/providers/SolanaProvider.tsx

@@ -1,31 +1,20 @@
 import { useAppKitAccount, useWalletInfo } from '@reown/appkit/react'
-import type { Adapter, WalletName } from '@solana/wallet-adapter-base'
+import type { WalletName } from '@solana/wallet-adapter-base'
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
 import {
   ConnectionProvider,
   useWallet,
   WalletProvider,
 } from '@solana/wallet-adapter-react'
 import { clusterApiUrl } from '@solana/web3.js'
-
 import { type FC, type PropsWithChildren, useEffect } from 'react'
 
 const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet)
-/**
- * Can be empty because wallets from Reown will be used
- */
-const wallets: Adapter[] = []
-
-export const SolanaConnectedWalletKey = 'li.fi-widget-recent-wallet'
 
 export const SolanaProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <ConnectionProvider endpoint={endpoint}>
-      <WalletProvider
-        wallets={wallets}
-        localStorageKey={SolanaConnectedWalletKey}
-        autoConnect
-      >
+      <WalletProvider wallets={[]} autoConnect={false}>
         <SolanaReownHandler />
         {children}
       </WalletProvider>
@@ -34,24 +23,55 @@ export const SolanaProvider: FC<PropsWithChildren> = ({ children }) => {
 }
 
 export const SolanaReownHandler: FC = () => {
-  const { isConnected } = useAppKitAccount({ namespace: 'solana' })
-  const { walletInfo } = useWalletInfo('solana')
+  const { isConnected: isAppKitConnected } = useAppKitAccount({
+    namespace: 'solana',
+  })
+  const { walletInfo: appKitWalletInfo } = useWalletInfo('solana')
 
-  const { select, wallet, disconnect, disconnecting } = useWallet()
+  const {
+    select,
+    wallet: adapterWallet,
+    disconnect,
+    disconnecting,
+    connected: isAdapterConnected,
+    connect,
+    connecting,
+  } = useWallet()
 
   useEffect(() => {
-    if (isConnected && !wallet && walletInfo?.name) {
-      const walletName =
-        walletInfo?.type === 'WALLET_CONNECT'
-          ? 'WalletConnect'
-          : walletInfo?.name
-      select(walletName as WalletName)
+    const walletName =
+      appKitWalletInfo?.type === 'WALLET_CONNECT'
+        ? 'WalletConnect'
+        : appKitWalletInfo?.name
+
+    const shouldConnect =
+      isAppKitConnected && !isAdapterConnected && !connecting && walletName
+    const shouldDisconnect =
+      !isAppKitConnected && isAdapterConnected && !disconnecting
+
+    if (shouldConnect) {
+      const isWalletSelected = adapterWallet?.adapter.name === walletName
+      if (isWalletSelected) {
+        connect().catch(console.error)
+      } else {
+        select(walletName as WalletName)
+      }
     }
 
-    if (!isConnected && wallet && !disconnecting) {
+    if (shouldDisconnect) {
       disconnect()
     }
-  }, [select, isConnected, walletInfo, wallet, disconnect, disconnecting])
+  }, [
+    isAppKitConnected,
+    isAdapterConnected,
+    connecting,
+    disconnecting,
+    appKitWalletInfo,
+    adapterWallet,
+    select,
+    connect,
+    disconnect,
+  ])
 
   return null
 }

examples/reown/src/providers/WalletProvider.tsx

@@ -13,8 +13,9 @@ import type { AppKitNetwork } from '@reown/appkit-common'
 
 import { useEffect, useRef } from 'react'
 import { WagmiProvider } from 'wagmi'
-import { metadata, projectId } from '../config/appkit'
-import { chainToAppKitNetworks, getChainImagesConfig } from '../utils/appkit'
+import { metadata, projectId } from '../config/appkit.js'
+import { chainToAppKitNetworks, getChainImagesConfig } from '../utils/appkit.js'
+import { BitcoinProvider } from './BitcoinProvider.js'
 import { SolanaProvider } from './SolanaProvider'
 
 export function ReownEVMWalletProvider({
@@ -52,9 +53,9 @@ export function ReownEVMWalletProvider({
     })
 
     const appKit = createAppKit({
+      projectId,
       adapters: [wagmiAdapter, solanaWeb3JsAdapter, bitcoinAdapter],
       networks,
-      projectId,
       metadata,
       chainImages,
       themeMode: 'light',
@@ -125,7 +126,9 @@ export function WalletProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <ReownEVMWalletProvider chains={chains}>
-      <SolanaProvider>{children}</SolanaProvider>
+      <SolanaProvider>
+        <BitcoinProvider>{children}</BitcoinProvider>
+      </SolanaProvider>
     </ReownEVMWalletProvider>
   )
 }