OpenZeppelin / OpenZeppelin/ui-builder
Include ENS support by default in exported apps
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 48
- Forks
- 23
- Avg merge
- 3h 1m
- Merged PRs (30d)
- 10
Description
Summary
Exported apps generated by UI Builder should ship the full ENS / name-resolution featureset by default, matching what the builder app and the other consuming apps (role-manager, rwa-wizard) now provide. Today exported apps only get partial (forward-only) resolution, so end users of a generated dApp don't see the resolved-address UX.
Current state
After #401, the export scaffolding (apps/builder/src/export/codeTemplates/main.template.tsx) wires forward name resolution:
RuntimeProvider+WalletStateProvider+ aNameResolverBridge(useRuntimeNameResolver→NameResolverProvider)createRuntime(..., { nameResolution: { enableMainnetL1MissFallback: true } })
So typing an ENS name into an address input in an exported app resolves forward. Missing in exported apps:
- Reverse resolution — no
AddressNameResolutionProvider, soAddressDisplaysurfaces show raw hex instead of name + avatar. - Rich resolved-address preview — the generated form fields render a plain
AddressField, notAddressFieldWithResolvedPreview/ResolvedAddressFieldPreviewWithNameResolution, so there's no preview card. - Network-scoped resolution — no wiring for resolving against a target network different from the wallet-global active network (
ui-react@3.3.0useResolveAddress(..., { network })).
Root cause (the leverage point)
The generated forms render via ui-renderer's TransactionForm / DynamicFormField, which maps a blockchain-address field to a bare AddressField. Until DynamicFormField maps blockchain-address to AddressFieldWithResolvedPreview (or exposes a registry override), neither the builder's own form preview nor exported apps get the rich ENS UX — regardless of provider wiring. (Flagged during the ENS integration round-2 work.)
Proposal
Enable the full ENS featureset by default in exported apps (and, as a by-product, in the builder's live form preview):
- ui-renderer: map
blockchain-addressinDynamicFormField/TransactionFormtoAddressFieldWithResolvedPreview(with the renderer'sResolvedAddressFieldPreviewWithNameResolutionbridge), or expose a field-registry override the builder can opt into. This is the primary change and benefits every renderer consumer. - ui-builder export template (
main.template.tsx): add reverse-resolution provider wiring (AddressNameResolutionProvider) soAddressDisplaysurfaces resolve names, and thread the network-scopednetworkprop where a surface can target a network other than the wallet-global one. - Keep it opt-outable: a builder export setting (default ON) to include ENS wiring, for teams that want a minimal bundle.
- Update export codegen snapshot/fixture tests (
apps/builder/src/export/__tests__/…) accordingly.
Acceptance criteria
- A freshly exported app resolves ENS forward (name → address) in address inputs. (already works — keep as regression coverage)
- A freshly exported app resolves ENS reverse (address → name + avatar) on
AddressDisplaysurfaces. - Address inputs in exported apps show the rich resolved-address preview card.
- Mainnet-L1 opt-in fallback works in exported apps (mainnet-only names resolve on testnets when enabled), with the standard cross-network disclaimer.
- Behavior is consistent between the builder's live form preview and the exported app.
- ENS wiring can be toggled off via an export setting (default on).
- Export snapshot tests updated.
Notes
- Depends on published floors:
ui-components ^3.8.0,ui-react ^3.3.0,ui-renderer ^3.4.0(already adopted by the builder in #401). - Primary code change lands in
openzeppelin-ui(ui-rendererDynamicFormField); the builder change is provider wiring + an export toggle + snapshot updates.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with ui-renderer's DynamicFormField/TransactionForm mapping and the export template at apps/builder/src/export/codeTemplates/main.template.tsx. Then inspect the export snapshot and fixture tests under apps/builder/src/export/tests/, along with the existing provider wiring from #401. Done means exported and live-preview forms support the listed ENS behaviors, the export setting defaults on but can be disabled, and snapshots cover the generated output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- blockchain, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100