You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs(uikit): polish pages and share dev libraries nav
- Refine UIKit MDX copy across architecture, components, and guides.
- Treat /tools as ecosystem-aware shared paths; merge Ecosystem Adapters + UIKit from shared/developer-libraries.json to avoid nav duplication.
Copy file name to clipboardExpand all lines: content/tools/uikit/architecture.mdx
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ flowchart TD
39
39
40
40
| Layer | Package | Responsibility |
41
41
| --- | --- | --- |
42
-
| 1 |`@openzeppelin/ui-types`| TypeScript interfaces for capabilities, schemas, form models, networks, transactions, and execution config. No runtime code — pure type definitions. |
42
+
| 1 |`@openzeppelin/ui-types`| TypeScript interfaces for capabilities, schemas, form models, networks, transactions, and execution config. No runtime code: pure type definitions. |
43
43
| 2 |`@openzeppelin/ui-utils`| Framework-agnostic helpers: `AppConfigService` for environment/config loading, structured logger, validation utilities, and routing helpers. |
44
44
| 3 |`@openzeppelin/ui-styles`| Tailwind CSS 4 theme tokens using OKLCH color space. Ships CSS variables and custom variants (dark mode). No JavaScript. |
45
45
| 4 |`@openzeppelin/ui-components`| React UI primitives (buttons, dialogs, cards, tabs) and blockchain-aware form fields (address, amount, bytes, enum, map). Built on Radix UI + shadcn/ui patterns. |
@@ -50,16 +50,16 @@ flowchart TD
50
50
<aid="capabilities"></a>
51
51
## Capabilities
52
52
53
-
The UIKit type system defines 13 **capabilities** — small, focused interfaces that describe what an adapter can do.
53
+
The UIKit type system defines 13 **capabilities**: small, focused interfaces that describe what an adapter can do.
54
54
55
55
Capabilities are organized into three tiers based on their requirements:
**Tier 1** requires no runtime context — safe to import anywhere. **Tier 2** needs a `networkConfig`. **Tier 3** additionally needs wallet state and participates in the `dispose()` lifecycle. Each higher tier may import from lower tiers, but never the reverse.
71
+
**Tier 1** requires no runtime context: safe to import anywhere. **Tier 2** needs a `networkConfig`. **Tier 3** additionally needs wallet state and participates in the `dispose()` lifecycle. Each higher tier may import from lower tiers, but never the reverse.
72
72
73
73
| Capability | Tier | Purpose |
74
74
| --- | --- | --- |
@@ -90,7 +90,7 @@ For more background on the adapter pattern and how chain-specific integrations a
90
90
91
91
### Capability Bundles
92
92
93
-
Higher-level components request specific **bundles** of capabilities rather than the full set. For example, `TransactionForm` expects a `TransactionFormCapabilities` type — an intersection of the capabilities needed for form rendering, execution, and status tracking.
93
+
Higher-level components request specific **bundles** of capabilities rather than the full set. For example, `TransactionForm` expects a `TransactionFormCapabilities` type: an intersection of the capabilities needed for form rendering, execution, and status tracking.
94
94
95
95
This means you can pass a partial adapter that only implements what the component actually needs.
96
96
@@ -126,8 +126,8 @@ Adapters support five standard profiles that define which capabilities are inclu
126
126
127
127
| Profile | Use Case | Tier 1 | Tier 2 | Tier 3 |
128
128
| --- | --- | --- | --- | --- |
129
-
|`declarative`| Address formatting, explorer links | ✓ |—|—|
UIKit provides context-driven address resolution that works automatically with `AddressField` and `AddressDisplay`:
136
136
137
-
-**`AddressLabelProvider`** — When mounted, all `AddressDisplay` instances in the subtree auto-resolve human-readable labels (e.g. "Treasury Multisig" instead of `0x1234...abcd`).
138
-
-**`AddressSuggestionProvider`** — When mounted, all `AddressField` instances show autocomplete suggestions as the user types.
139
-
-**`useAddressLabel(address, networkId?)`** — Hook to resolve a label from the nearest provider.
137
+
-**`AddressLabelProvider`**: When mounted, all `AddressDisplay` instances in the subtree auto-resolve human-readable labels (e.g. "Treasury Multisig" instead of `0x1234...abcd`).
138
+
-**`AddressSuggestionProvider`**: When mounted, all `AddressField` instances show autocomplete suggestions as the user types.
139
+
-**`useAddressLabel(address, networkId?)`**: Hook to resolve a label from the nearest provider.
140
140
141
141
## Renderer Widgets
142
142
@@ -210,7 +210,7 @@ import { DynamicFormField } from '@openzeppelin/ui-renderer';
210
210
211
211
Displays read-only contract state by querying view functions. The widget automatically discovers all view functions from the contract schema and renders their return types. Supports auto-refresh to keep values current.
212
212
213
-
Each row shows the function name, return type, and live result — no wallet connection required. Pass `query` and `schema` capabilities from the active runtime:
213
+
Each row shows the function name, return type, and live result. No wallet connection is required. Pass `query` and `schema` capabilities from the active runtime:
@@ -233,7 +233,7 @@ import { ContractStateWidget } from '@openzeppelin/ui-renderer';
233
233
234
234
A full-featured address book UI for managing saved addresses and their human-readable aliases. Supports CRUD operations, search, and import/export.
235
235
236
-
`AddressBookWidget` works with the [`@openzeppelin/ui-storage`](/tools/uikit/storage) package — specifically the **account alias plugin** which persists address-to-name mappings in IndexedDB via Dexie.js. When mounted alongside `AddressLabelProvider` and `AddressSuggestionProvider`, saved aliases automatically appear in all `AddressDisplay` and `AddressField` components throughout the app.
236
+
`AddressBookWidget` works with the [`@openzeppelin/ui-storage`](/tools/uikit/storage) package, specifically the **account alias plugin** which persists address-to-name mappings in IndexedDB via Dexie.js. When mounted alongside `AddressLabelProvider` and `AddressSuggestionProvider`, saved aliases automatically appear in all `AddressDisplay` and `AddressField` components throughout the app.
UIKit uses Tailwind CSS 4 for styling. Components ship class names but **not** compiled CSS — your application's Tailwind build must know where to find them.
66
+
UIKit uses Tailwind CSS 4 for styling. Components ship class names but **not** compiled CSS. Your application's Tailwind build must know where to find them.
67
67
68
68
### Automated Setup (Recommended)
69
69
@@ -167,7 +167,7 @@ function TransferPage({ adapter, contractSchema }) {
167
167
}
168
168
```
169
169
170
-
The `adapter` prop accepts a `TransactionFormCapabilities` object — a bundle of capabilities from your active [Ecosystem Runtime](/tools/uikit/architecture#runtimes).
170
+
The `adapter` prop accepts a `TransactionFormCapabilities` object: a bundle of capabilities from your active [Ecosystem Runtime](/tools/uikit/architecture#runtimes).
171
171
172
172
## Step 4: Wire Up React Providers
173
173
@@ -215,8 +215,8 @@ For the full React integration guide, see [React Integration](/tools/uikit/react
215
215
216
216
## Next Steps
217
217
218
-
-[Architecture](/tools/uikit/architecture) — Understand the package layers, capability tiers, and runtime model
219
-
-[Components](/tools/uikit/components) — Explore UI primitives and blockchain-aware form fields
220
-
-[React Integration](/tools/uikit/react-integration) — Deep dive into providers, hooks, and wallet state
221
-
-[Theming & Styling](/tools/uikit/theming) — Customize tokens, colors, and dark mode
222
-
-[Building New Adapters](/ui-builder/building-adapters) — Background on adapter packages and ecosystem integrations
218
+
-[Architecture](/tools/uikit/architecture): Understand the package layers, capability tiers, and runtime model
219
+
-[Components](/tools/uikit/components): Explore UI primitives and blockchain-aware form fields
220
+
-[React Integration](/tools/uikit/react-integration): Deep dive into providers, hooks, and wallet state
221
+
-[Theming & Styling](/tools/uikit/theming): Customize tokens, colors, and dark mode
222
+
-[Building New Adapters](/ui-builder/building-adapters): Background on adapter packages and ecosystem integrations
Copy file name to clipboardExpand all lines: content/tools/uikit/index.mdx
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: OpenZeppelin UIKit
3
3
---
4
4
5
-
A modular React component library for building blockchain transaction interfaces — chain-agnostic, capability-driven, and designed for multi-ecosystem applications.
5
+
A modular React component library for building blockchain transaction interfaces. It is chain-agnostic, capability-driven, and designed for multi-ecosystem applications.
6
6
7
7
<Callouttype="info">
8
8
**Source code**: OpenZeppelin UIKit is open-source. Browse the implementation, open issues, and contribute at [**github.com/OpenZeppelin/openzeppelin-ui**](https://github.com/OpenZeppelin/openzeppelin-ui).
@@ -21,7 +21,7 @@ A modular React component library for building blockchain transaction interfaces
21
21
22
22
## What is OpenZeppelin UIKit?
23
23
24
-
OpenZeppelin UIKit is a set of modular npm packages that provide everything needed to build rich blockchain UIs in React. Instead of a monolithic library, it ships as a **layered stack**— from low-level types and utilities up to high-level form renderers and wallet integration.
24
+
OpenZeppelin UIKit is a set of modular npm packages that provide everything needed to build rich blockchain UIs in React. Instead of a monolithic library, it ships as a **layered stack** from low-level types and utilities up to high-level form renderers and wallet integration.
25
25
26
26
Each layer is independently installable. Use only the pieces you need: the type system for a headless integration, the component library for a design system, or the full renderer for turnkey transaction forms.
27
27
@@ -65,8 +65,8 @@ flowchart TD
65
65
66
66
| Package | Description | Layer |
67
67
| --- | --- | --- |
68
-
|[`@openzeppelin/ui-types`](https://www.npmjs.com/package/@openzeppelin/ui-types)| Shared TypeScript type definitions — capabilities, schemas, form models | 1 |
|[`@openzeppelin/ui-styles`](https://www.npmjs.com/package/@openzeppelin/ui-styles)| Centralized Tailwind CSS 4 theme with OKLCH tokens and dark mode | 3 |
71
71
|[`@openzeppelin/ui-components`](https://www.npmjs.com/package/@openzeppelin/ui-components)| React UI primitives and blockchain-aware form fields (shadcn/ui based) | 4 |
UIKit connects to blockchains through ecosystem adapter packages — standalone packages that translate chain-specific operations into the shared capability model. For more background, see [Building New Adapters](/ui-builder/building-adapters).
88
+
UIKit connects to blockchains through ecosystem adapter packages, standalone packages that translate chain-specific operations into the shared capability model. For more background, see [Building New Adapters](/ui-builder/building-adapters).
89
89
90
90
```mermaid
91
91
sequenceDiagram
@@ -117,6 +117,6 @@ For more background on how adapters work and how new ecosystem integrations are
117
117
118
118
## Next Steps
119
119
120
-
-[Getting Started](/tools/uikit/getting-started) — Install, configure, and render your first form
121
-
-[Architecture](/tools/uikit/architecture) — Deep dive into the capability model and runtime lifecycle
122
-
-[Building New Adapters](/ui-builder/building-adapters) — How chain-specific logic is decoupled from the UI
120
+
-[Getting Started](/tools/uikit/getting-started): Install, configure, and render your first form
121
+
-[Architecture](/tools/uikit/architecture): Deep dive into the capability model and runtime lifecycle
122
+
-[Building New Adapters](/ui-builder/building-adapters): How chain-specific logic is decoupled from the UI
Copy file name to clipboardExpand all lines: content/tools/uikit/react-integration.mdx
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ flowchart TD
30
30
31
31
### RuntimeProvider
32
32
33
-
`RuntimeProvider` maintains a **registry of `EcosystemRuntime` instances**— one per network ID. It creates runtimes on demand, caches them, and disposes all of them on unmount.
33
+
`RuntimeProvider` maintains a **registry of `EcosystemRuntime` instances**(one per network ID). It creates runtimes on demand, caches them, and disposes all of them on unmount.
0 commit comments