0xtrails 0.13.1 → 0.14.0

package/src/widget/components/DebugMenu.tsx

@@ -1,50 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useRef, useState } from "react"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { ConfigDisplay } from "./ConfigDisplay.js"
-import { DebugScreensList } from "./DebugScreensList.js"
-import { DebugToast } from "./DebugToast.js"
-
-interface DebugMenuProps {
-  onScreenSelect?: (screen: string) => void
-}
-
-export const DebugMenu: React.FC<DebugMenuProps> = ({ onScreenSelect }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const { debug } = useTrails()
-
-  const shouldShow = debug
-
-  // Wrap onScreenSelect to close dropdown when screen is selected
-  const handleScreenSelect = (screen: string) => {
-    onScreenSelect?.(screen)
-    setIsOpen(false)
-  }
-
-  if (!shouldShow) {
-    return null
-  }
-
-  return (
-    <div className="relative z-50" ref={dropdownRef}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="p-1 rounded-full hover:bg-opacity-10 hover:bg-gray-50 text-gray-900 dark:hover:bg-gray-800 dark:text-gray-200"
-        title="Open debug menu"
-      >
-        <ChevronDown className="w-4 h-4" />
-      </button>
-
-      {isOpen && (
-        <div className="absolute bottom-full right-0 mb-1 w-80 border border-solid rounded-lg shadow-lg overflow-hidden max-h-[400px] overflow-y-auto custom-scrollbar bg-white border-gray-200 text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 z-50">
-          <DebugScreensList onScreenSelect={handleScreenSelect} />
-          <DebugToast />
-          <ConfigDisplay />
-        </div>
-      )}
-    </div>
-  )
-}

package/src/widget/components/DebugScreensList.tsx

@@ -1,70 +0,0 @@
-import type React from "react"
-
-interface DebugScreensListProps {
-  onScreenSelect: (screen: string) => void
-}
-
-const SCREENS = [
-  "Connect",
-  "Fund Methods",
-  "Meld Onramp",
-  "Mesh Connect",
-  "Wallet Connect",
-  "Wallet List",
-  "Wallet Connection Pending",
-  "Wallet Connection Pending Retry",
-  "Tokens",
-  "Chain List",
-  "Send Form",
-  "Fund Form",
-  "Recipients",
-  "Earn",
-  "Earn Pools",
-  "Swap",
-  "Wallet Confirmation",
-  "Wallet Confirmation Retry",
-  "Pending 1-item-0-confirmed",
-  "Pending 1-item-1-confirmed",
-  "Pending 2-item-0-confirmed",
-  "Pending 2-item-1-confirmed",
-  "Pending 2-item-2-confirmed",
-  "Pending 3-item-0-confirmed",
-  "Pending 3-item-1-confirmed",
-  "Pending 3-item-2-confirmed",
-  "Pending 3-item-3-confirmed",
-  "Pending 3-item-2-confirmed-with-error",
-  "Receipt",
-  "Receipt Failed",
-  "Receipt Refunded",
-  "Account History",
-  "Account Settings",
-  "User Preferences",
-] as const
-
-export const DebugScreensList: React.FC<DebugScreensListProps> = ({
-  onScreenSelect,
-}) => {
-  return (
-    <div>
-      <div className="px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-        <div className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
-          Debug Screens
-        </div>
-      </div>
-      <div className="max-h-[200px] overflow-y-auto">
-        {SCREENS.map((screen) => (
-          <button
-            key={screen}
-            type="button"
-            onClick={() => {
-              onScreenSelect(screen?.toLowerCase().replaceAll(" ", "-"))
-            }}
-            className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700 cursor-pointer"
-          >
-            {screen}
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/widget/components/DebugToast.tsx

@@ -1,63 +0,0 @@
-import type React from "react"
-import { useToast } from "./Toast.js"
-
-export const DebugToast: React.FC = () => {
-  const { showToast } = useToast()
-
-  const handleShowSuccess = () => {
-    showToast(
-      "Transaction Complete",
-      "Your transaction has been successfully processed",
-      "success",
-    )
-  }
-
-  const handleShowInfo = () => {
-    showToast(
-      "Info Toast",
-      "This is an info message for testing purposes",
-      "info",
-    )
-  }
-
-  const handleShowError = () => {
-    showToast(
-      "Transaction Failed",
-      "An error occurred while processing your transaction",
-      "error",
-    )
-  }
-
-  return (
-    <div className="p-3 border-b border-gray-200 dark:border-gray-700">
-      <div className="flex items-center gap-2">
-        <div className="text-xs font-semibold text-gray-600 dark:text-gray-400">
-          Toast
-        </div>
-        <div className="flex gap-1 flex-1">
-          <button
-            type="button"
-            onClick={handleShowInfo}
-            className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 transition-colors cursor-pointer"
-          >
-            info
-          </button>
-          <button
-            type="button"
-            onClick={handleShowSuccess}
-            className="px-2 py-1 text-xs font-medium rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors cursor-pointer"
-          >
-            success
-          </button>
-          <button
-            type="button"
-            onClick={handleShowError}
-            className="px-2 py-1 text-xs font-medium rounded bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50 transition-colors cursor-pointer"
-          >
-            error
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/DepositTracker.tsx

@@ -1,326 +0,0 @@
-import { CheckCircle, Clock } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef } from "react"
-import { formatUnits } from "viem"
-import { logger } from "../../logger.js"
-import { formatAmountDisplay } from "../../utils/format.js"
-import { useTokenBalances } from "../../query/balance.hooks.js"
-import type { Token } from "../../tokens.js"
-import { TokenImage } from "./TokenImage.js"
-import { useDepositMonitor } from "../hooks/useDepositMonitor.js"
-
-import { isNativeToken, normalizeAddress } from "../../utils/address.js"
-import { isPositiveBigInt } from "../../utils/validation.js"
-export interface DepositTrackerProps {
-  depositAddress: string
-  requiredAmount: string
-  tokenAddress: string
-  tokenSymbol: string
-  tokenDecimals: number
-  chainId: number
-  onDepositComplete?: () => void
-}
-
-export const DepositTracker: React.FC<DepositTrackerProps> = ({
-  depositAddress,
-  requiredAmount,
-  tokenAddress,
-  tokenSymbol,
-  tokenDecimals,
-  chainId,
-  onDepositComplete,
-}) => {
-  const depositCompleteCalledRef = useRef(false)
-
-  useDepositMonitor({
-    chainId,
-    depositAddress,
-    tokenAddress,
-    requiredAmount,
-    enabled: true,
-  })
-
-  // Poll balances every 2s to detect incoming deposits
-  const { sortedTokens } = useTokenBalances(
-    depositAddress as `0x${string}`,
-    tokenAddress,
-    {
-      disabled: false,
-      refetchInterval: 2000,
-    },
-  )
-
-  // Find the required token deposit
-  const requiredTokenDeposit = useMemo(() => {
-    if (!sortedTokens || sortedTokens.length === 0) return null
-
-    const normalizedTokenAddress = normalizeAddress(tokenAddress)
-    const isNativeDeposit = isNativeToken(normalizedTokenAddress)
-
-    return sortedTokens.find((token: Token) => {
-      const tokenIsNative = token.isNativeToken ?? false
-      const tokenChainId = token.chainId
-
-      if (tokenChainId !== chainId) return false
-
-      if (isNativeDeposit) {
-        return tokenIsNative
-      } else {
-        return (
-          !tokenIsNative &&
-          token.contractAddress?.toLowerCase() === normalizedTokenAddress
-        )
-      }
-    })
-  }, [sortedTokens, tokenAddress, chainId])
-
-  // Get all deposits (including other tokens)
-  const allDeposits = useMemo(() => {
-    if (!sortedTokens || sortedTokens.length === 0) return []
-
-    return sortedTokens.filter((token: Token) => {
-      const tokenChainId = token.chainId
-
-      // Only show tokens from the same chain with balance > 0
-      if (tokenChainId !== chainId) return false
-
-      return isPositiveBigInt(token.balance || "0")
-    })
-  }, [sortedTokens, chainId])
-
-  // Determine if we should show the "Detected Deposits" section
-  // Only show if there's more than 1 deposit OR if there's a wrong token deposited
-  const shouldShowDetectedDeposits = useMemo(() => {
-    if (allDeposits.length === 0) return false
-    if (allDeposits.length > 1) return true
-
-    // If only 1 deposit, check if it's the required token
-    const singleDeposit = allDeposits[0]
-    if (!singleDeposit) return false
-
-    const normalizedTokenAddress = normalizeAddress(tokenAddress)
-    const isNativeDeposit = isNativeToken(normalizedTokenAddress)
-    const depositIsNative = singleDeposit.isNativeToken ?? false
-
-    // Get contract address for ERC20 tokens
-    const depositTokenAddress = depositIsNative
-      ? undefined
-      : singleDeposit.contractAddress?.toLowerCase()
-
-    // If both are native, don't show (it's the correct token)
-    if (isNativeDeposit && depositIsNative) return false
-
-    // If one is native and other isn't, show (wrong token)
-    if (isNativeDeposit !== depositIsNative) return true
-
-    // If both are ERC20, check if addresses match
-    if (!isNativeDeposit && depositTokenAddress === normalizedTokenAddress) {
-      return false // Same token, don't show
-    }
-
-    // Different token, show
-    return true
-  }, [allDeposits, tokenAddress])
-
-  // Calculate deposit progress
-  const depositStats = useMemo(() => {
-    const requiredBigInt = BigInt(requiredAmount)
-    const currentBalance = requiredTokenDeposit?.balance
-      ? BigInt(requiredTokenDeposit.balance)
-      : 0n
-
-    const percentage =
-      requiredBigInt > 0n
-        ? Number((currentBalance * 10000n) / requiredBigInt) / 100
-        : 0
-
-    const isComplete = currentBalance >= requiredBigInt
-    const isPartial = currentBalance > 0n && currentBalance < requiredBigInt
-    const isOverpaid = currentBalance > requiredBigInt
-
-    const currentFormatted = formatUnits(currentBalance, tokenDecimals)
-    const requiredFormatted = formatUnits(requiredBigInt, tokenDecimals)
-
-    return {
-      currentBalance,
-      percentage: Math.min(percentage, 100),
-      isComplete,
-      isPartial,
-      isOverpaid,
-      currentFormatted,
-      requiredFormatted,
-    }
-  }, [requiredAmount, requiredTokenDeposit, tokenDecimals])
-
-  // Determine status icon and color
-  const getStatusDisplay = () => {
-    if (depositStats.isComplete) {
-      return {
-        icon: <CheckCircle className="w-4 h-4 text-green-500" />,
-        text: "Complete",
-        progressColor: "bg-green-500",
-      }
-    }
-    if (depositStats.isPartial) {
-      return {
-        icon: <Clock className="w-4 h-4 text-blue-500" />,
-        text: "In progress",
-        progressColor: "bg-blue-500",
-      }
-    }
-    return {
-      icon: <Clock className="w-4 h-4 text-gray-400" />,
-      text: "Waiting for deposit",
-      progressColor: "bg-gray-300",
-    }
-  }
-
-  const statusDisplay = getStatusDisplay()
-
-  // Call onDepositComplete when deposit is confirmed
-  useEffect(() => {
-    if (
-      depositStats.isComplete &&
-      onDepositComplete &&
-      !depositCompleteCalledRef.current
-    ) {
-      logger.console.log(
-        "[trails-sdk] Deposit confirmed in DepositTracker, calling onDepositComplete",
-      )
-      depositCompleteCalledRef.current = true
-      onDepositComplete()
-    }
-  }, [depositStats.isComplete, onDepositComplete])
-
-  return (
-    <div className="space-y-3">
-      {/* Progress Bar */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-900 dark:text-white">
-            Deposit status
-          </span>
-          <span
-            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium"
-            style={{ backgroundColor: "#BFDBFE", color: "#1D4ED8" }}
-          >
-            {statusDisplay.text}
-            <svg
-              aria-hidden="true"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="text-blue-500"
-            >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="2"
-              />
-              <path
-                d="M12 16V12M12 8H12.01"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          </span>
-        </div>
-        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden">
-          <div
-            className={`${statusDisplay.progressColor} h-full transition-all duration-500 ease-out`}
-            style={{ width: `${Math.min(depositStats.percentage, 100)}%` }}
-          />
-        </div>
-        <div className="flex justify-between items-center text-xs">
-          <div className="flex items-center gap-1">
-            <TokenImage
-              imageUrl={requiredTokenDeposit?.imageUrl}
-              symbol={tokenSymbol}
-              chainId={chainId}
-              contractAddress={tokenAddress}
-              size={16}
-            />
-            <span className="text-gray-600 dark:text-gray-400">
-              {formatAmountDisplay(depositStats.currentFormatted, {
-                maxFractionDigits: 6,
-                minFractionDigits: 2,
-              })}{" "}
-              /{" "}
-              {formatAmountDisplay(depositStats.requiredFormatted, {
-                maxFractionDigits: 6,
-                minFractionDigits: 2,
-              })}{" "}
-              {tokenSymbol}
-            </span>
-          </div>
-          <span className="font-semibold text-gray-500 dark:text-gray-500">
-            {depositStats.percentage.toFixed(1)}%
-          </span>
-        </div>
-      </div>
-
-      {/* Current Deposits List */}
-      {shouldShowDetectedDeposits && (
-        <div className="space-y-1.5">
-          <p className="text-xs text-gray-600 dark:text-gray-400">
-            Detected Deposits:
-          </p>
-          <div className="trails-border-radius-container border trails-border-primary max-h-[200px] overflow-y-auto">
-            {allDeposits.map((token: Token, index) => {
-              const tokenIsNative = token.isNativeToken ?? false
-              const tokenChainId = token.chainId ?? chainId
-              const balance = formatUnits(
-                BigInt(token.balance || "0"),
-                token.decimals,
-              )
-
-              const tokenKey = tokenIsNative
-                ? `native-${tokenChainId}`
-                : `${token.contractAddress}-${tokenChainId}`
-
-              return (
-                <div key={tokenKey}>
-                  <div className="px-2 py-1.5 flex items-center gap-2">
-                    <TokenImage
-                      imageUrl={token.imageUrl}
-                      symbol={token.symbol}
-                      chainId={tokenChainId}
-                      contractAddress={
-                        tokenIsNative ? undefined : token.contractAddress
-                      }
-                      size={16}
-                    />
-                    <div className="flex flex-col flex-1 min-w-0">
-                      <span className="text-xs text-gray-900 dark:text-white truncate">
-                        {formatAmountDisplay(balance, {
-                          maxFractionDigits: 6,
-                          minFractionDigits: 2,
-                        })}{" "}
-                        {token.symbol}
-                      </span>
-                      {token.balanceUsdFormatted && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          {token.balanceUsdFormatted}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  {index < allDeposits.length - 1 && (
-                    <div className="border-t trails-border-primary" />
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default DepositTracker