web-wallet: Update default gas settings values

- Add button to reset gas settings to their defaults - Fix dark mode button not being in sync with the stored value - Fix `BigIntInput` value not being reactive Resolves #3178
dusk-network · Dec 16, 2024 · 1ce7f9c · 1ce7f9c
1 parent 2aacfcb
commit 1ce7f9c
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 45 deletions.
diff --git a/web-wallet/src/lib/components/BigIntInput/BigIntInput.svelte b/web-wallet/src/lib/components/BigIntInput/BigIntInput.svelte
@@ -20,12 +20,13 @@
   /** @type {bigint} */
   export let value = 0n;
 
-  let isInvalidInput = false;
   let internalValue = value.toString();
 
+  /** @type {(v: bigint, min: bigint, max: bigint) => boolean} */
+  const isInvalidInput = (v, min, max) => !!(min > v || v > max);
+
   const checkValidity = () => {
-    isInvalidInput = !!(minValue > value || value > maxValue);
-    if (isInvalidInput) {
+    if (isInvalidInput(value, minValue, maxValue)) {
       dispatch("error", "Value exceeds limits");
     }
   };
@@ -40,14 +41,17 @@
     }
   }
 
-  $: inputClass = makeClassName({
-    "invalid-input": isInvalidInput,
-    [`${className}`]: true,
-  });
-
   onMount(() => {
     checkValidity();
   });
+
+  $: inputClass = makeClassName({
+    "invalid-input": isInvalidInput(value, minValue, maxValue),
+    [`${className}`]: true,
+  });
+  $: {
+    internalValue = value.toString();
+  }
 </script>
 
 <Textbox

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasFee.spec.js.snap
@@ -23,7 +23,7 @@ exports[`GasFee > renders the GasFee component 1`] = `
       <span
         class="svelte-1c6b481"
       >
-        0.020000000
+        0.100000000
       </span>
     </div>
      

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasSettings.spec.js.snap
@@ -29,7 +29,7 @@ exports[`GasSettings > renders the GasSettings component closed 1`] = `
           <span
             class="svelte-1c6b481"
           >
-            0.020000000
+            0.100000000
           </span>
         </div>
          
@@ -93,7 +93,7 @@ exports[`GasSettings > renders the GasSettings component opened 1`] = `
           <span
             class="svelte-1c6b481"
           >
-            0.020000000
+            0.100000000
           </span>
         </div>
          

diff --git a/web-wallet/src/lib/stores/__tests__/settingsStore.spec.js b/web-wallet/src/lib/stores/__tests__/settingsStore.spec.js
@@ -126,6 +126,45 @@ describe("Settings store", () => {
 
       expect(get(settingsStore)).toBe(settingsStoreContent);
     });
+
+    it("should expose a method to reset the gas settings to their defaults", () => {
+      const newStateWithoutGas = {
+        currency: "FAKE CURRENCY",
+        darkMode: !settingsStoreContent.darkMode,
+        dashboardTransactionLimit:
+          settingsStoreContent.dashboardTransactionLimit + 1,
+        hideStakingNotice: !settingsStoreContent.hideStakingNotice,
+        language: "FAKE LANGUAGE",
+        userId: "FAKE USER ID",
+      };
+      const newState = {
+        ...newStateWithoutGas,
+        gasLimit: settingsStoreContent.gasLimit * 2n,
+        gasPrice: settingsStoreContent.gasPrice * 15n,
+      };
+      const expectedState = {
+        ...settingsStoreContent,
+        ...newStateWithoutGas,
+      };
+
+      settingsStore.set(newState);
+
+      expect(get(settingsStore)).toBe(newState);
+
+      settingsStore.resetGasSettings();
+
+      expect(get(settingsStore)).toStrictEqual(expectedState);
+      expect(
+        JSON.parse(
+          // @ts-ignore
+          localStorage.getItem(`${CONFIG.LOCAL_STORAGE_APP_KEY}-preferences`)
+        )
+      ).toStrictEqual({
+        ...expectedState,
+        gasLimit: `${expectedState.gasLimit}n`,
+        gasPrice: `${expectedState.gasPrice}n`,
+      });
+    });
   });
 
   describe("In a non browser environment", () => {

diff --git a/web-wallet/src/lib/stores/gasStore.js b/web-wallet/src/lib/stores/gasStore.js
@@ -1,8 +1,8 @@
 import { readable } from "svelte/store";
 
 const gasLimits = {
-  gasLimitLower: BigInt(import.meta.env.VITE_GAS_LIMIT_LOWER ?? 10000000),
-  gasLimitUpper: BigInt(import.meta.env.VITE_GAS_LIMIT_UPPER ?? 1000000000),
+  gasLimitLower: BigInt(import.meta.env.VITE_GAS_LIMIT_LOWER ?? 10_000_000),
+  gasLimitUpper: BigInt(import.meta.env.VITE_GAS_LIMIT_UPPER ?? 1_000_000_000),
   gasPriceLower: BigInt(import.meta.env.VITE_GAS_PRICE_LOWER ?? 1),
 };
 

diff --git a/web-wallet/src/lib/stores/settingsStore.js b/web-wallet/src/lib/stores/settingsStore.js
@@ -32,7 +32,7 @@ const initialState = {
   ...browserDefaults,
   currency: "USD",
   dashboardTransactionLimit: 5,
-  gasLimit: BigInt(import.meta.env.VITE_GAS_LIMIT_DEFAULT ?? 20000000),
+  gasLimit: BigInt(import.meta.env.VITE_GAS_LIMIT_DEFAULT ?? 100_000_000),
   gasPrice: BigInt(import.meta.env.VITE_GAS_PRICE_DEFAULT ?? 1),
   hideStakingNotice: false,
   userId: "",
@@ -71,9 +71,18 @@ const { set, subscribe, update } = settingsStore;
 // Reset store to initial state
 const reset = () => set(initialState);
 
+// Resets only gas settings to their defaults.
+const resetGasSettings = () =>
+  update((current) => ({
+    ...current,
+    gasLimit: initialState.gasLimit,
+    gasPrice: initialState.gasPrice,
+  }));
+
 /** @type {SettingsStore} */
 export default {
   reset,
+  resetGasSettings,
   set,
   subscribe,
   update,

diff --git a/web-wallet/src/lib/stores/stores.d.ts b/web-wallet/src/lib/stores/stores.d.ts
@@ -21,7 +21,10 @@ type SettingsStoreContent = {
   userId: string;
 };
 
-type SettingsStore = Writable<SettingsStoreContent> & { reset: () => void };
+type SettingsStore = Writable<SettingsStoreContent> & {
+  reset: () => void;
+  resetGasSettings: () => void;
+};
 
 type TransactionInfo =
   | {

diff --git a/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap
@@ -198,7 +198,7 @@ exports[`Allocate > should render the allocation page 1`] = `
                     <span
                       class="svelte-1c6b481"
                     >
-                      0.020000000
+                      0.100000000
                     </span>
                   </div>
                    

diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte
@@ -24,7 +24,9 @@
   import { logout } from "$lib/navigation";
   import loginInfoStorage from "$lib/services/loginInfoStorage";
 
-  const confirmResetMessage =
+  const confirmResetGasMessage =
+    "Are you sure you want to reset the gas settings to their defaults?";
+  const confirmResetWalletMessage =
     "Confirm you've saved your recovery phrase before resetting the wallet. Proceed?";
 
   const resetWallet = () =>
@@ -39,9 +41,16 @@
         resetError = err;
       });
 
+  function handleResetGasSettingsClick() {
+    // eslint-disable-next-line no-alert
+    if (confirm(confirmResetGasMessage)) {
+      settingsStore.resetGasSettings();
+    }
+  }
+
   function handleResetWalletClick() {
     // eslint-disable-next-line no-alert
-    if (confirm(confirmResetMessage)) {
+    if (confirm(confirmResetWalletMessage)) {
       resetError = null;
       resetWallet();
     }
@@ -50,16 +59,15 @@
   /** @type {(currency: { code: string, currency: string }) => SelectOption} */
   const currencyToOption = rename({ code: "value", currency: "label" });
   const currenciesToOptions = mapWith(currencyToOption);
-  const { currency, darkMode, gasLimit, gasPrice } = $settingsStore;
   const { gasLimitLower, gasLimitUpper, gasPriceLower } = $gasStore;
 
-  let isDarkMode = darkMode;
   let isGasValid = false;
 
   /** @type {Error | null} */
   let resetError = null;
 
   $: ({ syncStatus } = $walletStore);
+  $: ({ currency, darkMode, gasLimit, gasPrice } = $settingsStore);
 </script>
 
 <section class="settings">
@@ -76,18 +84,16 @@
       <div class="settings-group__multi-control-content">
         <GasControls
           on:gasSettings={(event) => {
-            isGasValid = areValidGasSettings(
-              event.detail.price,
-              event.detail.limit
-            );
+            const { limit, price } = event.detail;
 
-            if (isGasValid) {
-              settingsStore.update((store) => {
-                store.gasLimit = event.detail.limit;
-                store.gasPrice = event.detail.price;
+            isGasValid = areValidGasSettings(price, limit);
 
-                return store;
-              });
+            if (isGasValid) {
+              settingsStore.update((store) => ({
+                ...store,
+                gasLimit: limit,
+                gasPrice: price,
+              }));
             }
           }}
           limit={gasLimit}
@@ -96,6 +102,10 @@
           price={gasPrice}
           priceLower={gasPriceLower}
         />
+        <Button
+          on:click={handleResetGasSettingsClick}
+          text="Reset to defaults"
+        />
       </div>
     </article>
     <hr />
@@ -132,14 +142,14 @@
         >
           <span>Dark mode</span>
           <Switch
-            bind:value={isDarkMode}
-            on:change={() => {
+            on:change={(event) => {
               settingsStore.update((store) => {
-                store.darkMode = isDarkMode;
+                store.darkMode = event.detail;
 
                 return store;
               });
             }}
+            value={darkMode}
           />
         </label>
       </div>

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
@@ -79,6 +79,17 @@ exports[`Settings > Resetting the wallet > should show an error if clearing loca
           />
           
         </label>
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
+          type="button"
+        >
+          <span
+            class="dusk-button__text"
+          >
+            Reset to defaults
+          </span>
+        </button>
       </div>
     </article>
      
@@ -631,6 +642,17 @@ exports[`Settings > should render the settings page displaying the status of the
           />
           
         </label>
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
+          type="button"
+        >
+          <span
+            class="dusk-button__text"
+          >
+            Reset to defaults
+          </span>
+        </button>
       </div>
     </article>
      
@@ -1165,6 +1187,17 @@ exports[`Settings > should render the settings page displaying the status of the
           />
           
         </label>
+         
+        <button
+          class="dusk-button dusk-button--type--button dusk-button--variant--primary dusk-button--size--default"
+          type="button"
+        >
+          <span
+            class="dusk-button__text"
+          >
+            Reset to defaults
+          </span>
+        </button>
       </div>
     </article>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ exports[`GasFee > renders the GasFee component 1`] = ` @@
           <span
             class="svelte-1c6b481"
           >
-.020000000
+.100000000
           </span>
         </div>
@@ Expand Down @@