Skip to content

Include ENS support by default in exported apps #406

Description

@pasevin

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions