Merge pull request #4 from agglayer/asam/fix-claim-flow

Update claim flow

Author: shan8851

app/components/bridge/bridge-transaction-modal/bridge-success-view.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { Button } from '@/app/components/ui/button';
 import { CopyText } from '@/app/components/copyText';
 import { ROUTES } from '@/app/constants/routes';
+import { useRefetch } from '@/app/context/refetch';
 import { shortenAddress } from '@/app/utils/address';
 
 interface BridgeSuccessViewProps {
@@ -16,11 +17,13 @@ interface BridgeSuccessViewProps {
 
 export const BridgeSuccessView = ({ hash, explorerUrl, onClose }: BridgeSuccessViewProps) => {
   const router = useRouter();
+  const { triggerAggressiveRefetch } = useRefetch();
 
   const handleGoToTransactions = useCallback(() => {
+    triggerAggressiveRefetch();
     onClose();
     router.push(ROUTES.TRANSACTIONS);
-  }, [onClose, router]);
+  }, [onClose, router, triggerAggressiveRefetch]);
 
   return (
     <div className="flex flex-col gap-3">

app/components/mode-switch.tsx

@@ -21,8 +21,7 @@ export const ModeSwitch = () => {
         .map((value) => ({
           value,
           label: APP_MODE_CONFIG[value].label,
-        }))
-        .slice(0, 2),
+        })),
     [enabledModes, mode],
   );
 

app/components/transactions/transactions-details-modal/transaction-details-modal-header.tsx

@@ -17,44 +17,17 @@ export const TxDetailsHeader = ({
   formattedAmount,
 }: TxDetailsHeaderProps) => {
   return (
-    <div className="w-full rounded-xl border border-border bg-surface-muted px-4 py-4 shadow-xs">
-      <div className="flex items-center gap-3">
-        <div className="min-w-0 flex-1">
-          <div className="text-[10px] font-semibold uppercase tracking-wide text-muted/80">From</div>
-          <div className="mt-1 flex min-w-0 items-center gap-2">
-            {sourceChain?.icon && (
-              <BadgeImageFallback
-                src={sourceChain.icon}
-                size="sm"
-                fallbackText={sourceChain.name}
-                className="shrink-0"
-              />
-            )}
-            <span className="truncate font-semibold text-black">{sourceChain?.name ?? '-'}</span>
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          <span className="h-2 w-2 rounded-full bg-border" />
-          <span className="h-px w-12 bg-border" />
-          <ArrowRight className="size-6 text-muted" />
-          <span className="h-px w-12 bg-border" />
-          <span className="h-2 w-2 rounded-full bg-border" />
-        </div>
-        <div className="min-w-0 flex-1 text-right">
-          <div className="text-[10px] font-semibold uppercase tracking-wide text-muted/80">To</div>
-          <div className="mt-1 flex min-w-0 items-center justify-end gap-2">
-            <span className="truncate font-semibold text-black">{destChain?.name ?? '-'}</span>
-            {destChain?.icon && (
-              <BadgeImageFallback src={destChain.icon} size="sm" fallbackText={destChain.name} className="shrink-0" />
-            )}
-          </div>
-        </div>
+    <div className="w-full rounded-xl border border-border bg-surface-muted p-5 flex flex-col items-center text-center">
+      <div className="flex items-center gap-2 text-sm">
+        <span className="font-medium text-foreground">{sourceChain?.name ?? '-'}</span>
+        <ArrowRight className="size-4 text-muted" />
+        <span className="font-medium text-foreground">{destChain?.name ?? '-'}</span>
       </div>
-      <div className="flex items-center justify-center gap-2">
-        {tokenLogo && <BadgeImageFallback src={tokenLogo} size="md" fallbackText={tokenSymbol} />}
-        <div className="text-2xl font-bold text-black">
+      <div className="mt-4 flex items-center gap-2.5">
+        {tokenLogo && <BadgeImageFallback src={tokenLogo} size="lg" fallbackText={tokenSymbol} />}
+        <span className="text-3xl font-bold text-foreground">
           {formattedAmount} {tokenSymbol}
-        </div>
+        </span>
       </div>
     </div>
   );

app/components/transactions/transactions-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { Hex } from 'viem';
 import { useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Plug, RotateCw } from 'lucide-react';
@@ -9,11 +9,12 @@ import { Button } from '@/app/components/ui/button';
 import { TransactionFilters } from '@/app/components/transactions/transaction-filters';
 import { TransactionList } from '@/app/components/transactions/transaction-list';
 import { ClaimResultModal } from '@/app/components/transactions/claim-result-modal';
-import { useTransactions } from '@/app/hooks/useTransactions';
+import { TOTAL_REFETCH_TIME, useTransactions } from '@/app/hooks/useTransactions';
 import { useClaimExecution } from '@/app/hooks/useClaimExecution';
 import { useEnforceCorrectChain } from '@/app/hooks/useEnforceCorrectChain';
 import { useWallet } from '@/app/context/wallet';
 import { useAppMode } from '@/app/context/app-mode';
+import { useRefetch } from '@/app/context/refetch';
 import type { TransactionStatus, Transaction } from '@/app/types/transaction';
 import { getTransactionInitialStatus } from '@/app/components/transactions/intialStatus';
 import { TransactionDetailsModal } from '@/app/components/transactions/transactions-details-modal/transaction-details-modal';
@@ -23,6 +24,7 @@ import { cn } from '@/app/utils/common';
 export const TransactionsView = () => {
   const { address, status, chainId, connect } = useWallet();
   const { defaultFromChainId, chains, bridgeAddress } = useAppMode();
+  const { aggressiveRefetch, triggerAggressiveRefetch, clearAggressiveRefetch } = useRefetch();
   const queryClient = useQueryClient();
   const initialStatus = getTransactionInitialStatus();
   const [filters, setFilters] = useState<{ status?: TransactionStatus; updatedSince?: number }>(() => ({
@@ -51,12 +53,21 @@ export const TransactionsView = () => {
       chainId: effectiveChainId,
       filters: queryFilters,
       enabled: isConnected,
+      aggressiveRefetch,
     });
 
+  // Auto-disable aggressive mode after burst completes
+  useEffect(() => {
+    if (!aggressiveRefetch) return;
+    const timeout = setTimeout(clearAggressiveRefetch, TOTAL_REFETCH_TIME);
+    return () => clearTimeout(timeout);
+  }, [aggressiveRefetch, clearAggressiveRefetch]);
+
   const handleClaimComplete = useCallback(() => {
+    triggerAggressiveRefetch();
     refetch();
     queryClient.invalidateQueries({ queryKey: ['ready-to-claim-count'] });
-  }, [queryClient, refetch]);
+  }, [queryClient, refetch, triggerAggressiveRefetch]);
 
   const ensureCorrectChain = useEnforceCorrectChain();
   const claimExecution = useClaimExecution({

app/context/refetch.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react';
+
+type RefetchContextValue = {
+  aggressiveRefetch: boolean;
+  triggerAggressiveRefetch: () => void;
+  clearAggressiveRefetch: () => void;
+};
+
+const RefetchContext = createContext<RefetchContextValue | null>(null);
+
+export const RefetchProvider = ({ children }: { children: ReactNode }) => {
+  const [aggressiveRefetch, setAggressiveRefetch] = useState(false);
+
+  const triggerAggressiveRefetch = useCallback(() => {
+    setAggressiveRefetch(true);
+  }, []);
+
+  const clearAggressiveRefetch = useCallback(() => {
+    setAggressiveRefetch(false);
+  }, []);
+
+  return (
+    <RefetchContext.Provider value={{ aggressiveRefetch, triggerAggressiveRefetch, clearAggressiveRefetch }}>
+      {children}
+    </RefetchContext.Provider>
+  );
+};
+
+export const useRefetch = () => {
+  const context = useContext(RefetchContext);
+  if (!context) throw new Error('useRefetch must be used within RefetchProvider');
+  return context;
+};

app/hooks/useClaimExecution.ts

@@ -5,9 +5,11 @@ import type { Hex } from 'viem';
 import { useConfig, useSendTransaction } from 'wagmi';
 import { getPublicClient } from '@wagmi/core';
 import { useAggNative } from '@/app/context/aggLayerSdk';
+import { useAppMode } from '@/app/context/app-mode';
+import { fetchClaimProof } from '@/app/services/claim-proof';
 import type { ClaimExecutionResult, ClaimExecutionState, Transaction } from '@/app/types/transaction';
 import type { AppChain } from '@/app/types/app-mode';
-import { mapTransactionRequest, resolveLeafIndex } from '@/app/utils/transaction';
+import { buildClaimAssetParams, mapTransactionRequest, resolveLeafIndex } from '@/app/utils/transaction';
 
 interface UseClaimExecutionParams {
   bridgeAddress?: string;
@@ -20,6 +22,7 @@ export const useClaimExecution = (params: UseClaimExecutionParams) => {
   const { bridgeAddress, address, onComplete } = params;
   const native = useAggNative();
   const config = useConfig();
+  const { mode } = useAppMode();
   const { sendTransactionAsync } = useSendTransaction();
 
   const [state, setState] = useState<ClaimExecutionState>({
@@ -85,13 +88,15 @@ export const useClaimExecution = (params: UseClaimExecutionParams) => {
           return;
         }
 
-        const claimTx = await bridge.buildClaimAssetFromHash(
-          transaction.transactionHash,
-          transaction.sourceNetwork,
+        const proof = await fetchClaimProof({
+          mode,
+          sourceNetworkId: transaction.sourceNetwork,
           leafIndex,
-          0,
-          address,
-        );
+          depositCount: transaction.depositCount,
+        });
+
+        const claimParams = buildClaimAssetParams({ transaction, proof });
+        const claimTx = await bridge.buildClaimAsset(claimParams, address);
 
         localClaimHash = await sendTransactionAsync({
           ...mapTransactionRequest(claimTx, address),
@@ -160,7 +165,7 @@ export const useClaimExecution = (params: UseClaimExecutionParams) => {
         });
       }
     },
-    [address, bridgeAddress, native, config, sendTransactionAsync, onComplete],
+    [address, bridgeAddress, native, config, sendTransactionAsync, onComplete, mode],
   );
 
   const reset = useCallback(() => {

app/hooks/useTransactions.ts

@@ -1,16 +1,35 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { type InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 import { fetchTransactions } from '@/app/services/transactions';
 import type { TransactionFilters, TransactionsResponse } from '@/app/types/transaction';
 import { useAppMode } from '@/app/context/app-mode';
 
-export const useTransactions = (params: { chainId?: number; filters?: TransactionFilters; enabled?: boolean }) => {
-  const { chainId, filters = {}, enabled = true } = params;
+const REFETCH_INTERVALS = [500, 1000, 2000, 3000];
+export const TOTAL_REFETCH_TIME = REFETCH_INTERVALS.reduce((acc, curr) => acc + curr, 0);
+
+export const useTransactions = (params: {
+  chainId?: number;
+  filters?: TransactionFilters;
+  enabled?: boolean;
+  aggressiveRefetch?: boolean;
+}) => {
+  const { chainId, filters = {}, enabled = true, aggressiveRefetch = false } = params;
   const { mode } = useAppMode();
   const filtersKey = useMemo(() => JSON.stringify(filters ?? {}), [filters]);
 
+  const fetchCountRef = useRef(0);
+  const prevAggressiveRef = useRef(aggressiveRefetch);
+
+  // Reset counter when aggressiveRefetch transitions from false -> true
+  useEffect(() => {
+    if (aggressiveRefetch && !prevAggressiveRef.current) {
+      fetchCountRef.current = 0;
+    }
+    prevAggressiveRef.current = aggressiveRefetch;
+  }, [aggressiveRefetch]);
+
   return useInfiniteQuery<
     TransactionsResponse,
     Error,
@@ -22,16 +41,30 @@ export const useTransactions = (params: { chainId?: number; filters?: Transactio
     enabled: enabled && Boolean(chainId),
     queryFn: async ({ pageParam }) => {
       if (!chainId) throw new Error('MISSING_CHAIN_ID');
-      return fetchTransactions({
+      const data = await fetchTransactions({
         mode,
         filters: {
           ...filters,
           startAfter: pageParam,
         },
       });
+      // only increment fetch count on initial load pages not on subsequent pages
+      if (!pageParam && aggressiveRefetch) {
+        fetchCountRef.current++;
+      }
+      return data;
     },
     getNextPageParam: (lastPage) => lastPage.pagination.nextStartAfterCursor,
     initialPageParam: undefined,
-    staleTime: 30 * 1000, // 30 seconds
+    staleTime: 30 * 1000,
+    refetchInterval: (query) => {
+      if (!aggressiveRefetch) return false;
+      if (query.state.status === 'error') return false;
+
+      const count = fetchCountRef.current;
+      if (count >= REFETCH_INTERVALS.length) return false;
+
+      return REFETCH_INTERVALS[count];
+    },
   });
 };

app/providers.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { AggLayerSDKProvider } from '@/app/context/aggLayerSdk';
 import { AppModeProvider } from '@/app/context/app-mode';
+import { RefetchProvider } from '@/app/context/refetch';
 import { TokenProvider } from '@/app/context/token';
 import { WalletProvider } from '@/app/context/wallet';
 
@@ -9,7 +10,9 @@ export const Providers = ({ children }: { children: ReactNode }) => {
     <AppModeProvider>
       <WalletProvider>
         <AggLayerSDKProvider>
-          <TokenProvider>{children}</TokenProvider>
+          <RefetchProvider>
+            <TokenProvider>{children}</TokenProvider>
+          </RefetchProvider>
         </AggLayerSDKProvider>
       </WalletProvider>
     </AppModeProvider>

app/services/claim-proof.ts

@@ -0,0 +1,62 @@
+import type { Hex } from 'viem';
+import { AppMode } from '@/app/types/app-mode';
+import { getBridgeHubApiBaseUrl } from '@/app/utils/app-mode';
+
+export type ClaimProof = {
+  proof_local_exit_root: Hex[];
+  proof_rollup_exit_root: Hex[];
+  l1_info_tree_leaf: {
+    block_num: number;
+    block_pos: number;
+    l1_info_tree_index: number;
+    previous_block_hash: string;
+    timestamp: number;
+    mainnet_exit_root: Hex;
+    rollup_exit_root: Hex;
+    global_exit_root: Hex;
+    hash: Hex;
+  };
+};
+
+type ClaimProofResponse = {
+  status: 'success' | 'error';
+  data?: ClaimProof;
+  error?: string;
+};
+
+const buildClaimProofUrl = (params: {
+  mode: AppMode;
+  sourceNetworkId: number;
+  leafIndex: number;
+  depositCount: number;
+}): string => {
+  const url = new URL(`${getBridgeHubApiBaseUrl(params.mode)}/claim-proof`);
+  url.searchParams.set('sourceNetworkId', params.sourceNetworkId.toString());
+  url.searchParams.set('leafIndex', params.leafIndex.toString());
+  url.searchParams.set('depositCount', params.depositCount.toString());
+  return url.toString();
+};
+
+export const fetchClaimProof = async (params: {
+  mode: AppMode;
+  sourceNetworkId: number;
+  leafIndex: number;
+  depositCount: number;
+}): Promise<ClaimProof> => {
+  const url = buildClaimProofUrl(params);
+  const res = await fetch(url, {
+    headers: { accept: 'application/json' },
+  });
+
+  if (!res.ok) {
+    const msg = await res.text().catch(() => '');
+    throw new Error(`CLAIM_PROOF_${res.status}: ${msg || 'Request failed'}`);
+  }
+
+  const json: ClaimProofResponse = await res.json();
+  if (json.status !== 'success' || !json.data) {
+    throw new Error(json.error || 'CLAIM_PROOF_INVALID_RESPONSE');
+  }
+
+  return json.data;
+};