0xtrails 0.13.1 → 0.14.0

package/src/widget/components/TransactionHistoryItem.tsx

@@ -1,767 +0,0 @@
-import { Info } from "lucide-react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import type { WalletClient } from "viem"
-import { useWalletClient } from "wagmi"
-import { getExplorerUrl } from "../../explorer.js"
-import type { Intent, IntentTransaction } from "../../index.js"
-import { logger } from "../../logger.js"
-import { useExecuteIntent } from "../../mutations.js"
-import { getQueryParam } from "../../queryParams.js"
-import { useIntentRecoverWithBalances } from "../../recover.js"
-import { formatRelativeDate } from "../../utils/time.js"
-import type { FlatTokenBalancesData } from "../../query/balance.fetchers.js"
-import { formatRawAmount } from "../../utils/format.js"
-import { truncateAddress } from "../../utils/address.js"
-import { useGetIntent } from "../hooks/useGetIntent.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import ExecutionStatusBadge from "./ExecutionStatusBadge.js"
-import Identicon from "./Identicon.js"
-import TokenImage from "./TokenImage.js"
-import { TransactionDetails } from "./TransactionDetails.js"
-
-const TransactionHistoryItem: React.FC<{
-  transaction: IntentTransaction
-  index: number
-  onRefetch?: () => void
-  fetchedIntent?: Intent | null
-  commitIntentMutation?: any
-  onCommitSuccess?: () => void
-  selectedWalletClient?: WalletClient | null
-  balancesByIntentAddress: {
-    [intentAddress: string]: {
-      tokenBalancesData: FlatTokenBalancesData | undefined
-      isLoading: boolean
-      error: Error | null
-    }
-  }
-  onRefetchBalances?: () => void
-}> = ({
-  transaction,
-  index: _index,
-  onRefetch,
-  fetchedIntent,
-  commitIntentMutation,
-  onCommitSuccess,
-  selectedWalletClient,
-  balancesByIntentAddress,
-  onRefetchBalances,
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const dateInfo = formatRelativeDate(transaction.createdAt)
-  const { data: walletClient } = useWalletClient()
-
-  const effectiveWalletClient = selectedWalletClient || walletClient
-
-  // Track refund transaction hash per intent
-  const [refundTxHash, setRefundTxHash] = useState<`0x${string}` | null>(null)
-
-  const hasIntentBalance = useMemo(() => {
-    if (!transaction.intentId || refundTxHash) return false
-    return transaction.hasBalance ?? false
-  }, [transaction.intentId, transaction.hasBalance, refundTxHash])
-
-  const needsIntentForCommit =
-    (transaction.executionStatus === "quoted" ||
-      transaction.executionStatus === "created") &&
-    !fetchedIntent
-
-  const needsIntentForRecovery = !!transaction.intentId && hasIntentBalance
-
-  const {
-    intent: intentForCommit,
-    isLoading: isLoadingIntentForCommit,
-    error: _intentForCommitError,
-    refetch: refetchIntentForCommit,
-  } = useGetIntent({
-    intentId:
-      needsIntentForCommit || needsIntentForRecovery
-        ? transaction.intentId
-        : undefined,
-    enabled: needsIntentForCommit || needsIntentForRecovery,
-  })
-
-  // Use the intent data from either the fetched intent or the intent we just loaded
-  const intentDataForRecovery = fetchedIntent || intentForCommit
-
-  // Hook for recovering intents - using pre-fetched balances
-  const { recover, recoverToken } = useIntentRecoverWithBalances({
-    intent: !refundTxHash ? intentDataForRecovery : null,
-    balancesByIntentAddress: balancesByIntentAddress,
-    walletClient: effectiveWalletClient || undefined,
-  })
-
-  // Create a wrapper for onRefetch that also refetches intent data
-  // This ensures the recover button state is updated when the refresh button is clicked
-  const enhancedOnRefetch = useMemo(() => {
-    if (!onRefetch) return undefined
-    return () => {
-      onRefetch()
-      // Refetch intent data to update recover button state
-      if (transaction.intentId && !refundTxHash) {
-        refetchIntentForCommit()
-      }
-    }
-  }, [onRefetch, transaction.intentId, refundTxHash, refetchIntentForCommit])
-
-  // Allow recovery for any intent with balances, regardless of execution status
-  const canRecover =
-    transaction.intentId &&
-    effectiveWalletClient &&
-    !refundTxHash &&
-    hasIntentBalance
-
-  // Refetch balances when execution status changes (e.g. mining -> succeeded)
-  const prevExecutionStatusRef = useRef(transaction.executionStatus)
-  useEffect(() => {
-    if (prevExecutionStatusRef.current !== transaction.executionStatus) {
-      logger.console.log(
-        "[AccountIntentTransactionHistory] Execution status changed, refetching balances",
-        {
-          intentId: transaction.intentId,
-          from: prevExecutionStatusRef.current,
-          to: transaction.executionStatus,
-        },
-      )
-      prevExecutionStatusRef.current = transaction.executionStatus
-      onRefetchBalances?.()
-    }
-  }, [transaction.executionStatus, transaction.intentId, onRefetchBalances])
-
-  // Balance data is already included in the API response (includeBalances: true),
-  // so no separate refetch on mount is needed.
-
-  const [isRecovering, setIsRecovering] = useState(false)
-  const [recoverError, setRecoverError] = useState<string | null>(null)
-  const [isCommitting, setIsCommitting] = useState(false)
-  const [commitError, setCommitError] = useState<string | null>(null)
-  const [isExecuting, setIsExecuting] = useState(false)
-  const [executeError, setExecuteError] = useState<string | null>(null)
-
-  // Execute intent mutation
-  const executeIntentMutation = useExecuteIntent()
-
-  // Check if this intent can be committed (status is "quoted" or "created")
-  // For regular transactions, check executionStatus; for fetched intents, check the original status
-  const canCommit =
-    (transaction.executionStatus === "quoted" ||
-      transaction.executionStatus === "created" ||
-      fetchedIntent?.status === "QUOTED") &&
-    commitIntentMutation &&
-    transaction.intentId
-
-  // Check if this intent can be executed (status is "committed" and not yet executed)
-  // For regular transactions, check executionStatus; for fetched intents, check the original status
-  const canExecute =
-    (transaction.executionStatus === "committed" ||
-      fetchedIntent?.status === "COMMITTED") &&
-    transaction.intentId &&
-    // Don't show execute if already in executing/mining/succeeded state
-    transaction.executionStatus !== "executing" &&
-    transaction.executionStatus !== "mining" &&
-    transaction.executionStatus !== "succeeded" &&
-    // Only show execute if there are funds available
-    hasIntentBalance
-
-  // Handler for committing an intent
-  const handleCommit = async () => {
-    if (!transaction.intentId || !commitIntentMutation) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Cannot commit: missing intentId or mutation",
-      )
-      return
-    }
-
-    try {
-      setIsCommitting(true)
-      setCommitError(null)
-
-      // If we have a fetched intent, use it directly
-      if (fetchedIntent) {
-        await commitIntentMutation.mutateAsync(fetchedIntent)
-        logger.console.log(
-          "[AccountIntentTransactionHistory] Fetched intent committed successfully",
-          {
-            intentId: fetchedIntent.intentId,
-          },
-        )
-      } else {
-        // For regular transactions, use the already-fetched intent data
-        if (!intentForCommit) {
-          throw new Error("Intent data not available for committing")
-        }
-
-        await commitIntentMutation.mutateAsync(intentForCommit)
-        logger.console.log(
-          "[AccountIntentTransactionHistory] Regular transaction intent committed successfully",
-          {
-            intentId: transaction.intentId,
-          },
-        )
-      }
-
-      // Call success callback to refresh the list
-      if (onCommitSuccess) {
-        onCommitSuccess()
-      }
-    } catch (error) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Failed to commit intent",
-        {
-          intentId: transaction.intentId,
-          error,
-        },
-      )
-
-      const errorMessage =
-        error instanceof Error
-          ? error.message
-          : typeof error === "string"
-            ? error
-            : "Failed to commit intent. Please try again."
-      setCommitError(errorMessage)
-    } finally {
-      setIsCommitting(false)
-    }
-  }
-
-  // Handler for executing an intent
-  const handleExecute = async (providedDepositTxHash?: string) => {
-    if (!transaction.intentId) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Cannot execute: missing intentId",
-      )
-      return
-    }
-
-    try {
-      setIsExecuting(true)
-      setExecuteError(null)
-
-      // Deposit tx hash is optional. If available, include it for backend correlation.
-      const depositTxHash =
-        providedDepositTxHash ||
-        transaction.originTransactionHash ||
-        transaction.originIntentTxHash ||
-        transaction.originIntentDepositTxHash ||
-        transaction.txnHash ||
-        getQueryParam("depositTransactionHash")
-
-      await executeIntentMutation.mutateAsync({
-        intentId: transaction.intentId,
-      })
-
-      logger.console.log(
-        "[AccountIntentTransactionHistory] Intent executed successfully",
-        {
-          intentId: transaction.intentId,
-          depositTransactionHash: depositTxHash,
-        },
-      )
-
-      // Call success callback to refresh the list
-      if (onCommitSuccess) {
-        onCommitSuccess()
-      }
-    } catch (error) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Failed to execute intent",
-        {
-          intentId: transaction.intentId,
-          error,
-        },
-      )
-
-      const errorMessage =
-        error instanceof Error
-          ? error.message
-          : typeof error === "string"
-            ? error
-            : "Failed to execute intent. Please try again."
-      setExecuteError(errorMessage)
-    } finally {
-      setIsExecuting(false)
-    }
-  }
-
-  // Debug logging for tooltip visibility
-  logger.console.log("[AccountIntentTransactionHistory] Tooltip debug:", {
-    intentId: transaction.intentId,
-    hasRecoverToken: !!recoverToken,
-    recoverTokenSymbol: recoverToken?.symbol,
-    recoverTokenBalanceFormatted: recoverToken?.balanceFormatted,
-    recoverTokenBalanceUsdDisplay: recoverToken?.balanceUsdDisplay,
-    isRecovering,
-    shouldShowTooltip: recoverToken && !isRecovering,
-  })
-
-  const handleRecover = async () => {
-    if (!transaction.intentId || !effectiveWalletClient) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Cannot recover: missing intentId or walletClient",
-      )
-      return
-    }
-
-    try {
-      setIsRecovering(true)
-      setRecoverError(null)
-
-      // Use the recover method which handles everything automatically
-      const { txHash } = await recover()
-
-      logger.console.log(
-        "[AccountIntentTransactionHistory] Recover transaction sent",
-        { intentId: transaction.intentId, txHash },
-      )
-
-      // Store the transaction hash to show explorer link
-      setRefundTxHash(txHash)
-      setRecoverError(null)
-
-      // Refetch history and balances after recovery
-      if (enhancedOnRefetch) {
-        setTimeout(() => {
-          enhancedOnRefetch()
-          // Also refetch balances since the intent address balance changed
-          if (onRefetchBalances) {
-            onRefetchBalances()
-          }
-        }, 2000)
-      } else if (onRefetchBalances) {
-        // If no enhancedOnRefetch, still refetch balances
-        setTimeout(() => {
-          onRefetchBalances()
-        }, 2000)
-      }
-    } catch (error) {
-      logger.console.error(
-        "[AccountIntentTransactionHistory] Failed to recover intent",
-        { intentId: transaction.intentId, error },
-      )
-      // Set error message for display
-      const errorMessage =
-        error instanceof Error
-          ? error.message
-          : typeof error === "string"
-            ? error
-            : "Failed to recover intent. Please try again."
-      setRecoverError(errorMessage)
-    } finally {
-      setIsRecovering(false)
-    }
-  }
-
-  // Determine the last known intent transaction hash and chain ID
-  // Priority: destinationTransactionHash > destinationIntentTxHash > originTransactionHash > originIntentTxHash > txnHash
-  const lastKnownTxHash = useMemo(() => {
-    if (
-      transaction.destinationTransactionHash &&
-      transaction.destinationChainId
-    ) {
-      return {
-        hash: transaction.destinationTransactionHash,
-        chainId: transaction.destinationChainId,
-      }
-    }
-    if (transaction.destinationIntentTxHash && transaction.destinationChainId) {
-      return {
-        hash: transaction.destinationIntentTxHash,
-        chainId: transaction.destinationChainId,
-      }
-    }
-    if (transaction.originTransactionHash && transaction.originChainId) {
-      return {
-        hash: transaction.originTransactionHash,
-        chainId: transaction.originChainId,
-      }
-    }
-    if (transaction.originIntentTxHash && transaction.originChainId) {
-      return {
-        hash: transaction.originIntentTxHash,
-        chainId: transaction.originChainId,
-      }
-    }
-    // Fallback to txnHash with best available chain ID
-    if (transaction.txnHash) {
-      return {
-        hash: transaction.txnHash,
-        chainId: transaction.destinationChainId || transaction.originChainId,
-      }
-    }
-    return null
-  }, [
-    transaction.destinationTransactionHash,
-    transaction.destinationIntentTxHash,
-    transaction.originTransactionHash,
-    transaction.originIntentTxHash,
-    transaction.txnHash,
-    transaction.destinationChainId,
-    transaction.originChainId,
-  ])
-
-  const explorerUrl = useMemo(() => {
-    if (!lastKnownTxHash?.hash || !lastKnownTxHash.chainId) {
-      return null
-    }
-    return getExplorerUrl({
-      txHash: lastKnownTxHash.hash,
-      chainId: lastKnownTxHash.chainId,
-    })
-  }, [lastKnownTxHash])
-
-  // Get explorer URL for refund transaction if available
-  const refundExplorerUrl = useMemo(() => {
-    if (!refundTxHash || !transaction.originChainId) {
-      return null
-    }
-    return getExplorerUrl({
-      txHash: refundTxHash,
-      chainId: transaction.originChainId,
-    })
-  }, [refundTxHash, transaction.originChainId])
-
-  return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-2 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-      {/* Header with metadata */}
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2 flex-wrap">
-          {dateInfo.relative && (
-            <span
-              className="text-xs text-gray-900 dark:text-gray-100 cursor-help"
-              title={dateInfo.full || undefined}
-            >
-              {dateInfo.relative}
-            </span>
-          )}
-        </div>
-        {explorerUrl && (
-          <a
-            href={explorerUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs whitespace-nowrap"
-            title="View transaction on block explorer"
-          >
-            <span>View on Explorer</span>
-            <svg
-              className="w-3 h-3 shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <title>External Link</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          </a>
-        )}
-      </div>
-
-      {/* Transaction Summary */}
-      <div className="flex items-center justify-center mb-2">
-        {/* Show token information if available, otherwise show intent addresses */}
-        {transaction.originToken && transaction.destinationToken ? (
-          <div className="flex items-center justify-between w-full gap-3">
-            {/* Origin Token - Image on left, details on right */}
-            <div className="flex items-start gap-2 flex-1 max-w-[130px]">
-              <TokenImage
-                symbol={transaction.originToken.symbol}
-                imageUrl={transaction.originToken.imageUrl}
-                chainId={transaction.originToken.chainId}
-                size={28}
-              />
-              <div className="flex flex-col gap-0.5">
-                <span
-                  className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
-                  style={{ maxWidth: "85px" }}
-                >
-                  {formatRawAmount(
-                    transaction.originTokenAmount || "0",
-                    transaction.originToken.decimals,
-                  )}{" "}
-                  {transaction.originToken.symbol}
-                </span>
-                {transaction.mainSigner && (
-                  <div className="flex items-center gap-1 whitespace-nowrap">
-                    <Identicon value={transaction.mainSigner} size={12} />
-                    <span
-                      className="text-xs"
-                      style={{ color: "#71717A" }}
-                      title={transaction.mainSigner}
-                    >
-                      {truncateAddress(transaction.mainSigner)}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Arrow */}
-            <div className="flex items-center">
-              <span className="text-xl text-gray-400 dark:text-gray-500">
-                →
-              </span>
-            </div>
-
-            {/* Destination Token - Image on left, details on right */}
-            <div className="flex items-start gap-2 flex-1 max-w-[130px]">
-              <TokenImage
-                symbol={transaction.destinationToken.symbol}
-                imageUrl={transaction.destinationToken.imageUrl}
-                chainId={transaction.destinationToken.chainId}
-                size={28}
-              />
-              <div className="flex flex-col gap-0.5">
-                <span
-                  className="text-xs font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap overflow-hidden text-ellipsis"
-                  style={{ maxWidth: "85px" }}
-                >
-                  {formatRawAmount(
-                    transaction.destinationTokenAmount || "0",
-                    transaction.destinationToken.decimals,
-                  )}{" "}
-                  {transaction.destinationToken.symbol}
-                </span>
-                {transaction.destinationToAddress && (
-                  <div className="flex items-center gap-1 whitespace-nowrap">
-                    <Identicon
-                      value={transaction.destinationToAddress}
-                      size={12}
-                    />
-                    <span
-                      className="text-xs"
-                      style={{ color: "#71717A" }}
-                      title={transaction.destinationToAddress}
-                    >
-                      {truncateAddress(transaction.destinationToAddress)}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="text-xs text-gray-500 dark:text-gray-400 italic">
-            Transaction details available below
-          </div>
-        )}
-      </div>
-
-      {/* Error messages */}
-      {commitError && (
-        <div className="w-full">
-          <ErrorDisplay error={commitError} severity="error" />
-        </div>
-      )}
-      {executeError && (
-        <div className="w-full">
-          <ErrorDisplay error={executeError} severity="error" />
-        </div>
-      )}
-      {recoverError && (
-        <div className="w-full">
-          <ErrorDisplay error={recoverError} severity="error" />
-        </div>
-      )}
-
-      {/* Bottom section with status, action buttons, and more details button */}
-      <div className="flex items-center justify-between mt-2">
-        <div className="flex items-center gap-2">
-          <ExecutionStatusBadge
-            status={transaction.intentStatus || transaction.executionStatus}
-          />
-
-          {/* Action Buttons - positioned next to status */}
-          {refundTxHash && refundExplorerUrl ? (
-            <a
-              href={refundExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs transition-colors"
-              aria-label="View refund transaction on explorer"
-            >
-              <span>View refund</span>
-              <svg
-                className="w-3 h-3 shrink-0"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <title>External Link</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          ) : (
-            <>
-              {/* Commit button */}
-              {canCommit && (
-                <button
-                  type="button"
-                  onClick={handleCommit}
-                  disabled={isCommitting}
-                  className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs transition-colors disabled:text-gray-400 focus:outline-none cursor-pointer disabled:cursor-not-allowed"
-                  aria-label="Commit intent"
-                >
-                  {isCommitting || isLoadingIntentForCommit
-                    ? "Committing..."
-                    : "Commit"}
-                </button>
-              )}
-
-              {/* Execute button */}
-              {canExecute && (
-                <button
-                  type="button"
-                  onClick={() => handleExecute()}
-                  disabled={isExecuting}
-                  className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs transition-colors disabled:text-gray-400 focus:outline-none cursor-pointer disabled:cursor-not-allowed"
-                  aria-label="Execute intent"
-                >
-                  {isExecuting ? "Executing..." : "Execute"}
-                </button>
-              )}
-
-              {/* Restore funds button */}
-              {canRecover && (
-                <div className="flex items-center gap-1">
-                  <button
-                    type="button"
-                    onClick={handleRecover}
-                    disabled={isRecovering}
-                    className="flex items-center gap-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs transition-colors disabled:text-gray-400 focus:outline-none whitespace-nowrap cursor-pointer disabled:cursor-not-allowed"
-                    aria-label="Restore funds from intent"
-                  >
-                    <svg
-                      width="12"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      aria-hidden="true"
-                    >
-                      <title>Restore icon</title>
-                      <path
-                        d="M1.5 7.24996C1.5 6.38801 1.84217 5.56112 2.45166 4.95162C3.06115 4.34213 3.88805 3.99996 4.75 3.99996H8.79297L7.14648 2.35348C6.95122 2.15822 6.95122 1.84171 7.14648 1.64645C7.34175 1.45118 7.65825 1.45118 7.85352 1.64645L10.3535 4.14645C10.5488 4.34171 10.5488 4.65822 10.3535 4.85348L7.85352 7.35348C7.65825 7.54874 7.34175 7.54874 7.14648 7.35348C6.95122 7.15822 6.95122 6.84171 7.14648 6.64645L8.79297 4.99996H4.75C4.15326 4.99996 3.58114 5.23719 3.15918 5.65914C2.73722 6.0811 2.5 6.65323 2.5 7.24996C2.5 7.54539 2.55835 7.83786 2.67139 8.1108C2.78446 8.38378 2.95025 8.63185 3.15918 8.84078C3.58114 9.26274 4.15326 9.49996 4.75 9.49996H6.5C6.77614 9.49996 7 9.72382 7 9.99996C7 10.2761 6.77614 10.5 6.5 10.5H4.75C3.88805 10.5 3.06115 10.1578 2.45166 9.5483C2.14987 9.24651 1.91089 8.88792 1.74756 8.49361C1.58423 8.09931 1.5 7.67676 1.5 7.24996Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    {isRecovering ? "Restoring..." : "Restore funds"}
-                  </button>
-                  {/* Info tooltip showing recoverable token details */}
-                  {recoverToken && !isRecovering && (
-                    <div className="relative group">
-                      <Info
-                        className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help"
-                        aria-label="Token balance info"
-                      />
-                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50 pointer-events-none">
-                        <div className="flex flex-col gap-0.5">
-                          <span className="font-medium">
-                            Restore {recoverToken.symbol}
-                          </span>
-                          {recoverToken.chainName && (
-                            <span className="text-gray-400 text-xs">
-                              on {recoverToken.chainName}
-                            </span>
-                          )}
-                          <span className="text-gray-300">
-                            {recoverToken.balanceFormatted}{" "}
-                            {recoverToken.symbol}
-                          </span>
-                          {recoverToken.balanceUsdDisplay && (
-                            <span className="text-gray-400">
-                              ≈ {recoverToken.balanceUsdDisplay}
-                            </span>
-                          )}
-                        </div>
-                        {/* Tooltip arrow */}
-                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </div>
-        {!isExpanded && (
-          <button
-            type="button"
-            onClick={() => setIsExpanded(true)}
-            className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap"
-            aria-label="Show more details"
-          >
-            <span>More Details</span>
-            <svg
-              className="w-3 h-3 transition-transform duration-300 ease-out"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <title>Expand</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </button>
-        )}
-      </div>
-
-      {/* Details container */}
-      <div
-        ref={containerRef}
-        className={`overflow-hidden transition-all duration-300 ease-out ${
-          isExpanded ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
-        }`}
-      >
-        <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
-          {/* Close Button - only visible when expanded, at top center */}
-          <div className="flex justify-center mb-3 -mt-1">
-            <button
-              type="button"
-              onClick={() => setIsExpanded(false)}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors duration-200 text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer"
-              aria-label="Close details"
-            >
-              <span>Close</span>
-              <svg
-                className="w-3 h-3 transition-transform duration-300 ease-out rotate-180"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <title>Collapse</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 9l-7 7-7-7"
-                />
-              </svg>
-            </button>
-          </div>
-
-          {/* Transaction Details */}
-          <TransactionDetails transaction={transaction} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default TransactionHistoryItem