0xtrails 0.13.0 → 0.13.2

package/src/onramp/MeshConnectIframe.tsx

@@ -0,0 +1,661 @@
+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>
+  )
+}