torch nft

Author: pettinarip

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

@@ -1,15 +1,9 @@
-import blockies from "ethereum-blockies-base64"
-import type { Address } from "viem"
-import { sepolia } from "viem/chains"
-import { createConfig, getPublicClient, http } from "@wagmi/core"
-
-import { Image } from "@/components/Image"
 import {
   AvatarBase as Avatar,
   AvatarFallback,
   AvatarImage,
 } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/buttons/Button"
+import { ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Card,
   CardContent,
@@ -22,100 +16,77 @@ import { BaseLink } from "@/components/ui/Link"
 import { cn } from "@/lib/utils/cn"
 
 import Curved10YearsText from "./10y.svg"
-import Torch from "./Torch.json"
-
-import type { TorchHolder } from "@/lib/api/fetchTorchHolders"
-import TorchImage from "@/public/images/10-year-anniversary/torch.png"
-
-const TORCH_CONTRACT_ADDRESS = Torch.address as Address
-const TORCH_ABI = Torch.abi
 
-export const config = createConfig({
-  chains: [sepolia],
-  transports: {
-    [sepolia.id]: http(
-      `https://eth-sepolia.g.alchemy.com/v2/${process.env.ALCHEMY_API_KEY}`
-    ),
-  },
-})
+import {
+  formatAddress,
+  getBlockieImage,
+  type TorchHolderMetadata,
+} from "@/lib/torch"
 
 interface CurrentTorchHolderCardProps {
-  holderLookup?: Record<string, unknown>
+  currentHolder: TorchHolderMetadata
   className?: string
 }
 
-const CurrentTorchHolderCard = async ({
-  holderLookup,
+const CurrentTorchHolderCard = ({
+  currentHolder,
   className,
 }: CurrentTorchHolderCardProps) => {
-  const publicClient = getPublicClient(config)
-
-  // Read current holder from contract
-  const currentHolder = (await publicClient.readContract({
-    address: TORCH_CONTRACT_ADDRESS,
-    abi: TORCH_ABI,
-    functionName: "currentHolder",
-  })) as Address
-
-  const formatAddress = (address: Address) => {
-    return `${address.slice(0, 6)}...${address.slice(-4)}`
-  }
-
-  const getBlockieImage = (address: Address) => {
-    return blockies(address)
-  }
-
-  let holderData: TorchHolder | null = null
-  if (currentHolder && holderLookup) {
-    holderData = holderLookup[currentHolder.toLowerCase()] as TorchHolder
-  }
-
   return (
     <Card
       className={cn("w-full overflow-hidden rounded-3xl shadow-xl", className)}
     >
-      <CardHeader className="p-0">
-        <CardTitle className="relative flex flex-col items-center justify-center bg-[#18193A] p-0 pb-6">
+      <CardHeader className="bg-[#18193A]">
+        <div className="relative">
           {/* Torch/flame video */}
-          <div className="mt-24 flex items-center justify-center">
-            {/* <video
+          <div className="flex items-center justify-center pt-12">
+            <video
+              className="h-[170px] w-[170px] object-cover"
               src="/videos/torch.mp4"
+              aria-label="Torch video"
               autoPlay
               loop
               muted
-            /> */}
-
-            <Image src={TorchImage} alt="Torch" width={170} height={170} />
+              poster="/images/10-year-anniversary/torch-cover.png"
+            />
           </div>
-          {/* Curved text */}
-          <Curved10YearsText className="absolute left-1/2 top-6 -translate-x-1/2" />
-        </CardTitle>
+
+          <CardTitle className="p-0">
+            {/* Curved text */}
+            <Curved10YearsText
+              viewBox="0 0 356 186"
+              className="absolute left-1/2 top-0 h-min w-full max-w-[600px] -translate-x-1/2"
+              width="100%"
+              height="auto"
+            />
+          </CardTitle>
+        </div>
       </CardHeader>
       {/* Bottom section: torchbearer info */}
       <CardContent className="p-6">
         {currentHolder ? (
           <div className="flex items-start gap-4">
-            <Avatar className="h-19 w-19">
+            <Avatar className="h-19 w-19 !shadow-none">
               <AvatarImage
-                src={holderData?.imageUrl || getBlockieImage(currentHolder)}
-                alt={`Avatar for ${holderData?.name || currentHolder}`}
+                src={getBlockieImage(currentHolder.address)}
+                alt={`Avatar for ${currentHolder.name || currentHolder.address}`}
               />
               <AvatarFallback>
-                {holderData?.name || formatAddress(currentHolder)}
+                {currentHolder.name || formatAddress(currentHolder.address)}
               </AvatarFallback>
             </Avatar>
 
             <div className="flex flex-col">
               {/* Name */}
               <div className="text-lg font-bold leading-none">
-                {holderData?.name || formatAddress(currentHolder)}
+                {currentHolder.name || formatAddress(currentHolder.address)}
               </div>
               {/* Description */}
-              <div>{holderData?.description || "Current torchbearer"}</div>
+              <div>{currentHolder.role || "Current torchbearer"}</div>
               {/* Verify onchain link */}
               <BaseLink
                 className="mt-2 text-xs"
-                href={`https://sepolia.etherscan.io/address/${currentHolder}`}
+                href={`https://sepolia.etherscan.io/address/${currentHolder.address}`}
               >
                 View on Etherscan
               </BaseLink>
@@ -126,7 +97,9 @@ const CurrentTorchHolderCard = async ({
         )}
       </CardContent>
       <CardFooter className="justify-center pt-4">
-        <Button variant="outline">See all torchbearers</Button>
+        <ButtonLink href="#torch-history" variant="outline">
+          See all torchbearers
+        </ButtonLink>
       </CardFooter>
     </Card>
   )