web-wallet: Add Speed Option (Gas Settings)

Resolves #2437
dusk-network · Sep 23, 2024 · 6fa9c9c · 6fa9c9c
1 parent 34e931e
commit 6fa9c9c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/web-wallet/src/lib/components/GasSettings/GasSettings.svelte b/web-wallet/src/lib/components/GasSettings/GasSettings.svelte
@@ -1,6 +1,6 @@
 <script>
   import { slide } from "svelte/transition";
-  import { Button } from "$lib/dusk/components";
+  import { Button, ExclusiveChoice } from "$lib/dusk/components";
   import { GasControls, GasFee } from "$lib/components";
   import { areValidGasSettings } from "$lib/contracts";
   import { onMount } from "svelte";
@@ -23,9 +23,17 @@
   /** @type {string} */
   export let fee;
 
+  /** @type {"normal" | "fast"} */
+  export let speed;
+
   /** @type {boolean} */
   let isExpanded = false;
 
+  const speedOptions = [
+    { disabled: false, label: "Normal", value: "normal" },
+    { disabled: false, label: "Fast", value: "fast" },
+  ];
+
   onMount(() => {
     if (!areValidGasSettings(price, limit)) {
       isExpanded = true;
@@ -47,8 +55,11 @@
       />
     </dd>
   </dl>
+
   {#if isExpanded}
     <div in:slide|global class="gas-settings">
+      <ExclusiveChoice options={speedOptions} bind:value={speed} />
+
       <GasControls
         on:gasSettings
         {limit}

diff --git a/web-wallet/src/lib/components/__tests__/GasSettings.spec.js b/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
@@ -35,7 +35,7 @@ describe("GasSettings", () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("renders the GasSettings component opened", async () => {
+  it("renders the GasSettings component expanded", async () => {
     const { container, getByRole } = render(GasSettings, baseOptions);
 
     const next = getByRole("button", { name: "EDIT" });

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
@@ -64,7 +64,7 @@ exports[`GasSettings > renders the GasSettings component closed 1`] = `
 </div>
 `;
 
-exports[`GasSettings > renders the GasSettings component opened 1`] = `
+exports[`GasSettings > renders the GasSettings component expanded 1`] = `
 <div
   class="gas-settings svelte-1daay07"
 >
@@ -129,6 +129,40 @@ exports[`GasSettings > renders the GasSettings component opened 1`] = `
     class="gas-settings svelte-1daay07"
     style="animation: __svelte_276924520_0 400ms linear 0ms 1 both;"
   >
+    <div
+      class="dusk-exclusive-choice"
+      role="radiogroup"
+    >
+      <input
+        class="dusk-exclusive-choice__radio"
+        id="2d814b13-5fe4-4036-b003-a4383070bebd-normal"
+        name="2d814b13-5fe4-4036-b003-a4383070bebd"
+        type="radio"
+        value="normal"
+      />
+       
+      <label
+        class="dusk-exclusive-choice__label"
+        for="2d814b13-5fe4-4036-b003-a4383070bebd-normal"
+      >
+        Normal
+      </label>
+      <input
+        class="dusk-exclusive-choice__radio"
+        id="2d814b13-5fe4-4036-b003-a4383070bebd-fast"
+        name="2d814b13-5fe4-4036-b003-a4383070bebd"
+        type="radio"
+        value="fast"
+      />
+       
+      <label
+        class="dusk-exclusive-choice__label"
+        for="2d814b13-5fe4-4036-b003-a4383070bebd-fast"
+      >
+        Fast
+      </label>
+    </div>
+     
     <label
       class="gas-control svelte-14slcjg"
     >