Fix DAO stewards' avatars (#363)

ensdomains · Dec 12, 2024 · 6e30b85 · 6e30b85
1 parent 5e666a4
commit 6e30b85
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 61 deletions.
diff --git a/app/.prettierrc b/app/.prettierrc
@@ -1,5 +1,6 @@
 {
     "tabWidth": 4,
     "useTabs": false,
-    "singleQuote": true
+    "singleQuote": true,
+    "trailingComma": "es5"
 }
diff --git a/app/public/fallback-avatar.svg b/app/public/fallback-avatar.svg
diff --git a/app/src/components/mdx/Avatar.tsx b/app/src/components/mdx/Avatar.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import clsx from 'clsx';
+import { useEnsAvatar } from 'wagmi';
+
+type Properties = {
+    name: string;
+    width: number;
+    rounded?: boolean;
+};
+
+export function Avatar({ name, width, rounded }: Properties) {
+    const { data: ensAvatar } = useEnsAvatar({ name, chainId: 1 });
+
+    return (
+        <img
+            src={ensAvatar ?? '/fallback-avatar.svg'}
+            alt={name}
+            width={width}
+            className={clsx(
+                'aspect-square object-cover',
+                rounded && 'rounded-full'
+            )}
+        />
+    );
+}
diff --git a/docs/dao/stewards.mdx b/docs/dao/stewards.mdx
@@ -1,3 +1,5 @@
+import { Avatar } from '@/components/mdx/Avatar'
+
 {/** @type {import('@/lib/mdxPageProps').MdxMetaProps} */}
 export const meta = {
     description: 'Overview of the current governance stewards',
@@ -17,124 +19,124 @@ Read the [full active rules governing the Working Groups](https://docs.ens.domai
 
 ## Current Stewards
 
-### 2024 
+### 2024
 
 #### Meta-Governance Working Group
 
-| <img src="https://enstate.rs/i/5pence.eth" width="200px" alt="5pence.eth" /> | <img src="https://enstate.rs/i/avsa.eth" width="200px" alt="avsa.eth" /> | <img src="https://enstate.rs/i/steward.estmcmxci.eth" width="200px" alt="estmcmxci.eth" />
-| --- | --- | --- |
-| Spence / 5pence.eth | Alex / avsa.eth | Marcus / estmcmxci.eth |
+| <Avatar name="5pence.eth" width={200} /> | <Avatar name="avsa.eth" width={200} /> | <Avatar name="estmcmxci.eth" width={200} /> |
+| ---------------------------------------- | -------------------------------------- | ------------------------------------------- |
+| Spence / 5pence.eth                      | Alex / avsa.eth                        | Marcus / estmcmxci.eth                      |
 
 #### ENS Ecosystem Working Group
 
-| <img src="https://enstate.rs/i/slobo.eth" width="200px" alt="slobo.eth" /> | <img src="https://enstate.rs/i/limes.eth" width="200px" alt="limes.eth" /> | <img src="https://enstate.rs/i/184.eth" width="200px" alt="184.eth" />
-| --- | --- | --- |
-| slobo.eth | limes.eth | 184.eth |
+| <Avatar name="slobo.eth" width={200} /> | <Avatar name="limes.eth" width={200} /> | <Avatar name="184.eth" width={200} /> |
+| --------------------------------------- | --------------------------------------- | ------------------------------------- |
+| slobo.eth                               | limes.eth                               | 184.eth                               |
 
 #### Public Goods Working Group
 
-| <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://enstate.rs/i/simona.eth" width="200px" alt="Simona / simona.eth" /> | <img src="https://enstate.rs/i/vegayp.eth" width="200px" alt="vegayp.eth" /> |
-| --- | --- | --- |
-| coltron.eth | Simona / simona.eth | vegayp.eth |
+| <Avatar name="coltron.eth" width={200} /> | <Avatar name="simona.eth" width={200} /> | <Avatar name="vegayp.eth" width={200} /> |
+| ----------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| coltron.eth                               | Simona / simona.eth                      | vegayp.eth                               |
 
 ## Past Stewards
 
 ### 2023 Q3/Q4
 
 #### Meta-Governance Working Group
 
-| <img src="https://enstate.rs/i/nick.eth" width="200px" alt="nick.eth" /> | <img src="https://enstate.rs/i/5pence.eth" width="200px" alt="5pence.eth" /> | <img src="https://enstate.rs/i/katherineykwu.eth" width="200px" alt="Katherine Wu / katherineykwu.eth" />
-| --- | --- | --- |
-| Nick Johnson / nick.eth | Spence / 5pence.eth | Katherine Wu / katherineykwu.eth |
+| <Avatar name="nick.eth" width={200} /> | <Avatar name="5pence.eth" width={200} /> | <Avatar name="katherine.eth" width={200} /> |
+| -------------------------------------- | ---------------------------------------- | ------------------------------------------- |
+| Nick Johnson / nick.eth                | Spence / 5pence.eth                      | Katherine Wu / katherine.eth                |
 
 #### ENS Ecosystem Working Group
 
-| <img src="https://enstate.rs/i/slobo.eth" width="200px" alt="slobo.eth" /> | <img src="https://enstate.rs/i/limes.eth" width="200px" alt="limes.eth" /> | <img src="https://enstate.rs/i/184.eth" width="200px" alt="184.eth" />
-| --- | --- | --- |
-| slobo.eth | limes.eth | 184.eth |
+| <Avatar name="slobo.eth" width={200} /> | <Avatar name="limes.eth" width={200} /> | <Avatar name="184.eth" width={200} /> |
+| --------------------------------------- | --------------------------------------- | ------------------------------------- |
+| slobo.eth                               | limes.eth                               | 184.eth                               |
 
 #### Public Goods Working Group
 
-| <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://enstate.rs/i/simona.eth" width="200px" alt="Simona / simona.eth" /> | <img src="https://enstate.rs/i/vegayp.eth" width="200px" alt="vegayp.eth" /> |
-| --- | --- | --- |
-| coltron.eth | Simona / simona.eth | vegayp.eth |
+| <Avatar name="coltron.eth" width={200} /> | <Avatar name="simona.eth" width={200} /> | <Avatar name="vegayp.eth" width={200} /> |
+| ----------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| coltron.eth                               | Simona / simona.eth                      | vegayp.eth                               |
 
 ### 2023 Q1/Q2
 
 #### Meta-Governance Working Group
 
-| <img src="https://enstate.rs/i/nick.eth" width="200px" alt="nick.eth" /> | <img src="https://enstate.rs/i/simona.eth" width="200px" alt="simona.eth" /> | <img src="https://enstate.rs/i/katherineykwu.eth" width="200px" alt="Katherine Wu / katherineykwu.eth" />
-| --- | --- | --- |
-| nick.eth | simona.eth | Katherine Wu |
+| <Avatar name="nick.eth" width={200} /> | <Avatar name="simona.eth" width={200} /> | <Avatar name="katherine.eth" width={200} /> |
+| -------------------------------------- | ---------------------------------------- | ------------------------------------------- |
+| nick.eth                               | simona.eth                               | Katherine Wu                                |
 
 #### ENS Ecosystem Working Group
 
-| <img src="https://enstate.rs/i/slobo.eth" width="200px" alt="slobo.eth" /> | <img src="https://pbs.twimg.com/profile_images/1590768794418515968/nWP__xD1_400x400.png" width="200px" alt="limes.eth" /> | <img src="https://enstate.rs/i/yambo.eth" width="200px" alt="yambo.eth" /> |
-| --- | --- | --- |
-| slobo.eth | limes.eth | yambo.eth |
+| <Avatar name="slobo.eth" width={200} /> | <Avatar name="limes.eth" width={200} /> | <Avatar name="yambo.eth" width={200} /> |
+| --------------------------------------- | --------------------------------------- | --------------------------------------- |
+| slobo.eth                               | limes.eth                               | yambo.eth                               |
 
 #### Public Goods Working Group
 
-| <img src="https://enstate.rs/i/avsa.eth" width="200px" alt="avsa.eth" /> | <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://pbs.twimg.com/profile_images/1643005453599744005/vjespTkK_400x400.png" width="200px" alt="vegayp.eth" /> |
-| --- | --- | --- |
-| avsa.eth | coltron.eth | vegayp.eth |
+| <Avatar name="avsa.eth" width={200} /> | <Avatar name="coltron.eth" width={200} /> | <Avatar name="vegayp.eth" width={200} /> |
+| -------------------------------------- | ----------------------------------------- | ---------------------------------------- |
+| avsa.eth                               | coltron.eth                               | vegayp.eth                               |
 
 ### 2022 Q3/Q4
 
 #### Meta-Governance
 
-| <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://enstate.rs/i/simona.eth" width="200px" alt="simona.eth" /> | <img src="https://enstate.rs/i/nick.eth" width="200px" alt="nick.eth" /> |
-| --- | --- | --- |
-| coltron.eth | simona.eth | nick.eth |
+| <Avatar name="coltron.eth" width={200} /> | <Avatar name="simona.eth" width={200} /> | <Avatar name="nick.eth" width={200} /> |
+| ----------------------------------------- | ---------------------------------------- | -------------------------------------- |
+| coltron.eth                               | simona.eth                               | nick.eth                               |
 
 #### ENS Ecosystem
 
-| <img src="https://enstate.rs/i/bobjiang.eth" width="200px" alt="bobjiang.eth" /> | <img src="https://enstate.rs/i/validator.eth" width="200px" alt="validator.eth" /> | <img src="https://enstate.rs/i/slobo.eth" width="200px" alt="slobo.eth" /> |
-| --- | --- | --- |
-| bobjiang.eth | validator.eth | slobo.eth |
+| <Avatar name="bobjiang.eth" width={200} /> | <Avatar name="validator.eth" width={200} /> | <Avatar name="slobo.eth" width={200} /> |
+| ------------------------------------------ | ------------------------------------------- | --------------------------------------- |
+| bobjiang.eth                               | validator.eth                               | slobo.eth                               |
 
 #### Community
 
-| <img src="https://pbs.twimg.com/profile_images/1590768794418515968/nWP__xD1_400x400.png" width="200px" alt="limes.eth" /> | <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://enstate.rs/i/validator.eth" width="200px" alt="validator.eth" /> |
-| --- | --- | --- |
-| limes.eth | coltron.eth | validator.eth |
+| <Avatar name="limes.eth" width={200} /> | <Avatar name="coltron.eth" width={200} /> | <Avatar name="validator.eth" width={200} /> |
+| --------------------------------------- | ----------------------------------------- | ------------------------------------------- |
+| limes.eth                               | coltron.eth                               | validator.eth                               |
 
 #### Public Goods
 
-| <img src="https://enstate.rs/i/anthonyware.eth" width="200px" alt="anthonyware.eth" /> | <img src="https://enstate.rs/i/ceresstation.eth" width="200px" alt="ceresstation.eth" /> | <img src="https://enstate.rs/i/avsa.eth" width="200px" alt="avsa.eth" /> |
-| --- | --- | --- |
-| anthonyware.eth | ceresstation.eth | avsa.eth |
+| <Avatar name="anthonyware.eth" width={200} /> | <Avatar name="ceresstation.eth" width={200} /> | <Avatar name="avsa.eth" width={200} /> |
+| --------------------------------------------- | ---------------------------------------------- | -------------------------------------- |
+| anthonyware.eth                               | ceresstation.eth                               | avsa.eth                               |
 
 ### 2022 Q1/Q2
 
 #### Meta-Governance
 
-| <img src="https://openseauserdata.com/files/906f656774ab63f3186d8c8248a5bde9.svg" width="200px" alt="jmj.eth" /> | <img src="https://enstate.rs/i/simona.eth" width="200px" alt="simona.eth" /> | <img src="https://enstate.rs/i/james.eth" width="200px" alt="james.eth" /> |
-| --- | --- | --- |
-| jmj.eth | simona.eth | james.eth |
-| <img src="https://enstate.rs/i/nick.eth" width="200px" alt="nick.eth" /> | <img src="https://enstate.rs/i/leontalbert.eth" width="200px" alt="leontalbert.eth" /> |  |
-| nick.eth | leontalbert.eth |  |
+| <Avatar name="jmj.eth" width={200} />  | <Avatar name="simona.eth" width={200} />      | <Avatar name="james.eth" width={200} /> |
+| -------------------------------------- | --------------------------------------------- | --------------------------------------- |
+| jmj.eth                                | simona.eth                                    | james.eth                               |
+| <Avatar name="nick.eth" width={200} /> | <Avatar name="leontalbert.eth" width={200} /> |                                         |
+| nick.eth                               | leontalbert.eth                               |                                         |
 
 #### ENS Ecosystem
 
-| <img src="https://enstate.rs/i/ginge.eth" width="200px" alt="ginge.eth" /> | <img src="https://enstate.rs/i/slobo.eth" width="200px" alt="slobo.eth" /> | <img src="https://enstate.rs/i/bobjiang.eth" width="200px" alt="bobjiang.eth" /> |
-| --- | --- | --- |
-| ginge.eth | slobo.eth | bobjiang.eth |
-| <img src="https://enstate.rs/i/nick.eth" width="200px" alt="nick.eth" /> | <img src="https://enstate.rs/i/jefflau.eth" width="200px" alt="jefflau.eth" /> |  |
-| nick.eth | jefflau.eth |  |
+| <Avatar name="ginge.eth" width={200} /> | <Avatar name="slobo.eth" width={200} />   | <Avatar name="bobjiang.eth" width={200} /> |
+| --------------------------------------- | ----------------------------------------- | ------------------------------------------ |
+| ginge.eth                               | slobo.eth                                 | bobjiang.eth                               |
+| <Avatar name="nick.eth" width={200} />  | <Avatar name="jefflau.eth" width={200} /> |                                            |
+| nick.eth                                | jefflau.eth                               |                                            |
 
 #### Community
 
-| <img src="https://enstate.rs/i/limes.eth" width="200px" alt="limes.eth" /> | <img src="https://enstate.rs/i/coltron.eth" width="200px" alt="coltron.eth" /> | <img src="https://enstate.rs/i/spencecoin.eth" width="200px" alt="spencecoin.eth" /> |
-| --- | --- | --- |
-| limes.eth | coltron.eth | spencecoin.eth |
-| <img src="https://enstate.rs/i/brantly.eth" width="200px" alt="brantly.eth" /> | <img src="https://enstate.rs/i/validator.eth" width="200px" alt="validator.eth" /> |  |
-| brantly.eth | validator.eth |  |
+| <Avatar name="limes.eth" width={200} />   | <Avatar name="coltron.eth" width={200} />   | <Avatar name="spencecoin.eth" width={200} /> |
+| ----------------------------------------- | ------------------------------------------- | -------------------------------------------- |
+| limes.eth                                 | coltron.eth                                 | spencecoin.eth                               |
+| <Avatar name="brantly.eth" width={200} /> | <Avatar name="validator.eth" width={200} /> |                                              |
+| brantly.eth                               | validator.eth                               |                                              |
 
 #### Public Goods
 
-| <img src="https://enstate.rs/i/sumedha.eth" width="200px" alt="sumedha.eth" /> | <img src="https://enstate.rs/i/ceresstation.eth" width="200px" alt="ceresstation.eth" /> | <img src="https://enstate.rs/i/avsa.eth" width="200px" alt="avsa.eth" /> |
-| --- | --- | --- |
-| sumedha.eth | ceresstation.eth | avsa.eth |
-| <img src="https://enstate.rs/i/matoken.eth" width="200px" alt="matoken.eth" /> | <img src="https://enstate.rs/i/ricmoo.eth" width="200px" alt="ricmoo.eth" /> |  |
-| matoken.eth | ricmoo.eth |  |
+| <Avatar name="sumedha.eth" width={200} /> | <Avatar name="ceresstation.eth" width={200} /> | <Avatar name="avsa.eth" width={200} /> |
+| ----------------------------------------- | ---------------------------------------------- | -------------------------------------- |
+| sumedha.eth                               | ceresstation.eth                               | avsa.eth                               |
+| <Avatar name="matoken.eth" width={200} /> | <Avatar name="ricmoo.eth" width={200} />       |                                        |
+| matoken.eth                               | ricmoo.eth                                     |                                        |