From 886ab311812b4583c823976524d799b2b9e90d46 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Thu, 17 Aug 2023 06:47:11 +0200
Subject: [PATCH] feat(bridge-ui-v2): Processing fee input box (#14527)

---
 .../Bridge/ProcessingFee/ProcessingFee.svelte | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
index de20dc72548..219e8f09cce 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -9,6 +9,7 @@
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
   import { Tooltip } from '$components/Tooltip';
+  import { processingFeeComponent } from '$config';
   import { ProcessingFeeMethod } from '$libs/fee';
   import { parseToWei } from '$libs/util/parseToWei';
   import { uid } from '$libs/util/uid';
@@ -62,6 +63,12 @@
     closeModal();
   }
 
+  function closeModalWithDelay() {
+    // By adding delay there is enough time to see the selected option
+    // before closing the modal. Better experience for the user.
+    setTimeout(closeModal, processingFeeComponent.closingDelayOptionClick);
+  }
+
   function focusInputBox() {
     inputBox.focus();
   }
@@ -217,19 +224,19 @@
             bind:group={selectedFeeMethod} />
         </li>
       </ul>
-
       <div class="relative f-items-center my-[20px]">
-        <InputBox
-          type="number"
-          min="0"
-          placeholder="0.01"
-          disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
-          class="w-full input-box outline-none p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
-          on:input={inputProcessFee}
-          bind:this={inputBox} />
-        <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
+        {#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM}
+          <InputBox
+            type="number"
+            min="0"
+            placeholder="0.01"
+            disabled={selectedFeeMethod !== ProcessingFeeMethod.CUSTOM}
+            class="w-full input-box outline-none p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
+            on:input={inputProcessFee}
+            bind:this={inputBox} />
+          <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
+        {/if}
       </div>
-
       <div class="grid grid-cols-2 gap-[20px]">
         <Button
           on:click={cancelModal}