From 8839aad556d4ea8e5886ceaf6d1f5783909fdbb7 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Tue, 26 Nov 2024 13:58:01 +0200
Subject: [PATCH] web-wallet: Add "Reset Wallet" explanatory copy

Resolves #3061
---
 web-wallet/CHANGELOG.md                       |   3 +
 .../src/routes/(app)/settings/+page.svelte    |  38 +++--
 .../__tests__/__snapshots__/page.spec.js.snap | 153 +++++++++++-------
 3 files changed, 119 insertions(+), 75 deletions(-)

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index c25d63f19..b6ac1a99d 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add "Reset Wallet" explanatory copy (Settings) [#3061]
+
 ### Changed
 
 - Update Transactions list design [#1922]
@@ -377,6 +379,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3036]: https://github.com/dusk-network/rusk/issues/3036
 [#3042]: https://github.com/dusk-network/rusk/issues/3042
 [#3056]: https://github.com/dusk-network/rusk/issues/3056
+[#3061]: https://github.com/dusk-network/rusk/issues/3061
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
index 85c842286..6845f0e9e 100644
--- a/web-wallet/src/routes/(app)/settings/+page.svelte
+++ b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -175,22 +175,30 @@
     <article class="settings-group">
       <header class="settings-group__header">
         <Icon path={mdiRestoreAlert} />
-        <h3 class="h4 settings-group__heading">Danger zone</h3>
+        <h3 class="h4 settings-group__heading">Reset wallet</h3>
       </header>
-      <ErrorDetails
-        error={resetError}
-        summary="An error occurred while resetting the wallet. Please try again."
-      />
-      <Button
-        className="settings-group__button--state--danger"
-        disabled={syncStatus.isInProgress}
-        data-tooltip-disabled={!syncStatus.isInProgress}
-        data-tooltip-id="main-tooltip"
-        data-tooltip-text="Not allowed to reset while syncing"
-        data-tooltip-type="warning"
-        on:click={handleResetWalletClick}
-        text="Reset Wallet"
-      />
+      <div class="settings-group__multi-control-content">
+        <p>
+          Resetting your wallet clears the cache and restores default settings
+          without affecting your funds or transaction history. You’ll need your
+          mnemonic phrase to restore access, so ensure it’s securely stored
+          before proceeding.
+        </p>
+        <ErrorDetails
+          error={resetError}
+          summary="An error occurred while resetting the wallet. Please try again."
+        />
+        <Button
+          className="settings-group__button--state--danger"
+          disabled={syncStatus.isInProgress}
+          data-tooltip-disabled={!syncStatus.isInProgress}
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Not allowed to reset while syncing"
+          data-tooltip-type="warning"
+          on:click={handleResetWalletClick}
+          text="Reset Wallet"
+        />
+      </div>
     </article>
   </div>
 </section>
diff --git a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
index f2f9ae53f..8e15ff7ac 100644
--- a/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/settings/__tests__/__snapshots__/page.spec.js.snap
@@ -482,44 +482,55 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
         <h3
           class="h4 settings-group__heading svelte-zikvd5"
         >
-          Danger zone
+          Reset wallet
         </h3>
       </header>
        
-      <details
-        class="dusk-error-details dusk-error-details__details"
+      <div
+        class="settings-group__multi-control-content svelte-zikvd5"
       >
-        <summary
-          class="dusk-error-details__summary"
-        >
-          An error occurred while resetting the wallet. Please try again.
-        </summary>
+        <p>
+          Resetting your wallet clears the cache and restores default settings
+          without affecting your funds or transaction history. You’ll need your
+          mnemonic phrase to restore access, so ensure it’s securely stored
+          before proceeding.
+        </p>
          
-        <pre
-          class="dusk-error-details__error"
+        <details
+          class="dusk-error-details dusk-error-details__details"
         >
-          			
-          Clear data error
-          
+          <summary
+            class="dusk-error-details__summary"
+          >
+            An error occurred while resetting the wallet. Please try again.
+          </summary>
+           
+          <pre
+            class="dusk-error-details__error"
+          >
+            			
+            Clear data error
+            
 		
-        </pre>
-      </details>
-      
-       
-      <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
-        data-tooltip-disabled="true"
-        data-tooltip-id="main-tooltip"
-        data-tooltip-text="Not allowed to reset while syncing"
-        data-tooltip-type="warning"
-        type="button"
-      >
-        <span
-          class="dusk-button__text"
+          </pre>
+        </details>
+        
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          data-tooltip-disabled="true"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Not allowed to reset while syncing"
+          data-tooltip-type="warning"
+          type="button"
         >
-          Reset Wallet
-        </span>
-      </button>
+          <span
+            class="dusk-button__text"
+          >
+            Reset Wallet
+          </span>
+        </button>
+      </div>
     </article>
   </div>
 </section>
@@ -1007,26 +1018,37 @@ exports[`Settings > should render the settings page displaying the status of the
         <h3
           class="h4 settings-group__heading svelte-zikvd5"
         >
-          Danger zone
+          Reset wallet
         </h3>
       </header>
        
-      
-       
-      <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
-        data-tooltip-disabled="true"
-        data-tooltip-id="main-tooltip"
-        data-tooltip-text="Not allowed to reset while syncing"
-        data-tooltip-type="warning"
-        type="button"
+      <div
+        class="settings-group__multi-control-content svelte-zikvd5"
       >
-        <span
-          class="dusk-button__text"
+        <p>
+          Resetting your wallet clears the cache and restores default settings
+          without affecting your funds or transaction history. You’ll need your
+          mnemonic phrase to restore access, so ensure it’s securely stored
+          before proceeding.
+        </p>
+         
+        
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          data-tooltip-disabled="true"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Not allowed to reset while syncing"
+          data-tooltip-type="warning"
+          type="button"
         >
-          Reset Wallet
-        </span>
-      </button>
+          <span
+            class="dusk-button__text"
+          >
+            Reset Wallet
+          </span>
+        </button>
+      </div>
     </article>
   </div>
 </section>
@@ -1514,26 +1536,37 @@ exports[`Settings > should render the settings page displaying the status of the
         <h3
           class="h4 settings-group__heading svelte-zikvd5"
         >
-          Danger zone
+          Reset wallet
         </h3>
       </header>
        
-      
-       
-      <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
-        data-tooltip-disabled="true"
-        data-tooltip-id="main-tooltip"
-        data-tooltip-text="Not allowed to reset while syncing"
-        data-tooltip-type="warning"
-        type="button"
+      <div
+        class="settings-group__multi-control-content svelte-zikvd5"
       >
-        <span
-          class="dusk-button__text"
+        <p>
+          Resetting your wallet clears the cache and restores default settings
+          without affecting your funds or transaction history. You’ll need your
+          mnemonic phrase to restore access, so ensure it’s securely stored
+          before proceeding.
+        </p>
+         
+        
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default settings-group__button--state--danger"
+          data-tooltip-disabled="true"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Not allowed to reset while syncing"
+          data-tooltip-type="warning"
+          type="button"
         >
-          Reset Wallet
-        </span>
-      </button>
+          <span
+            class="dusk-button__text"
+          >
+            Reset Wallet
+          </span>
+        </button>
+      </div>
     </article>
   </div>
 </section>