clean up

Author: DustinTurska

apps/playground-web/src/app/api/erc20BatchMintTo/route.ts

@@ -23,27 +23,18 @@ const engine = new Engine({
   accessToken: process.env.ENGINE_ACCESS_TOKEN as string,
 });
 
-type TransactionStatus = "Queued" | "Sent" | "Mined" | "error";
-
-interface ClaimResult {
-  queueId: string;
-  status: TransactionStatus;
-  transactionHash?: string | undefined | null;
-  blockExplorerUrl?: string | undefined | null;
-  errorMessage?: string;
-  toAddress?: string;
-  amount?: string;
-  chainId?: string;
-  timestamp?: number;
-}
-
 const chain = "84532";
 
 type Receiver = {
   toAddress: Address;
   amount: string;
 };
 
+type DataEntry = {
+  toAddress: string;
+  amount: string;
+};
+
 export async function POST(req: NextRequest) {
   try {
     const { data, contractAddress } = await req.json();
@@ -54,7 +45,7 @@ export async function POST(req: NextRequest) {
       sampleData: data[0],
     });
 
-    const receivers: Receiver[] = data.map((entry: any) => ({
+    const receivers: Receiver[] = data.map((entry: DataEntry) => ({
       toAddress: entry.toAddress as Address,
       amount: entry.amount,
     }));
@@ -79,7 +70,7 @@ export async function POST(req: NextRequest) {
     // Return initial queued status
     const initialResult = {
       queueId: res.result.queueId,
-      status: "Queued" as const,
+      status: "queued" as const,
       addresses: firstChunk.map((r) => r.toAddress),
       amounts: firstChunk.map((r) => r.amount),
       timestamp: Date.now(),
@@ -93,12 +84,14 @@ export async function POST(req: NextRequest) {
     });
 
     return NextResponse.json([initialResult]);
-  } catch (error: any) {
+  } catch (error: unknown) {
     console.error("Detailed error:", error);
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error occurred";
     return NextResponse.json(
       {
         error: "Transfer failed",
-        details: error.message,
+        details: errorMessage,
       },
       { status: 500 },
     );
@@ -112,16 +105,20 @@ async function pollToMine(queueId: string) {
     if (status.result.status === "mined") {
       const transactionHash = status.result.transactionHash;
       const blockExplorerUrl = `https://base-sepolia.blockscout.com/tx/${transactionHash}`;
-      return { status: "Mined", transactionHash, blockExplorerUrl };
-    } else if (status.result.status === "errored") {
-      return { status: "error", errorMessage: status.result.errorMessage };
+      return { status: "Mined", queueId, transactionHash, blockExplorerUrl };
     }
 
-    return { status: status.result.status };
+    return {
+      status:
+        status.result.status.charAt(0).toUpperCase() +
+        status.result.status.slice(1),
+      queueId,
+    };
   } catch (error) {
     console.error("Error checking transaction status:", error);
     return {
       status: "error",
+      queueId,
       errorMessage: "Failed to check transaction status",
     };
   }

apps/playground-web/src/app/api/mintTo/route.ts

@@ -24,19 +24,6 @@ const engine = new Engine({
   accessToken: process.env.ENGINE_ACCESS_TOKEN as string,
 });
 
-interface ClaimResult {
-  queueId: string;
-  status: "Queued" | "Sent" | "Mined" | "error";
-  transactionHash?: string | undefined | null;
-  blockExplorerUrl?: string | undefined | null;
-  errorMessage?: string;
-  toAddress: string;
-  amount: string;
-  timestamp: number;
-  chainId: number;
-  network: "Base Sep" | "OP Sep" | "Ethereum";
-}
-
 export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
@@ -80,7 +67,7 @@ export async function POST(req: NextRequest) {
     };
 
     // Start polling in the background
-    pollToMine(res.result.queueId, receiver).then((pollResult) => {
+    pollToMine(res.result.queueId).then((pollResult) => {
       // This will be handled by the frontend polling
       console.log("Transaction completed:", pollResult);
     });
@@ -93,25 +80,18 @@ export async function POST(req: NextRequest) {
         { error: "Error minting ERC1155 tokens", details: error.message },
         { status: 500 },
       );
-    } else {
-      return NextResponse.json(
-        { error: "An unknown error occurred" },
-        { status: 500 },
-      );
     }
   }
 }
 
-async function pollToMine(queueId: string, receiver: string) {
+async function pollToMine(queueId: string) {
   try {
     const status = await engine.transaction.status(queueId);
 
     if (status.result.status === "mined") {
       const transactionHash = status.result.transactionHash;
       const blockExplorerUrl = `https://base-sepolia.blockscout.com/tx/${transactionHash}`;
       return { status: "Mined", transactionHash, blockExplorerUrl };
-    } else if (status.result.status === "errored") {
-      return { status: "error", errorMessage: status.result.errorMessage };
     }
 
     return { status: status.result.status };

apps/playground-web/src/app/api/transaction-status/route.ts

@@ -1,5 +1,5 @@
 import { Engine } from "@thirdweb-dev/engine";
-import { NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from "next/server";
 
 const engine = new Engine({
   url: process.env.ENGINE_URL as string,
@@ -35,7 +35,7 @@ export async function GET(req: NextRequest) {
     console.error("Error checking transaction status:", error);
     return NextResponse.json(
       { error: "Failed to check transaction status" },
-      { status: 500 }
+      { status: 500 },
     );
   }
-} 
+}

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

@@ -1,6 +1,6 @@
+import { AirdropERC20 } from "@/components/engine/airdrop/airdrop-erc20";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { APIHeader } from "../../../components/blocks/APIHeader";
-import { AirdropERC20 } from "@/components/engine/airdrop/airdrop-erc20";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
@@ -10,14 +10,16 @@ export default function Page() {
           title="Airdrop"
           description={
             <>
-              Engine makes it effortless for any developer to airdrop tokens at scale. You sponsor the gas so your users only need a wallet address!
+              Engine makes it effortless for any developer to airdrop tokens at
+              scale. You sponsor the gas so your users only need a wallet
+              address!
             </>
           }
           docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc20/POST/contract/{chain}/{contractAddress}/erc20/mint-batch-to"
           heroLink="/engine-webhooks.webp"
         />
 
-        <section >
+        <section>
           <InGameCurrency />
         </section>
       </main>
@@ -33,7 +35,8 @@ function InGameCurrency() {
           Airdrop
         </h2>
         <p className="max-w-[600px]">
-          Use Engine to Airdrop in-game currency to a list of players in one transaction.
+          Use Engine to Airdrop in-game currency to a list of players in one
+          transaction.
         </p>
       </div>
       <AirdropERC20 />

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

@@ -1,6 +1,6 @@
+import { ERC1155MintTo } from "@/components/engine/minting/erc1155-mint-to";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { APIHeader } from "../../../components/blocks/APIHeader";
-import { ERC1155MintTo } from "@/components/engine/minting/erc1155-mint-to";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
@@ -10,14 +10,15 @@ export default function Page() {
           title="Minting"
           description={
             <>
-              Allow your users to mint new tokens into any given contract. You sponsor the gas so your users only need a wallet address!
+              Allow your users to mint new tokens into any given contract. You
+              sponsor the gas so your users only need a wallet address!
             </>
           }
           docsLink="https://thirdweb-engine.apidocumentation.com/reference#tag/erc1155/POST/contract/{chain}/{contractAddress}/erc1155/mint-to"
           heroLink="/engine-webhooks.webp"
         />
 
-        <section >
+        <section>
           <Minting />
         </section>
       </main>
@@ -33,7 +34,8 @@ function Minting() {
           Minting
         </h2>
         <p className="max-w-[600px]">
-          Allow your users to mint new tokens into any given contract. You sponsor the gas so your users only need a wallet address!
+          Allow your users to mint new tokens into any given contract. You
+          sponsor the gas so your users only need a wallet address!
         </p>
       </div>
       <ERC1155MintTo />

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

@@ -1,6 +1,6 @@
+import { Sponsorship } from "@/components/engine/gasless/Sponsorship";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { APIHeader } from "../../../components/blocks/APIHeader";
-import { Sponsorship } from "@/components/engine/gasless/Sponsorship";
 // TODO: Get updated banner image and description.
 export default function Page() {
   return (
@@ -10,14 +10,15 @@ export default function Page() {
           title="Webhooks"
           description={
             <>
-              Configure webhooks in Engine to notify your backend server of transaction or backend wallet events.
+              Configure webhooks in Engine to notify your backend server of
+              transaction or backend wallet events.
             </>
           }
           docsLink="https://portal.thirdweb.com/engine/features/webhooks"
           heroLink="/engine-webhooks.webp"
         />
 
-        <section >
+        <section>
           <Webhooks />
         </section>
       </main>
@@ -33,7 +34,8 @@ function Webhooks() {
           Webhooks
         </h2>
         <p className="max-w-[600px]">
-        Configure webhooks in Engine to notify your backend server of transaction or backend wallet events.
+          Configure webhooks in Engine to notify your backend server of
+          transaction or backend wallet events.
         </p>
       </div>
       <Sponsorship />

apps/playground-web/src/components/engine/airdrop/TransactionResults.tsx

@@ -107,6 +107,8 @@ export function ClaimTransactionResults({
       case "Queued":
       case "Pending":
         return "bg-yellow-500/20 text-yellow-400";
+      case "Sent":
+        return "bg-blue-500/20 text-blue-400";
       default:
         return "bg-red-500/20 text-red-400";
     }
@@ -123,12 +125,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 +163,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 +225,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 +256,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>