feat: upgrade token-metadata-api-client to v2

.changeset/light-bikes-dance.md

@@ -0,0 +1,5 @@
+---
+"stackspulse": patch
+---
+
+Upgrade "@hirosystems/token-metadata-api-client" to v2.

apps/web/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@dotenvx/dotenvx": "1.15.0",
-    "@hirosystems/token-metadata-api-client": "1.3.0",
+    "@hirosystems/token-metadata-api-client": "2.0.0",
     "@radix-ui/themes": "3.0.5",
     "@sentry/nextjs": "8.33.1",
     "@stacks/stacks-blockchain-api-types": "7.14.1",

apps/web/src/app/tokens/[token]/opengraph-image.tsx

@@ -1,5 +1,5 @@
 import { env } from "@/env";
-import { stacksTokensApi } from "@/lib/stacks";
+import { tokenMetadataClient } from "@/lib/stacks";
 import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 
@@ -18,14 +18,17 @@ interface PageProps {
 }
 
 export default async function Image({ params }: PageProps) {
-  const tokenInfo = await stacksTokensApi
-    .getFtMetadata(params.token)
-    .catch((error) => {
-      if (error.status === 404) {
-        return null;
-      }
-      throw error;
-    });
+  const metadata = await tokenMetadataClient.GET(
+    "/metadata/v1/ft/{principal}",
+    {
+      params: {
+        path: {
+          principal: params.token,
+        },
+      },
+    },
+  );
+  const tokenInfo = metadata?.data;
   if (!tokenInfo) {
     notFound();
   }

apps/web/src/app/tokens/[token]/page.tsx

@@ -2,7 +2,7 @@ import { TokenHoldersTable } from "@/components/Token/TokenHoldersTable";
 import { TokenInfo } from "@/components/Token/TokenInfo";
 import { TokenStats } from "@/components/Token/TokenStats";
 import { TokenTransactionsVolume } from "@/components/Token/TokenTransactionsVolume";
-import { stacksTokensApi } from "@/lib/stacks";
+import { tokenMetadataClient } from "@/lib/stacks";
 import { Container } from "@radix-ui/themes";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -17,14 +17,17 @@ interface PageProps {
 export async function generateMetadata({
   params,
 }: PageProps): Promise<Metadata> {
-  const tokenInfo = await stacksTokensApi
-    .getFtMetadata(params.token)
-    .catch((error) => {
-      if (error.status === 404) {
-        return null;
-      }
-      throw error;
-    });
+  const metadata = await tokenMetadataClient.GET(
+    "/metadata/v1/ft/{principal}",
+    {
+      params: {
+        path: {
+          principal: params.token,
+        },
+      },
+    },
+  );
+  const tokenInfo = metadata?.data;
   if (!tokenInfo) {
     notFound();
   }
@@ -39,21 +42,22 @@ export async function generateMetadata({
 }
 
 export default async function ProtocolPage({ params }: PageProps) {
-  const tokenInfo = await stacksTokensApi
-    .getFtMetadata(params.token)
-    .catch((error) => {
-      if (error.status === 404) {
-        return null;
-      }
-      throw error;
-    });
+  const metadata = await tokenMetadataClient.GET(
+    "/metadata/v1/ft/{principal}",
+    {
+      params: {
+        path: {
+          principal: params.token,
+        },
+      },
+    },
+  );
+  const tokenInfo = metadata?.data;
   if (!tokenInfo) {
     notFound();
   }
 
-  // TODO change once https://github.com/hirosystems/token-metadata-api/issues/268 is fixed
-  const token = (tokenInfo as unknown as { asset_identifier: string })
-    .asset_identifier;
+  const token = tokenInfo.asset_identifier;
 
   return (
     <Container size="2" className="px-4 pt-10">

apps/web/src/components/Token/TokenHoldersTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useGetTokenHolders } from "@/hooks/api/useGetTokenHolders";
-import type { FtMetadataResponse } from "@hirosystems/token-metadata-api-client";
+import type { FtMetadataResponse } from "@/lib/stacks";
 import { Card, Inset, Link, Separator, Table, Text } from "@radix-ui/themes";
 
 interface TokenHoldersTableProps {

apps/web/src/components/Token/TokenInfo.tsx

@@ -1,4 +1,4 @@
-import type { FtMetadataResponse } from "@hirosystems/token-metadata-api-client";
+import type { FtMetadataResponse } from "@/lib/stacks";
 import { Heading, Text } from "@radix-ui/themes";
 import Image from "next/image";
 

apps/web/src/components/Token/TokenStats.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useGetTokenHolders } from "@/hooks/api/useGetTokenHolders";
-import type { FtMetadataResponse } from "@hirosystems/token-metadata-api-client";
+import type { FtMetadataResponse } from "@/lib/stacks";
 import { Card, Text } from "@radix-ui/themes";
 
 interface TokenStatsProps {

apps/web/src/components/Token/TokenTransactionsVolume.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useGetTransactionVolume } from "@/hooks/api/useGetTransactionVolume";
-import type { FtMetadataResponse } from "@hirosystems/token-metadata-api-client";
+import type { FtMetadataResponse } from "@/lib/stacks";
 import { Card, Inset, Separator, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import { AreaChart } from "../ui/AreaChart";

apps/web/src/hooks/api/useGetFtMetadata.ts

@@ -1,11 +1,7 @@
-import { TokensApi } from "@hirosystems/token-metadata-api-client";
+import { tokenMetadataClient } from "@/lib/stacks";
 import { useQuery } from "@tanstack/react-query";
 
-const api = new TokensApi();
-
-export const useGetFtMetadata = (params: {
-  principal: string;
-}) => {
+export const useGetFtMetadata = (params: { principal: string }) => {
   return useQuery({
     queryKey: ["get-transactions", params.principal],
     queryFn: async () => {
@@ -18,8 +14,18 @@ export const useGetFtMetadata = (params: {
           symbol: "STX",
         };
       }
-      const result = await api.getFtMetadata(params.principal);
-      return result;
+      const metadata = await tokenMetadataClient.GET(
+        "/metadata/v1/ft/{principal}",
+        {
+          params: {
+            path: {
+              principal: params.principal,
+            },
+          },
+        },
+      );
+      const tokenInfo = metadata?.data;
+      return tokenInfo;
     },
   });
 };

apps/web/src/lib/stacks.ts

@@ -1,3 +1,14 @@
-import { TokensApi } from "@hirosystems/token-metadata-api-client";
+import { createClient } from "@hirosystems/token-metadata-api-client";
 
-export const stacksTokensApi = new TokensApi({}, "https://api.hiro.so", fetch);
+export const tokenMetadataClient = createClient({
+  baseUrl: "https://api.mainnet.hiro.so",
+});
+
+export interface FtMetadataResponse {
+  decimals?: number;
+  name?: string;
+  symbol?: string;
+  description?: string;
+  image_uri?: string;
+  image_thumbnail_uri?: string;
+}