DesltopOrLarger helper component

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

@@ -97,15 +97,15 @@
   </div>
 
   <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
-    <div class="modal-box relative px-6 py-[21px] bg-primary-base-background text-primary-base-content">
+    <div class="modal-box relative px-6 py-[35px] md:py-[20px] bg-primary-base-background text-primary-base-content">
       {#if switchingNetwork}
         <LoadingMask
           class="bg-grey-0/60"
           spinnerClass="border-primary-base-content"
           text={$t('messages.network.switching')} />
       {/if}
 
-      <button class="absolute right-6 top-[21px]" on:click={closeModal}>
+      <button class="absolute right-6 top-[35px] md:top-[20px]" on:click={closeModal}>
         <Icon type="x-close" fillClass="fill-secondary-icon" size={24} />
       </button>
       <h3 class="title-body-bold mb-[20px]">{$t('chain_selector.placeholder')}</h3>

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

@@ -6,12 +6,19 @@
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
   import { web3modal } from '$libs/connect';
+  import { DesktopOrLarger } from '$components/DesktopOrLarger';
 
   export let connected = false;
 
+  // Will help us to programmatically show or hide the balance of
+  // the web3modal core button
+  let isDesktopOrLarger: boolean;
+
   let web3modalOpen = false;
   let unsubscribeWeb3Modal = noop;
 
+  $: web3modalBalance = connected && isDesktopOrLarger ? 'show' : 'hide';
+
   function connectWallet() {
     if (web3modalOpen) return;
     web3modal.openModal();
@@ -28,13 +35,15 @@
   onDestroy(unsubscribeWeb3Modal);
 </script>
 
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
+
 <!-- 
   We are gonna make use of Web3Modal core button when we are connected,
   which comes with interesting features out of the box.
   https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/components
 -->
 {#if connected}
-  <w3m-core-button balance="show" />
+  <w3m-core-button balance={web3modalBalance} />
 {:else}
   <!-- TODO: fixing the width for English. i18n? -->
   <Button class="px-[20px] py-2 rounded-full w-[215px]" type="neutral" loading={web3modalOpen} on:click={connectWallet}>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+
+  // This component will help us to programmatically do the same as
+  // CSS media queries. We can use it to show/hide elements or render
+  // different components based on whether or not the size is desktop
+  // or larger
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
+  export let is: boolean;
+
+  function mediaQueryHandler(event: MediaQueryListEvent) {
+    is = event.matches;
+  }
+
+  onMount(() => {
+    is = mediaQuery.matches;
+    mediaQuery.addEventListener('change', mediaQueryHandler);
+  });
+
+  onDestroy(() => {
+    mediaQuery.removeEventListener('change', mediaQueryHandler);
+  });
+
+  // TODO: maybe we want something more general purpose than just `md`?
+</script>

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

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

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

@@ -186,8 +186,5 @@
         <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
       </div>
     </div>
-
-    <!-- TODO: we might not need this brackdrop at all. Re-think this -->
-    <!-- <div class="overlay-backdrop" /> -->
   </dialog>
 </div>

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

@@ -15,7 +15,8 @@
   export let closeMenu: () => void = noop;
 </script>
 
-<dialog {id} class="modal modal-bottom md:px-4 md:pb-4" class:modal-open={menuOpen}>
+<!-- Mobile view -->
+<dialog {id} class="modal modal-bottom" class:modal-open={menuOpen}>
   <div class="modal-box relative px-6 py-[35px] bg-neutral-background rounded-[20px]">
     <button class="absolute right-6 top-[35px]" on:click={closeMenu}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
@@ -26,14 +27,14 @@
     <ul role="listbox" class="menu p-0 bg-neutral-background">
       {#each tokens as token (token.symbol)}
         {@const selected = token === value}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <li
           role="option"
           tabindex="0"
           aria-selected={selected}
           class="rounded-[10px]"
           class:bg-tertiary-interactive-accent={selected}
-          on:click={() => selectToken(token)}
-          on:keydown={() => {}}>
+          on:click={() => selectToken(token)}>
           <div class="p-4">
             <i role="img" aria-label={token.name}>
               <svelte:component this={symbolToIconMap[token.symbol]} />
@@ -44,7 +45,4 @@
       {/each}
     </ul>
   </div>
-
-  <!-- TODO: we might not need this brackdrop at all. Re-think this -->
-  <!-- <div class="overlay-backdrop" /> -->
 </dialog>

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

@@ -26,6 +26,7 @@
   }
 </script>
 
+<!-- Desktop (or larger) view -->
 <ul role="listbox" {id} class={menuClasses}>
   {#each tokens as token (token.symbol)}
     <li

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

@@ -9,24 +9,25 @@
   import DialogView from './DialogView.svelte';
   import DropdownView from './DropdownView.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
+  import { DesktopOrLarger } from '$components/DesktopOrLarger';
 
   export let tokens: Token[] = [];
   export let value: Maybe<Token> = null;
 
   let id = `menu-${uid()}`;
   let menuOpen = false;
 
-  // Default to true if globalThis or matchMedia are not available (SSR?).
-  // Desktop view looks also good in small screens.
-  let isDesktopOrLarger = globalThis?.matchMedia?.('(min-width: 768px)').matches ?? true;
+  // This will control which view to render depending on the screensize.
+  // Since markup will differ, and there is logic running when interacting
+  // with this component, it makes more sense to not render the view that's
+  // not being used, doing this with JS instead of CSS media queries
+  let isDesktopOrLarger: boolean;
 
   function closeMenu() {
     menuOpen = false;
   }
 
-  function openMenu(event: Event) {
-    // Prevents closing the menu immediately (button click bubbles up to the document)
-    event.stopPropagation();
+  function openMenu() {
     menuOpen = true;
   }
 
@@ -35,16 +36,11 @@
     closeMenu();
   }
 
-  onMount(() => {
-    document.addEventListener('click', closeMenu);
-  });
-
-  onDestroy(() => {
-    closeMenu();
-    document.removeEventListener('click', closeMenu);
-  });
+  onDestroy(closeMenu);
 </script>
 
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
+
 <div class="relative">
   <button
     aria-haspopup="listbox"
@@ -69,10 +65,6 @@
     <Icon type="chevron-down" />
   </button>
 
-  <!--
-    TODO: does not change on resizing, but it's not a big deal since both
-          views work well on small and large screens.
-  -->
   {#if isDesktopOrLarger}
     <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} />
   {:else}