From 2154fe2256042acb9766ce3b92b6c15d43f3194f Mon Sep 17 00:00:00 2001
From: 0xIchigo <0xIchigo@protonmail.com>
Date: Sat, 30 Dec 2023 01:11:22 -0500
Subject: [PATCH] Make JSON Metadata Nicer For Tokens

---
 src/lib/components/json.svelte        | 14 ++++++++------
 src/routes/token/[token]/+page.svelte | 20 +++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
index 780c80de..1d2dca85 100644
--- 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
index 1e537dc6..685478ab 100644
--- 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>