Sync Prod and Dev Branches

.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

package.json

@@ -31,6 +31,7 @@
         "@sveltejs/adapter-auto": "^2.0.0",
         "@sveltejs/adapter-vercel": "^2.0.2",
         "@tailwindcss/typography": "^0.5.8",
+        "@types/js-cookie": "^3.0.3",
         "@typescript-eslint/eslint-plugin": "^5.59.11",
         "@typescript-eslint/parser": "^5.59.11",
         "autoprefixer": "^10.4.7",

src/lib/components/account-header.svelte

@@ -38,7 +38,13 @@
     export let account: string = "";
     export let link: string = "";
 
-    const accountInfo = client.accountInfo.createQuery(account);
+    const params = new URLSearchParams(window.location.search);
+    const network = params.get("network");
+    let isMainnetValue = network !== "devnet";
+    const accountInfo = client.accountInfo.createQuery([
+        account,
+        isMainnetValue,
+    ]);
     const price = client.price.createQuery(SOL);
 
     const balance = tweened(0, {
@@ -54,6 +60,17 @@
     $: if ($accountInfo?.data?.balance) {
         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);
+    }
 
     $: worth = $balance * $price?.data;
 </script>
@@ -79,6 +96,13 @@
                             />
                         </div>
                     </div>
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <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/account-info.svelte

@@ -11,12 +11,16 @@
 
     import CopyButton from "$lib/components/copy-button.svelte";
     import Namor from "$lib/components/providers/namor-provider.svelte";
-
     export let account = "";
 
     const client = trpcWithQuery($page);
-
-    const accountInfo = client.accountInfo.createQuery(account);
+    const params = new URLSearchParams(window.location.search);
+    const network = params.get("network");
+    const isMainnetValue = network !== "devnet";
+    const accountInfo = client.accountInfo.createQuery([
+        account,
+        isMainnetValue,
+    ]);
     const price = client.price.createQuery(SOL);
 
     const balance = tweened(0, {

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

@@ -4,7 +4,7 @@
 </script>
 
 <footer
-    class="footer mt-20 grid w-full grid-cols-2 items-center border bg-black p-3"
+    class="footer mt-0 grid w-full grid-cols-2 items-center border bg-black p-3"
 >
     <div class="col-span-1 flex items-center">
         <PoweredByHelius />

src/lib/components/image.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    export let src: string;
+    export let className = "";
+    export let alt = "image";
+
+    let loaded = false;
+    let failed = false;
+    let loading = false;
+
+    onMount(() => {
+        const img = new Image();
+        img.src = src;
+        loading = true;
+
+        img.onload = () => {
+            loading = false;
+            loaded = true;
+        };
+        img.onerror = () => {
+            loading = false;
+            failed = true;
+        };
+    });
+</script>
+
+{#if loading}
+    <img
+        src="https://samherbert.net/svg-loaders/svg-loaders/bars.svg"
+        class="{className} scale-[0.25] opacity-50"
+        {alt}
+    />
+{:else if failed}
+    <img
+        src="https://imgs.search.brave.com/_21o9NXVQGftTNHMC4ZBLatg4jZkXGTJj3bRU6Q11CY/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9jZG40/Lmljb25maW5kZXIu/Y29tL2RhdGEvaWNv/bnMvb2ZmaWNlLXRo/aWNrLW91dGxpbmUv/MzYvb2ZmaWNlLTA4/LTEyOC5wbmc"
+        class="{className} scale-50 opacity-50"
+        {alt}
+    />
+{:else if loaded}
+    <img
+        {src}
+        class={className}
+        {alt}
+    />
+{/if}

src/lib/components/log-messages.svelte

@@ -1,20 +1,30 @@
 <style>
     .text-sky {
-        @apply text-info-content;
+        color: text-info-content;
     }
 
     .text-tangerine {
-        @apply text-[#e8a034];
+        color: text-#e8a034;
     }
 </style>
 
 <script lang="ts">
+    import { txn } from "$lib/state/stores/txn";
     import { parseProgramLogs } from "$lib/util/program-logs";
-
+    import { onMount } from "svelte";
     export let logs: string[];
 
     const parsedLogs = parseProgramLogs(logs);
 
+    onMount(() => {
+        //@ts-ignore
+        if (parsedLogs == "") {
+            txn.set(false);
+        } else {
+            txn.set(true);
+        }
+    });
+
     const totalComputeUnits = parsedLogs.reduce(
         (sum, log) => sum + log.computeUnits,
         0

src/lib/components/modals/help.svelte

@@ -1,8 +1,7 @@
 <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]> = [
-        ["backpack", "xNFT Backpack usernames like @username"],
         ["globe", ".sol, .abc, .poor, .bonk domains"],
         ["person", "Wallet/Account addresses"],
         ["coins", "Token addresses"],

src/lib/components/modals/menu.svelte

@@ -1,7 +1,12 @@
-{#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/mV3dNPwDnZ" }] as { name, url }}
+<script>
+    import Network from "../network.svelte";
+</script>
+
+{#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
         class="btn-ghost btn w-full">{name}</a
     >
 {/each}
+<Network />

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

@@ -8,6 +8,9 @@
     import Stats from "$lib/components/stats.svelte";
 
     import { showModal } from "$lib/state/stores/modals";
+    const params = new URLSearchParams(window.location.search);
+    const network = params.get("network");
+    const isMainnetValue = network !== "devnet";
 </script>
 
 <Stats />
@@ -24,7 +27,7 @@
         >
             <a
                 class="btn-ghost btn px-2"
-                href="/"
+                href="/?network={isMainnetValue ? 'mainnet' : 'devnet'}"
                 rel="noreferrer"
             >
                 <span class="text-3xl">XRAY</span>
@@ -42,24 +45,51 @@
 
     <div class="col-span-2 flex items-center justify-end">
         <div class="flex justify-end pr-2">
-            <button
-                class="btn-ghost btn"
-                on:click={() => showModal("HELP")}
+            <div
+                class="tooltip"
+                data-tip="Docs"
             >
-                <Icon
-                    id="question"
-                    size="md"
-                />
-            </button>
-            <button
-                class="btn-ghost btn"
-                on:click={() => showModal("MENU")}
+                <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="hamburger"
-                    size="lg"
-                />
-            </button>
+                <button
+                    class="btn-ghost btn"
+                    on:click={() => showModal("HELP")}
+                >
+                    <Icon
+                        id="question"
+                        size="md"
+                    />
+                </button>
+            </div>
+            <div
+                class="tooltip"
+                data-tip="Menu"
+            >
+                <button
+                    class="btn-ghost btn"
+                    on:click={() => showModal("MENU")}
+                >
+                    <Icon
+                        id="hamburger"
+                        size="lg"
+                    />
+                </button>
+            </div>
         </div>
     </div>
 </nav>

src/lib/components/network.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    let isMainnetValue = true;
+
+    onMount(() => {
+        const savedIsMainnet = localStorage.getItem("isMainnet");
+        if (savedIsMainnet !== null) {
+            isMainnetValue = JSON.parse(savedIsMainnet);
+        }
+    });
+    onMount(() => {
+        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));
+        const params = new URLSearchParams(window.location.search);
+        params.set("network", isMainnetValue ? "mainnet" : "devnet");
+        history.replaceState({}, "", "?" + params.toString());
+        history.go(0);
+    }
+</script>
+
+<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"
+            class="toggle flex justify-center"
+            bind:checked={isMainnetValue}
+            on:change={toggleNetwork}
+        />
+        <span class="toggle-mark" />
+    </label>
+    <span class="network-text m-auto my-1 flex font-bold"
+        >{isMainnetValue ? "Mainnet" : "Devnet"}</span
+    >
+</div>