explorer: link network select to appStore

dusk-network · May 14, 2024 · 4bed70f · 4bed70f
1 parent a46fd0b
commit 4bed70f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">