Merge pull request #2887 from dusk-network/feature-2870-add-chain-id-…

…detection web-wallet: Add chain ID detection
dusk-network · Nov 12, 2024 · 11a572d · 11a572d
2 parents f4622bc + 0be4edc
commit 11a572d
Show file tree

Hide file tree

Showing 14 changed files with 199 additions and 131 deletions.
diff --git a/web-wallet/src/__mocks__/Network.js b/web-wallet/src/__mocks__/Network.js
@@ -13,6 +13,15 @@ class NetworkMock extends Network {
     return Promise.resolve(123_456_789n);
   }
 
+  // @ts-ignore
+  node = {
+    info: Promise.resolve({
+      chain: function toString() {
+        return "localnet";
+      },
+    }),
+  };
+
   get connected() {
     return this.#connected;
   }

diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -27,7 +27,7 @@
     Textbox,
   } from "$lib/dusk/components";
   import { logo } from "$lib/dusk/icons";
-  import { networkStore, settingsStore, walletStore } from "$lib/stores";
+  import { settingsStore, walletStore } from "$lib/stores";
   import {
     account,
     modal,
@@ -36,7 +36,9 @@
   } from "$lib/migration/walletConnection";
   import { getBalanceOfCoin } from "$lib/migration/migration";
 
-  const { name: migrationNetwork } = $networkStore;
+  /** @type {string} */
+  export let migrationNetwork;
+
   const { darkMode } = $settingsStore;
 
   /**

diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -1,9 +1,3 @@
-import { get } from "svelte/store";
-
-import { networkStore } from "$lib/stores";
-
-const { name: networkName } = get(networkStore);
-
 /**
  * Contracts or operations disabled here will stay
  * disabled regardless of other conditions like
@@ -63,11 +57,7 @@ export default [
     ],
   },
   {
-    // We are missing token configurations for other networks
-    // See `src/lib/containers/MigrateContract/MigrateContract.svelte`
-    enabled:
-      import.meta.env.VITE_FEATURE_MIGRATE === "true" &&
-      ["Mainnet", "Testnet"].includes(networkName),
+    enabled: import.meta.env.VITE_FEATURE_MIGRATE === "true",
     id: "migrate",
     label: "Migrate",
     operations: [

diff --git a/web-wallet/src/lib/stores/__tests__/networkStore.spec.js b/web-wallet/src/lib/stores/__tests__/networkStore.spec.js
@@ -26,14 +26,13 @@ describe("Network store", async () => {
     blockHeightSpy.mockRestore();
   });
 
-  it("should build the newtork with the correct URL and expose a name for it", async () => {
+  it("should build the network with the correct URL and expose a name for it", async () => {
     let network;
     let store;
 
     store = (await import("..")).networkStore;
     network = await store.connect();
 
-    expect(get(store).name).toBe("Localnet");
     expect(network.url).toStrictEqual(new URL("https://localhost"));
 
     vi.resetModules();
@@ -51,7 +50,6 @@ describe("Network store", async () => {
       store = (await import("..")).networkStore;
       network = await store.connect();
 
-      expect(get(store).name).toBe(matches[match]);
       expect(network.url).toStrictEqual(new URL(match));
       vi.resetModules();
     }

diff --git a/web-wallet/src/lib/stores/networkStore.js b/web-wallet/src/lib/stores/networkStore.js
@@ -19,33 +19,6 @@ function getNetworkUrl() {
   }
 }
 
-/** @type {Record<string, Exclude<NetworkName, "Mainnet">>} */
-const networkMatchesMap = {
-  devnet: "Devnet",
-  localhost: "Localnet",
-  testnet: "Testnet",
-};
-
-/**
- * Quick solution to retrieve the network name
- * from the extrapolated URL.
- *
- * @type {(url: URL) => NetworkName}
- */
-function getNetworkName(url) {
-  /** @type {NetworkName} */
-  let name = "Mainnet";
-
-  for (const match of Object.keys(networkMatchesMap)) {
-    if (~url.href.indexOf(match)) {
-      name = networkMatchesMap[match];
-      break;
-    }
-  }
-
-  return name;
-}
-
 const networkUrl = getNetworkUrl();
 
 /** @type {Network} */
@@ -56,11 +29,11 @@ const initialState = {
   get connected() {
     return network.connected;
   },
-  name: getNetworkName(networkUrl),
+  networkName: "unknown",
 };
 
 const networkStore = writable(initialState);
-const { subscribe } = networkStore;
+const { set, subscribe } = networkStore;
 
 /** @type {NetworkStoreServices["connect"]} */
 const connect = async () => (network.connected ? network : network.connect());
@@ -78,12 +51,23 @@ const getAccountSyncer = () => connect().then(() => new AccountSyncer(network));
 const getAddressSyncer = (options) =>
   connect().then(() => new AddressSyncer(network, options));
 
+/** @type {NetworkStoreServices["init"]} */
+async function init() {
+  const info = await network.node.info;
+
+  set({
+    ...initialState,
+    networkName: info.chain.toString(),
+  });
+}
+
 /** @type {NetworkStore} */
 export default {
   connect,
   disconnect,
   getAccountSyncer,
   getAddressSyncer,
   getCurrentBlockHeight,
+  init,
   subscribe,
 };
diff --git a/web-wallet/src/lib/stores/stores.d.ts b/web-wallet/src/lib/stores/stores.d.ts
@@ -42,11 +42,9 @@ type OperationsStoreContent = { currentOperation: string };
 
 type OperationsStore = Writable<OperationsStoreContent>;
 
-type NetworkName = "Devnet" | "Localnet" | "Mainnet" | "Testnet";
-
 type NetworkStoreContent = {
   get connected(): boolean;
-  name: NetworkName;
+  networkName: string;
 };
 
 type NetworkSyncerOptions = {
@@ -63,10 +61,19 @@ type NetworkStoreServices = {
     options?: NetworkSyncerOptions
   ) => Promise<import("$lib/vendor/w3sper.js/src/mod").AddressSyncer>;
   getCurrentBlockHeight: () => Promise<bigint>;
+  init: () => Promise<void>;
 };
 
 type NetworkStore = Readable<NetworkStoreContent> & NetworkStoreServices;
 
+type NodeInfo = {
+  bootstrappingNodes: Array<string>;
+  chainId: number;
+  kadcastAddress: string;
+  version: string;
+  versionBuild: string;
+};
+
 type WalletStoreBalance = {
   shielded: AddressBalance;
   unshielded: AccountBalance;

diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -40,7 +40,7 @@
   });
 
   const { currency, language } = $settingsStore;
-  const { name: networkName } = $networkStore;
+  const { networkName } = $networkStore;
 
   $: ({ balance, currentProfile, profiles, syncStatus } = $walletStore);
   $: if (syncStatus.isInProgress) {

diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -228,7 +228,7 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
             class="footer__network-message svelte-krh9k4"
           >
             <span>
-              Dusk Localnet
+              Dusk unknown
             </span>
              
           </div>
@@ -494,7 +494,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
           class="footer__network-message svelte-krh9k4"
         >
           <span>
-            Dusk Localnet
+            Dusk unknown
           </span>
            
         </div>
@@ -761,7 +761,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
             class="footer__network-message svelte-krh9k4"
           >
             <span>
-              Dusk Localnet - Sync Failed
+              Dusk unknown - Sync Failed
             </span>
              
           </div>
@@ -1048,7 +1048,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
         >
            
           <span>
-            Dusk Localnet
+            Dusk unknown
              –
               
             <b>
@@ -1322,7 +1322,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           >
              
             <span>
-              Dusk Localnet
+              Dusk unknown
                –
               
               <b>

diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -128,6 +128,36 @@ exports[`Dashboard > should render a card when there is an error getting transac
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    
@@ -320,6 +350,36 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    

diff --git a/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte b/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte
@@ -3,7 +3,7 @@
 <script>
   import { onDestroy } from "svelte";
   import { MigrateContract } from "$lib/containers";
-  import { operationsStore } from "$lib/stores";
+  import { networkStore, operationsStore } from "$lib/stores";
 
   /** @param {string} id */
   function updateOperation(id) {
@@ -16,6 +16,10 @@
   onDestroy(() => {
     updateOperation("");
   });
+
+  const { networkName } = $networkStore;
 </script>
 
-<MigrateContract />
+{#if ["mainnet", "testnet"].includes(networkName)}
+  <MigrateContract migrationNetwork={networkName} />
+{/if}
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -58,7 +58,7 @@
   const currenciesToOptions = mapWith(currencyToOption);
   const { currency, darkMode, gasLimit, gasPrice } = $settingsStore;
   const { gasLimitLower, gasLimitUpper, gasPriceLower } = $gasStore;
-  const { name: networkName } = $networkStore;
+  const { networkName } = $networkStore;
 
   let isDarkMode = darkMode;
   let isGasValid = false;
@@ -90,7 +90,9 @@
         </div>
         <Badge {...connectedBadgeProps} />
       </header>
-      <h1>{networkName}</h1>
+      <strong class="h1 settings-group__label">
+        {networkName}
+      </strong>
     </article>
     <hr />
     <article class="settings-group">
@@ -239,6 +241,7 @@
     margin-bottom: 0.5em;
 
     &__header {
+      text-transform: capitalize;
       display: flex;
       align-items: center;
       gap: 0.75em;
@@ -249,6 +252,10 @@
       }
     }
 
+    &__label {
+      text-transform: capitalize;
+    }
+
     &__heading {
       line-height: 140%;
     }