OpenZeppelin / OpenZeppelin/ui-builder

Include ENS support by default in exported apps

Open
#406 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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 + a NameResolverBridge (useRuntimeNameResolverNameResolverProvider)
  • 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, so AddressDisplay surfaces show raw hex instead of name + avatar.
  • Rich resolved-address preview — the generated form fields render a plain AddressField, not AddressFieldWithResolvedPreview / 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.0 useResolveAddress(..., { 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):

  1. ui-renderer: map blockchain-address in DynamicFormField/TransactionForm to AddressFieldWithResolvedPreview (with the renderer's ResolvedAddressFieldPreviewWithNameResolution bridge), or expose a field-registry override the builder can opt into. This is the primary change and benefits every renderer consumer.
  2. ui-builder export template (main.template.tsx): add reverse-resolution provider wiring (AddressNameResolutionProvider) so AddressDisplay surfaces resolve names, and thread the network-scoped network prop where a surface can target a network other than the wallet-global one.
  3. Keep it opt-outable: a builder export setting (default ON) to include ENS wiring, for teams that want a minimal bundle.
  4. 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 AddressDisplay surfaces.
  • 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-renderer DynamicFormField); the builder change is provider wiring + an export toggle + snapshot updates.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.