0xtrails 0.13.2 → 0.14.0

package/src/widget/components/OnRampProviderSelector.tsx

@@ -1,263 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { formatUnits } from "viem"
-import { isValidNumber } from "../../utils/validation.js"
-import type { MeldQuote } from "../../meld/utils/meld.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-
-interface OnRampProviderSelectorProps {
-  providers: MeldQuote[]
-  selectedProvider: MeldQuote | null
-  setSelectedProvider: (provider: MeldQuote) => void
-  trailsQuote: PrepareSendQuote | null
-  isRefetching?: boolean // When true, hide the component
-}
-
-export const OnRampProviderSelector: React.FC<OnRampProviderSelectorProps> = ({
-  providers,
-  selectedProvider,
-  trailsQuote,
-  setSelectedProvider,
-  isRefetching,
-}) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  // The recommended provider is always the first in the list — no state needed
-  const recommendedProvider = providers?.[0] ?? null
-
-  // Auto-select first provider when none is selected
-  useEffect(() => {
-    if (providers && providers.length > 0 && !selectedProvider) {
-      setSelectedProvider(providers[0]!)
-    }
-  }, [providers, selectedProvider, setSelectedProvider])
-
-  if (isRefetching) {
-    return null
-  }
-
-  if (!providers || providers.length === 0) {
-    return null
-  }
-
-  const handleProviderSelect = (provider: MeldQuote) => {
-    setSelectedProvider(provider)
-    setIsOpen(false)
-  }
-
-  const displayProvider = selectedProvider || providers[0]
-
-  const getTokensPerUsd = (): number => {
-    if (
-      !selectedProvider?.destinationAmount ||
-      !trailsQuote?.destinationAmount ||
-      !trailsQuote?.destinationToken?.decimals
-    ) {
-      return 0
-    }
-
-    // Destination token for the onramp provider is always USDC, this will be converted into the user's destination token
-    // (FIAT --> USDC on Base --> user's destination token)
-    const selectedProviderUsd = Number(selectedProvider.destinationAmount)
-    const destinationTokenAmount = Number(
-      formatUnits(
-        BigInt(trailsQuote.destinationAmount),
-        trailsQuote.destinationToken.decimals,
-      ),
-    )
-
-    if (selectedProviderUsd === 0) {
-      return 0
-    }
-
-    return destinationTokenAmount / selectedProviderUsd
-  }
-
-  // Estimate the destination token amount for non-selected providers because we do not have a trails quote
-  const getEstimatedDestinationTokenAmount = (provider: MeldQuote): string => {
-    if (!trailsQuote?.destinationToken?.symbol) {
-      return "0"
-    }
-
-    const tokensPerUsd = getTokensPerUsd()
-    if (tokensPerUsd === 0) {
-      return "0"
-    }
-
-    const providerUsd = Number(provider.destinationAmount)
-    const estimatedTokens = providerUsd * tokensPerUsd
-
-    return `${estimatedTokens.toFixed(6)} ${trailsQuote.destinationToken.symbol}`
-  }
-
-  const getEstimatedDestinationTokenAmountUsd = (
-    provider: MeldQuote,
-  ): string => {
-    const providerUsd = Number(provider.destinationAmount)
-    return `$${providerUsd.toFixed(2)}`
-  }
-
-  const getSelectedProviderDestinationTokenAmountUsd = (): string => {
-    // For USDC (and other USD stablecoins), use the token amount as USD directly
-    const tokenSymbol = trailsQuote?.destinationToken?.symbol?.toUpperCase()
-    const isUsdStablecoin = tokenSymbol === "USDC"
-
-    if (isUsdStablecoin && trailsQuote?.destinationAmountFormatted) {
-      const amount = parseFloat(trailsQuote.destinationAmountFormatted)
-      if (isValidNumber(amount)) {
-        return `$${amount.toFixed(2)}`
-      }
-    }
-
-    // If we have a USD display value, use it as fallback
-    if (trailsQuote?.destinationAmountUsdDisplay) {
-      return trailsQuote.destinationAmountUsdDisplay
-    }
-
-    return `$0`
-  }
-
-  const getSelectedProviderDestinationTokenAmount = (): string => {
-    if (
-      !trailsQuote?.destinationAmountFormatted ||
-      !trailsQuote?.destinationToken?.symbol
-    ) {
-      return "0"
-    }
-    return `${trailsQuote.destinationAmountDisplay} ${trailsQuote.destinationToken.symbol}`
-  }
-
-  if (providers.length === 1 && displayProvider) {
-    return (
-      <div className="space-y-1" ref={accordionRef}>
-        <div className="p-2">
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-xs font-medium trails-text-primary">
-              Onramp Provider
-            </div>
-          </div>
-          <div className="mt-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="flex flex-col">
-                  <div className="text-sm font-medium text-gray-900 dark:text-white">
-                    {displayProvider.serviceProvider}
-                  </div>
-                  {displayProvider === recommendedProvider && (
-                    <span className="ml-2 text-xs text-green-600 dark:text-green-400">
-                      (Recommended)
-                    </span>
-                  )}
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-sm font-medium text-gray-900 dark:text-white">
-                  {getSelectedProviderDestinationTokenAmount()}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {getSelectedProviderDestinationTokenAmountUsd()}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div ref={accordionRef}>
-      <div className="p-2">
-        <button
-          className="w-full flex justify-between items-center mb-2 cursor-pointer"
-          type="button"
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <div className="text-sm font-semibold text-gray-900 dark:text-white">
-            Onramp Provider
-          </div>
-          <div className="flex items-center gap-2">
-            {displayProvider && (
-              <div className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                {displayProvider.serviceProvider}
-              </div>
-            )}
-            <ChevronDown
-              className={`w-3 h-3 transition-transform duration-300 ease-out text-gray-600 dark:text-gray-400 ${
-                isOpen ? "rotate-180" : ""
-              }`}
-            />
-          </div>
-        </button>
-
-        <div
-          ref={contentRef}
-          className={`overflow-auto transition-all duration-300 ease-out ${
-            isOpen ? "max-h-[250px] opacity-100" : "max-h-0 opacity-0"
-          }`}
-        >
-          <div className="mt-2 space-y-1">
-            {providers.map((provider, index) => {
-              const isSelected =
-                selectedProvider?.serviceProvider === provider.serviceProvider
-
-              return (
-                <button
-                  key={`${provider.serviceProvider}-${index}`}
-                  type="button"
-                  onClick={() => handleProviderSelect(provider)}
-                  className={`w-full p-3 rounded-lg border transition-all cursor-pointer ${
-                    isSelected
-                      ? "bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700"
-                      : "bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-750"
-                  }`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <div className="text-left">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {provider.serviceProvider}
-                        </div>
-                        {providers[0]?.serviceProvider ===
-                          provider.serviceProvider && (
-                          <span className="text-xs text-green-600 dark:text-green-400">
-                            (Recommended)
-                          </span>
-                        )}
-                      </div>
-                    </div>
-
-                    {isSelected ? (
-                      <div className="text-right">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {getSelectedProviderDestinationTokenAmount()}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          {getSelectedProviderDestinationTokenAmountUsd()}
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="text-right">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {getEstimatedDestinationTokenAmount(provider)}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          {getEstimatedDestinationTokenAmountUsd(provider)}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnRampProviderSelector

package/src/widget/components/OnrampDeposit.tsx

@@ -1,122 +0,0 @@
-import { ExternalLink } from "lucide-react"
-import type React from "react"
-import { formatUnits } from "viem"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import type { PrepareSendQuote } from "../../prepareSend.js"
-import { ChainImage } from "./ChainImage.js"
-import { DepositTracker } from "./DepositTracker.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenImage } from "./TokenImage.js"
-
-interface OnrampDepositProps {
-  onBack?: () => void
-  quote?: PrepareSendQuote | null
-  onDepositComplete?: () => void
-}
-
-export const OnrampDeposit: React.FC<OnrampDepositProps> = ({
-  onBack,
-  quote,
-  onDepositComplete,
-}) => {
-  logger.console.log("[]trails-sdk] Rendering OnrampDeposit with quote:", quote)
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="Fiat Onramp"
-        headerContentAlign="left"
-      />
-
-      <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
-        {/* Transaction Details Header */}
-        <div className="text-center">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Please Complete your fiat purchase in the popup window.
-          </p>
-        </div>
-
-        {/* Meld Transaction Info */}
-        <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-          <div className="flex flex-col items-center gap-3">
-            <div className="text-sm text-gray-600 dark:text-gray-300 text-center">
-              <div className="font-medium mb-1">Waiting for fiat purchase</div>
-            </div>
-          </div>
-
-          {quote?.originAmount && (
-            <div className="flex flex-col items-center justify-center gap-2 pt-2">
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                Expecting deposit of
-              </div>
-              <div className="flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
-                <TokenImage
-                  imageUrl={quote.originToken.imageUrl}
-                  symbol={quote.originToken.symbol}
-                  chainId={quote.originChain.id}
-                  contractAddress={quote.originToken.contractAddress}
-                  size={24}
-                />
-                <span className="text-base font-bold text-gray-900 dark:text-white">
-                  {formatUnits(
-                    BigInt(quote.originAmount),
-                    quote.originToken.decimals,
-                  )}{" "}
-                  {quote.originToken.symbol}
-                </span>
-              </div>
-              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
-                <span>on</span>
-                <ChainImage chainId={quote.originChain.id} size={14} />
-                <span className="font-medium">{quote.originChain.name}</span>
-                <span>to</span>
-                <a
-                  href={getExplorerUrlForAddress({
-                    address: quote.originDepositAddress,
-                    chainId: quote.originChain.id,
-                  })}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1 font-medium hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer"
-                >
-                  <span>
-                    {quote.originDepositAddress.slice(0, 6)}...
-                    {quote.originDepositAddress.slice(-4)}
-                  </span>
-                  <ExternalLink className="w-3 h-3" />
-                </a>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Deposit Tracker - polls every 3 seconds to show deposit status */}
-        {quote && (
-          <div className="space-y-2">
-            <DepositTracker
-              depositAddress={quote.originDepositAddress}
-              requiredAmount={quote.originAmount}
-              tokenAddress={quote.originToken.contractAddress}
-              tokenSymbol={quote.originToken.symbol}
-              tokenDecimals={quote.originToken.decimals}
-              chainId={quote.originChain.id}
-              onDepositComplete={onDepositComplete}
-            />
-          </div>
-        )}
-
-        {/* Quote Details */}
-        {quote && (
-          <div className="space-y-2">
-            <QuoteDetails quote={quote} showContent={true} />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default OnrampDeposit

package/src/widget/components/OnrampErrorScreen.tsx

@@ -1,163 +0,0 @@
-import { AlertCircle, RefreshCw } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface OnrampErrorScreenProps {
-  onTryAgain?: () => void
-  onBack?: () => void
-  onRetry?: () => void // For regenerating widget session
-  intentId?: string | undefined | null
-  title?: string
-  message?: string
-  showAnimation?: boolean
-  transactionStatus?: string
-  transactionError?: string
-}
-
-export const OnrampErrorScreen: React.FC<OnrampErrorScreenProps> = ({
-  onTryAgain,
-  onBack,
-  onRetry,
-  title,
-  message,
-  showAnimation = true,
-  transactionStatus,
-  transactionError,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-
-  useEffect(() => {
-    if (showAnimation) {
-      const timer = setTimeout(() => setShowContent(true), 100)
-      return () => clearTimeout(timer)
-    } else {
-      setShowContent(true)
-    }
-  }, [showAnimation])
-
-  // Generate default title and message based on transaction status
-  const getErrorContent = () => {
-    switch (transactionStatus?.toUpperCase()) {
-      case "DECLINED":
-        return {
-          title: title || "Onramp Payment Declined",
-          message:
-            message ||
-            "Your onramp payment was declined. Please check your payment method and try again.",
-        }
-      case "FAILED":
-        return {
-          title: title || "Onramp Transaction Failed",
-          message:
-            message ||
-            "Your onramp transaction could not be completed. Please try again.",
-        }
-      case "ERROR":
-        return {
-          title: title || "Onramp Transaction Error",
-          message:
-            message ||
-            "An error occurred while processing your onramp transaction. Please try again.",
-        }
-      case "CANCELLED":
-        return {
-          title: title || "Onramp Transaction Cancelled",
-          message:
-            message ||
-            "Your onramp transaction was cancelled. You can try again if needed.",
-        }
-      default:
-        return {
-          title: title || "Onramp Error",
-          message:
-            message ||
-            "There was a problem processing your onramp transaction. Please try again.",
-        }
-    }
-  }
-
-  const { title: errorTitle, message: errorMessage } = getErrorContent()
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader onBack={onBack} headerContent={errorTitle} />
-
-      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-6 px-4">
-        {/* Error Icon */}
-        <div
-          className={`transition-all duration-700 ease-out ${
-            showContent ? "opacity-100 scale-100" : "opacity-0 scale-75"
-          }`}
-        >
-          <div className="w-20 h-20 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-            <AlertCircle className="w-10 h-10 text-red-600 dark:text-red-400" />
-          </div>
-        </div>
-
-        {/* Content */}
-        <div
-          className={`text-center space-y-4 transition-all duration-700 ease-out delay-200 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-            {errorTitle}
-          </h2>
-
-          <p className="text-gray-600 dark:text-gray-400 max-w-md leading-relaxed">
-            {errorMessage}
-          </p>
-
-          {transactionStatus && (
-            <div className="text-sm text-gray-500 dark:text-gray-500 mt-2">
-              Status: {transactionStatus}
-            </div>
-          )}
-
-          {transactionError && (
-            <div className="text-xs text-gray-400 dark:text-gray-600 mt-1 max-w-md break-words">
-              {transactionError}
-            </div>
-          )}
-
-          <div className="text-sm text-gray-500 dark:text-gray-500 mt-2">
-            No payment was processed
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div
-          className={`flex flex-col sm:flex-row gap-3 w-full max-w-xs transition-all duration-700 ease-out delay-400 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <button
-            type="button"
-            onClick={onRetry || onTryAgain}
-            className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
-          >
-            <RefreshCw className="w-4 h-4" />
-            Try Again
-          </button>
-
-          {onBack && (
-            <button
-              type="button"
-              onClick={onBack}
-              className="flex-1 px-6 py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors cursor-pointer"
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default OnrampErrorScreen