docs(uikit): add comprehensive UIKit documentation section#145
Open
pasevin wants to merge 39 commits intoOpenZeppelin:mainfrom
Open
docs(uikit): add comprehensive UIKit documentation section#145pasevin wants to merge 39 commits intoOpenZeppelin:mainfrom
pasevin wants to merge 39 commits intoOpenZeppelin:mainfrom
Conversation
Add 6 new documentation pages for OpenZeppelin UIKit: - Overview: package map, architecture diagram, design principles - Getting Started: installation, Tailwind setup, first form - Architecture: package layers, capability tiers, runtime lifecycle - Components: UI primitives, form fields, renderer widgets - React Integration: providers, hooks, wallet state, multi-ecosystem - Theming & Styling: Tailwind v4 tokens, dark mode, customization All pages include Mermaid diagrams and cross-link to Ecosystem Adapters docs. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Register UIKit docs under Open Source Tools in the sidebar navigation with links to all 6 documentation pages. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Place the GitHub repository link in an info Callout at the top of the overview page, matching the pattern used in the Ecosystem Adapters docs. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Replace nested subgraph diagrams with flat color-coded flowcharts. Eliminates overlapping labels and tangled arrows by using: - Individual styled nodes instead of subgraph containers - Minimal dependency arrows (table covers full details) - Stadium-shaped nodes with color legend - Init config for tighter spacing Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Consolidate 13 individual capability nodes into 3 tier blocks that list their capabilities inline. Avoids the squished side-by-side subgraph layout and renders at full readable size. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
- Remove 'replaces the legacy pattern' sentence - Merge three per-tier tables into a single reference table - Add cross-link to Ecosystem Adapters for full capability deep-dive - Keep diagram, tier summary, and Capability Bundles section (UIKit-specific) Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Multisig is not yet implemented — only EOA and Relayer are available. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Capture and embed screenshots from https://openzeppelin-ui.vercel.app/: - Overview: contract interaction UI as hero image - Components: Form Renderer and ContractStateWidget - React Integration: wallet connection UI with network selector Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Remove contract-interactions and contract-state-widget screenshots that showed RPC errors. Replace overview hero with clean form-renderer screenshot. Re-capture wallet-connect screenshot. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
The deployed example app at openzeppelin-ui.vercel.app has a missing app.config.json which prevents runtime initialization. This blocks Contract State Widget and Wallet pages from loading. Keep only the screenshots that render without a runtime: - example-app-overview.png (landing page with ecosystem switcher) - form-renderer.png (schema-driven TransactionForm) Remove broken screenshots: wallet-connect, architecture-example, form-renderer-scroll. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Add animated GIF showing the ContractStateWidget querying live view functions on Sepolia. Displayed in a flex layout with the GIF on the left and description + code example on the right. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…rflow in layout Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…nd nav entry Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
The previous commit reduced the information shown to users (e.g. 'EcosystemRuntir' truncated to fit narrow LR nodes). Restored full descriptive text using bold provider names with descriptions on separate lines, increased node spacing, and set useMaxWidth:false to prevent truncation. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
LR layout with subgraph truncates descriptive text. TD layout without subgraph wrapper allows full-width nodes that display all information. Matches the clean node style used by other UIKit diagrams. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Add wrappingWidth:400 and classDef width:350px to prevent Mermaid from truncating descriptive text in Provider Tree nodes. Use classDef for cleaner style definitions matching other UIKit diagram patterns. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…untimeForNetwork return Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
… examples Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…ateCrudHook, createLiveQueryHook, createJsonFileIO) Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…ents page Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
… for provider tree diagram Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
docs(uikit): add "Why Use the Storage Plugin?" section with real-world examples
…gram-05ec docs(uikit): fix Provider Tree diagram text truncation in React Integration
👷 Deploy request for openzeppelin-docs-v2 pending review.Visit the deploys page to approve it
|
pasevin
changed the title
Replace invalid ecosystem adapter routes with links that exist in this docs site so link validation passes in CI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Documentation Pull Request
Summary
This PR adds a new
UIKitdocumentation section to the OpenZeppelin docs site, including overview, getting started, architecture, components, React integration, theming, and storage pages. It also adds supporting screenshots/diagrams, documents key hooks and storage patterns, and wires the new section into the Ethereum & EVM sidebar navigation.Type of Change
Related Issues
Fixes #
Relates to #
Checklist
pnpm run buildpnpm run checkAdditional Notes
This PR is primarily focused on introducing first-pass UIKit product documentation and improving readability with visuals, package-layer diagrams, capability overviews, and practical integration examples. It also includes a few follow-up fixes to examples and diagram/layout readability that were made while building out the new docs set.