Patch Content

ensdomains · Dec 4, 2023 · e872546 · e872546
1 parent d64a5e6
commit e872546
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 23 deletions.
diff --git a/content/web/avatars.mdx b/content/web/avatars.mdx
@@ -12,13 +12,6 @@ contributors: [
 Personalization of profiles is what makes identity great.
 This page covers the very special **avatar** record that enables users to take their avatar with them across the web.
 
-## Getting the user's Avatar {{ navtitle: 'Getting an Avatar', id: 'avatars', tag: 'Avatar' }}
-
-### On-chain lookup
-
-Avatars are an awesome way for users to express themselves. To get the user's avatar, all you need is their **name**. If you only have their address, see [primary names](/web/reverse#get).
-The following code snippets let you get the avatar for a user.
-
 <div className="card px-8 py-4 flex justify-center items-center gap-3 not-prose">
   <span>luc.eth</span>
   <span>➡️</span>
@@ -31,6 +24,13 @@ The following code snippets let you get the avatar for a user.
   </div>
 </div>
 
+## Getting the user's Avatar {{ navtitle: 'Getting an Avatar', id: 'avatars', tag: 'Avatar' }}
+
+### On-chain lookup
+
+Avatars are an awesome way for users to express themselves. To get the user's avatar, all you need is their **name**. If you only have their address, see [primary names](/web/reverse#get).
+The following code snippets let you get the avatar for a user.
+
 <CodeGroup title="Request">
 
 ```tsx {{ variant: 'wagmi', link: 'https://wagmi.sh/react/hooks/useEnsAvatar', stackblitz: 'https://stackblitz.com/edit/ens-wagmi-use-ens-avatar' }}

diff --git a/content/web/enumerate.mdx b/content/web/enumerate.mdx
@@ -1,9 +1,9 @@
-{/** @type {import('@/lib/mdxPageProps').MdxMetaProps} */}
+{/* * @type {import('@/lib/mdxPageProps').MdxMetaProps} */}
 export const meta = {
-    description: '',
-    contributors: [
-        'lucemans'
-    ]
+description: '',
+contributors: [
+'lucemans'
+]
 };
 
 # Listing a Users Names
@@ -15,9 +15,9 @@ Luckily tooling has been written to accomodate for this and to make it easier.
     <span>0x225...c3B5</span>
     <span>➡️</span>
     <div className="block border-l-2 pl-2">
-      <div>luc.eth</div>
-      <div>lucemans.eth</div>
-      <div>keukenrol.eth</div>
+        <div>luc.eth</div>
+        <div>lucemans.eth</div>
+        <div>keukenrol.eth</div>
     </div>
 </div>
 
@@ -33,6 +33,26 @@ these are on-chain, and indexable through scanning events on the appropriate con
 When using one of the methods described below It is important to keep in mind that you should always allow for a user to manually enter a name, as not all names are indexable.
 It is generally recommended to allow users to input a name using an [input box](todo-link) and to verify it resolves to the correct address upon user-completion.
 
+<div className="border border-ens-light-border dark:border-ens-dark-border rounded-md not-prose grid grid-cols-2">
+  <div className="flex flex-col">
+    <div className="grow p-2 flex items-center justify-center">
+      <span>Hello</span>
+    </div>
+    <div className="bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary px-4 py-2 space-x-1">
+      <span className="text-ens-light-blue-primary dark:text-ens-dark-blue-primary">Do</span><span>- Fallback to raw name entry</span>
+    </div>
+  </div>
+  <div className="flex flex-col border-l border-ens-light-border dark:border-ens-dark-border">
+    <div className="grow p-2 flex items-center justify-center">
+
+    </div>
+    <div className="bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary px-4 py-2 space-x-1">
+      <span className="text-ens-light-red-bright dark:text-ens-dark-red-bright">Don't</span><span>- Assume all names are owned</span>
+    </div>
+
+  </div>
+</div>
+
 ## Alchemy {{ title: "Alchemy" }}
 
 The Alchemy platform has provided several endpoints for interacting with ENS names aswell as to query a list of names a user has.
@@ -42,15 +62,15 @@ The Alchemy platform has provided several endpoints for interacting with ENS nam
 import { Alchemy, Network } from "alchemy-sdk";
 
 const config = {
-  apiKey: "<-- ALCHEMY APP API KEY -->",
-  network: Network.ETH_MAINNET,
+    apiKey: "<-- ALCHEMY APP API KEY -->",
+    network: Network.ETH_MAINNET,
 };
 const alchemy = new Alchemy(config);
 
 const walletAddress = "0x458d1E307CcA61C0Bea82f7663F66831175EcDe8"; // replace with wallet address
 const ensContractAddress = "0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85";
 const nfts = await alchemy.nft.getNftsForOwner(walletAddress, {
-  contractAddresses: [ensContractAddress],
+    contractAddresses: [ensContractAddress],
 });
 
 console.log(nfts);

diff --git a/content/web/index.mdx b/content/web/index.mdx
@@ -9,9 +9,11 @@ contributors: []
 
 # Getting Started
 
+This section walks you through how to leverage the ENS open standards to improve the user experience of your app.
+
 ## Quickstart
 
-This guide is intended for new users
+This guide is intended for new users, if you are a returning 
 
 <EmbedLink
     href="/web/quickstart"

diff --git a/content/web/records.mdx b/content/web/records.mdx
@@ -177,7 +177,7 @@ The image is then displayed as a banner on the profile page and tends to be in a
 <div className="not-prose">
     <div className="flex gap-4">
         {
-            ["moxey.eth", "pedrouid.eth", "notben.eth"].map(async (name) => {
+            ["luc.eth", "pedrouid.eth", "notben.eth"].map(async (name) => {
                 const request = await fetch("https://worker.enstate.rs/n/" + name);
                 const data = await request.json();
 

diff --git a/content/web/reverse.mdx b/content/web/reverse.mdx
@@ -12,15 +12,15 @@ export const meta = {
 We can all agree 42-character long machine-optimized addresses (eg. 0x225...c3b5) are not aesthetically pleasing.
 Fortunately, it is super easy to retrieve a user's preferred name, and this page will show you how.
 
-In order to convert them to human-readable names, we use [the reverse registrar](/registry/reverse).
-The reverse registrar is a smart contract that allows users to register their preferred name, referred to as their "primary name" for simplicity purposes.
-
 <div className="card px-8 py-4 flex justify-center gap-2">
     <span>0x225...c3B5</span>
     <span>➡️</span>
     <span>luc.eth</span>
 </div>
 
+In order to convert them to human-readable names, we use [the reverse registrar](/registry/reverse).
+The reverse registrar is a smart contract that allows users to register their preferred name, referred to as their "primary name" for simplicity purposes.
+
 ## Getting a Primary Name {{ navtitle: 'Getting Primary Name', id: 'get' }}
 
 To get a users preferred primary name is very simple. In most libraries you will find a function to do a lookup by address as shown below.
@@ -102,6 +102,24 @@ Most users are expected to do this through the ENS Manager, however it is totall
 
 ```
 
+```ts {{ variant: 'ensjs' }}
+import { createWalletClient, custom } from 'viem';
+import { mainnet } from 'viem/chains';
+
+import { addEnsContracts } from '@ensdomains/ensjs';
+import { setPrimaryName } from '@ensdomains/ensjs/wallet';
+
+const wallet = createWalletClient({
+    chain: addEnsContracts(mainnet),
+    transport: custom(window.ethereum),
+});
+
+const hash = await setPrimaryName(wallet, {
+    name: 'ens.eth',
+});
+// 0x...
+```
+
 </CodeGroup>
 
 ### Do's and Don'ts

diff --git a/content/web/siwe.mdx b/content/web/siwe.mdx
@@ -11,6 +11,12 @@ export const meta = {
 
 Authentication is difficult. SIWE makes life easy.
 
+<div className="card px-8 py-4 flex justify-center gap-2">
+    <span>0x225...c3B5</span>
+    <span>➡️</span>
+    <span>luc.eth</span>
+</div>
+
 ## Specification ([see spec](todo-link)) {{ id: "spec", title: "Specification" }}
 
 The SIWE Specification is rather simple. It describes a message format that a user ought to sign using their keys to be able to sign-in.