0xtrails 0.13.1 → 0.14.0

package/src/widget/components/ErrorAnimationIcon.tsx

@@ -1,130 +0,0 @@
-import { type CSSProperties, useEffect, useState } from "react"
-
-export function ErrorAnimationIcon() {
-  const [animate, setAnimate] = useState(false)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setAnimate(true)
-    }, 100)
-
-    return () => clearTimeout(timer)
-  }, [])
-
-  const styles: Record<string, CSSProperties> = {
-    container: {
-      width: "80px",
-      height: "80px",
-      position: "relative" as const,
-    },
-    circleContainer: {
-      position: "relative" as const,
-      width: "100%",
-      height: "100%",
-    },
-    circleFill: {
-      position: "absolute" as const,
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      borderRadius: "50%",
-      backgroundColor: "#ef4444",
-      transform: animate ? "scale(1)" : "scale(0)",
-      opacity: animate ? 1 : 0,
-      transition: "transform 0.15s ease-out 0.3s, opacity 0.15s ease-out 0.3s",
-    },
-    progressRing: {
-      position: "absolute" as const,
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      transform: "rotate(-90deg)",
-    },
-    circle: {
-      fill: "none",
-      stroke: "url(#redGradient)",
-      strokeWidth: 4,
-      strokeLinecap: "round" as const,
-      strokeDasharray: 226,
-      strokeDashoffset: animate ? 0 : 226,
-      transition: "stroke-dashoffset 0.3s ease-out",
-    },
-    xContainer: {
-      position: "absolute" as const,
-      top: "50%",
-      left: "50%",
-      transform: animate
-        ? "translate(-50%, -50%) scale(1)"
-        : "translate(-50%, -50%) scale(0)",
-      opacity: animate ? 1 : 0,
-      zIndex: 10,
-      transition: "transform 0.1s ease-out 0.4s, opacity 0.1s ease-out 0.4s",
-    },
-    xPath: {
-      fill: "none",
-      stroke: "white",
-      strokeWidth: 3,
-      strokeLinecap: "round" as const,
-      strokeLinejoin: "round" as const,
-      strokeDasharray: 15,
-      strokeDashoffset: animate ? 0 : 15,
-      transition: "stroke-dashoffset 0.15s ease-out 0.45s",
-    },
-    xPathSecond: {
-      fill: "none",
-      stroke: "white",
-      strokeWidth: 3,
-      strokeLinecap: "round" as const,
-      strokeLinejoin: "round" as const,
-      strokeDasharray: 15,
-      strokeDashoffset: animate ? 0 : 15,
-      transition: "stroke-dashoffset 0.15s ease-out 0.5s",
-    },
-  }
-
-  return (
-    <div style={styles.container}>
-      <div style={styles.circleContainer}>
-        {/* Circle fill */}
-        <div style={styles.circleFill} />
-
-        {/* Progress ring */}
-        <svg aria-hidden="true" style={styles.progressRing}>
-          <defs>
-            <radialGradient
-              id="redGradient"
-              cx="50%"
-              cy="50%"
-              r="50%"
-              gradientUnits="objectBoundingBox"
-            >
-              <stop
-                offset="0%"
-                style={{ stopColor: "#ef4444", stopOpacity: 0 }}
-              />
-              <stop
-                offset="70%"
-                style={{ stopColor: "#ef4444", stopOpacity: 0.3 }}
-              />
-              <stop
-                offset="100%"
-                style={{ stopColor: "#ef4444", stopOpacity: 1 }}
-              />
-            </radialGradient>
-          </defs>
-          <circle cx="40" cy="40" r="36" style={styles.circle} />
-        </svg>
-
-        {/* X icon */}
-        <div style={styles.xContainer}>
-          <svg aria-hidden="true" width="48" height="48" viewBox="0 0 24 24">
-            <path d="M6 6L18 18" style={styles.xPath} />
-            <path d="M18 6L6 18" style={styles.xPathSecond} />
-          </svg>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/ErrorDisplay.tsx

@@ -1,152 +0,0 @@
-import type React from "react"
-import { useEffect, useState } from "react"
-import { getPrettifiedErrorMessage } from "../../error.js"
-
-interface ErrorDisplayProps {
-  errorPrettified?: string | null
-  error?: string | null
-  severity?: "warning" | "error" | "info"
-}
-
-export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
-  errorPrettified,
-  error,
-  severity = "error",
-}) => {
-  const [showFullError, setShowFullError] = useState(false)
-  const [computedErrorPrettified, setComputedErrorPrettified] = useState<
-    string | null
-  >(errorPrettified || null)
-
-  // If errorPrettified doesn't exist but error does, try to get a prettified version
-  useEffect(() => {
-    if (!errorPrettified && error) {
-      const prettified = getPrettifiedErrorMessage(error)
-      if (prettified) {
-        setComputedErrorPrettified(prettified)
-      }
-    } else {
-      setComputedErrorPrettified(errorPrettified || null)
-    }
-  }, [errorPrettified, error])
-
-  // Get colors based on severity
-  const getSeverityColors = () => {
-    switch (severity) {
-      case "error":
-        return {
-          bg: "bg-red-500/10",
-          border: "border-red-500/30",
-          icon: "text-red-500",
-          text: "text-red-600 dark:text-red-400",
-          button:
-            "text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300",
-          expandable:
-            "bg-red-500/5 border-red-500/20 text-red-700 dark:text-red-300",
-        }
-      case "info":
-        return {
-          bg: "bg-blue-500/10",
-          border: "border-blue-500/30",
-          icon: "text-blue-500",
-          text: "text-blue-600 dark:text-blue-400",
-          button:
-            "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
-          expandable:
-            "bg-blue-500/5 border-blue-500/20 text-blue-700 dark:text-blue-300",
-        }
-      case "warning":
-        return {
-          bg: "bg-amber-500/10",
-          border: "border-amber-500/30",
-          icon: "text-amber-500",
-          text: "text-amber-600 dark:text-amber-400",
-          button:
-            "text-amber-500 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300",
-          expandable:
-            "bg-amber-500/5 border-amber-500/20 text-amber-700 dark:text-amber-300",
-        }
-      default:
-        return {
-          bg: "bg-amber-500/10",
-          border: "border-amber-500/30",
-          icon: "text-amber-500",
-          text: "text-amber-600 dark:text-amber-400",
-          button:
-            "text-amber-500 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300",
-          expandable:
-            "bg-amber-500/5 border-amber-500/20 text-amber-700 dark:text-amber-300",
-        }
-    }
-  }
-
-  const colors = getSeverityColors()
-
-  // Show error if we have a prettified error or a raw error message
-  // If we can't prettify it, show the raw error
-  const displayError = computedErrorPrettified || error
-  if (!displayError) {
-    return null
-  }
-
-  return (
-    <div
-      className={`px-2 py-3 rounded-lg ${colors.bg} border border-solid ${colors.border}`}
-    >
-      <div className="flex items-start space-x-2">
-        <svg
-          className={`w-4 h-4 ${colors.icon} flex-shrink-0 mt-0.5`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <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>
-        <div className="flex-1 min-w-0">
-          <p className={`text-sm ${colors.text}`}>{displayError}</p>
-          {error && error !== displayError && (
-            <div className="mt-2">
-              <button
-                type="button"
-                onClick={() => setShowFullError(!showFullError)}
-                className={`flex items-center gap-1 text-xs ${colors.button} transition-colors cursor-pointer`}
-                aria-label="Show full error details"
-              >
-                <span>{showFullError ? "Hide" : "Show"} full error</span>
-                <svg
-                  className={`w-3 h-3 transition-transform duration-300 ease-out ${
-                    showFullError ? "rotate-180" : ""
-                  }`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-              {showFullError && (
-                <div
-                  className={`mt-2 p-2 ${colors.expandable} rounded text-xs font-mono max-h-[200px] overflow-y-auto overflow-x-auto`}
-                >
-                  {error}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/ExecutingIntentsBadge.tsx

@@ -1,24 +0,0 @@
-import type React from "react"
-
-interface ExecutingIntentsBadgeProps {
-  /** Number of executing intents */
-  count: number
-}
-
-/**
- * Badge component showing the count of executing/in-progress intents.
- * Displays nothing when count is 0.
- */
-export const ExecutingIntentsBadge: React.FC<ExecutingIntentsBadgeProps> = ({
-  count,
-}) => {
-  if (count === 0) return null
-
-  return (
-    <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-xs font-bold text-white bg-blue-500 rounded-full">
-      {count > 99 ? "99+" : count}
-    </span>
-  )
-}
-
-export default ExecutingIntentsBadge

package/src/widget/components/ExecutionStatusBadge.tsx

@@ -1,53 +0,0 @@
-import { formatRawStatusLabel } from "../utils/statusLabel.js"
-import { getHistoryStatusDescription } from "../utils/historyFilters.js"
-
-const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
-  const description = getHistoryStatusDescription(status)
-
-  const getStatusColor = (status?: string) => {
-    const upperStatus = status?.toUpperCase()
-    switch (upperStatus) {
-      case "SUCCEEDED":
-        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
-      case "EXECUTING":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-      case "MINING":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-      case "RELAYING":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-      case "SENT":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-      case "PENDING":
-        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-      case "ON_HOLD":
-        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-      case "FAILED":
-        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-      case "ABORTED":
-        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-      case "ERRORED":
-        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
-      case "QUOTED":
-        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
-      case "COMMITTED":
-        return "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200"
-      case "UNKNOWN":
-        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-      default:
-        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
-    }
-  }
-
-  return (
-    <span
-      title={description}
-      className={`inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium ${
-        description ? "cursor-help" : ""
-      } ${getStatusColor(status)}`}
-    >
-      {formatRawStatusLabel(status)}
-    </span>
-  )
-}
-
-export default ExecutionStatusBadge

package/src/widget/components/FeeBreakdown.tsx

@@ -1,155 +0,0 @@
-import type React from "react"
-import { useState } from "react"
-import { Tooltip } from "./Tooltip.js"
-import { TokenImage } from "./TokenImage.js"
-import type { TrailsFeeBreakdown, FeeItem } from "../../fees.js"
-import { Info } from "lucide-react"
-
-interface FeeBreakdownProps {
-  feeBreakdown: TrailsFeeBreakdown
-  children?: React.ReactNode
-}
-
-interface FeeRowProps {
-  label: string
-  feeItem: FeeItem
-  tooltip?: string
-}
-
-const FeeRow: React.FC<FeeRowProps> = ({ label, feeItem, tooltip }) => (
-  <div className="flex justify-between items-center py-1 items-start">
-    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-      {label}
-      {tooltip && (
-        <Tooltip message={tooltip}>
-          <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-        </Tooltip>
-      )}
-    </span>
-    <div className="text-right">
-      <div className="font-medium text-xs text-gray-900 dark:text-white flex items-center gap-1 justify-end">
-        <TokenImage
-          imageUrl=""
-          symbol={feeItem.tokenSymbol}
-          chainId={feeItem.chainId}
-          contractAddress={feeItem.tokenAddress}
-          size={16}
-        />
-        {feeItem.amount} {feeItem.tokenSymbol}
-      </div>
-      <div className="text-xs text-gray-500 dark:text-gray-400">
-        ≈ {feeItem.usdValue}
-      </div>
-    </div>
-  </div>
-)
-
-export const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
-  feeBreakdown,
-  children,
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  // Don't render at all if there are no fees
-  const hasAnyFees =
-    feeBreakdown.originRelayFee ||
-    feeBreakdown.destinationRelayFee ||
-    feeBreakdown.providerFee ||
-    feeBreakdown.trailsFee
-
-  if (!hasAnyFees) {
-    return null
-  }
-
-  return (
-    <div className="space-y-2">
-      {/* Accordion header */}
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between py-1 text-xs transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
-        aria-label={isExpanded ? "Hide fee breakdown" : "Show fee breakdown"}
-      >
-        <span className="flex items-center gap-1 w-full">
-          {children ? (
-            children
-          ) : (
-            <Tooltip message="Detailed breakdown of the Trails platform fees">
-              <Info className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-            </Tooltip>
-          )}
-        </span>
-        <svg
-          className={`w-3 h-3 transition-transform duration-300 ease-out ml-2 ${
-            isExpanded ? "rotate-180" : ""
-          }`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {/* Collapsible content */}
-      <div
-        className={`overflow-hidden transition-all duration-300 ease-out ${
-          isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
-        }`}
-      >
-        <div className="space-y-1 pl-2">
-          {feeBreakdown.originRelayFee && (
-            <FeeRow
-              label="Origin Relay Fee"
-              feeItem={feeBreakdown.originRelayFee}
-              tooltip="Fee for relaying the origin chain transaction"
-            />
-          )}
-          {feeBreakdown.destinationRelayFee && (
-            <FeeRow
-              label="Destination Relay Fee"
-              feeItem={feeBreakdown.destinationRelayFee}
-              tooltip="Fee for relaying the destination chain transaction"
-            />
-          )}
-          {feeBreakdown.providerFee && (
-            <FeeRow
-              label="Liquidity Provider Fee"
-              feeItem={feeBreakdown.providerFee}
-              tooltip="Fee charged by the bridge/swap liquidity provider for executing the transaction"
-            />
-          )}
-          {feeBreakdown.trailsFee && (
-            <FeeRow
-              label="Trails Platform Fee"
-              feeItem={feeBreakdown.trailsFee}
-              tooltip="Platform fee for using the Trails service"
-            />
-          )}
-
-          {/* Total line - only show if we have a total value */}
-          {/* {feeBreakdown.totalUsdValue && (
-            <div className="flex justify-between items-center py-1 pt-2 border-t border-gray-200 dark:border-gray-700">
-              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
-                Total Fees
-              </span>
-              <div className="text-right">
-                <div className="font-medium text-xs text-gray-900 dark:text-white">
-                  ~{feeBreakdown.totalUsdValue}
-                </div>
-              </div>
-            </div>
-          )} */}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default FeeBreakdown

package/src/widget/components/FeeOption.tsx

@@ -1,170 +0,0 @@
-import type React from "react"
-import { useMemo } from "react"
-import { parseUnits } from "viem"
-import { logger } from "../../logger.js"
-import type { Token } from "../../tokens.js"
-import { normalizeAddress } from "../../utils/address.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { TokenImage } from "./TokenImage.js"
-import { Tooltip } from "./Tooltip.js"
-
-interface OriginTokenInfo {
-  originToken: Token
-  originTokenBalance: string
-  originTokenAmount: string
-  isLoadingBalance?: boolean
-}
-
-interface FeeOptionProps {
-  option: ProcessedFeeOption
-  isSelected: boolean
-  onClick?: () => void
-  chainId?: number
-  originTokenInfo?: OriginTokenInfo
-}
-
-export const isFeeOptionDisabled = (
-  option: ProcessedFeeOption,
-  originTokenInfo?: OriginTokenInfo,
-) => {
-  try {
-    if (!option) {
-      return true
-    }
-    const originTokenAddress = originTokenInfo?.originToken?.contractAddress
-    const optionAddress = option.tokenAddress
-    const isOriginFeeOption =
-      originTokenAddress &&
-      optionAddress &&
-      normalizeAddress(originTokenAddress) === normalizeAddress(optionAddress)
-
-    // For same token fee option,  prefer originTokenInfo balance check exclusively
-    // This is more reliable than the context-based notEnoughBalance flag in useSelectedFeeOption which
-    // can be incorrectly set to true when balance data hasn't loaded yet
-    if (isOriginFeeOption && originTokenInfo) {
-      // If balance is still loading, don't disable - assume sufficient until we fetch it
-      if (originTokenInfo.isLoadingBalance) {
-        return false
-      }
-
-      const balanceInWei = BigInt(originTokenInfo.originTokenBalance ?? "0")
-      const originTokenAmountInWei = parseUnits(
-        originTokenInfo.originTokenAmount ?? "0",
-        originTokenInfo.originToken?.decimals ?? 18,
-      )
-      const feeAmountInWei = BigInt(option.amount ?? "0")
-
-      // Check if balance covers both origin amount AND fee
-      return originTokenAmountInWei + feeAmountInWei > balanceInWei
-    }
-
-    // For different tokens, use the context-based notEnoughBalance flag
-    // Default to enabled if notEnoughBalance is undefined
-    return option.notEnoughBalance ?? false
-  } catch (error) {
-    logger.console.error(
-      "[trails-sdk] [fee-option] error checking if fee option is disabled",
-      error,
-    )
-    return true
-  }
-}
-
-export const FeeOption: React.FC<FeeOptionProps> = ({
-  option,
-  isSelected,
-  onClick,
-  chainId,
-  originTokenInfo,
-}) => {
-  const isLoading = originTokenInfo?.isLoadingBalance ?? false
-  const isDisabled = useMemo(() => {
-    if (isLoading) return false // Not disabled while loading
-    return isFeeOptionDisabled(option, originTokenInfo)
-  }, [originTokenInfo, option, isLoading])
-
-  const isClickable = Boolean(onClick) && !isDisabled && !isLoading
-
-  const button = (
-    <button
-      type="button"
-      className={`w-full flex items-center justify-between p-2 trails-border-radius-list-button transition-colors ${
-        isLoading
-          ? "border cursor-wait opacity-70 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"
-          : isDisabled
-            ? "border cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
-            : !isClickable
-              ? "cursor-default trails-bg-card"
-              : isSelected
-                ? "border cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-                : "border cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
-      }`}
-      onClick={isClickable ? onClick : undefined}
-      disabled={isDisabled || !isClickable}
-    >
-      <div className="flex items-center space-x-2">
-        <TokenImage
-          imageUrl={option.tokenImageUrl}
-          symbol={option.tokenSymbol}
-          chainId={option.chainId || chainId}
-          size={24}
-        />
-        <div className="ml-2 text-left">
-          {isLoading ? (
-            <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-4 w-20 rounded" />
-          ) : (
-            <div className="flex items-center gap-2">
-              <div
-                className={`text-xs font-medium ${
-                  isDisabled
-                    ? "text-gray-400 dark:text-gray-500"
-                    : "trails-text-primary"
-                }`}
-              >
-                {option.amountFormatted}
-              </div>
-              {option.isPassthroughEligible && (
-                <span className="text-[10px] px-2 py-0.5 rounded-full bg-gray-200 text-gray-900">
-                  passthrough
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="text-right">
-        {isLoading ? (
-          <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-4 w-12 rounded" />
-        ) : (
-          <div
-            className={`text-xs font-medium ${
-              isDisabled
-                ? "text-gray-400 dark:text-gray-500"
-                : "trails-text-primary"
-            }`}
-            title={option.amountUsdDisplay}
-          >
-            ≈ {option.amountUsdLocaleDisplay || option.amountUsdDisplay}
-          </div>
-        )}
-      </div>
-    </button>
-  )
-
-  if (isLoading) {
-    return <Tooltip message="Loading balance...">{button}</Tooltip>
-  }
-
-  if (isDisabled) {
-    return (
-      <Tooltip message="Not enough balance to use this fee option">
-        {button}
-      </Tooltip>
-    )
-  }
-
-  return button
-}
-
-export default FeeOption