adjust dialog loading mask, catching error

taikoxyz · Sep 6, 2023 · e7593ef · e7593ef · vercel · Sep 6, 2023
1 parent 703c968
commit e7593ef
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 55 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
@@ -23,6 +23,7 @@
     try {
       // Get the balance of the user on the destination chain
       const destBalance = await getBalance({
+        token,
         userAddress,
         srcChainId: destChainId,
       });

diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -3,7 +3,7 @@
   import { onDestroy } from 'svelte';
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { UserRejectedRequestError } from 'viem';
+  import { SwitchChainError, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
   import { Alert } from '$components/Alert';
@@ -75,7 +75,9 @@
         closeModal();
       } catch (err) {
         console.error(err);
-
+        if (err instanceof SwitchChainError) {
+          warningToast($t('messages.network.pending'));
+        }
         if (err instanceof UserRejectedRequestError) {
           warningToast($t('messages.network.rejected'));
         }
@@ -132,57 +134,56 @@
   <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 py-[35px] md:py-[20px] bg-primary-background text-primary-content">
       {#if switchingNetwork}
-        <LoadingMask
-          class="bg-grey-0/60"
-          spinnerClass="border-primary-base-content"
-          text={$t('messages.network.switching')} />
+        <LoadingMask spinnerClass="border-white" text={$t('messages.network.switching')} />
       {/if}
 
       <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>
-      <ul role="menu">
-        {#each chains as chain (chain.id)}
-          {@const disabled = validOptions
-            ? !validOptions.some((validOption) => validOption.id === chain.id)
-            : chain.id === value?.id}
-          {@const icon = chainConfig[Number(chain.id)]?.icon || 'Unknown Chain'}
-          {#if chain.id !== value?.id}
-            <li
-              role="menuitem"
-              tabindex="0"
-              class="p-4 rounded-[10px]"
-              class:opacity-20={disabled}
-              class:hover:bg-neutral-background={!disabled}
-              class:hover:cursor-pointer={!disabled}
-              aria-disabled={disabled}
-              on:click={() => {
-                if (!disabled) 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}>
-                    <img src={icon} alt="chain-logo" class="rounded-full w-7 h-7" />
-                  </i>
-                  <span class="body-bold">{chain.name}</span>
+      <div class="w-full">
+        <h3 class="title-body-bold mb-[20px]">{$t('chain_selector.placeholder')}</h3>
+        <ul role="menu">
+          {#each chains as chain (chain.id)}
+            {@const disabled = validOptions
+              ? !validOptions.some((validOption) => validOption.id === chain.id)
+              : chain.id === value?.id}
+            {@const icon = chainConfig[Number(chain.id)]?.icon || 'Unknown Chain'}
+            {#if chain.id !== value?.id}
+              <li
+                role="menuitem"
+                tabindex="0"
+                class="p-4 rounded-[10px]"
+                class:opacity-20={disabled}
+                class:hover:bg-neutral-background={!disabled}
+                class:hover:cursor-pointer={!disabled}
+                aria-disabled={disabled}
+                on:click={() => {
+                  if (!disabled) 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}>
+                      <img src={icon} alt="chain-logo" class="rounded-full w-7 h-7" />
+                    </i>
+                    <span class="body-bold">{chain.name}</span>
+                  </div>
+                  <span class="f-items-center body-regular">{chainConfig[chain.id].type}</span>
                 </div>
-                <span class="f-items-center body-regular">{chainConfig[chain.id].type}</span>
-              </div>
+              </li>
+            {/if}
+          {/each}
+          {#if !small && validOptions?.length !== chains.length - 1}
+            <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}
-        {/each}
-        {#if !small && validOptions?.length !== chains.length - 1}
-          <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}
-      </ul>
+        </ul>
+      </div>
     </div>
   </dialog>
 </div>
diff --git a/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte b/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte
@@ -13,6 +13,8 @@
     'top-0 bottom-0',
     'left-0 right-0',
     'overflow-hidden',
+    'overlay-dialog',
+    'text-white',
     $$props.class,
   );
   let textClasses = classNames('body-regular', textClass);

diff --git a/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte b/packages/bridge-ui-v2/src/components/SwitchChainModal/SwitchChainModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type Chain, switchNetwork } from '@wagmi/core';
   import { t } from 'svelte-i18n';
-  import { UserRejectedRequestError } from 'viem';
+  import { SwitchChainError, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
   import { LoadingMask } from '$components/LoadingMask';
@@ -25,7 +25,9 @@
       closeModal();
     } catch (err) {
       console.error(err);
-
+      if (err instanceof SwitchChainError) {
+        warningToast($t('messages.network.pending'));
+      }
       if (err instanceof UserRejectedRequestError) {
         warningToast($t('messages.network.rejected'));
       }
@@ -47,10 +49,7 @@
   <div
     class="modal-box relative px-6 py-[35px] md:py-[35px] bg-neutral-background text-primary-content box-shadow-small">
     {#if switchingNetwork}
-      <LoadingMask
-        class="bg-grey-0/60"
-        spinnerClass="border-primary-base-content"
-        text={$t('messages.network.switching')} />
+      <LoadingMask spinnerClass="border-white" text={$t('messages.network.switching')} />
     {/if}
 
     <h3 class="title-body-bold mb-[30px]">{$t('switch_modal.title')}</h3>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -24,6 +24,7 @@
   let id = `menu-${uid()}`;
   let menuOpen = false;
 
+  const customTokens = tokenService.getTokens($account?.address as Address);
   // 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
@@ -131,8 +132,8 @@
   </button>
 
   {#if isDesktopOrLarger}
-    <DropdownView {id} {menuOpen} {tokens} {value} {selectToken} on:tokenRemoved={handleTokenRemoved} />
+    <DropdownView {id} {menuOpen} {tokens} {customTokens} {value} {selectToken} on:tokenRemoved={handleTokenRemoved} />
   {:else}
-    <DialogView {id} {menuOpen} {tokens} {value} {selectToken} {closeMenu} />
+    <DialogView {id} {menuOpen} {tokens} {customTokens} {value} {selectToken} {closeMenu} />
   {/if}
 </div>
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -139,7 +139,7 @@
     "actions": {
       "claim": {
         "tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
-        "success": "Transaction completed! Your funds have been successfully claimed on ${network}.",
+        "success": "Transaction completed! Your funds have been successfully claimed on {network}.",
         "rejected": "Request to claim rejected."
       },
       "release": {

diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
@@ -163,6 +163,10 @@
     @apply modal-backdrop bg-overlay-background rounded-xl;
   }
 
+  .overlay-dialog {
+    background-color: var(--overlay-dialog)
+  }
+
   .chainselector {
     @apply /* background: var(--interactive-dark-tertiary, #444A55); */
     hover:background-color: var(--interactive-dark-tertiary-hover, #5D636F);

diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js
@@ -221,7 +221,7 @@ export default {
           '--elevated-background': '#191E28', // grey-800
           '--neutral-background': '#2B303B', // grey-700
           '--overlay-background': 'rgba(12, 17, 28, 0.5)', // grey-900|50%
-
+          '--overlay-dialog': 'rgba(12, 17, 28, 0.90)', // grey-900|90%
           '--divider-border': '#444A55', // grey-600
 
           // ================================ //
@@ -295,6 +295,7 @@ export default {
           '--elevated-background': '#FAFAFA', // grey-5
           '--neutral-background': '#E7E7E7', // grey-50
           '--overlay-background': 'rgba(12, 17, 28, 0.2)', // grey-900|20%
+          '--overlay-dialog': 'rgba(12, 17, 28, 0.9)', // grey-900|20%
 
           '--divider-border': '#CACBCE', // grey-100