Merge pull request #234 from helius-labs/vercel/staging

Merge vercel/staging into vercel/prod

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test

src/lib/components/account-header.svelte

@@ -61,13 +61,16 @@
         balance.set($accountInfo.data.balance);
     }
     function toggleNetwork() {
-    isMainnetValue = !isMainnetValue;
-    localStorage.setItem("isMainnet", JSON.stringify(isMainnetValue));
-    const params = new URLSearchParams(window.location.search);
-    params.set("network", isMainnetValue ? "mainnet" : "devnet");
-    history.replaceState({}, "", "?" + params.toString());
-    history.go(0);
-}
+        isMainnetValue = !isMainnetValue;
+        localStorage.setItem("isMainnet", JSON.stringify(isMainnetValue));
+
+        const params = new URLSearchParams(window.location.search);
+
+        params.set("network", isMainnetValue ? "mainnet" : "devnet");
+
+        history.replaceState({}, "", "?" + params.toString());
+        history.go(0);
+    }
 
     $: worth = $balance * $price?.data;
 </script>
@@ -77,7 +80,6 @@
     let:usernames
     let:usernameIsLoading
 >
-
     <div class="nav sticky top-16 z-30 gap-2 bg-base-100 px-3 pt-2">
         <div class="flex flex-col bg-base-100">
             <div class="flex items-center justify-between">
@@ -95,12 +97,12 @@
                         </div>
                     </div>
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <div 
-                    class="badge cursor-default badge-outline py-2 px-4 flex relative mx-2 opacity-90"
-                    on:click={toggleNetwork}
-                >
-                    {isMainnetValue ? "mainnet" : "devnet"}
-                </div>
+                    <div
+                        class="badge-outline badge relative mx-2 flex cursor-default px-4 py-2 opacity-90"
+                        on:click={toggleNetwork}
+                    >
+                        {isMainnetValue ? "mainnet" : "devnet"}
+                    </div>
                 </div>
                 <div class="relative text-right">
                     <h1 class="text-md md:block">

src/lib/components/copy-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { Icon as IconType } from "src/lib/types";
+    import type { Icon as IconType } from "$lib/types";
 
     import { copyToClipboard } from "$lib/util/clipboard";
 

src/lib/components/footer.svelte

@@ -13,7 +13,7 @@
     <div class="col-span-1 flex w-full justify-end">
         <div class="mr-12">
             <a
-                href="https://discord.gg/nSkq35VUf5"
+                href="https://discord.gg/mV3dNPwDnZ"
                 class="btn-ghost btn"
             >
                 <Icon

src/lib/components/log-messages.svelte

@@ -1,10 +1,10 @@
 <style>
     .text-sky {
-        @apply text-info-content;
+        color: text-info-content;
     }
 
     .text-tangerine {
-        @apply text-[#e8a034];
+        color: text-#e8a034;
     }
 </style>
 

src/lib/components/modals/help.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { Icon as IconType } from "src/lib/types";
+    import type { Icon as IconType } from "$lib/types";
     import Icon from "$lib/components/icon.svelte";
     const supportedSearches: Array<[IconType, string]> = [
         ["globe", ".sol, .abc, .poor, .bonk domains"],

src/lib/components/modals/menu.svelte

@@ -2,7 +2,7 @@
     import Network from "../network.svelte";
 </script>
 
-{#each [{ name: "Contribute", url: "https://github.com/helius-labs/xray" }, { name: "Join Discord", url: "https://discord.gg/nSkq35VUf5" }] as { name, url }}
+{#each [{ name: "Home", url: "/" }, { name: "About Helius APIs", url: "https://helius.xyz" }, { name: "Contribute", url: "https://github.com/helius-labs/xray" }, { name: "Join Discord", url: "https://discord.gg/nSkq35VUf5" }] as { name, url }}
     <a
         href={url}
         data-sveltekit-reload

src/lib/components/modals/transaction-filter.svelte

@@ -3,8 +3,6 @@
     import { transactionActionsMetadata } from "$lib/types";
     import { filterStore } from "$lib/util/stores/filter";
 
-    import Icon from "../icon.svelte";
-
     const handleClick = (key: string) => {
         $filterStore = key;
         hideModal();

src/lib/components/modals/wallets.svelte

@@ -3,7 +3,7 @@
 
     import shortenString from "$lib/util/shorten-string";
 
-    import { hideModal } from "$lib/state/stores/modals";
+    // import { hideModal } from "$lib/state/stores/modals";
 </script>
 
 {#each addresses as address}

src/lib/components/nav.svelte

@@ -45,34 +45,50 @@
 
     <div class="col-span-2 flex items-center justify-end">
         <div class="flex justify-end pr-2">
-            <div class="tooltip" data-tip="Docs">
-            <a href="https://docs.helius.dev/welcome/what-is-helius" rel="noreferrer" target="_blank"
-                class="btn-ghost btn"
+            <div
+                class="tooltip"
+                data-tip="Docs"
             >
-                <img class="h-6 opacity-90" src="docs.svg" alt="">
-        </a>
-        </div>
-        <div class="tooltip" data-tip="Help">
-            <button
-                class="btn-ghost btn"
-                on:click={() => showModal("HELP")}
+                <a
+                    href="https://docs.helius.dev/welcome/what-is-helius"
+                    rel="noreferrer"
+                    target="_blank"
+                    class="btn-ghost btn"
+                >
+                    <img
+                        class="h-6 opacity-90"
+                        src="docs.svg"
+                        alt=""
+                    />
+                </a>
+            </div>
+            <div
+                class="tooltip"
+                data-tip="Help"
             >
-                <Icon
-                    id="question"
-                    size="md"
-                />
-            </button>
-        </div>
-        <div class="tooltip" data-tip="Menu">
-            <button
-                class="btn-ghost btn"
-                on:click={() => showModal("MENU")}
+                <button
+                    class="btn-ghost btn"
+                    on:click={() => showModal("HELP")}
+                >
+                    <Icon
+                        id="question"
+                        size="md"
+                    />
+                </button>
+            </div>
+            <div
+                class="tooltip"
+                data-tip="Menu"
             >
-                <Icon
-                    id="hamburger"
-                    size="lg"
-                />
-            </button>
+                <button
+                    class="btn-ghost btn"
+                    on:click={() => showModal("MENU")}
+                >
+                    <Icon
+                        id="hamburger"
+                        size="lg"
+                    />
+                </button>
             </div>
         </div>
     </div>

src/lib/components/network.svelte

@@ -10,11 +10,11 @@
         }
     });
     onMount(() => {
-    const params = new URLSearchParams(window.location.search);
-    const network = params.get("network");
-    isMainnetValue = network !== "devnet";
-    localStorage.setItem("isMainnet", JSON.stringify(isMainnetValue));
-});
+        const params = new URLSearchParams(window.location.search);
+        const network = params.get("network");
+        isMainnetValue = network !== "devnet";
+        localStorage.setItem("isMainnet", JSON.stringify(isMainnetValue));
+    });
     function toggleNetwork(event: Event) {
         isMainnetValue = (event.target as HTMLInputElement).checked;
         localStorage.setItem("isMainnet", JSON.stringify(isMainnetValue));
@@ -25,7 +25,9 @@
     }
 </script>
 
-<div class="toggle-container m-auto p-4 mt-2 flex w-full flex-col justify-center">
+<div
+    class="toggle-container m-auto mt-2 flex w-full flex-col justify-center p-4"
+>
     <label class="toggle-label m-auto flex flex-col">
         <input
             type="checkbox"

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

@@ -49,7 +49,7 @@
         },
     };
 
-    const metadata: UITokenMetadata = {
+    export const metadata: UITokenMetadata = {
         address: "",
         attributes: [],
         collectionKey: "",
@@ -123,6 +123,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/components/search.svelte

@@ -103,63 +103,63 @@
     };
 
     const newSearch = async () => {
-    searchError = "";
-    isSearching = true;
+        searchError = "";
+        isSearching = true;
 
-    try {
-        const response = await fetch(
-            `/api/search/${inputValue}?network=${
-                isMainnetValue ? "mainnet" : "devnet"
-            }`
-        );
+        try {
+            const response = await fetch(
+                `/api/search/${inputValue}?network=${
+                    isMainnetValue ? "mainnet" : "devnet"
+                }`
+            );
 
-        const data = await response.json();
+            const data = await response.json();
 
-        if (!data.valid) {
+            if (!data.valid) {
+                searchFailed();
+                return;
+            }
+
+            selectSearch(data);
+        } catch (error) {
             searchFailed();
-            return;
         }
-
-        selectSearch(data);
-    } catch (error) {
-        searchFailed();
-    }
-};
+    };
 
     let isMainnetValue = true;
 
-onMount(() => {
-    const params = new URLSearchParams(window.location.search);
-    const network = params.get("network");
-    if (network !== null) {
-        isMainnetValue = network === "mainnet";
-    }
-    recent = getRecentSearches();
-
-    isBackpack =
-        window?.localStorage?.getItem("walletAdapter") === '"Backpack"';
-});
-
-$: if ($walletStore.connected && !connected) {
-    focusInput();
-    const params = new URLSearchParams(window.location.search);
-    const network = params.get("network");
-    isMainnetValue = network !== "devnet";
-    inputValue = $walletStore.publicKey?.toBase58() || "";
-    addRecent({
-        address: inputValue,
-        search: inputValue,
-        type: "account",
-        url: `/account/${inputValue}?network=${
-            isMainnetValue ? "mainnet" : "devnet"
-        }`,
-        valid: true,
+    onMount(() => {
+        const params = new URLSearchParams(window.location.search);
+        const network = params.get("network");
+        if (network !== null) {
+            isMainnetValue = network === "mainnet";
+        }
+        recent = getRecentSearches();
+
+        isBackpack =
+            window?.localStorage?.getItem("walletAdapter") === '"Backpack"';
     });
 
-    window.location.href = `/account/${inputValue}`;
+    $: if ($walletStore.connected && !connected) {
+        focusInput();
+        const params = new URLSearchParams(window.location.search);
+        const network = params.get("network");
+        isMainnetValue = network !== "devnet";
+        inputValue = $walletStore.publicKey?.toBase58() || "";
+        addRecent({
+            address: inputValue,
+            search: inputValue,
+            type: "account",
+            url: `/account/${inputValue}?network=${
+                isMainnetValue ? "mainnet" : "devnet"
+            }`,
+            valid: true,
+        });
+
+        window.location.href = `/account/${inputValue}`;
 
-    connected = true;
-}
+        connected = true;
+    }
 </script>
 
 <div class="relative z-30 my-2 w-full">