Merge pull request #9 from ArtBlocks/beny/plt-908-generator-ui-updates

Add collection and artist name

src/App.tsx

@@ -1,15 +1,16 @@
 import { generatorAddress } from "@/utils/env";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { Loader2, Maximize } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Hex } from "viem";
 import { useShallow } from "zustand/react/shallow";
 import { GenArt721GeneratorV0Abi } from "./abis/GenArt721GeneratorV0Abi";
 import { TokenForm } from "./components/TokenForm";
-import { useTokenFormStore } from "./stores/tokenFormStore";
 import { useIdle } from "./hooks/useIdle";
 import { cn } from "./lib/utils";
 import { usePublicClientStore } from "./stores/publicClientStore";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { useTokenFormStore } from "./stores/tokenFormStore";
+import { getProjectNameAndArtist } from "./utils/project";
 
 function App() {
   const { publicClient } = usePublicClientStore();
@@ -29,6 +30,43 @@ function App() {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [dataHtml, setDataHtml] = useState("");
+  const [projectData, setProjectData] = useState<{
+    projectName: string;
+    artist: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (contractAddress === undefined || projectId === undefined) return;
+
+    const controller = new AbortController();
+
+    async function fetchProjectData() {
+      if (contractAddress === undefined || projectId === undefined) return;
+
+      try {
+        if (controller.signal.aborted) return;
+
+        const { projectName, artist } = await getProjectNameAndArtist(
+          publicClient,
+          contractAddress as Hex,
+          BigInt(projectId)
+        );
+
+        if (!controller.signal.aborted) {
+          setProjectData({ projectName, artist });
+        }
+      } catch (error) {
+        console.error(error);
+        setProjectData(null);
+      }
+    }
+
+    fetchProjectData();
+
+    return () => {
+      controller.abort();
+    };
+  }, [contractAddress, projectId, publicClient]);
 
   useEffect(() => {
     const controller = new AbortController();
@@ -139,6 +177,19 @@ function App() {
         >
           <Maximize className="w-5 h-5 stroke-1 stroke-white" />
         </button>
+        {projectData ? (
+          <div
+            className={cn(
+              "z-10 absolute px-4 py-2 rounded-[2px] top-4 right-4 sm:top-10 sm:right-10 bg-black bg-opacity-50 text-white transition-all duration-500 text-right",
+              {
+                "opacity-0 pointer-events-none": isIdle,
+              }
+            )}
+          >
+            <h1 className="font-medium">{projectData?.projectName}</h1>
+            <h2>{projectData?.artist}</h2>
+          </div>
+        ) : null}
       </div>
     </TooltipProvider>
   );

src/utils/project.ts

@@ -168,6 +168,55 @@ export async function getProjectInvocations(
   return BigInt(0);
 }
 
+export async function getProjectNameAndArtist(
+  publicClient: PublicClient,
+  deployment: CoreDeployment | Hex,
+  projectId: bigint
+): Promise<{
+  projectName: string;
+  artist: string;
+}> {
+  const coreAddress =
+    typeof deployment === "string" ? deployment : deployment.address;
+  const projectDetails = await publicClient.readContract({
+    address: coreAddress,
+    // Simplified projectDetails works for all core versions
+    abi: [
+      {
+        inputs: [
+          {
+            internalType: "uint256",
+            name: "_projectId",
+            type: "uint256",
+          },
+        ],
+        name: "projectDetails",
+        outputs: [
+          {
+            internalType: "string",
+            name: "projectName",
+            type: "string",
+          },
+          {
+            internalType: "string",
+            name: "artist",
+            type: "string",
+          },
+        ],
+        stateMutability: "view",
+        type: "function",
+      },
+    ] as const,
+    functionName: "projectDetails",
+    args: [BigInt(projectId)],
+  });
+
+  return {
+    projectName: projectDetails[0],
+    artist: projectDetails[1],
+  };
+}
+
 export const getArt721CoreV0Abi = [
   // Get project invocations via projectTokenInfo
   {