new

helius-labs · Sep 15, 2023 · c3394db · c3394db
1 parent 1260e79
commit c3394db
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/lib/components/account-header.svelte b/src/lib/components/account-header.svelte
@@ -40,7 +40,7 @@
 
     const params = new URLSearchParams(window.location.search);
     const network = params.get("network");
-    const isMainnetValue = network !== "devnet";
+    let isMainnetValue = network !== "devnet";
     const accountInfo = client.accountInfo.createQuery([
         account,
         isMainnetValue,
@@ -60,6 +60,14 @@
     $: 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>
@@ -69,6 +77,7 @@
     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">
@@ -85,6 +94,13 @@
                             />
                         </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>
                 <div class="relative text-right">
                     <h1 class="text-md md:block">

diff --git a/src/lib/components/network.svelte b/src/lib/components/network.svelte
@@ -25,7 +25,7 @@
     }
 </script>
 
-<div class="toggle-container m-auto mt-2 flex w-full flex-col justify-center">
+<div class="toggle-container m-auto p-4 mt-2 flex w-full flex-col justify-center">
     <label class="toggle-label m-auto flex flex-col">
         <input
             type="checkbox"
@@ -35,7 +35,7 @@
         />
         <span class="toggle-mark" />
     </label>
-    <span class="network-text m-auto my-1 flex flex-col font-bold"
+    <span class="network-text m-auto my-1 flex font-bold"
         >{isMainnetValue ? "Mainnet" : "Devnet"}</span
     >
 </div>