Refactor the indexer demo code

frontend/src/app/home/Pet/Summary.tsx

@@ -25,7 +25,7 @@ export function Summary({ pet }: SummaryProps) {
   const typedText = useTypingEffect(text);
 
   return (
-    <div className="nes-container is-dark with-title h-[240px]">
+    <div className="nes-container is-dark with-title h-[160px]">
       <p className="title">Summary</p>
       <p>{typedText}</p>
     </div>

frontend/src/app/home/Pet/index.tsx

@@ -5,7 +5,7 @@ import { Actions, PetAction } from "./Actions";
 import { PetDetails } from "./Details";
 import { PetImage, bodies, ears, faces } from "./Image";
 import { Summary } from "./Summary";
-import { Collection } from "./Collection";
+import { AptogotchiCollection } from "@/components/AptogotchiCollection";
 
 export interface Pet {
   name: string;
@@ -22,30 +22,32 @@ export function Pet({ pet, setPet }: PetProps) {
   const [selectedAction, setSelectedAction] = useState<PetAction>("play");
 
   return (
-    <div className="flex flex-row self-center gap-12 m-8">
-      <div className="flex flex-col gap-4 w-[360px]">
-        <PetImage
-          pet={pet}
-          selectedAction={selectedAction}
-          petParts={{
-            body: bodies[pet.parts[0]],
-            ears: ears[pet.parts[1]],
-            face: faces[pet.parts[2]],
-          }}
-          avatarStyle
-        />
-        <PetDetails pet={pet} setPet={setPet} />
-        <Collection />
-      </div>
-      <div className="flex flex-col gap-8 w-[680px] h-full">
-        <Actions
-          selectedAction={selectedAction}
-          setSelectedAction={setSelectedAction}
-          setPet={setPet}
-          pet={pet}
-        />
-        <Summary pet={pet} />
+    <div className="flex flex-col self-center m-10">
+      <div className="flex flex-row self-center gap-12">
+        <div className="flex flex-col gap-4 w-[360px]">
+          <PetImage
+            pet={pet}
+            selectedAction={selectedAction}
+            petParts={{
+              body: bodies[pet.parts[0]],
+              ears: ears[pet.parts[1]],
+              face: faces[pet.parts[2]],
+            }}
+            avatarStyle
+          />
+          <PetDetails pet={pet} setPet={setPet} />
+        </div>
+        <div className="flex flex-col gap-8 w-[680px] h-full">
+          <Actions
+            selectedAction={selectedAction}
+            setSelectedAction={setSelectedAction}
+            setPet={setPet}
+            pet={pet}
+          />
+          <Summary pet={pet} />
+        </div>
       </div>
+      <AptogotchiCollection />
     </div>
   );
 }

frontend/src/components/AptogotchiCollection/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import { useGetAptogotchiCollection } from "@/hooks/useGetAptogotchiCollection";
+
+export function AptogotchiCollection() {
+  const { account, network } = useWallet();
+  const { collection, firstFewAptogotchiName, loading, fetchCollection } =
+    useGetAptogotchiCollection();
+
+  useEffect(() => {
+    if (!account?.address || !network) return;
+    fetchCollection();
+  }, [account?.address, fetchCollection, network]);
+
+  if (loading || !collection) return null;
+
+  return (
+    <div className="nes-container with-title h-[100px]">
+      <p>{`There are a total of ${collection.current_supply} Aptogotchis in existence.`}</p>
+      <p>{`Meet your fellow Aptogotchis: ${firstFewAptogotchiName?.join(", ")}${
+        (firstFewAptogotchiName?.length || 0) < collection.current_supply
+          ? "..."
+          : ""
+      }`}</p>
+    </div>
+  );
+}

frontend/src/graphql/queryAptogotchiCollection.ts

@@ -0,0 +1,27 @@
+export const queryAptogotchiCollection = `
+query MyQuery($collection_id: String) {
+  current_collections_v2(
+    where: { collection_id: { _eq: $collection_id } }
+  ) {
+    collection_id
+    collection_name
+    current_supply
+    description
+    creator_address
+    last_transaction_timestamp
+    max_supply
+    last_transaction_version
+    mutable_description
+    mutable_uri
+    token_standard
+    table_handle_v1
+    total_minted_v2
+    uri
+  }
+  current_collection_ownership_v2_view(
+    where: { collection_id: { _eq: $collection_id } }
+  ) {
+    owner_address
+  }
+}
+`;

frontend/src/hooks/useGetAptogotchiCollection.ts

@@ -0,0 +1,83 @@
+import { useCallback, useState } from "react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import { getAptosClient } from "@/utils/aptosClient";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
+import { queryAptogotchiCollection } from "@/graphql/queryAptogotchiCollection";
+import { padAddressIfNeeded } from "@/utils/address";
+
+const aptosClient = getAptosClient();
+
+type Collection = {
+  collection_id: string;
+  collection_name: string;
+  creator_address: string;
+  uri: string;
+  current_supply: any;
+};
+
+type CollectionHolder = {
+  owner_address: string;
+};
+
+type CollectionResponse = {
+  current_collections_v2: Collection[];
+  current_collection_ownership_v2_view: CollectionHolder[];
+};
+
+export function useGetAptogotchiCollection() {
+  const { account } = useWallet();
+  const [collection, setCollection] = useState<Collection>();
+  const [firstFewAptogotchiName, setFirstFewAptogotchiName] =
+    useState<string[]>();
+  const [loading, setLoading] = useState(false);
+
+  const fetchCollection = useCallback(async () => {
+    if (!account?.address) return;
+
+    try {
+      setLoading(true);
+
+      const aptogotchiCollectionIDResponse = (await aptosClient.view({
+        payload: {
+          function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi_collection_id`,
+          arguments: [],
+        },
+      })) as [`0x${string}`];
+
+      const collectionResponse: CollectionResponse =
+        await aptosClient.queryIndexer({
+          query: {
+            query: queryAptogotchiCollection,
+            variables: {
+              collection_id: padAddressIfNeeded(
+                aptogotchiCollectionIDResponse[0]
+              ),
+            },
+          },
+        });
+
+      const firstFewAptogotchi = await Promise.all(
+        collectionResponse.current_collection_ownership_v2_view
+          // TODO: change to limit 3 in gql after indexer fix limit
+          .slice(0, 3)
+          .map((holder) =>
+            aptosClient.view({
+              payload: {
+                function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi`,
+                arguments: [holder.owner_address],
+              },
+            })
+          )
+      );
+
+      setCollection(collectionResponse.current_collections_v2[0]);
+      setFirstFewAptogotchiName(firstFewAptogotchi.map((x) => x[0] as string));
+    } catch (error) {
+      console.error("Error fetching Aptogotchi collection:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [account?.address]);
+
+  return { collection, firstFewAptogotchiName, loading, fetchCollection };
+}