Implement share functionality in ListingDetailsPage and NewListingPage, allowing users to share listings via a button in mini app mode. Refactor price label generation for custom tokens and enhance TagsInput component for better user experience. Update image handling in ListingCard for improved performance.

escottalexander · escottalexander · commit bc7543fe63da · 2025-10-16T16:39:02.000-04:00
diff --git a/packages/nextjs/app/listing/[id]/page.tsx b/packages/nextjs/app/listing/[id]/page.tsx
@@ -233,6 +233,25 @@ const ListingDetailsPageInner = () => {
   return (
     <div className="p-4 space-y-4">
       <div className="flex items-center gap-2">
+        {isMiniApp ? (
+          <button
+            className="btn btn-secondary btn-sm"
+            onClick={async () => {
+              try {
+                const url = typeof window !== "undefined" ? window.location.href : "";
+                const text = `Check out this listing: ${title}\n\n${description}\n\n${priceLabel}`;
+                const embeds: string[] = [];
+                if (url) embeds.push(url);
+                if (imageUrl && embeds.length < 2) embeds.push(imageUrl);
+                await composeCast({ text, embeds });
+              } catch (e) {
+                console.error("share compose error", e);
+              }
+            }}
+          >
+            Share
+          </button>
+        ) : null}
         <div className={`badge ${active ? "badge-success" : ""} ml-auto`}>{active ? "Active" : "Sold"}</div>
       </div>
 
@@ -244,6 +263,7 @@ const ListingDetailsPageInner = () => {
         {imageUrl ? (
           <div className="w-full">
             <Image
+              priority={false}
               src={imageUrl}
               alt={title}
               width={1200}
@@ -299,24 +319,6 @@ const ListingDetailsPageInner = () => {
                 disabled={!active}
               />
             ) : null}
-            {isMiniApp ? (
-              <button
-                className="btn btn-secondary btn-sm"
-                onClick={async () => {
-                  try {
-                    const url = typeof window !== "undefined" ? window.location.href : "";
-                    const text = `Check out this listing: ${title}`;
-                    const embeds: string[] = [];
-                    if (url) embeds.push(url);
-                    await composeCast({ text, embeds });
-                  } catch (e) {
-                    console.error("share compose error", e);
-                  }
-                }}
-              >
-                Share
-              </button>
-            ) : null}
           </div>
         </div>
 
diff --git a/packages/nextjs/app/listing/new/page.tsx b/packages/nextjs/app/listing/new/page.tsx
@@ -4,10 +4,12 @@ import { Suspense, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { encodeAbiParameters, isAddress, parseEther, parseUnits, zeroAddress } from "viem";
 import { useReadContract } from "wagmi";
+import { useMiniapp } from "~~/components/MiniappProvider";
 import { IPFSUploader } from "~~/components/marketplace/IPFSUploader";
 import { TagsInput } from "~~/components/marketplace/TagsInput";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
 import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth/useScaffoldWriteContract";
+import { resolveIpfsUrl } from "~~/services/ipfs/fetch";
 import { uploadJSON } from "~~/services/ipfs/upload";
 import TOKENS_JSON from "~~/tokens.json";
 
@@ -22,11 +24,23 @@ const ERC20_DECIMALS_ABI = [
   },
 ] as const;
 
+// Minimal ERC20 ABI to read symbol (for custom tokens)
+const ERC20_SYMBOL_ABI = [
+  {
+    type: "function",
+    name: "symbol",
+    stateMutability: "view",
+    inputs: [],
+    outputs: [{ name: "", type: "string" }],
+  },
+] as const;
+
 const KNOWN_TOKENS = TOKENS_JSON as Record<string, `0x${string}`>;
 
 const NewListingPageInner = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { composeCast, isMiniApp } = useMiniapp();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [category, setCategory] = useState("");
@@ -43,6 +57,7 @@ const NewListingPageInner = () => {
 
   const { writeContractAsync: writeMarketplace } = useScaffoldWriteContract({ contractName: "Marketplace" });
   const { data: simpleListings } = useDeployedContractInfo({ contractName: "SimpleListings" });
+  const { data: marketplaceInfo } = useDeployedContractInfo({ contractName: "Marketplace" });
 
   const isCustomToken = currency === "TOKEN";
   const isKnownToken = currency !== "ETH" && currency !== "TOKEN" && Boolean(KNOWN_TOKENS[currency]);
@@ -63,6 +78,17 @@ const NewListingPageInner = () => {
     },
   });
 
+  // Attempt to fetch symbol for custom tokens for a nicer price label
+  const { data: tokenSymbolData } = useReadContract({
+    address: isCustomToken && isTokenAddressValid ? (tokenAddress as `0x${string}`) : undefined,
+    abi: ERC20_SYMBOL_ABI,
+    functionName: "symbol",
+    query: {
+      enabled: isCustomToken && isTokenAddressValid,
+      retry: false,
+    },
+  });
+
   useEffect(() => {
     if (!(isCustomToken || isKnownToken)) {
       setDecimalsOverride(null);
@@ -120,6 +146,24 @@ const NewListingPageInner = () => {
     loadingDecimals,
   ]);
 
+  // Derive a human-friendly price label similar to listing page using in-memory values
+  const priceLabel = useMemo(() => {
+    const trimmed = (price || "").trim();
+    if (!trimmed) return "";
+    try {
+      if (isCustomToken) {
+        const sym = (tokenSymbolData as string | undefined) || "TOKEN";
+        return `${trimmed} ${sym}`;
+      }
+      if (isKnownToken) {
+        return `${trimmed} ${currency}`;
+      }
+      return `${trimmed} ETH`;
+    } catch {
+      return trimmed;
+    }
+  }, [price, isCustomToken, isKnownToken, tokenSymbolData, currency]);
+
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setSubmitting(true);
@@ -176,12 +220,51 @@ const NewListingPageInner = () => {
             ],
             [paymentToken, priceWei],
           );
+          const shareImageUrlLocal = (resolveIpfsUrl(localImageCid) as string | null) || localImageCid || undefined;
+
+          // Write and wait for receipt so we can derive the new listing id from logs
+          await writeMarketplace(
+            {
+              functionName: "createListing",
+              args: [simpleListings?.address as `0x${string}`, cid, encoded],
+            },
+            {
+              blockConfirmations: 1,
+              onBlockConfirmation: receipt => {
+                try {
+                  // Parse ListingCreated log from Marketplace
+                  const mpAddress = (marketplaceInfo?.address || "").toLowerCase();
+                  const createdLog = receipt.logs.find(l => (l as any).address?.toLowerCase() === mpAddress);
+                  let newId: string | undefined;
+                  if (createdLog && (createdLog as any).topics && (createdLog as any).topics.length >= 2) {
+                    try {
+                      const hex = (createdLog as any).topics[1] as string;
+                      if (hex && hex.startsWith("0x")) newId = String(BigInt(hex));
+                    } catch {}
+                  }
 
-          await writeMarketplace({
-            functionName: "createListing",
-            args: [simpleListings?.address as `0x${string}`, cid, encoded],
-          });
-          router.push(`/location/${encodeURIComponent(locationId)}`);
+                  // Navigate to location first for UX consistency
+                  router.push(`/location/${encodeURIComponent(locationId)}`);
+
+                  // Prompt to share using in-memory details even before indexing
+                  if (isMiniApp && newId) {
+                    try {
+                      const base =
+                        process.env.NEXT_PUBLIC_URL || (typeof window !== "undefined" ? window.location.origin : "");
+                      const url = `${base}/listing/${encodeURIComponent(newId)}`;
+                      const text = `Check out my new listing: ${title}\n\n${description}${priceLabel ? `\n\n${priceLabel}` : ""}`;
+                      const embeds: string[] = [];
+                      if (url) embeds.push(url);
+                      if (shareImageUrlLocal && embeds.length < 2) embeds.push(shareImageUrlLocal);
+                      setTimeout(() => {
+                        composeCast({ text, embeds }).catch(() => {});
+                      }, 300);
+                    } catch {}
+                  }
+                } catch {}
+              },
+            },
+          );
           return;
         } catch {}
       }
@@ -223,11 +306,47 @@ const NewListingPageInner = () => {
         [paymentToken, priceWei],
       );
 
-      await writeMarketplace({
-        functionName: "createListing",
-        args: [simpleListings?.address as `0x${string}`, cid, encoded],
-      });
-      router.push(`/location/${encodeURIComponent(locationId)}`);
+      await writeMarketplace(
+        {
+          functionName: "createListing",
+          args: [simpleListings?.address as `0x${string}`, cid, encoded],
+        },
+        {
+          blockConfirmations: 1,
+          onBlockConfirmation: receipt => {
+            try {
+              const mpAddress = (marketplaceInfo?.address || "").toLowerCase();
+              const createdLog = receipt.logs.find(l => (l as any).address?.toLowerCase() === mpAddress);
+              let newId: string | undefined;
+              if (createdLog && (createdLog as any).topics && (createdLog as any).topics.length >= 2) {
+                try {
+                  const hex = (createdLog as any).topics[1] as string;
+                  if (hex && hex.startsWith("0x")) newId = String(BigInt(hex));
+                } catch {}
+              }
+
+              router.push(`/location/${encodeURIComponent(locationId)}`);
+
+              if (isMiniApp && newId) {
+                try {
+                  const base =
+                    process.env.NEXT_PUBLIC_URL || (typeof window !== "undefined" ? window.location.origin : "");
+                  const url = `${base}/listing/${encodeURIComponent(newId)}`;
+                  const text = `Check out my new listing: ${title}\n\n${description}${priceLabel ? `\n\n${priceLabel}` : ""}`;
+                  const embeds: string[] = [];
+                  if (url) embeds.push(url);
+                  const shareImageUrl2 = imageCid ? (resolveIpfsUrl(imageCid) as string | null) || imageCid : undefined;
+                  if (shareImageUrl2 && embeds.length < 2) embeds.push(shareImageUrl2);
+                  setTimeout(() => {
+                    composeCast({ text, embeds }).catch(() => {});
+                  }, 300);
+                } catch {}
+              }
+            } catch {}
+          },
+        },
+      );
+      return;
     } finally {
       setSubmitting(false);
     }
diff --git a/packages/nextjs/components/marketplace/ListingCard.tsx b/packages/nextjs/components/marketplace/ListingCard.tsx
@@ -81,6 +81,7 @@ export const ListingCard = ({
     <Link href={`/listing/${id}${fromQuery}`} className="card card-compact bg-base-100 shadow">
       {resolved ? (
         <Image
+          priority={false}
           src={resolved}
           alt={title}
           width={800}
diff --git a/packages/nextjs/components/marketplace/TagsInput.tsx b/packages/nextjs/components/marketplace/TagsInput.tsx
@@ -69,15 +69,12 @@ export const TagsInput = ({ value, onChange, placeholder, className }: TagsInput
           </button>
         </span>
       ))}
-      {/* Draft appears like a badge while typing */}
-      {draft ? <span className="badge badge-outline opacity-80 shrink-0">{draft}</span> : null}
       <input
         ref={inputRef}
-        className="flex-1 w-px min-w-[1px] outline-none bg-transparent shrink-0"
+        className="flex-1 min-w-[6ch] outline-none bg-transparent"
         placeholder={value.length || draft ? undefined : placeholder}
         value={draft}
         style={{ caretColor: "var(--bc)" }}
-        // Hide the input's text while draft is shown to avoid duplicate text, but keep caret visible
         onChange={e => {
           const text = e.target.value;
           if (text.includes(",")) {
@@ -97,17 +94,6 @@ export const TagsInput = ({ value, onChange, placeholder, className }: TagsInput
         }}
         onBlur={() => commitDraftTokens(draft)}
       />
-      {/* Visually hide the input text by overlaying styles via a utility class when draft exists */}
-      <style jsx>{`
-        input[value]:not([value=""]) {
-          ${"/* Only when there is draft text */"}
-          color: transparent;
-        }
-        input::placeholder {
-          color: inherit;
-          opacity: 0.5;
-        }
-      `}</style>
     </div>
   );
 };
