Merge pull request #222 from helius-labs/devnet

Devnet

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");
+    const isMainnetValue = network !== "devnet";
+    const accountInfo = client.accountInfo.createQuery([
+        account,
+        isMainnetValue,
+    ]);
     const price = client.price.createQuery(SOL);
 
     const balance = tweened(0, {

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/collapse.svelte

@@ -9,7 +9,7 @@
     export let showDetails = false;
 </script>
 
-<div class="collapse collapse-arrow rounded-md border">
+<div class="collapse-arrow collapse rounded-md border">
     <input
         type="checkbox"
         bind:checked={showDetails}

src/lib/components/copy-button.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <button
-    class="btn btn-xs {classList}"
+    class="btn-xs btn {classList}"
     class:btn-success={copied}
     class:btn-ghost={!copied}
     on:click={copy}

src/lib/components/footer.svelte

@@ -14,7 +14,7 @@
         <div class="mr-12">
             <a
                 href="https://discord.gg/mV3dNPwDnZ"
-                class="btn btn-ghost"
+                class="btn-ghost btn"
             >
                 <Icon
                     id="discord"
@@ -23,7 +23,7 @@
             </a>
             <a
                 href="https://twitter.com/heliuslabs"
-                class="btn btn-ghost"
+                class="btn-ghost btn"
             >
                 <Icon
                     id="twitter"

src/lib/components/json.svelte

@@ -65,7 +65,7 @@
                     success="copied json"
                 />
                 <button
-                    class="btn btn-ghost btn-sm"
+                    class="btn-ghost btn-sm btn"
                     on:click={() => (showCode = !showCode)}
                 >
                     {#if showCode}

src/lib/components/log-messages.svelte

@@ -9,12 +9,22 @@
 </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.svelte

@@ -27,7 +27,7 @@
                 <h3 class="ml-3 text-xl font-bold">{$modalsStore.title}</h3>
                 <div>
                     <button
-                        class="btn btn-ghost btn-md"
+                        class="btn-ghost btn-md btn"
                         on:click={hideModal}
                     >
                         <Icon

src/lib/components/modals/menu.svelte

@@ -1,7 +1,16 @@
-{#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";
+
+    const params = new URLSearchParams(window.location.search);
+    const network = params.get("network");
+    const isMainnetValue = network !== "devnet";
+</script>
+
+{#each [{ name: "Home", url: `/?network=${isMainnetValue ? "mainnet" : "devnet"}` }, { 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 btn-ghost w-full">{name}</a
+        class="btn-ghost btn w-full">{name}</a
     >
 {/each}
+<Network />

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

@@ -16,12 +16,12 @@
 </script>
 
 <button
-    class="btn btn-ghost w-full"
+    class="btn-ghost btn w-full"
     on:click={() => handleClick("")}>All Transactions</button
 >
 {#each filterList as [key, value]}
     <button
-        class="btn btn-ghost w-full"
+        class="btn-ghost btn w-full"
         on:click={() => handleClick(key)}
     >
         {value.filterLabel}

src/lib/components/modals/wallets.svelte

@@ -10,6 +10,6 @@
     <a
         href="/account/{address}"
         data-sveltekit-reload
-        class="btn btn-ghost w-full">{shortenString(address, 8)}</a
+        class="btn-ghost btn w-full">{shortenString(address, 8)}</a
     >
 {/each}

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 />
@@ -23,8 +26,8 @@
             }}
         >
             <a
-                class="btn btn-ghost px-2"
-                href="/"
+                class="btn-ghost btn px-2"
+                href="/?network={isMainnetValue ? 'mainnet' : 'devnet'}"
                 rel="noreferrer"
             >
                 <span class="text-3xl">XRAY</span>
@@ -43,7 +46,7 @@
     <div class="col-span-2 flex items-center justify-end">
         <div class="flex justify-end pr-2">
             <button
-                class="btn btn-ghost"
+                class="btn-ghost btn"
                 on:click={() => showModal("HELP")}
             >
                 <Icon
@@ -52,7 +55,7 @@
                 />
             </button>
             <button
-                class="btn btn-ghost"
+                class="btn-ghost btn"
                 on:click={() => showModal("MENU")}
             >
                 <Icon
@@ -66,7 +69,7 @@
 
 {#if $page.url.pathname !== "/"}
     <button
-        class="btn btn-secondary btn-sm fixed bottom-4 right-3 z-10 cursor-pointer rounded-full"
+        class="btn-secondary btn-sm btn fixed bottom-4 right-3 z-10 cursor-pointer rounded-full"
         on:click={() => window.scrollTo({ behavior: "smooth", top: 0 })}
     >
         <Icon

src/lib/components/network.svelte

@@ -0,0 +1,41 @@
+<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">
+    <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 flex-col font-bold"
+        >{isMainnetValue ? "Mainnet" : "Devnet"}</span
+    >
+</div>

src/lib/components/powered-by-helius.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <a
-    class="btn btn-ghost flex items-center text-left"
+    class="btn-ghost btn flex items-center text-left"
     href="https://helius.xyz/"
     rel="noreferrer"
     target="_blank"

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

@@ -11,18 +11,23 @@
     export let address: string;
 
     let intersecting = false;
-
+    const params = new URLSearchParams(window.location.search);
+    const network = params.get("network");
+    const isMainnetValue = network !== "devnet";
     const client = trpcWithQuery($page);
 
-    const token = client.token.createQuery([address], {
+    const token = client.token.createQuery([address, isMainnetValue], {
         refetchOnMount: false,
         refetchOnWindowFocus: false,
     });
 
-    const accountInfo = client.accountInfo.createQuery(address, {
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-    });
+    const accountInfo = client.accountInfo.createQuery(
+        [address, isMainnetValue],
+        {
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+        }
+    );
 
     const token2022Metadata: {
         [key: string]: {
@@ -57,7 +62,7 @@
         sellerFeeBasisPoints: 0,
     };
 
-    const asset = client.asset.createQuery(address, {
+    const asset = client.asset.createQuery([address, isMainnetValue], {
         refetchOnMount: false,
         refetchOnWindowFocus: false,
     });