No commit message

src/lib/components/providers/token-provider.svelte

@@ -44,7 +44,7 @@
         },
     };
 
-    const metadata: UITokenMetadata = {
+    export const metadata: UITokenMetadata = {
         address: "",
         attributes: [],
         collectionKey: "",
@@ -118,6 +118,12 @@
             data?.offChainMetadata?.metadata?.name ||
             data?.legacyMetadata?.name ||
             data?.onChainMetadata?.metadata?.data.name;
+        metadata.files = data?.offChainMetadata?.metadata?.properties?.files;
+        // Checking all files to see if a video exists
+        metadata.video_uri =
+            data?.offChainMetadata?.metadata?.properties?.files?.find(
+                (file: any) => file.type.startsWith("video/")
+            )?.uri;
     }
 
     $: tokenIsLoading = address !== SOL && $token.isLoading;

src/lib/trpc/routes/transactions.ts

@@ -37,7 +37,7 @@ export const transactions = t.procedure
                         z.object({
                             actionType: z.string(),
                             amount: z.number(),
-                            from: z.string(),
+                            from: z.string().nullable().optional(),
                             fromName: z.string().optional(),
                             received: z.string().optional(),
                             sent: z.string().optional(),

src/lib/types.ts

@@ -39,6 +39,12 @@ export interface UITokenMetadataCreators {
     share: number;
     verified: boolean;
 }
+
+export interface FileProperties {
+    type: string;
+    uri: string;
+}
+
 export interface UITokenMetadata {
     address: string;
     image: string;
@@ -60,6 +66,8 @@ export interface UITokenMetadata {
     tree?: string;
     seq?: number;
     leafId?: number;
+    files?: FileProperties[];
+    video_uri?: string;
 }
 
 export type Icon = keyof typeof IconPaths;

src/lib/util/get-mime-type.ts

@@ -0,0 +1,17 @@
+/* eslint-disable no-console */
+const getMimeType = async (url: string) => {
+    try {
+        const response = await fetch(url, { method: "HEAD" });
+        if (!response.ok) {
+            console.error(
+                `Failed to fetch MIME type: ${response.status} ${response.statusText}`
+            );
+            return null;
+        }
+        return response.headers.get("Content-Type");
+    } catch (error: any) {
+        return null;
+    }
+};
+
+export default getMimeType;

src/lib/util/stores/metadata.ts

@@ -0,0 +1,4 @@
+import type { UITokenMetadata } from "$lib/types";
+import { writable } from "svelte/store";
+
+export const metadataStore = writable<UITokenMetadata | null>(null);

src/lib/xray/lib/parser/types.ts

@@ -1,5 +1,5 @@
-import { EnrichedTransaction, Source, TransactionType } from "helius-sdk";
-
+import type { EnrichedTransaction } from "helius-sdk";
+import { Source, TransactionType } from "helius-sdk";
 import * as parser from "./parsers";
 
 export const SOL = "So11111111111111111111111111111111111111112";
@@ -138,7 +138,7 @@ export type ProtonParser = (
 
 export interface ProtonTransactionAction {
     actionType: ProtonActionType;
-    from: string;
+    from: string | null;
     to: string;
     sent?: string;
     received?: string;

src/routes/account/[account]/concurrent-merkle-tree/+page.svelte

@@ -238,7 +238,7 @@
                     </h3>
                 </div>
                 <p class="text-xs md:text-sm">
-                    {($cmt.data.rightMostIndex).toLocaleString()}
+                    {$cmt.data.rightMostIndex.toLocaleString()}
                 </p>
             </div>
         </div>

src/routes/token/[token]/+page.svelte

@@ -11,7 +11,7 @@
     }
 
     .img {
-        max-height: 25vh;
+        max-height: 55vh;
     }
 </style>
 
@@ -31,12 +31,51 @@
     import CopyButton from "$lib/components/copy-button.svelte";
     import TokenProvider from "$lib/components/providers/token-provider.svelte";
 
+    import getMimeType from "$lib/util/get-mime-type";
+    import { metadataStore } from "$lib/util/stores/metadata";
+    import type { UITokenMetadata } from "$lib/types";
+
     const address = $page.params.token;
+
+    let metadata: UITokenMetadata;
+
+    let mediaUrl: string | null = null;
+    let mediaType: string | null = null;
+
+    const setMedia = async (metadata: UITokenMetadata) => {
+        if (metadata.image) {
+            const mimeType = await getMimeType(metadata.image);
+            if (mimeType && mimeType.startsWith("video/")) {
+                mediaUrl = metadata.image;
+                mediaType = "video";
+                return;
+            }
+
+            if (metadata.video_uri) {
+                mediaUrl = metadata.video_uri;
+                mediaType = "video";
+                return;
+            }
+
+            if (metadata.image) {
+                mediaUrl = metadata.image;
+                mediaType = "image";
+            }
+        }
+    };
+
+    metadataStore.subscribe((metadata) => {
+        if (metadata) setMedia(metadata);
+    });
+
+    $: if (metadata) {
+        metadataStore.set(metadata);
+    }
 </script>
 
 <TokenProvider
     {address}
-    let:metadata
+    bind:metadata
     let:tokenIsLoading
 >
     {#if tokenIsLoading}
@@ -71,12 +110,29 @@
                 class="flex flex-col items-center justify-center"
                 in:fade={{ delay: 100, duration: 800 }}
             >
-                <img
-                    class="img m-auto my-3 h-auto w-full rounded-md object-contain"
-                    alt="token symbol"
-                    src={metadata.image}
-                    in:fade={{ delay: 600, duration: 1000 }}
-                />
+                {#if mediaType === "video"}
+                    <!-- Video tag -->
+                    <video
+                        class="m-auto my-3 h-auto w-full rounded-md object-contain"
+                        controls
+                        autoplay
+                        loop
+                        muted
+                        in:fade={{ delay: 600, duration: 1000 }}
+                        src={mediaUrl}
+                    />
+                {:else if mediaType === "image"}
+                    <!-- Image tag -->
+                    <img
+                        class="img m-auto my-3 h-auto w-full rounded-md object-contain"
+                        alt="token symbol"
+                        src={mediaUrl}
+                        in:fade={{ delay: 600, duration: 1000 }}
+                    />
+                {:else}
+                    <!--Loading-->
+                    <div>Loading...</div>
+                {/if}
             </div>
 
             {#if metadata.description}