feat(bridge-ui): mobile style for claim dialogs (#16823)

taikoxyz · Apr 24, 2024 · 63f15c9 · 63f15c9
1 parent 14576f7
commit 63f15c9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte b/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte
@@ -5,6 +5,7 @@
 
   import { chainConfig } from '$chainConfig';
   import { CloseButton } from '$components/Button';
+  import DesktopOrLarger from '$components/DesktopOrLarger/DesktopOrLarger.svelte';
   import Claim from '$components/Dialogs/Claim.svelte';
   import {
     errorToast,
@@ -60,6 +61,7 @@
   let ClaimComponent: Claim;
   let txHash: Hash;
   let hideContinueButton: boolean;
+  let isDesktopOrLarger = false;
 
   const handleAccountChange = () => {
     reset();
@@ -177,7 +179,7 @@
   }
 </script>
 
-<dialog id={dialogId} class="modal" class:modal-open={dialogOpen}>
+<dialog id={dialogId} class="modal {isDesktopOrLarger ? '' : 'modal-bottom'}" class:modal-open={dialogOpen}>
   <div class="modal-box relative w-full bg-neutral-background absolute md:min-h-[600px]">
     <div class="w-full f-between-center">
       <CloseButton onClick={closeDialog} />
@@ -232,3 +234,5 @@
 <Claim bind:bridgeTx bind:this={ClaimComponent} on:error={handleClaimError} on:claimingTxSent={handleClaimTxSent} />
 
 <OnAccount change={handleAccountChange} />
+
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
diff --git a/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte b/packages/bridge-ui/src/components/Dialogs/ReleaseDialog/ReleaseDialog.svelte
@@ -5,6 +5,7 @@
 
   import { chainConfig } from '$chainConfig';
   import { CloseButton } from '$components/Button';
+  import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { errorToast, successToast, warningToast } from '$components/NotificationToast';
   import { infoToast } from '$components/NotificationToast/NotificationToast.svelte';
   import { OnAccount } from '$components/OnAccount';
@@ -45,6 +46,7 @@
   let releasingDone = false;
   let ClaimComponent: Claim;
   let hideContinueButton: boolean;
+  let isDesktopOrLarger = false;
 
   const closeDialog = () => {
     dialogOpen = false;
@@ -117,12 +119,7 @@
         break;
       case err instanceof ContractFunctionExecutionError:
         console.error(err);
-        if (err.message.includes('B_INVOCATION_TOO_EARLY')) {
-          errorToast({
-            title: $t('bridge.errors.claim.too_early.title'),
-            message: $t('bridge.errors.claim.too_early.message'),
-          });
-        } else if (err.message.includes('B_NOT_RECEIVED')) {
+        if (err.message.includes('B_NOT_RECEIVED')) {
           errorToast({
             title: $t('bridge.errors.claim.not_received.title'),
             message: $t('bridge.errors.claim.not_received.message'),
@@ -156,7 +153,7 @@
   $: loading = releasing;
 </script>
 
-<dialog id={dialogId} class="modal" class:modal-open={dialogOpen}>
+<dialog id={dialogId} class="modal {isDesktopOrLarger ? '' : 'modal-bottom'}" class:modal-open={dialogOpen}>
   <div class="modal-box relative w-full bg-neutral-background absolute">
     <div class="w-full f-between-center">
       <CloseButton onClick={closeDialog} />
@@ -210,3 +207,5 @@
 <Claim bind:bridgeTx bind:this={ClaimComponent} on:error={handleClaimError} on:claimingTxSent={handleClaimTxSent} />
 
 <OnAccount change={handleAccountChange} />
+
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
diff --git a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte
@@ -5,6 +5,7 @@
 
   import { chainConfig } from '$chainConfig';
   import { CloseButton } from '$components/Button';
+  import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { DialogStep, DialogStepper } from '$components/Dialogs/Stepper';
   import { infoToast, successToast } from '$components/NotificationToast/NotificationToast.svelte';
   import { OnAccount } from '$components/OnAccount';
@@ -39,6 +40,7 @@
   let retrying: boolean;
   let retryDone = false;
   let ClaimComponent: Claim;
+  let isDesktopOrLarger = false;
 
   let txHash: Hash;
 
@@ -102,7 +104,7 @@
 
 <dialog
   id={dialogId}
-  class="modal"
+  class="modal {isDesktopOrLarger ? '' : 'modal-bottom'}"
   class:modal-open={dialogOpen}
   use:closeOnEscapeOrOutsideClick={{ enabled: dialogOpen, callback: closeDialog, uuid: dialogId }}>
   <div class="modal-box relative px-6 py-[35px] w-full bg-neutral-background absolute">
@@ -160,3 +162,5 @@
 <Claim bind:bridgeTx bind:this={ClaimComponent} on:error={handleRetryError} on:claimingTxSent={handleRetryTxSent} />
 
 <OnAccount change={handleAccountChange} />
+
+<DesktopOrLarger bind:is={isDesktopOrLarger} />
diff --git a/packages/bridge-ui/src/libs/token/getCanonicalInfoForToken.ts b/packages/bridge-ui/src/libs/token/getCanonicalInfoForToken.ts
@@ -182,25 +182,25 @@ const _getStatus = async ({ address, srcChainId, destChainId, type }: CheckCanon
   if (srcCanonicalCheck === zeroAddress && destCanonicalCheck === zeroAddress) {
     // if both are zero we are dealing with a canonical address
     canonicalTokenAddress = srcChainTokenAddress;
-    // But either chain passed could be the canonical chain, so we need to check which one
-    const checkDestChainForCanonicalChain = (await destTokenVaultContract.read.canonicalToBridged([
-      destChainId,
-      srcChainTokenAddress,
-    ])) as Address;
-
-    if (checkDestChainForCanonicalChain === zeroAddress) {
-      canonicalChain = destChainId;
-    } else {
+    // But either chain passed could be the canonical chain, so we need to check which one by checking for valid contract types
+    try {
+      await detectContractType(srcChainTokenAddress, srcChainId);
       canonicalChain = srcChainId;
+      log('canonical chain is src', srcChainId);
+    } catch {
+      canonicalChain = destChainId;
+      log('canonical chain is dest', destChainId);
     }
   } else if (destCanonicalCheck !== zeroAddress) {
     // if the destination is not zero, we found a canonical address there
     canonicalTokenAddress = destCanonicalCheck;
     canonicalChain = srcChainId;
+    log('canonical info1', canonicalTokenAddress, canonicalChain);
   } else {
     // if the source is not zero, we found a canonical address there
     canonicalTokenAddress = srcCanonicalCheck;
     canonicalChain = destChainId;
+    log('canonical info2', canonicalTokenAddress, canonicalChain);
   }
   log('canonical info', canonicalTokenAddress, canonicalChain);
   return { canonicalTokenAddress, canonicalChain };