0xtrails 0.6.6 → 0.7.0

package/src/widget/components/MeshConnectIframe.tsx

@@ -1,500 +0,0 @@
-import type React from "react"
-import { useEffect, useState, useCallback } from "react"
-import { createPortal } from "react-dom"
-import * as meshSDK from "@meshconnect/web-link-sdk"
-import {
-  createNewLinkToken,
-  getMeshConnectClientId,
-  getMeshConnectEnvironment,
-  getMeshConnectApiKey,
-  getMeshNetworkIdFromChainId,
-} from "../../meshconnect.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { logger } from "../../logger.js"
-
-export interface MeshConnectProps {
-  onBack: () => void
-  toTokenSymbol?: string
-  onComplete?: (transferData: any) => void
-  toTokenAmount?: string
-  toChainId?: number
-  toRecipientAddress?: string
-  quote?: PrepareSendQuote | null
-  integrationId?: string
-  exchangeName?: string
-}
-
-export const MeshConnectIframe: React.FC<MeshConnectProps> = ({
-  onBack,
-  toTokenSymbol,
-  toTokenAmount,
-  toChainId,
-  toRecipientAddress,
-  onComplete,
-  integrationId,
-  exchangeName,
-}) => {
-  const [linkToken, setLinkToken] = 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 [iframeContainer, setIframeContainer] = useState<HTMLDivElement | null>(
-    null,
-  )
-  const [showIframe, setShowIframe] = useState(false)
-  const [iframePlaceholder, setIframePlaceholder] =
-    useState<HTMLDivElement | null>(null)
-
-  // Create iframe container outside shadow DOM on mount
-  useEffect(() => {
-    // Create container div in document body
-    const container = document.createElement("div")
-    container.id = "mesh-iframe-portal"
-    // Position will be set dynamically based on widget position
-    container.style.position = "absolute"
-    container.style.zIndex = "10000"
-    container.style.display = "none" // Initially hidden
-
-    document.body.appendChild(container)
-    setIframeContainer(container)
-
-    // Cleanup on unmount
-    return () => {
-      if (document.body.contains(container)) {
-        document.body.removeChild(container)
-      }
-    }
-  }, [])
-
-  // Generate link token on component mount
-  useEffect(() => {
-    const generateLinkToken = async () => {
-      try {
-        setLoading(true)
-        setError(null)
-
-        if (
-          !toRecipientAddress ||
-          !toTokenSymbol ||
-          !toChainId ||
-          !toTokenAmount
-        ) {
-          logger.console.error("[trails-sdk] Missing required parameters", {
-            toRecipientAddress,
-            toTokenSymbol,
-            toChainId,
-            toTokenAmount,
-          })
-          throw new Error("Missing required parameters")
-        }
-
-        const networkId = (await getMeshNetworkIdFromChainId(
-          toChainId,
-          getMeshConnectEnvironment(),
-        )) as string
-
-        // Generate a new link token for receiving tokens
-        const response = await createNewLinkToken(
-          getMeshConnectApiKey(getMeshConnectEnvironment()),
-          getMeshConnectClientId(),
-          {
-            environment: getMeshConnectEnvironment(),
-            address: toRecipientAddress,
-            symbol: toTokenSymbol,
-            networkId: networkId,
-            amount: toTokenAmount.toString(),
-            transactionId: `txid_${Date.now()}`,
-            integrationId: integrationId, // Use the provided integration ID (ie Coinbase, Binance, etc)
-          },
-        )
-
-        logger.console.log(
-          "[trails-sdk] Generated Mesh Connect link token response:",
-          response,
-        )
-        logger.console.log(
-          "[trails-sdk] Link token:",
-          response.content.linkToken,
-        )
-
-        // Validate link token format
-        if (
-          !response.content.linkToken ||
-          typeof response.content.linkToken !== "string"
-        ) {
-          throw new Error("Invalid link token received")
-        }
-
-        setLinkToken(response.content.linkToken)
-      } catch (err) {
-        logger.console.error(
-          "[trails-sdk] Failed to generate Mesh Connect link token:",
-          err,
-        )
-        setError(
-          err instanceof Error ? err.message : "Failed to generate link token",
-        )
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    generateLinkToken()
-  }, [
-    toRecipientAddress,
-    toTokenSymbol,
-    toChainId,
-    toTokenAmount,
-    integrationId,
-  ])
-
-  const handleIntegrationConnected = useCallback((authData: any) => {
-    logger.console.log("[trails-sdk] MESH CONNECTED:", authData)
-    setPayload(authData)
-
-    // Once connected, we can initiate a transfer
-    if (authData.accessToken) {
-      logger.console.log(
-        "[trails-sdk] Ready to transfer - access token available",
-      )
-    }
-  }, [])
-
-  const handleTransferFinished = useCallback((transferData: any) => {
-    logger.console.log("[trails-sdk] MESH TRANSFER FINISHED:", transferData)
-    setTransferFinishedData(transferData)
-  }, [])
-
-  const handleExit = useCallback(
-    (error?: string) => {
-      logger.console.log("[trails-sdk] MESH EXIT:", error)
-
-      // Hide the iframe when user exits
-      setShowIframe(false)
-      if (iframeContainer) {
-        iframeContainer.style.display = "none"
-      }
-
-      if (error) {
-        logger.console.error("[trails-sdk] MESH ERROR:", error)
-        setError(error)
-      }
-    },
-    [iframeContainer],
-  )
-
-  // Create Mesh Connect link instance when component mounts
-  useEffect(() => {
-    const createMeshLink = async () => {
-      try {
-        logger.console.log("[trails-sdk] Creating Mesh Connect link...")
-        const link = meshSDK.createLink({
-          clientId: getMeshConnectClientId(),
-          language: "en",
-          onIntegrationConnected: handleIntegrationConnected,
-          onExit: handleExit,
-          onTransferFinished: handleTransferFinished,
-          onEvent: (ev: any) => {
-            logger.console.log("[trails-sdk] MESH Event:", ev)
-            if (ev.type === "transferExecuted" && ev.payload) {
-              setTransferFinishedData(ev.payload)
-            }
-          },
-        })
-
-        logger.console.log(
-          "[trails-sdk] Mesh Connect link created successfully",
-        )
-        setMeshLink(link)
-      } catch (err) {
-        logger.console.error(
-          "[trails-sdk] Failed to create Mesh Connect link:",
-          err,
-        )
-        setError(
-          `Failed to load Mesh Connect SDK: ${err instanceof Error ? err.message : String(err)}`,
-        )
-      }
-    }
-
-    createMeshLink()
-  }, [handleIntegrationConnected, handleTransferFinished, handleExit])
-
-  // Position the iframe container based on placeholder position
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return
-    }
-
-    if (!iframeContainer || !iframePlaceholder || !showIframe) {
-      logger.console.log("[trails-sdk] Positioning check failed:", {
-        iframeContainer: !!iframeContainer,
-        iframePlaceholder: !!iframePlaceholder,
-        showIframe,
-      })
-      return
-    }
-
-    const positionIframe = () => {
-      const rect = iframePlaceholder.getBoundingClientRect()
-      logger.console.log("[trails-sdk] Positioning iframe at:", rect)
-
-      iframeContainer.style.position = "fixed"
-      iframeContainer.style.left = `${rect.left}px`
-      iframeContainer.style.top = `${rect.top}px`
-      iframeContainer.style.width = `${rect.width}px`
-      iframeContainer.style.height = `${rect.height}px`
-      iframeContainer.style.display = "block"
-      iframeContainer.style.backgroundColor = "white"
-      iframeContainer.style.border = "1px solid #ccc"
-      iframeContainer.style.zIndex = "10000"
-
-      logger.console.log(
-        "[trails-sdk] Applied styles:",
-        iframeContainer.style.cssText,
-      )
-    }
-
-    // Use setTimeout to ensure DOM is ready
-    setTimeout(positionIframe, 100)
-
-    // Update position on scroll/resize
-    const handleUpdate = () => positionIframe()
-    window.addEventListener("scroll", handleUpdate)
-    window.addEventListener("resize", handleUpdate)
-
-    return () => {
-      window.removeEventListener("scroll", handleUpdate)
-      window.removeEventListener("resize", handleUpdate)
-    }
-  }, [iframeContainer, iframePlaceholder, showIframe])
-
-  // Open Mesh Connect iframe
-  const openMeshConnect = useCallback(() => {
-    logger.console.log("[trails-sdk] openMeshConnect called:", {
-      meshLink: !!meshLink,
-      linkToken: !!linkToken,
-      iframeContainer: !!iframeContainer,
-    })
-
-    if (!meshLink || !linkToken || !iframeContainer) {
-      logger.console.log("[trails-sdk] Missing requirements for opening")
-      return
-    }
-
-    logger.console.log("[trails-sdk] Setting showIframe to true")
-    setShowIframe(true)
-
-    // Wait for iframe to be positioned before opening
-    setTimeout(() => {
-      logger.console.log(
-        "[trails-sdk] Opening Mesh Connect with token:",
-        linkToken,
-      )
-      try {
-        // Try opening in iframe first
-        meshLink.openLink(linkToken, "mesh-iframe")
-        logger.console.log("[trails-sdk] Opened in iframe successfully")
-
-        ;(window as any).meshLink = meshLink
-      } catch (iframeError) {
-        logger.console.warn(
-          "[trails-sdk] Failed to open in iframe, trying popup:",
-          iframeError,
-        )
-        try {
-          // Fallback to popup
-          meshLink.openLink(linkToken)
-          logger.console.log("[trails-sdk] Opened in popup successfully")
-        } catch (popupError) {
-          logger.console.error("[trails-sdk] Failed to open link:", popupError)
-          setError("Failed to open Mesh Connect link")
-        }
-      }
-    }, 200)
-  }, [meshLink, linkToken, iframeContainer])
-
-  // Handle closing the iframe
-  const handleCloseMeshConnect = useCallback(() => {
-    setShowIframe(false)
-    if (iframeContainer) {
-      iframeContainer.style.display = "none"
-    }
-  }, [iframeContainer])
-
-  // Console log payload changes
-  useEffect(() => {
-    if (payload) {
-      logger.console.log("[trails-sdk] Payload updated:", payload)
-    }
-  }, [payload])
-
-  // Navigate to pending screen when transfer is finished
-  useEffect(() => {
-    if (transferFinishedData) {
-      logger.console.log(
-        "[trails-sdk] Transfer finished data updated:",
-        transferFinishedData,
-      )
-      // Navigate to pending screen
-      if (onComplete) {
-        onComplete(transferFinishedData)
-      }
-    }
-  }, [transferFinishedData, onComplete])
-
-  // Auto-click the openMeshConnect button when ready
-  useEffect(() => {
-    if (meshLink && linkToken && !showIframe && !payload) {
-      logger.console.log("[trails-sdk] Auto-clicking openMeshConnect button")
-      openMeshConnect()
-    }
-  }, [meshLink, linkToken, showIframe, payload, openMeshConnect])
-
-  if (loading) {
-    return (
-      <div className="flex flex-col h-full">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Mesh Connect"
-          headerContentAlign="left"
-        />
-
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center">
-            <div className="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">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Mesh Connect"
-          headerContentAlign="left"
-        />
-
-        <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">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={`Fund with ${exchangeName || "Mesh Connect"}`}
-        headerContentAlign="left"
-      />
-
-      {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>
-      )}
-
-      {/* Mesh Connect iframe area */}
-      <div className="flex-1">
-        {!showIframe && !payload ? (
-          <div className="flex items-center justify-center h-full min-h-[500px]">
-            <div className="text-center p-8 border border-solid border-gray-200 dark:border-gray-700 rounded-lg">
-              <h3 className="text-lg font-semibold mb-4">
-                Fund your account with {exchangeName || "Mesh Connect"}
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400 mb-6">
-                Connect to{" "}
-                {exchangeName?.toLowerCase() || "bank account or exchange"} to
-                fund your wallet securely.
-              </p>
-              <button
-                onClick={openMeshConnect}
-                disabled={!meshLink || !linkToken}
-                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {!meshLink || !linkToken ? "Preparing..." : "Continue"}
-              </button>
-            </div>
-          </div>
-        ) : showIframe ? (
-          <div className="relative">
-            <button
-              onClick={handleCloseMeshConnect}
-              className="absolute top-2 right-2 z-10 bg-gray-800 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-700"
-            >
-              ×
-            </button>
-            <div
-              ref={setIframePlaceholder}
-              className="w-full h-[500px] border border-solid border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800"
-            />
-          </div>
-        ) : null}
-      </div>
-
-      {/* Sandbox Environment Banner */}
-      {getMeshConnectEnvironment() === "sandbox" && (
-        <div className="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>
-      )}
-
-      {/* Portal for iframe outside shadow DOM */}
-      {iframeContainer &&
-        showIframe &&
-        createPortal(
-          <div style={{ width: "100%", height: "100%", position: "relative" }}>
-            <iframe
-              id="mesh-iframe"
-              title="Mesh Connect"
-              style={{
-                width: "100%",
-                height: "100%",
-                border: "none",
-                borderRadius: "8px",
-                backgroundColor: "white",
-              }}
-            />
-          </div>,
-          iframeContainer,
-        )}
-    </div>
-  )
-}

package/src/widget/components/Receive.tsx

@@ -1,175 +0,0 @@
-import type React from "react"
-import { useMemo, useState } from "react"
-import { QrCode } from "./QrCode.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { ExternalLink, Copy, Check } from "lucide-react"
-import { truncateAddress } from "../../utils.js"
-import { useResolveEnsName } from "../../ens.js"
-
-interface ReceiveProps {
-  accountAddress: string
-  onBack?: () => void
-  isConnected?: boolean
-  onConnectWallet?: () => void
-  onPay?: () => void
-  toChainId?: number
-}
-
-export const Receive: React.FC<ReceiveProps> = ({
-  accountAddress,
-  onBack,
-  isConnected = false,
-  onConnectWallet,
-  onPay,
-  toChainId,
-}) => {
-  // Use the provided address directly
-  const resolvedAddress = accountAddress
-
-  // State for copy feedback
-  const [isCopied, setIsCopied] = useState(false)
-
-  // Resolve ENS name from the address
-  const { ensName } = useResolveEnsName({
-    address: accountAddress,
-  })
-
-  // Handle copy to clipboard
-  const handleCopyAddress = async () => {
-    try {
-      await navigator.clipboard.writeText(resolvedAddress)
-      setIsCopied(true)
-      setTimeout(() => setIsCopied(false), 2000) // Reset after 2 seconds
-    } catch (error) {
-      console.error("Failed to copy address:", error)
-    }
-  }
-
-  // Generate QR code URL for the address
-  const qrCodeUrl = useMemo(() => {
-    if (!resolvedAddress) return ""
-    return `ethereum:${resolvedAddress}`
-  }, [resolvedAddress])
-
-  // Check if accountAddress is provided
-  if (!accountAddress) {
-    return (
-      <div className="space-y-6">
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Receive"
-          headerContentAlign="left"
-        />
-
-        <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-          <div className="text-center p-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700/50 rounded-lg">
-            <div className="flex items-center justify-center space-x-2 text-amber-600 dark:text-amber-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                />
-              </svg>
-              <span className="font-medium">Account address is required</span>
-            </div>
-            <p className="mt-2 text-sm text-amber-600 dark:text-amber-400">
-              Please provide an account address as <code>toAddress</code> to
-              generate the receive QR code.
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={`Pay ${ensName ? ensName : truncateAddress(resolvedAddress)}`}
-        headerContentAlign="left"
-      />
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-2">
-        {/* QR Code Section */}
-        <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-          <div className="flex justify-center">
-            <div className="flex flex-col items-center" title={qrCodeUrl}>
-              <QrCode url={qrCodeUrl} size={300} />
-            </div>
-          </div>
-
-          {/* Address Display */}
-          <div className="flex flex-col items-center justify-center gap-1 pt-2">
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                Address:
-              </span>
-
-              <button
-                type="button"
-                onClick={handleCopyAddress}
-                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 cursor-pointer"
-                title="Copy address"
-              >
-                {isCopied ? (
-                  <Check className="w-3 h-3 text-green-500" />
-                ) : (
-                  <Copy className="w-3 h-3" />
-                )}
-              </button>
-              <a
-                href={getExplorerUrlForAddress({
-                  address: resolvedAddress,
-                  chainId: toChainId || 1,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
-                title={`View on explorer: ${resolvedAddress}`}
-              >
-                <span>{truncateAddress(resolvedAddress)}</span>
-
-                <ExternalLink className="w-3 h-3" />
-              </a>
-            </div>
-          </div>
-        </div>
-
-        {/* Connect Wallet Button - Only show when not connected */}
-        {!isConnected && onConnectWallet && (
-          <div className="flex justify-center">
-            <button
-              type="button"
-              onClick={onConnectWallet}
-              className="px-6 py-3 font-medium rounded-lg transition-colors duration-200 cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:hover:text-white"
-            >
-              Connect Wallet
-            </button>
-          </div>
-        )}
-
-        {/* Pay Button - Only show when connected */}
-        {isConnected && onPay && (
-          <div className="flex justify-center">
-            <button
-              type="button"
-              onClick={onPay}
-              className="w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative"
-            >
-              Pay {ensName ? ensName : truncateAddress(resolvedAddress)}
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}