Merge pull request #15901 from ethereum/master

master -> staging

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,14 +14,15 @@ import { cn } from "@/lib/utils/cn"
 import Curved10YearsText from "./10y.svg"
 
 import {
+  extractTwitterHandle,
   formatAddress,
-  getAddressEtherscanUrl,
   getAvatarImage,
-  type TorchHolderMetadata,
+  getTxEtherscanUrl,
+  type TorchHolderEvent,
 } from "@/lib/torch"
 
 interface CurrentTorchHolderCardProps {
-  currentHolder: TorchHolderMetadata | null
+  currentHolder: TorchHolderEvent | null
   isBurned?: boolean
   className?: string
 }
@@ -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 */}
@@ -98,7 +92,7 @@ const CurrentTorchHolderCard = ({
               {/* Verify onchain link */}
               <BaseLink
                 className="mt-2 text-xs"
-                href={getAddressEtherscanUrl(currentHolder.address)}
+                href={getTxEtherscanUrl(currentHolder.event.transactionHash)}
               >
                 View on Etherscan
               </BaseLink>

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

@@ -1,24 +1,25 @@
 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
+  to?: number
   transactionHash: string
   className?: string
   isCurrentHolder?: boolean
@@ -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 && (
@@ -74,7 +78,8 @@ const TorchHistoryCard: React.FC<TorchHistoryCardProps> = ({
         {!isPlaceholder && (
           <>
             <div className="text-xs text-gray-500">
-              From {formatDate(from)} to {formatDate(to)}
+              From {formatDate(from)}
+              {to !== undefined ? ` to ${formatDate(to)}` : " to present"}
             </div>
             <BaseLink
               href={getTxEtherscanUrl(transactionHash)}

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

@@ -19,6 +19,22 @@ type TorchHistorySwiperProps = {
   currentHolderAddress: Address | null
 }
 
+const getOrdinalSuffix = (num: number): string => {
+  const pr = new Intl.PluralRules("en", { type: "ordinal" })
+  const rule = pr.select(num)
+
+  switch (rule) {
+    case "one":
+      return `${num}st`
+    case "two":
+      return `${num}nd`
+    case "few":
+      return `${num}rd`
+    default:
+      return `${num}th`
+  }
+}
+
 const TorchHistorySwiper = ({
   holders,
   currentHolderAddress,
@@ -40,8 +56,8 @@ const TorchHistorySwiper = ({
       // Create placeholder for future holder
       return {
         address: `placeholder-${index}` as Address,
-        name: `Future Bearer ${index + 1}`,
-        role: "Coming soon...",
+        name: `Torchbearer ${index + 1}`,
+        role: `Coming July ${getOrdinalSuffix(20 + index)}!`,
         twitter: "",
         event: {
           from: "0x0000000000000000000000000000000000000000" as Address,
@@ -75,30 +91,43 @@ const TorchHistorySwiper = ({
         modules={[EffectCoverflow, Navigation]}
         className="w-full"
       >
-        {allCards.map((card, idx) => (
-          <SwiperSlide
-            key={idx}
-            className="flex !min-h-[400px] !w-60 justify-center"
-          >
-            <TorchHistoryCard
-              className="!min-h-[400px]"
-              name={card.name}
-              role={card.role}
-              avatar={
-                card.isPlaceholder
-                  ? "/images/10-year-anniversary/torch-cover.webp"
-                  : getAvatarImage(card)
-              }
-              from={card.event.timestamp}
-              to={card.event.timestamp}
-              transactionHash={card.event.transactionHash}
-              isCurrentHolder={
-                !card.isPlaceholder && card.address === currentHolderAddress
-              }
-              isPlaceholder={card.isPlaceholder}
-            />
-          </SwiperSlide>
-        ))}
+        {allCards.map((card, idx) => {
+          // For past holders, "to" is the timestamp of the next holder's event.
+          // For the current holder, "to" is undefined to signify "present".
+          // For placeholders, "to" is the same as "from" (0).
+          const toTimestamp =
+            !card.isPlaceholder && idx < holders.length - 1
+              ? holders[idx + 1].event.timestamp
+              : card.isPlaceholder
+                ? card.event.timestamp
+                : undefined
+
+          return (
+            <SwiperSlide
+              key={idx}
+              className="flex !min-h-[400px] !w-60 justify-center"
+            >
+              <TorchHistoryCard
+                className="!min-h-[400px]"
+                name={card.name}
+                role={card.role}
+                avatar={
+                  card.isPlaceholder
+                    ? "/images/10-year-anniversary/torch-cover.webp"
+                    : getAvatarImage(card)
+                }
+                twitter={card.twitter}
+                from={card.event.timestamp}
+                to={toTimestamp}
+                transactionHash={card.event.transactionHash}
+                isCurrentHolder={
+                  !card.isPlaceholder && card.address === currentHolderAddress
+                }
+                isPlaceholder={card.isPlaceholder}
+              />
+            </SwiperSlide>
+          )
+        })}
         <SwiperNavigation className="mt-8" />
       </Swiper>
     </SwiperContainer>

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

@@ -40,16 +40,16 @@ import {
   parseStoryDates,
 } from "./_components/utils"
 
+import { routing } from "@/i18n/routing"
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
 import { fetchTorchHolders } from "@/lib/api/fetchTorchHolders"
 import {
-  getCurrentHolderAddress,
+  getCurrentHolder,
   getHolderEvents,
   getTransferEvents,
   isAddressFiltered,
   isTorchBurned,
-  TorchHolder,
 } from "@/lib/torch"
 import TenYearLogo from "@/public/images/10-year-anniversary/10-year-logo.png"
 
@@ -92,6 +92,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const adoptionCards = await getAdoptionCards()
 
   // Torch NFT data fetching logic
+  const transferEvents = await getTransferEvents()
+
   const torchHolderMap: Record<string, (typeof allTorchHolders)[0]> =
     allTorchHolders.reduce(
       (acc, holder) => {
@@ -101,30 +103,25 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
       {} as Record<string, (typeof allTorchHolders)[0]>
     )
 
+  const torchHoldersEvents = await getHolderEvents(
+    torchHolderMap,
+    transferEvents
+  )
+
   let isBurned = false
-  let currentHolder: TorchHolder | null = null
   try {
     isBurned = await isTorchBurned()
-    const currentHolderAddress = await getCurrentHolderAddress()
-    const isFiltered = isAddressFiltered(currentHolderAddress)
-
-    currentHolder = isFiltered
-      ? null
-      : torchHolderMap[currentHolderAddress.toLowerCase()]
   } catch (error) {
-    console.error("Error fetching torch data:", error)
+    console.error("Error fetching torch burned status:", error)
   }
-  const transferEvents = await getTransferEvents()
-  const torchHoldersEvents = await getHolderEvents(
-    torchHolderMap,
-    transferEvents
-  )
 
   // Filter out events where the address is in the filtered list
   const torchHolders = torchHoldersEvents.filter(
     (holder) => !isAddressFiltered(holder.address)
   )
 
+  const currentHolder = getCurrentHolder(torchHolders)
+
   return (
     <MainArticle className="mx-auto flex w-full flex-col items-center">
       <TenYearHero locale={locale} />
@@ -488,6 +485,12 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   )
 }
 
+export async function generateStaticParams() {
+  return routing.locales.map((locale) => ({
+    locale,
+  }))
+}
+
 export async function generateMetadata({
   params,
 }: {

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,11 +167,12 @@ const Avatar = React.forwardRef<
             {src ? (
               <Image
                 className="object-fill"
-                width={64}
-                height={64}
+                width={128}
+                height={128}
                 sizes="4rem"
                 src={src}
                 alt={name}
+                quality={90}
               />
             ) : (
               <AvatarImage />
@@ -189,11 +190,12 @@ const Avatar = React.forwardRef<
         {src ? (
           <Image
             className="object-fill"
-            width={64}
-            height={64}
+            width={128}
+            height={128}
             sizes="4rem"
             src={src}
             alt={name}
+            quality={90}
           />
         ) : (
           <AvatarImage />