handle twitter avatar image

Author: pettinarip

app/[locale]/10years/_components/CurrentTorchHolderCard.tsx

@@ -20,7 +20,7 @@ import Curved10YearsText from "./10y.svg"
 import {
   formatAddress,
   getAddressEtherscanUrl,
-  getBlockieImage,
+  getAvatarImage,
   type TorchHolderMetadata,
 } from "@/lib/torch"
 
@@ -71,7 +71,7 @@ const CurrentTorchHolderCard = ({
           <div className="flex items-start gap-4">
             <Avatar className="h-19 w-19 !shadow-none">
               <AvatarImage
-                src={getBlockieImage(currentHolder.address)}
+                src={getAvatarImage(currentHolder)}
                 alt={`Avatar for ${currentHolder.name || currentHolder.address}`}
               />
               <AvatarFallback>
@@ -97,20 +97,18 @@ const CurrentTorchHolderCard = ({
           </div>
         ) : isBurned ? (
           <div className="flex flex-col items-center gap-4 text-center">
-            <div className="text-2xl font-bold text-red-500">
+            <div className="text-xl font-bold text-red-500">
               🔥 Torch Burned 🔥
             </div>
-            <div className="text-lg">
+            <div>
               The Ethereum Torch has been burned to celebrate the 10-year
               anniversary!
             </div>
           </div>
         ) : (
           <div className="flex flex-col items-center gap-4 text-center">
-            <div className="text-2xl font-bold text-gray-500">
-              🤐 Unknown Bearer
-            </div>
-            <div className="text-lg">
+            <div className="text-xl font-bold">🤐 Unknown Bearer</div>
+            <div>
               The current torch bearer&apos;s identity is not publicly
               available.
             </div>

app/[locale]/10years/_components/TorchHistorySwiper.tsx

@@ -12,7 +12,7 @@ import {
 
 import TorchHistoryCard from "./TorchHistoryCard"
 
-import { getBlockieImage, type TorchHolderEvent } from "@/lib/torch"
+import { getAvatarImage, type TorchHolderEvent } from "@/lib/torch"
 
 type TorchHistorySwiperProps = {
   holders: TorchHolderEvent[]
@@ -87,7 +87,7 @@ const TorchHistorySwiper = ({
               avatar={
                 card.isPlaceholder
                   ? "/images/10-year-anniversary/torch-cover.webp"
-                  : getBlockieImage(card.address)
+                  : getAvatarImage(card)
               }
               from={card.event.timestamp}
               to={card.event.timestamp}

app/[locale]/10years/page.tsx

@@ -43,7 +43,12 @@ import {
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
 import { fetchTorchHolders } from "@/lib/api/fetchTorchHolders"
-import { getCurrentHolderAddress, getHolders } from "@/lib/torch"
+import {
+  getCurrentHolderAddress,
+  getHolders,
+  isAddressFiltered,
+  isTorchBurned,
+} from "@/lib/torch"
 import TenYearLogo from "@/public/images/10-year-anniversary/10-year-logo.png"
 
 export const dynamic = "force-static"
@@ -96,11 +101,13 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       {} as Record<string, (typeof allTorchHolders)[0]>
     )
 
+  const isBurned = await isTorchBurned()
   const currentHolderAddress = await getCurrentHolderAddress()
-  const isBurned =
-    currentHolderAddress === "0x0000000000000000000000000000000000000000"
+  const isFiltered = isAddressFiltered(currentHolderAddress)
 
-  const currentHolder = torchHolderMap[currentHolderAddress.toLowerCase()]
+  const currentHolder = isFiltered
+    ? null
+    : torchHolderMap[currentHolderAddress.toLowerCase()]
   const torchHolders = await getHolders(torchHolderMap)
 
   return (

src/lib/torch/index.ts

@@ -155,13 +155,6 @@ export const getHolders = async (
 export const getCurrentHolderAddress = async () => {
   const publicClient = getPublicClient(config)
 
-  // First check if the torch is burned
-  const isBurned = await isTorchBurned()
-
-  if (isBurned) {
-    return "0x0000000000000000000000000000000000000000" as Address
-  }
-
   // If not burned, get the current holder
   const currentHolderAddress = (await publicClient.readContract({
     address: TORCH_CONTRACT_ADDRESS,
@@ -188,6 +181,41 @@ export const getBlockieImage = (address: Address) => {
   return blockies(address)
 }
 
+export const getAvatarImage = (holder: TorchHolderMetadata | null) => {
+  if (!holder) {
+    return ""
+  }
+
+  // If there's a Twitter handle, use Twitter profile image
+  if (holder.twitter && holder.twitter.trim() !== "") {
+    const twitterHandle = extractTwitterHandle(holder.twitter)
+    if (twitterHandle) {
+      return `https://unavatar.io/twitter/${twitterHandle}`
+    }
+  }
+
+  // Otherwise, fall back to blockie
+  return getBlockieImage(holder.address)
+}
+
+const extractTwitterHandle = (twitterUrl: string): string | null => {
+  // Handle various Twitter URL formats
+  const patterns = [
+    /twitter\.com\/([^/?]+)/, // twitter.com/username
+    /x\.com\/([^/?]+)/, // x.com/username
+    /^@?([a-zA-Z0-9_]{1,15})$/, // @username or username
+  ]
+
+  for (const pattern of patterns) {
+    const match = twitterUrl.match(pattern)
+    if (match) {
+      return match[1]
+    }
+  }
+
+  return null
+}
+
 export const formatAddress = (address: Address) => {
   return `${address.slice(0, 6)}...${address.slice(-4)}`
 }