From 975017a1ac17ee7d6c597b04445dc1902c059c48 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 12 Oct 2022 12:58:47 +0200 Subject: [PATCH 001/142] feat: init private and public routes --- .../src/lib/components/common/Guard.svelte | 24 ------ .../src/lib/components/common/SignIn.svelte | 57 ++++++++++++++ .../src/lib/constants/routes.constants.ts | 2 +- frontend/src/lib/routes/Accounts.svelte | 18 ----- frontend/src/lib/routes/Auth.svelte | 61 ++------------- frontend/src/lib/stores/auth.store.ts | 2 +- frontend/src/lib/stores/route.store.ts | 22 +++--- frontend/src/lib/utils/app-path.utils.ts | 6 +- frontend/src/routes/(app)/+layout.svelte | 7 ++ .../(app)/u/[slug]/accounts/+page.svelte | 17 +++++ frontend/src/routes/(login)/+layout.svelte | 7 ++ frontend/src/routes/(login)/+page.svelte | 5 ++ frontend/src/routes/+layout.svelte | 61 ++++++++++++++- frontend/src/routes/+page.svelte | 76 ------------------- .../tests/lib/components/common/Guard.spec.ts | 21 ----- 15 files changed, 176 insertions(+), 210 deletions(-) delete mode 100644 frontend/src/lib/components/common/Guard.svelte create mode 100644 frontend/src/lib/components/common/SignIn.svelte create mode 100644 frontend/src/routes/(app)/+layout.svelte create mode 100644 frontend/src/routes/(app)/u/[slug]/accounts/+page.svelte create mode 100644 frontend/src/routes/(login)/+layout.svelte create mode 100644 frontend/src/routes/(login)/+page.svelte delete mode 100644 frontend/src/routes/+page.svelte delete mode 100644 frontend/src/tests/lib/components/common/Guard.spec.ts diff --git a/frontend/src/lib/components/common/Guard.svelte b/frontend/src/lib/components/common/Guard.svelte deleted file mode 100644 index 666447e6d6..0000000000 --- a/frontend/src/lib/components/common/Guard.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - - - routeStore.update({ path: routePath() })} /> - -{#await syncAuthStore()} - -{:then} - -{/await} diff --git a/frontend/src/lib/components/common/SignIn.svelte b/frontend/src/lib/components/common/SignIn.svelte new file mode 100644 index 0000000000..4fbc736d7b --- /dev/null +++ b/frontend/src/lib/components/common/SignIn.svelte @@ -0,0 +1,57 @@ + + + + + diff --git a/frontend/src/lib/constants/routes.constants.ts b/frontend/src/lib/constants/routes.constants.ts index 78d532b5a1..f951628d8a 100644 --- a/frontend/src/lib/constants/routes.constants.ts +++ b/frontend/src/lib/constants/routes.constants.ts @@ -16,4 +16,4 @@ export enum AppPath { NeuronDetail = "/#/u/:rootCanisterId/neuron", } -export const CONTEXT_PATH = "/#/u"; +export const CONTEXT_PATH = "/u"; diff --git a/frontend/src/lib/routes/Accounts.svelte b/frontend/src/lib/routes/Accounts.svelte index 92fccdb323..5647da896f 100644 --- a/frontend/src/lib/routes/Accounts.svelte +++ b/frontend/src/lib/routes/Accounts.svelte @@ -6,27 +6,9 @@ isNnsProjectStore, snsProjectSelectedStore, } from "$lib/derived/selected-project.derived"; - import { onMount } from "svelte"; - import { routeStore } from "$lib/stores/route.store"; - import { isRoutePath } from "$lib/utils/app-path.utils"; - import { AppPath } from "$lib/constants/routes.constants"; - import { OWN_CANISTER_ID } from "$lib/constants/canister-ids.constants"; import SnsAccounts from "$lib/pages/SnsAccounts.svelte"; import SelectProjectDropdownHeader from "$lib/components/ic/SelectProjectDropdownHeader.svelte"; import SnsAccountsFooter from "$lib/components/accounts/SnsAccountsFooter.svelte"; - - // TODO: Clean after enabling sns https://dfinity.atlassian.net/browse/GIX-1013 - onMount(() => { - if ( - ENABLE_SNS_2 && - isRoutePath({ - paths: [AppPath.LegacyAccounts], - routePath: $routeStore.path, - }) - ) { - routeStore.changeContext(OWN_CANISTER_ID.toText()); - } - });
diff --git a/frontend/src/lib/routes/Auth.svelte b/frontend/src/lib/routes/Auth.svelte index 9b2fcba1dc..4b4f4651dc 100644 --- a/frontend/src/lib/routes/Auth.svelte +++ b/frontend/src/lib/routes/Auth.svelte @@ -3,32 +3,20 @@ import type { Unsubscriber } from "svelte/types/runtime/store"; import { authStore } from "$lib/stores/auth.store"; import type { AuthStore } from "$lib/stores/auth.store"; - import { routeStore } from "$lib/stores/route.store"; + import { goto } from "$app/navigation"; import { isSignedIn } from "$lib/utils/auth.utils"; import { i18n } from "$lib/stores/i18n"; - import { toastsError } from "$lib/stores/toasts.store"; import { displayAndCleanLogoutMsg } from "$lib/services/auth.services"; import { IconWallet, IconPsychology, IconHowToVote, } from "@dfinity/gix-components"; - import { Spinner } from "@dfinity/gix-components"; + import { OWN_CANISTER_ID } from "$lib/constants/canister-ids.constants"; + import SignIn from "$lib/components/common/SignIn.svelte"; let signedIn = false; - // Asks the user to authenticate themselves with a TPM or similar. - const signIn = async () => { - try { - await authStore.signIn(); - } catch (err: unknown) { - toastsError({ - labelKey: "error.sign_in", - err, - }); - } - }; - const unsubscribe: Unsubscriber = authStore.subscribe( async ({ identity }: AuthStore) => { signedIn = isSignedIn(identity); @@ -37,14 +25,8 @@ return; } - // Redirect to previous url or default accounts page, user has signed in - const urlParams: URLSearchParams = new URLSearchParams( - window.location.search - ); - const redirectPath = `/#/${urlParams.get("redirect") ?? "accounts"}`; - - // We do not want to push to the browser history but only want to update the url to not have two entries for the same page in the browser stack - routeStore.replace({ path: redirectPath }); + // TODO(GIX-1071): constant for /u/ and for /accounts? + await goto(`/u/${OWN_CANISTER_ID}/accounts`, { replaceState: true }); } ); @@ -84,19 +66,7 @@ - + diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte deleted file mode 100644 index 8ac6cd4ad2..0000000000 --- a/frontend/src/routes/+page.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/tests/lib/components/common/Guard.spec.ts b/frontend/src/tests/lib/components/common/Guard.spec.ts deleted file mode 100644 index dc00b8bc52..0000000000 --- a/frontend/src/tests/lib/components/common/Guard.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import Guard from "$lib/components/common/Guard.svelte"; -import { authStore } from "$lib/stores/auth.store"; -import { render } from "@testing-library/svelte"; - -describe("Guard", () => { - it("should render a spinner while loading", () => { - // Promise that never resolves to test if a spinner is rendered while loading - jest - .spyOn(authStore, "sync") - .mockImplementation(() => new Promise(() => undefined)); - - const { container } = render(Guard); - - expect(container.querySelector("svg")).not.toBeNull(); - expect(container.querySelector("circle")).not.toBeNull(); - }); -}); From 14c21dc085a893dcce32daba1312aebc005c7f0d Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 18 Oct 2022 06:57:18 +0200 Subject: [PATCH 002/142] feat: wip --- frontend/src/app.d.ts | 7 ++++++- frontend/src/lib/routes/Auth.svelte | 2 +- frontend/src/lib/stores/writable-stored.ts | 5 +++++ frontend/src/routes/(app)/+layout.svelte | 9 +++++++++ frontend/src/routes/(app)/+layout.ts | 7 +++++++ .../routes/(app)/{u/[slug] => }/accounts/+page.svelte | 0 frontend/src/routes/(app)/wallet/+page.svelte | 1 + frontend/svelte.config.js | 1 + 8 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 frontend/src/routes/(app)/+layout.ts rename frontend/src/routes/(app)/{u/[slug] => }/accounts/+page.svelte (100%) create mode 100644 frontend/src/routes/(app)/wallet/+page.svelte diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts index c5a0136433..220d3f89cb 100644 --- a/frontend/src/app.d.ts +++ b/frontend/src/app.d.ts @@ -1,9 +1,14 @@ +/// + // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types declare namespace App { // interface Locals {} - // interface PageData {} + interface PageData { + universe: string | null | undefined; + id: string | null | undefined; + } // interface Error {} // interface Platform {} } diff --git a/frontend/src/lib/routes/Auth.svelte b/frontend/src/lib/routes/Auth.svelte index 1270b31ad4..4e36c5f549 100644 --- a/frontend/src/lib/routes/Auth.svelte +++ b/frontend/src/lib/routes/Auth.svelte @@ -26,7 +26,7 @@ } // TODO(GIX-1071): constant for /u/ and for /accounts? - await goto(`/u/${OWN_CANISTER_ID}/accounts`, { replaceState: true }); + await goto(`/accounts?u=${OWN_CANISTER_ID}`, { replaceState: true }); } ); diff --git a/frontend/src/lib/stores/writable-stored.ts b/frontend/src/lib/stores/writable-stored.ts index 1509cbc17f..c725c04de5 100644 --- a/frontend/src/lib/stores/writable-stored.ts +++ b/frontend/src/lib/stores/writable-stored.ts @@ -1,5 +1,6 @@ import type { storeLocalStorageKey } from "$lib/constants/stores.constants"; import { writable, type Unsubscriber, type Writable } from "svelte/store"; +import {browser} from "$app/environment"; type WritableStored = Writable & { unsubscribeStorage: Unsubscriber; @@ -13,6 +14,10 @@ export const writableStored = ({ defaultValue: T; }): WritableStored => { const getInitialValue = (): T => { + if (!browser) { + return defaultValue; + } + // Do not break UI if local storage fails try { const storedValue = localStorage.getItem(key); diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte index 78e4946cb2..de044a16cb 100644 --- a/frontend/src/routes/(app)/+layout.svelte +++ b/frontend/src/routes/(app)/+layout.svelte @@ -1,5 +1,14 @@ diff --git a/frontend/src/routes/(app)/+layout.ts b/frontend/src/routes/(app)/+layout.ts new file mode 100644 index 0000000000..3cfb85c6f5 --- /dev/null +++ b/frontend/src/routes/(app)/+layout.ts @@ -0,0 +1,7 @@ +import type {LoadEvent} from "@sveltejs/kit"; + +/** @type {import('./$types').PageLoad} */ +export const load = ({url: {searchParams}}: LoadEvent): App.PageData => ({ + universe: searchParams.get("u"), + id: searchParams.get("id") +}) \ No newline at end of file diff --git a/frontend/src/routes/(app)/u/[slug]/accounts/+page.svelte b/frontend/src/routes/(app)/accounts/+page.svelte similarity index 100% rename from frontend/src/routes/(app)/u/[slug]/accounts/+page.svelte rename to frontend/src/routes/(app)/accounts/+page.svelte diff --git a/frontend/src/routes/(app)/wallet/+page.svelte b/frontend/src/routes/(app)/wallet/+page.svelte new file mode 100644 index 0000000000..ec2ff77547 --- /dev/null +++ b/frontend/src/routes/(app)/wallet/+page.svelte @@ -0,0 +1 @@ +

Wallet

\ No newline at end of file diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js index 6096a90bb0..e912500474 100644 --- a/frontend/svelte.config.js +++ b/frontend/svelte.config.js @@ -31,6 +31,7 @@ const config = { version: { name: version, }, + trailingSlash: "always" }, }; From 8c7adddea6e11f0810699c3db37d82c6a75e9870 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 18 Oct 2022 07:54:45 +0200 Subject: [PATCH 003/142] feat: todo prerendering --- .../src/lib/components/header/Banner.svelte | 9 ++++++-- frontend/src/lib/stores/writable-stored.ts | 4 ++++ frontend/src/lib/utils/before-unload.utils.ts | 6 +++++ frontend/src/lib/utils/route.utils.ts | 20 ++++++++++------- frontend/src/routes/(app)/+layout.svelte | 8 +++---- frontend/src/routes/(app)/+layout.ts | 22 +++++++++++++++---- .../src/routes/(app)/accounts/+page.svelte | 20 ++++++++++++++++- frontend/src/routes/+layout.svelte | 16 +------------- frontend/src/routes/+layout.ts | 1 - 9 files changed, 71 insertions(+), 35 deletions(-) diff --git a/frontend/src/lib/components/header/Banner.svelte b/frontend/src/lib/components/header/Banner.svelte index 494727ce81..36f1de1285 100644 --- a/frontend/src/lib/components/header/Banner.svelte +++ b/frontend/src/lib/components/header/Banner.svelte @@ -2,12 +2,13 @@ import { i18n } from "$lib/stores/i18n"; import { IconClose } from "@dfinity/gix-components"; import { DEV, IS_TESTNET } from "$lib/constants/environment.constants"; + import {browser} from "$app/environment"; const localstorageKey = "nnsdapp-testnet-banner-display"; - let visible = JSON.parse( + let visible = browser ? JSON.parse( localStorage.getItem(localstorageKey) ?? "true" - ) as boolean; + ) as boolean : false; const testnet = IS_TESTNET; const localEnv = DEV; @@ -21,6 +22,10 @@ $: visible, (() => { + if (!browser) { + return; + } + if (!banner) { // If no banner has to be displayed, setting or removing the header offset can be skipped return; diff --git a/frontend/src/lib/stores/writable-stored.ts b/frontend/src/lib/stores/writable-stored.ts index c725c04de5..1dc88cb8e0 100644 --- a/frontend/src/lib/stores/writable-stored.ts +++ b/frontend/src/lib/stores/writable-stored.ts @@ -38,6 +38,10 @@ export const writableStored = ({ const store = writable(getInitialValue()); const unsubscribeStorage = store.subscribe((store: T) => { + if (!browser) { + return; + } + // Do not break UI if local storage fails try { localStorage.setItem(key, JSON.stringify(store)); diff --git a/frontend/src/lib/utils/before-unload.utils.ts b/frontend/src/lib/utils/before-unload.utils.ts index 7984fa7c74..91db5a6736 100644 --- a/frontend/src/lib/utils/before-unload.utils.ts +++ b/frontend/src/lib/utils/before-unload.utils.ts @@ -1,3 +1,5 @@ +import {browser} from "$app/environment"; + const onBeforeUnload = ($event: BeforeUnloadEvent) => { $event.preventDefault(); return ($event.returnValue = "Are you sure you want to exit?"); @@ -12,6 +14,10 @@ const removeSyncBeforeUnload = () => { }; export const syncBeforeUnload = (dirty: boolean) => { + if (!browser) { + return; + } + if (dirty) { addSyncBeforeUnload(); } else { diff --git a/frontend/src/lib/utils/route.utils.ts b/frontend/src/lib/utils/route.utils.ts index faa61226ed..2ea315f15d 100644 --- a/frontend/src/lib/utils/route.utils.ts +++ b/frontend/src/lib/utils/route.utils.ts @@ -2,11 +2,13 @@ * The pathname and the hash without base href and without the query string */ export const routePath = (): string => { - const base = baseHref(); - const { pathname, hash } = window.location; - return `${pathname.replace(base, "/")}${hash - .replace(/\?.*/, "") - .toLowerCase()}`; + // TODO(GIX-1071) + // const base = baseHref(); + // const { pathname, hash } = window.location; + // return `${pathname.replace(base, "/")}${hash + // .replace(/\?.*/, "") + // .toLowerCase()}`; + return ""; }; // e.g. #/accounts => accounts @@ -64,7 +66,9 @@ const supportsHistory = (): boolean => * Returns the value of the base href (the root of the svelte app). Always ends with '/'. */ export const baseHref = (): string => { - const base: HTMLBaseElement | null = document.querySelector("base"); - const { origin }: URL = new URL(document.baseURI); - return base?.href.replace(origin, "") ?? "/"; + // TODO(GIX-1071) + // const base: HTMLBaseElement | null = document.querySelector("base"); + // const { origin }: URL = new URL(document.baseURI); + // return base?.href.replace(origin, "") ?? "/"; + return "/"; }; diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte index de044a16cb..6a821c4cc4 100644 --- a/frontend/src/routes/(app)/+layout.svelte +++ b/frontend/src/routes/(app)/+layout.svelte @@ -1,13 +1,13 @@ diff --git a/frontend/src/routes/(app)/+layout.ts b/frontend/src/routes/(app)/+layout.ts index 3cfb85c6f5..30070dc85e 100644 --- a/frontend/src/routes/(app)/+layout.ts +++ b/frontend/src/routes/(app)/+layout.ts @@ -1,7 +1,21 @@ import type {LoadEvent} from "@sveltejs/kit"; +import type { LayoutLoad } from './$types'; +import {browser} from "$app/environment"; /** @type {import('./$types').PageLoad} */ -export const load = ({url: {searchParams}}: LoadEvent): App.PageData => ({ - universe: searchParams.get("u"), - id: searchParams.get("id") -}) \ No newline at end of file +export const load: LayoutLoad = ($event: LoadEvent): App.PageData => { + // TODO(GIX-1071): constants + if (!browser) { + return { + universe: undefined, + id: undefined + } + } + + const {url: {searchParams}} = $event; + + return { + universe: searchParams?.get("u"), + id: searchParams?.get("id") + } +} \ No newline at end of file diff --git a/frontend/src/routes/(app)/accounts/+page.svelte b/frontend/src/routes/(app)/accounts/+page.svelte index ab9d2d1c72..38f5cbff8a 100644 --- a/frontend/src/routes/(app)/accounts/+page.svelte +++ b/frontend/src/routes/(app)/accounts/+page.svelte @@ -3,9 +3,23 @@ import { isSignedIn } from "$lib/utils/auth.utils"; import Accounts from "$lib/routes/Accounts.svelte"; import SignIn from "$lib/components/common/SignIn.svelte"; + import { Spinner } from "@dfinity/gix-components"; + import {browser} from "$app/environment"; + import {toastsError} from "$lib/stores/toasts.store"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); + + const syncAuthStore = async () => { + try {if (!browser) { + return; + } + + await authStore.sync(); + } catch (err) { + toastsError({ labelKey: "error.auth_sync", err }); + } + }; {#if signedIn} @@ -13,5 +27,9 @@ {:else}

Accounts NOT signed in

- + {#await syncAuthStore()} + + {:then _signIn} + + {/await} {/if} diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 2da3f97c0d..ac9f812834 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -10,8 +10,6 @@ import { syncBeforeUnload } from "$lib/utils/before-unload.utils"; import { voteRegistrationActive } from "$lib/utils/proposals.utils"; import { voteRegistrationStore } from "$lib/stores/vote-registration.store"; - import { toastsError } from "$lib/stores/toasts.store"; - import { Spinner } from "@dfinity/gix-components"; let worker: { syncAuthIdle: (auth: AuthStore) => void } | undefined; @@ -38,21 +36,9 @@ unsubscribeAuth(); unsubscribeVoteInProgress(); }); - - const syncAuthStore = async () => { - try { - await authStore.sync(); - } catch (err) { - toastsError({ labelKey: "error.auth_sync", err }); - } - }; -{#await syncAuthStore()} - -{:then} - -{/await} + diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts index 8dc7218d06..9b0106d0e7 100644 --- a/frontend/src/routes/+layout.ts +++ b/frontend/src/routes/+layout.ts @@ -1,5 +1,4 @@ export const prerender = true; -export const ssr = false; // Polyfill Buffer for development purpose. node_modules/@ledgerhq needs buffer. // ⚠️ For production build the polyfill needs to be injected with Rollup (see vite.config.ts) because the page might be loaded before the _layout.js which will contains this polyfill From 2f33e10d0a818f1405127eaf84ade8da12335c71 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 18 Oct 2022 08:05:46 +0200 Subject: [PATCH 004/142] feat: signin promise --- .../src/lib/components/common/SignIn.svelte | 14 ++++---- frontend/src/lib/stores/auth.store.ts | 36 ++++++++----------- frontend/src/lib/stores/route.store.ts | 2 ++ 3 files changed, 22 insertions(+), 30 deletions(-) diff --git a/frontend/src/lib/components/common/SignIn.svelte b/frontend/src/lib/components/common/SignIn.svelte index 4fbc736d7b..0c3cd5be11 100644 --- a/frontend/src/lib/components/common/SignIn.svelte +++ b/frontend/src/lib/components/common/SignIn.svelte @@ -7,14 +7,12 @@ // Asks the user to authenticate themselves with a TPM or similar. const signIn = async () => { - try { - await authStore.signIn(); - } catch (err: unknown) { - toastsError({ - labelKey: "error.sign_in", - err, - }); - } + const onError = (err: unknown) => toastsError({ + labelKey: "error.sign_in", + err, + }) + + await authStore.signIn(onError); }; let signedIn = false; diff --git a/frontend/src/lib/stores/auth.store.ts b/frontend/src/lib/stores/auth.store.ts index a3328624c0..63cd04d3f2 100644 --- a/frontend/src/lib/stores/auth.store.ts +++ b/frontend/src/lib/stores/auth.store.ts @@ -50,29 +50,21 @@ const initAuthStore = () => { }); }, - signIn: () => - new Promise((resolve, reject) => { - // This is unlikely to happen because above `sync` function of the store is the main function that is called before any components of the UI is rendered - // @see main `+layout.svelte` - if (authClient === undefined) { - reject(); - return; - } - - authClient?.login({ - identityProvider: IDENTITY_SERVICE_URL, - maxTimeToLive: AUTH_SESSION_DURATION, - onSuccess: () => { - update((state: AuthStore) => ({ - ...state, - identity: authClient?.getIdentity(), - })); + signIn: async (onError: (error?: string) => void) => { + authClient = authClient ?? (await createAuthClient()); - resolve(); - }, - onError: reject, - }); - }), + await authClient?.login({ + identityProvider: IDENTITY_SERVICE_URL, + maxTimeToLive: AUTH_SESSION_DURATION, + onSuccess: () => { + update((state: AuthStore) => ({ + ...state, + identity: authClient?.getIdentity(), + })); + }, + onError, + }); + }, signOut: async () => { const client: AuthClient = authClient ?? (await createAuthClient()); diff --git a/frontend/src/lib/stores/route.store.ts b/frontend/src/lib/stores/route.store.ts index 2b983c2a63..fcf061a25b 100644 --- a/frontend/src/lib/stores/route.store.ts +++ b/frontend/src/lib/stores/route.store.ts @@ -77,6 +77,8 @@ const initRouteStore = () => { // TODO(GIX-1071): clean up and edge cases + console.log('HERE') + const [u, canisterId, context] = window.location.pathname.split('/').filter((path) => path !== ''); const newPath = `/${[u, selectedCanisterId, context].join('/')}`; From b6cf5e8a00799a35650ac813d00b660d8cfba0e5 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 18 Oct 2022 08:49:35 +0200 Subject: [PATCH 005/142] feat: format and new routes --- frontend/src/app.d.ts | 5 +-- .../src/lib/components/common/SignIn.svelte | 7 ++-- .../src/lib/components/header/Banner.svelte | 8 ++--- .../lib/constants/canister-ids.constants.ts | 6 ++-- .../src/lib/constants/routes.constants.ts | 14 ++++++++ .../lib/derived/selected-project.derived.ts | 17 +++++----- frontend/src/lib/pages/NnsAccounts.svelte | 6 +++- frontend/src/lib/stores/route.store.ts | 15 ++++---- frontend/src/lib/stores/routes.stores.ts | 26 ++++++++++++++ frontend/src/lib/stores/writable-stored.ts | 2 +- frontend/src/lib/utils/app-path.utils.ts | 6 +++- frontend/src/lib/utils/before-unload.utils.ts | 2 +- frontend/src/routes/(app)/+layout.svelte | 8 ++--- frontend/src/routes/(app)/+layout.ts | 34 ++++++++++--------- .../src/routes/(app)/accounts/+page.svelte | 11 +++--- frontend/src/routes/(app)/wallet/+page.svelte | 15 +++++++- frontend/svelte.config.js | 2 +- 17 files changed, 124 insertions(+), 60 deletions(-) create mode 100644 frontend/src/lib/stores/routes.stores.ts diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts index 220d3f89cb..77efde944d 100644 --- a/frontend/src/app.d.ts +++ b/frontend/src/app.d.ts @@ -5,10 +5,7 @@ // and what to do when importing types declare namespace App { // interface Locals {} - interface PageData { - universe: string | null | undefined; - id: string | null | undefined; - } + // interface PageData {} // interface Error {} // interface Platform {} } diff --git a/frontend/src/lib/components/common/SignIn.svelte b/frontend/src/lib/components/common/SignIn.svelte index 0c3cd5be11..25536e901f 100644 --- a/frontend/src/lib/components/common/SignIn.svelte +++ b/frontend/src/lib/components/common/SignIn.svelte @@ -7,12 +7,13 @@ // Asks the user to authenticate themselves with a TPM or similar. const signIn = async () => { - const onError = (err: unknown) => toastsError({ + const onError = (err: unknown) => + toastsError({ labelKey: "error.sign_in", err, - }) + }); - await authStore.signIn(onError); + await authStore.signIn(onError); }; let signedIn = false; diff --git a/frontend/src/lib/components/header/Banner.svelte b/frontend/src/lib/components/header/Banner.svelte index 36f1de1285..f2269d4404 100644 --- a/frontend/src/lib/components/header/Banner.svelte +++ b/frontend/src/lib/components/header/Banner.svelte @@ -2,13 +2,13 @@ import { i18n } from "$lib/stores/i18n"; import { IconClose } from "@dfinity/gix-components"; import { DEV, IS_TESTNET } from "$lib/constants/environment.constants"; - import {browser} from "$app/environment"; + import { browser } from "$app/environment"; const localstorageKey = "nnsdapp-testnet-banner-display"; - let visible = browser ? JSON.parse( - localStorage.getItem(localstorageKey) ?? "true" - ) as boolean : false; + let visible = browser + ? (JSON.parse(localStorage.getItem(localstorageKey) ?? "true") as boolean) + : false; const testnet = IS_TESTNET; const localEnv = DEV; diff --git a/frontend/src/lib/constants/canister-ids.constants.ts b/frontend/src/lib/constants/canister-ids.constants.ts index 9fd3658fc8..36b19258f3 100644 --- a/frontend/src/lib/constants/canister-ids.constants.ts +++ b/frontend/src/lib/constants/canister-ids.constants.ts @@ -1,8 +1,8 @@ import { Principal } from "@dfinity/principal"; -export const OWN_CANISTER_ID = Principal.fromText( - import.meta.env.VITE_OWN_CANISTER_ID as string -); +export const OWN_CANISTER_ID_TEXT = import.meta.env + .VITE_OWN_CANISTER_ID as string; +export const OWN_CANISTER_ID = Principal.fromText(OWN_CANISTER_ID_TEXT); export const LEDGER_CANISTER_ID = Principal.fromText( import.meta.env.VITE_LEDGER_CANISTER_ID as string ); diff --git a/frontend/src/lib/constants/routes.constants.ts b/frontend/src/lib/constants/routes.constants.ts index f951628d8a..203fa44c65 100644 --- a/frontend/src/lib/constants/routes.constants.ts +++ b/frontend/src/lib/constants/routes.constants.ts @@ -17,3 +17,17 @@ export enum AppPath { } export const CONTEXT_PATH = "/u"; + +export enum AppRoutes { + Login = "/", + Accounts = "/accounts", + Wallet = "/wallet", + Neurons = "/neurons", + NeuronDetail = "/neuron", + Proposals = "/proposals", + ProposalDetail = "/proposal", + Canisters = "/canisters", + Canister = "/canister", + Launchpad = "/launchpad", + Project = "/project", +} diff --git a/frontend/src/lib/derived/selected-project.derived.ts b/frontend/src/lib/derived/selected-project.derived.ts index 9013c86165..1ea4ad0d99 100644 --- a/frontend/src/lib/derived/selected-project.derived.ts +++ b/frontend/src/lib/derived/selected-project.derived.ts @@ -1,6 +1,8 @@ -import { OWN_CANISTER_ID } from "$lib/constants/canister-ids.constants"; -import { routeStore } from "$lib/stores/route.store"; -import { getContextFromPath } from "$lib/utils/app-path.utils"; +import { + OWN_CANISTER_ID, + OWN_CANISTER_ID_TEXT, +} from "$lib/constants/canister-ids.constants"; +import { routesStore } from "$lib/stores/routes.stores"; import { isNnsProject } from "$lib/utils/projects.utils"; import { Principal } from "@dfinity/principal"; import { derived, type Readable } from "svelte/store"; @@ -11,13 +13,12 @@ import { derived, type Readable } from "svelte/store"; * The store reads the routeStore and returns the context. * It defaults to NNS (OWN_CANISTER_ID) if the path is not a context path. */ -export const snsProjectSelectedStore = derived(routeStore, ({ path }) => { - const maybeContextId = getContextFromPath(path); - if (maybeContextId !== undefined) { +export const snsProjectSelectedStore = derived(routesStore, ({ universe }) => { + if (![null, undefined, OWN_CANISTER_ID_TEXT].includes(universe)) { try { - return Principal.fromText(maybeContextId); + return Principal.fromText(universe); } catch (error: unknown) { - // Add execeptions, maybe bitcoin wallet? + // Add exceptions, maybe bitcoin wallet? } } // Consider NNS as default project diff --git a/frontend/src/lib/pages/NnsAccounts.svelte b/frontend/src/lib/pages/NnsAccounts.svelte index 0704aa27ff..ed1c84cfde 100644 --- a/frontend/src/lib/pages/NnsAccounts.svelte +++ b/frontend/src/lib/pages/NnsAccounts.svelte @@ -11,6 +11,9 @@ import SkeletonCard from "$lib/components/ui/SkeletonCard.svelte"; import AccountsTitle from "$lib/components/accounts/AccountsTitle.svelte"; import { walletPathStore } from "$lib/derived/paths.derived"; + import { goto } from "$app/navigation"; + import { AppRoutes } from "$lib/constants/routes.constants"; + import { routesStore } from "$lib/stores/routes.stores"; let accounts: AccountsStore | undefined; @@ -18,8 +21,9 @@ async (storeData: AccountsStore) => (accounts = storeData) ); + // TODO(GIX-1071): extract utils to navigate or at least build the url to goto const cardClick = (identifier: string) => - routeStore.navigate({ path: `${$walletPathStore}/${identifier}` }); + goto(`${AppRoutes.Wallet}/?u=${$routesStore.universe}&id=${identifier}`); onDestroy(unsubscribe); diff --git a/frontend/src/lib/stores/route.store.ts b/frontend/src/lib/stores/route.store.ts index fcf061a25b..ea2162cdef 100644 --- a/frontend/src/lib/stores/route.store.ts +++ b/frontend/src/lib/stores/route.store.ts @@ -1,5 +1,5 @@ import type { AppPath } from "$lib/constants/routes.constants"; -import { changePathContext, isAppPath } from "$lib/utils/app-path.utils"; +import { isAppPath } from "$lib/utils/app-path.utils"; import { pushHistory, replaceHistory, routePath } from "$lib/utils/route.utils"; import { writable } from "svelte/store"; @@ -74,20 +74,21 @@ const initRouteStore = () => { * @param newContext string - the new context to navigate to */ changeContext: (selectedCanisterId: string) => { - // TODO(GIX-1071): clean up and edge cases - console.log('HERE') + console.log("HERE"); - const [u, canisterId, context] = window.location.pathname.split('/').filter((path) => path !== ''); - const newPath = `/${[u, selectedCanisterId, context].join('/')}`; + const [u, canisterId, context] = window.location.pathname + .split("/") + .filter((path) => path !== ""); + const newPath = `/${[u, selectedCanisterId, context].join("/")}`; update((state: RouteStore) => ({ ...state, path: newPath, - })) + })); - replaceHistory({ path: newPath}); + replaceHistory({ path: newPath }); }, }; }; diff --git a/frontend/src/lib/stores/routes.stores.ts b/frontend/src/lib/stores/routes.stores.ts new file mode 100644 index 0000000000..82480037c8 --- /dev/null +++ b/frontend/src/lib/stores/routes.stores.ts @@ -0,0 +1,26 @@ +import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants"; +import { writable } from "svelte/store"; + +export interface RoutesStore { + universe: string; + id: string | undefined | null; +} + +const initRoutesStore = () => { + const { subscribe, set } = writable({ + universe: undefined, + id: undefined, + }); + + return { + subscribe, + + load: ({ universe, id }: RoutesStore) => + set({ + universe: universe ?? OWN_CANISTER_ID_TEXT, + id: id ?? null, + }), + }; +}; + +export const routesStore = initRoutesStore(); diff --git a/frontend/src/lib/stores/writable-stored.ts b/frontend/src/lib/stores/writable-stored.ts index 1dc88cb8e0..ab9fc1080f 100644 --- a/frontend/src/lib/stores/writable-stored.ts +++ b/frontend/src/lib/stores/writable-stored.ts @@ -1,6 +1,6 @@ +import { browser } from "$app/environment"; import type { storeLocalStorageKey } from "$lib/constants/stores.constants"; import { writable, type Unsubscriber, type Writable } from "svelte/store"; -import {browser} from "$app/environment"; type WritableStored = Writable & { unsubscribeStorage: Unsubscriber; diff --git a/frontend/src/lib/utils/app-path.utils.ts b/frontend/src/lib/utils/app-path.utils.ts index 034a693698..fd6b2ed4f8 100644 --- a/frontend/src/lib/utils/app-path.utils.ts +++ b/frontend/src/lib/utils/app-path.utils.ts @@ -141,7 +141,11 @@ export const getParentPathDetail = ( ): string | undefined => { // TODO(GIX-1071): clean up and edge cases - const [u, canisterId, context] = path?.replace(/\/+$/, "").split("/").filter((path) => path !== '') ?? []; + const [u, canisterId, context] = + path + ?.replace(/\/+$/, "") + .split("/") + .filter((path) => path !== "") ?? []; // Do not return empty strings return canisterId === "" ? undefined : canisterId; }; diff --git a/frontend/src/lib/utils/before-unload.utils.ts b/frontend/src/lib/utils/before-unload.utils.ts index 91db5a6736..219b7670d4 100644 --- a/frontend/src/lib/utils/before-unload.utils.ts +++ b/frontend/src/lib/utils/before-unload.utils.ts @@ -1,4 +1,4 @@ -import {browser} from "$app/environment"; +import { browser } from "$app/environment"; const onBeforeUnload = ($event: BeforeUnloadEvent) => { $event.preventDefault(); diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte index 6a821c4cc4..af74d0184e 100644 --- a/frontend/src/routes/(app)/+layout.svelte +++ b/frontend/src/routes/(app)/+layout.svelte @@ -1,13 +1,13 @@ diff --git a/frontend/src/routes/(app)/+layout.ts b/frontend/src/routes/(app)/+layout.ts index 30070dc85e..8847010392 100644 --- a/frontend/src/routes/(app)/+layout.ts +++ b/frontend/src/routes/(app)/+layout.ts @@ -1,21 +1,23 @@ -import type {LoadEvent} from "@sveltejs/kit"; -import type { LayoutLoad } from './$types'; -import {browser} from "$app/environment"; +import { browser } from "$app/environment"; +import type { LoadEvent } from "@sveltejs/kit"; +import type { LayoutLoad } from "./$types"; /** @type {import('./$types').PageLoad} */ export const load: LayoutLoad = ($event: LoadEvent): App.PageData => { - // TODO(GIX-1071): constants - if (!browser) { - return { - universe: undefined, - id: undefined - } - } + // TODO(GIX-1071): constants + if (!browser) { + return { + universe: undefined, + id: undefined, + }; + } - const {url: {searchParams}} = $event; + const { + url: { searchParams }, + } = $event; - return { - universe: searchParams?.get("u"), - id: searchParams?.get("id") - } -} \ No newline at end of file + return { + universe: searchParams?.get("u"), + id: searchParams?.get("id"), + }; +}; diff --git a/frontend/src/routes/(app)/accounts/+page.svelte b/frontend/src/routes/(app)/accounts/+page.svelte index 38f5cbff8a..7662f00956 100644 --- a/frontend/src/routes/(app)/accounts/+page.svelte +++ b/frontend/src/routes/(app)/accounts/+page.svelte @@ -4,16 +4,17 @@ import Accounts from "$lib/routes/Accounts.svelte"; import SignIn from "$lib/components/common/SignIn.svelte"; import { Spinner } from "@dfinity/gix-components"; - import {browser} from "$app/environment"; - import {toastsError} from "$lib/stores/toasts.store"; + import { browser } from "$app/environment"; + import { toastsError } from "$lib/stores/toasts.store"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); const syncAuthStore = async () => { - try {if (!browser) { - return; - } + try { + if (!browser) { + return; + } await authStore.sync(); } catch (err) { diff --git a/frontend/src/routes/(app)/wallet/+page.svelte b/frontend/src/routes/(app)/wallet/+page.svelte index ec2ff77547..6ee3c1c71a 100644 --- a/frontend/src/routes/(app)/wallet/+page.svelte +++ b/frontend/src/routes/(app)/wallet/+page.svelte @@ -1 +1,14 @@ -

Wallet

\ No newline at end of file + + +

TODO: signin Wallet

+ +{#if $isNnsProjectStore} + +{:else} + +{/if} + diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js index e912500474..5354dcf36d 100644 --- a/frontend/svelte.config.js +++ b/frontend/svelte.config.js @@ -31,7 +31,7 @@ const config = { version: { name: version, }, - trailingSlash: "always" + trailingSlash: "always", }, }; From 8be9fa0c07ed7d74fa4b50c62463cbcd450bab2e Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 18 Oct 2022 09:05:12 +0200 Subject: [PATCH 006/142] feat: signin sync --- .../src/lib/components/common/SignIn.svelte | 30 +++++++++++++++++-- .../src/routes/(app)/accounts/+page.svelte | 21 +------------ frontend/src/routes/(app)/wallet/+page.svelte | 21 +++++++++---- 3 files changed, 44 insertions(+), 28 deletions(-) diff --git a/frontend/src/lib/components/common/SignIn.svelte b/frontend/src/lib/components/common/SignIn.svelte index 25536e901f..fc9297c2ae 100644 --- a/frontend/src/lib/components/common/SignIn.svelte +++ b/frontend/src/lib/components/common/SignIn.svelte @@ -4,6 +4,29 @@ import { i18n } from "$lib/stores/i18n"; import { toastsError } from "$lib/stores/toasts.store"; import { Spinner } from "@dfinity/gix-components"; + import {browser} from "$app/environment"; + import {onMount} from "svelte"; + + let initialized = false; + + const syncAuthStore = async () => { + try { + await authStore.sync(); + } catch (err) { + toastsError({ labelKey: "error.auth_sync", err }); + } + }; + + onMount(async () => { + if (!browser) { + return; + } + + // TODO(GIX-1071): handle multiple signin-init buttons in one page + await syncAuthStore(); + + initialized = true; + }) // Asks the user to authenticate themselves with a TPM or similar. const signIn = async () => { @@ -18,16 +41,19 @@ let signedIn = false; $: signedIn = isSignedIn($authStore.identity); + + let disabled = true; + $: disabled = signedIn || !initialized; +{#if signedIn} + +{/if} {`Get ${token.symbol}`} From 3fb300c3f4e62e4c40a29f0800200d94a3b88d29 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 13:27:49 +0200 Subject: [PATCH 080/142] feat: replace state in navigation --- .../DetachCanisterButton.svelte | 2 +- .../neuron-detail/NeuronHotkeysCard.svelte | 2 +- .../neurons/DisburseNnsNeuronModal.svelte | 2 +- .../neurons/DisburseSnsNeuronModal.svelte | 2 +- frontend/src/lib/pages/Launchpad.svelte | 11 --------- frontend/src/lib/pages/NnsNeuronDetail.svelte | 11 +++++---- frontend/src/lib/pages/ProjectDetail.svelte | 23 +++++++------------ frontend/src/lib/pages/SnsNeuronDetail.svelte | 13 ++++++----- .../src/routes/(app)/launchpad/+page.svelte | 8 +++++++ .../src/routes/(app)/project/+page.svelte | 11 +++++++++ 10 files changed, 44 insertions(+), 41 deletions(-) diff --git a/frontend/src/lib/components/canister-detail/DetachCanisterButton.svelte b/frontend/src/lib/components/canister-detail/DetachCanisterButton.svelte index 64af0b6374..2eb628740b 100644 --- a/frontend/src/lib/components/canister-detail/DetachCanisterButton.svelte +++ b/frontend/src/lib/components/canister-detail/DetachCanisterButton.svelte @@ -27,7 +27,7 @@ }); // TODO(GIX-1071): utils? - await goto(AppPath.Canisters); + await goto(AppPath.Canisters, { replaceState: true }); } }; diff --git a/frontend/src/lib/components/neuron-detail/NeuronHotkeysCard.svelte b/frontend/src/lib/components/neuron-detail/NeuronHotkeysCard.svelte index 81e07af10a..c87c64c471 100644 --- a/frontend/src/lib/components/neuron-detail/NeuronHotkeysCard.svelte +++ b/frontend/src/lib/components/neuron-detail/NeuronHotkeysCard.svelte @@ -47,7 +47,7 @@ }); // TODO(GIX-1071): utils? - await goto(AppPath.Neurons); + await goto(AppPath.Neurons, { replaceState: true }); } stopBusy("remove-hotkey-neuron"); }; diff --git a/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte b/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte index 405047c202..09e98dbcb4 100644 --- a/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte +++ b/frontend/src/lib/modals/neurons/DisburseNnsNeuronModal.svelte @@ -72,7 +72,7 @@ }); // TODO(GIX-1071): utils? - await goto($neuronsPathStore); + await goto($neuronsPathStore, { replaceState: true }); } dispatcher("nnsClose"); diff --git a/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte b/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte index 2a869610ab..4f1eefbfba 100644 --- a/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte +++ b/frontend/src/lib/modals/neurons/DisburseSnsNeuronModal.svelte @@ -104,7 +104,7 @@ }); // TODO(GIX-1071): utils? - await goto($neuronsPathStore); + await goto($neuronsPathStore, { replaceState: true }); } dispatcher("nnsClose"); diff --git a/frontend/src/lib/pages/Launchpad.svelte b/frontend/src/lib/pages/Launchpad.svelte index 4b66ef28cc..7f0b0f0a97 100644 --- a/frontend/src/lib/pages/Launchpad.svelte +++ b/frontend/src/lib/pages/Launchpad.svelte @@ -1,18 +1,7 @@
diff --git a/frontend/src/lib/pages/NnsNeuronDetail.svelte b/frontend/src/lib/pages/NnsNeuronDetail.svelte index f9bf6af22e..8723f69412 100644 --- a/frontend/src/lib/pages/NnsNeuronDetail.svelte +++ b/frontend/src/lib/pages/NnsNeuronDetail.svelte @@ -39,10 +39,11 @@ // BEGIN: loading and navigation - // TODO(GIX-1071): utils? replaceState: true for error? - const goBack = (): Promise => goto(AppPath.Neurons); + // TODO(GIX-1071): utils? + const goBack = (replaceState: boolean): Promise => + goto(AppPath.Neurons, { replaceState }); - layoutBackStore.set(goBack); + layoutBackStore.set(async () => goBack(false)); type NeuronFromStore = { neuron: NeuronInfo | undefined }; @@ -53,7 +54,7 @@ labelKey: $i18n.error.neuron_not_found, }); - await goBack(); + await goBack(false); } }; @@ -92,7 +93,7 @@ toastsError({ labelKey: "error.neuron_spawning", }); - await goBack(); + await goBack(true); } }; diff --git a/frontend/src/lib/pages/ProjectDetail.svelte b/frontend/src/lib/pages/ProjectDetail.svelte index 5bfb8d4681..0a0fd6cabb 100644 --- a/frontend/src/lib/pages/ProjectDetail.svelte +++ b/frontend/src/lib/pages/ProjectDetail.svelte @@ -1,8 +1,7 @@ diff --git a/frontend/src/lib/pages/SnsNeuronDetail.svelte b/frontend/src/lib/pages/SnsNeuronDetail.svelte index fb94734676..43ed262c7f 100644 --- a/frontend/src/lib/pages/SnsNeuronDetail.svelte +++ b/frontend/src/lib/pages/SnsNeuronDetail.svelte @@ -32,10 +32,11 @@ // BEGIN: loading and navigation - // TODO(GIX-1071): utils? replaceState: true for error? - const goBack = (): Promise => goto(AppPath.Neurons); + // TODO(GIX-1071): utils? + const goBack = (replaceState: boolean): Promise => + goto(AppPath.Neurons, { replaceState }); - layoutBackStore.set(goBack); + layoutBackStore.set(async () => goBack(false)); const loadNeuron = async ( { forceFetch }: { forceFetch: boolean } = { forceFetch: false } @@ -58,7 +59,7 @@ }); // For simplicity reason we do not catch the promise here - goBack(); + goBack(true); }, }); } @@ -66,7 +67,7 @@ onMount(async () => { if (neuronId === undefined || neuronId === null) { - await goBack(); + await goBack(true); return; } @@ -83,7 +84,7 @@ await loadNeuron(); } catch (err: unknown) { // $pageStore.universe might be an invalid principal, like empty or yolo - await goBack(); + await goBack(true); } }); diff --git a/frontend/src/routes/(app)/launchpad/+page.svelte b/frontend/src/routes/(app)/launchpad/+page.svelte index 725b3fa93a..093099979a 100644 --- a/frontend/src/routes/(app)/launchpad/+page.svelte +++ b/frontend/src/routes/(app)/launchpad/+page.svelte @@ -6,11 +6,19 @@ import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; + import { IS_TESTNET } from "$lib/constants/environment.constants"; + import { goto } from "$app/navigation"; + import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); onMount(() => { + if (!IS_TESTNET) { + // TODO(GIX-1071): utils? + goto(AppPath.Accounts, { replaceState: true }); + } + layoutTitleStore.set($i18n.sns_launchpad.header); // Reset back action because only detail routes have such feature other views use the menu diff --git a/frontend/src/routes/(app)/project/+page.svelte b/frontend/src/routes/(app)/project/+page.svelte index 83bc2c9475..60741db2a7 100644 --- a/frontend/src/routes/(app)/project/+page.svelte +++ b/frontend/src/routes/(app)/project/+page.svelte @@ -3,6 +3,17 @@ import SignInNNS from "$lib/pages/SignInNNS.svelte"; import { isSignedIn } from "$lib/utils/auth.utils"; import { authStore } from "$lib/stores/auth.store"; + import { onMount } from "svelte"; + import { IS_TESTNET } from "$lib/constants/environment.constants"; + import { goto } from "$app/navigation"; + import { AppPath } from "$lib/constants/routes.constants"; + + onMount(() => { + if (!IS_TESTNET) { + // TODO(GIX-1071): utils? + goto(AppPath.Accounts, { replaceState: true }); + } + }); let signedIn = false; $: signedIn = isSignedIn($authStore.identity); From 4e0bf3a3cd4a849944f8986ae4ebada25dbfe46b Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 13:30:29 +0200 Subject: [PATCH 081/142] feat: back async --- frontend/src/lib/components/common/Layout.svelte | 2 +- frontend/src/lib/stores/layout.store.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/common/Layout.svelte b/frontend/src/lib/components/common/Layout.svelte index 3ff44e663b..86e09d127f 100644 --- a/frontend/src/lib/components/common/Layout.svelte +++ b/frontend/src/lib/components/common/Layout.svelte @@ -12,7 +12,7 @@ - $layoutBackStore?.()}> + await $layoutBackStore?.()}>
{$layoutTitleStore}
diff --git a/frontend/src/lib/stores/layout.store.ts b/frontend/src/lib/stores/layout.store.ts index 7a8d6948a3..3022f0e6ff 100644 --- a/frontend/src/lib/stores/layout.store.ts +++ b/frontend/src/lib/stores/layout.store.ts @@ -1,4 +1,4 @@ import { writable } from "svelte/store"; export const layoutTitleStore = writable(""); -export const layoutBackStore = writable<(() => void) | undefined>(undefined); +export const layoutBackStore = writable<(() => Promise) | undefined>(undefined); From c95d67ef3d48815c935d75582137dfffd34abb10 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 13:52:36 +0200 Subject: [PATCH 082/142] feat: light error page content --- frontend/src/routes/+error.svelte | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte index 2d5905364a..8159815230 100644 --- a/frontend/src/routes/+error.svelte +++ b/frontend/src/routes/+error.svelte @@ -1 +1,30 @@ -This is a custom error page. + + + +
+

Oops!

+ +

NNS-dapp can't seem to find the page you're looking for.

+ +

+ Error code: {$page.status} ({$page.error?.message}) +

+ + +
+ + + From aa92f273d62f2d8f90bd6986c9b94b6a68c3d3bc Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 13:52:48 +0200 Subject: [PATCH 083/142] chore: format --- frontend/src/lib/stores/layout.store.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/stores/layout.store.ts b/frontend/src/lib/stores/layout.store.ts index 3022f0e6ff..2b01ba4814 100644 --- a/frontend/src/lib/stores/layout.store.ts +++ b/frontend/src/lib/stores/layout.store.ts @@ -1,4 +1,6 @@ import { writable } from "svelte/store"; export const layoutTitleStore = writable(""); -export const layoutBackStore = writable<(() => Promise) | undefined>(undefined); +export const layoutBackStore = writable<(() => Promise) | undefined>( + undefined +); From 42ae327d2b1894e108eb81f28abe555277a93b99 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 15:52:57 +0200 Subject: [PATCH 084/142] chore: remove error page --- frontend/src/routes/+error.svelte | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 frontend/src/routes/+error.svelte diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte deleted file mode 100644 index 8159815230..0000000000 --- a/frontend/src/routes/+error.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - -
-

Oops!

- -

NNS-dapp can't seem to find the page you're looking for.

- -

- Error code: {$page.status} ({$page.error?.message}) -

- - -
- - - From ccf377015d204323e19bb096e134919aafa6b96c Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 16:20:33 +0200 Subject: [PATCH 085/142] build: remove sveltekit csp empty tag --- frontend/scripts/build.csp.mjs | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/scripts/build.csp.mjs b/frontend/scripts/build.csp.mjs index 2694bab36b..155580ad01 100644 --- a/frontend/scripts/build.csp.mjs +++ b/frontend/scripts/build.csp.mjs @@ -15,12 +15,18 @@ const buildCsp = (htmlFile) => { const indexHTMLWithScriptLoader = injectScriptLoader( indexHTMLWithoutStartScript ); - // 3. We calculate the sha256 values for these scripts and update the CSP - const indexHTMLWithCSP = updateCSP(indexHTMLWithScriptLoader); + // 3. remove the content-security-policy tag injected by SvelteKit + const indexHTMLNoCSP = removeDefaultCspTag(indexHTMLWithScriptLoader); + // 4. We calculate the sha256 values for these scripts and update the CSP + const indexHTMLWithCSP = updateCSP(indexHTMLNoCSP); writeFileSync(htmlFile, indexHTMLWithCSP); }; +const removeDefaultCspTag = (indexHtml) => { + return indexHtml.replace('', ''); +} + /** * We need a script loader to implement a proper Content Security Policy. See `updateCSP` doc for more information. */ From 6d6894bbfa1398016c91863d65907dbd171497d9 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 16:29:41 +0200 Subject: [PATCH 086/142] build: vite beta (forced) and disable module preload --- build.sh | 2 +- frontend/package-lock.json | 186 +++++++++++++++++++++++++++---------- frontend/package.json | 2 +- frontend/vite.config.ts | 1 + 4 files changed, 138 insertions(+), 53 deletions(-) diff --git a/build.sh b/build.sh index d19c42c33a..b0b321f72c 100755 --- a/build.sh +++ b/build.sh @@ -59,7 +59,7 @@ set -x ################### # frontend # (output: frontend/public/) ################### -(cd "$TOPLEVEL/frontend" && npm ci && npm run build) +(cd "$TOPLEVEL/frontend" && npm ci --force && npm run build) ################# # assets.tar.xz # diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a7071d2f85..cb22c546e3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -59,7 +59,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.1.4" + "vite": "^3.2.0-beta.4" } }, "node_modules/@adobe/css-tools": { @@ -2574,17 +2574,16 @@ "vite": "^3.1.0" } }, - "node_modules/@sveltejs/vite-plugin-svelte": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz", - "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==", + "node_modules/@sveltejs/kit/node_modules/@sveltejs/vite-plugin-svelte": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz", + "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^4.2.1", "debug": "^4.3.4", "deepmerge": "^4.2.2", "kleur": "^4.1.5", - "magic-string": "^0.26.3", + "magic-string": "^0.26.7", "svelte-hmr": "^0.15.0" }, "engines": { @@ -7252,9 +7251,9 @@ } }, "node_modules/magic-string": { - "version": "0.26.5", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.5.tgz", - "integrity": "sha512-yXUIYOOQnEHKHOftp5shMWpB9ImfgfDJpapa38j/qMtTj5QHWucvxP4lUtuRmHT9vAzvtpHkWKXW9xBwimXeNg==", + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", "dev": true, "dependencies": { "sourcemap-codec": "^1.4.8" @@ -7895,9 +7894,9 @@ } }, "node_modules/postcss": { - "version": "8.4.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz", - "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==", + "version": "8.4.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", + "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", "funding": [ { "type": "opencollective", @@ -8325,9 +8324,10 @@ } }, "node_modules/rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "dev": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -9428,14 +9428,15 @@ } }, "node_modules/vite": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.4.tgz", - "integrity": "sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==", + "version": "3.2.0-beta.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", + "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", + "dev": true, "dependencies": { - "esbuild": "^0.15.6", - "postcss": "^8.4.16", + "esbuild": "^0.15.9", + "postcss": "^8.4.18", "resolve": "^1.22.1", - "rollup": "~2.78.0" + "rollup": "^2.79.1" }, "bin": { "vite": "bin/vite.js" @@ -9450,6 +9451,7 @@ "less": "*", "sass": "*", "stylus": "*", + "sugarss": "*", "terser": "^5.4.0" }, "peerDependenciesMeta": { @@ -9462,6 +9464,9 @@ "stylus": { "optional": true }, + "sugarss": { + "optional": true + }, "terser": { "optional": true } @@ -9516,6 +9521,60 @@ } } }, + "node_modules/vitest/node_modules/rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/vitest/node_modules/vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "dependencies": { + "esbuild": "^0.15.9", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "less": "*", + "sass": "*", + "stylus": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, "node_modules/w3c-xmlserializer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", @@ -11700,20 +11759,21 @@ "sirv": "^2.0.2", "tiny-glob": "^0.2.9", "undici": "^5.8.1" - } - }, - "@sveltejs/vite-plugin-svelte": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz", - "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==", - "dev": true, - "requires": { - "@rollup/pluginutils": "^4.2.1", - "debug": "^4.3.4", - "deepmerge": "^4.2.2", - "kleur": "^4.1.5", - "magic-string": "^0.26.3", - "svelte-hmr": "^0.15.0" + }, + "dependencies": { + "@sveltejs/vite-plugin-svelte": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz", + "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==", + "dev": true, + "requires": { + "debug": "^4.3.4", + "deepmerge": "^4.2.2", + "kleur": "^4.1.5", + "magic-string": "^0.26.7", + "svelte-hmr": "^0.15.0" + } + } } }, "@testing-library/dom": { @@ -15099,9 +15159,9 @@ "dev": true }, "magic-string": { - "version": "0.26.5", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.5.tgz", - "integrity": "sha512-yXUIYOOQnEHKHOftp5shMWpB9ImfgfDJpapa38j/qMtTj5QHWucvxP4lUtuRmHT9vAzvtpHkWKXW9xBwimXeNg==", + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", + "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", "dev": true, "requires": { "sourcemap-codec": "^1.4.8" @@ -15560,9 +15620,9 @@ } }, "postcss": { - "version": "8.4.17", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz", - "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==", + "version": "8.4.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", + "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", "requires": { "nanoid": "^3.3.4", "picocolors": "^1.0.0", @@ -15870,9 +15930,10 @@ } }, "rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "version": "2.79.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", + "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "dev": true, "requires": { "fsevents": "~2.3.2" } @@ -16618,15 +16679,16 @@ } }, "vite": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.4.tgz", - "integrity": "sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==", + "version": "3.2.0-beta.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", + "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", + "dev": true, "requires": { - "esbuild": "^0.15.6", + "esbuild": "^0.15.9", "fsevents": "~2.3.2", - "postcss": "^8.4.16", + "postcss": "^8.4.18", "resolve": "^1.22.1", - "rollup": "~2.78.0" + "rollup": "^2.79.1" } }, "vitest": { @@ -16643,6 +16705,28 @@ "tinypool": "^0.2.4", "tinyspy": "^1.0.0", "vite": "^2.9.12 || ^3.0.0-0" + }, + "dependencies": { + "rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "requires": { + "fsevents": "~2.3.2" + } + }, + "vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "requires": { + "esbuild": "^0.15.9", + "fsevents": "~2.3.2", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + } + } } }, "w3c-xmlserializer": { diff --git a/frontend/package.json b/frontend/package.json index 0d8eb9f765..bbbb254770 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,7 +52,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.1.4" + "vite": "^3.2.0-beta.4" }, "type": "module", "dependencies": { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 280fabc501..e972f14f40 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -21,6 +21,7 @@ const config: UserConfig = { }), ], }, + modulePreload: false }, define: { VITE_APP_VERSION: JSON.stringify(version), From ec28279bb34da32275b5ea6dce9e7350512b9466 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 16:34:00 +0200 Subject: [PATCH 087/142] build: revert does not bring much --- build.sh | 2 +- frontend/package-lock.json | 132 +++++++++++-------------------------- frontend/package.json | 2 +- frontend/vite.config.ts | 3 +- 4 files changed, 42 insertions(+), 97 deletions(-) diff --git a/build.sh b/build.sh index b0b321f72c..d19c42c33a 100755 --- a/build.sh +++ b/build.sh @@ -59,7 +59,7 @@ set -x ################### # frontend # (output: frontend/public/) ################### -(cd "$TOPLEVEL/frontend" && npm ci --force && npm run build) +(cd "$TOPLEVEL/frontend" && npm ci && npm run build) ################# # assets.tar.xz # diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cb22c546e3..f1260162b8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -59,7 +59,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.2.0-beta.4" + "vite": "^3.1.8" } }, "node_modules/@adobe/css-tools": { @@ -8328,6 +8328,8 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, + "optional": true, + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -9428,15 +9430,14 @@ } }, "node_modules/vite": { - "version": "3.2.0-beta.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", - "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", - "dev": true, + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", "dependencies": { "esbuild": "^0.15.9", - "postcss": "^8.4.18", + "postcss": "^8.4.16", "resolve": "^1.22.1", - "rollup": "^2.79.1" + "rollup": "~2.78.0" }, "bin": { "vite": "bin/vite.js" @@ -9451,7 +9452,6 @@ "less": "*", "sass": "*", "stylus": "*", - "sugarss": "*", "terser": "^5.4.0" }, "peerDependenciesMeta": { @@ -9464,14 +9464,25 @@ "stylus": { "optional": true }, - "sugarss": { - "optional": true - }, "terser": { "optional": true } } }, + "node_modules/vite/node_modules/rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/vitest": { "version": "0.18.1", "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz", @@ -9521,60 +9532,6 @@ } } }, - "node_modules/vitest/node_modules/rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/vitest/node_modules/vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", - "dependencies": { - "esbuild": "^0.15.9", - "postcss": "^8.4.16", - "resolve": "^1.22.1", - "rollup": "~2.78.0" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - }, - "peerDependencies": { - "less": "*", - "sass": "*", - "stylus": "*", - "terser": "^5.4.0" - }, - "peerDependenciesMeta": { - "less": { - "optional": true - }, - "sass": { - "optional": true - }, - "stylus": { - "optional": true - }, - "terser": { - "optional": true - } - } - }, "node_modules/w3c-xmlserializer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", @@ -15934,6 +15891,8 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, + "optional": true, + "peer": true, "requires": { "fsevents": "~2.3.2" } @@ -16679,16 +16638,25 @@ } }, "vite": { - "version": "3.2.0-beta.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", - "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", - "dev": true, + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", "requires": { "esbuild": "^0.15.9", "fsevents": "~2.3.2", - "postcss": "^8.4.18", + "postcss": "^8.4.16", "resolve": "^1.22.1", - "rollup": "^2.79.1" + "rollup": "~2.78.0" + }, + "dependencies": { + "rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "requires": { + "fsevents": "~2.3.2" + } + } } }, "vitest": { @@ -16705,28 +16673,6 @@ "tinypool": "^0.2.4", "tinyspy": "^1.0.0", "vite": "^2.9.12 || ^3.0.0-0" - }, - "dependencies": { - "rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "requires": { - "fsevents": "~2.3.2" - } - }, - "vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", - "requires": { - "esbuild": "^0.15.9", - "fsevents": "~2.3.2", - "postcss": "^8.4.16", - "resolve": "^1.22.1", - "rollup": "~2.78.0" - } - } } }, "w3c-xmlserializer": { diff --git a/frontend/package.json b/frontend/package.json index bbbb254770..145064c768 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,7 +52,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.2.0-beta.4" + "vite": "^3.1.8" }, "type": "module", "dependencies": { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index e972f14f40..c8514a8bde 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -20,8 +20,7 @@ const config: UserConfig = { modules: { Buffer: ["buffer", "Buffer"] }, }), ], - }, - modulePreload: false + } }, define: { VITE_APP_VERSION: JSON.stringify(version), From 84808aec66c2e40c4dd866f0f7eb163addfdae07 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 16:37:56 +0200 Subject: [PATCH 088/142] build: remove preloaded scripts --- frontend/package.json | 3 ++- frontend/scripts/build.preload.mjs | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 frontend/scripts/build.preload.mjs diff --git a/frontend/package.json b/frontend/package.json index 145064c768..d6d9e05588 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,9 +5,10 @@ "scripts": { "build:csp": "node scripts/build.csp.mjs", "build:robots": "node scripts/build.robots.mjs", + "build:preload": "node scripts/build.preload.mjs", "i18n": "node --experimental-json-modules scripts/i18n.types.js", "dev": "npm run i18n && vite dev", - "build": "npm run i18n && vite build && npm run build:robots && npm run build:csp && ./scripts/make-reproducible", + "build": "npm run i18n && vite build && npm run build:robots && npm run build:preload && npm run build:csp && ./scripts/make-reproducible", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", diff --git a/frontend/scripts/build.preload.mjs b/frontend/scripts/build.preload.mjs new file mode 100644 index 0000000000..dd11bfc712 --- /dev/null +++ b/frontend/scripts/build.preload.mjs @@ -0,0 +1,22 @@ +#!/usr/bin/env node + +import { readFileSync, writeFileSync } from "fs"; +import { findHtmlFiles } from "./build.utils.mjs"; + + +const buildRobots = (htmlFile) => { + const updatedIndexHTML = removePreloadedScript(htmlFile); + writeFileSync(htmlFile, updatedIndexHTML); +}; + +const removePreloadedScript = (htmlFile) => { + const content = readFileSync(htmlFile, "utf-8"); + + return content.replace( + /\s*()\s*/gi, + "" + ); +}; + +const htmlFiles = findHtmlFiles(); +htmlFiles.forEach((htmlFile) => buildRobots(htmlFile)); \ No newline at end of file From abda5d4174a8a0888b0e191ab47b1d4eeedf636d Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Tue, 25 Oct 2022 16:46:37 +0200 Subject: [PATCH 089/142] build: remove script --- frontend/package.json | 3 +-- frontend/scripts/build.preload.mjs | 22 ---------------------- 2 files changed, 1 insertion(+), 24 deletions(-) delete mode 100644 frontend/scripts/build.preload.mjs diff --git a/frontend/package.json b/frontend/package.json index d6d9e05588..145064c768 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,10 +5,9 @@ "scripts": { "build:csp": "node scripts/build.csp.mjs", "build:robots": "node scripts/build.robots.mjs", - "build:preload": "node scripts/build.preload.mjs", "i18n": "node --experimental-json-modules scripts/i18n.types.js", "dev": "npm run i18n && vite dev", - "build": "npm run i18n && vite build && npm run build:robots && npm run build:preload && npm run build:csp && ./scripts/make-reproducible", + "build": "npm run i18n && vite build && npm run build:robots && npm run build:csp && ./scripts/make-reproducible", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", diff --git a/frontend/scripts/build.preload.mjs b/frontend/scripts/build.preload.mjs deleted file mode 100644 index dd11bfc712..0000000000 --- a/frontend/scripts/build.preload.mjs +++ /dev/null @@ -1,22 +0,0 @@ -#!/usr/bin/env node - -import { readFileSync, writeFileSync } from "fs"; -import { findHtmlFiles } from "./build.utils.mjs"; - - -const buildRobots = (htmlFile) => { - const updatedIndexHTML = removePreloadedScript(htmlFile); - writeFileSync(htmlFile, updatedIndexHTML); -}; - -const removePreloadedScript = (htmlFile) => { - const content = readFileSync(htmlFile, "utf-8"); - - return content.replace( - /\s*()\s*/gi, - "" - ); -}; - -const htmlFiles = findHtmlFiles(); -htmlFiles.forEach((htmlFile) => buildRobots(htmlFile)); \ No newline at end of file From a58a1820654e16fd14e537ba472401a5c4615c1f Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 07:53:20 +0200 Subject: [PATCH 090/142] chore: format --- frontend/scripts/build.csp.mjs | 7 +++++-- frontend/vite.config.ts | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/scripts/build.csp.mjs b/frontend/scripts/build.csp.mjs index 155580ad01..4888bc7f51 100644 --- a/frontend/scripts/build.csp.mjs +++ b/frontend/scripts/build.csp.mjs @@ -24,8 +24,11 @@ const buildCsp = (htmlFile) => { }; const removeDefaultCspTag = (indexHtml) => { - return indexHtml.replace('', ''); -} + return indexHtml.replace( + '', + "" + ); +}; /** * We need a script loader to implement a proper Content Security Policy. See `updateCSP` doc for more information. diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index c8514a8bde..280fabc501 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -20,7 +20,7 @@ const config: UserConfig = { modules: { Buffer: ["buffer", "Buffer"] }, }), ], - } + }, }, define: { VITE_APP_VERSION: JSON.stringify(version), From 4c7dbd2558f2b3326e7e7502490409820edc4eff Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 09:18:03 +0200 Subject: [PATCH 091/142] feat: lazy load routes --- .../lib/components/common/RouteModule.svelte | 45 +++++++++++++++++++ .../src/routes/(app)/accounts/+page.svelte | 5 ++- .../src/routes/(app)/canister/+page.svelte | 5 ++- .../src/routes/(app)/canisters/+page.svelte | 6 +-- .../src/routes/(app)/launchpad/+page.svelte | 4 +- frontend/src/routes/(app)/neuron/+page.svelte | 5 ++- .../src/routes/(app)/neurons/+page.svelte | 5 ++- .../src/routes/(app)/project/+page.svelte | 4 +- .../src/routes/(app)/proposal/+page.svelte | 9 ++-- .../src/routes/(app)/proposals/+page.svelte | 6 +-- frontend/src/routes/(app)/wallet/+page.svelte | 5 ++- frontend/src/routes/(login)/+page.svelte | 5 ++- .../routes/Accounts.spec.ts} | 12 +++-- .../routes/Neurons.spec.ts} | 4 +- .../routes/Wallet.spec.ts} | 18 +++----- 15 files changed, 92 insertions(+), 46 deletions(-) create mode 100644 frontend/src/lib/components/common/RouteModule.svelte rename frontend/src/tests/{routes/app/accounts/page.spec.ts => lib/routes/Accounts.spec.ts} (92%) rename frontend/src/tests/{routes/app/neurons/page.spec.ts => lib/routes/Neurons.spec.ts} (96%) rename frontend/src/tests/{routes/app/wallet/page.spec.ts => lib/routes/Wallet.spec.ts} (69%) diff --git a/frontend/src/lib/components/common/RouteModule.svelte b/frontend/src/lib/components/common/RouteModule.svelte new file mode 100644 index 0000000000..60fa4266ff --- /dev/null +++ b/frontend/src/lib/components/common/RouteModule.svelte @@ -0,0 +1,45 @@ + + +{#if component !== undefined} + +{/if} diff --git a/frontend/src/routes/(app)/accounts/+page.svelte b/frontend/src/routes/(app)/accounts/+page.svelte index ae4dad60b3..db15a8026c 100644 --- a/frontend/src/routes/(app)/accounts/+page.svelte +++ b/frontend/src/routes/(app)/accounts/+page.svelte @@ -2,10 +2,11 @@ import { authStore } from "$lib/stores/auth.store"; import { isSignedIn } from "$lib/utils/auth.utils"; import SignInNNS from "$lib/pages/SignInNNS.svelte"; - import Accounts from "$lib/routes/Accounts.svelte"; import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; + import RouteModule from "$lib/components/common/RouteModule.svelte"; + import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); @@ -19,7 +20,7 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/canister/+page.svelte b/frontend/src/routes/(app)/canister/+page.svelte index ba5db7e825..72c3b204ee 100644 --- a/frontend/src/routes/(app)/canister/+page.svelte +++ b/frontend/src/routes/(app)/canister/+page.svelte @@ -1,8 +1,9 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/canisters/+page.svelte b/frontend/src/routes/(app)/canisters/+page.svelte index d6dc829360..9a46291bfc 100644 --- a/frontend/src/routes/(app)/canisters/+page.svelte +++ b/frontend/src/routes/(app)/canisters/+page.svelte @@ -2,14 +2,14 @@ import { authStore } from "$lib/stores/auth.store"; import { isSignedIn } from "$lib/utils/auth.utils"; import SignInNNS from "$lib/pages/SignInNNS.svelte"; - import Canisters from "$lib/pages/Canisters.svelte"; - import type { AppPath } from "$lib/constants/routes.constants"; import { afterNavigate } from "$app/navigation"; import type { Navigation } from "@sveltejs/kit"; import { pathForRouteId } from "$lib/utils/page.utils"; import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; + import RouteModule from "$lib/components/common/RouteModule.svelte"; + import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); @@ -33,7 +33,7 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/launchpad/+page.svelte b/frontend/src/routes/(app)/launchpad/+page.svelte index 093099979a..3d65924d83 100644 --- a/frontend/src/routes/(app)/launchpad/+page.svelte +++ b/frontend/src/routes/(app)/launchpad/+page.svelte @@ -2,12 +2,12 @@ import { authStore } from "$lib/stores/auth.store"; import { isSignedIn } from "$lib/utils/auth.utils"; import SignInNNS from "$lib/pages/SignInNNS.svelte"; - import Launchpad from "$lib/pages/Launchpad.svelte"; import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; import { IS_TESTNET } from "$lib/constants/environment.constants"; import { goto } from "$app/navigation"; + import RouteModule from "$lib/components/common/RouteModule.svelte"; import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; @@ -27,7 +27,7 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/neuron/+page.svelte b/frontend/src/routes/(app)/neuron/+page.svelte index 6e2e994b7f..05ca4916b8 100644 --- a/frontend/src/routes/(app)/neuron/+page.svelte +++ b/frontend/src/routes/(app)/neuron/+page.svelte @@ -1,8 +1,9 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/neurons/+page.svelte b/frontend/src/routes/(app)/neurons/+page.svelte index 82cbac1909..3825ce68e1 100644 --- a/frontend/src/routes/(app)/neurons/+page.svelte +++ b/frontend/src/routes/(app)/neurons/+page.svelte @@ -2,10 +2,11 @@ import { authStore } from "$lib/stores/auth.store"; import { isSignedIn } from "$lib/utils/auth.utils"; import SignInNNS from "$lib/pages/SignInNNS.svelte"; - import Neurons from "$lib/routes/Neurons.svelte"; import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; + import RouteModule from "$lib/components/common/RouteModule.svelte"; + import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); @@ -19,7 +20,7 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/project/+page.svelte b/frontend/src/routes/(app)/project/+page.svelte index 60741db2a7..75a3fd82d7 100644 --- a/frontend/src/routes/(app)/project/+page.svelte +++ b/frontend/src/routes/(app)/project/+page.svelte @@ -1,11 +1,11 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/proposal/+page.svelte b/frontend/src/routes/(app)/proposal/+page.svelte index 7a13b9b4a2..c277e3ca50 100644 --- a/frontend/src/routes/(app)/proposal/+page.svelte +++ b/frontend/src/routes/(app)/proposal/+page.svelte @@ -1,12 +1,12 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/proposals/+page.svelte b/frontend/src/routes/(app)/proposals/+page.svelte index 1ce5d4ba4e..6729cdcdc9 100644 --- a/frontend/src/routes/(app)/proposals/+page.svelte +++ b/frontend/src/routes/(app)/proposals/+page.svelte @@ -2,14 +2,14 @@ import { authStore } from "$lib/stores/auth.store"; import { isSignedIn } from "$lib/utils/auth.utils"; import SignInNNS from "$lib/pages/SignInNNS.svelte"; - import Proposals from "$lib/pages/Proposals.svelte"; import { afterNavigate } from "$app/navigation"; import type { Navigation } from "@sveltejs/kit"; - import type { AppPath } from "$lib/constants/routes.constants"; import { pathForRouteId } from "$lib/utils/page.utils"; import { onMount } from "svelte"; import { layoutBackStore, layoutTitleStore } from "$lib/stores/layout.store"; import { i18n } from "$lib/stores/i18n"; + import RouteModule from "$lib/components/common/RouteModule.svelte"; + import { AppPath } from "$lib/constants/routes.constants"; let signedIn = false; $: signedIn = isSignedIn($authStore.identity); @@ -33,7 +33,7 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(app)/wallet/+page.svelte b/frontend/src/routes/(app)/wallet/+page.svelte index e1e7f226d0..c5a3758e6e 100644 --- a/frontend/src/routes/(app)/wallet/+page.svelte +++ b/frontend/src/routes/(app)/wallet/+page.svelte @@ -1,8 +1,9 @@ {#if signedIn} - + {:else} {/if} diff --git a/frontend/src/routes/(login)/+page.svelte b/frontend/src/routes/(login)/+page.svelte index 7f1ddbc757..590b486d00 100644 --- a/frontend/src/routes/(login)/+page.svelte +++ b/frontend/src/routes/(login)/+page.svelte @@ -1,5 +1,6 @@ - + diff --git a/frontend/src/tests/routes/app/accounts/page.spec.ts b/frontend/src/tests/lib/routes/Accounts.spec.ts similarity index 92% rename from frontend/src/tests/routes/app/accounts/page.spec.ts rename to frontend/src/tests/lib/routes/Accounts.spec.ts index f4ed72a63a..d904b1b2c6 100644 --- a/frontend/src/tests/routes/app/accounts/page.spec.ts +++ b/frontend/src/tests/lib/routes/Accounts.spec.ts @@ -10,16 +10,16 @@ import { authStore } from "$lib/stores/auth.store"; import { committedProjectsStore } from "$lib/stores/projects.store"; import { snsAccountsStore } from "$lib/stores/sns-accounts.store"; import { page } from "$mocks/$app/stores"; -import Accounts from "$routes/(app)/accounts/+page.svelte"; +import Accounts from "$lib/routes/Accounts.svelte"; import { fireEvent, waitFor } from "@testing-library/dom"; import { render } from "@testing-library/svelte"; -import { mockAuthStoreSubscribe } from "../../../mocks/auth.store.mock"; -import en from "../../../mocks/i18n.mock"; -import { mockSnsMainAccount } from "../../../mocks/sns-accounts.mock"; +import { mockAuthStoreSubscribe } from "../../mocks/auth.store.mock"; +import en from "../../mocks/i18n.mock"; +import { mockSnsMainAccount } from "../../mocks/sns-accounts.mock"; import { mockProjectSubscribe, mockSnsFullProject, -} from "../../../mocks/sns-projects.mock"; +} from "../../mocks/sns-projects.mock"; jest.mock("$lib/services/sns-accounts.services", () => { return { @@ -28,8 +28,6 @@ jest.mock("$lib/services/sns-accounts.services", () => { }); describe("Accounts", () => { - // TODO(GIX-1071): should render sign-in if not logged in - beforeAll(() => jest .spyOn(authStore, "subscribe") diff --git a/frontend/src/tests/routes/app/neurons/page.spec.ts b/frontend/src/tests/lib/routes/Neurons.spec.ts similarity index 96% rename from frontend/src/tests/routes/app/neurons/page.spec.ts rename to frontend/src/tests/lib/routes/Neurons.spec.ts index 07062b3bb2..f3fa2618cc 100644 --- a/frontend/src/tests/routes/app/neurons/page.spec.ts +++ b/frontend/src/tests/lib/routes/Neurons.spec.ts @@ -12,11 +12,11 @@ import { committedProjectsStore } from "$lib/stores/projects.store"; import { page } from "$mocks/$app/stores"; import { fireEvent, waitFor } from "@testing-library/dom"; import { render } from "@testing-library/svelte"; -import { mockAuthStoreSubscribe } from "../../../mocks/auth.store.mock"; +import { mockAuthStoreSubscribe } from "../../mocks/auth.store.mock"; import { mockProjectSubscribe, mockSnsFullProject, -} from "../../../mocks/sns-projects.mock"; +} from "../../mocks/sns-projects.mock"; jest.mock("$lib/services/sns.services", () => { return { diff --git a/frontend/src/tests/routes/app/wallet/page.spec.ts b/frontend/src/tests/lib/routes/Wallet.spec.ts similarity index 69% rename from frontend/src/tests/routes/app/wallet/page.spec.ts rename to frontend/src/tests/lib/routes/Wallet.spec.ts index 225649cee4..ba2cc38e23 100644 --- a/frontend/src/tests/routes/app/wallet/page.spec.ts +++ b/frontend/src/tests/lib/routes/Wallet.spec.ts @@ -4,11 +4,11 @@ import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants"; import { authStore } from "$lib/stores/auth.store"; import { page } from "$mocks/$app/stores"; -import Wallet from "$routes/(app)/wallet/+page.svelte"; +import Wallet from "$lib/routes/Wallet.svelte"; import { render } from "@testing-library/svelte"; -import { mockAuthStoreSubscribe } from "../../../mocks/auth.store.mock"; -import { principal } from "../../../mocks/sns-projects.mock"; -import { mockSnsCanisterIdText } from "../../../mocks/sns.api.mock"; +import { mockAuthStoreSubscribe } from "../../mocks/auth.store.mock"; +import { principal } from "../../mocks/sns-projects.mock"; +import { mockSnsCanisterIdText } from "../../mocks/sns.api.mock"; jest.mock("$lib/services/sns-accounts.services", () => { return { @@ -17,8 +17,6 @@ jest.mock("$lib/services/sns-accounts.services", () => { }); describe("Wallet", () => { - // TODO(GIX-1071): should render sign-in if not logged in - beforeAll(() => jest .spyOn(authStore, "subscribe") @@ -29,9 +27,7 @@ describe("Wallet", () => { it("should render NnsWallet", () => { const { getByTestId } = render(Wallet, { props: { - data: { - account: OWN_CANISTER_ID_TEXT, - }, + accountIdentifier: OWN_CANISTER_ID_TEXT, }, }); expect(getByTestId("nns-wallet")).toBeInTheDocument(); @@ -44,9 +40,7 @@ describe("Wallet", () => { const { getByTestId } = render(Wallet, { props: { - data: { - account: principal(0).toText(), - }, + accountIdentifier: principal(0).toText(), }, }); expect(getByTestId("sns-wallet")).toBeInTheDocument(); From 11ae0aafb6b833ba99501e509457e8e6dd35481a Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 09:22:43 +0200 Subject: [PATCH 092/142] build: remove preloading scripts --- frontend/package.json | 3 ++- frontend/scripts/build.preload.mjs | 29 +++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 frontend/scripts/build.preload.mjs diff --git a/frontend/package.json b/frontend/package.json index 145064c768..d6d9e05588 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,9 +5,10 @@ "scripts": { "build:csp": "node scripts/build.csp.mjs", "build:robots": "node scripts/build.robots.mjs", + "build:preload": "node scripts/build.preload.mjs", "i18n": "node --experimental-json-modules scripts/i18n.types.js", "dev": "npm run i18n && vite dev", - "build": "npm run i18n && vite build && npm run build:robots && npm run build:csp && ./scripts/make-reproducible", + "build": "npm run i18n && vite build && npm run build:robots && npm run build:preload && npm run build:csp && ./scripts/make-reproducible", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", diff --git a/frontend/scripts/build.preload.mjs b/frontend/scripts/build.preload.mjs new file mode 100644 index 0000000000..9217e179a6 --- /dev/null +++ b/frontend/scripts/build.preload.mjs @@ -0,0 +1,29 @@ +#!/usr/bin/env node + +import { readFileSync, writeFileSync } from "fs"; +import { findHtmlFiles } from "./build.utils.mjs"; + +/** + * The IC does not work that well with preloading lots of module script chunks. + * While with vite we can disable preloading, there is currently no such option with SvelteKit. + * That's why we remove any preloading scripts "manually". + * + * Note: removing preloading scripts is particularly useful on static boundary nodes. + * On VM boundary nodes it seems that preloading is better support. + */ +const removePreloadScripts = (htmlFile) => { + const updatedIndexHTML = removePreloadedScript(htmlFile); + writeFileSync(htmlFile, updatedIndexHTML); +}; + +const removePreloadedScript = (htmlFile) => { + const content = readFileSync(htmlFile, "utf-8"); + + return content.replace( + /\s*()\s*/gi, + "" + ); +}; + +const htmlFiles = findHtmlFiles(); +htmlFiles.forEach((htmlFile) => removePreloadScripts(htmlFile)); \ No newline at end of file From b3ce89483df03eb7524754646856433965d7a3d5 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 09:23:20 +0200 Subject: [PATCH 093/142] build: vite preload module false --- build.sh | 2 +- frontend/package-lock.json | 132 ++++++++++++++++++++++++++----------- frontend/package.json | 2 +- frontend/vite.config.ts | 1 + 4 files changed, 96 insertions(+), 41 deletions(-) diff --git a/build.sh b/build.sh index d19c42c33a..b0b321f72c 100755 --- a/build.sh +++ b/build.sh @@ -59,7 +59,7 @@ set -x ################### # frontend # (output: frontend/public/) ################### -(cd "$TOPLEVEL/frontend" && npm ci && npm run build) +(cd "$TOPLEVEL/frontend" && npm ci --force && npm run build) ################# # assets.tar.xz # diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f1260162b8..cb22c546e3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -59,7 +59,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.1.8" + "vite": "^3.2.0-beta.4" } }, "node_modules/@adobe/css-tools": { @@ -8328,8 +8328,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, - "optional": true, - "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -9430,14 +9428,15 @@ } }, "node_modules/vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "version": "3.2.0-beta.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", + "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", + "dev": true, "dependencies": { "esbuild": "^0.15.9", - "postcss": "^8.4.16", + "postcss": "^8.4.18", "resolve": "^1.22.1", - "rollup": "~2.78.0" + "rollup": "^2.79.1" }, "bin": { "vite": "bin/vite.js" @@ -9452,6 +9451,7 @@ "less": "*", "sass": "*", "stylus": "*", + "sugarss": "*", "terser": "^5.4.0" }, "peerDependenciesMeta": { @@ -9464,25 +9464,14 @@ "stylus": { "optional": true }, + "sugarss": { + "optional": true + }, "terser": { "optional": true } } }, - "node_modules/vite/node_modules/rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/vitest": { "version": "0.18.1", "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz", @@ -9532,6 +9521,60 @@ } } }, + "node_modules/vitest/node_modules/rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/vitest/node_modules/vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "dependencies": { + "esbuild": "^0.15.9", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "less": "*", + "sass": "*", + "stylus": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, "node_modules/w3c-xmlserializer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", @@ -15891,8 +15934,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, - "optional": true, - "peer": true, "requires": { "fsevents": "~2.3.2" } @@ -16638,25 +16679,16 @@ } }, "vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "version": "3.2.0-beta.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", + "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", + "dev": true, "requires": { "esbuild": "^0.15.9", "fsevents": "~2.3.2", - "postcss": "^8.4.16", + "postcss": "^8.4.18", "resolve": "^1.22.1", - "rollup": "~2.78.0" - }, - "dependencies": { - "rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "requires": { - "fsevents": "~2.3.2" - } - } + "rollup": "^2.79.1" } }, "vitest": { @@ -16673,6 +16705,28 @@ "tinypool": "^0.2.4", "tinyspy": "^1.0.0", "vite": "^2.9.12 || ^3.0.0-0" + }, + "dependencies": { + "rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "requires": { + "fsevents": "~2.3.2" + } + }, + "vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "requires": { + "esbuild": "^0.15.9", + "fsevents": "~2.3.2", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + } + } } }, "w3c-xmlserializer": { diff --git a/frontend/package.json b/frontend/package.json index d6d9e05588..484688d95f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -53,7 +53,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.1.8" + "vite": "^3.2.0-beta.4" }, "type": "module", "dependencies": { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 280fabc501..e972f14f40 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -21,6 +21,7 @@ const config: UserConfig = { }), ], }, + modulePreload: false }, define: { VITE_APP_VERSION: JSON.stringify(version), From c5c107541304644788c7755143a51ca4b602bb2d Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 09:49:32 +0200 Subject: [PATCH 094/142] build: fix vite beta is buggy - do not render css on first page --- build.sh | 2 +- frontend/package-lock.json | 182 ++++++++++--------------------------- frontend/package.json | 2 +- frontend/vite.config.ts | 3 +- 4 files changed, 52 insertions(+), 137 deletions(-) diff --git a/build.sh b/build.sh index b0b321f72c..d19c42c33a 100755 --- a/build.sh +++ b/build.sh @@ -59,7 +59,7 @@ set -x ################### # frontend # (output: frontend/public/) ################### -(cd "$TOPLEVEL/frontend" && npm ci --force && npm run build) +(cd "$TOPLEVEL/frontend" && npm ci && npm run build) ################# # assets.tar.xz # diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cb22c546e3..1dc6d0ce57 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -59,7 +59,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.2.0-beta.4" + "vite": "^3.1.8" } }, "node_modules/@adobe/css-tools": { @@ -2574,16 +2574,17 @@ "vite": "^3.1.0" } }, - "node_modules/@sveltejs/kit/node_modules/@sveltejs/vite-plugin-svelte": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz", - "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==", + "node_modules/@sveltejs/vite-plugin-svelte": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz", + "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==", "dev": true, "dependencies": { + "@rollup/pluginutils": "^4.2.1", "debug": "^4.3.4", "deepmerge": "^4.2.2", "kleur": "^4.1.5", - "magic-string": "^0.26.7", + "magic-string": "^0.26.3", "svelte-hmr": "^0.15.0" }, "engines": { @@ -7251,9 +7252,9 @@ } }, "node_modules/magic-string": { - "version": "0.26.7", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", - "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.5.tgz", + "integrity": "sha512-yXUIYOOQnEHKHOftp5shMWpB9ImfgfDJpapa38j/qMtTj5QHWucvxP4lUtuRmHT9vAzvtpHkWKXW9xBwimXeNg==", "dev": true, "dependencies": { "sourcemap-codec": "^1.4.8" @@ -7894,9 +7895,9 @@ } }, "node_modules/postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.17", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz", + "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==", "funding": [ { "type": "opencollective", @@ -8324,10 +8325,9 @@ } }, "node_modules/rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", - "dev": true, + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", "bin": { "rollup": "dist/bin/rollup" }, @@ -9428,15 +9428,14 @@ } }, "node_modules/vite": { - "version": "3.2.0-beta.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", - "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", - "dev": true, + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", "dependencies": { "esbuild": "^0.15.9", - "postcss": "^8.4.18", + "postcss": "^8.4.16", "resolve": "^1.22.1", - "rollup": "^2.79.1" + "rollup": "~2.78.0" }, "bin": { "vite": "bin/vite.js" @@ -9451,7 +9450,6 @@ "less": "*", "sass": "*", "stylus": "*", - "sugarss": "*", "terser": "^5.4.0" }, "peerDependenciesMeta": { @@ -9464,9 +9462,6 @@ "stylus": { "optional": true }, - "sugarss": { - "optional": true - }, "terser": { "optional": true } @@ -9521,60 +9516,6 @@ } } }, - "node_modules/vitest/node_modules/rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/vitest/node_modules/vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", - "dependencies": { - "esbuild": "^0.15.9", - "postcss": "^8.4.16", - "resolve": "^1.22.1", - "rollup": "~2.78.0" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - }, - "peerDependencies": { - "less": "*", - "sass": "*", - "stylus": "*", - "terser": "^5.4.0" - }, - "peerDependenciesMeta": { - "less": { - "optional": true - }, - "sass": { - "optional": true - }, - "stylus": { - "optional": true - }, - "terser": { - "optional": true - } - } - }, "node_modules/w3c-xmlserializer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", @@ -11759,21 +11700,20 @@ "sirv": "^2.0.2", "tiny-glob": "^0.2.9", "undici": "^5.8.1" - }, - "dependencies": { - "@sveltejs/vite-plugin-svelte": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz", - "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==", - "dev": true, - "requires": { - "debug": "^4.3.4", - "deepmerge": "^4.2.2", - "kleur": "^4.1.5", - "magic-string": "^0.26.7", - "svelte-hmr": "^0.15.0" - } - } + } + }, + "@sveltejs/vite-plugin-svelte": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.8.tgz", + "integrity": "sha512-1xkVTB4pm6zuign858FzVYE9Fdw9MQBOlxrdd85STV0NvTDmcofcRpcrK+zcIyT8SZ2dseHLu8hvDwzssF6RfA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^4.2.1", + "debug": "^4.3.4", + "deepmerge": "^4.2.2", + "kleur": "^4.1.5", + "magic-string": "^0.26.3", + "svelte-hmr": "^0.15.0" } }, "@testing-library/dom": { @@ -15159,9 +15099,9 @@ "dev": true }, "magic-string": { - "version": "0.26.7", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz", - "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==", + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.5.tgz", + "integrity": "sha512-yXUIYOOQnEHKHOftp5shMWpB9ImfgfDJpapa38j/qMtTj5QHWucvxP4lUtuRmHT9vAzvtpHkWKXW9xBwimXeNg==", "dev": true, "requires": { "sourcemap-codec": "^1.4.8" @@ -15620,9 +15560,9 @@ } }, "postcss": { - "version": "8.4.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", - "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "version": "8.4.17", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz", + "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==", "requires": { "nanoid": "^3.3.4", "picocolors": "^1.0.0", @@ -15930,10 +15870,9 @@ } }, "rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", - "dev": true, + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", "requires": { "fsevents": "~2.3.2" } @@ -16679,16 +16618,15 @@ } }, "vite": { - "version": "3.2.0-beta.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.0-beta.4.tgz", - "integrity": "sha512-pWhBcOqwKlzjGd8C+pjqDtIuqfVhob24NGNB9iyyEw6fYiFpNlRYffsV+TrF+UejYNkDRZqZSUhgmS9x7XxDxg==", - "dev": true, + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", "requires": { "esbuild": "^0.15.9", "fsevents": "~2.3.2", - "postcss": "^8.4.18", + "postcss": "^8.4.16", "resolve": "^1.22.1", - "rollup": "^2.79.1" + "rollup": "~2.78.0" } }, "vitest": { @@ -16705,28 +16643,6 @@ "tinypool": "^0.2.4", "tinyspy": "^1.0.0", "vite": "^2.9.12 || ^3.0.0-0" - }, - "dependencies": { - "rollup": { - "version": "2.78.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", - "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", - "requires": { - "fsevents": "~2.3.2" - } - }, - "vite": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", - "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", - "requires": { - "esbuild": "^0.15.9", - "fsevents": "~2.3.2", - "postcss": "^8.4.16", - "resolve": "^1.22.1", - "rollup": "~2.78.0" - } - } } }, "w3c-xmlserializer": { diff --git a/frontend/package.json b/frontend/package.json index 484688d95f..d6d9e05588 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -53,7 +53,7 @@ "svelte2tsx": "^0.5.19", "ts-jest": "^29.0.3", "typescript": "^4.6.4", - "vite": "^3.2.0-beta.4" + "vite": "^3.1.8" }, "type": "module", "dependencies": { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index e972f14f40..c8514a8bde 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -20,8 +20,7 @@ const config: UserConfig = { modules: { Buffer: ["buffer", "Buffer"] }, }), ], - }, - modulePreload: false + } }, define: { VITE_APP_VERSION: JSON.stringify(version), From be7efae48ab462024de723573298ea6f6e469b16 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 10:01:38 +0200 Subject: [PATCH 095/142] feat: defer spinner --- .../lib/components/common/RouteModule.svelte | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/frontend/src/lib/components/common/RouteModule.svelte b/frontend/src/lib/components/common/RouteModule.svelte index 60fa4266ff..16d8e8ef83 100644 --- a/frontend/src/lib/components/common/RouteModule.svelte +++ b/frontend/src/lib/components/common/RouteModule.svelte @@ -2,6 +2,8 @@ import type { SvelteComponent } from "svelte"; import { onMount } from "svelte"; import { AppPath } from "$lib/constants/routes.constants"; + import { Spinner } from "@dfinity/gix-components"; + import { fade } from 'svelte/transition'; export let path: AppPath; export let params: Record | undefined = undefined; @@ -35,11 +37,34 @@ } }; + let spinner = false; + onMount(async () => { + // We defer the display of the spinner to avoid brief glitch when pages chunks are loaded quickly + setTimeout(() => spinner = true, 250); + component = await loadModule(); }); {#if component !== undefined} +{:else} +
+ +
{/if} + + \ No newline at end of file From 40cde108206d427329df41931a82c9c0387b1d63 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 10:31:55 +0200 Subject: [PATCH 096/142] feat: smoothness sign out --- frontend/src/lib/components/header/AccountMenu.svelte | 6 ++++-- frontend/src/lib/components/header/Logout.svelte | 10 +++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/components/header/AccountMenu.svelte b/frontend/src/lib/components/header/AccountMenu.svelte index a47b1ebb29..15b6796b45 100644 --- a/frontend/src/lib/components/header/AccountMenu.svelte +++ b/frontend/src/lib/components/header/AccountMenu.svelte @@ -10,13 +10,15 @@ let signedIn = false; $: signedIn = isSignedIn($authStore.identity); + + const toggle = () => visible = !visible; From c5a674eedc3c1e1b90bb08df49a11424b831f417 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Wed, 26 Oct 2022 10:32:17 +0200 Subject: [PATCH 097/142] chore: format --- frontend/scripts/build.preload.mjs | 13 +++++-------- .../src/lib/components/common/RouteModule.svelte | 6 +++--- .../src/lib/components/header/AccountMenu.svelte | 2 +- frontend/src/lib/components/header/Logout.svelte | 4 ++-- frontend/src/tests/lib/routes/Accounts.spec.ts | 2 +- frontend/src/tests/lib/routes/Wallet.spec.ts | 2 +- frontend/vite.config.ts | 2 +- 7 files changed, 14 insertions(+), 17 deletions(-) diff --git a/frontend/scripts/build.preload.mjs b/frontend/scripts/build.preload.mjs index 9217e179a6..1efcbdf593 100644 --- a/frontend/scripts/build.preload.mjs +++ b/frontend/scripts/build.preload.mjs @@ -12,18 +12,15 @@ import { findHtmlFiles } from "./build.utils.mjs"; * On VM boundary nodes it seems that preloading is better support. */ const removePreloadScripts = (htmlFile) => { - const updatedIndexHTML = removePreloadedScript(htmlFile); - writeFileSync(htmlFile, updatedIndexHTML); + const updatedIndexHTML = removePreloadedScript(htmlFile); + writeFileSync(htmlFile, updatedIndexHTML); }; const removePreloadedScript = (htmlFile) => { - const content = readFileSync(htmlFile, "utf-8"); + const content = readFileSync(htmlFile, "utf-8"); - return content.replace( - /\s*()\s*/gi, - "" - ); + return content.replace(/\s*()\s*/gi, ""); }; const htmlFiles = findHtmlFiles(); -htmlFiles.forEach((htmlFile) => removePreloadScripts(htmlFile)); \ No newline at end of file +htmlFiles.forEach((htmlFile) => removePreloadScripts(htmlFile)); diff --git a/frontend/src/lib/components/common/RouteModule.svelte b/frontend/src/lib/components/common/RouteModule.svelte index 16d8e8ef83..6ec8ad98bf 100644 --- a/frontend/src/lib/components/common/RouteModule.svelte +++ b/frontend/src/lib/components/common/RouteModule.svelte @@ -3,7 +3,7 @@ import { onMount } from "svelte"; import { AppPath } from "$lib/constants/routes.constants"; import { Spinner } from "@dfinity/gix-components"; - import { fade } from 'svelte/transition'; + import { fade } from "svelte/transition"; export let path: AppPath; export let params: Record | undefined = undefined; @@ -41,7 +41,7 @@ onMount(async () => { // We defer the display of the spinner to avoid brief glitch when pages chunks are loaded quickly - setTimeout(() => spinner = true, 250); + setTimeout(() => (spinner = true), 250); component = await loadModule(); }); @@ -67,4 +67,4 @@ opacity: 0; visibility: hidden; } - \ No newline at end of file + diff --git a/frontend/src/lib/components/header/AccountMenu.svelte b/frontend/src/lib/components/header/AccountMenu.svelte index 15b6796b45..9c0bd772a9 100644 --- a/frontend/src/lib/components/header/AccountMenu.svelte +++ b/frontend/src/lib/components/header/AccountMenu.svelte @@ -11,7 +11,7 @@ let signedIn = false; $: signedIn = isSignedIn($authStore.identity); - const toggle = () => visible = !visible; + const toggle = () => (visible = !visible); - - -
- - - {#if signedIn} +{#if signedIn} + + + +
+ + - {/if} -
- +
+ +{:else} + +{/if} diff --git a/frontend/src/lib/components/header/Logout.svelte b/frontend/src/lib/components/header/Logout.svelte index b41e26a617..3139185fff 100644 --- a/frontend/src/lib/components/header/Logout.svelte +++ b/frontend/src/lib/components/header/Logout.svelte @@ -1,7 +1,7 @@ diff --git a/frontend/src/lib/stores/layout.store.ts b/frontend/src/lib/stores/layout.store.ts index 2b01ba4814..83d199f58b 100644 --- a/frontend/src/lib/stores/layout.store.ts +++ b/frontend/src/lib/stores/layout.store.ts @@ -4,3 +4,7 @@ export const layoutTitleStore = writable(""); export const layoutBackStore = writable<(() => Promise) | undefined>( undefined ); + +// A store used to enable all sign-in buttons displayed on pages as enabled only once the app has been loaded +// Once JS is loaded, auth has been synced and message listener are ready +export const layoutAuthReady = writable(false); From 0b36afc802369f2711f7a0253cff2dbfd41eb81c Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Mon, 7 Nov 2022 15:49:33 +0100 Subject: [PATCH 141/142] build: update gix --- frontend/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 55dcc25be0..7a7b6335e3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1661,9 +1661,9 @@ } }, "node_modules/@dfinity/gix-components": { - "version": "2.0.0-next-2022-11-07", - "resolved": "https://registry.npmjs.org/@dfinity/gix-components/-/gix-components-2.0.0-next-2022-11-07.tgz", - "integrity": "sha512-ob13JVF17H3ZKS0iMnbmL1YWr/uiAVVTi1D4Zedsa8+lR5fWdTfehsjIHCOa4GEz8IRx/B7P1ktlDIjfkfzPew==", + "version": "2.0.0-next-2022-11-07.1", + "resolved": "https://registry.npmjs.org/@dfinity/gix-components/-/gix-components-2.0.0-next-2022-11-07.1.tgz", + "integrity": "sha512-/C3kf8eYbcSx37vQq/TNiwfgaVbqeIZ32GlLY8s0tbweR6T1gW5zNtf0nLwj4MrTIwo0XXU4iJVTMg2nV3dWqg==", "dependencies": { "dompurify": "^2.4.0" } @@ -10987,9 +10987,9 @@ "requires": {} }, "@dfinity/gix-components": { - "version": "2.0.0-next-2022-11-07", - "resolved": "https://registry.npmjs.org/@dfinity/gix-components/-/gix-components-2.0.0-next-2022-11-07.tgz", - "integrity": "sha512-ob13JVF17H3ZKS0iMnbmL1YWr/uiAVVTi1D4Zedsa8+lR5fWdTfehsjIHCOa4GEz8IRx/B7P1ktlDIjfkfzPew==", + "version": "2.0.0-next-2022-11-07.1", + "resolved": "https://registry.npmjs.org/@dfinity/gix-components/-/gix-components-2.0.0-next-2022-11-07.1.tgz", + "integrity": "sha512-/C3kf8eYbcSx37vQq/TNiwfgaVbqeIZ32GlLY8s0tbweR6T1gW5zNtf0nLwj4MrTIwo0XXU4iJVTMg2nV3dWqg==", "requires": { "dompurify": "^2.4.0" } From e758ac35bf569e002e06c7e4cb0afb3141529f4a Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Mon, 7 Nov 2022 15:55:29 +0100 Subject: [PATCH 142/142] test: adapted for new signin button --- .../lib/components/header/AccountMenu.spec.ts | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/frontend/src/tests/lib/components/header/AccountMenu.spec.ts b/frontend/src/tests/lib/components/header/AccountMenu.spec.ts index 475b377dbe..69582f8878 100644 --- a/frontend/src/tests/lib/components/header/AccountMenu.spec.ts +++ b/frontend/src/tests/lib/components/header/AccountMenu.spec.ts @@ -18,26 +18,10 @@ describe("AccountMenu", () => { expect(() => getByRole("menu")).toThrow(); }); - it("should be open", async () => { - const renderResult = render(AccountMenu); + it("should display a sign-in button if not signed in", () => { + const { getByTestId } = render(AccountMenu); - await show(renderResult); - }); - - it("should not display logout button if not signed in", async () => { - const renderResult = render(AccountMenu); - - await show(renderResult); - - expect(() => renderResult.getByTestId("logout")).toThrow(); - }); - - it("should display theme toggle", async () => { - const renderResult = render(AccountMenu); - - await show(renderResult); - - expect(renderResult.getByTestId("theme-toggle")).not.toBeNull(); + expect(getByTestId("toolbar-login")).not.toBeNull(); }); describe("signed in", () => { @@ -47,6 +31,20 @@ describe("AccountMenu", () => { .mockImplementation(mockAuthStoreSubscribe) ); + it("should be open", async () => { + const renderResult = render(AccountMenu); + + await show(renderResult); + }); + + it("should display theme toggle", async () => { + const renderResult = render(AccountMenu); + + await show(renderResult); + + expect(renderResult.getByTestId("theme-toggle")).not.toBeNull(); + }); + it("should display logout button if signed in", async () => { const renderResult = render(AccountMenu);