Repository: dusk-network/rusk (language: rust)

Issue:
web-wallet: Improve Address Display in Address Picker to Include Moonlight Addresses
**Description:**  
Currently, the Address Picker displays only the Phoenix address by default. With the recent introduction of Moonlight, which will likely be used more frequently, it may no longer be sensible to display only the Phoenix address. We need to revisit the approach for the Address Picker to better accommodate both Phoenix and Moonlight addresses.

**Potential Approaches:**

1. **Hide Address Picker Temporarily:**  
   As a short-term measure, hide the Address Picker altogether.  
   - Addresses (Phoenix and Moonlight) can be accessed through the Receive view.
   - This ensures users can still retrieve their addresses with minimal confusion.

2. **Show Both Phoenix and Moonlight Addresses:**  
   Adjust the Address Picker to display both Phoenix and Moonlight addresses simultaneously.  
   - Users can quickly choose which address to copy.
   - Ensures immediate visibility and reduces friction when switching between address types.

**Acceptance Criteria:**

- [ ] Decide on the approach: hide the picker or display both addresses.
- [ ] If hiding the picker, ensure the Receive view is clearly accessible and well-documented.
- [ ] If displaying both addresses, ensure they are clearly labeled and user-friendly.
- [ ] Update documentation, tooltips, and UI guides to reflect the chosen approach.

**Additional Notes:**  
If we opt for the temporary solution (hiding the picker), consider planning a follow-up improvement to reintroduce the picker with both addresses displayed. This will prevent relying on a hidden state as a permanent workaround.


Discussion / hints:

Fix patch:
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 09b7fb56b2..896c01ca4f 100644
--- 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
index 901240841d..cdef2b1d6a 100644
--- 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}


Test patch:
diff --git a/web-wallet/src/lib/components/__tests__/AddressPicker.spec.js b/web-wallet/src/lib/components/__tests__/AddressPicker.spec.js
index 71ca734f0e..2b68f52451 100644
--- 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
index 008695bf84..2cf9e7c4bc 100644
--- 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>
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index fe01f76c7c..0d8d626a0a 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -25,49 +25,9 @@ exports[`Dashboard Layout > should render the dashboard layout 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>
@@ -291,49 +251,9 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
         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>
@@ -557,49 +477,9 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
           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>
@@ -844,49 +724,9 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
         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>
@@ -1118,49 +958,9 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
           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>