@meshconnect/uwc-react 0.2.0

package/src/hooks/useSignMessage.ts

@@ -0,0 +1,69 @@
+import { useContext, useCallback, useState } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type { UseSignMessageReturn, WalletError } from '@meshconnect/uwc-types'
+
+/**
+ * Hook for signing messages with the connected wallet
+ * @returns Object containing signMessage function, loading state, and last signature
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { signMessage, isLoading, signature } = useSignMessage()
+ *
+ * const handleSign = async () => {
+ *   try {
+ *     const sig = await signMessage('Hello World')
+ *     console.log('Signature:', sig)
+ *     // signature state will also be updated with the result
+ *   } catch (error) {
+ *     console.error('Failed to sign:', error)
+ *   }
+ * }
+ * ```
+ */
+export function useSignMessage(): UseSignMessageReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useSignMessage must be used within a ConnectionProvider')
+  }
+
+  const { connector, session } = context
+  const [isLoading, setIsLoading] = useState(false)
+  const [signature, setSignature] = useState<string | undefined>()
+  const [error, setError] = useState<WalletError | undefined>()
+
+  const signMessage = useCallback(
+    async (message: string): Promise<string> => {
+      if (!session.activeAddress) {
+        throw new Error('No wallet connected')
+      }
+
+      if (!message) {
+        throw new Error('Message is required')
+      }
+
+      setIsLoading(true)
+      setError(undefined)
+      try {
+        const sig = await connector.signMessage(message)
+        setSignature(sig)
+        return sig
+      } catch (err) {
+        const walletError = err as WalletError
+        setError(walletError)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [connector, session.activeAddress]
+  )
+
+  return {
+    signMessage,
+    isLoading,
+    signature,
+    error
+  }
+}

package/src/hooks/useSwitchNetwork.ts

@@ -0,0 +1,84 @@
+import { useContext, useCallback, useState, useEffect } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type {
+  NetworkId,
+  UseSwitchNetworkReturn,
+  WalletError
+} from '@meshconnect/uwc-types'
+
+/**
+ * Hook for switching networks on the connected wallet
+ * @returns Network switching function and loading states
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { switchNetwork, isLoading, isWaitingForUserApproval } = useSwitchNetwork()
+ *
+ * const handleSwitch = async () => {
+ *   try {
+ *     await switchNetwork('eip155:8453') // Switch to Base
+ *   } catch (error) {
+ *     console.error('Network switch failed:', error)
+ *   }
+ * }
+ *
+ * // Show loading UI
+ * if (isWaitingForUserApproval) {
+ *   return <div>Please approve in your wallet...</div>
+ * }
+ * if (isLoading) {
+ *   return <div>Switching network...</div>
+ * }
+ * ```
+ */
+export function useSwitchNetwork(): UseSwitchNetworkReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useSwitchNetwork must be used within a ConnectionProvider')
+  }
+
+  const { connector } = context
+  const [isLoading, setIsLoading] = useState(false)
+  const [isWaitingForUserApproval, setIsWaitingForUserApproval] =
+    useState(false)
+  const [error, setError] = useState<WalletError | undefined>()
+
+  // Subscribe to loading state changes from the core
+  useEffect(() => {
+    const updateLoadingState = () => {
+      const state = connector.getNetworkSwitchLoadingState()
+      setIsLoading(state.isLoading)
+      setIsWaitingForUserApproval(state.isWaitingForUserApproval)
+    }
+
+    // Check initial state
+    updateLoadingState()
+
+    // Subscribe to changes
+    const unsubscribe = connector.subscribe(updateLoadingState)
+
+    return unsubscribe
+  }, [connector])
+
+  const switchNetwork = useCallback(
+    async (networkId: NetworkId) => {
+      setError(undefined)
+      try {
+        await connector.switchNetwork(networkId)
+      } catch (err) {
+        const walletError = err as WalletError
+        setError(walletError)
+        throw err
+      }
+    },
+    [connector]
+  )
+
+  return {
+    switchNetwork,
+    isLoading,
+    isWaitingForUserApproval,
+    error
+  }
+}

package/src/hooks/useTransaction.ts

@@ -0,0 +1,79 @@
+import { useContext, useCallback, useState } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type {
+  TransactionRequest,
+  TransactionResult,
+  UseTransactionReturn,
+  WalletError
+} from '@meshconnect/uwc-types'
+
+/**
+ * Hook for sending transactions with the connected wallet
+ * @returns Object containing sendTransaction function, loading state, and transaction result
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { sendTransaction, isLoading, transactionResult } = useTransaction()
+ *
+ * const handleSend = async () => {
+ *   try {
+ *     const result = await sendTransaction({
+ *       to: '0x...',
+ *       amount: BigInt('1000000000000000000'),
+ *       from: session.activeAddress
+ *     })
+ *     console.log('Transaction hash:', result.hash)
+ *   } catch (error) {
+ *     console.error('Transaction failed:', error)
+ *   }
+ * }
+ * ```
+ */
+export function useTransaction(): UseTransactionReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useTransaction must be used within a ConnectionProvider')
+  }
+
+  const { connector, session } = context
+  const [isLoading, setIsLoading] = useState(false)
+  const [transactionResult, setTransactionResult] = useState<
+    TransactionResult | undefined
+  >()
+  const [error, setError] = useState<WalletError | undefined>()
+
+  const sendTransaction = useCallback(
+    async (request: TransactionRequest): Promise<TransactionResult> => {
+      if (!session.activeAddress) {
+        throw new Error('No wallet connected')
+      }
+
+      if (!request) {
+        throw new Error('Transaction request is required')
+      }
+
+      setIsLoading(true)
+      setError(undefined)
+      try {
+        const result = await connector.sendTransaction(request)
+        setTransactionResult(result)
+        return result
+      } catch (err) {
+        const walletError = err as WalletError
+        setError(walletError)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [connector, session.activeAddress]
+  )
+
+  return {
+    sendTransaction,
+    isLoading,
+    transactionResult,
+    error
+  }
+}

package/src/hooks/useWallets.ts

@@ -0,0 +1,26 @@
+import { useContext } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type { WalletMetadata } from '@meshconnect/uwc-types'
+
+/**
+ * Hook for accessing the list of configured wallets
+ * @returns Array of wallet metadata including names, IDs, and supported networks
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const wallets = useWallets()
+ *
+ * wallets.forEach(wallet => {
+ *   console.log(`${wallet.name}: ${wallet.id}`)
+ * })
+ * ```
+ */
+export function useWallets(): WalletMetadata[] {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useWallets must be used within a ConnectionProvider')
+  }
+
+  return context.wallets
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks'
+export * from './providers'

package/src/providers/ConnectionProvider.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useEffect, useState, useRef } from 'react'
+import { UniversalWalletConnector } from '@meshconnect/uwc-core'
+import type {
+  Session,
+  Network,
+  WalletMetadata,
+  WalletConnectConfig
+} from '@meshconnect/uwc-types'
+
+interface ConnectionContextValue {
+  connector: UniversalWalletConnector
+  session: Session
+  wallets: WalletMetadata[]
+  networks: Network[]
+  isReady: boolean
+}
+
+const ConnectionContext = createContext<ConnectionContextValue | null>(null)
+
+interface ConnectionProviderProps {
+  children: React.ReactNode
+  networks: Network[]
+  wallets: WalletMetadata[]
+  usingIntegratedBrowser?: boolean
+  walletConnectConfig?: WalletConnectConfig
+}
+
+export function ConnectionProvider({
+  children,
+  networks,
+  wallets,
+  usingIntegratedBrowser = false,
+  walletConnectConfig
+}: ConnectionProviderProps) {
+  // Create the connector instance only once using useRef
+  const connectorRef = useRef<UniversalWalletConnector | null>(null)
+
+  if (!connectorRef.current) {
+    connectorRef.current = new UniversalWalletConnector(
+      networks,
+      wallets,
+      usingIntegratedBrowser,
+      walletConnectConfig
+    )
+  }
+
+  const connector = connectorRef.current
+
+  const [session, setSession] = useState<Session>(() => connector.getSession())
+  const [isReady, setIsReady] = useState(() => connector.isReady())
+
+  useEffect(() => {
+    const unsubscribe = connector.subscribe(() => {
+      setSession(connector.getSession())
+      setIsReady(connector.isReady())
+    })
+
+    return unsubscribe
+  }, [connector])
+
+  const value: ConnectionContextValue = {
+    connector,
+    session,
+    wallets: connector.getWallets(),
+    networks: connector.getNetworks(),
+    isReady
+  }
+
+  return (
+    <ConnectionContext.Provider value={value}>
+      {children}
+    </ConnectionContext.Provider>
+  )
+}
+
+export { ConnectionContext }

package/src/providers/index.ts

@@ -0,0 +1 @@
+export * from './ConnectionProvider'