From dbf7a24a32a4518f4a9dbbfbbead732ab8a9b548 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Mon, 18 Sep 2023 17:06:55 +0200
Subject: [PATCH] feat(bridge-ui-v2): close dialogs with ESC key (#14700)

---
 .../Bridge/ProcessingFee/ProcessingFee.svelte | 25 ++++++++++++++++---
 .../src/components/Bridge/Recipient.svelte    | 23 ++++++++++++++++-
 .../ChainSelector/ChainSelector.svelte        | 24 +++++++++++++++---
 .../TokenDropdown/DialogView.svelte           |  3 +++
 .../TokenDropdown/TokenDropdown.svelte        | 20 +++++++++++++--
 .../Transactions/StatusInfoDialog.svelte      |  1 +
 pnpm-lock.yaml                                |  2 +-
 7 files changed, 87 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 60cd5c88447..2a8b6c76dfe 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import { formatEther } from 'viem';
 
@@ -44,7 +44,7 @@
       // If so, let's switch to RECOMMENDED method
       selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
     }
-
+    removeEscKeyListener();
     modalOpen = false;
   }
 
@@ -52,7 +52,7 @@
     // Keep track of the selected method before opening the modal
     // so if we cancel we can go back to the previous method
     prevOptionSelected = selectedFeeMethod;
-
+    addEscKeyListener();
     modalOpen = true;
   }
 
@@ -73,6 +73,25 @@
     $processingFee = parseToWei(value);
   }
 
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addEscKeyListener = () => {
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        cancelModal();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeEscKeyListener = () => {
+    window.removeEventListener('keydown', escKeyListener);
+  };
+
+  onDestroy(() => {
+    removeEscKeyListener();
+  });
+
   async function updateProcessingFee(method: ProcessingFeeMethod, recommendedAmount: bigint) {
     switch (method) {
       case ProcessingFeeMethod.RECOMMENDED:
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index 84560c72b40..2ea69888865 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
@@ -32,12 +33,13 @@
   function openModal() {
     modalOpen = true;
     addressInput.focus();
+    addEscKeyListener();
   }
 
   function cancelModal() {
     // Revert change of recipient address
     $recipientAddress = prevRecipientAddress;
-
+    removeEscKeyListener();
     closeModal();
   }
 
@@ -58,6 +60,25 @@
     }
   }
 
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addEscKeyListener = () => {
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeEscKeyListener = () => {
+    window.removeEventListener('keydown', escKeyListener);
+  };
+
+  onDestroy(() => {
+    removeEscKeyListener();
+  });
+
   $: modalOpenChange(modalOpen);
 
   $: ethereumAddressBinding = $recipientAddress || undefined;
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index 0fe8b1fcbb2..cfaf50a8362 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -6,7 +6,6 @@
   import { SwitchChainError, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
-  import { Alert } from '$components/Alert';
   import { Icon } from '$components/Icon';
   import { LoadingMask } from '$components/LoadingMask';
   import { warningToast } from '$components/NotificationToast';
@@ -23,6 +22,21 @@
   export let small = false;
   export let validOptions: Maybe<Chain[]> = chains;
 
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addEscKeyListener = () => {
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeEscKeyListener = () => {
+    window.removeEventListener('keydown', escKeyListener);
+  };
+
   const dispatch = createEventDispatcher();
 
   let classes = classNames('ChainSelector', $$props.class);
@@ -41,6 +55,7 @@
   let modalOpen = false;
 
   function closeModal() {
+    removeEscKeyListener();
     modalOpen = false;
   }
 
@@ -52,7 +67,7 @@
       warningToast($t('messages.account.required'));
       return;
     }
-
+    addEscKeyListener();
     modalOpen = true;
   }
 
@@ -174,14 +189,15 @@
               </div>
             </li>
           {/each}
-          {#if !small}
+          <!-- Todo: disabled for now -->
+          <!-- {#if !small}
             <li role="menuitem" tabindex="0" class="p-4 rounded-[10px]">
               <Alert type="warning" forceColumnFlow>
                 <p class="font-bold">{$t('chain_selector.disabled_options.title')}</p>
                 <p>{$t('chain_selector.disabled_options.description')}</p>
               </Alert>
             </li>
-          {/if}
+          {/if} -->
         </ul>
       </div>
     </div>
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
index 8fe0abc40d4..13a2c3c1719 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -43,6 +43,9 @@
       if (event.key === 'Enter') {
         selectToken(token);
       }
+      if (event.key === 'Escape') {
+        closeMenu();
+      }
     };
   };
 
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
index e7953336536..cb17105e319 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -33,7 +33,7 @@
 
   const closeMenu = () => {
     menuOpen = false;
-    document.removeEventListener('click', closeMenu);
+    removeListener();
   };
 
   const openMenu = (event: Event) => {
@@ -41,8 +41,24 @@
 
     menuOpen = true;
 
-    // Click away to close menu
+    addListener();
+  };
+
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addListener = () => {
     document.addEventListener('click', closeMenu, { once: true });
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMenu();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeListener = () => {
+    window.removeEventListener('click', closeMenu);
+    window.removeEventListener('keydown', escKeyListener);
   };
 
   const selectToken = async (token: Token) => {
diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
index 0069ba11854..25d00e9da10 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
@@ -28,6 +28,7 @@
       closeModal();
     }
   };
+  
 </script>
 
 <button
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ac70158688..73ebaa3382d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3357,7 +3357,7 @@ packages:
       chalk: 4.1.2
       convert-source-map: 1.9.0
       fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-haste-map: 27.5.1
       jest-regex-util: 27.5.1
       jest-util: 27.5.1