0xtrails 0.13.2 → 0.14.0

package/src/onramp/MeshConnectIframe.tsx

@@ -1,661 +0,0 @@
-import * as meshSDK from "@meshconnect/web-link-sdk"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { logger } from "../logger.js"
-import { SimpleHeader } from "../meld/components/SimpleHeader.js"
-import { getActiveMeshMode, useTrailsOnRamp } from "./TrailsOnRampProvider.js"
-import { createMeshLinkToken } from "./meshconnect.js"
-
-const MESH_SESSION_DURATION_S = 20 * 60
-const MESH_RENDER_TIMEOUT_MS = 8000
-
-type MeshPopupState = "idle" | "closed" | "error"
-
-function getMeshErrorMessage(err: unknown): string {
-  if (err && typeof err === "object") {
-    const cause = (err as { cause?: unknown }).cause
-    if (typeof cause === "string" && cause.trim().length > 0) {
-      return cause
-    }
-
-    const message = (err as { message?: unknown }).message
-    if (typeof message === "string" && message.trim().length > 0) {
-      return message
-    }
-  }
-
-  return err instanceof Error ? err.message : String(err)
-}
-
-function formatCountdown(seconds: number): string {
-  const mins = Math.floor(seconds / 60)
-  const secs = seconds % 60
-  return `${mins}:${secs.toString().padStart(2, "0")}`
-}
-
-function getPendingTransitionPayload(payload: any): any {
-  if (!payload || typeof payload !== "object") {
-    return null
-  }
-
-  return {
-    ...payload,
-    status:
-      typeof payload.status === "string" && payload.status.length > 0
-        ? payload.status
-        : "pending",
-  }
-}
-
-export interface MeshConnectProps {
-  onBack: () => void
-  toTokenSymbol?: string
-  onComplete?: (transferData: any) => void
-  toTokenAmount?: string
-  toChainId?: number
-  toRecipientAddress?: string
-  integrationId?: string
-  exchangeName?: string
-}
-
-export const MeshConnectIframe: React.FC<MeshConnectProps> = ({
-  onBack,
-  toTokenSymbol,
-  toTokenAmount,
-  toChainId,
-  toRecipientAddress,
-  onComplete,
-  integrationId,
-  exchangeName,
-}) => {
-  const onRampContext = useTrailsOnRamp()
-  // Get environment from config, defaulting to sandbox if mesh.sandbox is true
-  const environment = getActiveMeshMode(onRampContext?.config)
-  const hostname = onRampContext?.config.hostname
-  const apiKey = onRampContext?.config.apiKey
-  const jwt = onRampContext?.config.jwt
-  const meshConfig = onRampContext?.config.mesh
-  const requestConfig = useMemo(
-    () => ({
-      hostname,
-      apiKey,
-      jwt,
-      mesh: meshConfig,
-    }),
-    [hostname, apiKey, jwt, meshConfig],
-  )
-
-  // Log environment configuration immediately
-  console.log("[onramp] MeshConnect environment configuration (console.log):", {
-    meshSandbox: onRampContext?.config.mesh?.sandbox,
-    environment,
-    config: onRampContext?.config,
-    defaultEnvironment: "production",
-    hasContext: !!onRampContext,
-  })
-  logger.console.log("[onramp] MeshConnect environment configuration:", {
-    meshSandbox: onRampContext?.config.mesh?.sandbox,
-    environment,
-    config: onRampContext?.config,
-    defaultEnvironment: "production",
-    hasContext: !!onRampContext,
-  })
-
-  // Log environment configuration on context changes
-  useEffect(() => {
-    logger.console.log(
-      "[onramp] MeshConnect environment configuration (useEffect):",
-      {
-        meshSandbox: onRampContext?.config.mesh?.sandbox,
-        environment,
-        config: onRampContext?.config,
-        defaultEnvironment: "production",
-        hasContext: !!onRampContext,
-      },
-    )
-  }, [environment, onRampContext])
-
-  const [linkToken, setLinkToken] = useState<string | null>(null)
-  const [meshClientId, setMeshClientId] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [payload, setPayload] = useState<any>(null)
-  const [transferFinishedData, setTransferFinishedData] = useState<any>(null)
-  const [meshLink, setMeshLink] = useState<any>(null)
-  const [popupState, setPopupState] = useState<MeshPopupState>("idle")
-  const [popupMessage, setPopupMessage] = useState<string | null>(null)
-  const [sessionTimeRemaining, setSessionTimeRemaining] = useState(
-    MESH_SESSION_DURATION_S,
-  )
-  const [refreshKey, setRefreshKey] = useState(0)
-  const meshRenderWatchdogRef = useRef<number | null>(null)
-  const hasPendingTransitionRef = useRef(false)
-  const initiatedTransferRef = useRef<any>(null)
-
-  const clearMeshRenderWatchdog = useCallback(() => {
-    if (
-      meshRenderWatchdogRef.current !== null &&
-      typeof window !== "undefined"
-    ) {
-      window.clearTimeout(meshRenderWatchdogRef.current)
-      meshRenderWatchdogRef.current = null
-    }
-  }, [])
-
-  const failMeshRender = useCallback(
-    async (message: string) => {
-      clearMeshRenderWatchdog()
-
-      try {
-        await meshLink?.closeLink?.()
-      } catch (closeError) {
-        logger.console.warn(
-          "[onramp] Failed to close Mesh popup after render failure:",
-          closeError,
-        )
-      }
-
-      setPopupState("error")
-      setPopupMessage(message)
-    },
-    [clearMeshRenderWatchdog, meshLink],
-  )
-
-  useEffect(() => {
-    if (transferFinishedData) {
-      return
-    }
-
-    const interval = setInterval(() => {
-      setSessionTimeRemaining((prev) => (prev > 0 ? prev - 1 : 0))
-    }, 1000)
-
-    return () => clearInterval(interval)
-  }, [transferFinishedData])
-
-  // Generate link token on component mount
-  useEffect(() => {
-    logger.console.log("[onramp] generateLinkToken useEffect triggered:", {
-      environment,
-      toRecipientAddress: !!toRecipientAddress,
-      toTokenSymbol: !!toTokenSymbol,
-      toChainId: !!toChainId,
-      toTokenAmount: !!toTokenAmount,
-      integrationId: !!integrationId,
-    })
-
-    const generateLinkToken = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-
-        logger.console.log("[onramp] Starting link token generation:", {
-          environment,
-          toRecipientAddress,
-          toTokenSymbol,
-          toChainId,
-          toTokenAmount,
-          integrationId,
-        })
-
-        if (
-          !toRecipientAddress ||
-          !toTokenSymbol ||
-          !toChainId ||
-          !toTokenAmount
-        ) {
-          logger.console.error("[onramp] Missing required parameters", {
-            toRecipientAddress,
-            toTokenSymbol,
-            toChainId,
-            toTokenAmount,
-          })
-          throw new Error("Missing required parameters")
-        }
-
-        logger.console.log("[onramp] Generating link token with environment:", {
-          environment,
-          toChainId,
-          toTokenSymbol,
-          toTokenAmount,
-          integrationId,
-          isSandbox: environment === "sandbox",
-        })
-
-        // Generate a new link token via trails-api so Mesh secrets stay server-side
-        const response = await createMeshLinkToken(
-          {
-            address: toRecipientAddress,
-            symbol: toTokenSymbol,
-            amount: toTokenAmount.toString(),
-            destinationChainId: toChainId,
-            transactionId: `txid_${refreshKey}_${Date.now()}`,
-            integrationId, // Use the provided integration ID (ie Coinbase, Binance, etc)
-          },
-          requestConfig,
-        )
-
-        logger.console.log(
-          "[onramp] Generated Mesh Connect link token response:",
-          response,
-        )
-        logger.console.log("[onramp] Mesh link token generated successfully")
-
-        // Validate link token format
-        if (!response.linkToken || typeof response.linkToken !== "string") {
-          throw new Error("Invalid link token received")
-        }
-        if (!response.clientId || typeof response.clientId !== "string") {
-          throw new Error("Invalid Mesh client ID received")
-        }
-
-        setLinkToken(response.linkToken)
-        setMeshClientId(response.clientId)
-        setSessionTimeRemaining(MESH_SESSION_DURATION_S)
-      } catch (err) {
-        logger.console.error(
-          "[onramp] Failed to generate Mesh Connect link token:",
-          err,
-        )
-        setError(getMeshErrorMessage(err) || "Failed to generate link token")
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    generateLinkToken().catch((err) => {
-      logger.console.error("[onramp] Error in generateLinkToken:", err)
-    })
-  }, [
-    toRecipientAddress,
-    toTokenSymbol,
-    toChainId,
-    toTokenAmount,
-    integrationId,
-    environment,
-    requestConfig,
-    refreshKey,
-  ])
-
-  const handleIntegrationConnected = useCallback((authData: any) => {
-    logger.console.log("[onramp] MESH CONNECTED:", authData)
-    setPayload(authData)
-
-    // Once connected, we can initiate a transfer
-    if (authData.accessToken) {
-      logger.console.log("[onramp] Ready to transfer - access token available")
-    }
-  }, [])
-
-  const transitionToPending = useCallback(
-    (transferData: any, eventType: string) => {
-      const pendingPayload = getPendingTransitionPayload(transferData)
-      if (!pendingPayload) {
-        return
-      }
-
-      if (hasPendingTransitionRef.current) {
-        logger.console.log(
-          `[onramp] Ignoring duplicate Mesh transfer event after pending transition: ${eventType}`,
-          pendingPayload,
-        )
-        return
-      }
-
-      hasPendingTransitionRef.current = true
-      clearMeshRenderWatchdog()
-      setTransferFinishedData(pendingPayload)
-    },
-    [clearMeshRenderWatchdog],
-  )
-
-  const handleTransferFinished = useCallback(
-    (transferData: any) => {
-      logger.console.log("[onramp] MESH TRANSFER FINISHED:", transferData)
-      transitionToPending(transferData, "onTransferFinished")
-    },
-    [transitionToPending],
-  )
-
-  const handleExit = useCallback(
-    (error?: string) => {
-      logger.console.log("[onramp] MESH EXIT:", error)
-
-      if (error) {
-        clearMeshRenderWatchdog()
-        logger.console.error("[onramp] MESH ERROR:", error)
-        setPopupState("error")
-        setPopupMessage(error)
-        return
-      }
-
-      if (!hasPendingTransitionRef.current && initiatedTransferRef.current) {
-        logger.console.log(
-          "[onramp] Treating Mesh exit after initiated transfer as pending",
-          initiatedTransferRef.current,
-        )
-        transitionToPending(
-          initiatedTransferRef.current,
-          "onExitAfterTransferInitiated",
-        )
-        return
-      }
-
-      clearMeshRenderWatchdog()
-      setPopupState("closed")
-      setPopupMessage("Mesh window was closed before funding completed.")
-    },
-    [clearMeshRenderWatchdog, transitionToPending],
-  )
-
-  // Create Mesh Connect link instance when component mounts
-  useEffect(() => {
-    const createMeshLink = async () => {
-      try {
-        if (!meshClientId) {
-          return
-        }
-
-        logger.console.log("[onramp] Creating Mesh Connect link...")
-        const link = meshSDK.createLink({
-          clientId: meshClientId,
-          language: "en",
-          onIntegrationConnected: handleIntegrationConnected,
-          onExit: handleExit,
-          onTransferFinished: handleTransferFinished,
-          onEvent: (ev: any) => {
-            logger.console.log("[onramp] MESH Event:", ev)
-            if (ev.type === "pageLoaded") {
-              clearMeshRenderWatchdog()
-            }
-            if (
-              ev.type === "integrationConnectionError" ||
-              ev.type === "transferPreviewError" ||
-              ev.type === "transferExecutionError" ||
-              ev.type === "transferConfigureError" ||
-              ev.type === "connectionUnavailable"
-            ) {
-              clearMeshRenderWatchdog()
-              setPopupState("error")
-              setPopupMessage(
-                ev.payload?.errorMessage || "Mesh Connect failed to load.",
-              )
-            }
-            if (ev.type === "transferInitiated" && ev.payload) {
-              clearMeshRenderWatchdog()
-              logger.console.log(
-                "[onramp] MESH TRANSFER INITIATED:",
-                ev.payload,
-              )
-              initiatedTransferRef.current = ev.payload
-            }
-            if (ev.type === "transferExecuted" && ev.payload) {
-              transitionToPending(ev.payload, ev.type)
-            }
-            if (ev.type === "transferCompleted" && ev.payload) {
-              transitionToPending(ev.payload, ev.type)
-            }
-          },
-        })
-
-        logger.console.log("[onramp] Mesh Connect link created successfully")
-        setMeshLink(link)
-      } catch (err) {
-        logger.console.error(
-          "[onramp] Failed to create Mesh Connect link:",
-          err,
-        )
-        setError(`Failed to load Mesh Connect SDK: ${getMeshErrorMessage(err)}`)
-      }
-    }
-
-    createMeshLink()
-  }, [
-    clearMeshRenderWatchdog,
-    handleIntegrationConnected,
-    handleTransferFinished,
-    handleExit,
-    meshClientId,
-    transitionToPending,
-  ])
-
-  const openMeshConnect = useCallback(() => {
-    logger.console.log("[onramp] openMeshConnect called:", {
-      meshLink: !!meshLink,
-      linkToken: !!linkToken,
-    })
-
-    if (!meshLink || !linkToken) {
-      logger.console.log("[onramp] Missing requirements for opening")
-      return
-    }
-
-    setPopupState("idle")
-    setPopupMessage(null)
-
-    setTimeout(() => {
-      logger.console.log("[onramp] Opening Mesh Connect with token:", linkToken)
-      try {
-        meshLink.openLink(linkToken)
-        clearMeshRenderWatchdog()
-        meshRenderWatchdogRef.current = window.setTimeout(() => {
-          void failMeshRender(
-            "Mesh Connect did not finish loading. Please try again.",
-          )
-        }, MESH_RENDER_TIMEOUT_MS)
-        logger.console.log("[onramp] Opened in popup successfully")
-      } catch (popupError) {
-        clearMeshRenderWatchdog()
-        logger.console.error("[onramp] Failed to open popup link:", popupError)
-        setPopupState("error")
-        setPopupMessage("Failed to open Mesh Connect popup")
-      }
-    }, 200)
-  }, [clearMeshRenderWatchdog, failMeshRender, linkToken, meshLink])
-
-  const handleRetry = useCallback(() => {
-    hasPendingTransitionRef.current = false
-    initiatedTransferRef.current = null
-    setLinkToken(null)
-    setMeshClientId(null)
-    setTransferFinishedData(null)
-    setPopupState("idle")
-    setPopupMessage(null)
-    setRefreshKey((prev) => prev + 1)
-  }, [])
-
-  // Console log payload changes
-  useEffect(() => {
-    if (payload) {
-      logger.console.log("[onramp] Payload updated:", payload)
-    }
-  }, [payload])
-
-  // Navigate to pending screen when transfer is finished
-  useEffect(() => {
-    if (transferFinishedData) {
-      logger.console.log(
-        "[onramp] Transfer finished data updated:",
-        transferFinishedData,
-      )
-      logger.console.log("[onramp] onComplete callback check:", {
-        hasOnComplete: !!onComplete,
-        onCompleteType: typeof onComplete,
-      })
-
-      // Navigate to pending screen
-      if (onComplete) {
-        try {
-          logger.console.log("[onramp] Calling onComplete with transfer data")
-          onComplete(transferFinishedData)
-          logger.console.log("[onramp] onComplete called successfully")
-        } catch (error) {
-          logger.console.error("[onramp] Error calling onComplete:", error)
-        }
-      } else {
-        logger.console.warn(
-          "[onramp] onComplete callback is not defined - cannot redirect",
-        )
-      }
-    }
-  }, [transferFinishedData, onComplete])
-
-  // Auto-click the openMeshConnect button when ready
-  useEffect(() => {
-    return () => {
-      clearMeshRenderWatchdog()
-    }
-  }, [clearMeshRenderWatchdog])
-
-  useEffect(() => {
-    return () => {
-      const closeLink = meshLink?.closeLink
-      if (!closeLink) {
-        return
-      }
-
-      void Promise.resolve(closeLink()).catch((closeError: unknown) => {
-        logger.console.warn(
-          "[onramp] Failed to close Mesh popup on unmount:",
-          closeError,
-        )
-      })
-    }
-  }, [meshLink])
-
-  useEffect(() => {
-    if (meshLink && linkToken && !payload && popupState === "idle") {
-      logger.console.log("[onramp] Auto-clicking openMeshConnect button")
-      openMeshConnect()
-    }
-  }, [meshLink, linkToken, payload, openMeshConnect, popupState])
-
-  if (loading) {
-    return (
-      <div className="flex flex-col h-full">
-        <SimpleHeader onBack={onBack} title="Mesh Connect" />
-
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center">
-            <div className="mt-4 w-8 h-8 border-solid border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-            <p className="text-gray-600 dark:text-gray-400">
-              Generating secure connection...
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col h-full">
-        <SimpleHeader onBack={onBack} title="Mesh Connect" />
-
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center p-4 border border-solid border-red-200 rounded-lg bg-red-50 dark:bg-red-900/20 dark:border-red-800">
-            <p className="text-red-600 dark:text-red-200 mb-4">{error}</p>
-            <button
-              type="button"
-              onClick={() => {
-                if (typeof window !== "undefined") {
-                  window.location.reload()
-                }
-              }}
-              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <SimpleHeader
-        onBack={onBack}
-        title={`Fund with ${exchangeName || "Mesh Connect"}`}
-      />
-
-      {transferFinishedData && (
-        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-solid border-blue-200 dark:border-blue-800 rounded-lg">
-          <p className="text-sm text-blue-600 dark:text-blue-200">
-            ✓ Transfer completed: {transferFinishedData.amount}{" "}
-            {transferFinishedData.symbol}
-          </p>
-          <p className="text-xs text-blue-500 dark:text-blue-300 mt-1">
-            Redirecting to pending screen...
-          </p>
-        </div>
-      )}
-
-      <div className="mb-4 flex items-center justify-center py-2">
-        <div className="w-full max-w-md rounded-lg border border-solid border-gray-200 p-8 text-center dark:border-gray-700">
-          <div className="space-y-6">
-            <div className="space-y-3">
-              <h3 className="text-lg font-semibold">
-                Fund your account with {exchangeName || "Mesh Connect"}
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Connect to{" "}
-                {exchangeName?.toLowerCase() || "bank account or exchange"} to
-                fund your wallet securely.
-              </p>
-            </div>
-            {popupState !== "idle" && popupMessage && (
-              <div className="rounded-lg border border-solid border-yellow-200 bg-yellow-50 px-4 py-3 text-left dark:border-yellow-800 dark:bg-yellow-900/20">
-                <p className="text-sm font-medium text-yellow-900 dark:text-yellow-100">
-                  {popupState === "closed"
-                    ? "Funding window closed"
-                    : "Mesh Connect error"}
-                </p>
-                <p className="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
-                  {popupMessage}
-                </p>
-              </div>
-            )}
-            <div className="rounded-lg border border-solid border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/70">
-              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                Funding session expires in{" "}
-                {formatCountdown(sessionTimeRemaining)}
-              </p>
-              <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                Retry before expiry to keep the current funding session.
-              </p>
-            </div>
-            {popupState !== "idle" && (
-              <button
-                type="button"
-                onClick={handleRetry}
-                disabled={loading}
-                className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {loading
-                  ? "Preparing..."
-                  : sessionTimeRemaining <= 0
-                    ? "Refresh Session"
-                    : "Retry"}
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Sandbox Environment Banner */}
-      {environment === "sandbox" && (
-        <div className="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-solid border-yellow-200 dark:border-yellow-800">
-          <div className="text-center">
-            <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-              Sandbox environment
-            </p>
-            <p className="text-xs text-yellow-600 dark:text-yellow-300">
-              No real funds are used
-            </p>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}