@w3ux/react-connect-kit 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,24 +22,47 @@ pnpm add @w3ux/react-connect-kit
|
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
|
-
```
|
|
26
|
-
import {
|
|
25
|
+
```tsx
|
|
26
|
+
import { ConnectProvider } from '@w3ux/react-connect-kit'
|
|
27
|
+
|
|
28
|
+
function App() {
|
|
29
|
+
return (
|
|
30
|
+
<ConnectProvider ss58={0} dappName="My Dapp">
|
|
31
|
+
{/* Your app content */}
|
|
32
|
+
</ConnectProvider>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
27
35
|
```
|
|
28
36
|
|
|
29
|
-
###
|
|
37
|
+
### Adaptor Model
|
|
30
38
|
|
|
31
|
-
|
|
39
|
+
`ConnectProvider` supports an `adaptors` prop that accepts an array of provider components. Adaptors are dynamically nested inside `ConnectProvider`, allowing your dapp to opt in to whichever connection methods it needs without hard dependencies.
|
|
32
40
|
|
|
33
|
-
|
|
34
|
-
import React from 'react'
|
|
35
|
-
import { /* specific hook or component */ } from '@w3ux/react-connect-kit'
|
|
41
|
+
First-party adaptors:
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
43
|
+
- [`@w3ux/ledger-connect`](https://www.npmjs.com/package/@w3ux/ledger-connect) — Ledger hardware wallet support
|
|
44
|
+
- [`@w3ux/vault-connect`](https://www.npmjs.com/package/@w3ux/vault-connect) — Polkadot Vault (QR-based) wallet support
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { ConnectProvider } from '@w3ux/react-connect-kit'
|
|
48
|
+
import { LedgerAdaptor } from '@w3ux/ledger-connect'
|
|
49
|
+
import { VaultAdaptor } from '@w3ux/vault-connect'
|
|
50
|
+
|
|
51
|
+
function App() {
|
|
52
|
+
return (
|
|
53
|
+
<ConnectProvider
|
|
54
|
+
ss58={0}
|
|
55
|
+
dappName="My Dapp"
|
|
56
|
+
adaptors={[LedgerAdaptor, VaultAdaptor]}
|
|
57
|
+
>
|
|
58
|
+
{/* Your app content */}
|
|
59
|
+
</ConnectProvider>
|
|
60
|
+
)
|
|
40
61
|
}
|
|
41
62
|
```
|
|
42
63
|
|
|
64
|
+
Each adaptor provides its own hooks for interacting with its connection method (e.g., `useLedger` from `@w3ux/ledger-connect`). Browser extension connectivity is built in via `useExtensions` and `useExtensionAccounts`.
|
|
65
|
+
|
|
43
66
|
## Documentation
|
|
44
67
|
|
|
45
68
|
For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/react-connect-kit/overview).
|