@thru/react-sdk 0.0.4

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import { BrowserSDK, BrowserSDKConfig, ConnectOptions } from '@thru/browser-sdk';
+export { BrowserSDK, BrowserSDKConfig, ConnectOptions, ErrorCode, SDKEvent } from '@thru/browser-sdk';
+import * as _thru_chain_interfaces from '@thru/chain-interfaces';
+import { WalletAddress, IThruChain, ConnectResult } from '@thru/chain-interfaces';
+export { ConnectResult, IThruChain, SignMessageParams, SignMessageResult, WalletAddress } from '@thru/chain-interfaces';
+import { Thru } from '@thru/thru-sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ThruContextValue {
+    wallet: BrowserSDK | null;
+    isConnected: boolean;
+    addresses: WalletAddress[];
+    isConnecting: boolean;
+    error: Error | null;
+    thru: Thru | null;
+}
+
+interface ThruProviderProps {
+    children: ReactNode;
+    config: BrowserSDKConfig;
+}
+/**
+ * ThruProvider - React context provider for Thru Wallet SDK
+ * Wraps the BrowserSDK and exposes state via context
+ */
+declare function ThruProvider({ children, config }: ThruProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useThru - Access the Thru SDK context
+ * Must be used within a ThruProvider
+ */
+declare function useThru(): ThruContextValue;
+
+/**
+ * useThruChain - Hook for accessing the Thru chain API exposed by the Browser SDK.
+ * Returns the chain instance (if available) and a boolean indicating readiness.
+ */
+declare function useWallet(): {
+    wallet: IThruChain | undefined;
+    addresses: _thru_chain_interfaces.WalletAddress[];
+    connect: (options?: ConnectOptions) => Promise<ConnectResult>;
+    disconnect: () => Promise<void>;
+    isConnected: boolean;
+};
+
+export { type ThruContextValue, ThruProvider, type ThruProviderProps, useThru, useWallet };

package/dist/index.js

@@ -0,0 +1,132 @@
+"use client";
+import { BrowserSDK } from '@thru/browser-sdk';
+export { BrowserSDK, ErrorCode } from '@thru/browser-sdk';
+import { createContext, useState, useEffect, useContext, useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultContextValue = {
+  wallet: null,
+  isConnected: false,
+  addresses: [],
+  isConnecting: false,
+  error: null,
+  thru: null
+};
+var ThruContext = createContext(defaultContextValue);
+function ThruProvider({ children, config }) {
+  const [sdk, setSdk] = useState(null);
+  const [thru, setThru] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [addresses, setAddresses] = useState([]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const sdkInstance = new BrowserSDK(config);
+    setSdk(sdkInstance);
+    setThru(sdkInstance.getThru());
+    sdkInstance.initialize().catch((err) => {
+      console.error("Failed to initialize SDK:", err);
+      setError(err);
+    });
+    const handleConnect = (result) => {
+      if (result.status === "connecting") {
+        setIsConnecting(true);
+        setError(null);
+      } else {
+        setIsConnected(true);
+        setAddresses(sdkInstance.getAddresses());
+        setIsConnecting(false);
+        setError(null);
+      }
+    };
+    const handleDisconnect = () => {
+      setIsConnected(false);
+      setAddresses([]);
+      setIsConnecting(false);
+    };
+    const handleError = (err) => {
+      setError(err.error || new Error("Unknown error"));
+      setIsConnecting(false);
+    };
+    const handleLock = () => {
+      setIsConnected(false);
+      setAddresses([]);
+      setIsConnecting(false);
+    };
+    sdkInstance.on("connect", handleConnect);
+    sdkInstance.on("disconnect", handleDisconnect);
+    sdkInstance.on("error", handleError);
+    sdkInstance.on("lock", handleLock);
+    return () => {
+      sdkInstance.off("connect", handleConnect);
+      sdkInstance.off("disconnect", handleDisconnect);
+      sdkInstance.off("error", handleError);
+      sdkInstance.off("lock", handleLock);
+      sdkInstance.destroy();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ThruContext.Provider,
+    {
+      value: {
+        thru,
+        wallet: sdk,
+        isConnected,
+        addresses,
+        isConnecting,
+        error
+      },
+      children
+    }
+  );
+}
+function useThru() {
+  const context = useContext(ThruContext);
+  return context;
+}
+function waitForWallet(getWallet, timeout = 5e3, interval = 100) {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const check = () => {
+      const sdk = getWallet();
+      if (sdk) return resolve(sdk);
+      if (Date.now() - start > timeout) return reject(new Error("SDK not initialized in time"));
+      setTimeout(check, interval);
+    };
+    check();
+  });
+}
+function useWallet() {
+  const { wallet, isConnected, addresses } = useThru();
+  const walletRef = useRef(wallet);
+  useEffect(() => {
+    walletRef.current = wallet;
+  }, [wallet]);
+  const disconnect = async () => {
+    if (!wallet) {
+      throw new Error("SDK not initialized");
+    }
+    await wallet.disconnect();
+  };
+  const connect = async (options) => {
+    try {
+      const readySdk = walletRef.current ?? await waitForWallet(() => walletRef.current);
+      const result = await readySdk.connect(options);
+      return result;
+    } catch (err) {
+      const error = err;
+      throw error;
+    }
+  };
+  return {
+    wallet: wallet?.thru,
+    addresses,
+    connect,
+    disconnect,
+    isConnected: isConnected && !!wallet
+  };
+}
+
+export { ThruProvider, useThru, useWallet };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThruContext.ts","../src/ThruProvider.tsx","../src/hooks/useThru.ts","../src/hooks/useWallet.ts"],"names":["useEffect"],"mappings":";;;;;AAcA,IAAM,mBAAA,GAAwC;AAAA,EAC1C,MAAA,EAAQ,IAAA;AAAA,EACR,WAAA,EAAa,KAAA;AAAA,EACb,WAAW,EAAC;AAAA,EACZ,YAAA,EAAc,KAAA;AAAA,EACd,KAAA,EAAO,IAAA;AAAA,EACP,IAAA,EAAM;AACV,CAAA;AAEO,IAAM,WAAA,GAAc,cAAgC,mBAAmB,CAAA;ACPvE,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,MAAA,EAAO,EAAsB;AACpE,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAI,SAA4B,IAAI,CAAA;AACtD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAsB,IAAI,CAAA;AAClD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,CAA0B,EAAE,CAAA;AAC9D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAuB,IAAI,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,WAAA,GAAc,IAAI,UAAA,CAAW,MAAM,CAAA;AACzC,IAAA,MAAA,CAAO,WAAW,CAAA;AAElB,IAAA,OAAA,CAAQ,WAAA,CAAY,SAAS,CAAA;AAG7B,IAAA,WAAA,CAAY,UAAA,EAAW,CAAE,KAAA,CAAM,CAAC,GAAA,KAAQ;AACtC,MAAA,OAAA,CAAQ,KAAA,CAAM,6BAA6B,GAAG,CAAA;AAC9C,MAAA,QAAA,CAAS,GAAG,CAAA;AAAA,IACd,CAAC,CAAA;AAGD,IAAA,MAAM,aAAA,GAAgB,CAAC,MAAA,KAAgB;AAErC,MAAA,IAAI,MAAA,CAAO,WAAW,YAAA,EAAc;AAClC,QAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,MACf,CAAA,MAAO;AACL,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,YAAA,CAAa,WAAA,CAAY,cAAc,CAAA;AACvC,QAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA,MACf;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAA,YAAA,CAAa,EAAE,CAAA;AACf,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,GAAA,KAAa;AAChC,MAAA,QAAA,CAAS,GAAA,CAAI,KAAA,IAAS,IAAI,KAAA,CAAM,eAAe,CAAC,CAAA;AAChD,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAA,YAAA,CAAa,EAAE,CAAA;AACf,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB,CAAA;AAEA,IAAA,WAAA,CAAY,EAAA,CAAG,WAAW,aAAa,CAAA;AACvC,IAAA,WAAA,CAAY,EAAA,CAAG,cAAc,gBAAgB,CAAA;AAC7C,IAAA,WAAA,CAAY,EAAA,CAAG,SAAS,WAAW,CAAA;AACnC,IAAA,WAAA,CAAY,EAAA,CAAG,QAAQ,UAAU,CAAA;AAGjC,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,CAAY,GAAA,CAAI,WAAW,aAAa,CAAA;AACxC,MAAA,WAAA,CAAY,GAAA,CAAI,cAAc,gBAAgB,CAAA;AAC9C,MAAA,WAAA,CAAY,GAAA,CAAI,SAAS,WAAW,CAAA;AACpC,MAAA,WAAA,CAAY,GAAA,CAAI,QAAQ,UAAU,CAAA;AAClC,MAAA,WAAA,CAAY,OAAA,EAAQ;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA,CAAY,QAAA;AAAA,IAAZ;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA;AAAA,QACA,MAAA,EAAQ,GAAA;AAAA,QACR,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AC1FO,SAAS,OAAA,GAAU;AACtB,EAAA,MAAM,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,OAAO,OAAA;AACX;ACLA,SAAS,aAAA,CAAc,SAAA,EAAoC,OAAA,GAAU,GAAA,EAAM,WAAW,GAAA,EAA0B;AAC9G,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACtC,IAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,EAAI;AACvB,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,MAAM,MAAM,SAAA,EAAU;AACtB,MAAA,IAAI,GAAA,EAAK,OAAO,OAAA,CAAQ,GAAG,CAAA;AAC3B,MAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,KAAA,GAAQ,OAAA,SAAgB,MAAA,CAAO,IAAI,KAAA,CAAM,6BAA6B,CAAC,CAAA;AACxF,MAAA,UAAA,CAAW,OAAO,QAAQ,CAAA;AAAA,IAC5B,CAAA;AACA,IAAA,KAAA,EAAM;AAAA,EACR,CAAC,CAAA;AACH;AAMO,SAAS,SAAA,GAAY;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAa,SAAA,KAAc,OAAA,EAAQ;AACnD,EAAA,MAAM,SAAA,GAAY,OAAO,MAAM,CAAA;AAE/B,EAAAA,UAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AAAA,EACtB,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,MAAM,aAAa,YAA2B;AAC5C,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA,MAAM,IAAI,MAAM,qBAAqB,CAAA;AAAA,IACvC;AACA,IAAA,MAAM,OAAO,UAAA,EAAW;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,OAAA,GAAU,OAAO,OAAA,KAAqD;AAC1E,IAAA,IAAI;AACF,MAAA,MAAM,WACJ,SAAA,CAAU,OAAA,IAAY,MAAM,aAAA,CAAc,MAAM,UAAU,OAAO,CAAA;AACnE,MAAA,MAAM,MAAA,GAAS,MAAM,QAAA,CAAS,OAAA,CAAQ,OAAO,CAAA;AAC7C,MAAA,OAAO,MAAA;AAAA,IACT,SAAS,GAAA,EAAK;AACZ,MAAA,MAAM,KAAA,GAAQ,GAAA;AACd,MAAA,MAAM,KAAA;AAAA,IACR;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,QAAQ,MAAA,EAAQ,IAAA;AAAA,IAChB,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA,EAAa,WAAA,IAAe,CAAC,CAAC;AAAA,GAChC;AACF","file":"index.js","sourcesContent":["import { BrowserSDK } from \"@thru/browser-sdk\";\nimport { WalletAddress } from \"@thru/chain-interfaces\";\nimport { Thru } from \"@thru/thru-sdk\";\nimport { createContext } from \"react\";\n\nexport interface ThruContextValue {\n    wallet: BrowserSDK | null;\n    isConnected: boolean;\n    addresses: WalletAddress[];\n    isConnecting: boolean;\n    error: Error | null;\n    thru: Thru | null;\n}\n\nconst defaultContextValue: ThruContextValue = {\n    wallet: null,\n    isConnected: false,\n    addresses: [],\n    isConnecting: false,\n    error: null,\n    thru: null,\n};\n\nexport const ThruContext = createContext<ThruContextValue>(defaultContextValue);\n","'use client';\n\nimport { BrowserSDK, type BrowserSDKConfig, type WalletAddress } from '@thru/browser-sdk';\nimport type { Thru } from '@thru/thru-sdk';\nimport { ReactNode, useEffect, useState } from 'react';\nimport { ThruContext } from './ThruContext';\n\nexport interface ThruProviderProps {\n  children: ReactNode;\n  config: BrowserSDKConfig;\n}\n\n/**\n * ThruProvider - React context provider for Thru Wallet SDK\n * Wraps the BrowserSDK and exposes state via context\n */\nexport function ThruProvider({ children, config }: ThruProviderProps) {\n  const [sdk, setSdk] = useState<BrowserSDK | null>(null);\n  const [thru, setThru] = useState<Thru | null>(null);\n  const [isConnected, setIsConnected] = useState(false);\n  const [addresses, setAddresses] = useState<WalletAddress[]>([]);\n  const [isConnecting, setIsConnecting] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    // Create SDK instance\n    const sdkInstance = new BrowserSDK(config);\n    setSdk(sdkInstance);\n\n    setThru(sdkInstance.getThru());\n\n    // Initialize SDK (creates iframe)\n    sdkInstance.initialize().catch((err) => {\n      console.error('Failed to initialize SDK:', err);\n      setError(err);\n    });\n\n    // Listen to SDK events\n    const handleConnect = (result: any) => {\n      // Check if this is the initial \"connecting\" status or actual connection\n      if (result.status === 'connecting') {\n        setIsConnecting(true);\n        setError(null);\n      } else {\n        setIsConnected(true);\n        setAddresses(sdkInstance.getAddresses());\n        setIsConnecting(false);\n        setError(null);\n      }\n    };\n\n    const handleDisconnect = () => {\n      setIsConnected(false);\n      setAddresses([]);\n      setIsConnecting(false);\n    };\n\n    const handleError = (err: any) => {\n      setError(err.error || new Error('Unknown error'));\n      setIsConnecting(false);\n    };\n\n    const handleLock = () => {\n      setIsConnected(false);\n      setAddresses([]);\n      setIsConnecting(false);\n    };\n\n    sdkInstance.on('connect', handleConnect);\n    sdkInstance.on('disconnect', handleDisconnect);\n    sdkInstance.on('error', handleError);\n    sdkInstance.on('lock', handleLock);\n\n    // Cleanup on unmount\n    return () => {\n      sdkInstance.off('connect', handleConnect);\n      sdkInstance.off('disconnect', handleDisconnect);\n      sdkInstance.off('error', handleError);\n      sdkInstance.off('lock', handleLock);\n      sdkInstance.destroy();\n    };\n  }, []); // Empty dependency array - only create SDK once\n\n  return (\n    <ThruContext.Provider\n      value={{\n        thru,\n        wallet: sdk,\n        isConnected,\n        addresses,\n        isConnecting,\n        error,\n      }}\n    >\n      {children}\n    </ThruContext.Provider>\n  );\n}\n","import { useContext } from \"react\";\nimport { ThruContext } from \"../ThruContext\";\n\n/**\n * useThru - Access the Thru SDK context\n * Must be used within a ThruProvider\n */\nexport function useThru() {\n    const context = useContext(ThruContext);\n    return context;\n}","import { BrowserSDK, ConnectOptions } from '@thru/browser-sdk';\nimport type { ConnectResult, IThruChain } from '@thru/chain-interfaces';\nimport { useEffect, useRef } from 'react';\nimport { useThru } from './useThru';\n\nfunction waitForWallet(getWallet: () => BrowserSDK | null, timeout = 5000, interval = 100): Promise<BrowserSDK> {\n  return new Promise((resolve, reject) => {\n    const start = Date.now();\n    const check = () => {\n      const sdk = getWallet();\n      if (sdk) return resolve(sdk);\n      if (Date.now() - start > timeout) return reject(new Error('SDK not initialized in time'));\n      setTimeout(check, interval);\n    };\n    check();\n  });\n}\n\n/**\n * useThruChain - Hook for accessing the Thru chain API exposed by the Browser SDK.\n * Returns the chain instance (if available) and a boolean indicating readiness.\n */\nexport function useWallet() {\n  const { wallet, isConnected, addresses } = useThru();\n  const walletRef = useRef(wallet);\n\n  useEffect(() => {\n    walletRef.current = wallet;\n  }, [wallet]);\n\n  const disconnect = async (): Promise<void> => {\n    if (!wallet) {\n      throw new Error('SDK not initialized');\n    }\n    await wallet.disconnect();\n  };\n\n  const connect = async (options?: ConnectOptions): Promise<ConnectResult> => {\n    try {\n      const readySdk =\n        walletRef.current ?? (await waitForWallet(() => walletRef.current));\n      const result = await readySdk.connect(options);\n      return result;\n    } catch (err) {\n      const error = err as Error;\n      throw error;\n    }\n  };\n\n  return {\n    wallet: wallet?.thru as IThruChain | undefined,\n    addresses,\n    connect,\n    disconnect,\n    isConnected: isConnected && !!wallet,\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@thru/react-sdk",
+  "version": "0.0.4",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@thru/browser-sdk": "0.0.4",
+    "@thru/chain-interfaces": "0.0.4",
+    "@thru/thru-sdk": "0.0.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist"
+  }
+}

package/src/ThruContext.ts

@@ -0,0 +1,24 @@
+import { BrowserSDK } from "@thru/browser-sdk";
+import { WalletAddress } from "@thru/chain-interfaces";
+import { Thru } from "@thru/thru-sdk";
+import { createContext } from "react";
+
+export interface ThruContextValue {
+    wallet: BrowserSDK | null;
+    isConnected: boolean;
+    addresses: WalletAddress[];
+    isConnecting: boolean;
+    error: Error | null;
+    thru: Thru | null;
+}
+
+const defaultContextValue: ThruContextValue = {
+    wallet: null,
+    isConnected: false,
+    addresses: [],
+    isConnecting: false,
+    error: null,
+    thru: null,
+};
+
+export const ThruContext = createContext<ThruContextValue>(defaultContextValue);

package/src/ThruProvider.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { BrowserSDK, type BrowserSDKConfig, type WalletAddress } from '@thru/browser-sdk';
+import type { Thru } from '@thru/thru-sdk';
+import { ReactNode, useEffect, useState } from 'react';
+import { ThruContext } from './ThruContext';
+
+export interface ThruProviderProps {
+  children: ReactNode;
+  config: BrowserSDKConfig;
+}
+
+/**
+ * ThruProvider - React context provider for Thru Wallet SDK
+ * Wraps the BrowserSDK and exposes state via context
+ */
+export function ThruProvider({ children, config }: ThruProviderProps) {
+  const [sdk, setSdk] = useState<BrowserSDK | null>(null);
+  const [thru, setThru] = useState<Thru | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [addresses, setAddresses] = useState<WalletAddress[]>([]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    // Create SDK instance
+    const sdkInstance = new BrowserSDK(config);
+    setSdk(sdkInstance);
+
+    setThru(sdkInstance.getThru());
+
+    // Initialize SDK (creates iframe)
+    sdkInstance.initialize().catch((err) => {
+      console.error('Failed to initialize SDK:', err);
+      setError(err);
+    });
+
+    // Listen to SDK events
+    const handleConnect = (result: any) => {
+      // Check if this is the initial "connecting" status or actual connection
+      if (result.status === 'connecting') {
+        setIsConnecting(true);
+        setError(null);
+      } else {
+        setIsConnected(true);
+        setAddresses(sdkInstance.getAddresses());
+        setIsConnecting(false);
+        setError(null);
+      }
+    };
+
+    const handleDisconnect = () => {
+      setIsConnected(false);
+      setAddresses([]);
+      setIsConnecting(false);
+    };
+
+    const handleError = (err: any) => {
+      setError(err.error || new Error('Unknown error'));
+      setIsConnecting(false);
+    };
+
+    const handleLock = () => {
+      setIsConnected(false);
+      setAddresses([]);
+      setIsConnecting(false);
+    };
+
+    sdkInstance.on('connect', handleConnect);
+    sdkInstance.on('disconnect', handleDisconnect);
+    sdkInstance.on('error', handleError);
+    sdkInstance.on('lock', handleLock);
+
+    // Cleanup on unmount
+    return () => {
+      sdkInstance.off('connect', handleConnect);
+      sdkInstance.off('disconnect', handleDisconnect);
+      sdkInstance.off('error', handleError);
+      sdkInstance.off('lock', handleLock);
+      sdkInstance.destroy();
+    };
+  }, []); // Empty dependency array - only create SDK once
+
+  return (
+    <ThruContext.Provider
+      value={{
+        thru,
+        wallet: sdk,
+        isConnected,
+        addresses,
+        isConnecting,
+        error,
+      }}
+    >
+      {children}
+    </ThruContext.Provider>
+  );
+}

package/src/hooks/useThru.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { ThruContext } from "../ThruContext";
+
+/**
+ * useThru - Access the Thru SDK context
+ * Must be used within a ThruProvider
+ */
+export function useThru() {
+    const context = useContext(ThruContext);
+    return context;
+}

package/src/hooks/useWallet.ts

@@ -0,0 +1,57 @@
+import { BrowserSDK, ConnectOptions } from '@thru/browser-sdk';
+import type { ConnectResult, IThruChain } from '@thru/chain-interfaces';
+import { useEffect, useRef } from 'react';
+import { useThru } from './useThru';
+
+function waitForWallet(getWallet: () => BrowserSDK | null, timeout = 5000, interval = 100): Promise<BrowserSDK> {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const check = () => {
+      const sdk = getWallet();
+      if (sdk) return resolve(sdk);
+      if (Date.now() - start > timeout) return reject(new Error('SDK not initialized in time'));
+      setTimeout(check, interval);
+    };
+    check();
+  });
+}
+
+/**
+ * useThruChain - Hook for accessing the Thru chain API exposed by the Browser SDK.
+ * Returns the chain instance (if available) and a boolean indicating readiness.
+ */
+export function useWallet() {
+  const { wallet, isConnected, addresses } = useThru();
+  const walletRef = useRef(wallet);
+
+  useEffect(() => {
+    walletRef.current = wallet;
+  }, [wallet]);
+
+  const disconnect = async (): Promise<void> => {
+    if (!wallet) {
+      throw new Error('SDK not initialized');
+    }
+    await wallet.disconnect();
+  };
+
+  const connect = async (options?: ConnectOptions): Promise<ConnectResult> => {
+    try {
+      const readySdk =
+        walletRef.current ?? (await waitForWallet(() => walletRef.current));
+      const result = await readySdk.connect(options);
+      return result;
+    } catch (err) {
+      const error = err as Error;
+      throw error;
+    }
+  };
+
+  return {
+    wallet: wallet?.thru as IThruChain | undefined,
+    addresses,
+    connect,
+    disconnect,
+    isConnected: isConnected && !!wallet,
+  };
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+// Provider and context
+export type { ThruContextValue } from './ThruContext';
+export { ThruProvider, type ThruProviderProps } from './ThruProvider';
+
+
+// Hooks
+export { useThru } from './hooks/useThru';
+export { useWallet } from './hooks/useWallet';
+
+// Re-export from browser-sdk for convenience
+export { BrowserSDK, ErrorCode, type BrowserSDKConfig, type ConnectOptions, type SDKEvent } from '@thru/browser-sdk';
+
+// Re-export types from chain-interfaces
+export type {
+  ConnectResult, IThruChain, SignMessageParams,
+  SignMessageResult, WalletAddress
+} from '@thru/chain-interfaces';

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'tsup';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  platform: 'browser',
+  banner: {
+    js: '"use client";',
+  },
+  noExternal: ['@thru/chain-interfaces'],
+  external: [
+    '@thru/browser-sdk',
+    '@thru/embedded-provider',
+    'react',
+    'react-dom',
+  ],
+  onSuccess: () => {
+    const distDir = dirname(fileURLToPath(import.meta.url));
+    const outputPath = join(distDir, 'dist', 'index.js');
+    const content = readFileSync(outputPath, 'utf8');
+    if (!content.startsWith('"use client";')) {
+      writeFileSync(outputPath, `"use client";\n${content}`);
+    }
+  },
+});