Make JSON Metadata Nicer For Tokens

helius-labs · Dec 30, 2023 · 2154fe2 · 2154fe2
1 parent b18a7c9
commit 2154fe2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
@@ -25,12 +25,14 @@
 >
     <div class="mt-3 grid grid-cols-12 items-center gap-3 rounded-lg p-1">
         <div class="col-span-2 p-1 md:col-span-1">
+            {#if label !== "token"}
             <div class="center h-10 w-10 rounded-full bg-secondary">
                 <Icon
                     id="json"
                     size="sm"
                 />
             </div>
+            {/if}
         </div>
         <div
             class="col-span-10 flex items-center justify-between pr-1 md:col-span-11"
@@ -43,8 +45,6 @@
                         Medium
                     {:else if label === "raw"}
                         Advanced
-                    {:else if label === "token"}
-                        JSON Metadata
                     {/if}
                 </h4>
                 <h3 class="mr-2 text-xs opacity-50">
@@ -54,16 +54,17 @@
                         Enriched transaction data from the Helius API
                     {:else if label === "raw"}
                         Raw transaction data from the Solana RPC
-                    {:else if label === "token"}
-                        View the metadata for this NFT
                     {/if}
                 </h3>
             </div>
             <div class="flex items-center">
+                {#if label === "token"}
+                <h3 class="text-xs mr-2">Copy JSON</h3>
+                {/if}
                 <CopyButton
                     text={JSON.stringify(data, null, 2)}
-                    success="copied json"
                 />
+                {#if label !== "token"}
                 <button
                     class="btn-ghost btn-sm btn"
                     on:click={() => (showCode = !showCode)}
@@ -80,9 +81,10 @@
                         />
                     {/if}
                 </button>
+                {/if}
             </div>
         </div>
-        {#if showCode}
+        {#if showCode || label === "token"}
             <div class="code col-span-12 w-full overflow-hidden px-3">
                 <pre><code class="text-xs">{@html metadataHTML}</code></pre>
             </div>

diff --git a/src/routes/token/[token]/+page.svelte b/src/routes/token/[token]/+page.svelte
@@ -475,6 +475,19 @@
                 </div>
             {/if}
 
+            <div class="mt-6 mb-6">
+                <Collapse
+                sectionTitle="JSON Metadata"
+                iconId="json"
+                showDetails={false}
+                >
+                    <JSON
+                        data={metadata}
+                        label="token"
+                    />
+                </Collapse>
+            </div>
+
             {#key metadata.compressed}
                 <div class="mt-3 pl-2 md:pl-0">
                     <Transactions
@@ -483,13 +496,6 @@
                     />
                 </div>
             {/key}
-
-            <div class="mt-3">
-                <JSON
-                    data={metadata}
-                    label="token"
-                />
-            </div>
         </div>
     {/if}
 </TokenProvider>