mirror of
https://github.com/logos-messaging/OpChan.git
synced 2026-01-07 15:23:05 +00:00
chore: update docs
This commit is contained in:
parent
3197dcaa6f
commit
45fea2397a
@ -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
|
||||||
|
|||||||
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user