diff --git a/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
index 72c1d1414b..e46faafba8 100644
--- a/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
+++ b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
@@ -23,7 +23,7 @@ describe("AppAnchor", () => {
     const renderA = renderWithSimpleContent(AppAnchor, baseOptions);
     const anchorA = renderA.getByRole("link");
 
-    expect(renderA.container.firstChild).toMatchSnapshot();
+    expect(renderA.container).toMatchSnapshot();
     expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
     expect(anchorA).toHaveClass("foo bar");
     expect(anchorA).toHaveAttribute("id", baseProps.id);
diff --git a/web-wallet/src/lib/components/__tests__/Balance.spec.js b/web-wallet/src/lib/components/__tests__/Balance.spec.js
index b6c9b1c5a5..c163221287 100644
--- a/web-wallet/src/lib/components/__tests__/Balance.spec.js
+++ b/web-wallet/src/lib/components/__tests__/Balance.spec.js
@@ -20,14 +20,13 @@ describe("Balance", () => {
 
   it("renders the Balance component", () => {
     const { container } = render(Balance, baseOptions);
-
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should update the Balance component when the props change", async () => {
     const { container, rerender } = render(Balance, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({
       fiatCurrency: "EUR",
@@ -37,7 +36,7 @@ describe("Balance", () => {
       tokens: 4000000,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", async () => {
@@ -48,8 +47,8 @@ describe("Balance", () => {
     };
     const { container, rerender } = render(Balance, { ...baseOptions, props });
 
-    expect(container.firstChild).toHaveClass("foo bar");
-    expect(container.firstChild).toHaveAttribute("id", "balance");
+    expect(container.lastChild).toHaveClass("foo bar");
+    expect(container.lastChild).toHaveAttribute("id", "balance");
 
     await rerender({
       ...props,
@@ -57,8 +56,8 @@ describe("Balance", () => {
       id: "new-balance",
     });
 
-    expect(container.firstChild).toHaveClass("qux");
-    expect(container.firstChild).toHaveAttribute("id", "new-balance");
+    expect(container.lastChild).toHaveClass("qux");
+    expect(container.lastChild).toHaveAttribute("id", "new-balance");
   });
 
   it("should not display the fiat value if the fiat price is `undefined`", () => {
@@ -66,7 +65,8 @@ describe("Balance", () => {
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
-    expect(container.firstChild).toMatchSnapshot();
+
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display the fiat value if there are no tokens", () => {
@@ -74,7 +74,7 @@ describe("Balance", () => {
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should display the usage indicator if there are shielded tokens", () => {
@@ -82,7 +82,7 @@ describe("Balance", () => {
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__usage")).toBeInTheDocument();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display the usage indicator if there are no shielded tokens", () => {
@@ -92,6 +92,6 @@ describe("Balance", () => {
     expect(
       container.querySelector(".dusk-balance__usage")
     ).not.toBeInTheDocument();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js b/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js
index 3eb707ff91..896f29a250 100644
--- a/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js
+++ b/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js
@@ -48,7 +48,7 @@ describe("ContractOperations", () => {
   it("should render the `ContractOperations` component", () => {
     const { container } = render(ContractOperations, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the component without items", () => {
@@ -58,7 +58,7 @@ describe("ContractOperations", () => {
     };
     const { container } = render(ContractOperations, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should use a default icon if the operation is not on the known list", () => {
@@ -75,7 +75,7 @@ describe("ContractOperations", () => {
     };
     const { container } = render(ContractOperations, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('should dispatch a "operationChange" event when a operation button is clicked', () => {
diff --git a/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js b/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js
index 9a1ad3802e..9aa47986e1 100644
--- a/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js
+++ b/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js
@@ -30,7 +30,7 @@ describe("ContractStatusesList", () => {
   it("should render the `ContractStatusesList` component", () => {
     const { container } = render(ContractStatusesList, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the component without items", () => {
@@ -43,6 +43,6 @@ describe("ContractStatusesList", () => {
       props,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
index 03edd46600..2049fbf5d1 100644
--- a/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
+++ b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
@@ -45,7 +45,7 @@ describe("DashboardNav", () => {
   it("renders the DashboardNav component", () => {
     const { container } = render(DashboardNav, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", async () => {
@@ -58,14 +58,14 @@ describe("DashboardNav", () => {
       props,
     });
 
-    expect(container.firstChild).toHaveClass("foo bar");
+    expect(container.lastChild).toHaveClass("foo bar");
 
     await rerender({
       ...props,
       className: "qux",
     });
 
-    expect(container.firstChild).toHaveClass("qux");
+    expect(container.lastChild).toHaveClass("qux");
   });
 
   it("should not display icons if the item's icons array is undefined", () => {
@@ -77,7 +77,7 @@ describe("DashboardNav", () => {
       )
     ).toBeNull();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display icons if the item's icon array is empty", () => {
@@ -89,7 +89,7 @@ describe("DashboardNav", () => {
       )
     ).toBeNull();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should display icons if the item's icon array is present", () => {
@@ -101,6 +101,6 @@ describe("DashboardNav", () => {
       )
     ).toBeTruthy();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/GasSettings.spec.js b/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
index 0ab04e5bb3..eebb7e1063 100644
--- a/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
+++ b/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
@@ -32,7 +32,7 @@ describe("GasSettings", () => {
   it("renders the GasSettings component closed", () => {
     const { container } = render(GasSettings, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("renders the GasSettings component opened", async () => {
@@ -42,7 +42,7 @@ describe("GasSettings", () => {
 
     await fireEvent.click(next);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('checks "gasSettings" event is dispatched on click with the correct event data', async () => {
diff --git a/web-wallet/src/lib/components/__tests__/OperationResult.spec.js b/web-wallet/src/lib/components/__tests__/OperationResult.spec.js
index 0c058938ad..275a05b982 100644
--- a/web-wallet/src/lib/components/__tests__/OperationResult.spec.js
+++ b/web-wallet/src/lib/components/__tests__/OperationResult.spec.js
@@ -30,7 +30,7 @@ describe("OperationResult", () => {
   it("should be able to render the `OperationResult` component in a pending state", () => {
     const { container } = render(OperationResult, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the pending state", () => {
@@ -40,7 +40,7 @@ describe("OperationResult", () => {
     };
     const { container } = render(OperationResult, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the `OperationResult` in a successful state", async () => {
@@ -48,7 +48,7 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the successful state", async () => {
@@ -61,7 +61,7 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should call the `onBeforeLeave` function when the home button is clicked", async () => {
@@ -86,7 +86,7 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the failure state", async () => {
@@ -100,6 +100,6 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/ScanQR.spec.js b/web-wallet/src/lib/components/__tests__/ScanQR.spec.js
index 1767b6b980..c845d866ec 100644
--- a/web-wallet/src/lib/components/__tests__/ScanQR.spec.js
+++ b/web-wallet/src/lib/components/__tests__/ScanQR.spec.js
@@ -18,6 +18,6 @@ describe("ScanQR", () => {
   it("renders the ScanQR component", () => {
     const { container } = render(ScanQR, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
index f8a4b95545..279bc928fb 100644
--- a/web-wallet/src/lib/components/__tests__/Stake.spec.js
+++ b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -88,7 +88,7 @@ describe("Stake", () => {
 
     const { container } = render(Stake, options);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render the Stake component", () => {
@@ -101,7 +101,7 @@ describe("Stake", () => {
       baseProps.minAllowedStake.toString()
     );
     expect(amountInput.getAttribute("max")).toBe(maxSpendable.toString());
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should disable the next button if the stake amount is invalid on mount", async () => {
@@ -161,7 +161,7 @@ describe("Stake", () => {
 
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   describe("Stake operation", () => {
diff --git a/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js b/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js
index 70c41c7be6..20d6455ce3 100644
--- a/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js
+++ b/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js
@@ -25,19 +25,19 @@ describe("UsageIndicator", () => {
     const { container, rerender } = render(UsageIndicator, baseOptions);
 
     expect(getPercentages()).toStrictEqual(["45", "55"]);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ value: 80 });
 
     expect(getPercentages()).toStrictEqual(["80", "20"]);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept additional class names", () => {
     const props = { ...baseProps, className: "foo bar" };
     const { container } = render(UsageIndicator, { ...baseOptions, props });
 
-    expect(container.firstChild).toHaveClass("usage-indicator foo bar");
+    expect(container.lastChild).toHaveClass("usage-indicator foo bar");
   });
 
   it("should round decimal values at two decimals", async () => {
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
index 9aab49960c..0f94281599 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
@@ -1,13 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppAnchor > should render an \`Anchor\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
-<a
-  class="dusk-anchor dusk-anchor--on-surface foo bar"
-  href="/some-base-path/setup"
-  id="some-id"
->
-  <span>
-    some text
-  </span>
-</a>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <a
+    class="dusk-anchor dusk-anchor--on-surface foo bar"
+    href="/some-base-path/setup"
+    id="some-id"
+  >
+    <span>
+      some text
+    </span>
+  </a>
+  
+</body>
 `;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
index b084dcf1d2..bfa95a53fa 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
@@ -2,6 +2,12 @@
 
 exports[`GasControls > should render the \`GasControls\` component 1`] = `
 <body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
   <label
     class="gas-control svelte-14slcjg"
   >
diff --git a/web-wallet/src/lib/dusk/components/__tests__/AnchorButton.spec.js b/web-wallet/src/lib/dusk/components/__tests__/AnchorButton.spec.js
index 092f84d019..c98d49faeb 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/AnchorButton.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/AnchorButton.spec.js
@@ -20,7 +20,7 @@ describe("AnchorButton", () => {
   it("should render the AnchorButton component", () => {
     const { container } = render(AnchorButton, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should add a disabled class if the related property is `true`", () => {
@@ -30,7 +30,7 @@ describe("AnchorButton", () => {
     };
     const { container } = render(AnchorButton, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", () => {
@@ -41,7 +41,7 @@ describe("AnchorButton", () => {
     };
     const { container } = render(AnchorButton, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render a AnchorButton without a text", () => {
@@ -51,7 +51,7 @@ describe("AnchorButton", () => {
     };
     const { container } = render(AnchorButton, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render a AnchorButton with an icon and text", () => {
@@ -65,7 +65,7 @@ describe("AnchorButton", () => {
       };
       const { container } = render(AnchorButton, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
   });
 
@@ -81,7 +81,7 @@ describe("AnchorButton", () => {
       };
       const { container } = render(AnchorButton, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.lastChild).toMatchSnapshot();
     });
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Button.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Button.spec.js
index e236d59dfd..ef891ead51 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Button.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Button.spec.js
@@ -18,7 +18,7 @@ describe("Button", () => {
   it('should render the Button component using the type "button" as a default', () => {
     const { container } = render(Button, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render a button of the desired type", () => {
@@ -26,7 +26,7 @@ describe("Button", () => {
       const props = { ...baseProps, type };
       const { container } = render(Button, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.lastChild).toMatchSnapshot();
     });
   });
 
@@ -38,7 +38,7 @@ describe("Button", () => {
     };
     const { container } = render(Button, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render a button without a text", () => {
@@ -48,7 +48,7 @@ describe("Button", () => {
     };
     const { container } = render(Button, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render a button with an icon and text", () => {
@@ -62,7 +62,7 @@ describe("Button", () => {
       };
       const { container } = render(Button, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
   });
 
@@ -78,7 +78,7 @@ describe("Button", () => {
       };
       const { container } = render(Button, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.lastChild).toMatchSnapshot();
     });
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/ErrorAlert.spec.js b/web-wallet/src/lib/dusk/components/__tests__/ErrorAlert.spec.js
index d2cdb9cbf9..962a0b6730 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/ErrorAlert.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/ErrorAlert.spec.js
@@ -19,7 +19,7 @@ describe("ErrorAlert", () => {
   it("should render the `ErrorAlert` component", () => {
     const { container } = render(ErrorAlert, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", () => {
@@ -31,6 +31,6 @@ describe("ErrorAlert", () => {
     };
     const { container } = render(ErrorAlert, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/ErrorDetails.spec.js b/web-wallet/src/lib/dusk/components/__tests__/ErrorDetails.spec.js
index 55a36db21b..c56705db90 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/ErrorDetails.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/ErrorDetails.spec.js
@@ -19,7 +19,7 @@ describe("ErrorDetails", () => {
   it("should render the `ErrorDetails` component", () => {
     const { container } = render(ErrorDetails, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should pass additional class names to the rendered element", () => {
@@ -29,7 +29,7 @@ describe("ErrorDetails", () => {
     };
     const { container } = render(ErrorDetails, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should render nothing if the error is `null`", () => {
@@ -39,6 +39,6 @@ describe("ErrorDetails", () => {
     };
     const { container } = render(ErrorDetails, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/ExclusiveChoice.spec.js b/web-wallet/src/lib/dusk/components/__tests__/ExclusiveChoice.spec.js
index 4f7bc89ef0..929cd52ecf 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/ExclusiveChoice.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/ExclusiveChoice.spec.js
@@ -50,7 +50,7 @@ describe("ExclusiveChoice", () => {
   it("should render the `ExclusiveChoice` component", () => {
     const { container } = render(ExclusiveChoice, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom name for the radio elements", () => {
@@ -60,7 +60,7 @@ describe("ExclusiveChoice", () => {
     };
     const { container } = render(ExclusiveChoice, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an array of options object without labels and use the value as labels", () => {
@@ -70,7 +70,7 @@ describe("ExclusiveChoice", () => {
     };
     const { container } = render(ExclusiveChoice, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an array of string as options", () => {
@@ -80,7 +80,7 @@ describe("ExclusiveChoice", () => {
     };
     const { container } = render(ExclusiveChoice, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", () => {
@@ -91,7 +91,7 @@ describe("ExclusiveChoice", () => {
     };
     const { container } = render(ExclusiveChoice, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a change event handler", async () => {
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Icon.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Icon.spec.js
index ef0b5cb535..3fac486ec4 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Icon.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Icon.spec.js
@@ -17,7 +17,7 @@ describe("Icon", () => {
   it("should render the Icon component", () => {
     const { container } = render(Icon, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should accept a custom role for the SVG component", () => {
@@ -27,7 +27,7 @@ describe("Icon", () => {
     };
     const { container } = render(Icon, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should render the icon inside a `g` element if it's part of a stack", () => {
@@ -37,7 +37,7 @@ describe("Icon", () => {
     };
     const { container } = render(Icon, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", async () => {
@@ -47,18 +47,19 @@ describe("Icon", () => {
       "data-baz": "baz",
     };
     const { container, rerender } = render(Icon, { ...baseOptions, props });
-    const icon = container.firstChild;
 
-    expect(icon).toHaveClass("foo bar");
-    expect(icon).toHaveAttribute("data-baz", "baz");
-    expect(icon).toMatchSnapshot();
+    expect(container.querySelector(".foo.bar")).toHaveClass("foo bar");
+    expect(
+      container.querySelectorAll('[data-baz="baz"]').item(0)
+    ).toHaveAttribute("data-baz", "baz");
+    expect(container.querySelectorAll('[data-baz="baz"]')).toMatchSnapshot();
 
     await rerender({ ...props, isInStack: true });
 
-    const icon2 = container.firstChild;
-
-    expect(icon2).toHaveClass("foo bar");
-    expect(icon2).toHaveAttribute("data-baz", "baz");
-    expect(icon2).toMatchSnapshot();
+    expect(container.querySelector(".foo.bar")).toHaveClass("foo bar");
+    expect(
+      container.querySelectorAll('[data-baz="baz"]').item(0)
+    ).toHaveAttribute("data-baz", "baz");
+    expect(container.querySelectorAll('[data-baz="baz"]')).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/QrCode.spec.js b/web-wallet/src/lib/dusk/components/__tests__/QrCode.spec.js
index 26344fc853..96c3b5620c 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/QrCode.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/QrCode.spec.js
@@ -16,6 +16,6 @@ describe("QrCode", () => {
   it("should render the QrCode component", () => {
     const { container } = render(QrCode, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Select.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Select.spec.js
index dbea332e41..384d9cd554 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Select.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Select.spec.js
@@ -46,7 +46,7 @@ describe("Select", () => {
   it("should render the Select component", () => {
     const { container } = render(Select, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a change event handler", async () => {
@@ -79,7 +79,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an array of objects as options", () => {
@@ -89,7 +89,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should use the value as label if an object is missing it", () => {
@@ -100,7 +100,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an empty string as label and use it instead of falling back to the value", () => {
@@ -111,7 +111,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an array of strings as `options` and use each string as both label and value", () => {
@@ -121,7 +121,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a grouped object as `options` and create option groups", () => {
@@ -131,7 +131,7 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept an array of string as values of a grouped object", () => {
@@ -141,6 +141,6 @@ describe("Select", () => {
     };
     const { container } = render(Select, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
index 4630d1063d..2600dcf11e 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
@@ -39,22 +39,22 @@ describe("Stepper", () => {
   it("should render the `Stepper` component accepting an array of `StepperStep` objects as steps", async () => {
     const { container, rerender } = render(Stepper, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ ...baseProps, activeStep: 3 });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render the `Stepper` component accepting a number as the amount of steps", async () => {
     const props = { ...baseProps, steps: 5 };
     const { container, rerender } = render(Stepper, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ ...baseProps, activeStep: 3 });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", () => {
@@ -65,7 +65,7 @@ describe("Stepper", () => {
     };
     const { container } = render(Stepper, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should add the proper class name for the desired variant", () => {
@@ -77,7 +77,7 @@ describe("Stepper", () => {
     };
     const { container } = render(Stepper, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should allow to hide the step numbers", () => {
@@ -87,6 +87,6 @@ describe("Stepper", () => {
     };
     const { container } = render(Stepper, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Suspense.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Suspense.spec.js
index 48aa1d61c8..c2ae387700 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Suspense.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Suspense.spec.js
@@ -24,7 +24,7 @@ describe("Suspense", () => {
   it("should be able to render the `Suspense` component in a pending state", () => {
     const { container } = render(Suspense, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", () => {
@@ -36,7 +36,7 @@ describe("Suspense", () => {
     };
     const { container } = render(Suspense, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should add appropriate class names for gap variants", async () => {
@@ -47,11 +47,11 @@ describe("Suspense", () => {
     };
     const { container, rerender } = render(Suspense, { ...baseOptions, props });
 
-    expect(container.firstChild).toHaveClass("dusk-suspense--small-gap");
+    expect(container.lastChild).toHaveClass("dusk-suspense--small-gap");
 
     await rerender({ ...props, gap: "large" });
 
-    expect(container.firstChild).toHaveClass("dusk-suspense--large-gap");
+    expect(container.lastChild).toHaveClass("dusk-suspense--large-gap");
   });
 
   it("should accept a custom message for the pending state", () => {
@@ -61,7 +61,7 @@ describe("Suspense", () => {
     };
     const { container } = render(Suspense, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the `Suspense` in a successful state", async () => {
@@ -69,7 +69,7 @@ describe("Suspense", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('should be able to render the `Suspense` in a failure state with the "alert" variant as a default', async () => {
@@ -82,7 +82,7 @@ describe("Suspense", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('should be able to render the `Suspense` in a failure state with the "details" error variant', async () => {
@@ -97,7 +97,7 @@ describe("Suspense", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the failure state", async () => {
@@ -111,6 +111,6 @@ describe("Suspense", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Switch.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Switch.spec.js
index d7702cb1de..b5217799c0 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Switch.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Switch.spec.js
@@ -16,11 +16,11 @@ describe("Switch", () => {
   it('should render the "Switch" component with a default tab index of `0`', async () => {
     const { container, rerender } = render(Switch, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ ...baseProps, value: true });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should use the received tab index", () => {
@@ -30,7 +30,7 @@ describe("Switch", () => {
     };
     const { container } = render(Switch, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render the component in a disabled status with a tabindex of `-1`", async () => {
@@ -41,11 +41,11 @@ describe("Switch", () => {
     };
     const { container, rerender } = render(Switch, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ ...props, value: true });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the root element", () => {
@@ -56,7 +56,7 @@ describe("Switch", () => {
     };
     const { container } = render(Switch, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   describe("Event handlers", () => {
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Tabs.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Tabs.spec.js
index 4adb657f74..5ee44bf5d2 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Tabs.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Tabs.spec.js
@@ -121,7 +121,7 @@ describe("Tabs", () => {
 
     expect(tabsList.scrollTo).toHaveBeenCalledTimes(1);
     expect(tabsList.scrollTo).toHaveBeenCalledWith(0, 0);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should scroll the selected tab into view if there's a selection", async () => {
@@ -140,7 +140,7 @@ describe("Tabs", () => {
       items: itemsWithTextAndIcon,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render tabs with icons only", async () => {
@@ -149,7 +149,7 @@ describe("Tabs", () => {
       items: itemsWithIcon,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should use the id as label if the tab hasn't one and is without icon", async () => {
@@ -158,7 +158,7 @@ describe("Tabs", () => {
       items: itemsWithIdOnly,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should observe the tab list resize on mounting and stop observing when unmounting", async () => {
@@ -185,7 +185,7 @@ describe("Tabs", () => {
       id: "some-id",
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should fire a change event when a tab is selected and it's not the current selection", async () => {
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Textbox.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Textbox.spec.js
index b407ba4742..efbd5d97d9 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Textbox.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Textbox.spec.js
@@ -15,7 +15,7 @@ describe("Textbox", () => {
   it('should render a Textbox of type "text" as a default', () => {
     const { container } = render(Textbox, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should render a Textbox component of the desired type", () => {
@@ -36,7 +36,7 @@ describe("Textbox", () => {
       };
       const { container } = render(Textbox, { ...baseOptions, props });
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
 
       cleanup();
     });
@@ -51,7 +51,7 @@ describe("Textbox", () => {
     };
     const { container } = render(Textbox, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("should change value before forwarding the `input` event", async () => {
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Throbber.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Throbber.spec.js
index 5270afb113..4d797c38c4 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Throbber.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Throbber.spec.js
@@ -15,7 +15,7 @@ describe("Throbber", () => {
   it("should render the Throbber component", () => {
     const { container } = render(Throbber, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names to the rendered element", () => {
@@ -25,7 +25,7 @@ describe("Throbber", () => {
     };
     const { container } = render(Throbber, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom duration and size", () => {
@@ -36,6 +36,6 @@ describe("Throbber", () => {
     };
     const { container } = render(Throbber, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
index 14595409e7..851b694499 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/AnchorButton.spec.js.snap
@@ -17,81 +17,177 @@ exports[`AnchorButton > should add a disabled class if the related property is \
 `;
 
 exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 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-url"
->
-  <span
-    class="dusk-anchor-button__text"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <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-url"
   >
-    some text
-  </span>
-   
-  <svg
-    class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
-    />
-  </svg>
-  
-  
-</a>
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+     
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+    
+  </a>
+</body>
 `;
 
 exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 2`] = `
-<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-url"
->
-  <span
-    class="dusk-anchor-button__text"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <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-url"
   >
-    some text
-  </span>
-   
-  <svg
-    class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+     
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+    
+  </a>
+  <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-url"
   >
-    <path
-      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
-    />
-  </svg>
-  
-  
-</a>
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+     
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+    
+    
+  </a>
+</body>
 `;
 
 exports[`AnchorButton > should be able to render a AnchorButton with an icon and text 3`] = `
-<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-url"
->
-  <span
-    class="dusk-anchor-button__text"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <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-url"
   >
-    some text
-  </span>
-   
-  <svg
-    class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+     
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+    
+  </a>
+  <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-url"
   >
-    <path
-      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
-    />
-  </svg>
-  
-  
-</a>
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+     
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+    
+    
+  </a>
+  <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-url"
+  >
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+     
+    <span
+      class="dusk-anchor-button__text"
+    >
+      some text
+    </span>
+    
+    
+  </a>
+</body>
 `;
 
 exports[`AnchorButton > should be able to render a AnchorButton with an icon only 1`] = `
@@ -121,7 +217,6 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon onl
   class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--default dusk-icon-button"
   href="/some-url"
 >
-   
   <svg
     class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
     role="graphics-symbol"
@@ -132,6 +227,8 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon onl
     />
   </svg>
   
+   
+  
   
 </a>
 `;
@@ -142,7 +239,6 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon onl
   class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--primary dusk-anchor-button--size--default dusk-icon-button"
   href="/some-url"
 >
-   
   <svg
     class="dusk-icon dusk-icon--size--default dusk-anchor-button__icon"
     role="graphics-symbol"
@@ -153,6 +249,8 @@ exports[`AnchorButton > should be able to render a AnchorButton with an icon onl
     />
   </svg>
   
+   
+  
   
 </a>
 `;
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Button.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Button.spec.js.snap
index c004221301..cc8371c9fb 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Button.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Button.spec.js.snap
@@ -1,51 +1,89 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > should be able to render a button with an icon and text 1`] = `
-<button
-  class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
-  type="button"
->
-  <span
-    class="dusk-button__text"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <button
+    class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
+    type="button"
   >
-    some text
-  </span>
-   
-  <svg
-    class="dusk-icon dusk-icon--size--default dusk-button__icon"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
-    />
-  </svg>
-  
-</button>
+    <span
+      class="dusk-button__text"
+    >
+      some text
+    </span>
+     
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+  </button>
+</body>
 `;
 
 exports[`Button > should be able to render a button with an icon and text 2`] = `
-<button
-  class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
-  type="button"
->
-  <span
-    class="dusk-button__text"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <button
+    class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
+    type="button"
   >
-    some text
-  </span>
-   
-  <svg
-    class="dusk-icon dusk-icon--size--default dusk-button__icon"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
+    <span
+      class="dusk-button__text"
+    >
+      some text
+    </span>
+     
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+  </button>
+  <button
+    class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
+    type="button"
   >
-    <path
-      d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
-    />
-  </svg>
-  
-</button>
+    <svg
+      class="dusk-icon dusk-icon--size--default dusk-button__icon"
+      role="graphics-symbol"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+      />
+    </svg>
+    
+     
+    <span
+      class="dusk-button__text"
+    >
+      some text
+    </span>
+    
+  </button>
+</body>
 `;
 
 exports[`Button > should be able to render a button with an icon only 1`] = `
@@ -72,7 +110,6 @@ exports[`Button > should be able to render a button with an icon only 2`] = `
   class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button"
   type="button"
 >
-   
   <svg
     class="dusk-icon dusk-icon--size--default dusk-button__icon"
     role="graphics-symbol"
@@ -83,6 +120,8 @@ exports[`Button > should be able to render a button with an icon only 2`] = `
     />
   </svg>
   
+   
+  
 </button>
 `;
 
@@ -115,8 +154,8 @@ exports[`Button > should render a button of the desired type 1`] = `
 
 exports[`Button > should render a button of the desired type 2`] = `
 <button
-  class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
-  type="button"
+  class="dusk-button dusk-button--type--reset dusk-button--variant--primary dusk-button--size--default"
+  type="reset"
 >
   <span
     class="dusk-button__text"
@@ -128,8 +167,8 @@ exports[`Button > should render a button of the desired type 2`] = `
 
 exports[`Button > should render a button of the desired type 3`] = `
 <button
-  class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
-  type="button"
+  class="dusk-button dusk-button--type--submit dusk-button--variant--primary dusk-button--size--default"
+  type="submit"
 >
   <span
     class="dusk-button__text"
@@ -141,7 +180,8 @@ exports[`Button > should render a button of the desired type 3`] = `
 
 exports[`Button > should render a button of the desired type 4`] = `
 <button
-  class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
+  aria-pressed="false"
+  class="dusk-button dusk-button--type--toggle dusk-button--variant--primary dusk-button--size--default"
   type="button"
 >
   <span
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/ErrorDetails.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/ErrorDetails.spec.js.snap
index 1a7c2ef12b..1accff3f07 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/ErrorDetails.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/ErrorDetails.spec.js.snap
@@ -1,45 +1,63 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ErrorDetails > should pass additional class names to the rendered element 1`] = `
-<details
-  class="dusk-error-details dusk-error-details__details foo bar"
->
-  <summary
-    class="dusk-error-details__summary"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <details
+    class="dusk-error-details dusk-error-details__details foo bar"
   >
-    Some error summary
-  </summary>
-   
-  <pre
-    class="dusk-error-details__error"
-  >
-    			
-    Some error messaage
-    
+    <summary
+      class="dusk-error-details__summary"
+    >
+      Some error summary
+    </summary>
+     
+    <pre
+      class="dusk-error-details__error"
+    >
+      			
+      Some error messaage
+      
 		
-  </pre>
-</details>
+    </pre>
+  </details>
+  
+</body>
 `;
 
 exports[`ErrorDetails > should render nothing if the error is \`null\` 1`] = ``;
 
 exports[`ErrorDetails > should render the \`ErrorDetails\` component 1`] = `
-<details
-  class="dusk-error-details dusk-error-details__details"
->
-  <summary
-    class="dusk-error-details__summary"
-  >
-    Some error summary
-  </summary>
-   
-  <pre
-    class="dusk-error-details__error"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <details
+    class="dusk-error-details dusk-error-details__details"
   >
-    			
-    Some error messaage
-    
+    <summary
+      class="dusk-error-details__summary"
+    >
+      Some error summary
+    </summary>
+     
+    <pre
+      class="dusk-error-details__error"
+    >
+      			
+      Some error messaage
+      
 		
-  </pre>
-</details>
+    </pre>
+  </details>
+  
+</body>
 `;
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Icon.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Icon.spec.js.snap
index 5e75f800ea..cb566023c0 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Icon.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Icon.spec.js.snap
@@ -1,61 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Icon > should accept a custom role for the SVG component 1`] = `
-<svg
-  class="dusk-icon dusk-icon--size--default"
-  role="presentation"
-  viewBox="0 0 24 24"
->
-  <path
-    d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
   />
-</svg>
+  <w3m-modal />
+  <svg
+    class="dusk-icon dusk-icon--size--default"
+    role="presentation"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+    />
+  </svg>
+  
+</body>
 `;
 
 exports[`Icon > should pass additional class names and attributes to the rendered element 1`] = `
-<svg
-  class="dusk-icon dusk-icon--size--default foo bar"
-  data-baz="baz"
-  role="graphics-symbol"
-  viewBox="0 0 24 24"
->
-  <path
-    d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
-  />
-</svg>
+NodeList [
+  <svg
+    class="dusk-icon dusk-icon--size--default foo bar"
+    data-baz="baz"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+    />
+  </svg>,
+]
 `;
 
 exports[`Icon > should pass additional class names and attributes to the rendered element 2`] = `
-<g
-  class="dusk-icon dusk-icon--size--default foo bar"
-  data-baz="baz"
->
-  <rect />
-  <path
-    d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
-  />
-</g>
+NodeList [
+  <g
+    class="dusk-icon dusk-icon--size--default foo bar"
+    data-baz="baz"
+  >
+    <rect />
+    <path
+      d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+    />
+  </g>,
+]
 `;
 
 exports[`Icon > should render the Icon component 1`] = `
-<svg
-  class="dusk-icon dusk-icon--size--default"
-  role="graphics-symbol"
-  viewBox="0 0 24 24"
->
-  <path
-    d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
   />
-</svg>
+  <w3m-modal />
+  <svg
+    class="dusk-icon dusk-icon--size--default"
+    role="graphics-symbol"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+    />
+  </svg>
+  
+</body>
 `;
 
 exports[`Icon > should render the icon inside a \`g\` element if it's part of a stack 1`] = `
-<g
-  class="dusk-icon dusk-icon--size--default"
->
-  <rect />
-  <path
-    d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
   />
-</g>
+  <w3m-modal />
+  <g
+    class="dusk-icon dusk-icon--size--default"
+  >
+    <rect />
+    <path
+      d="M3,3H21V21H3V3M5,5V19H19V5H5Z"
+    />
+  </g>
+  
+</body>
 `;
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/QrCode.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/QrCode.spec.js.snap
index c1fbdd9ab5..55ef970062 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/QrCode.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/QrCode.spec.js.snap
@@ -1,3 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`QrCode > should render the QrCode component 1`] = ``;
+exports[`QrCode > should render the QrCode component 1`] = `
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  
+</body>
+`;
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
index e0ac9f7bad..0aff7c632c 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
@@ -1,541 +1,106 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Stepper > should add the proper class name for the desired variant 1`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--secondary"
-  style="--columns: 5; --progress-width: 40%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    4
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
-  
-</div>
-`;
+exports[`Stepper > should add the proper class name for the desired variant 1`] = ``;
 
 exports[`Stepper > should allow to hide the step numbers 1`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary"
-  style="--columns: 5; --progress-width: 40%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <div
+    class="dusk-stepper dusk-stepper--variant--primary"
+    style="--columns: 5; --progress-width: 40%;"
+  >
+    <span
+      aria-labelledby="step-some-generated-id"
+      class="dusk-stepper__step dusk-stepper__step--processed"
     >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
-  
-</div>
-`;
-
-exports[`Stepper > should pass additional class names and attributes to the rendered element 1`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary foo bar"
-  id="some-id"
-  style="--columns: 5; --progress-width: 40%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    4
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
+      
+    </span>
+     
+    <span
+      class="dusk-stepper__step-label"
+      id="step-some-generated-id"
+    >
+      foo
+    </span>
+    <span
+      aria-labelledby="step-some-generated-id"
+      class="dusk-stepper__step dusk-stepper__step--processed"
+    >
+      
+    </span>
+     
+    <span
+      class="dusk-stepper__step-label"
+      id="step-some-generated-id"
+    >
+      bar
+    </span>
+    <span
+      aria-current="step"
+      aria-labelledby="step-some-generated-id"
+      class="dusk-stepper__step dusk-stepper__step--processed"
     >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
+      
+    </span>
+     
+    <span
+      class="dusk-stepper__step-label"
+      id="step-some-generated-id"
+    >
+      baz
+    </span>
+    <span
+      aria-labelledby="step-some-generated-id"
+      class="dusk-stepper__step"
+    >
+      
+    </span>
+     
+    <span
+      class="dusk-stepper__step-label"
+      id="step-some-generated-id"
+    >
+      qux
+    </span>
+    <span
+      aria-labelledby="step-some-generated-id"
+      class="dusk-stepper__step"
+    >
+      <svg
+        class="dusk-icon dusk-icon--size--default"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
+        />
+      </svg>
+      
+    </span>
+     
+    <span
+      class="dusk-stepper__step-label"
+      id="step-some-generated-id"
+    >
+      quux
+    </span>
     
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
+  </div>
   
-</div>
+</body>
 `;
 
-exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 1`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary"
-  style="--columns: 5; --progress-width: 40%;"
->
-  <span
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-  <span
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-  <span
-    aria-current="step"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-  <span
-    class="dusk-stepper__step"
-  >
-    4
-  </span>
-  <span
-    class="dusk-stepper__step"
-  >
-    5
-  </span>
-  
-</div>
-`;
+exports[`Stepper > should pass additional class names and attributes to the rendered element 1`] = ``;
 
-exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 2`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary"
-  style="--columns: 5; --progress-width: 60%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    4
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
-  
-</div>
-`;
+exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 1`] = ``;
 
-exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 1`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary"
-  style="--columns: 5; --progress-width: 40%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    4
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
-  
-</div>
-`;
+exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 2`] = ``;
 
-exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 2`] = `
-<div
-  class="dusk-stepper dusk-stepper--variant--primary"
-  style="--columns: 5; --progress-width: 60%;"
->
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    1
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    foo
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    2
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    bar
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    3
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    baz
-  </span>
-  <span
-    aria-current="step"
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step dusk-stepper__step--processed"
-  >
-    4
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    qux
-  </span>
-  <span
-    aria-labelledby="step-some-generated-id"
-    class="dusk-stepper__step"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"
-      />
-    </svg>
-    
-  </span>
-   
-  <span
-    class="dusk-stepper__step-label"
-    id="step-some-generated-id"
-  >
-    quux
-  </span>
-  
-</div>
-`;
+exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 1`] = ``;
+
+exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 2`] = ``;
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Textbox.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Textbox.spec.js.snap
index 853e5b42e2..8f55ca6ac9 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Textbox.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Textbox.spec.js.snap
@@ -1,79 +1,178 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Textbox > should pass additional class names and attributes to the rendered element 1`] = `
-<input
-  class="dusk-textbox dusk-textbox-text foo bar"
-  id="some-id"
-  type="text"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-text foo bar"
+    id="some-id"
+    type="text"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 1`] = `
-<input
-  class="dusk-textbox dusk-textbox-email"
-  type="email"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-email"
+    type="email"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 2`] = `
-<input
-  class="dusk-textbox dusk-textbox-hidden"
-  type="hidden"
-  value=""
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-hidden"
+    type="hidden"
+    value=""
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 3`] = `
-<textarea
-  class="dusk-textbox dusk-textbox-multiline"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <textarea
+    class="dusk-textbox dusk-textbox-multiline"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 4`] = `
-<input
-  class="dusk-textbox dusk-textbox-number"
-  type="number"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-number"
+    type="number"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 5`] = `
-<input
-  class="dusk-textbox dusk-textbox-password"
-  type="password"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-password"
+    type="password"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 6`] = `
-<input
-  class="dusk-textbox dusk-textbox-search"
-  type="search"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-search"
+    type="search"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 7`] = `
-<input
-  class="dusk-textbox dusk-textbox-tel"
-  type="tel"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-tel"
+    type="tel"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 8`] = `
-<input
-  class="dusk-textbox dusk-textbox-text"
-  type="text"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-text"
+    type="text"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox component of the desired type 9`] = `
-<input
-  class="dusk-textbox dusk-textbox-url"
-  type="url"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-url"
+    type="url"
+  />
+  
+</body>
 `;
 
 exports[`Textbox > should render a Textbox of type "text" as a default 1`] = `
-<input
-  class="dusk-textbox dusk-textbox-text"
-  type="text"
-/>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <input
+    class="dusk-textbox dusk-textbox-text"
+    type="text"
+  />
+  
+</body>
 `;
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
index f6a93f7fd6..e9e8faf5ad 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -129,6 +129,36 @@ exports[`Dashboard > should render a card when there is an error getting transac
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    
@@ -321,6 +351,36 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    
diff --git a/web-wallet/vite.config.js b/web-wallet/vite.config.js
index 7029f9f94c..f2f1b8c61b 100644
--- a/web-wallet/vite.config.js
+++ b/web-wallet/vite.config.js
@@ -49,6 +49,7 @@ export default defineConfig(({ mode }) => {
         TESTNET_PROVER_NODE: env.VITE_TESTNET_PROVER_NODE,
         TRANSFER_CONTRACT: env.VITE_TRANSFER_CONTRACT,
         VITE_CONTRACT_ALLOCATE_DISABLED: env.VITE_CONTRACT_ALLOCATE_DISABLED,
+        VITE_CONTRACT_MIGRATE_DISABLED: env.VITE_CONTRACT_MIGRATE_DISABLED,
         VITE_CONTRACT_STAKE_DISABLED: env.VITE_CONTRACT_STAKE_DISABLED,
         VITE_CONTRACT_TRANSFER_DISABLED: env.VITE_CONTRACT_TRANSFER_DISABLED,
         VITE_GAS_LIMIT_DEFAULT: env.VITE_GAS_LIMIT_DEFAULT,
@@ -98,6 +99,7 @@ export default defineConfig(({ mode }) => {
         TRANSFER_CONTRACT:
           "0100000000000000000000000000000000000000000000000000000000000000",
         VITE_CONTRACT_ALLOCATE_DISABLED: "false",
+        VITE_CONTRACT_MIGRATE_DISABLED: "false",
         VITE_CONTRACT_STAKE_DISABLED: "false",
         VITE_CONTRACT_TRANSFER_DISABLED: "false",
         VITE_GAS_LIMIT_DEFAULT: "20000000",