web-wallet: Update AddressPicker to show Default Profile label

Resolves #3179
dusk-network · Dec 17, 2024 · 6dd9188 · 6dd9188
1 parent c3e832e
commit 6dd9188
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 353 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reword "Staking" header to "Stake" [#3113]
 - Upgrade Migration Feature to Use Reown AppKit [#3129]
 - Update default gas settings values [#3178]
+- Update AddressPicker to show Default Profile label [#3179]
 
 ### Removed
 
@@ -440,6 +441,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3156]: https://github.com/dusk-network/rusk/issues/3156
 [#3160]: https://github.com/dusk-network/rusk/issues/3160
 [#3178]: https://github.com/dusk-network/rusk/issues/3178
+[#3179]: https://github.com/dusk-network/rusk/issues/3179
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/src/lib/components/AddressPicker/AddressPicker.svelte b/web-wallet/src/lib/components/AddressPicker/AddressPicker.svelte
@@ -1,18 +1,9 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { createEventDispatcher, onMount } from "svelte";
-  import {
-    calculateAdaptiveCharCount,
-    makeClassName,
-    middleEllipsis,
-  } from "$lib/dusk/string";
-  import {
-    mdiContentCopy,
-    mdiPlusBoxOutline,
-    mdiSwapHorizontal,
-    mdiTimerSand,
-  } from "@mdi/js";
+  import { createEventDispatcher } from "svelte";
+  import { makeClassName } from "$lib/dusk/string";
+  import { mdiContentCopy, mdiPlusBoxOutline, mdiTimerSand } from "@mdi/js";
   import { Button, Icon, ProgressBar } from "$lib/dusk/components";
   import { toast } from "$lib/dusk/components/Toast/store";
   import { handlePageClick } from "$lib/dusk/ui-helpers/handlePageClick";
@@ -42,9 +33,6 @@
   /** @type {HTMLMenuElement} */
   let addressOptionsMenu;
 
-  /** @type {number} */
-  let screenWidth = window.innerWidth;
-
   function closeDropDown() {
     expanded = false;
   }
@@ -65,18 +53,6 @@
     toast("success", "Address copied", mdiContentCopy);
   }
 
-  onMount(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-
-      screenWidth = entry.contentRect.width;
-    });
-
-    resizeObserver.observe(document.body);
-
-    return () => resizeObserver.disconnect();
-  });
-
   // Scrolls the address options menu to top on addresses change
   $: if (profiles && addressOptionsMenu) {
     addressOptionsMenu.scrollTo(0, 0);
@@ -101,18 +77,7 @@
     aria-expanded={expanded}
     on:keydown={handleDropDownKeyDown}
   >
-    <Button disabled variant="secondary" icon={{ path: mdiSwapHorizontal }} />
-
-    <p class="address-picker__current-address">
-      {middleEllipsis(currentAddress, calculateAdaptiveCharCount(screenWidth))}
-    </p>
-    <Button
-      aria-label="Copy Address"
-      className="address-picker__copy-address-button"
-      icon={{ path: mdiContentCopy }}
-      on:click={copyCurrentAddress}
-      variant="secondary"
-    />
+    <span>Default Profile</span>
   </div>
 
   {#if expanded}

diff --git a/web-wallet/src/lib/components/__tests__/AddressPicker.spec.js b/web-wallet/src/lib/components/__tests__/AddressPicker.spec.js
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { cleanup, fireEvent, render } from "@testing-library/svelte";
+import { cleanup, render } from "@testing-library/svelte";
 import { get } from "svelte/store";
 
 import mockedWalletStore from "../../../__mocks__/mockedWalletStore";
@@ -35,16 +35,4 @@ describe("AddressPicker", () => {
 
     expect(container.firstElementChild).toMatchSnapshot();
   });
-
-  it("copies the current address on Copy button click", async () => {
-    const { getByRole } = render(AddressPicker, props);
-
-    const component = getByRole("button", { name: "Copy Address" });
-
-    await fireEvent.click(component);
-
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      currentProfile.address.toString()
-    );
-  });
 });
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AddressPicker.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AddressPicker.spec.js.snap
@@ -11,49 +11,9 @@ exports[`AddressPicker > renders the AddressPicker component 1`] = `
     role="button"
     tabindex="0"
   >
-    <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button"
-      disabled=""
-      type="button"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
-        />
-      </svg>
-      
-       
-      
-    </button>
-     
-    <p
-      class="address-picker__current-address"
-    >
-      2zFZwXf4JEvD2Vmd4k...sxoZdnpLPSNRqzqmai
-    </p>
-     
-    <button
-      aria-label="Copy Address"
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button address-picker__copy-address-button"
-      type="button"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        />
-      </svg>
-      
-       
-      
-    </button>
+    <span>
+      Default Profile
+    </span>
   </div>
    
 </div>
@@ -70,49 +30,9 @@ exports[`AddressPicker > should be able to render the component if the current p
     role="button"
     tabindex="0"
   >
-    <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button"
-      disabled=""
-      type="button"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
-        />
-      </svg>
-      
-       
-      
-    </button>
-     
-    <p
-      class="address-picker__current-address"
-    >
-      
-    </p>
-     
-    <button
-      aria-label="Copy Address"
-      class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button address-picker__copy-address-button"
-      type="button"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-        />
-      </svg>
-      
-       
-      
-    </button>
+    <span>
+      Default Profile
+    </span>
   </div>
    
 </div>