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 (
-
-
-
- {/* your app */}
-
-
-
+
+ {/* your app */}
+
);
}
@@ -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 (
-
-
-
- {children}
-
-
-
+
+ {children}
+
);
}
```
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 = ({
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);