From 45fea2397a5eb5c70d25d5132ef94e0b1d575dda Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Tue, 28 Oct 2025 11:29:21 +0530
Subject: [PATCH] chore: update docs

---
 packages/react/README.md                      | 30 +++++++++++--------
 packages/react/docs/getting-started.md        | 15 +++-------
 .../react/src/v1/provider/OpChanProvider.tsx  |  3 +-
 .../v1/provider/WalletAdapterInitializer.tsx  |  4 +--
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 71a600c..86e61e2 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -12,27 +12,19 @@ npm i @opchan/react @opchan/core react react-dom
 
 #### With Reown AppKit (Recommended)
 
-OpChan integrates with Reown AppKit for wallet management. The provider must be nested inside `WagmiProvider` and `AppKitProvider`:
+OpChan integrates with Reown AppKit for wallet management. The OpChanProvider already wraps WagmiProvider and AppKitProvider internally, so you can mount it directly:
 
 ```tsx
 import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { WagmiProvider } from 'wagmi';
-import { AppKitProvider } from '@reown/appkit/react';
 import { OpChanProvider } from '@opchan/react';
-import { config, appkitConfig } from '@opchan/core';
 
 const opchanConfig = { ordiscanApiKey: 'YOUR_ORDISCAN_API_KEY' };
 
 function App() {
   return (
-    <WagmiProvider config={config}>
-      <AppKitProvider {...appkitConfig}>
-        <OpChanProvider config={opchanConfig}>
-          {/* your app */}
-        </OpChanProvider>
-      </AppKitProvider>
-    </WagmiProvider>
+    <OpChanProvider config={opchanConfig}>
+      {/* your app */}
+    </OpChanProvider>
   );
 }
 
@@ -97,7 +89,7 @@ export function Connect() {
     - Props:
       - `config: OpChanClientConfig` — core client configuration.
       - `children: React.ReactNode`.
-    - Requirements: Must be nested inside `WagmiProvider` and `AppKitProvider` from Reown AppKit.
+    - Requirements: None — this provider already wraps `WagmiProvider` and `AppKitProvider` internally.
     - Internally provides `AppKitWalletProvider` for wallet state management.
   
   - **`AppKitWalletProvider`**: Wallet context provider (automatically included in `OpChanProvider`).
@@ -154,6 +146,18 @@ export function Connect() {
   `useUserDisplay` and `useAuth.verifyOwnership()` will keep store and local DB in sync.
 - This package is UI-agnostic; pair with your component library of choice.
 
+### Runtime requirements
+
+- Browser Buffer polyfill (for some crypto/wallet libs):
+  ```ts
+  import { Buffer } from 'buffer'
+  if (!(window as any).Buffer) (window as any).Buffer = Buffer
+  ```
+- Config values you likely need to pass to `OpChanProvider`:
+  - `ordiscanApiKey` (optional for dev)
+  - `wakuConfig` with `contentTopic` and `reliableChannelId`
+  - `reownProjectId` (e.g., from `import.meta.env.VITE_REOWN_SECRET`)
+
 ### License
 
 MIT
diff --git a/packages/react/docs/getting-started.md b/packages/react/docs/getting-started.md
index 8861e0a..b88ff18 100644
--- a/packages/react/docs/getting-started.md
+++ b/packages/react/docs/getting-started.md
@@ -12,24 +12,17 @@ The examples assume you install and use the `@opchan/react` and `@opchan/core` p
 npm i @opchan/react @opchan/core
 ```
 
-Create an app-level provider using `OpChanProvider`. You must pass a minimal client config (e.g., Ordiscan API key if you have one). OpChanProvider must be nested inside `WagmiProvider` and `AppKitProvider` from Reown AppKit.
+Create an app-level provider using `OpChanProvider`. You must pass a minimal client config (e.g., Ordiscan API key if you have one). OpChanProvider already wraps `WagmiProvider` and `AppKitProvider` from Reown AppKit internally, so mount it directly at the app root.
 
 ```tsx
 import React from 'react';
 import { OpChanProvider } from '@opchan/react';
-import { WagmiProvider } from 'wagmi';
-import { AppKitProvider } from '@reown/appkit/react';
-import { appkitConfig, config } from '@opchan/core';
 
 export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
-    <WagmiProvider config={config}>
-      <AppKitProvider {...appkitConfig}>
-        <OpChanProvider config={{ ordiscanApiKey: 'YOUR_API_KEY' }}>
-          {children}
-        </OpChanProvider>
-      </AppKitProvider>
-    </WagmiProvider>
+    <OpChanProvider config={{ ordiscanApiKey: 'YOUR_API_KEY' }}>
+      {children}
+    </OpChanProvider>
   );
 }
 ```
diff --git a/packages/react/src/v1/provider/OpChanProvider.tsx b/packages/react/src/v1/provider/OpChanProvider.tsx
index c018845..46d434e 100644
--- a/packages/react/src/v1/provider/OpChanProvider.tsx
+++ b/packages/react/src/v1/provider/OpChanProvider.tsx
@@ -15,7 +15,8 @@ export interface OpChanProviderProps {
 
 /**
  * OpChan provider that constructs the OpChanClient and provides wallet context.
- * Must be nested inside WagmiProvider and AppKitProvider.
+ * This component already wraps WagmiProvider and AppKitProvider internally,
+ * so you can mount it directly at your app root with the required config.
  */
 export const OpChanProvider: React.FC<OpChanProviderProps> = ({
   config,
diff --git a/packages/react/src/v1/provider/WalletAdapterInitializer.tsx b/packages/react/src/v1/provider/WalletAdapterInitializer.tsx
index 4dcaaef..3946558 100644
--- a/packages/react/src/v1/provider/WalletAdapterInitializer.tsx
+++ b/packages/react/src/v1/provider/WalletAdapterInitializer.tsx
@@ -37,9 +37,7 @@ export const WalletAdapterInitializer: React.FC = () => {
       // Initialize WalletManager for signing flows
       try {
         WalletManager.create(
-          appKit as unknown as AppKit,
-          btc as unknown as UseAppKitAccountReturn,
-          eth as unknown as UseAppKitAccountReturn,
+          appKit as unknown as AppKit, btc, eth
         );
       } catch (e) {
         console.warn('[WalletAdapterInitializer] WalletManager.create failed', e);