Implement listingTypeAddress handling in PayButton and ListingDetailsPage for improved payment processing. Refactor PayButton to utilize new prop and ensure proper address validation. Enhance user experience by preventing actions with invalid addresses.

Author: escottalexander

packages/nextjs/app/listing/[id]/page.tsx

@@ -207,6 +207,15 @@ const ListingDetailsPage = () => {
     [indexed?.paymentToken, data?.decoded?.paymentToken],
   );
 
+  const payListingTypeAddress = useMemo(() => {
+    try {
+      const addr = (indexed?.listingType as string | undefined) ?? (pointer?.listingType as string | undefined);
+      return addr?.toLowerCase();
+    } catch {
+      return undefined;
+    }
+  }, [indexed?.listingType, pointer]);
+
   // (back navigation handled globally in Header BackButton)
 
   // Close lightbox on Escape
@@ -284,6 +293,7 @@ const ListingDetailsPage = () => {
                 // For ETH payments, pass decoded values when available (non-ETH handled via approval in button)
                 priceWei={payPriceWei}
                 paymentToken={payToken}
+                listingTypeAddress={payListingTypeAddress}
                 disabled={!active}
               />
             ) : null}

packages/nextjs/components/marketplace/PayButton.tsx

@@ -4,17 +4,17 @@ import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { keccak256, stringToHex, zeroAddress } from "viem";
 import { useAccount, usePublicClient, useReadContract, useWriteContract } from "wagmi";
-import { useScaffoldReadContract } from "~~/hooks/scaffold-eth/useScaffoldReadContract";
 import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth/useScaffoldWriteContract";
 
 export interface PayButtonProps {
   listingId: string | number;
   priceWei?: string; // pass as string to avoid bigint serialization issues
   paymentToken?: string; // zero address for ETH; otherwise ERC20
   disabled?: boolean;
+  listingTypeAddress?: string; // spender/listing type contract address passed from parent
 }
 
-export const PayButton = ({ listingId, priceWei, paymentToken, disabled }: PayButtonProps) => {
+export const PayButton = ({ listingId, priceWei, paymentToken, disabled, listingTypeAddress }: PayButtonProps) => {
   const { writeContractAsync, isMining } = useScaffoldWriteContract({ contractName: "Marketplace" });
   const { address } = useAccount();
   const router = useRouter();
@@ -34,17 +34,11 @@ export const PayButton = ({ listingId, priceWei, paymentToken, disabled }: PayBu
     return "Buy";
   }, [isEth, priceWei]);
 
-  // Read listing pointer to get listingType (spender) address
   const idBig = useMemo(() => BigInt(typeof listingId === "number" ? listingId : listingId.toString()), [listingId]);
-  const { data: listingRes } = useScaffoldReadContract({
-    contractName: "Marketplace",
-    functionName: "getListing",
-    args: [idBig],
-    // don't need to watch aggressively here
-    watch: false,
-  } as any);
-  const pointer = useMemo(() => (listingRes ? (listingRes as any)[0] : undefined), [listingRes]);
-  const listingTypeAddress = (pointer?.listingType as string | undefined)?.toLowerCase?.();
+  const listingTypeSpenderLower = useMemo(
+    () => (listingTypeAddress ? listingTypeAddress.toLowerCase() : undefined),
+    [listingTypeAddress],
+  );
 
   // Minimal ERC20 ABI
   const erc20Abi = useMemo(
@@ -81,15 +75,15 @@ export const PayButton = ({ listingId, priceWei, paymentToken, disabled }: PayBu
 
   const ownerAddress = (address || "0x0000000000000000000000000000000000000000") as `0x${string}`;
   const tokenAddress = (paymentToken || "0x0000000000000000000000000000000000000000") as `0x${string}`;
-  const spenderAddress = (listingTypeAddress || "0x0000000000000000000000000000000000000000") as `0x${string}`;
+  const spenderAddress = (listingTypeSpenderLower || "0x0000000000000000000000000000000000000000") as `0x${string}`;
 
   const { data: allowanceData } = useReadContract({
     address: tokenAddress,
     abi: erc20Abi,
     functionName: "allowance",
     args: [ownerAddress, spenderAddress],
     query: {
-      enabled: isErc20 && !!address && !!listingTypeAddress && !!paymentToken,
+      enabled: isErc20 && !!address && !!listingTypeSpenderLower && !!paymentToken,
     },
   } as any);
 
@@ -108,6 +102,10 @@ export const PayButton = ({ listingId, priceWei, paymentToken, disabled }: PayBu
 
   const onBuy = useCallback(async () => {
     try {
+      // Prevent approving zero address if listing type (spender) isn't available yet
+      if (isErc20 && !listingTypeSpenderLower) {
+        return;
+      }
       if (isErc20) {
         const needed = priceWei ? BigInt(priceWei) : 0n;
         const current = (allowanceData as bigint | undefined) ?? 0n;
@@ -129,11 +127,26 @@ export const PayButton = ({ listingId, priceWei, paymentToken, disabled }: PayBu
     } catch {
       // swallow; user may have rejected or tx failed
     }
-  }, [isErc20, allowanceData, priceWei, doBuy, writeTokenAsync, tokenAddress, erc20Abi, spenderAddress, publicClient]);
+  }, [
+    isErc20,
+    listingTypeSpenderLower,
+    allowanceData,
+    priceWei,
+    doBuy,
+    writeTokenAsync,
+    tokenAddress,
+    erc20Abi,
+    spenderAddress,
+    publicClient,
+  ]);
 
   return (
     <>
-      <button className="btn btn-primary" onClick={onBuy} disabled={disabled || isMining}>
+      <button
+        className="btn btn-primary"
+        onClick={onBuy}
+        disabled={disabled || isMining || (isErc20 && !listingTypeSpenderLower)}
+      >
         {label}
       </button>
       {/* Approving is now automatic; no modal shown. */}