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 @@ {$t('transactions.claim.steps.review.name')} + isActive={activeStep === ClaimSteps.REVIEW}>{$t('common.review')} {:else if activeStep === ClaimSteps.CONFIRM} 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; @@ -74,7 +87,7 @@

{@html statusTitle}

- {@html statusDescription} + {@html successDescription} {:else if claiming} 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 @@ @@ -67,30 +109,52 @@ - + + here.", "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.",