update hero image

Update hero image, remove unused images.

Author: DustinTurska

apps/playground-web/public/airdrop.avif

@@ -16,7 +16,7 @@ export default function Page() {
             </>
           }
           docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc20/POST/contract/{chain}/{contractAddress}/erc20/mint-batch-to"
-          heroLink="/engine-webhooks.webp"
+          heroLink="/airdrop.avif"
         />
 
         <section>

apps/playground-web/public/engine-webhooks.webp

@@ -15,7 +15,7 @@ export default function Page() {
             </>
           }
           docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc1155/POST/contract/{chain}/{contractAddress}/erc1155/mint-to"
-          heroLink="/engine-webhooks.webp"
+          heroLink="/minting.avif"
         />
 
         <section>

apps/playground-web/public/minting.avif

@@ -15,7 +15,7 @@ export default function Page() {
             </>
           }
           docsLink="https://portal.thirdweb.com/engine/features/webhooks"
-          heroLink="/engine-webhooks.webp"
+          heroLink="/webhooks.avif"
         />
 
         <section>

apps/playground-web/public/webhooks.avif

@@ -48,7 +48,7 @@ export function Sponsorship() {
         throw new Error("Invalid contract address format");
       }
 
-      const response = await fetch(`/api/claimTo`, {
+      const response = await fetch("/api/claimTo", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -64,8 +64,6 @@ export function Sponsorship() {
       const { result } = data;
       setQueueId(result.queueId);
 
-      const timestamp = Date.now();
-
       const newTransaction: ClaimTransactionResults = {
         queueId: result.queueId,
         status: "Queued",
@@ -118,7 +116,7 @@ export function Sponsorship() {
         <div className="space-y-3 sm:space-y-4">
           <br />
           <ConnectButton client={THIRDWEB_CLIENT} chain={baseSepolia} />
-          <div className="text-sm text-gray-500">
+          <div className="text-gray-500 text-sm">
             <ol>Select an NFT Contract to mint</ol>
           </div>
           <Select
@@ -147,7 +145,7 @@ export function Sponsorship() {
               </SelectItem>
             </SelectContent>
           </Select>
-          <div className="text-sm text-gray-500">
+          <div className="text-gray-500 text-sm">
             <ol>Select the quantity of NFTs to mint</ol>
           </div>
           <Input
@@ -170,6 +168,14 @@ export function Sponsorship() {
         </div>
       </form>
       <Webhook queueId={queueId || ""} />
+
+      <div className="mt-6">
+        {transactions.map((tx) => (
+          <div key={tx.queueId} className="text-sm">
+            Status: {tx.status} - Amount: {tx.amount}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

apps/playground-web/src/app/engine/airdrop/page.tsx

@@ -9,8 +9,13 @@ import { useEffect, useState } from "react";
 
 // This says Webhook, but it's actually just displaying a dummy webhook
 
+interface WebhookData {
+  queueId?: string;
+  status?: string;
+}
+
 export function Webhook({ queueId }: { queueId: string }) {
-  const [data, setData] = useState<any>(null);
+  const [data, setData] = useState<WebhookData | null>(null);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -42,7 +47,7 @@ export function Webhook({ queueId }: { queueId: string }) {
   }, [queueId]);
 
   return (
-    <Card className="w-full mt-8 bg-background">
+    <Card className="mt-8 w-full bg-background">
       <CardHeader>
         <CardTitle>Webhook Response</CardTitle>
         <CardDescription>{data?.status || "Initializing..."}</CardDescription>

apps/playground-web/src/app/engine/minting/page.tsx

@@ -123,12 +123,12 @@ export function ClaimTransactionResults({
   };
 
   return (
-    <Card className="w-full mt-8 bg-background">
-      <CardHeader className="flex flex-row justify-between items-center">
-        <h2 className="text-xl font-semibold text-foreground">
+    <Card className="mt-8 w-full bg-background">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <h2 className="font-semibold text-foreground text-xl">
           Transaction Results
         </h2>
-        <span className="text-sm text-muted-foreground">
+        <span className="text-muted-foreground text-sm">
           Last 24 hours • {sortedResultsWithDummy.length} transactions
         </span>
       </CardHeader>
@@ -161,21 +161,21 @@ export function ClaimTransactionResults({
                         <img
                           src="/BaseSep.png"
                           alt="Base"
-                          className="w-4 h-4"
+                          className="h-4 w-4"
                         />
                       )}
                       {result.network === "OP Sep" && (
                         <img
                           src="/OP.png"
                           alt="Optimism Sep"
-                          className="w-4 h-4"
+                          className="h-4 w-4"
                         />
                       )}
                       {result.network === "Ethereum" && (
                         <img
                           src="/Ethereum.png"
                           alt="Ethereum"
-                          className="w-4 h-4"
+                          className="h-4 w-4"
                         />
                       )}
                       {result.network}
@@ -223,7 +223,7 @@ export function ClaimTransactionResults({
                   </TableCell>
                   <TableCell>
                     <span
-                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(getDisplayStatus(result))}`}
+                      className={`inline-flex rounded-full px-2 font-semibold text-xs leading-5 ${getStatusColor(getDisplayStatus(result))}`}
                     >
                       {getDisplayStatus(result)}
                     </span>
@@ -254,13 +254,13 @@ export function ClaimTransactionResults({
           </Table>
         </div>
         {showLeftGradient && (
-          <div className="sm:hidden absolute left-0 top-0 bottom-0 w-12 pointer-events-none bg-gradient-to-r from-background to-transparent" />
+          <div className="pointer-events-none absolute top-0 bottom-0 left-0 w-12 bg-gradient-to-r from-background to-transparent sm:hidden" />
         )}
         {showRightGradient && (
-          <div className="sm:hidden absolute right-0 top-0 bottom-0 w-12 pointer-events-none bg-gradient-to-l from-background to-transparent" />
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 w-12 bg-gradient-to-l from-background to-transparent sm:hidden" />
         )}
       </CardContent>
-      <CardFooter className="flex justify-between items-center">
+      <CardFooter className="flex items-center justify-between">
         <Button onClick={handlePrevPage} disabled={currentPage === 1}>
           Previous
         </Button>