Merge pull request #278 from helius-labs/feat/better-tokens

[Feat] Better Token Support
helius-labs · Jan 24, 2024 · 5d85c4a · 5d85c4a
2 parents f4026fb + ae1be89
commit 5d85c4a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 3 deletions.
diff --git a/src/lib/components/providers/token-provider.svelte b/src/lib/components/providers/token-provider.svelte
@@ -92,6 +92,8 @@
         metadata.video_uri = data?.content.files?.find((file: any) =>
             file.mime?.startsWith("video/")
         )?.uri;
+        metadata.burnt = data?.burnt;
+        metadata.mintExtensions = data?.mint_extensions;
     }
 
     $: if (data?.id && !metadata.image) {

diff --git a/src/lib/trpc/routes/asset.ts b/src/lib/trpc/routes/asset.ts
@@ -20,10 +20,10 @@ export const asset = t.procedure
                 jsonrpc: "2.0",
                 method: "getAsset",
                 params: {
-                    displayOptions: {
+                    id: asset,
+                    options: {
                         showFungible: true,
                     },
-                    id: asset,
                 },
             }),
             headers: {
@@ -43,6 +43,7 @@ export const asset = t.procedure
                 address: data?.result?.id || "",
                 assetHash: data?.result?.compression?.asset_hash,
                 attributes: returnAssetData?.attributes || [],
+                burnt: data?.result?.burnt,
                 collectionKey: data?.result?.grouping[0]?.group_value || "",
                 compressed: true,
                 creatorHash: data?.result?.compression?.creator_hash,
@@ -55,6 +56,7 @@ export const asset = t.procedure
                 frozen: data?.result?.ownership?.frozen,
                 image: returnAssetData?.image || "",
                 leafId: data?.result?.compression?.leaf_id,
+                mintExtensions: data?.result?.mint_extensions || "",
                 mutable: data?.result?.mutable,
                 name: returnAssetData?.name || "",
                 owner: data?.result?.ownership?.owner || "",

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -65,6 +65,8 @@ export interface UITokenMetadata {
     leafId?: number;
     files?: FileProperties[];
     video_uri?: string;
+    burnt?: boolean;
+    mintExtensions?: object;
 }
 
 export type Icon = keyof typeof IconPaths;

diff --git a/src/lib/util/format-object.ts b/src/lib/util/format-object.ts
@@ -0,0 +1,28 @@
+export const formatKey = (key: string) =>
+    key
+        .replace(/_/g, " ")
+        .split(" ")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+
+export const formatObject = (obj: any, indentLevel = 0): string => {
+    const entries = Object.entries(obj).map(([key, value]) => {
+        const formattedKey = formatKey(key);
+        // Apply bold style to top-level keys
+        const boldClass = indentLevel === 0 ? "font-bold" : "";
+        const valueClass = indentLevel > 0 ? "text-green-600" : "";
+        const formattedValue =
+            typeof value === "object" && value !== null && !Array.isArray(value)
+                ? formatObject(value, indentLevel + 1) // Recursively format nested objects
+                : `<span class="${valueClass}">${value}</span>`;
+
+        return `<div>${" ".repeat(
+            indentLevel * 4
+        )}<span class="${boldClass}">${formattedKey}${
+            typeof value === "object" ? "" : ":"
+        }</span> ${formattedValue}</div>`;
+    });
+
+    // Join all the entries with a new line for top-level properties
+    return entries.join(indentLevel === 0 ? '<div class="my-2"></div>' : "");
+};
diff --git a/src/routes/token/[token]/+page.svelte b/src/routes/token/[token]/+page.svelte
@@ -34,7 +34,8 @@
     import getMimeType from "$lib/util/get-mime-type";
     import { metadataStore } from "$lib/util/stores/metadata";
     import type { UITokenMetadata } from "$lib/types";
-    import Icon from "$lib/components/icon.svelte";
+
+    import { formatKey, formatObject } from "$lib/util/format-object";
 
     const address = $page.params.token;
     const params = new URLSearchParams(window.location.search);
@@ -75,6 +76,10 @@
     $: if (metadata) {
         metadataStore.set(metadata);
     }
+
+    $: formattedMintExtensions = metadata?.mintExtensions
+        ? formatObject(metadata.mintExtensions)
+        : "";
 </script>
 
 <TokenProvider
@@ -488,6 +493,22 @@
                 </Collapse>
             </div>
 
+            {#if formattedMintExtensions}
+                <div class="mb-6 mt-6">
+                    <Collapse
+                        sectionTitle="Mint Extensions"
+                        iconId="codeFork"
+                        showDetails={false}
+                    >
+                        <div
+                            class="overflow-x-auto whitespace-pre-wrap text-sm"
+                        >
+                            {@html formattedMintExtensions}
+                        </div>
+                    </Collapse>
+                </div>
+            {/if}
+
             {#key metadata.compressed}
                 <div class="mt-3 pl-2 md:pl-0">
                     <Transactions