fix: A few things

components/LandingPage/Projects/Card/Card.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { intlNumberFormat } from "utils/helpers";
 import * as St from "./Card.styled";
 import { Project } from "../../../staticData/projects";
+import { useCurrentSupply } from "hooks/useCurrentSupply";
 
 interface Props {
   project: Project;
@@ -15,11 +16,12 @@ const Card = ({ project }: Props): JSX.Element => {
     local,
     projectSlug,
     externalUrl,
-    currentSupply,
     maxSupply,
     status,
   } = project;
 
+  const currentSupply = useCurrentSupply(projectSlug);
+
   const supplyText = `${
     currentSupply ? intlNumberFormat(currentSupply) : 0
   }/${intlNumberFormat(maxSupply)} Minted`;

components/ProjectPage/Details/Details.tsx

@@ -56,8 +56,7 @@ const Details = ({ project }: Props): JSX.Element => {
           <>
             <St.Image src={image} alt="Project image" />
             <St.ProjectImageNameContainer>
-              {/* NOTE Can leave out token id here for now */}
-              <St.ProjectImageName>{`${name}`}</St.ProjectImageName>
+              <St.ProjectImageName>{name}</St.ProjectImageName>
             </St.ProjectImageNameContainer>
           </>
         )}

components/TokenPage/Module/TokenInfo/TokenInfo.tsx

@@ -41,7 +41,7 @@ const TokenInfo = ({
             onClick={() => setTab("more-info")}
             $active={tab === "more-info"}
           >
-            <h3>More Info</h3>
+            <h3>{projectSlug === "haiku" ? "AI Analysis" : "More Info"}</h3>
           </St.Tab>
         )}
 

hooks/useCurrentSupply.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "react-query";
+import { fetchCurrentSupplies } from "services/azureApi/fetches";
+
+export const useCurrentSupply = (projectSlug: string): number | undefined => {
+  const { data: currentSupplies } = useQuery<Record<string, number>, Error>(
+    "currentSupplies",
+    () => fetchCurrentSupplies(),
+  );
+
+  return currentSupplies?.[projectSlug];
+};

services/azureApi/fetches.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
-import { CollectionResponse, IProject, IToken, TxCounts } from "./types";
+import { z } from "zod";
+import type { CollectionResponse, IProject, IToken, TxCounts } from "./types";
 
 const rootApiUrl = process.env.NEXT_PUBLIC_API_ROOT;
 
@@ -50,3 +51,44 @@ export const fetchTxCounts = async (projectSlug: string): Promise<TxCounts> => {
 
   return data;
 };
+
+export const fetchCurrentSupplies = async (): Promise<
+  Record<string, number>
+> => {
+  const url = `${rootApiUrl}/projects`;
+
+  let projects: unknown;
+  try {
+    projects = (await axios.get<unknown>(url)).data;
+  } catch (error) {
+    throw new Error(`Error fetching current supplies`, {
+      cause: error,
+    });
+  }
+
+  const schema = z.array(
+    z.object({
+      project_slug: z.string(),
+      current_supply: z.number(),
+    }),
+  );
+
+  let currentSupplies: Record<string, number>;
+  try {
+    const parsedProjects = schema.parse(projects);
+
+    currentSupplies = parsedProjects.reduce(
+      (acc, project) => ({
+        ...acc,
+        [project.project_slug]: project.current_supply,
+      }),
+      {},
+    );
+  } catch (error) {
+    throw new Error(`Error parsing current supplies`, {
+      cause: error,
+    });
+  }
+
+  return currentSupplies;
+};