0xtrails 0.13.2 → 0.14.0

package/src/widget/hooks/useMeldTransactionStatus.ts

@@ -1,707 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from "react"
-import { useQuery } from "@tanstack/react-query"
-import { useOnrampClient } from "../../onrampClient.js"
-import { logger } from "../../logger.js"
-import type {
-  SearchMeldTransactionsRequest,
-  SearchMeldTransactionsResponse,
-} from "@0xtrails/api/onramp"
-import { getAccountTransactionHistory } from "../../transactions.js"
-import { addressEqual } from "../../utils/address.js"
-import { toSeconds, elapsed, SECOND_MS } from "../../utils/time.js"
-import { useTrails } from "../../widget/providers/TrailsProvider.js"
-
-export interface MeldTransactionStatusOptions {
-  sessionId?: string | null
-  transactionId?: string | null
-  externalSessionId?: string | null
-  enabled?: boolean
-  trackTimeElapsed?: boolean
-  onWindowClosed?: () => void
-  onStatusChange?: (status: TransactionStatusInfo) => void
-  popupOpened?: boolean // Only start polling when popup is actually opened
-}
-
-export type MeldTransactionStatus =
-  | "PENDING"
-  | "PROCESSING"
-  | "SETTLING"
-  | "COMPLETED"
-  | "SETTLED"
-  | "FAILED"
-  | "DECLINED"
-  | "CANCELLED"
-  | "REFUNDED"
-  | "ERROR"
-
-export type TransactionState =
-  | "idle"
-  | "opening"
-  | "polling"
-  | "success"
-  | "failed"
-  | "window-closed"
-  | "error"
-
-export interface MeldTransaction {
-  id: string
-  status: MeldTransactionStatus
-  sourceAmount?: string
-  sourceCurrencyCode?: string
-  destinationAmount?: string
-  destinationCurrencyCode?: string
-  destinationChainId?: number
-  walletAddress?: string
-  createdAt?: string
-  updatedAt?: string
-  serviceProvider?: string
-  paymentMethod?: string
-  transactionHash?: string
-  externalSessionId?: string
-  externalCustomerId?: string
-}
-
-export interface TransactionStatusInfo {
-  state: TransactionState
-  message: string
-  timeElapsed: number
-  transaction: MeldTransaction | null
-  error: Error | null
-}
-
-export interface UseMeldTransactionStatusResult {
-  // Core status
-  transaction: MeldTransaction | null
-  isLoading: boolean
-  error: Error | null
-
-  // Computed states
-  isComplete: boolean
-  isSuccess: boolean
-  isFailed: boolean
-  state: TransactionState
-
-  // Time tracking
-  timeElapsed: number
-  startTime: number | null
-
-  // Status info
-  statusInfo: TransactionStatusInfo
-
-  // Window tracking
-  windowClosed: boolean
-
-  // Settled transaction details (for direct deposits)
-  settledTransactionHash: string | null
-  settledAmount: string | null
-
-  // Actions
-  refetch: () => Promise<void>
-  reset: () => void
-  resetWindowClosed: () => void
-  setWindowRef: (windowRef: Window | null) => void
-}
-
-/**
- * Enhanced hook for tracking Meld transaction status with session ID support,
- * time elapsed tracking, and popup window detection
- */
-export function useMeldTransactionStatus(
-  options: MeldTransactionStatusOptions,
-): UseMeldTransactionStatusResult {
-  const {
-    sessionId,
-    transactionId,
-    externalSessionId,
-    enabled = true,
-    trackTimeElapsed = true,
-    onWindowClosed,
-    onStatusChange,
-    popupOpened = false,
-  } = options
-
-  const onrampClient = useOnrampClient()
-  const trails = useTrails()
-
-  // State management
-  const [startTime, setStartTime] = useState<number | null>(null)
-  const [timeElapsed, setTimeElapsed] = useState(0)
-  const [windowClosed, setWindowClosed] = useState(false)
-  const [windowRef, setWindowRef] = useState<Window | null>(null)
-
-  // Refs for cleanup
-  const timeIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const windowCheckRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
-  // Determine which ID to use (prioritize externalSessionId over transactionId over sessionId)
-  const activeId = externalSessionId || transactionId || sessionId
-  const useSearchAPI = !!externalSessionId
-
-  // React Query for transaction status
-  const { data, refetch, isLoading, error } = useQuery({
-    queryKey: ["meld-transaction-status", activeId, useSearchAPI],
-    queryFn: async (): Promise<MeldTransaction> => {
-      if (!activeId) {
-        throw new Error(
-          "Transaction ID, Session ID, or External Session ID is required",
-        )
-      }
-
-      logger.console.log(
-        "[useMeldTransactionStatus] Fetching transaction status",
-        {
-          sessionId,
-          transactionId,
-          externalSessionId,
-          activeId,
-          useSearchAPI,
-        },
-      )
-
-      try {
-        if (useSearchAPI) {
-          // Use search API with externalSessionId
-          const request: SearchMeldTransactionsRequest = {
-            externalSessionIds: activeId,
-            limit: 20,
-          }
-
-          const response: SearchMeldTransactionsResponse =
-            await onrampClient.searchMeldTransactions(request)
-
-          logger.console.log(
-            "[useMeldTransactionStatus] SearchMeldTransactions response:",
-            {
-              transactionCount:
-                response.transactions?.transactions?.length || 0,
-            },
-          )
-
-          // Get the most recent transaction for this external session ID
-          const transactions = response.transactions?.transactions || []
-          if (transactions.length === 0) {
-            // No transactions found yet - return pending status to keep polling
-            logger.console.debug(
-              "[useMeldTransactionStatus] No transactions found for externalSessionId, continuing to poll",
-              { externalSessionId: activeId },
-            )
-            return {
-              id: activeId,
-              status: "PENDING" as MeldTransactionStatus,
-              sourceAmount: undefined,
-              sourceCurrencyCode: undefined,
-              destinationAmount: undefined,
-              destinationCurrencyCode: undefined,
-              walletAddress: undefined,
-              createdAt: undefined,
-              updatedAt: undefined,
-              serviceProvider: undefined,
-              paymentMethod: undefined,
-              transactionHash: undefined,
-              externalSessionId: activeId,
-              externalCustomerId: undefined,
-            }
-          }
-
-          // Find the most recent transaction (by updatedAt or createdAt)
-          // Note: The API response only defines `id` field, but the actual response contains more fields
-          const transaction = transactions.reduce(
-            (latest: any, current: any) => {
-              const latestDate = new Date(
-                latest.updatedAt || latest.createdAt || 0,
-              ).getTime()
-              const currentDate = new Date(
-                current.updatedAt || current.createdAt || 0,
-              ).getTime()
-              return currentDate > latestDate ? current : latest
-            },
-          ) as any
-
-          // Extract settled transaction details from the serviceProviderDetails
-          const settledDetails = extractSettledTransactionDetails(transaction)
-
-          // If transaction is SETTLED but no hash found, fetch from deposit address
-          let finalHash: string | undefined =
-            settledDetails?.hash || transaction.transactionHash
-
-          // Get wallet address from cryptoDetails
-          const walletAddress =
-            transaction.walletAddress ||
-            transaction.cryptoDetails?.destinationWalletAddress ||
-            transaction.cryptoDetails?.sessionWalletAddress
-          const needsHashResolution =
-            transaction.status === "SETTLED" && !finalHash && walletAddress
-
-          logger.console.log(
-            "[useMeldTransactionStatus] Checking if need to fetch tx hash",
-            {
-              status: transaction.status,
-              hasSettledHash: !!settledDetails?.hash,
-              hasTransactionHash: !!transaction.transactionHash,
-              finalHash,
-              walletAddress: walletAddress,
-              destinationChainId:
-                transaction.destinationChainId ||
-                transaction.cryptoDetails?.chainId,
-              needsHashResolution,
-              willFetchHistory:
-                needsHashResolution &&
-                !!(
-                  transaction.destinationChainId ||
-                  transaction.cryptoDetails?.chainId
-                ),
-            },
-          )
-
-          if (
-            needsHashResolution &&
-            (transaction.destinationChainId ||
-              transaction.cryptoDetails?.chainId)
-          ) {
-            try {
-              const chainId =
-                transaction.destinationChainId ||
-                Number(transaction.cryptoDetails?.chainId)
-              // Fetch the latest transaction to the deposit address
-              const txHistory = await getAccountTransactionHistory({
-                chainId: chainId,
-                accountAddress: walletAddress,
-                pageSize: 5, // Get last 5 transactions to find the right one
-                includeMetadata: true,
-                apiKey: trails.trailsApiKey || "",
-                indexerUrl: trails.sequenceIndexerUrl || "",
-              })
-
-              if (txHistory.transactions.length > 0) {
-                // Look for a transaction that has a RECEIVE transfer to the deposit address
-                for (const tx of txHistory.transactions) {
-                  // Check if any transfers are receives to the deposit address
-                  const matchingTransfer = tx.transfers?.find(
-                    (transfer) =>
-                      transfer.transferType === "RECEIVE" &&
-                      addressEqual(transfer.to, walletAddress),
-                  )
-
-                  if (matchingTransfer) {
-                    finalHash = tx.txnHash
-                    logger.console.log(
-                      "[useMeldTransactionStatus] Found matching transaction from deposit address",
-                      {
-                        txnHash: tx.txnHash,
-                        depositAddress: walletAddress,
-                        tokenAddress: matchingTransfer.contractAddress,
-                        amount: matchingTransfer.amounts?.[0],
-                      },
-                    )
-                    break
-                  }
-                }
-
-                if (!finalHash && txHistory.transactions.length > 0) {
-                  // Fallback: use the most recent transaction if no match found
-                  finalHash = txHistory.transactions[0]?.txnHash
-                  logger.console.log(
-                    "[useMeldTransactionStatus] Using most recent transaction to deposit address",
-                    {
-                      txnHash: finalHash,
-                      depositAddress: transaction.walletAddress,
-                    },
-                  )
-                }
-              }
-            } catch (error) {
-              logger.console.warn(
-                "[useMeldTransactionStatus] Error fetching transaction history",
-                error,
-              )
-            }
-          }
-
-          logger.console.log(
-            "[useMeldTransactionStatus] Transaction status fetched via search",
-            {
-              externalSessionId: activeId,
-              transactionId: transaction.id,
-              status: transaction.status,
-              settledHash: settledDetails?.hash,
-              settledAmount: settledDetails?.amount,
-              finalHash,
-              fullTransaction: transaction, // Log full transaction to see all fields
-            },
-          )
-
-          return {
-            ...transaction,
-            transactionHash: finalHash,
-            destinationAmount:
-              settledDetails?.amount || transaction.destinationAmount,
-            // Include crypto details fields at top level for easier access
-            walletAddress: walletAddress,
-            destinationChainId:
-              transaction.destinationChainId ||
-              transaction.cryptoDetails?.chainId,
-          }
-        } else {
-          // Use the original getMeldTransaction API for backwards compatibility
-          const response = await onrampClient.getMeldTransaction({
-            transactionId: activeId,
-          })
-
-          // Parse transaction data - handle different response formats
-          let transaction: any
-          try {
-            transaction =
-              typeof response.transaction === "string"
-                ? JSON.parse(response.transaction)
-                : response.transaction
-          } catch (e) {
-            logger.console.error(
-              "[useMeldTransactionStatus] Error parsing transaction:",
-              e,
-            )
-            throw new Error("Invalid transaction data format")
-          }
-
-          // Handle nested transaction structure
-          if (transaction?.transaction) {
-            transaction = transaction.transaction
-          }
-
-          if (!transaction) {
-            throw new Error("No transaction data found")
-          }
-
-          logger.console.log(
-            "[useMeldTransactionStatus] Transaction status fetched via getMeldTransaction",
-            {
-              transactionId: activeId,
-              status: transaction.status,
-            },
-          )
-
-          return transaction
-        }
-      } catch (error) {
-        // Check for 404 errors or other "not ready" errors (transaction not registered yet)
-        const errorMessage =
-          error instanceof Error ? error.message : String(error)
-        const isNotReady =
-          errorMessage.includes("404") ||
-          errorMessage.includes("not found") ||
-          errorMessage.includes("status 404") ||
-          errorMessage.includes("request failed with status 404") ||
-          errorMessage.includes("WebrpcEndpoint") || // trails-api wrapper errors
-          errorMessage.includes("endpoint error") || // trails-api endpoint errors
-          errorMessage.includes("Connection Error") || // network connection issues
-          errorMessage.includes("Failed to fetch") || // network fetch failures
-          errorMessage.includes("NetworkError") || // general network errors
-          (error as any)?.status === 404 || // direct status code check
-          (error as any)?.response?.status === 404 // nested status code check
-
-        if (isNotReady) {
-          // Transaction not registered yet or API not ready - return a pending transaction to keep polling
-          logger.console.debug(
-            "[useMeldTransactionStatus] Transaction not yet ready, continuing to poll",
-            {
-              activeId,
-              useSearchAPI,
-              errorType: errorMessage.split(" ")[0],
-            },
-          )
-          return {
-            id: activeId,
-            status: "PENDING" as MeldTransactionStatus,
-            sourceAmount: undefined,
-            sourceCurrencyCode: undefined,
-            destinationAmount: undefined,
-            destinationCurrencyCode: undefined,
-            walletAddress: undefined,
-            createdAt: undefined,
-            updatedAt: undefined,
-            serviceProvider: undefined,
-            paymentMethod: undefined,
-            transactionHash: undefined,
-            externalSessionId: useSearchAPI ? activeId : undefined,
-            externalCustomerId: undefined,
-          }
-        }
-
-        logger.console.error(
-          "[useMeldTransactionStatus] Error fetching transaction:",
-          error,
-        )
-        throw error
-      }
-    },
-    enabled: enabled && !!activeId && popupOpened,
-    refetchInterval: (query) => {
-      // Stop polling when transaction reaches terminal state or window is closed
-      const status = query.state.data?.status
-      if (
-        status === "COMPLETED" ||
-        status === "SETTLED" ||
-        status === "FAILED" ||
-        status === "DECLINED" ||
-        status === "CANCELLED" ||
-        status === "REFUNDED" ||
-        windowClosed
-      ) {
-        return false
-      }
-      // Poll every 3 seconds while transaction is in progress
-      // Note: Keep polling even on ERROR status as it can transition to SETTLING/SETTLED
-      return 3000
-    },
-    retry: false, // Disable retries completely since we handle 404s in queryFn
-    retryDelay: SECOND_MS,
-  })
-
-  // Start timing when popup is opened and transaction begins
-  useEffect(() => {
-    if (activeId && !startTime && trackTimeElapsed && popupOpened) {
-      setStartTime(Date.now())
-    }
-  }, [activeId, startTime, trackTimeElapsed, popupOpened])
-
-  // Time elapsed counter
-  useEffect(() => {
-    if (!trackTimeElapsed || !startTime) return
-
-    timeIntervalRef.current = setInterval(() => {
-      setTimeElapsed(toSeconds(elapsed(startTime)))
-    }, SECOND_MS)
-
-    return () => {
-      if (timeIntervalRef.current) {
-        clearInterval(timeIntervalRef.current)
-      }
-    }
-  }, [startTime, trackTimeElapsed])
-
-  // Window close detection
-  useEffect(() => {
-    if (!windowRef) return
-
-    windowCheckRef.current = setInterval(() => {
-      try {
-        if (windowRef.closed && !windowClosed) {
-          setWindowClosed(true)
-          onWindowClosed?.()
-          logger.console.log("[useMeldTransactionStatus] Popup window closed")
-        }
-      } catch (error) {
-        // Ignore cross-origin security errors - this is expected when popup navigates to different origin
-        if (error instanceof Error && error.name === "SecurityError") {
-          // Window is likely still open but on different origin, continue checking
-          return
-        }
-        logger.console.warn(
-          "[useMeldTransactionStatus] Error checking window state:",
-          error,
-        )
-      }
-    }, 1000)
-
-    return () => {
-      if (windowCheckRef.current) {
-        clearInterval(windowCheckRef.current)
-      }
-    }
-  }, [windowRef, windowClosed, onWindowClosed])
-
-  // Compute derived states
-  const transaction = data || null
-  const status = transaction?.status
-
-  const isComplete =
-    status === "COMPLETED" ||
-    status === "SETTLED" ||
-    status === "FAILED" ||
-    status === "DECLINED" ||
-    status === "CANCELLED" ||
-    status === "REFUNDED"
-  // Note: ERROR is not considered complete as it can transition to other states
-
-  const isSuccess = status === "COMPLETED" || status === "SETTLED"
-
-  // Extract settled transaction details for direct deposits
-  // Note: For SETTLED transactions, the hash might not be available if the provider
-  // doesn't return it in their webhook data
-  const settledTransactionHash =
-    (isSuccess && transaction?.transactionHash) || null
-  const settledAmount =
-    (isSuccess && transaction?.destinationAmount?.toString()) || null
-  const isFailed =
-    status === "FAILED" || status === "DECLINED" || status === "CANCELLED"
-  // Note: ERROR is not included here as it's a temporary state
-  // Determine current state
-  let state: TransactionState = "idle"
-  if (windowClosed && !isComplete) {
-    state = "window-closed"
-  } else if (error) {
-    state = "error"
-  } else if (isSuccess) {
-    state = "success"
-  } else if (isFailed) {
-    state = "failed"
-  } else if (activeId && popupOpened && isLoading) {
-    state = "polling"
-  } else if (activeId && popupOpened) {
-    state = "polling"
-  }
-
-  // Create status info object with useMemo to prevent unnecessary re-renders
-  const statusInfo: TransactionStatusInfo = useMemo(
-    () => ({
-      state,
-      message: getStatusMessage(state, status, timeElapsed),
-      timeElapsed,
-      transaction,
-      error: error as Error | null,
-    }),
-    [state, status, timeElapsed, transaction, error],
-  )
-
-  // Trigger status change callback
-  useEffect(() => {
-    if (onStatusChange) {
-      onStatusChange(statusInfo)
-    }
-  }, [onStatusChange, statusInfo])
-
-  // Reset function
-  const reset = () => {
-    setStartTime(null)
-    setTimeElapsed(0)
-    setWindowClosed(false)
-    setWindowRef(null)
-    // Note: Query will be cleaned up automatically when component unmounts
-  }
-
-  // Reset window closed state back to false, re-trying the onramp provider widget flow
-  const resetWindowClosed = () => {
-    setStartTime(null)
-    setTimeElapsed(0)
-    setWindowClosed(false)
-  }
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (timeIntervalRef.current) clearInterval(timeIntervalRef.current)
-      if (windowCheckRef.current) clearInterval(windowCheckRef.current)
-    }
-  }, [])
-
-  return {
-    // Core status
-    transaction,
-    isLoading,
-    error: error as Error | null,
-
-    // Computed states
-    isComplete,
-    isSuccess,
-    isFailed,
-    state,
-
-    // Time tracking
-    timeElapsed,
-    startTime,
-
-    // Status info
-    statusInfo,
-
-    // Window tracking
-    windowClosed,
-
-    // Settled transaction details (for direct deposits)
-    settledTransactionHash,
-    settledAmount,
-
-    // Actions
-    refetch: async () => {
-      await refetch()
-    },
-    reset,
-    resetWindowClosed,
-    setWindowRef,
-  }
-}
-
-// Helper function to extract settled transaction details from Meld response
-function extractSettledTransactionDetails(
-  transaction: any,
-): { hash: string; amount: string } | null {
-  try {
-    // Check serviceProviderDetails for Mercuryo data
-    if (transaction?.serviceProviderDetails?.details?.data?.[0]) {
-      const data = transaction.serviceProviderDetails.details.data[0]
-      if (data?.withdraw?.hash && data?.withdraw?.amount) {
-        return {
-          hash: data.withdraw.hash,
-          amount: data.withdraw.amount,
-        }
-      }
-    }
-
-    // Check cryptoDetails for destination info
-    if (transaction?.cryptoDetails) {
-      const hash =
-        transaction.cryptoDetails.transactionHash ||
-        transaction.cryptoDetails.hash
-      const amount = transaction.destinationAmount
-      if (hash) {
-        return {
-          hash,
-          amount: amount ? amount.toString() : undefined,
-        }
-      }
-    }
-
-    // Fallback to top-level transaction fields
-    if (transaction?.transactionHash && transaction?.destinationAmount) {
-      return {
-        hash: transaction.transactionHash,
-        amount: transaction.destinationAmount.toString(),
-      }
-    }
-  } catch (error) {
-    logger.console.warn(
-      "[useMeldTransactionStatus] Error extracting settled details:",
-      error,
-    )
-  }
-
-  return null
-}
-
-// Helper function to generate status messages
-function getStatusMessage(
-  state: TransactionState,
-  status?: MeldTransactionStatus,
-  _timeElapsed?: number,
-): string {
-  switch (state) {
-    case "idle":
-      return "Ready"
-    case "opening":
-      return "Payment window opened. Complete your payment to continue..."
-    case "polling":
-      return `Checking payment status...`
-    case "success":
-      return `Payment completed successfully`
-    case "failed":
-      return status === "FAILED"
-        ? "Payment failed or transaction not found"
-        : status === "DECLINED"
-          ? "Payment was declined"
-          : "Payment failed"
-    case "window-closed":
-      return "Payment window was closed"
-    case "error":
-      return "Error checking payment status"
-    default:
-      return status || "Processing..."
-  }
-}