From 49fec28cce55f3cc484e8b0694edc42331a79c77 Mon Sep 17 00:00:00 2001 From: Luc Date: Tue, 11 Jun 2024 12:33:50 +0000 Subject: [PATCH] Update Navigation, Fallback, Code Snippets, Reverse Resolution, and Images --- app/local/config/navigation/protocol.ts | 20 ++--- app/public/fallback.svg | 14 ++++ docs/resolution/index.mdx | 8 ++ docs/web/index.mdx | 102 ++++++++++++++++++++++++ docs/web/quickstart.mdx | 12 +-- docs/web/records.mdx | 2 +- 6 files changed, 139 insertions(+), 19 deletions(-) create mode 100644 app/public/fallback.svg diff --git a/app/local/config/navigation/protocol.ts b/app/local/config/navigation/protocol.ts index cf244f1ea..2bdfa6902 100644 --- a/app/local/config/navigation/protocol.ts +++ b/app/local/config/navigation/protocol.ts @@ -83,16 +83,16 @@ export const navigation: SectionData[] = [ title: 'Web & Querying', icon: '🌐', links: [ - { - title: 'Quickstart', - href: '/web/quickstart', - icon: '⚡', - }, { title: 'Tools and Libraries', href: '/web/libraries', icon: '🛠️', }, + { + title: 'Quickstart', + href: '/web/quickstart', + icon: '⚡', + }, { title: 'Address Lookup', href: '/web/resolution', @@ -109,11 +109,6 @@ export const navigation: SectionData[] = [ href: '/web/reverse', icon: '🔍', }, - { - title: 'Multichain', - href: '/web/multichain', - icon: '⛓️', - }, { title: 'List Names', href: '/web/enumerate', @@ -133,6 +128,11 @@ export const navigation: SectionData[] = [ title: 'Issuing Subdomains', href: '/web/subdomains', }, + { + title: 'Multichain', + href: '/web/multichain', + icon: '⛓️', + }, { title: 'Subgraph', href: '/web/subgraph', diff --git a/app/public/fallback.svg b/app/public/fallback.svg new file mode 100644 index 000000000..78670f639 --- /dev/null +++ b/app/public/fallback.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/docs/resolution/index.mdx b/docs/resolution/index.mdx index 4babc724c..67c4a9794 100644 --- a/docs/resolution/index.mdx +++ b/docs/resolution/index.mdx @@ -74,3 +74,11 @@ More about loading information from a resolver can be found [here](/resolvers/in In addition, all of the above functions can be sent to the `resolve()` function, specified in [ENSIP-10](/ensip/10). This allows for not only multicall functionality, but also easier implementation of EIP-3668, and more. + +## Reverse Resolution + +Due to the modular nature of how ENS is designed, it is also possible to lookup the "primary name" of an address. +This process actually uses forward resolution under the hood, you read that right - its just forwards resolution. + +To look up the primary name of a given address you must do a resolver lookup for `addr.reverse` and then query the `name()` field on the resolver. +This name field returns the "preferred" name for the address. Note that the implementing client MUST perform a forward resolution on this name to verify the address matches the one you are looking up. diff --git a/docs/web/index.mdx b/docs/web/index.mdx index 25d9f69d0..e23eada89 100644 --- a/docs/web/index.mdx +++ b/docs/web/index.mdx @@ -10,6 +10,60 @@ export const meta = { This section walks you through how to leverage the ENS open standards to improve the user experience of your app. +
+
+
+ 0x225...c3B5 + 0x179...9285 + 0xd8d...6045 + 0x225...c3B5 + 0x225...c3B5 +
+ + ➡️ + ➡️ + ➡️ + ➡️ + ➡️ + +
+ {[ + 'luc.eth', 'gregskril.eth', 'vitalik.eth', 'luc.cash', 'puma.eth'].map((name) => ( +
+
+ + + +
+ {name} +
+ ))} +
+
+
+ +
+
+
+
+
+ + + +
+ luc.eth +
+
+ + ➡️ + +
+ DevRel @ ENS. Create Epic Shit + 0x225...c3B5 +
+
+
+ ## Quickstart If you are looking to jumpstart your journey with ENS, or you are looking for a quick reference, visit the [Quickstart](/web/quickstart) page. @@ -42,6 +96,33 @@ If you just want to see some code in action we have a variety of codesnippet & t ## Avatars, Addresses & Records +
+
+
+
+ { + ['gregskril.eth', 'matoken.eth', 'luc.eth'].map(name => ( +
+ + + +
+ )) + } +
+
+
+ 0x179...9285 + 0x5A3...0615 + 0x225...c3B5 +
+
+ DevRel @ ENS. Create Epic Shit + Europe/Amsterdam +
+
+
+ Information about a name can be fetched from its resolver, this can be done using pre-built features included in your tooling, or manually by calling the resolver contract directly. If you're interested in interacting with the resolver contract directly, you might find the [Resolver Reference](/resolvers/interfaces) section helpful. @@ -53,6 +134,17 @@ If you're interested in interacting with the resolver contract directly, you mig ## Subnames +
+
+ { + ["vault", "domico", "subname", "nick", "cold"].map((subname, i) => ( +
{subname}
+ )) + } +
+
.nick.eth
+
+ +
+ { + ["vault", "domico", "subname", "nick", "cold"].map((subname, i) => ( +
{subname}
+ )) + } +
+
.eth
+ { const { address } = useAccount(); - const { data: ensName } = useEnsName({ - address, - }); - const { data: ensAvatar } = useEnsAvatar({ - address, - }); + const { data: name } = useEnsName({ address }); + const { data: avatar } = useEnsAvatar({ name }); return (
- {ensName && {ensName}} + {name && {name}} {formatAddress(address)}
diff --git a/docs/web/records.mdx b/docs/web/records.mdx index 42e826bcb..a2baaa0a4 100644 --- a/docs/web/records.mdx +++ b/docs/web/records.mdx @@ -171,7 +171,7 @@ The image is then displayed as a banner on the profile page and tends to be in a
{ - ["luc.eth", "pedrouid.eth", "notben.eth"].map(async (name) => { + ["luc.eth", "pedrouid.eth", "coltron.eth"].map(async (name) => { const request = await fetch("https://worker.enstate.rs/n/" + name); const data = await request.json();