@meshconnect/uwc-react 0.2.0

package/dist/hooks/useSwitchNetwork.d.ts

@@ -0,0 +1,28 @@
+import type { UseSwitchNetworkReturn } 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 declare function useSwitchNetwork(): UseSwitchNetworkReturn;
+//# sourceMappingURL=useSwitchNetwork.d.ts.map

package/dist/hooks/useSwitchNetwork.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwitchNetwork.d.ts","sourceRoot":"","sources":["../../src/hooks/useSwitchNetwork.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,sBAAsB,EAEvB,MAAM,wBAAwB,CAAA;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB,IAAI,sBAAsB,CAkDzD"}

package/dist/hooks/useSwitchNetwork.js

@@ -0,0 +1,68 @@
+import { useContext, useCallback, useState, useEffect } from 'react';
+import { ConnectionContext } from '../providers/ConnectionProvider';
+/**
+ * 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() {
+    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();
+    // 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) => {
+        setError(undefined);
+        try {
+            await connector.switchNetwork(networkId);
+        }
+        catch (err) {
+            const walletError = err;
+            setError(walletError);
+            throw err;
+        }
+    }, [connector]);
+    return {
+        switchNetwork,
+        isLoading,
+        isWaitingForUserApproval,
+        error
+    };
+}
+//# sourceMappingURL=useSwitchNetwork.js.map

package/dist/hooks/useSwitchNetwork.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwitchNetwork.js","sourceRoot":"","sources":["../../src/hooks/useSwitchNetwork.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAOnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;IAC9E,CAAC;IAED,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC3D,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAA2B,CAAA;IAE7D,mDAAmD;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,MAAM,KAAK,GAAG,SAAS,CAAC,4BAA4B,EAAE,CAAA;YACtD,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;YAC7B,2BAA2B,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;QAC7D,CAAC,CAAA;QAED,sBAAsB;QACtB,kBAAkB,EAAE,CAAA;QAEpB,uBAAuB;QACvB,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;QAE3D,OAAO,WAAW,CAAA;IACpB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,aAAa,GAAG,WAAW,CAC/B,KAAK,EAAE,SAAoB,EAAE,EAAE;QAC7B,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAC1C,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,WAAW,GAAG,GAAkB,CAAA;YACtC,QAAQ,CAAC,WAAW,CAAC,CAAA;YACrB,MAAM,GAAG,CAAA;QACX,CAAC;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAA;IAED,OAAO;QACL,aAAa;QACb,SAAS;QACT,wBAAwB;QACxB,KAAK;KACN,CAAA;AACH,CAAC"}

package/dist/hooks/useTransaction.d.ts

@@ -0,0 +1,25 @@
+import type { UseTransactionReturn } 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 declare function useTransaction(): UseTransactionReturn;
+//# sourceMappingURL=useTransaction.d.ts.map

package/dist/hooks/useTransaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransaction.d.ts","sourceRoot":"","sources":["../../src/hooks/useTransaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,oBAAoB,EAErB,MAAM,wBAAwB,CAAA;AAE/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CA+CrD"}

package/dist/hooks/useTransaction.js

@@ -0,0 +1,64 @@
+import { useContext, useCallback, useState } from 'react';
+import { ConnectionContext } from '../providers/ConnectionProvider';
+/**
+ * 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() {
+    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();
+    const [error, setError] = useState();
+    const sendTransaction = useCallback(async (request) => {
+        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;
+            setError(walletError);
+            throw err;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [connector, session.activeAddress]);
+    return {
+        sendTransaction,
+        isLoading,
+        transactionResult,
+        error
+    };
+}
+//# sourceMappingURL=useTransaction.js.map

package/dist/hooks/useTransaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransaction.js","sourceRoot":"","sources":["../../src/hooks/useTransaction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAQnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,OAAO,CAAA;IACtC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAEvD,CAAA;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAA2B,CAAA;IAE7D,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EAAE,OAA2B,EAA8B,EAAE;QAChE,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;YAC3B,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACxC,CAAC;QAED,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;QACpD,CAAC;QAED,YAAY,CAAC,IAAI,CAAC,CAAA;QAClB,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;YACvD,oBAAoB,CAAC,MAAM,CAAC,CAAA;YAC5B,OAAO,MAAM,CAAA;QACf,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,WAAW,GAAG,GAAkB,CAAA;YACtC,QAAQ,CAAC,WAAW,CAAC,CAAA;YACrB,MAAM,GAAG,CAAA;QACX,CAAC;gBAAS,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,CACnC,CAAA;IAED,OAAO;QACL,eAAe;QACf,SAAS;QACT,iBAAiB;QACjB,KAAK;KACN,CAAA;AACH,CAAC"}

package/dist/hooks/useWallets.d.ts

@@ -0,0 +1,16 @@
+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 declare function useWallets(): WalletMetadata[];
+//# sourceMappingURL=useWallets.d.ts.map

package/dist/hooks/useWallets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWallets.d.ts","sourceRoot":"","sources":["../../src/hooks/useWallets.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,IAAI,cAAc,EAAE,CAQ7C"}

package/dist/hooks/useWallets.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { ConnectionContext } from '../providers/ConnectionProvider';
+/**
+ * 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() {
+    const context = useContext(ConnectionContext);
+    if (!context) {
+        throw new Error('useWallets must be used within a ConnectionProvider');
+    }
+    return context.wallets;
+}
+//# sourceMappingURL=useWallets.js.map

package/dist/hooks/useWallets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWallets.js","sourceRoot":"","sources":["../../src/hooks/useWallets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAGnE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAA;IACxE,CAAC;IAED,OAAO,OAAO,CAAC,OAAO,CAAA;AACxB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './providers';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './providers';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA"}

package/dist/providers/ConnectionProvider.d.ts

@@ -0,0 +1,21 @@
+import React 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;
+}
+declare const ConnectionContext: React.Context<ConnectionContextValue | null>;
+interface ConnectionProviderProps {
+    children: React.ReactNode;
+    networks: Network[];
+    wallets: WalletMetadata[];
+    usingIntegratedBrowser?: boolean;
+    walletConnectConfig?: WalletConnectConfig;
+}
+export declare function ConnectionProvider({ children, networks, wallets, usingIntegratedBrowser, walletConnectConfig }: ConnectionProviderProps): import("react/jsx-runtime").JSX.Element;
+export { ConnectionContext };
+//# sourceMappingURL=ConnectionProvider.d.ts.map

package/dist/providers/ConnectionProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ConnectionProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EACV,OAAO,EACP,OAAO,EACP,cAAc,EACd,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,wBAAwB,CAAA;IACnC,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,iBAAiB,8CAAqD,CAAA;AAE5E,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,sBAA8B,EAC9B,mBAAmB,EACpB,EAAE,uBAAuB,2CAwCzB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/providers/ConnectionProvider.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useEffect, useState, useRef } from 'react';
+import { UniversalWalletConnector } from '@meshconnect/uwc-core';
+const ConnectionContext = createContext(null);
+export function ConnectionProvider({ children, networks, wallets, usingIntegratedBrowser = false, walletConnectConfig }) {
+    // Create the connector instance only once using useRef
+    const connectorRef = useRef(null);
+    if (!connectorRef.current) {
+        connectorRef.current = new UniversalWalletConnector(networks, wallets, usingIntegratedBrowser, walletConnectConfig);
+    }
+    const connector = connectorRef.current;
+    const [session, setSession] = useState(() => connector.getSession());
+    const [isReady, setIsReady] = useState(() => connector.isReady());
+    useEffect(() => {
+        const unsubscribe = connector.subscribe(() => {
+            setSession(connector.getSession());
+            setIsReady(connector.isReady());
+        });
+        return unsubscribe;
+    }, [connector]);
+    const value = {
+        connector,
+        session,
+        wallets: connector.getWallets(),
+        networks: connector.getNetworks(),
+        isReady
+    };
+    return (_jsx(ConnectionContext.Provider, { value: value, children: children }));
+}
+export { ConnectionContext };
+//# sourceMappingURL=ConnectionProvider.js.map

package/dist/providers/ConnectionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionProvider.js","sourceRoot":"","sources":["../../src/providers/ConnectionProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAA;AAgBhE,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAA;AAU5E,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,sBAAsB,GAAG,KAAK,EAC9B,mBAAmB,EACK;IACxB,uDAAuD;IACvD,MAAM,YAAY,GAAG,MAAM,CAAkC,IAAI,CAAC,CAAA;IAElE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;QAC1B,YAAY,CAAC,OAAO,GAAG,IAAI,wBAAwB,CACjD,QAAQ,EACR,OAAO,EACP,sBAAsB,EACtB,mBAAmB,CACpB,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAA;IAEtC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAA;IAC7E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE;YAC3C,UAAU,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAA;YAClC,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAA;QACjC,CAAC,CAAC,CAAA;QAEF,OAAO,WAAW,CAAA;IACpB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,KAAK,GAA2B;QACpC,SAAS;QACT,OAAO;QACP,OAAO,EAAE,SAAS,CAAC,UAAU,EAAE;QAC/B,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE;QACjC,OAAO;KACR,CAAA;IAED,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACrC,QAAQ,GACkB,CAC9B,CAAA;AACH,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConnectionProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/providers/index.js

@@ -0,0 +1,2 @@
+export * from './ConnectionProvider';
+//# sourceMappingURL=index.js.map

package/dist/providers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@meshconnect/uwc-react",
+  "version": "0.2.0",
+  "description": "React hooks and components for Universal Wallet Connector",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@meshconnect/uwc-core": "0.2.0",
+    "@meshconnect/uwc-types": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useConnection'
+export * from './useSwitchNetwork'
+export * from './useDisconnect'
+export * from './useSession'
+export * from './useWallets'
+export * from './useNetworks'
+export * from './useSignMessage'
+export * from './useTransaction'

package/src/hooks/useConnection.ts

@@ -0,0 +1,123 @@
+import { useContext, useCallback, useState, useEffect } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type {
+  NetworkId,
+  UseConnectionReturn,
+  WalletError
+} from '@meshconnect/uwc-types'
+
+/**
+ * Hook for managing wallet connections with both injected and WalletConnect modes
+ * @param walletId - The ID of the wallet to connect to (e.g., 'metamask', 'trust')
+ * @returns Connection methods and state for both injected and WalletConnect modes
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { walletConnect, injected } = useConnection('metamask')
+ *
+ * // Connect with browser extension
+ * await injected.connect('eip155:1')
+ *
+ * // Connect with WalletConnect QR code
+ * await walletConnect.connect('eip155:1')
+ * if (walletConnect.connectionURI) {
+ *   // Display QR code with walletConnect.connectionURI
+ * }
+ * ```
+ */
+export function useConnection(walletId: string): UseConnectionReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useConnection must be used within a ConnectionProvider')
+  }
+
+  const { connector, isReady } = context
+
+  const [walletConnectLoading, setWalletConnectLoading] = useState(false)
+  const [injectedLoading, setInjectedLoading] = useState(false)
+  const [walletConnectError, setWalletConnectError] = useState<
+    WalletError | undefined
+  >()
+  const [injectedError, setInjectedError] = useState<WalletError | undefined>()
+  const [connectionURI, setConnectionURI] = useState<string | undefined>()
+  const [walletConnectAvailable, setWalletConnectAvailable] = useState(false)
+  const [injectedAvailable, setInjectedAvailable] = useState(false)
+
+  // Update connection URI and availability when they change
+  useEffect(() => {
+    const checkState = () => {
+      const uri = connector.getConnectionURI()
+      setConnectionURI(uri)
+
+      // Check availability for both connection modes
+      const wcAvailable = connector.isConnectionModeAvailable(
+        'walletConnect',
+        walletId
+      )
+      const injAvailable = connector.isConnectionModeAvailable(
+        'injected',
+        walletId
+      )
+      setWalletConnectAvailable(wcAvailable)
+      setInjectedAvailable(injAvailable)
+    }
+
+    // Check initially and on state changes
+    checkState()
+    const unsubscribe = connector.subscribe(checkState)
+
+    return unsubscribe
+  }, [connector, walletId])
+
+  const connectWalletConnect = useCallback(
+    async (networkId?: NetworkId) => {
+      setWalletConnectLoading(true)
+      setWalletConnectError(undefined)
+      try {
+        await connector.connect('walletConnect', walletId, networkId)
+      } catch (error) {
+        const walletError = error as WalletError
+        setWalletConnectError(walletError)
+        throw error
+      } finally {
+        setWalletConnectLoading(false)
+      }
+    },
+    [connector, walletId]
+  )
+
+  const connectInjected = useCallback(
+    async (networkId?: NetworkId) => {
+      setInjectedLoading(true)
+      setInjectedError(undefined)
+      try {
+        await connector.connect('injected', walletId, networkId)
+      } catch (error) {
+        const walletError = error as WalletError
+        setInjectedError(walletError)
+        throw error
+      } finally {
+        setInjectedLoading(false)
+      }
+    },
+    [connector, walletId]
+  )
+
+  return {
+    walletConnect: {
+      connect: connectWalletConnect,
+      connectionURI,
+      isLoading: walletConnectLoading,
+      error: walletConnectError,
+      available: walletConnectAvailable
+    },
+    injected: {
+      connect: connectInjected,
+      isLoading: injectedLoading,
+      error: injectedError,
+      available: injectedAvailable
+    },
+    isReady
+  }
+}

package/src/hooks/useDisconnect.ts

@@ -0,0 +1,52 @@
+import { useContext, useCallback, useState } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+
+interface UseDisconnectReturn {
+  disconnect: () => Promise<void>
+  isLoading: boolean
+}
+
+/**
+ * Hook for disconnecting the current wallet
+ * @returns Disconnect function and loading state
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { disconnect, isLoading } = useDisconnect()
+ *
+ * const handleDisconnect = async () => {
+ *   await disconnect()
+ *   console.log('Wallet disconnected')
+ * }
+ *
+ * return (
+ *   <button onClick={handleDisconnect} disabled={isLoading}>
+ *     {isLoading ? 'Disconnecting...' : 'Disconnect'}
+ *   </button>
+ * )
+ * ```
+ */
+export function useDisconnect(): UseDisconnectReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useDisconnect must be used within a ConnectionProvider')
+  }
+
+  const { connector } = context
+  const [isLoading, setIsLoading] = useState(false)
+
+  const disconnect = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      await connector.disconnect()
+    } finally {
+      setIsLoading(false)
+    }
+  }, [connector])
+
+  return {
+    disconnect,
+    isLoading
+  }
+}

package/src/hooks/useNetworks.ts

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

package/src/hooks/useSession.ts

@@ -0,0 +1,37 @@
+import { useContext } from 'react'
+import { ConnectionContext } from '../providers/ConnectionProvider'
+import type { UseSessionReturn } from '@meshconnect/uwc-types'
+
+/**
+ * Hook for accessing the current wallet session state
+ * @returns Session information including active address, network, and connection details
+ * @throws Error if used outside of ConnectionProvider
+ * @example
+ * ```tsx
+ * const { activeAddress, activeNetwork, availableNetworks } = useSession()
+ *
+ * if (activeAddress) {
+ *   console.log(`Connected: ${activeAddress}`)
+ *   console.log(`Network: ${activeNetwork?.name}`)
+ *   console.log(`Available networks: ${availableNetworks.length}`)
+ * }
+ * ```
+ */
+export function useSession(): UseSessionReturn {
+  const context = useContext(ConnectionContext)
+
+  if (!context) {
+    throw new Error('useSession must be used within a ConnectionProvider')
+  }
+
+  const { session } = context
+
+  return {
+    session,
+    activeAddress: session.activeAddress,
+    activeNetwork: session.activeNetwork,
+    availableNetworks: session.availableNetworks,
+    activeConnector: session.connectionMode,
+    availableAddresses: session.availableAddresses
+  }
+}