feat: add the Completed page after a successful import wallet

src/app/i18n/common/i18n.ts

@@ -194,6 +194,12 @@ export const translations: { [key: string]: any } = {
 		DAILY: "Daily",
 	},
 
+	INPUT_PASSPHRASE: {
+		VALIDATION: {
+			ADDRESS_ALREADY_EXISTS: "Address {{address}} already exists",
+		},
+	},
+
 	INPUT_ADDRESS: {
 		VALIDATION: {
 			NOT_VALID: "The address is not valid",

src/domains/wallet/e2e/import-wallet-action.e2e.ts

@@ -15,7 +15,7 @@ test("should import a wallet by mnemonic", async (t) => {
 		.expect(Selector("div").withText(translations().WALLETS.PAGE_IMPORT_WALLET.NETWORK_STEP.SUBTITLE).exists)
 		.ok();
 
-	// Select a network and advance to step two
+	// Select a network and advance to second step
 	await t.click(Selector("#ImportWallet__network-item-1"));
 	await t
 		.expect(Selector("button").withText(translations().COMMON.CONTINUE).hasAttribute("disabled"))
@@ -25,11 +25,17 @@ test("should import a wallet by mnemonic", async (t) => {
 		.expect(Selector("h1").withExactText(translations().WALLETS.PAGE_IMPORT_WALLET.METHOD_STEP.TITLE).exists)
 		.ok();
 
-	// Input passphrase
+	// Fill a passphrase and advance to third step
 	const passphraseInput = Selector("input[name=passphrase]");
 
 	await t.typeText(passphraseInput, "this is a top secret passphrase oleg");
 	await t.click(Selector("button").withExactText(translations().COMMON.GO_TO_WALLET));
+
+	// Fill a wallet name
+	const walletNameInput = Selector("input[name=name]");
+
+	await t.typeText(walletNameInput, "Test");
+	await t.click(Selector("button").withExactText(translations().COMMON.SAVE_FINISH));
 });
 
 test("should import a wallet by address", async (t) => {
@@ -42,7 +48,7 @@ test("should import a wallet by address", async (t) => {
 		.expect(Selector("div").withText(translations().WALLETS.PAGE_IMPORT_WALLET.NETWORK_STEP.SUBTITLE).exists)
 		.ok();
 
-	// Select a network and advance to step two
+	// Select a network and advance to the step two
 	await t.click(Selector("#ImportWallet__network-item-1"));
 	await t
 		.expect(Selector("button").withText(translations().COMMON.CONTINUE).hasAttribute("disabled"))
@@ -55,11 +61,17 @@ test("should import a wallet by address", async (t) => {
 	// Use the address only
 	await t.click(Selector("input[name=isAddressOnly]").parent());
 
-	// Input address
+	// Fill an address and advance to the third step
 	const addressInput = Selector("input[name=address]");
 
 	await t.typeText(addressInput, "D61mfSggzbvQgTUe6JhYKH2doHaqJ3Dyib");
 	await t.click(Selector("button").withExactText(translations().COMMON.GO_TO_WALLET));
+
+	// Fill a wallet name
+	const walletNameInput = Selector("input[name=name]");
+
+	await t.typeText(walletNameInput, "Test");
+	await t.click(Selector("button").withExactText(translations().COMMON.SAVE_FINISH));
 });
 
 test("should show an error message for invalid address", async (t) => {

src/domains/wallet/i18n.ts

@@ -112,7 +112,7 @@ export const translations: { [key: string]: any } = {
 
 		PROCESS_COMPLETED_STEP: {
 			TITLE: "Completed",
-			SUBTITLE: "Wallet creation is complete. Now you can use it.",
+			SUBTITLE: "Wallet import is complete. Now you can use it.",
 		},
 
 		WALLET_NAME: "Wallet name (optional)",

src/domains/wallet/pages/ImportWallet/ImportWallet.test.tsx

@@ -18,7 +18,7 @@ import {
 	waitFor,
 } from "testing-library";
 
-import { FirstStep, ImportWallet, SecondStep } from "./ImportWallet";
+import { FirstStep, ImportWallet, SecondStep, ThirdStep } from "./ImportWallet";
 
 let profile: Profile;
 const fixtureProfileId = getDefaultProfileId();
@@ -119,6 +119,38 @@ describe("ImportWallet", () => {
 		});
 	});
 
+	it("should render 3st step", async () => {
+		const { result: form } = renderHook(() =>
+			useForm({
+				defaultValues: {
+					network: {
+						id: () => "devnet",
+						coin: () => "ARK",
+					},
+				},
+			}),
+		);
+		const { getByTestId, asFragment } = render(
+			<FormContext {...form.current}>
+				<ThirdStep address={identityAddress} />
+			</FormContext>,
+		);
+
+		expect(getByTestId("ImportWallet__third-step")).toBeTruthy();
+		expect(asFragment()).toMatchSnapshot();
+
+		expect(getByTestId("ImportWallet__network-name")).toHaveTextContent("Ark Devnet");
+		expect(getByTestId("ImportWallet__wallet-address")).toHaveTextContent(identityAddress);
+
+		const walletNameInput = getByTestId("ImportWallet__name-input");
+
+		act(() => {
+			fireEvent.change(walletNameInput, { target: { value: "Test" } });
+		});
+
+		expect(form.current.getValues()).toEqual({ name: "Test" });
+	});
+
 	it("should go to previous step", async () => {
 		const history = createMemoryHistory();
 		history.push(route);
@@ -216,7 +248,24 @@ describe("ImportWallet", () => {
 
 			await fireEvent.input(passphraseInput, { target: { value: mnemonic } });
 
-			const submitButton = getByTestId("ImportWallet__submit-button");
+			const goToWalletButton = getByTestId("ImportWallet__gotowallet-button");
+			expect(goToWalletButton).toBeTruthy();
+			await waitFor(() => {
+				expect(goToWalletButton).not.toHaveAttribute("disabled");
+			});
+
+			await fireEvent.click(goToWalletButton);
+
+			await waitFor(() => {
+				expect(getByTestId("ImportWallet__third-step")).toBeTruthy();
+			});
+
+			const walletNameInput = getByTestId("ImportWallet__name-input");
+			expect(walletNameInput).toBeTruthy();
+
+			await fireEvent.input(walletNameInput, { target: { value: "Test" } });
+
+			const submitButton = getByTestId("ImportWallet__save-button");
 			expect(submitButton).toBeTruthy();
 			await waitFor(() => {
 				expect(submitButton).not.toHaveAttribute("disabled");
@@ -286,7 +335,19 @@ describe("ImportWallet", () => {
 
 			await fireEvent.input(addressInput, { target: { value: randomAddress } });
 
-			const submitButton = getByTestId("ImportWallet__submit-button");
+			const goToWalletButton = getByTestId("ImportWallet__gotowallet-button");
+			expect(goToWalletButton).toBeTruthy();
+			await waitFor(() => {
+				expect(goToWalletButton).not.toHaveAttribute("disabled");
+			});
+
+			await fireEvent.click(goToWalletButton);
+
+			await waitFor(() => {
+				expect(getByTestId("ImportWallet__third-step")).toBeTruthy();
+			});
+
+			const submitButton = getByTestId("ImportWallet__save-button");
 			expect(submitButton).toBeTruthy();
 			await waitFor(() => {
 				expect(submitButton).not.toHaveAttribute("disabled");
@@ -358,10 +419,10 @@ describe("ImportWallet", () => {
 				expect(getByText(commonTranslations.INPUT_ADDRESS.VALIDATION.NOT_VALID)).toBeVisible();
 			});
 
-			const submitButton = getByTestId("ImportWallet__submit-button");
-			expect(submitButton).toBeTruthy();
+			const goToWalletButton = getByTestId("ImportWallet__gotowallet-button");
+			expect(goToWalletButton).toBeTruthy();
 			await waitFor(() => {
-				expect(submitButton).toBeDisabled();
+				expect(goToWalletButton).toBeDisabled();
 			});
 		});
 	});
@@ -410,6 +471,15 @@ describe("ImportWallet", () => {
 				expect(getByTestId("ImportWallet__second-step")).toBeTruthy();
 			});
 
+			const passphraseInput = getByTestId("ImportWallet__passphrase-input");
+			expect(passphraseInput).toBeTruthy();
+
+			await fireEvent.input(passphraseInput, { target: { value: mnemonic } });
+
+			await waitFor(() => {
+				expect(getByText(`Address ${identityAddress} already exists`)).toBeVisible();
+			});
+
 			const addressToggle = getByTestId("ImportWallet__address-toggle");
 			expect(addressToggle).toBeTruthy();
 
@@ -424,10 +494,10 @@ describe("ImportWallet", () => {
 				expect(getByText(`Address ${identityAddress} already exists`)).toBeVisible();
 			});
 
-			const submitButton = getByTestId("ImportWallet__submit-button");
-			expect(submitButton).toBeTruthy();
+			const goToWalletButton = getByTestId("ImportWallet__gotowallet-button");
+			expect(goToWalletButton).toBeTruthy();
 			await waitFor(() => {
-				expect(submitButton).toBeDisabled();
+				expect(goToWalletButton).toBeDisabled();
 			});
 		});
 	});