Update example projects to use materialized `Domain.canonical` after 1.14 upgrade

[sevenzing]

Context

Our public example projects (enskit-react-example, enssdk-example) currently use Domain.name instead of Domain.canonical.name.interpreted because v2-sepolia does not yet expose materialized canonical names. We had inline TODO comments tracking the migration; those have been removed from the examples to keep them clean.

examples/enskit-react-example

src/AccountView.tsx

1. GraphQL query AccountDomainsQuery — In account.domains.edges.node, replace:

   node { __typename id name }

   with:

   node { __typename id canonical { name { interpreted } } }

2. Domain list rendering — Replace the edge.node.name branch with canonical-based links:

   {edge.node.canonical ? (
     <Link to={`/domain/${edge.node.canonical.name.interpreted}`}>
       {beautifyInterpretedName(edge.node.canonical.name.interpreted)}
     </Link>
   ) : (
     <em>non-canonical domain</em>
   )}

src/SearchView.tsx

1. GraphQL query DomainsByNameQuery — In domains.edges.node, replace:

   node { __typename id name }

   with:

   node { __typename id canonical { name { interpreted } } }

2. Search result links — Use edge.node.canonical.name.interpreted for route and display instead of edge.node.name.

src/DomainView.tsx

1. DomainFragment — Add canonical { name { interpreted } } to the fragment (alongside or instead of relying on name).

2. DomainByNameQuery — On parent, replace:

   parent { name }

   with:

   parent { canonical { name { interpreted } } }

3. SubdomainLink — Link and label via domain.canonical.name.interpreted instead of domain.name.

4. Domain page title — Use domain.canonical?.name.interpreted ?? name for the <h2>.

5. Parent breadcrumb — Use data.domain.parent?.canonical for the “← parent” link.

---

examples/enssdk-example

src/index.ts

1. DomainFragment — Add:

   canonical { name { interpreted } }

2. formatDomain() — Derive display name from canonical:

   const name = domain.canonical
     ? beautifyInterpretedName(domain.canonical.name.interpreted)
     : "<unnamed>";

examples/omnigraph-graphql-example

Plain GraphQL + fetch example (no ENSKit or ENS SDK). Same v2-sepolia workaround: uses Domain.name instead of Domain.canonical.name.interpreted.

src/index.ts

1. HELLO_WORLD_QUERY — root domain fields — On domain(by: { name: $name }), replace:

   name

   with:

   canonical { name { interpreted } }

   (and drop direct name if no longer needed)

2. HELLO_WORLD_QUERY — subdomain edges — In subdomains.edges.node, replace:

   edges { node { __typename name owner { address } } }

   with:

   edges { node { __typename canonical { name { interpreted } } owner { address } } }

3. Domain interface — Add canonical typing and stop relying on top-level name for display:

   interface Domain {
     __typename: "ENSv1Domain" | "ENSv2Domain";
     canonical: { name: { interpreted: string } } | null;
     owner: { address: string } | null;
   }

4. formatDomain() — Derive display name from canonical:

   const name = domain.canonical?.name.interpreted ?? "<unnamed>";

[coderabbitai]

🔗 Related PRs

#1654 - feat: implement canonical filter for findDomains [merged]
#2044 - feat: improve enskit example app, update sepolia-v2 addresses [merged]
#2046 - feat(enskit-example): add account browser, refresh sepolia-v2 examples [merged]
#2103 - docs: add sandbox and ensv2readiness [merged]
#2142 - docs pass & omnigraph overview [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!