feat: implement network switch

.github/workflows/test.yml

@@ -537,7 +537,7 @@ jobs:
                   COVERAGE_THRESHOLD_LINES: 99.57
                   COVERAGE_THRESHOLD_FUNCTIONS: 98.3
                   COVERAGE_THRESHOLD_STATEMENTS: 99.6
-                  COVERAGE_THRESHOLD_BRANCHES: 99.2
+                  COVERAGE_THRESHOLD_BRANCHES: 99.17
                   COVERAGE_INCLUDE_PATH: src/domains/message
               with:
                   timeout_minutes: 10
@@ -612,7 +612,7 @@ jobs:
               run: pnpm rebuild
             - name: Test
               env:
-                  COVERAGE_THRESHOLD_BRANCHES: 99.6
+                  COVERAGE_THRESHOLD_BRANCHES: 99.24
               uses: nick-invision/retry@v2
               with:
                   timeout_minutes: 10
@@ -855,9 +855,9 @@ jobs:
             - name: Test
               uses: nick-invision/retry@v2
               env:
-                  COVERAGE_THRESHOLD_LINES: 96.44
-                  COVERAGE_THRESHOLD_FUNCTIONS: 97.51
-                  COVERAGE_THRESHOLD_STATEMENTS: 96.5
+                  COVERAGE_THRESHOLD_LINES: 96.13
+                  COVERAGE_THRESHOLD_FUNCTIONS: 97.34
+                  COVERAGE_THRESHOLD_STATEMENTS: 96.21
                   COVERAGE_THRESHOLD_BRANCHES: 92.27
                   COVERAGE_INCLUDE_PATH: src/domains/wallet
               with:

src/app/App.restore.test.tsx

@@ -0,0 +1,70 @@
+import { Bcrypt } from "@ardenthq/sdk-cryptography";
+import { createHashHistory } from "history";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { App } from "./App";
+import { toasts } from "@/app/services";
+import { translations as profileTranslations } from "@/domains/profile/i18n";
+import { env, render, screen, waitFor } from "@/utils/testing-library";
+
+const history = createHashHistory();
+
+const passwordInput = () => screen.getByTestId("SignIn__input--password");
+
+describe("App", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		process.env.MOCK_SYNCHRONIZER = undefined;
+	});
+
+	beforeEach(() => {
+		vi.spyOn(toasts, "dismiss").mockImplementation(vi.fn());
+
+		// Mock synchronizer to avoid running any jobs in these tests.
+		process.env.MOCK_SYNCHRONIZER = "TRUE";
+
+		history.replace("/");
+		env.reset();
+	});
+
+	it("should redirect to root if profile restoration error occurs", async () => {
+		process.env.TEST_PROFILES_RESTORE_STATUS = "restored";
+		process.env.REACT_APP_IS_UNIT = "1";
+
+		render(<App />, { history, withProviders: false });
+
+		await expect(
+			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined),
+		).resolves.toBeVisible();
+
+		expect(history.location.pathname).toBe("/");
+
+		await userEvent.click(screen.getAllByTestId("ProfileRow__Link")[1]);
+
+		await waitFor(() => {
+			expect(passwordInput()).toBeInTheDocument();
+		});
+
+		await userEvent.clear(passwordInput());
+		await userEvent.type(passwordInput(), "password");
+
+		await waitFor(() => {
+			expect(passwordInput()).toHaveValue("password");
+		});
+
+		const profile = env.profiles().findById("cba050f1-880f-45f0-9af9-cfe48f406052");
+
+		const verifyPasswordMock = vi.spyOn(Bcrypt, "verify").mockReturnValue(true);
+		const memoryPasswordMock = vi.spyOn(profile.password(), "get").mockImplementation(() => {
+			throw new Error("password not found");
+		});
+
+		await userEvent.click(screen.getByTestId("SignIn__submit-button"));
+
+		await waitFor(() => expect(memoryPasswordMock).toHaveBeenCalled(), { timeout: 4000 });
+		await waitFor(() => expect(history.location.pathname).toBe("/"));
+
+		memoryPasswordMock.mockRestore();
+		verifyPasswordMock.mockRestore();
+	});
+});

src/app/App.test.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/require-await */
-import { Bcrypt } from "@ardenthq/sdk-cryptography";
 import { Contracts, Environment } from "@ardenthq/sdk-profiles";
 import { createHashHistory } from "history";
 import React from "react";
@@ -73,46 +72,6 @@ describe("App", () => {
 		env.reset();
 	});
 
-	it("should redirect to root if profile restoration error occurs", async () => {
-		process.env.REACT_APP_IS_UNIT = "1";
-
-		render(<App />, { history, withProviders: false });
-
-		await expect(
-			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined),
-		).resolves.toBeVisible();
-
-		expect(history.location.pathname).toBe("/");
-
-		await userEvent.click(screen.getAllByTestId("ProfileRow__Link")[1]);
-
-		await waitFor(() => {
-			expect(passwordInput()).toBeInTheDocument();
-		});
-
-		await userEvent.clear(passwordInput());
-		await userEvent.type(passwordInput(), "password");
-
-		await waitFor(() => {
-			expect(passwordInput()).toHaveValue("password");
-		});
-
-		const profile = env.profiles().findById("cba050f1-880f-45f0-9af9-cfe48f406052");
-
-		const verifyPasswordMock = vi.spyOn(Bcrypt, "verify").mockReturnValue(true);
-		const memoryPasswordMock = vi.spyOn(profile.password(), "get").mockImplementation(() => {
-			throw new Error("password not found");
-		});
-
-		await userEvent.click(screen.getByTestId("SignIn__submit-button"));
-
-		await waitFor(() => expect(memoryPasswordMock).toHaveBeenCalled(), { timeout: 4000 });
-		await waitFor(() => expect(history.location.pathname).toBe("/"));
-
-		memoryPasswordMock.mockRestore();
-		verifyPasswordMock.mockRestore();
-	});
-
 	it("should render page skeleton", async () => {
 		const toastSuccessMock = vi.spyOn(toasts, "success").mockImplementation(vi.fn());
 		process.env.REACT_APP_IS_UNIT = "1";
@@ -257,15 +216,25 @@ describe("App", () => {
 		},
 	);
 
-	it("should enter profile", async () => {
+	it("should enter profile and fail to restore", async () => {
 		process.env.REACT_APP_IS_UNIT = "1";
+		process.env.TEST_PROFILES_RESTORE_STATUS = undefined;
 
 		render(<App />, { history, withProviders: false });
 
 		await expect(
-			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined),
+			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined, { timeout: 2000 }),
 		).resolves.toBeVisible();
 
+		const profile = env.profiles().findById("cba050f1-880f-45f0-9af9-cfe48f406052");
+
+		vi.spyOn(profile, "usesPassword").mockReturnValue(true);
+		vi.spyOn(profile.password(), "get").mockImplementation(() => {
+			throw new Error("Failed to restore");
+		});
+
+		await env.profiles().restore(passwordProtectedProfile, getDefaultPassword());
+
 		expect(history.location.pathname).toBe("/");
 
 		await userEvent.click(screen.getAllByTestId("ProfileRow__Link")[1]);
@@ -282,33 +251,27 @@ describe("App", () => {
 
 		const toastSpy = vi.spyOn(toasts, "dismiss").mockResolvedValue(undefined);
 
+		vi.spyOn(passwordProtectedProfile.password(), "get").mockImplementation(() => {
+			throw new Error("restore error");
+		});
+
 		await userEvent.click(screen.getByTestId("SignIn__submit-button"));
 
-		const profileDashboardUrl = `/profiles/${passwordProtectedProfile.id()}/dashboard`;
-		await waitFor(() => expect(history.location.pathname).toBe(profileDashboardUrl), { timeout: 4000 });
+		await waitFor(() => expect(history.location.pathname).toBe("/"), { timeout: 4000 });
 
 		toastSpy.mockRestore();
+		vi.restoreAllMocks();
 	});
 
-	it("should enter profile and fail to restore", async () => {
+	it("should enter profile", async () => {
 		process.env.REACT_APP_IS_UNIT = "1";
-		process.env.TEST_PROFILES_RESTORE_STATUS = undefined;
 
 		render(<App />, { history, withProviders: false });
 
 		await expect(
-			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined, { timeout: 2000 }),
+			screen.findByText(profileTranslations.PAGE_WELCOME.WITH_PROFILES.TITLE, undefined),
 		).resolves.toBeVisible();
 
-		const profile = env.profiles().findById("cba050f1-880f-45f0-9af9-cfe48f406052");
-
-		vi.spyOn(profile, "usesPassword").mockReturnValue(true);
-		vi.spyOn(profile.password(), "get").mockImplementation(() => {
-			throw new Error("Failed to restore");
-		});
-
-		await env.profiles().restore(passwordProtectedProfile, getDefaultPassword());
-
 		expect(history.location.pathname).toBe("/");
 
 		await userEvent.click(screen.getAllByTestId("ProfileRow__Link")[1]);
@@ -325,15 +288,11 @@ describe("App", () => {
 
 		const toastSpy = vi.spyOn(toasts, "dismiss").mockResolvedValue(undefined);
 
-		vi.spyOn(passwordProtectedProfile.password(), "get").mockImplementation(() => {
-			throw new Error("restore error");
-		});
-
 		await userEvent.click(screen.getByTestId("SignIn__submit-button"));
 
-		await waitFor(() => expect(history.location.pathname).toBe("/"), { timeout: 4000 });
+		const profileDashboardUrl = `/profiles/${passwordProtectedProfile.id()}/dashboard`;
+		await waitFor(() => expect(history.location.pathname).toBe(profileDashboardUrl), { timeout: 4000 });
 
 		toastSpy.mockRestore();
-		vi.restoreAllMocks();
 	});
 });

src/app/assets/svg/index.ts

@@ -59,6 +59,8 @@ import List from "./list.svg?react";
 import LoaderLogo from "./loader-logo.svg?react";
 import Lock from "./lock.svg?react";
 import MagnifyingGlass from "./magnifying-glass.svg?react";
+import Mainnet from "./mainnet.svg?react";
+import Testnet from "./testnet.svg?react";
 import MagnifyingGlassAlt from "./magnifying-glass-alt.svg?react";
 import MagnifyingGlassId from "./magnifying-glass-id.svg?react";
 import Menu from "./menu.svg?react";
@@ -178,6 +180,7 @@ export const SvgCollection: Record<string, FC<SVGProps<SVGSVGElement>>> = {
 	MagnifyingGlass,
 	MagnifyingGlassAlt,
 	MagnifyingGlassId,
+	Mainnet,
 	Menu,
 	MenuOpen,
 	MoneyCoinSwap,
@@ -202,6 +205,7 @@ export const SvgCollection: Record<string, FC<SVGProps<SVGSVGElement>>> = {
 	StatusError,
 	StatusOk,
 	StatusStandby,
+	Testnet,
 	Trash,
 	UnderlineMoon,
 	UnderlineSun,

src/app/components/Dropdown/Dropdown.contracts.ts

@@ -39,6 +39,7 @@ export interface DropdownProperties extends JSX.IntrinsicAttributes {
 	as?: React.ElementType;
 	children?: React.ReactElement;
 	top?: React.ReactNode;
+	bottom?: React.ReactNode;
 	onSelect?: OnSelectProperties;
 	variant?: DropdownVariantType;
 	options?: DropdownOption[] | DropdownOptionGroup[];

src/app/components/Dropdown/Dropdown.tsx

@@ -33,6 +33,7 @@ export const Wrapper = ({ variant, ...props }: { variant: DropdownVariantType }
 export const Dropdown: FC<DropdownProperties> = ({
 	children,
 	top,
+	bottom,
 	wrapperClass,
 	variant,
 	options,
@@ -127,11 +128,12 @@ export const Dropdown: FC<DropdownProperties> = ({
 					>
 						<Wrapper
 							variant={variant || options ? "options" : "custom"}
-							className="dropdown-body overflow-hidden rounded-xl bg-theme-background px-1 py-0 shadow-xl"
+							className="dropdown-body overflow-hidden rounded-xl bg-theme-background py-0 shadow-xl md:px-1"
 						>
 							{top}
 							{options?.length && renderOptions({ onSelect: onSelectOption, options })}
 							{clonedElement && <div>{clonedElement}</div>}
+							{bottom}
 						</Wrapper>
 					</div>
 				</FloatingPortal>