From 0be4edcf997a5c60f5bde7ee570d39158cbf791e Mon Sep 17 00:00:00 2001 From: Kieran Hall Date: Mon, 11 Nov 2024 16:17:23 +0100 Subject: [PATCH] web-wallet: Add chain ID detection Resolves #2870 --- web-wallet/src/__mocks__/Network.js | 9 ++ .../MigrateContract/MigrateContract.svelte | 6 +- .../src/lib/contracts/contract-descriptors.js | 12 +- .../lib/stores/__tests__/networkStore.spec.js | 4 +- web-wallet/src/lib/stores/networkStore.js | 42 ++--- web-wallet/src/lib/stores/stores.d.ts | 13 +- .../src/routes/(app)/dashboard/+layout.svelte | 2 +- .../__snapshots__/layout.spec.js.snap | 10 +- .../__tests__/__snapshots__/page.spec.js.snap | 60 +++++++ .../(app)/dashboard/migrate/+page.svelte | 8 +- .../src/routes/(app)/settings/+page.svelte | 11 +- .../__tests__/__snapshots__/page.spec.js.snap | 150 +++++++++--------- web-wallet/src/routes/+layout.svelte | 1 + .../MigrateContract.svelte | 2 +- 14 files changed, 199 insertions(+), 131 deletions(-) diff --git a/web-wallet/src/__mocks__/Network.js b/web-wallet/src/__mocks__/Network.js index 325a990ffa..017f7e6d31 100644 --- 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 index c2634acb3c..1a28610acc 100644 --- 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 index 75eebaf2e6..5f4b16a980 100644 --- 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 index 13a1967594..6342aabde0 100644 --- 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 index bd4e260077..6463ed20c8 100644 --- a/web-wallet/src/lib/stores/networkStore.js +++ b/web-wallet/src/lib/stores/networkStore.js @@ -19,33 +19,6 @@ function getNetworkUrl() { } } -/** @type {Record>} */ -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,6 +51,16 @@ 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, @@ -85,5 +68,6 @@ export default { 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 index 4bcf1b57eb..2f48448fa1 100644 --- 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; -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; getCurrentBlockHeight: () => Promise; + init: () => Promise; }; type NetworkStore = Readable & NetworkStoreServices; +type NodeInfo = { + bootstrappingNodes: Array; + 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 index 03df16bca8..ecfa651017 100644 --- 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 index baada792c7..3f66ed0b7a 100644 --- 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" > - Dusk Localnet + Dusk unknown @@ -494,7 +494,7 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb class="footer__network-message svelte-krh9k4" > - Dusk Localnet + Dusk unknown @@ -761,7 +761,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat class="footer__network-message svelte-krh9k4" > - Dusk Localnet - Sync Failed + Dusk unknown - Sync Failed @@ -1048,7 +1048,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state > - Dusk Localnet + Dusk unknown – @@ -1322,7 +1322,7 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state > - Dusk Localnet + Dusk unknown – 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 index 84fd3222aa..87c5398c2e 100644 --- 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 +
  • + + + Migrate + + + + + + + + + + + + +
    • @@ -320,6 +350,36 @@ exports[`Dashboard > should render the dashboard page with the transactions afte +
  • + + + Migrate + + + + + + + + + + + + +
    • diff --git a/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte b/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte index dce01fac0e..a4e535c89b 100644 --- a/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte +++ b/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte @@ -3,7 +3,7 @@ - +{#if ["mainnet", "testnet"].includes(networkName)} + +{/if} diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte index 340fcb034d..85c8422865 100644 --- 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 @@ -

    {networkName}

    + + {networkName} +
    @@ -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%; } diff --git a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap index 41cf4c7870..f2f9ae53f1 100644 --- a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap +++ b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap @@ -2,10 +2,10 @@ exports[`Settings > Resetting the wallet > should show an error if clearing local data fails 1`] = `

    Settings @@ -13,18 +13,18 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca

    Resetting the wallet > should show an error if clearing loca

    Network

    @@ -51,18 +51,20 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
    -

    - Localnet -

    + + unknown +
    Resetting the wallet > should show an error if clearing loca

    Gas