wip

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

@@ -98,40 +98,41 @@
 
   <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">
+      {#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}>
         <Icon type="x-close" fillClass="fill-secondary-icon" size={24} />
       </button>
       <h3 class="title-body-bold mb-[20px]">{$t('chain_selector.placeholder')}</h3>
-      <div class="relative">
-        {#if switchingNetwork}
-          <LoadingMask class="bg-grey-0/60" text={$t('')} />
-        {/if}
-
-        <ul role="menu" class="space-y-4">
-          {#each chains as chain (chain.id)}
-            {@const disabled = chain.id === value?.id}
-            {@const liConditionalClass = disabled ? 'opacity-50' : 'hover:bg-grey-10 hover:cursor-pointer'}
-            <li
-              role="menuitem"
-              tabindex="0"
-              class={`p-4 rounded-[10px] ${liConditionalClass}`}
-              aria-disabled={disabled}
-              on:click={() => selectChain(chain)}
-              on:keydown={getChainKeydownHandler(chain)}>
-              <!-- TODO: agree on hover:bg color -->
-              <div class="f-row justify-between">
-                <div class="f-items-center space-x-4">
-                  <i role="img" aria-label={chain.name}>
-                    <svelte:component this={chainToIconMap[chain.id]} size={32} />
-                  </i>
-                  <span class="body-bold">{chain.name}</span>
-                </div>
-                <span class="body-regular">{chain.network}</span>
+      <ul role="menu" class="space-y-4">
+        {#each chains as chain (chain.id)}
+          {@const disabled = chain.id === value?.id}
+          {@const liConditionalClass = disabled ? 'opacity-50' : 'hover:bg-grey-10 hover:cursor-pointer'}
+          <li
+            role="menuitem"
+            tabindex="0"
+            class={`p-4 rounded-[10px] ${liConditionalClass}`}
+            aria-disabled={disabled}
+            on:click={() => selectChain(chain)}
+            on:keydown={getChainKeydownHandler(chain)}>
+            <!-- TODO: agree on hover:bg color -->
+            <div class="f-row justify-between">
+              <div class="f-items-center space-x-4">
+                <i role="img" aria-label={chain.name}>
+                  <svelte:component this={chainToIconMap[chain.id]} size={32} />
+                </i>
+                <span class="body-bold">{chain.name}</span>
               </div>
-            </li>
-          {/each}
-        </ul>
-      </div>
+              <span class="body-regular">{chain.network}</span>
+            </div>
+          </li>
+        {/each}
+      </ul>
     </div>
 
     <div class="overlay-backdrop" />

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

@@ -4,6 +4,7 @@
 
   export let text: string = 'Loading';
   export let textClass: string = '';
+  export let spinnerClass: string = '';
 
   let classes = classNames(
     'gap-2 z-10',
@@ -18,6 +19,6 @@
 </script>
 
 <div class={classes}>
-  <Spinner />
+  <Spinner class={spinnerClass} />
   <span class={textClasses}>{text}</span>
 </div>