Merge branch 'main' into dependabot/npm_and_yarn/vitest/coverage-v8-1…

….4.0

.github/workflows/blobstorage-preview.yml

@@ -0,0 +1,33 @@
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_BLOBSTORAGE }}
+
+on:
+  push:
+    branches-ignore:
+      - main
+      - release-please-*
+    paths:
+      - "packages/blobstorage/**"
+
+jobs:
+  Deploy-Preview:
+    runs-on: [taiko-runner]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm dependencies
+        uses: ./.github/actions/install-pnpm-dependencies
+
+      - name: Install Vercel CLI
+        run: pnpm add --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/blobstorage-production.yml

@@ -0,0 +1,30 @@
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_BLOBSTORAGE }}
+
+on:
+  push:
+    tags:
+      - "blobstorage-*"
+
+jobs:
+  Deploy-Production:
+    runs-on: [taiko-runner]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm dependencies
+        uses: ./.github/actions/install-pnpm-dependencies
+
+      - name: Install Vercel CLI
+        run: pnpm add --global vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/bridge-ui-preview.yml

@@ -1,6 +1,7 @@
+name: Vercel Preview Deployment
+
 env:
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_BRIDGE_UI }}
+  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
 
 on:
   push:
@@ -13,21 +14,24 @@ on:
 jobs:
   Deploy-Preview:
     runs-on: [taiko-runner]
+    strategy:
+      matrix:
+        include:
+          - project: "Public"
+            org_id: ${{ secrets.VERCEL_ORG_ID}}
+            project_id: ${{ secrets.VERCEL_PROJECT_ID_BRIDGE_UI}}
+          - project: "Internal"
+            org_id: ${{ secrets.VERCEL_ORG_ID }}
+            project_id: ${{ secrets.VERCEL_PROJECT_ID_BRIDGE_UI_INTERNAL}}
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install pnpm dependencies
-        uses: ./.github/actions/install-pnpm-dependencies
-
+      - uses: actions/checkout@v2
       - name: Install Vercel CLI
-        run: pnpm add --global vercel@latest
-
-      - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
-
-      - name: Build Project Artifacts
+        run: npm install --global vercel@latest
+      - name: Setup Vercel Environment for ${{ matrix.project }}
+        run: |
+          vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ matrix.org_id }} --project-id=${{ matrix.project_id }}
+          vercel link --token=${{ secrets.VERCEL_TOKEN }} --confirm --name=${{ matrix.project }} --scope=${{ matrix.org_id }}
+      - name: Build Project Artifacts for ${{ matrix.project }}
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
-
-      - name: Deploy Project Artifacts to Vercel
+      - name: Deploy Project Artifacts to Vercel for ${{ matrix.project }}
         run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -117,3 +117,4 @@ __pycache__/
 # VSCode
 .vscode/launch.json
 packages/protocol/config.js
+.vercel

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) {

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}

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" />