Merge pull request #83 from macalinao/igm/token-info-from-ctl

Support using token info from certified token list and image URIs

Author: macalinao

.changeset/dry-humans-sip.md

@@ -0,0 +1,6 @@
+---
+"@macalinao/gill-extra": minor
+"example-dapp": patch
+---
+
+Update token info fetching to fetch image URIs and from certified token list fallback

apps/example-dapp/src/routes/examples/index.tsx

@@ -62,6 +62,20 @@ const ExamplesIndexPage: React.FC = () => {
             </Link>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>All Tokens</CardTitle>
+            <CardDescription>
+              View comprehensive token information including supply and decimals
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link to="/examples/tokens">
+              <Button className="w-full">View Example</Button>
+            </Link>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

apps/example-dapp/src/routes/examples/tokens.tsx

@@ -20,6 +20,8 @@ export const Route = createFileRoute("/examples/tokens")({
 // Define token mint addresses
 const TOKENS = [
   address("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"), // USDC
+  address("Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB"), // USDT
+  address("AuQaustGiaqxRvj2gtCdrd22PBzTn8kM3kEPEkZCtuDw"), // ADX (no metadata JSON, just an image)
   address("So11111111111111111111111111111111111111112"), // Wrapped SOL
   address("JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN"), // Jupiter
   address("METAewgxyPbgwsseH8T16a39CQ5VyVxZi9zXiDPY18m"), // META

packages/gill-extra/src/fetch-token-info.ts

@@ -38,19 +38,27 @@ export async function fetchTokenInfo({
     try {
       const response = await fetch(uri);
       if (response.ok) {
-        const result = tokenMetadataSchema.safeParse(await response.json());
+        const contentType = response.headers.get("content-type");
 
-        if (result.success) {
-          // Override with data from URI JSON
-          metadataAccountData = {
-            name: result.data.name,
-            symbol: result.data.symbol,
-          };
-          if (result.data.image) {
-            metadataUriJson = { image: result.data.image };
-          }
+        // If the URI is an image, use it directly as the image URI
+        if (contentType?.startsWith("image")) {
+          metadataUriJson = { image: uri };
         } else {
-          console.error("Invalid token metadata:", result.error);
+          // Otherwise, try to parse it as JSON
+          const result = tokenMetadataSchema.safeParse(await response.json());
+
+          if (result.success) {
+            // Override with data from URI JSON
+            metadataAccountData = {
+              name: result.data.name,
+              symbol: result.data.symbol,
+            };
+            if (result.data.image) {
+              metadataUriJson = { image: result.data.image };
+            }
+          } else {
+            console.error("Invalid token metadata:", result.error);
+          }
         }
       }
     } catch (error) {
@@ -59,10 +67,36 @@ export async function fetchTokenInfo({
   }
 
   // Create token info with all collected data
-  return createTokenInfo({
+  const tokenInfo = createTokenInfo({
     mint: mint.address,
     mintAccount: { decimals },
     metadataAccount: metadataAccountData,
     metadataUriJson,
   });
+
+  // Fallback: Try to fetch from certified token list if no icon URL
+  if (!tokenInfo.iconURL) {
+    const certifiedTokenInfoUrl = `https://raw.githubusercontent.com/CLBExchange/certified-token-list/refs/heads/master/101/${mint.address}.json`;
+    try {
+      const response = await fetch(certifiedTokenInfoUrl);
+      if (response.ok) {
+        const data = (await response.json()) as {
+          name: string;
+          symbol: string;
+          logoURI: string;
+        };
+        if (!tokenInfo.name) {
+          tokenInfo.name = data.name;
+        }
+        if (!tokenInfo.symbol) {
+          tokenInfo.symbol = data.symbol;
+        }
+        tokenInfo.iconURL = data.logoURI;
+      }
+    } catch (error) {
+      console.warn("Could not fetch certified token info:", error);
+    }
+  }
+
+  return tokenInfo;
 }