From 3beba214e62ad196bafd716cadaa3f133ecdb021 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Wed, 27 Mar 2024 09:59:44 +0100
Subject: [PATCH] feat(bridge-ui): retry dialog (#16536)

---
 .../Transactions/Dialogs/Claim.svelte         |  12 +-
 .../Dialogs/ClaimDialog/ClaimDialog.svelte    |  37 ++--
 .../ClaimSteps/ClaimConfirmStep.svelte        |  23 ++-
 .../Dialogs/RetryDialog/RetryDialog.svelte    | 172 ++++++++++++------
 .../RetryDialog/RetryStepNavigation.svelte    |  78 ++++++++
 .../RetrySteps/RetryOptionStep.svelte         |  50 +++++
 .../Transactions/Dialogs/RetryDialog/state.ts |   5 +
 .../Transactions/Dialogs/RetryDialog/types.ts |  17 ++
 .../Transactions/Status/Status.svelte         |  18 +-
 packages/bridge-ui/src/i18n/en.json           |  15 +-
 10 files changed, 338 insertions(+), 89 deletions(-)
 create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryStepNavigation.svelte
 create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetrySteps/RetryOptionStep.svelte
 create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/state.ts
 create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/types.ts

diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/Claim.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/Claim.svelte
index db38f7d7b3..53f0058d8d 100644
--- a/packages/bridge-ui/src/components/Transactions/Dialogs/Claim.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/Claim.svelte
@@ -2,6 +2,7 @@
   import { switchChain } from '@wagmi/core';
   import { log } from 'debug';
   import { createEventDispatcher } from 'svelte';
+  import type { Hash } from 'viem';
 
   import { bridges, type BridgeTransaction } from '$libs/bridge';
   import { NotConnectedError } from '$libs/error';
@@ -10,6 +11,9 @@
   import { account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
 
+  import { selectedRetryMethod } from './RetryDialog/state';
+  import { RETRY_OPTION } from './RetryDialog/types';
+
   const dispatch = createEventDispatcher();
 
   export let bridgeTx: BridgeTransaction;
@@ -49,7 +53,13 @@
       log(`Claiming ${bridgeTx.tokenType} for transaction`, bridgeTx);
 
       // Step 4: Call claim() method on the bridge
-      const txHash = await bridge.claim({ wallet, bridgeTx });
+      let txHash: Hash;
+      if ($selectedRetryMethod === RETRY_OPTION.RETRY_ONCE) {
+        log('Claiming with lastAttempt flag');
+        txHash = await bridge.claim({ wallet, bridgeTx, lastAttempt: true });
+      } else {
+        txHash = await bridge.claim({ wallet, bridgeTx });
+      }
 
       dispatch('claimingTxSent', { txHash, type: 'claim' });
     } catch (err) {
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimDialog.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimDialog.svelte
index a5c9405fef..863459cdee 100644
--- a/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimDialog.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimDialog.svelte
@@ -52,36 +52,35 @@
 
   export let nft: NFT | null = null;
 
+  export let proofReceipt: GetProofReceiptResponse;
+
+  export let activeStep: ClaimSteps = INITIAL_STEP;
+
+  export let bridgeTx: BridgeTransaction;
+
   export const handleClaimClick = async () => {
     claiming = true;
     await ClaimComponent.claim();
-    // claiming = false;
-  };
-
-  const handleAccountChange = () => {
-    activeStep = INITIAL_STEP;
   };
 
   let canContinue = false;
-
-  export let proofReceipt: GetProofReceiptResponse;
-
   let claiming: boolean;
   let claimingDone = false;
+  let ClaimComponent: Claim;
+  let txHash: Hash;
+
+  const handleAccountChange = () => {
+    activeStep = INITIAL_STEP;
+  };
 
   const closeDialog = () => {
     dialogOpen = false;
     reset();
   };
 
-  let ClaimComponent: Claim;
-
-  export let activeStep: ClaimSteps = INITIAL_STEP;
-
-  export let bridgeTx: BridgeTransaction;
-
   const handleClaimTxSent = async (event: CustomEvent<{ txHash: Hash; type: ClaimTypes }>) => {
-    const { txHash, type } = event.detail;
+    const { txHash: transactionHash, type } = event.detail;
+    txHash = transactionHash;
     log('handle claim tx sent', txHash, type);
     claiming = true;
 
@@ -135,10 +134,6 @@
         }),
       });
     }
-
-    //TODO: this could be just step 1 of 2, change text accordingly
-
-    // claiming = false;
   };
 
   const handleClaimError = (event: CustomEvent<{ error: unknown; type: ClaimTypes }>) => {
@@ -252,7 +247,7 @@
         <DialogStep
           stepIndex={ClaimSteps.REVIEW}
           currentStepIndex={activeStep}
-          isActive={activeStep === ClaimSteps.REVIEW}>{$t('transactions.claim.steps.review.name')}</DialogStep>
+          isActive={activeStep === ClaimSteps.REVIEW}>{$t('common.review')}</DialogStep>
         <DialogStep
           stepIndex={ClaimSteps.CONFIRM}
           currentStepIndex={activeStep}
@@ -270,6 +265,8 @@
         <ClaimReviewStep tx={bridgeTx} {nft} />
       {:else if activeStep === ClaimSteps.CONFIRM}
         <ClaimConfirmStep
+          {bridgeTx}
+          bind:txHash
           on:claim={handleClaimClick}
           bind:claiming
           bind:canClaim={canContinue}
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimSteps/ClaimConfirmStep.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimSteps/ClaimConfirmStep.svelte
index da671bc6f7..5439a888e3 100644
--- a/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimSteps/ClaimConfirmStep.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/ClaimDialog/ClaimSteps/ClaimConfirmStep.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
+  import type { Hash } from 'viem';
 
+  import { chainConfig } from '$chainConfig';
   import ActionButton from '$components/Button/ActionButton.svelte';
   import { Icon, type IconType } from '$components/Icon';
   import { Spinner } from '$components/Spinner';
-  import { connectedSourceChain } from '$stores/network';
+  import type { BridgeTransaction } from '$libs/bridge';
   import { theme } from '$stores/theme';
 
   import { TWO_STEP_STATE } from '../types';
@@ -16,7 +18,11 @@
 
   export let claiming = false;
 
-  export let proveOrClaimStep: TWO_STEP_STATE;
+  export let proveOrClaimStep: TWO_STEP_STATE | null;
+
+  export let bridgeTx: BridgeTransaction;
+
+  export let txHash: Hash;
 
   const dispatch = createEventDispatcher();
 
@@ -33,13 +39,20 @@
   };
 
   const getSuccessDescription = () => {
+    if (!txHash) return;
     if (proveOrClaimStep === TWO_STEP_STATE.PROVE) {
       return $t('bridge.step.confirm.success.prove_description');
     }
+    const explorer = chainConfig[Number(bridgeTx.destChainId)]?.blockExplorers?.default.url;
+    const url = `${explorer}/tx/${txHash}`;
 
-    return $t('transactions.actions.claim.success.message', { values: { network: $connectedSourceChain.name } });
+    successDescription = $t('transactions.actions.claim.success.message', { values: { url } });
   };
 
+  $: if (txHash && claimingDone) {
+    getSuccessDescription();
+  }
+
   $: claimOrProveActionButton =
     proveOrClaimStep === TWO_STEP_STATE.CLAIM
       ? $t('transactions.claim.steps.confirm.claim_button')
@@ -59,7 +72,7 @@
   $: successIcon = `success-${$theme}` as IconType;
 
   $: statusTitle = getSuccessTitle();
-  $: statusDescription = getSuccessDescription();
+  let successDescription = '';
 
   $: claimDisabled = !canClaim || claiming;
 </script>
@@ -74,7 +87,7 @@
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             <h1>{@html statusTitle}</h1>
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            <span class="">{@html statusDescription}</span>
+            <span class="">{@html successDescription}</span>
           </div>
         {:else if claiming}
           <Spinner class="!w-[160px] !h-[160px] text-primary-brand" />
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryDialog.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryDialog.svelte
index 63a7b7edf9..697168c4c0 100644
--- a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryDialog.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryDialog.svelte
@@ -1,61 +1,103 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
+  import type { Hash } from 'viem';
 
+  import { chainConfig } from '$chainConfig';
   import { CloseButton } from '$components/Button';
+  import { infoToast, successToast } from '$components/NotificationToast/NotificationToast.svelte';
+  import { OnAccount } from '$components/OnAccount';
   import { DialogStep, DialogStepper } from '$components/Transactions/Dialogs/Stepper';
   import type { BridgeTransaction } from '$libs/bridge';
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
+  import { getLogger } from '$libs/util/logger';
   import { uid } from '$libs/util/uid';
+  import { pendingTransactions } from '$stores/pendingTransactions';
+
+  import Claim from '../Claim.svelte';
+  import ClaimConfirmStep from '../ClaimDialog/ClaimSteps/ClaimConfirmStep.svelte';
+  import ClaimReviewStep from '../ClaimDialog/ClaimSteps/ClaimReviewStep.svelte';
+  import { TWO_STEP_STATE } from '../ClaimDialog/types';
+  import RetryStepNavigation from './RetryStepNavigation.svelte';
+  import RetryOptionStep from './RetrySteps/RetryOptionStep.svelte';
+  import { selectedRetryMethod } from './state';
+  import { INITIAL_STEP, RETRY_OPTION, RetrySteps } from './types';
 
   export let dialogOpen = false;
 
-  export let item: BridgeTransaction;
+  export let bridgeTx: BridgeTransaction;
+
+  export let loading = false;
 
-  // export let loading = false;
+  const log = getLogger('RetryDialog');
+  const dispatch = createEventDispatcher();
 
   const dialogId = `dialog-${uid()}`;
 
+  export let activeStep: RetrySteps = RetrySteps.SELECT;
+
+  let canContinue = false;
+  let retrying: boolean;
+  let retryDone = false;
+  let ClaimComponent: Claim;
+
+  let txHash: Hash;
+
+  const handleRetryError = () => {
+    retrying = false;
+  };
+
+  const handleAccountChange = () => {
+    reset();
+  };
+
+  const reset = () => {
+    activeStep = INITIAL_STEP;
+    $selectedRetryMethod = RETRY_OPTION.CONTINUE;
+    retryDone = false;
+  };
+
   const closeDialog = () => {
     dialogOpen = false;
+    reset();
   };
 
-  const enum ClaimSteps {
-    INFO,
-    REVIEW,
-    CONFIRM,
-  }
-
-  export let activeStep: ClaimSteps = ClaimSteps.INFO;
-
-  let nextStepButtonText: string;
-
-  // const getStepText = () => {
-  //   if (activeStep === ClaimSteps.INFO) {
-  //     return $t('common.confirm');
-  //   }
-  //   if (activeStep === ClaimSteps.REVIEW) {
-  //     return $t('common.ok');
-  //   } else {
-  //     return $t('common.continue');
-  //   }
-  // };
-
-  const handleNextStep = () => {
-    if (activeStep === ClaimSteps.INFO) {
-      activeStep = ClaimSteps.REVIEW;
-    } else if (activeStep === ClaimSteps.REVIEW) {
-      activeStep = ClaimSteps.CONFIRM;
-    } else if (activeStep === ClaimSteps.CONFIRM) {
-      activeStep = ClaimSteps.INFO;
-    }
+  export const handleClaimClick = async () => {
+    retrying = true;
+    await ClaimComponent.claim();
   };
 
-  const handlePreviousStep = () => {
-    if (activeStep === ClaimSteps.REVIEW) {
-      activeStep = ClaimSteps.INFO;
-    } else if (activeStep === ClaimSteps.CONFIRM) {
-      activeStep = ClaimSteps.REVIEW;
-    }
+  const handleRetryTxSent = async (event: CustomEvent<{ txHash: Hash }>) => {
+    const { txHash: transactionHash } = event.detail;
+    txHash = transactionHash;
+    log('handle claim tx sent', txHash);
+    retrying = true;
+
+    const explorer = chainConfig[Number(bridgeTx.destChainId)]?.blockExplorers?.default.url;
+    log('explorer', explorer);
+    infoToast({
+      title: $t('transactions.actions.claim.tx.title'),
+      message: $t('transactions.actions.claim.tx.message', {
+        values: {
+          token: bridgeTx.symbol,
+          url: `${explorer}/tx/${txHash}`,
+        },
+      }),
+    });
+    await pendingTransactions.add(txHash, Number(bridgeTx.destChainId));
+
+    retryDone = true;
+
+    dispatch('retryDone');
+
+    successToast({
+      title: $t('transactions.actions.claim.success.title'),
+      message: $t('transactions.actions.claim.tx.message', {
+        values: {
+          url: `${explorer}/tx/${txHash}`,
+        },
+      }),
+    });
   };
 </script>
 
@@ -67,30 +109,52 @@
   <div class="modal-box relative px-6 py-[35px] w-full bg-neutral-background absolute">
     <CloseButton onClick={closeDialog} />
     <div class="w-full">
-      <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>
-      {item}
-      <DialogStepper on:click={() => handlePreviousStep()}>
-        <DialogStep stepIndex={ClaimSteps.INFO} currentStepIndex={activeStep} isActive={activeStep === ClaimSteps.INFO}
-          >{$t('bridge.step.import.title')}</DialogStep>
+      <h3 class="title-body-bold mb-7">{$t('transactions.retry.steps.title')}</h3>
+      <DialogStepper>
         <DialogStep
-          stepIndex={ClaimSteps.REVIEW}
+          stepIndex={RetrySteps.SELECT}
           currentStepIndex={activeStep}
-          isActive={activeStep === ClaimSteps.REVIEW}>{$t('bridge.step.review.title')}</DialogStep>
+          isActive={activeStep === RetrySteps.SELECT}>{$t('transactions.retry.steps.select.title')}</DialogStep>
         <DialogStep
-          stepIndex={ClaimSteps.CONFIRM}
+          stepIndex={RetrySteps.REVIEW}
           currentStepIndex={activeStep}
-          isActive={activeStep === ClaimSteps.CONFIRM}>{$t('bridge.step.confirm.title')}</DialogStep>
+          isActive={activeStep === RetrySteps.REVIEW}>{$t('common.review')}</DialogStep>
+        <DialogStep
+          stepIndex={RetrySteps.CONFIRM}
+          currentStepIndex={activeStep}
+          isActive={activeStep === RetrySteps.CONFIRM}>{$t('common.confirm')}</DialogStep>
       </DialogStepper>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. A inventore, beatae aliquid quidem consectetur fuga?
-        Inventore ab dolorum reprehenderit possimus quidem voluptatem, rem repellat, laudantium fugit doloribus
-        aspernatur esse perferendis!
-      </p>
-      <div class="f-col text-left">
-        <button on:click={handleNextStep} class="btn btn-primary mt-5">{nextStepButtonText}</button>
-        <button on:click={handlePreviousStep} class="link mt-5 ml-3">{$t('common.back')}</button>
+
+      {#if activeStep === RetrySteps.SELECT}
+        <RetryOptionStep bind:canContinue />
+      {:else if activeStep === RetrySteps.REVIEW}
+        <ClaimReviewStep bind:tx={bridgeTx} />
+      {:else if activeStep === RetrySteps.CONFIRM}
+        <ClaimConfirmStep
+          {bridgeTx}
+          bind:txHash
+          on:claim={handleClaimClick}
+          bind:claiming={retrying}
+          bind:canClaim={canContinue}
+          bind:claimingDone={retryDone}
+          proveOrClaimStep={TWO_STEP_STATE.CLAIM} />
+      {/if}
+      <div class="f-col text-left self-end h-full w-full">
+        <div class="f-col gap-4 mt-[20px]">
+          <RetryStepNavigation
+            bind:activeStep
+            bind:canContinue
+            bind:loading
+            bind:retrying
+            on:closeDialog={closeDialog}
+            bind:retryDone />
+        </div>
       </div>
     </div>
   </div>
   <button class="overlay-backdrop" data-modal-uuid={dialogId} />
 </dialog>
+
+<Claim bind:bridgeTx bind:this={ClaimComponent} on:error={handleRetryError} on:claimingTxSent={handleRetryTxSent} />
+
+<OnAccount change={handleAccountChange} />
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryStepNavigation.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryStepNavigation.svelte
new file mode 100644
index 0000000000..0ed446225e
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetryStepNavigation.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  import { ActionButton } from '$components/Button';
+  import { StepBack } from '$components/Stepper';
+
+  import { INITIAL_STEP, RetrySteps } from './types';
+
+  const dispatch = createEventDispatcher();
+
+  export let activeStep: RetrySteps;
+  export let loading = false;
+  export let canContinue = false;
+  export let retryDone = false;
+  export let retrying = false;
+
+  const getNextStepText = (step: RetrySteps) => {
+    if (step === RetrySteps.REVIEW) {
+      return $t('common.confirm');
+    }
+    if (step === RetrySteps.CONFIRM) {
+      return $t('common.ok');
+    } else {
+      return $t('common.continue');
+    }
+  };
+
+  const getPrevStepText = (step: RetrySteps) => {
+    if (step === INITIAL_STEP) {
+      return $t('common.cancel');
+    }
+    return $t('common.back');
+  };
+
+  const handleNextStep = () => {
+    if (activeStep === INITIAL_STEP) {
+      activeStep = RetrySteps.REVIEW;
+    } else if (activeStep === RetrySteps.REVIEW) {
+      activeStep = RetrySteps.CONFIRM;
+    } else if (activeStep === RetrySteps.CONFIRM) {
+      dispatch('closeDialog');
+    }
+  };
+
+  const handlePreviousStep = () => {
+    if (activeStep === INITIAL_STEP) {
+      dispatch('closeDialog');
+    }
+    if (activeStep === RetrySteps.REVIEW) {
+      activeStep = RetrySteps.SELECT;
+    } else if (activeStep === RetrySteps.CONFIRM) {
+      activeStep = RetrySteps.REVIEW;
+    }
+  };
+
+  $: nextStepButtonText = getNextStepText(activeStep);
+  $: prevStepButtonText = getPrevStepText(activeStep);
+
+  $: if (activeStep) {
+    getPrevStepText(activeStep);
+    getNextStepText(activeStep);
+  }
+
+  $: isNextStepEnabled = !canContinue || loading || (activeStep === RetrySteps.CONFIRM && !retryDone);
+</script>
+
+{#if activeStep !== RetrySteps.CONFIRM}
+  <div class="h-sep" />
+  <ActionButton onPopup priority="primary" disabled={isNextStepEnabled} {loading} on:click={handleNextStep}
+    >{nextStepButtonText}</ActionButton>
+{:else if activeStep === RetrySteps.CONFIRM && retryDone}
+  <ActionButton onPopup priority="primary" disabled={isNextStepEnabled} {loading} on:click={handleNextStep}
+    >{nextStepButtonText}</ActionButton>
+{/if}
+{#if !retryDone && !retrying}
+  <StepBack on:click={handlePreviousStep}>{prevStepButtonText}</StepBack>
+{/if}
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetrySteps/RetryOptionStep.svelte b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetrySteps/RetryOptionStep.svelte
new file mode 100644
index 0000000000..c4e1d6c37b
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/RetrySteps/RetryOptionStep.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import { selectedRetryMethod } from '../state';
+  import { RETRY_OPTION } from '../types';
+
+  export let canContinue = false;
+
+  $: if (selectedRetryMethod !== undefined && selectedRetryMethod !== null) {
+    canContinue = true;
+  } else {
+    canContinue = false;
+  }
+</script>
+
+<div class="container mx-auto inline-block align-middle space-y-[25px] w-full mt-[20px]">
+  <div class="flex justify-between mb-2 items-center">
+    <div class="font-bold text-primary-content">{$t('transactions.claim.steps.pre_check.title')}</div>
+  </div>
+  <p>
+    Your transaction has failed on chain. This could have several reasons. You can now retry as often as you want or
+    only retry once more, then get the option to release the funds back on the original chain.
+  </p>
+
+  <div class="font-bold text-primary-content">Please select your preferred option:</div>
+  <div class="space-y-4">
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <span class="">Retry and keep retrying</span>
+        <input
+          type="radio"
+          class="radio radio-primary-brand checked:bg-primary-brand"
+          value={RETRY_OPTION.CONTINUE}
+          checked
+          bind:group={$selectedRetryMethod} />
+      </label>
+    </div>
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <span class="">Retry one final time</span>
+        <input
+          type="radio"
+          class="radio radio-primary-brand checked:bg-primary-brand"
+          value={RETRY_OPTION.RETRY_ONCE}
+          checked
+          bind:group={$selectedRetryMethod} />
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/state.ts b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/state.ts
new file mode 100644
index 0000000000..796b75a71f
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/state.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+import { RETRY_OPTION } from './types';
+
+export const selectedRetryMethod = writable<RETRY_OPTION>(RETRY_OPTION.CONTINUE);
diff --git a/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/types.ts b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/types.ts
new file mode 100644
index 0000000000..5d2562bc92
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/Dialogs/RetryDialog/types.ts
@@ -0,0 +1,17 @@
+export const enum RetrySteps {
+  SELECT,
+  REVIEW,
+  CONFIRM,
+}
+
+export const INITIAL_STEP = RetrySteps.SELECT;
+
+export const enum RetryStatus {
+  PENDING,
+  DONE,
+}
+
+export const enum RETRY_OPTION {
+  CONTINUE,
+  RETRY_ONCE,
+}
diff --git a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
index 06739d1cf8..9fab4a673b 100644
--- a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
@@ -17,7 +17,7 @@
   import { connectedSourceChain } from '$stores/network';
 
   import ClaimDialog from '../Dialogs/ClaimDialog/ClaimDialog.svelte';
-  // import RetryDialog from '../Dialogs/RetryDialog/RetryDialog.svelte';
+  import RetryDialog from '../Dialogs/RetryDialog/RetryDialog.svelte';
 
   export let bridgeTx: BridgeTransaction;
   export let nft: NFT | null = null;
@@ -59,8 +59,12 @@
     bridgeTxStatus = bridgeTx.msgStatus = status;
   }
 
-  async function retry() {
-    // retryModalOpen = true;
+  async function handleRetryClick() {
+    isBridgePaused().then((paused) => {
+      if (paused) throw new BridgePausedError('Bridge is paused');
+    });
+    if (!$connectedSourceChain || !$account?.address) return;
+    retryModalOpen = true;
   }
 
   async function handleClaimClick() {
@@ -85,6 +89,7 @@
   }
 
   $: claimModalOpen = false;
+  $: retryModalOpen = false;
 
   $: hasValidProofReceipt = proofReceipt && proofReceipt[1] !== zeroAddress ? true : false;
 
@@ -145,14 +150,14 @@
       {$t('transactions.button.prove')}
     </button>
   {:else if bridgeTxStatus === MessageStatus.RETRIABLE}
-    <button class="status-btn" on:click={retry}>
+    <button class="status-btn" on:click={handleRetryClick}>
       {$t('transactions.button.retry')}
     </button>
   {:else if bridgeTxStatus === MessageStatus.DONE}
     <StatusDot type="success" />
     <span>{$t('transactions.status.claimed.name')}</span>
   {:else if bridgeTxStatus === MessageStatus.FAILED}
-    <button class="status-btn" on:click={release}>
+    <button class="status-btn" on:click={release} on:click={handleRetryClick}>
       {$t('transactions.button.release')}
     </button>
   {:else}
@@ -162,7 +167,8 @@
   {/if}
 </div>
 
-<!-- <RetryDialog item={bridgeTx} bind:loading bind:dialogOpen={retryModalOpen} /> -->
+<RetryDialog {bridgeTx} bind:dialogOpen={retryModalOpen} />
+
 <ClaimDialog
   {bridgeTx}
   bind:polling
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index eecf2a8c88..43954bd40c 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/packages/bridge-ui/src/i18n/en.json
@@ -166,7 +166,7 @@
         "checking_status": "Checking the approval status",
         "processing": "Processing...",
         "success": {
-          "claim": "Claimed successfully",
+          "claim": "Claim transaction sent successfully",
           "claim_description": "You",
           "prove": "Proof submitted",
           "prove_description": "You have submitted your proof. Wait for the delay to pass, then you can claim your funds"
@@ -238,6 +238,7 @@
     "not_available_short": "N/A",
     "ok": "Okay",
     "recipient": "Recipient",
+    "review": "Review",
     "sender": "Sender",
     "status": "Status",
     "success": "Success",
@@ -421,7 +422,7 @@
           "title": "Request to claim rejected."
         },
         "success": {
-          "message": "Your funds have been successfully claimed on {network}.",
+          "message": "Your transaction has been processed. Check the status in your wallet or the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
           "title": "Transaction completed"
         },
         "tx": {
@@ -472,7 +473,7 @@
           }
         },
         "review": {
-          "name": "Prerequisites",
+          "name": "Review",
           "title": "Claim Transaction details"
         },
         "title": "Claim your assets"
@@ -507,6 +508,14 @@
       "explorer_short": "View"
     },
     "no_transactions": "No transactions found",
+    "retry": {
+      "steps": {
+        "select": {
+          "title": "Select"
+        },
+        "title": "Retry claiming"
+      }
+    },
     "status": {
       "claim": {
         "description": "Your asset is now ready for claiming on the destination chain and requires a transaction. If you have set a processing fee, the relayer will automatically handle the claiming process on your behalf.",