web-wallet: Overhaul landing page

Resolves #1533, Resolves #1534, Resolves #1535

web-wallet/CHANGELOG.md

@@ -7,8 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add autocomplete attribute on the login field [#1533]
+
 ### Changed
 
+- Redesign the landing page [#1534]
+- Trigger the Restore flow if a user tries to access a new wallet [#1535]
 - Update `OperationResult` to infer error messages from arbitrary values [#1524]
 - Update Tabs to use native scroll behavior [#1320]
 
@@ -179,6 +185,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1514]: https://github.com/dusk-network/rusk/issues/1514
 [#1519]: https://github.com/dusk-network/rusk/issues/1519
 [#1524]: https://github.com/dusk-network/rusk/issues/1524
+[#1533]: https://github.com/dusk-network/rusk/issues/1533
+[#1534]: https://github.com/dusk-network/rusk/issues/1534
+[#1535]: https://github.com/dusk-network/rusk/issues/1535
 
 <!-- VERSIONS -->
 

web-wallet/package.json

@@ -39,7 +39,6 @@
     "@floating-ui/dom": "1.6.3",
     "@mdi/js": "7.4.47",
     "bip39": "3.1.0",
-    "css-doodle": "0.38.4",
     "lamb": "0.61.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",

web-wallet/src/lib/components/ExistingWalletNotice/ExistingWalletNotice.svelte

@@ -11,14 +11,15 @@
   <Card iconPath={mdiAlertOutline} heading="Existing Wallet Detected">
     <div class="flex flex-col gap-1">
       <p>
-        Logging in to a new wallet will overwrite the current local wallet
-        cache, meaning that when you log in again with the previous
-        mnemonic/account you will need to wait for the wallet to sync.
+        Initializing a new wallet will replace your existing local wallet cache,
+        erasing any stored data. Ensure you have securely backed up your current
+        wallet's seed phrase to prevent loss. Proceeding without a backup can
+        lead to irreversible loss of access to your assets.
       </p>
       <div class="flex gap-1 w-100">
         <AppAnchorButton
           className="flex-1"
-          href="/setup"
+          href="/"
           text="Back"
           variant="tertiary"
         />

web-wallet/src/lib/dusk/components/FieldButtonGroup/FieldButtonGroup.svelte

@@ -0,0 +1,46 @@
+<script>
+  import { makeClassName } from "$lib/dusk/string";
+  import { Button, Textbox } from "..";
+
+  /** @type {TextboxTypes} */
+  export let type = "text";
+
+  /** @type {string} */
+  export let name;
+  export let autocomplete = "off";
+  export let placeholder = "";
+  export let value = "";
+
+  /** @type {string | undefined} */
+  export let className = undefined;
+
+  /** @type {string} */
+  export let buttonText = "Submit";
+
+  /** @type {Textbox} */
+  let inputElement;
+
+  export function focus() {
+    inputElement?.focus();
+  }
+
+  export function select() {
+    inputElement?.select();
+  }
+
+  $: classes = makeClassName(["dusk-field-button-group", className]);
+</script>
+
+<div class={classes}>
+  <Textbox
+    bind:this={inputElement}
+    tabindex={0}
+    {type}
+    {autocomplete}
+    {name}
+    required
+    bind:value
+    {placeholder}
+  />
+  <Button on:click type="submit" text={buttonText} variant="secondary" />
+</div>

web-wallet/src/lib/dusk/components/__tests__/FieldButtonGroup.spec.js

@@ -0,0 +1,76 @@
+import { render, fireEvent, cleanup } from "@testing-library/svelte";
+
+import { FieldButtonGroup } from "..";
+
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+describe("FieldButtonGroup", () => {
+  const baseProps = { name: "test" };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("renders the component with default values", async () => {
+    const { getByRole, container } = render(FieldButtonGroup, baseOptions);
+
+    const input = getByRole("textbox");
+    const button = getByRole("button");
+
+    expect(input).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("updates input value on change", async () => {
+    const { getByRole, container } = render(FieldButtonGroup, baseOptions);
+    const input = getByRole("textbox");
+
+    await fireEvent.input(input, { target: { value: "test value" } });
+
+    expect(input).toHaveValue("test value");
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("triggers click event on button click", async () => {
+    const { getByRole, component } = render(FieldButtonGroup);
+    const button = getByRole("button");
+
+    const mockClickHandler = vi.fn();
+    component.$on("click", mockClickHandler);
+
+    await fireEvent.click(button);
+
+    expect(mockClickHandler).toHaveBeenCalled();
+  });
+
+  it("focuses input on focus() call", async () => {
+    const { getByRole, component } = render(FieldButtonGroup);
+    const input = getByRole("textbox");
+
+    component.focus();
+    expect(input).toHaveFocus();
+  });
+
+  it("should expose a method to select the element's text", () => {
+    const { component, getByRole } = render(FieldButtonGroup, {
+      ...baseProps,
+      value: "some input text",
+    });
+
+    const input = /** @type {HTMLInputElement} */ (getByRole("textbox"));
+
+    component.select();
+
+    const selectedText = input.value.substring(
+      Number(input.selectionStart),
+      Number(input.selectionEnd)
+    );
+
+    expect(selectedText).toBe("some input text");
+  });
+});

web-wallet/src/lib/dusk/components/__tests__/__snapshots__/FieldButtonGroup.spec.js.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FieldButtonGroup > renders the component with default values 1`] = `
+<div
+  class="dusk-field-button-group"
+>
+  <input
+    autocomplete="off"
+    class="dusk-textbox dusk-textbox-text"
+    name="test"
+    placeholder=""
+    required=""
+    tabindex="0"
+    type="text"
+  />
+  
+  <!--&lt;Textbox&gt;-->
+   
+  <button
+    class="dusk-button dusk-button--type--submit dusk-button--variant--secondary dusk-button--size--normal"
+    type="submit"
+  >
+    <span
+      class="dusk-button__text"
+    >
+      Submit
+    </span>
+  </button>
+  <!--&lt;Button&gt;-->
+</div>
+`;
+
+exports[`FieldButtonGroup > updates input value on change 1`] = `
+<div
+  class="dusk-field-button-group"
+>
+  <input
+    autocomplete="off"
+    class="dusk-textbox dusk-textbox-text"
+    name="test"
+    placeholder=""
+    required=""
+    tabindex="0"
+    type="text"
+  />
+  
+  <!--&lt;Textbox&gt;-->
+   
+  <button
+    class="dusk-button dusk-button--type--submit dusk-button--variant--secondary dusk-button--size--normal"
+    type="submit"
+  >
+    <span
+      class="dusk-button__text"
+    >
+      Submit
+    </span>
+  </button>
+  <!--&lt;Button&gt;-->
+</div>
+`;

web-wallet/src/lib/dusk/components/index.js

@@ -8,6 +8,7 @@ export { default as Checkbox } from "./Checkbox/Checkbox.svelte";
 export { default as CircularIcon } from "./Icon/CircularIcon.svelte";
 export { default as ErrorAlert } from "./ErrorAlert/ErrorAlert.svelte";
 export { default as ErrorDetails } from "./ErrorDetails/ErrorDetails.svelte";
+export { default as FieldButtonGroup } from "./FieldButtonGroup/FieldButtonGroup.svelte";
 export { default as Icon } from "./Icon/Icon.svelte";
 export { default as Mnemonic } from "./Mnemonic/Mnemonic.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";

web-wallet/src/routes/(app)/__tests__/layout.spec.js

@@ -33,7 +33,7 @@ describe("App layout.js", () => {
     redirectSpy.mockRestore();
   });
 
-  it("should check if a wallet is missing in the `walletStore` and redirect the user to the login page", async () => {
+  it("should check if a wallet is missing in the `walletStore` and redirect the user to the landing page", async () => {
     // @ts-ignore
     await expect(load()).rejects.toThrow();