feat(bridge-ui-v2): close dialogs with ESC key (#14700)

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,15 +44,15 @@
       // If so, let's switch to RECOMMENDED method
       selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
     }
-
+    removeEscKeyListener();
     modalOpen = false;
   }
 
   function openModal() {
     // 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:

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;

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>

packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte

@@ -43,6 +43,9 @@
       if (event.key === 'Enter') {
         selectToken(token);
       }
+      if (event.key === 'Escape') {
+        closeMenu();
+      }
     };
   };
 

packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte

@@ -33,16 +33,32 @@
 
   const closeMenu = () => {
     menuOpen = false;
-    document.removeEventListener('click', closeMenu);
+    removeListener();
   };
 
   const openMenu = (event: Event) => {
     event.stopPropagation();
 
     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) => {

packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte

@@ -28,6 +28,7 @@
       closeModal();
     }
   };
+  
 </script>
 
 <button