Add kudzu index for contracts and tokens

packages/nextjs/app/buy/page.tsx

@@ -8,7 +8,7 @@ import { KudzuContainer } from "~~/components/KudzuContainer";
 const Buy: NextPage = () => {
   const ContainersQuery = gql`
     query Containers($after: String, $before: String) {
-      containers(limit: 100, before: $before, after: $after) {
+      containers(limit: 500, before: $before, after: $after) {
         items {
           owner
           contract
@@ -34,16 +34,44 @@ const Buy: NextPage = () => {
     },
   });
 
+  const KudzusQuery = gql`
+    query Kudzus($contracts: [String]) {
+      kudzus(limit: 10, where: { contract_in: $contracts }) {
+        items {
+          token
+          contract
+        }
+      }
+    }
+  `;
+
+  const contractAddresses = containersData?.containers?.items?.map((item: any) => item.contract);
+
+  const [{ data: kudzusData, fetching: isLoadingKudzus }] = useQuery({
+    query: KudzusQuery,
+    variables: {
+      contracts: contractAddresses,
+    },
+  });
+
   let i = 0;
   const containerRender = containersData?.containers?.items?.map((container: any) => {
-    return <KudzuContainer key={i++} mustBeForSale={true} contractAddress={container.contract} />;
+    return (
+      <KudzuContainer
+        key={i++}
+        mustBeForSale={true}
+        contractAddress={container.contract}
+        owner={container.owner}
+        tokenIndex={kudzusData?.kudzus.items.find((item: any) => item.contract === container.contract)?.token}
+      />
+    );
   });
 
   return (
     <>
       {" "}
       <div className="flex items-center flex-col flex-grow pt-10">
-        {isLoading ? (
+        {isLoading || isLoadingKudzus ? (
           <div className="px-5">SEARCHING FOR KUDZU CONTAINERS FOR SALE.....</div>
         ) : (
           <div>

packages/nextjs/components/KudzuContainer.tsx

@@ -7,38 +7,32 @@ import { Abi } from "abitype";
 import { formatEther, parseEther } from "viem";
 import { useAccount, useContractRead, useContractWrite } from "wagmi";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
-import { useDeployedContractInfo, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
 type KudzuContainerProps = {
   contractAddress?: string;
   mustBeForSale?: boolean;
   mustBeOwnedBy?: string;
+  owner?: string;
+  tokenIndex?: number;
 };
 
-export const KudzuContainer = ({ contractAddress, mustBeForSale, mustBeOwnedBy }: KudzuContainerProps) => {
+export const KudzuContainer = ({
+  contractAddress,
+  mustBeForSale,
+  mustBeOwnedBy,
+  owner,
+  tokenIndex,
+}: KudzuContainerProps) => {
   const { address } = useAccount();
 
-  const { data: tokenIndex } = useScaffoldContractRead({
-    contractName: "KUDZU",
-    functionName: "tokenOfOwnerByIndex",
-    args: [contractAddress, 0n],
-  });
-
   const { targetNetwork } = useTargetNetwork();
 
   const { data: deployedContractData } = useDeployedContractInfo("BasedKudzuContainerForSale");
 
   const [ethAmount, setEthAmount] = React.useState("");
 
-  const { data: owner } = useContractRead({
-    chainId: targetNetwork.id,
-    functionName: "owner",
-    address: contractAddress,
-    abi: deployedContractData?.abi,
-    watch: true,
-  });
-
   const { writeAsync: setPrice } = useContractWrite({
     chainId: targetNetwork.id,
     address: contractAddress,
@@ -55,14 +49,6 @@ export const KudzuContainer = ({ contractAddress, mustBeForSale, mustBeOwnedBy }
     watch: true,
   });
 
-  const { data: isInfected } = useContractRead({
-    chainId: targetNetwork.id,
-    functionName: "isInfected",
-    address: contractAddress,
-    abi: deployedContractData?.abi,
-    watch: true,
-  });
-
   const { writeAsync: purchase } = useContractWrite({
     chainId: targetNetwork.id,
     address: contractAddress,
@@ -110,7 +96,7 @@ export const KudzuContainer = ({ contractAddress, mustBeForSale, mustBeOwnedBy }
         <div className="m-4"></div>
         {owner?.toLocaleLowerCase() === address?.toLocaleLowerCase() ? (
           <div>
-            {isInfected ? (
+            {tokenIndex ? (
               <>
                 <div className={"mb-8"}>
                   infect address from this kudzu: