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) #### 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 ```tsx
import React from 'react'; 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 { OpChanProvider } from '@opchan/react';
import { config, appkitConfig } from '@opchan/core';
const opchanConfig = { ordiscanApiKey: 'YOUR_ORDISCAN_API_KEY' }; const opchanConfig = { ordiscanApiKey: 'YOUR_ORDISCAN_API_KEY' };
function App() { function App() {
return ( return (
<WagmiProvider config={config}> <OpChanProvider config={opchanConfig}>
<AppKitProvider {...appkitConfig}> {/* your app */}
<OpChanProvider config={opchanConfig}> </OpChanProvider>
{/* your app */}
</OpChanProvider>
</AppKitProvider>
</WagmiProvider>
); );
} }
@ -97,7 +89,7 @@ export function Connect() {
- Props: - Props:
- `config: OpChanClientConfig` — core client configuration. - `config: OpChanClientConfig` — core client configuration.
- `children: React.ReactNode`. - `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. - Internally provides `AppKitWalletProvider` for wallet state management.
- **`AppKitWalletProvider`**: Wallet context provider (automatically included in `OpChanProvider`). - **`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. `useUserDisplay` and `useAuth.verifyOwnership()` will keep store and local DB in sync.
- This package is UI-agnostic; pair with your component library of choice. - 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 ### License
MIT 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 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 ```tsx
import React from 'react'; import React from 'react';
import { OpChanProvider } from '@opchan/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 }) { export function AppProviders({ children }: { children: React.ReactNode }) {
return ( return (
<WagmiProvider config={config}> <OpChanProvider config={{ ordiscanApiKey: 'YOUR_API_KEY' }}>
<AppKitProvider {...appkitConfig}> {children}
<OpChanProvider config={{ ordiscanApiKey: 'YOUR_API_KEY' }}> </OpChanProvider>
{children}
</OpChanProvider>
</AppKitProvider>
</WagmiProvider>
); );
} }
``` ```

View File

@ -15,7 +15,8 @@ export interface OpChanProviderProps {
/** /**
* OpChan provider that constructs the OpChanClient and provides wallet context. * 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> = ({ export const OpChanProvider: React.FC<OpChanProviderProps> = ({
config, config,

View File

@ -37,9 +37,7 @@ export const WalletAdapterInitializer: React.FC = () => {
// Initialize WalletManager for signing flows // Initialize WalletManager for signing flows
try { try {
WalletManager.create( WalletManager.create(
appKit as unknown as AppKit, appKit as unknown as AppKit, btc, eth
btc as unknown as UseAppKitAccountReturn,
eth as unknown as UseAppKitAccountReturn,
); );
} catch (e) { } catch (e) {
console.warn('[WalletAdapterInitializer] WalletManager.create failed', e); console.warn('[WalletAdapterInitializer] WalletManager.create failed', e);