From 4bed70f68097466a738f3efedefe8e85506a7052 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 |  1 +
 .../src/lib/components/navbar/Navbar.svelte   | 28 +++++++++++--------
 .../statistics-panel/StatisticsPanel.svelte   |  5 +++-
 explorer/src/routes/+page.svelte              |  7 +++--
 5 files changed, 28 insertions(+), 17 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 db01359ef..af8d5d09e 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 054e9dd2a..caafb1a52 100644
--- a/explorer/src/lib/components/navbar/Navbar.css
+++ b/explorer/src/lib/components/navbar/Navbar.css
@@ -58,6 +58,7 @@
 
 .dusk-navbar__menu--network {
   order: 3;
+  text-transform: uppercase;
 }
 
 .dusk-navbar__menu--network select {
diff --git a/explorer/src/lib/components/navbar/Navbar.svelte b/explorer/src/lib/components/navbar/Navbar.svelte
index f08c30203..06a608593 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,10 +46,20 @@
     )[0]?.clientHeight;
   }
 
+  /**
+   * @param {Event} e
+   */
+  function handleChange(e) {
+    // @ts-ignore
+    appStore.setNetwork(e.target.value);
+  }
+
   afterNavigate(() => {
     hidden = true;
     showSearchNotification = false;
   });
+
+  $: ({ networks } = $appStore);
 </script>
 
 <nav
@@ -91,7 +91,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/lib/containers/statistics-panel/StatisticsPanel.svelte b/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
index 8dc6a4441..47ecfadff 100644
--- a/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
+++ b/explorer/src/lib/containers/statistics-panel/StatisticsPanel.svelte
@@ -50,7 +50,10 @@
     STATS_FETCH_INTERVAL
   );
 
-  onNetworkChange(pollingStatsDataStore.start);
+  onNetworkChange((network) => {
+    pollingStatsDataStore.stop();
+    pollingStatsDataStore.start(network);
+  });
   onNetworkChange(getNodeLocations);
   onNetworkChange(getMarketData);
 
diff --git a/explorer/src/routes/+page.svelte b/explorer/src/routes/+page.svelte
index 662df1972..7b3efae70 100644
--- a/explorer/src/routes/+page.svelte
+++ b/explorer/src/routes/+page.svelte
@@ -11,9 +11,12 @@
     $appStore.fetchInterval
   );
 
-  onNetworkChange(pollingDataStore.start);
-
   $: ({ data, error, isLoading } = $pollingDataStore);
+
+  onNetworkChange((network) => {
+    pollingDataStore.stop();
+    pollingDataStore.start(network);
+  });
 </script>
 
 <section class="chain-info">