From ecb96877c667a4998e9ddf1f1d5ca9ad0b85beba Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Tue, 14 Jan 2025 16:36:18 +0200
Subject: [PATCH] web-wallet: Update Wallet Access terminology

Resolves #3356
---
 web-wallet/CHANGELOG.md                       |  4 ++-
 .../src/routes/(app)/settings/+page.svelte    |  6 +++-
 .../(app)/settings/__tests__/page.spec.js     |  4 +--
 .../src/routes/(welcome)/setup/+page.svelte   |  4 +--
 .../__tests__/__snapshots__/page.spec.js.snap |  4 +--
 .../(welcome)/{login => unlock}/+page.svelte  |  0
 .../__tests__/__snapshots__/page.spec.js.snap |  4 +--
 .../{login => unlock}/__tests__/page.spec.js  | 30 +++++++++----------
 8 files changed, 31 insertions(+), 25 deletions(-)
 rename web-wallet/src/routes/(welcome)/{login => unlock}/+page.svelte (100%)
 rename web-wallet/src/routes/(welcome)/{login => unlock}/__tests__/__snapshots__/page.spec.js.snap (95%)
 rename web-wallet/src/routes/(welcome)/{login => unlock}/__tests__/page.spec.js (92%)

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 04074fd004..a39ff4c25a 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Update Transactions list design [#1922]
 - Ensure connected wallet is disconnected when closing the app [#3269]
+- Update Wallet Access terminology [#3356]
 
 ### Removed
 
@@ -516,11 +517,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3259]: https://github.com/dusk-network/rusk/issues/3259
 [#3265]: https://github.com/dusk-network/rusk/issues/3265
 [#3267]: https://github.com/dusk-network/rusk/issues/3267
-[#3270]: https://github.com/dusk-network/rusk/issues/3269
+[#3269]: https://github.com/dusk-network/rusk/issues/3269
 [#3270]: https://github.com/dusk-network/rusk/issues/3270
 [#3287]: https://github.com/dusk-network/rusk/issues/3287
 [#3333]: https://github.com/dusk-network/rusk/issues/3333
 [#3339]: https://github.com/dusk-network/rusk/issues/3339
+[#3356]: https://github.com/dusk-network/rusk/issues/3356
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
index bfe6f698c6..d4972314c1 100644
--- a/web-wallet/src/routes/(app)/settings/+page.svelte
+++ b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -218,7 +218,11 @@
     icon={{ path: mdiArrowLeft }}
     text="Back"
   />
-  <Button on:click={() => logout(false)} variant="tertiary" text="Log out" />
+  <Button
+    on:click={() => logout(false)}
+    variant="tertiary"
+    text="Lock Wallet"
+  />
 </div>
 
 <style lang="postcss">
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js b/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
index f72695f7be..3ea5ef080c 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(app)/settings/__tests__/page.spec.js
@@ -123,10 +123,10 @@ describe("Settings", () => {
     expect(backButton).toHaveAttribute("aria-disabled", "false");
   });
 
-  it("should reset wallet store and navigate to login page on clicking the Log Out button", async () => {
+  it("should reset wallet store and navigate to landing page on clicking the Lock Wallet button", async () => {
     const { getByRole } = render(Settings);
 
-    const button = getByRole("button", { name: "Log out" });
+    const button = getByRole("button", { name: "Lock Wallet" });
 
     await fireEvent.click(button);
     await vi.advanceTimersToNextTimerAsync();
diff --git a/web-wallet/src/routes/(welcome)/setup/+page.svelte b/web-wallet/src/routes/(welcome)/setup/+page.svelte
index 3b800694e4..2274489a2a 100644
--- a/web-wallet/src/routes/(welcome)/setup/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/+page.svelte
@@ -30,8 +30,8 @@
       </div>
       <Animation />
       <AppAnchorButton
-        href="/login"
-        text="Access wallet"
+        href="/unlock"
+        text="Unlock Wallet"
         icon={{ path: mdiKeyOutline }}
       />
     </div>
diff --git a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
index 0cc1662209..cb30169021 100644
--- a/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/__tests__/__snapshots__/page.spec.js.snap
@@ -118,7 +118,7 @@ exports[`Setup > should render the Setup page 1`] = `
       <a
         aria-disabled="false"
         class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--default dusk-icon-button--labeled"
-        href="/some-base-path/login"
+        href="/some-base-path/unlock"
       >
         <svg
           class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
@@ -134,7 +134,7 @@ exports[`Setup > should render the Setup page 1`] = `
         <span
           class="dusk-anchor-button__text"
         >
-          Access wallet
+          Unlock Wallet
         </span>
         
         
diff --git a/web-wallet/src/routes/(welcome)/login/+page.svelte b/web-wallet/src/routes/(welcome)/unlock/+page.svelte
similarity index 100%
rename from web-wallet/src/routes/(welcome)/login/+page.svelte
rename to web-wallet/src/routes/(welcome)/unlock/+page.svelte
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/unlock/__tests__/__snapshots__/page.spec.js.snap
similarity index 95%
rename from web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
rename to web-wallet/src/routes/(welcome)/unlock/__tests__/__snapshots__/page.spec.js.snap
index f06439819a..ee4d23a961 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/unlock/__tests__/__snapshots__/page.spec.js.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Login > Mnemonic phrase workflow > should render the login page and show the field to enter the mnemonic phrase, if there is no login info stored 1`] = `
+exports[`Unlock Wallet > Mnemonic phrase workflow > should render the Unlock Wallet page and show the field to enter the mnemonic phrase, if there is no login info stored 1`] = `
 <section
   class="login svelte-1e8gc2s"
 >
@@ -126,7 +126,7 @@ exports[`Login > Mnemonic phrase workflow > should render the login page and sho
 </section>
 `;
 
-exports[`Login > Password workflow > should show the password field and the link to restore the wallet if there is login info stored 1`] = `
+exports[`Unlock Wallet > Password workflow > should show the password field and the link to restore the wallet if there is login info stored 1`] = `
 <section
   class="login svelte-1e8gc2s"
 >
diff --git a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/unlock/__tests__/page.spec.js
similarity index 92%
rename from web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
rename to web-wallet/src/routes/(welcome)/unlock/__tests__/page.spec.js
index fb3602a57f..3831ca2ec8 100644
--- a/web-wallet/src/routes/(welcome)/login/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/unlock/__tests__/page.spec.js
@@ -24,7 +24,7 @@ import {
 } from "$lib/wallet";
 import loginInfoStorage from "$lib/services/loginInfoStorage";
 
-import Login from "../+page.svelte";
+import UnlockWallet from "../+page.svelte";
 
 /** @param {HTMLElement} container */
 function getTextInput(container) {
@@ -34,7 +34,7 @@ function getTextInput(container) {
   );
 }
 
-describe("Login", async () => {
+describe("Unlock Wallet", async () => {
   const mnemonic = generateMnemonic();
   const pwd = "some pwd";
   const loginInfo = await encryptMnemonic(mnemonic, pwd);
@@ -70,14 +70,14 @@ describe("Login", async () => {
   });
 
   describe("Mnemonic phrase workflow", () => {
-    it("should render the login page and show the field to enter the mnemonic phrase, if there is no login info stored", () => {
-      const { container } = render(Login, {});
+    it("should render the Unlock Wallet page and show the field to enter the mnemonic phrase, if there is no login info stored", () => {
+      const { container } = render(UnlockWallet, {});
 
       expect(container.firstChild).toMatchSnapshot();
     });
 
     it("should show an error message if the user enters an invalid mnemonic", async () => {
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -99,7 +99,7 @@ describe("Login", async () => {
     });
 
     it("should redirect to the Restore flow if the user inputs a valid mnemonic with no prior wallet created", async () => {
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -116,7 +116,7 @@ describe("Login", async () => {
       const currentUserID = "some-user-id";
       settingsStore.update(setKey("userId", currentUserID));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -132,7 +132,7 @@ describe("Login", async () => {
     it("should unlock the Wallet if the entered mnemonic is the last one used", async () => {
       settingsStore.update(setKey("userId", userId));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -150,7 +150,7 @@ describe("Login", async () => {
     it("should trim and lower case the entered mnemonic before validating it", async () => {
       settingsStore.update(setKey("userId", userId));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -176,13 +176,13 @@ describe("Login", async () => {
     });
 
     it("should show the password field and the link to restore the wallet if there is login info stored", () => {
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
 
       expect(container.firstChild).toMatchSnapshot();
     });
 
     it("should show an error message if the user enters the wrong password", async () => {
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -210,7 +210,7 @@ describe("Login", async () => {
     it("should redirect to the Restore flow if the user inputs the correct password with no prior wallet created", async () => {
       settingsStore.update(setKey("userId", ""));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -237,7 +237,7 @@ describe("Login", async () => {
 
       settingsStore.update(setKey("userId", currentUserID));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -256,7 +256,7 @@ describe("Login", async () => {
     it("should unlock the Wallet is the entered password is for the last used mnemonic", async () => {
       settingsStore.update(setKey("userId", userId));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);
 
@@ -274,7 +274,7 @@ describe("Login", async () => {
     it("should trim the entered password before validating it", async () => {
       settingsStore.update(setKey("userId", userId));
 
-      const { container } = render(Login, {});
+      const { container } = render(UnlockWallet, {});
       const form = getAsHTMLElement(container, "form");
       const textInput = getTextInput(container);