explorer: link network select to appStore

dusk-network · May 20, 2024 · 824bfc5 · 824bfc5
1 parent 8df8c07
commit 824bfc5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 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
@@ -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
@@ -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
@@ -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
@@ -17,6 +17,11 @@
   onDestroy(pollingDataStore.stop);
 
   $: ({ data, error, isLoading } = $pollingDataStore);
+
+  onNetworkChange((network) => {
+    pollingDataStore.stop();
+    pollingDataStore.start(network);
+  });
 </script>
 
 <section class="chain-info">