fix(bridge-ui-v2): token dropdown click away (taikoxyz#14224)

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { noop, onDestroy } from 'svelte/internal';
+
+  export let active = false;
+  export let fn = noop;
+
+  let mask: HTMLDivElement;
+
+  onMount(() => {
+    mask?.addEventListener('click', fn);
+  });
+
+  onDestroy(() => {
+    mask?.removeEventListener('click', fn);
+  });
+
+  $: displayClass = active ? 'block' : 'hidden';
+</script>
+
+<div class="{displayClass} fixed top-0 right-0 bottom-0 left-0" bind:this={mask} />

packages/bridge-ui-v2/src/components/ClickMask/index.ts

@@ -0,0 +1 @@
+export { default as ClickMask } from './ClickMask.svelte';

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { noop } from 'svelte/internal';
 
+  import { ClickMask } from '$components/ClickMask';
   import type { Token } from '$libs/token';
   import { classNames } from '$libs/util/classNames';
 
@@ -11,6 +12,7 @@
   export let tokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let selectToken: (token: Token) => void = noop;
+  export let closeMenu: () => void = noop;
 
   $: menuClasses = classNames(
     'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10',
@@ -44,3 +46,5 @@
     </li>
   {/each}
 </ul>
+
+<ClickMask fn={closeMenu} active={menuOpen} />

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

@@ -66,7 +66,7 @@
   </button>
 
   {#if isDesktopOrLarger}
-    <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} />
+    <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} {closeMenu} />
   {:else}
     <DialogView {id} {menuOpen} {tokens} {value} {selectToken} {closeMenu} />
   {/if}