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

Issue:
web-wallet: Remove Swap to nDUSK step (Create Wallet flow)



Discussion / hints:

Fix patch:
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 536be25a46..6aaf0a12ef 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- Remove "Swap to nDUSK" step (Create Wallet flow) [#3333]
+
 ### Fixed
 
 ## [1.0.0] - 2024-12-23
@@ -503,6 +505,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3267]: https://github.com/dusk-network/rusk/issues/3267
 [#3270]: https://github.com/dusk-network/rusk/issues/3270
 [#3287]: https://github.com/dusk-network/rusk/issues/3287
+[#3333]: https://github.com/dusk-network/rusk/issues/3333
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
index 903e82d364..3fea8663f2 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
+++ b/web-wallet/src/routes/(welcome)/setup/create/+page.svelte
@@ -14,7 +14,6 @@
   import MnemonicPhrase from "./MnemonicPhrase.svelte";
   import MnemonicValidate from "./MnemonicValidate.svelte";
   import NetworkSync from "./NetworkSync.svelte";
-  import SwapNDUSK from "./SwapNDUSK.svelte";
   import AllSet from "../AllSet.svelte";
   import MnemonicPreSetup from "./MnemonicPreSetup.svelte";
   import PasswordSetup from "../PasswordSetup.svelte";
@@ -63,7 +62,7 @@
     <TermsOfService bind:tosAccepted />
   </div>
 {:else}
-  <Wizard fullHeight={true} steps={7} let:key>
+  <Wizard fullHeight={true} steps={6} let:key>
     <WizardStep
       step={0}
       {key}
@@ -140,17 +139,6 @@
         action: () => loginInfoStorage.remove(),
         disabled: false,
       }}
-    >
-      <h2 class="h1" slot="heading">
-        Swap ERC20<br />
-        to <mark>Native Dusk</mark>
-      </h2>
-      <SwapNDUSK />
-    </WizardStep>
-    <WizardStep
-      step={5}
-      {key}
-      showStepper={true}
       nextButton={{
         action: async () => {
           await initializeWallet(mnemonicPhrase.join(" "));
@@ -166,7 +154,7 @@
       <NetworkSync />
     </WizardStep>
     <WizardStep
-      step={6}
+      step={5}
       {key}
       showStepper={true}
       hideBackButton={true}
diff --git a/web-wallet/src/routes/(welcome)/setup/create/SwapNDUSK.svelte b/web-wallet/src/routes/(welcome)/setup/create/SwapNDUSK.svelte
deleted file mode 100644
index 62ace563ba..0000000000
--- a/web-wallet/src/routes/(welcome)/setup/create/SwapNDUSK.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { Button } from "$lib/dusk/components";
-  import { logo } from "$lib/dusk/icons";
-</script>
-
-<p>
-  The ERC20 token swap functionality is currently disabled and will be provided
-  after the launch of the Dusk mainnet.
-</p>
-<Button
-  disabled
-  icon={{ path: logo, position: "before" }}
-  text="Swap ERC20 to NDUSK"
-/>


Test patch:
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 96a72e77c4..0c81731ed8 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -21,7 +21,7 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 14.285714285714286%;"
+    style="--columns: 6; --progress-width: 16.666666666666668%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -60,12 +60,6 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -240,8 +234,6 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
   
    
   
-   
-  
 </div>
 `;
 
@@ -268,7 +260,7 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 28.571428571428573%;"
+    style="--columns: 6; --progress-width: 33.333333333333336%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -307,12 +299,6 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -659,8 +645,6 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
   
    
   
-   
-  
 </div>
 `;
 
@@ -687,7 +671,7 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 28.571428571428573%;"
+    style="--columns: 6; --progress-width: 33.333333333333336%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -726,12 +710,6 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -1115,8 +1093,6 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
   
    
   
-   
-  
 </div>
 `;
 
@@ -1143,7 +1119,7 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 28.571428571428573%;"
+    style="--columns: 6; --progress-width: 33.333333333333336%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -1182,12 +1158,6 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -1544,8 +1514,6 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
   
    
   
-   
-  
 </div>
 `;
 
@@ -1564,8 +1532,6 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
    
   
    
-  
-   
   <h2
     class="h1"
     slot="heading"
@@ -1580,7 +1546,7 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 85.71428571428571%;"
+    style="--columns: 6; --progress-width: 83.33333333333333%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -1611,18 +1577,12 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
     >
       5
        
-    </span>
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      6
-       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
-      7
+      6
        
     </span>
     
@@ -1711,8 +1671,6 @@ exports[`Create > ensures the Network Syncing step renders as expected 1`] = `
    
   
    
-  
-   
   <h2
     class="h1"
     slot="heading"
@@ -1727,7 +1685,7 @@ exports[`Create > ensures the Network Syncing step renders as expected 1`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 71.42857142857143%;"
+    style="--columns: 6; --progress-width: 66.66666666666667%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -1752,24 +1710,18 @@ exports[`Create > ensures the Network Syncing step renders as expected 1`] = `
     >
       4
        
-    </span>
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      5
-       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
-      6
+      5
        
     </span>
     <span
       class="dusk-stepper__step"
     >
-      7
+      6
        
     </span>
     
@@ -1951,7 +1903,7 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 42.857142857142854%;"
+    style="--columns: 6; --progress-width: 50%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -1990,12 +1942,6 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -2164,8 +2110,6 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
   
    
   
-   
-  
 </div>
 `;
 
@@ -2194,7 +2138,7 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 42.857142857142854%;"
+    style="--columns: 6; --progress-width: 50%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -2233,12 +2177,6 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -2372,172 +2310,6 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
   
    
   
-   
-  
-</div>
-`;
-
-exports[`Create > ensures the Swap To Native Dusk step renders as expected 1`] = `
-<div
-  class="dusk-wizard dusk-wizard--full-height"
->
-   
-  
-   
-  
-   
-  
-   
-  
-   
-  <h2
-    class="h1"
-    slot="heading"
-  >
-    Swap ERC20
-    <br />
-    
-        to 
-    <mark>
-      Native Dusk
-    </mark>
-  </h2>
-   
-  <div
-    class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 57.142857142857146%;"
-  >
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      1
-       
-    </span>
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      2
-       
-    </span>
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      3
-       
-    </span>
-    <span
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      4
-       
-    </span>
-    <span
-      aria-current="step"
-      class="dusk-stepper__step dusk-stepper__step--processed"
-    >
-      5
-       
-    </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      6
-       
-    </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
-    
-  </div>
-  
-   
-  <p>
-    The ERC20 token swap functionality is currently disabled and will be provided
-  after the launch of the Dusk mainnet.
-  </p>
-   
-  <button
-    class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default dusk-icon-button--labeled"
-    disabled=""
-    type="button"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--default dusk-button__icon"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M12.335 0.005a12.186 12.186 0 0 0 -2.58 0.204C4.2 1.259 0 6.14 0 11.999 0 17.859 4.203 22.74 9.759 23.79c0.726 0.138 1.476 0.21 2.241 0.21 6.789 0 12.261 -5.64 11.991 -12.49C23.741 5.249 18.599 0.173 12.335 0.005Zm0.207 21.58c-0.204 0.012 -0.336 -0.222 -0.21 -0.384 1.974 -2.541 3.153 -5.733 3.153 -9.202 0 -3.468 -1.176 -6.663 -3.153 -9.202 -0.126 -0.162 0.003 -0.396 0.207 -0.384 5.052 0.282 9.06 4.465 9.06 9.586 0 5.121 -4.005 9.304 -9.057 9.586Z"
-      />
-    </svg>
-    
-     
-    <span
-      class="dusk-button__text"
-    >
-      Swap ERC20 to NDUSK
-    </span>
-    
-  </button>
-   
-  <div
-    class="dusk-wizard__step-navigation"
-  >
-    <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
-      type="button"
-    >
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-        />
-      </svg>
-      
-       
-      <span
-        class="dusk-button__text"
-      >
-        Back
-      </span>
-      
-    </button>
-    
-     
-    <button
-      class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--default dusk-icon-button--labeled"
-      type="button"
-    >
-      <span
-        class="dusk-button__text"
-      >
-        Next
-      </span>
-       
-      <svg
-        class="dusk-icon dusk-icon--size--default dusk-button__icon"
-        role="graphics-symbol"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
-        />
-      </svg>
-      
-    </button>
-  </div>
-  
-  
-   
-  
-   
-  
 </div>
 `;
 
@@ -2564,7 +2336,7 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 28.571428571428573%;"
+    style="--columns: 6; --progress-width: 33.333333333333336%;"
   >
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
@@ -2603,12 +2375,6 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -2965,8 +2731,6 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
   
    
   
-   
-  
 </div>
 `;
 
@@ -2989,7 +2753,7 @@ exports[`Create > should render the \`Securely store your mnemonic phrase!\` agr
    
   <div
     class="dusk-stepper dusk-stepper--variant--secondary"
-    style="--columns: 7; --progress-width: 0%;"
+    style="--columns: 6; --progress-width: 0%;"
   >
     <span
       aria-current="step"
@@ -3028,12 +2792,6 @@ exports[`Create > should render the \`Securely store your mnemonic phrase!\` agr
       6
        
     </span>
-    <span
-      class="dusk-stepper__step"
-    >
-      7
-       
-    </span>
     
   </div>
   
@@ -3198,8 +2956,6 @@ exports[`Create > should render the \`Securely store your mnemonic phrase!\` agr
   
    
   
-   
-  
 </div>
 `;
 
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js b/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
index 9712a27bd7..382a4b827e 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/page.spec.js
@@ -282,31 +282,6 @@ describe("Create", async () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("ensures the Swap To Native Dusk step renders as expected", async () => {
-    const { container, getByRole, getAllByRole } = render(Create);
-
-    await fireEvent.click(getByRole("button", { name: "Accept" }));
-
-    await fireEvent.click(getAllByRole("checkbox")[0]);
-    await fireEvent.click(getAllByRole("checkbox")[1]);
-
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-
-    const mnemonicSplit = mnemonic.split(" ");
-
-    mnemonicSplit.forEach(async (word) => {
-      await fireEvent.click(getByRole("button", { name: word }));
-    });
-
-    await tick();
-
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it("ensures the Network Syncing step renders as expected", async () => {
     const { container, getByRole, getAllByRole } = render(Create);
 
@@ -326,7 +301,6 @@ describe("Create", async () => {
 
     await tick();
 
-    await fireEvent.click(getByRole("button", { name: "Next" }));
     await fireEvent.click(getByRole("button", { name: "Next" }));
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
@@ -359,7 +333,6 @@ describe("Create", async () => {
     await fireEvent.click(getByRole("button", { name: "Next" }));
     await fireEvent.click(getByRole("button", { name: "Next" }));
     await fireEvent.click(getByRole("button", { name: "Next" }));
-    await fireEvent.click(getByRole("button", { name: "Next" }));
 
     expect(container.firstChild).toMatchSnapshot();
 
@@ -411,9 +384,6 @@ describe("Create", async () => {
 
     expect(loginInfoStorage.get()).toBeNull();
 
-    // Swap ERC20 to Native Dusk step
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-
     // Network Syncing step
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
@@ -484,9 +454,6 @@ describe("Create", async () => {
       expect(loginInfoStorage.get()).not.toBeNull();
     });
 
-    // Swap ERC20 to Native Dusk step
-    await fireEvent.click(getByRole("button", { name: "Next" }));
-
     // Network Syncing step
     await fireEvent.click(getByRole("button", { name: "Next" }));