add twitter link to avatar image

Author: pettinarip

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

@@ -1,8 +1,4 @@
-import {
-  AvatarBase as Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
+import { Avatar } from "@/components/ui/avatar"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Card,
@@ -18,6 +14,7 @@ import { cn } from "@/lib/utils/cn"
 import Curved10YearsText from "./10y.svg"
 
 import {
+  extractTwitterHandle,
   formatAddress,
   getAvatarImage,
   getTxEtherscanUrl,
@@ -78,15 +75,12 @@ const CurrentTorchHolderCard = ({
       <CardContent className="p-6">
         {currentHolder ? (
           <div className="flex items-start gap-4">
-            <Avatar className="h-19 w-19 !shadow-none">
-              <AvatarImage
-                src={getAvatarImage(currentHolder)}
-                alt={`Avatar for ${currentHolder.name || currentHolder.address}`}
-              />
-              <AvatarFallback>
-                {currentHolder.name || formatAddress(currentHolder.address)}
-              </AvatarFallback>
-            </Avatar>
+            <Avatar
+              className="h-19 w-19 !shadow-none"
+              src={getAvatarImage(currentHolder)}
+              href={`https://x.com/${extractTwitterHandle(currentHolder.twitter)}`}
+              name={currentHolder.name || formatAddress(currentHolder.address)}
+            />
 
             <div className="flex flex-col">
               {/* Name */}

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

@@ -1,22 +1,23 @@
 import React from "react"
 
-import {
-  AvatarBase as Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
+import { Avatar } from "@/components/ui/avatar"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { BaseLink } from "@/components/ui/Link"
 import { Tag } from "@/components/ui/tag"
 
 import { cn } from "@/lib/utils/cn"
 
-import { formatDate, getTxEtherscanUrl } from "@/lib/torch"
+import {
+  extractTwitterHandle,
+  formatDate,
+  getTxEtherscanUrl,
+} from "@/lib/torch"
 
 interface TorchHistoryCardProps {
   name: string
   role: string
   avatar: string
+  twitter: string
   from: number
   to: number
   transactionHash: string
@@ -29,6 +30,7 @@ const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
   name,
   role,
   avatar,
+  twitter,
   from,
   to,
   transactionHash,
@@ -48,10 +50,12 @@ const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
     >
       <CardHeader className="flex flex-col p-0">
         <div className="mb-4 flex flex-col items-center">
-          <Avatar className="h-32 w-32 border-2 border-gray-100/50 !shadow-none">
-            <AvatarImage src={avatar} alt={`Avatar for ${name}`} />
-            <AvatarFallback>{name}</AvatarFallback>
-          </Avatar>
+          <Avatar
+            className="h-32 w-32 border-2 border-gray-100/50 !shadow-none"
+            src={avatar}
+            href={`https://x.com/${extractTwitterHandle(twitter)}`}
+            name={name}
+          />
         </div>
 
         {isCurrentHolder && (

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

@@ -89,6 +89,7 @@ const TorchHistorySwiper = ({
                   ? "/images/10-year-anniversary/torch-cover.webp"
                   : getAvatarImage(card)
               }
+              twitter={card.twitter}
               from={card.event.timestamp}
               to={card.event.timestamp}
               transactionHash={card.event.transactionHash}

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

@@ -114,7 +114,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
     const currentHolderAddress = await getCurrentHolderAddress()
     const isFiltered = isAddressFiltered(currentHolderAddress)
     const currentHolderEvent = torchHoldersEvents.find(
-      (holder) => holder.address === currentHolderAddress
+      (holder) => holder.address === currentHolderAddress.toLowerCase()
     )
 
     currentHolder = !isFiltered ? (currentHolderEvent ?? null) : null

next.config.js

@@ -93,6 +93,10 @@ module.exports = (phase, { defaultConfig }) => {
           protocol: "https",
           hostname: "coin-images.coingecko.com",
         },
+        {
+          protocol: "https",
+          hostname: "unavatar.io",
+        },
       ],
     },
     async headers() {

src/components/ui/avatar.tsx

@@ -167,8 +167,8 @@ const Avatar = React.forwardRef<
             {src ? (
               <Image
                 className="object-fill"
-                width={64}
-                height={64}
+                width={128}
+                height={128}
                 sizes="4rem"
                 src={src}
                 alt={name}
@@ -189,8 +189,8 @@ const Avatar = React.forwardRef<
         {src ? (
           <Image
             className="object-fill"
-            width={64}
-            height={64}
+            width={128}
+            height={128}
             sizes="4rem"
             src={src}
             alt={name}

src/lib/torch/index.ts

@@ -148,7 +148,7 @@ export const getAvatarImage = (holder: TorchHolderMetadata | null) => {
   return getBlockieImage(holder.address)
 }
 
-const extractTwitterHandle = (twitterUrl: string): string | null => {
+export const extractTwitterHandle = (twitterUrl: string): string | null => {
   // Handle various Twitter URL formats
   const patterns = [
     /twitter\.com\/([^/?]+)/, // twitter.com/username