fix(bridge-ui): fix claiming for recipients that do not match srcOwner (

#17576)
taikoxyz · Jun 13, 2024 · 6eaaa12 · 6eaaa12
1 parent bfeadd8
commit 6eaaa12
Show file tree

Hide file tree

Showing 24 changed files with 202 additions and 114 deletions.
diff --git a/packages/bridge-ui/src/app.config.ts b/packages/bridge-ui/src/app.config.ts
@@ -42,7 +42,7 @@ export const toastConfig = {
 };
 
 export const apiService = {
-  timeout: 5000,
+  timeout: 10_000, // 10 seconds
 };
 
 export const ipfsConfig = {

diff --git a/...-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte b/...-ui/src/components/Bridge/SharedBridgeComponents/ConfirmationStep/ConfirmationStep.svelte
@@ -90,7 +90,7 @@
     }
 
     const bridgeTx = {
-      hash: txHash,
+      srcTxHash: txHash,
       from: $account.address,
       amount: $enteredAmount,
       symbol: $selectedToken?.symbol,

diff --git a/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte b/packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte
@@ -56,7 +56,7 @@
   };
 
   let force = false;
-  let canForceTransaction = false;
+  // let canForceTransaction = false;
   let canContinue = false;
   let claiming: boolean;
   let claimingDone = false;
@@ -124,7 +124,7 @@
   const handleClaimError = (event: CustomEvent<{ error: unknown; action: ClaimAction }>) => {
     //TODO: update this to display info alongside toasts
     const err = event.detail.error;
-    canForceTransaction = true;
+    // canForceTransaction = true;
     switch (true) {
       case err instanceof NotConnectedError:
         warningToast({ title: $t('messages.account.required') });
@@ -172,7 +172,7 @@
   const reset = () => {
     activeStep = INITIAL_STEP;
     claimingDone = false;
-    canForceTransaction = false;
+    // canForceTransaction = false;
   };
 
   let previousStep: ClaimSteps;
@@ -204,7 +204,7 @@
           isActive={activeStep === ClaimSteps.CONFIRM}>{$t('bridge.step.confirm.title')}</DialogStep>
       </DialogStepper>
       {#if activeStep === ClaimSteps.CHECK}
-        <ClaimPreCheck tx={bridgeTx} bind:canContinue bind:hideContinueButton />
+        <ClaimPreCheck tx={bridgeTx} bind:canContinue bind:hideContinueButton on:closeDialog={closeDialog} />
       {:else if activeStep === ClaimSteps.REVIEW}
         <ReviewStep tx={bridgeTx} {nft} />
       {:else if activeStep === ClaimSteps.CONFIRM}
@@ -214,11 +214,6 @@
           on:claim={handleClaimClick}
           bind:claiming
           bind:canClaim={canContinue}
-          {canForceTransaction}
-          on:forceClaim={() => {
-            force = true;
-            handleClaimClick();
-          }}
           bind:claimingDone />
       {/if}
       <div class="f-col text-left self-end h-full w-full">

diff --git a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte
@@ -138,7 +138,7 @@
       </DialogStepper>
 
       {#if activeStep === RetrySteps.CHECK}
-        <ClaimPreCheck tx={bridgeTx} bind:canContinue bind:hideContinueButton />
+        <ClaimPreCheck tx={bridgeTx} bind:canContinue bind:hideContinueButton on:closeDialog={closeDialog} />
       {:else if activeStep === RetrySteps.SELECT}
         <RetryOptionStep bind:canContinue />
       {:else if activeStep === RetrySteps.REVIEW}

diff --git a/packages/bridge-ui/src/components/Dialogs/Shared/ClaimConfirmStep.svelte b/packages/bridge-ui/src/components/Dialogs/Shared/ClaimConfirmStep.svelte
@@ -20,17 +20,17 @@
 
   export let txHash: Hash;
 
-  export let canForceTransaction = false;
+  // export let canForceTransaction = false;
 
   const dispatch = createEventDispatcher();
 
   const handleClaimClick = async () => {
     dispatch('claim');
   };
 
-  const handleForceClaim = async () => {
-    dispatch('forceClaim');
-  };
+  // const handleForceClaim = async () => {
+  //   dispatch('forceClaim');
+  // };
 
   const getSuccessTitle = () => {
     return $t('bridge.step.confirm.success.claim');
@@ -93,16 +93,15 @@
           priority="primary"
           loading={claiming}
           on:click={() => handleClaimClick()}
-          disabled={claimDisabled || canForceTransaction}
-          >{$t('transactions.claim.steps.confirm.claim_button')}</ActionButton>
-        {#if canForceTransaction}
+          disabled={claimDisabled}>{$t('transactions.claim.steps.confirm.claim_button')}</ActionButton>
+        <!-- {#if canForceTransaction}
           <ActionButton
             onPopup
             priority="primary"
             loading={claiming}
             on:click={() => handleForceClaim()}
             disabled={claimDisabled}>Force transaction</ActionButton>
-        {/if}
+        {/if} -->
       </section>
     {/if}
   </div>

diff --git a/packages/bridge-ui/src/components/Dialogs/Shared/ClaimPreCheck.svelte b/packages/bridge-ui/src/components/Dialogs/Shared/ClaimPreCheck.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { getBalance, switchChain } from '@wagmi/core';
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { type Address, parseEther } from 'viem';
+  import { type Address, getAddress, parseEther } from 'viem';
 
+  import Alert from '$components/Alert/Alert.svelte';
   import { ActionButton } from '$components/Button';
   import { Icon } from '$components/Icon';
   import Spinner from '$components/Spinner/Spinner.svelte';
@@ -12,6 +13,7 @@
   import { type BridgeTransaction } from '$libs/bridge';
   import { checkEnoughBridgeQuotaForClaim } from '$libs/bridge/checkBridgeQuota';
   import { getChainName, isL2Chain } from '$libs/chain';
+  import { shortenAddress } from '$libs/util/shortenAddress';
   import { config } from '$libs/wagmi';
   import { account } from '$stores/account';
   import { connectedSourceChain, switchingNetwork } from '$stores/network';
@@ -20,6 +22,12 @@
   export let canContinue = false;
   export let hideContinueButton = false;
 
+  export const closeDialog = () => {
+    dispatch('closeDialog');
+  };
+
+  const dispatch = createEventDispatcher();
+
   let checkingPrerequisites: boolean;
 
   const switchChains = async () => {
@@ -78,7 +86,7 @@
 
   $: successFullPreChecks = correctChain && hasEnoughEth && hasEnoughQuota;
 
-  $: if (!checkingPrerequisites && successFullPreChecks && $account) {
+  $: if (!checkingPrerequisites && successFullPreChecks && $account && !differentRecipient) {
     hideContinueButton = false;
     canContinue = true;
   } else {
@@ -93,6 +101,17 @@
   $: hasEnoughEth = false;
   $: hasEnoughQuota = false;
 
+  $: hasPaidProcessingFee = tx.processingFee > 0;
+
+  $: differentRecipient = false;
+  $: if (tx.message?.destOwner && $account?.address) {
+    if (getAddress(tx.message.destOwner) === getAddress($account?.address)) {
+      differentRecipient = false;
+    } else {
+      differentRecipient = true;
+    }
+  }
+
   onMount(() => {
     checkConditions();
   });
@@ -103,62 +122,90 @@
     <div class="font-bold text-primary-content">{$t('transactions.claim.steps.pre_check.title')}</div>
   </div>
   <div class="min-h-[150px] grid content-between">
-    <div>
+    {#if differentRecipient}
       <div class="f-between-center">
         <div class="f-row gap-1">
-          <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.chain_check')}</span>
-          <Tooltip>
-            <h2>{$t('transactions.claim.steps.pre_check.tooltip.chain.title')}</h2>
-
-            <span>{$t('transactions.claim.steps.pre_check.tooltip.chain.description')}</span>
-          </Tooltip>
+          <div class="f-col">
+            <Alert type="info"
+              >{$t('transactions.claim.steps.pre_check.different_recipient')}
+              <div class="h-sep" />
+              <span class="font-bold">{$t('common.recipient')}: </span>{shortenAddress(tx.message?.destOwner, 6, 4)}
+            </Alert>
+          </div>
         </div>
-
         {#if checkingPrerequisites}
           <Spinner />
-        {:else if correctChain}
-          <Icon type="check-circle" fillClass="fill-positive-sentiment" />
         {:else}
           <Icon type="x-close-circle" fillClass="fill-negative-sentiment" />
         {/if}
       </div>
-      <div class="f-between-center">
-        <div class="f-row gap-1">
-          <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.funds_check')}</span>
-          <Tooltip>
-            <h2>{$t('transactions.claim.steps.pre_check.tooltip.funds.title')}</h2>
-            <span>{$t('transactions.claim.steps.pre_check.tooltip.funds.description')} </span>
-          </Tooltip>
+    {:else}
+      <div>
+        <div class="f-between-center">
+          <div class="f-row gap-1">
+            <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.chain_check')}</span>
+            <Tooltip>
+              <h2>{$t('transactions.claim.steps.pre_check.tooltip.chain.title')}</h2>
+
+              <span>{$t('transactions.claim.steps.pre_check.tooltip.chain.description')}</span>
+            </Tooltip>
+          </div>
+          {#if checkingPrerequisites}
+            <Spinner />
+          {:else if correctChain}
+            <Icon type="check-circle" fillClass="fill-positive-sentiment" />
+          {:else}
+            <Icon type="x-close-circle" fillClass="fill-negative-sentiment" />
+          {/if}
         </div>
-        {#if checkingPrerequisites}
-          <Spinner />
-        {:else if hasEnoughEth}
-          <Icon type="check-circle" fillClass="fill-positive-sentiment" />
-        {:else}
-          <Icon type="x-close-circle" fillClass="fill-negative-sentiment" />
-        {/if}
-      </div>
-      {#if isL2Chain(Number(tx.srcChainId))}
         <div class="f-between-center">
           <div class="f-row gap-1">
-            <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.quota_check')}</span>
+            <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.funds_check')}</span>
             <Tooltip>
-              <h2>{$t('transactions.claim.steps.pre_check.tooltip.quota.title')}</h2>
-              <span>{$t('transactions.claim.steps.pre_check.tooltip.quota.description')} </span>
+              <h2>{$t('transactions.claim.steps.pre_check.tooltip.funds.title')}</h2>
+              <span>{$t('transactions.claim.steps.pre_check.tooltip.funds.description')} </span>
             </Tooltip>
           </div>
           {#if checkingPrerequisites}
             <Spinner />
-          {:else if hasEnoughQuota}
+          {:else if hasEnoughEth}
             <Icon type="check-circle" fillClass="fill-positive-sentiment" />
           {:else}
             <Icon type="x-close-circle" fillClass="fill-negative-sentiment" />
           {/if}
         </div>
-      {/if}
-    </div>
+        {#if isL2Chain(Number(tx.srcChainId))}
+          <div class="f-between-center">
+            <div class="f-row gap-1">
+              <span class="text-secondary-content">{$t('transactions.claim.steps.pre_check.quota_check')}</span>
+              <Tooltip>
+                <h2>{$t('transactions.claim.steps.pre_check.tooltip.quota.title')}</h2>
+                <span>{$t('transactions.claim.steps.pre_check.tooltip.quota.description')} </span>
+              </Tooltip>
+            </div>
+            {#if checkingPrerequisites}
+              <Spinner />
+            {:else if hasEnoughQuota}
+              <Icon type="check-circle" fillClass="fill-positive-sentiment" />
+            {:else}
+              <Icon type="x-close-circle" fillClass="fill-negative-sentiment" />
+            {/if}
+          </div>
+        {/if}
+        {#if hasPaidProcessingFee}
+          <div class="h-sep" />
+          <div class="f-between-center">
+            {#if checkingPrerequisites}
+              <Spinner />
+            {:else}
+              <Alert type="info">{$t('transactions.claim.steps.pre_check.tooltip.processing_fee.description')}</Alert>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
   </div>
-  {#if !canContinue && !correctChain}
+  {#if !canContinue && !correctChain && !differentRecipient}
     <div class="h-sep" />
     <div class="f-col space-y-[16px]">
       <ActionButton
@@ -170,5 +217,15 @@
           switchChains();
         }}>{$t('common.switch_to')} {txDestChainName}</ActionButton>
     </div>
+  {:else if !canContinue}
+    <div class="h-sep" />
+    <div class="f-col space-y-[16px]">
+      <ActionButton
+        onPopup
+        priority="primary"
+        on:click={() => {
+          closeDialog();
+        }}>{$t('common.ok')}</ActionButton>
+    </div>
   {/if}
 </div>
diff --git a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
@@ -201,7 +201,7 @@
             <h4 class="text-secondary-content">{$t('transactions.header.explorer')}</h4>
             <a
               class="flex justify-start content-center link"
-              href={`${chainConfig[Number(selectedItem.srcChainId)]?.blockExplorers?.default.url}/tx/${selectedItem.hash}`}
+              href={`${chainConfig[Number(selectedItem.srcChainId)]?.blockExplorers?.default.url}/tx/${selectedItem.srcTxHash}`}
               target="_blank">
               {$t('transactions.link.explorer')}
               <Icon type="arrow-top-right" />

diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -69,7 +69,7 @@
     loading = true;
     try {
       token = await mapTransactionHashToNFT({
-        hash: item.hash,
+        hash: item.srcTxHash,
         srcChainId: Number(item.srcChainId),
         type: item.tokenType,
       });
@@ -194,7 +194,7 @@
     <div class="hidden md:flex grow py-2 flex flex-col justify-center">
       <a
         class="flex justify-center py-3 link"
-        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.hash}`}
+        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.srcTxHash}`}
         target="_blank">
         {$t('transactions.link.explorer')}
         <Icon type="arrow-top-right" fillClass="fill-primary-link" />
@@ -254,7 +254,7 @@
     <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
       <a
         class="flex justify-start py-3 link"
-        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.hash}`}
+        href={`${chainConfig[Number(item.srcChainId)]?.blockExplorers?.default.url}/tx/${item.srcTxHash}`}
         target="_blank">
         {$t('transactions.link.explorer')}
         <Icon type="arrow-top-right" fillClass="fill-primary-link" />

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -244,7 +244,7 @@
           <div
             class="flex flex-col items-center"
             style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
-            {#each transactionsToShow as item (item.hash)}
+            {#each transactionsToShow as item (item.srcTxHash)}
               <Transaction {item} />
               <div class="h-sep !my-0 {isDesktopOrLarger ? 'display-inline' : 'hidden'}" />
             {/each}

diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
@@ -491,6 +491,7 @@
         },
         "pre_check": {
           "chain_check": "Connected to the correct chain",
+          "different_recipient": "The recipient of this transaction does not match the sender or the currently connected wallet. To  manually claim, please connect to the recipient's wallet.",
           "funds_check": "Sufficient funds to claim",
           "quota_check": "Sufficient daily quota",
           "ready": "You can continue with the claim process!",
@@ -506,6 +507,9 @@
               "description": "In order to claim the transaction yourself, you need enough funds on the destination chain (>= 0.0015 ETH). If you've kept the default processing fee, the relayer will likely claim for you soon.",
               "title": "What is \"Sufficient funds to claim\"?"
             },
+            "processing_fee": {
+              "description": "A processing fee has been set for this transaction. If the fee is high enough, a relayer may claim it automatically. Regardless, you can choose to manually claim the transaction. Note that the fee is non-refundable."
+            },
             "quota": {
               "description": "Currently there is a daily limit of how much of this asset can be bridged to L1. If the quota is reached, please try again the next day.",
               "title": "What is \"Sufficient daily quota\"?"