From 824bfc5c4f224b069c7d4550843368977e592377 Mon Sep 17 00:00:00 2001
From: Alex <panturu.alexandru@gmail.com>
Date: Tue, 14 May 2024 11:13:22 +0300
Subject: [PATCH] explorer: link network select to appStore

---
 .../__snapshots__/Navbar.spec.js.snap         |  4 +--
 explorer/src/lib/components/navbar/Navbar.css |  8 +-----
 .../src/lib/components/navbar/Navbar.svelte   | 28 +++++++++++--------
 explorer/src/routes/+page.svelte              |  5 ++++
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
index db01359ef3..af8d5d09ea 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -52,13 +52,13 @@ exports[`Navbar > renders the Navbar component 1`] = `
         <option
           value="nodes.dusk.network"
         >
-          testnet
+          Testnet
            
         </option>
         <option
           value="devnet.nodes.dusk.network"
         >
-          devnet
+          Devnet
            
         </option>
         
diff --git a/explorer/src/lib/components/navbar/Navbar.css b/explorer/src/lib/components/navbar/Navbar.css
index 054e9dd2af..1590759e40 100644
--- a/explorer/src/lib/components/navbar/Navbar.css
+++ b/explorer/src/lib/components/navbar/Navbar.css
@@ -57,15 +57,9 @@
 }
 
 .dusk-navbar__menu--network {
-  order: 3;
-}
-
-.dusk-navbar__menu--network select {
   text-transform: uppercase;
-  padding: 0.625rem 0.875rem;
-  padding-right: 2.25rem;
-  font-size: 0.875rem;
   font-weight: 500;
+  order: 3;
 }
 
 .dusk-navbar__menu--links {
diff --git a/explorer/src/lib/components/navbar/Navbar.svelte b/explorer/src/lib/components/navbar/Navbar.svelte
index 8c30d129e3..32c2969c12 100644
--- a/explorer/src/lib/components/navbar/Navbar.svelte
+++ b/explorer/src/lib/components/navbar/Navbar.svelte
@@ -6,6 +6,7 @@
   import { Button, NavList, Select } from "$lib/dusk/components";
   import { AppAnchor, AppImage, SearchNotification } from "$lib/components";
   import { SearchField } from "$lib/containers";
+  import { appStore } from "$lib/stores";
 
   import "./Navbar.css";
 
@@ -36,17 +37,6 @@
     },
   ];
 
-  const networks = [
-    {
-      label: "testnet",
-      value: `${import.meta.env.VITE_DUSK_TESTNET_NODE}`,
-    },
-    {
-      label: "devnet",
-      value: `${import.meta.env.VITE_DUSK_DEVNET_NODE}`,
-    },
-  ];
-
   const dispatch = createEventDispatcher();
 
   async function createEmptySpace() {
@@ -56,11 +46,21 @@
     )[0]?.clientHeight;
   }
 
+  /**
+   * @param {Event} e
+   */
+  function handleChange(e) {
+    // @ts-ignore
+    appStore.setNetwork(e.target.value);
+  }
+
   afterNavigate(() => {
     hidden = true;
     dispatch("toggleMenu", hidden);
     showSearchNotification = false;
   });
+
+  $: ({ networks } = $appStore);
 </script>
 
 <nav
@@ -92,7 +92,11 @@
     class:dusk-navbar__menu--hidden={hidden}
     id="dusk-navbar-menu"
   >
-    <Select className="dusk-navbar__menu--network" options={networks} />
+    <Select
+      className="dusk-navbar__menu--network"
+      on:change={handleChange}
+      options={networks}
+    />
     <NavList className="dusk-navbar__menu--links" {navigation} />
     <div class="dusk-navbar__menu--search">
       <SearchField
diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
index fd9ea06f87..31088dd666 100644
--- a/explorer/src/routes/+page.svelte
+++ b/explorer/src/routes/+page.svelte
@@ -17,6 +17,11 @@
   onDestroy(pollingDataStore.stop);
 
   $: ({ data, error, isLoading } = $pollingDataStore);
+
+  onNetworkChange((network) => {
+    pollingDataStore.stop();
+    pollingDataStore.start(network);
+  });
 </script>
 
 <section class="chain-info">