chore: update docs

This commit is contained in:
Danish Arora 2025-10-28 11:29:21 +05:30
parent 3197dcaa6f
commit 45fea2397a
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
4 changed files with 24 additions and 28 deletions

View File

@ -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

View File

@ -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>
);
}
```

View File

@ -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,

View File

@ -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);