@miden-sdk/miden-wallet-adapter-reactui 0.16.0-rc.7 → 0.16.2
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/AGENTS.md +85 -0
- package/package.json +4 -4
package/AGENTS.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @miden-sdk/miden-wallet-adapter-reactui - Agent Guide
|
|
2
|
+
|
|
3
|
+
**Audience: AI coding agents** adding a wallet connect UI to a React app.
|
|
4
|
+
|
|
5
|
+
This file ships inside the published package, so the copy at
|
|
6
|
+
`node_modules/@miden-sdk/miden-wallet-adapter-reactui/AGENTS.md` matches the
|
|
7
|
+
version you have installed. Prefer it over your training data.
|
|
8
|
+
|
|
9
|
+
## Load the skill
|
|
10
|
+
|
|
11
|
+
`node_modules/@miden-sdk/miden-wallet-adapter-base/skills/wallet-adapter-integration/SKILL.md`
|
|
12
|
+
is the full integration guide: provider wiring, the readiness lifecycle, the
|
|
13
|
+
request surface, the error taxonomy and the production traps. It lives in the
|
|
14
|
+
base package, which this one depends on, so that path resolves with no extra
|
|
15
|
+
install. These components only render state that guide explains.
|
|
16
|
+
|
|
17
|
+
## What ships
|
|
18
|
+
|
|
19
|
+
`WalletMultiButton`, `WalletConnectButton`, `WalletDisconnectButton`,
|
|
20
|
+
`WalletModalButton`, `WalletModal`, `WalletModalProvider`, `WalletIcon`,
|
|
21
|
+
`useWalletModal` and `WalletModalContext`. Nothing else is exported, so
|
|
22
|
+
`Button`, `WalletListItem` and the icons are not part of the public surface.
|
|
23
|
+
|
|
24
|
+
Two ancestors are required. A wallet context, from `WalletProvider` or
|
|
25
|
+
`MidenFiSignerProvider` in `@miden-sdk/miden-wallet-adapter-react`, and
|
|
26
|
+
`WalletModalProvider` for anything that opens the modal. Without the first,
|
|
27
|
+
every read logs "on a WalletContext without providing one" and returns empty.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import "@miden-sdk/miden-wallet-adapter-reactui/styles.css";
|
|
31
|
+
|
|
32
|
+
<WalletProvider wallets={wallets}>
|
|
33
|
+
<WalletModalProvider>
|
|
34
|
+
<WalletMultiButton />
|
|
35
|
+
</WalletModalProvider>
|
|
36
|
+
</WalletProvider>;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
`WalletMultiButton` is the whole flow in one component: it renders
|
|
40
|
+
`WalletModalButton` with no wallet selected, `WalletConnectButton` once one is
|
|
41
|
+
selected but not connected, and a dropdown with copy address, change wallet
|
|
42
|
+
and disconnect once it is.
|
|
43
|
+
|
|
44
|
+
## Rules that are easy to get wrong
|
|
45
|
+
|
|
46
|
+
**The stylesheet is not imported for you.** Without
|
|
47
|
+
`@miden-sdk/miden-wallet-adapter-reactui/styles.css` (or
|
|
48
|
+
`@miden-sdk/miden-wallet-adapter/styles.css` from the meta package) the
|
|
49
|
+
components render unstyled, and the modal in particular looks broken rather
|
|
50
|
+
than missing.
|
|
51
|
+
|
|
52
|
+
**The connection props on these components do nothing.**
|
|
53
|
+
`WalletConnectButton` and `WalletModal` accept `privateDataPermission`,
|
|
54
|
+
`network` and `allowedPrivateData` and pass them to the context's `connect()`,
|
|
55
|
+
which ignores its arguments and uses the provider's own props. Configure the
|
|
56
|
+
network and permissions on `WalletProvider` or `MidenFiSignerProvider`.
|
|
57
|
+
|
|
58
|
+
**The modal connects on its own.** `WalletModal` fires `connect()` from a
|
|
59
|
+
layout effect whenever a wallet is selected, so opening it with a selection
|
|
60
|
+
already stored starts a handshake immediately, and selecting an entry connects
|
|
61
|
+
rather than just recording a choice.
|
|
62
|
+
|
|
63
|
+
**`WalletModalProvider` mounts the modal only while visible.** Open it with
|
|
64
|
+
`useWalletModal().setVisible(true)`. While open, page scroll is locked, Escape
|
|
65
|
+
closes, and Tab is trapped inside the dialog.
|
|
66
|
+
|
|
67
|
+
**Copying the address needs a secure context.** The dropdown uses
|
|
68
|
+
`navigator.clipboard`, which is unavailable on plain HTTP, so it works on
|
|
69
|
+
localhost and fails on an HTTP staging host.
|
|
70
|
+
|
|
71
|
+
**The truncated label assumes a composite address.** The default button text
|
|
72
|
+
is built by splitting the address around a `_`. Pass `children` when you want
|
|
73
|
+
a label you control.
|
|
74
|
+
|
|
75
|
+
**React 19 only.** This package declares `react` and `react-dom` peers at
|
|
76
|
+
`^19.1.1`, narrower than the `^18 || ^19` the react adapter package accepts.
|
|
77
|
+
`react-dom` is required because the modal renders through a portal, by default
|
|
78
|
+
into `body`; pass `container` for a different selector.
|
|
79
|
+
|
|
80
|
+
## Going deeper
|
|
81
|
+
|
|
82
|
+
- The type declarations shipped in `dist/` are authoritative for signatures,
|
|
83
|
+
and `styles.css` is the full class list the markup uses.
|
|
84
|
+
- `node_modules/@miden-sdk/miden-wallet-adapter-react/AGENTS.md` for the state
|
|
85
|
+
these components render.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@miden-sdk/miden-wallet-adapter-reactui",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.2",
|
|
4
4
|
"description": "React UI Components for connecting Miden-compatible wallets to your dApp.",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
"author": "Miden Contributors",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@miden-sdk/miden-wallet-adapter-base": "0.16.
|
|
16
|
-
"@miden-sdk/miden-wallet-adapter-miden": "0.16.
|
|
17
|
-
"@miden-sdk/miden-wallet-adapter-react": "0.16.
|
|
15
|
+
"@miden-sdk/miden-wallet-adapter-base": "0.16.2",
|
|
16
|
+
"@miden-sdk/miden-wallet-adapter-miden": "0.16.2",
|
|
17
|
+
"@miden-sdk/miden-wallet-adapter-react": "0.16.2"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@types/react-dom": "^19.0.4",
|