0xtrails 0.13.2 → 0.15.0

package/src/widget/components/GreenCheckAnimation.tsx

@@ -1,119 +0,0 @@
-import { type CSSProperties, useEffect, useState } from "react"
-
-export function GreenCheckAnimation() {
-  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: "#22c55e",
-      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(#gradient)",
-      strokeWidth: 4,
-      strokeLinecap: "round" as const,
-      strokeDasharray: 226,
-      strokeDashoffset: animate ? 0 : 226,
-      transition: "stroke-dashoffset 0.3s ease-out",
-    },
-    checkmarkContainer: {
-      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",
-    },
-    checkmarkPath: {
-      fill: "none",
-      stroke: "white",
-      strokeWidth: 4,
-      strokeLinecap: "round" as const,
-      strokeLinejoin: "round" as const,
-      strokeDasharray: 18,
-      strokeDashoffset: animate ? 0 : 18,
-      transition: "stroke-dashoffset 0.15s ease-out 0.45s",
-    },
-  }
-
-  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="gradient"
-              cx="50%"
-              cy="50%"
-              r="50%"
-              gradientUnits="objectBoundingBox"
-            >
-              <stop
-                offset="0%"
-                style={{ stopColor: "#22c55e", stopOpacity: 0 }}
-              />
-              <stop
-                offset="70%"
-                style={{ stopColor: "#22c55e", stopOpacity: 0.3 }}
-              />
-              <stop
-                offset="100%"
-                style={{ stopColor: "#22c55e", stopOpacity: 1 }}
-              />
-            </radialGradient>
-          </defs>
-          <circle cx="40" cy="40" r="36" style={styles.circle} />
-        </svg>
-
-        {/* Checkmark */}
-        <div style={styles.checkmarkContainer}>
-          <svg aria-hidden="true" width="48" height="48" viewBox="0 0 24 24">
-            <path d="M6 14l4 4L18 8" style={styles.checkmarkPath} />
-          </svg>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/HideBalances.tsx

@@ -1,24 +0,0 @@
-import { Eye, EyeOff } from "lucide-react"
-import type React from "react"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-
-export const HideBalances: React.FC = () => {
-  const { isBalanceVisible, toggleBalanceVisible } = useBalanceVisible()
-
-  return (
-    <button
-      type="button"
-      onClick={toggleBalanceVisible}
-      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 flex items-center gap-2 cursor-pointer"
-    >
-      {isBalanceVisible ? (
-        <EyeOff className="w-4 h-4" />
-      ) : (
-        <Eye className="w-4 h-4" />
-      )}
-      {isBalanceVisible ? "Hide Balances" : "Show Balances"}
-    </button>
-  )
-}
-
-export default HideBalances

package/src/widget/components/HighPriceImpactBlock.tsx

@@ -1,44 +0,0 @@
-import type React from "react"
-import { getIsHighPriceImpactError } from "../../error.js"
-
-interface HighPriceImpactBlockProps {
-  quoteError: string | null
-}
-
-export const HighPriceImpactBlock: React.FC<HighPriceImpactBlockProps> = ({
-  quoteError,
-}) => {
-  if (!quoteError || !getIsHighPriceImpactError(quoteError)) return null
-
-  return (
-    <div className="mb-2 p-3 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-800">
-      <div className="flex items-start gap-2">
-        <svg
-          className="w-4 h-4 text-red-600 dark:text-red-400 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <div className="flex-1 min-w-0">
-          <p className="text-xs font-medium text-red-700 dark:text-red-300">
-            Quote Unavailable — High Price Impact
-          </p>
-          <p className="text-xs text-red-600 dark:text-red-400 mt-0.5">
-            This transfer has a price impact over 30% on an amount over $100.
-            Try a smaller amount or a different route.
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default HighPriceImpactBlock

package/src/widget/components/HookModalContent.tsx

@@ -1,377 +0,0 @@
-import { AnimatePresence, motion } from "motion/react"
-import { useCallback, useState, useEffect, useRef } from "react"
-import { useQueryClient } from "@tanstack/react-query"
-import { zeroAddress } from "viem"
-import { useAccount } from "wagmi"
-import { logger } from "../../logger.js"
-import { toSeconds, elapsed } from "../../utils/time.js"
-import type { Token } from "../../tokens.js"
-import {
-  useTrailsModal,
-  type HostTransactionStatus,
-} from "../providers/TrailsModalProvider.js"
-import Modal from "./Modal.js"
-import TokenList from "./TokenList.js"
-import OriginSelectionAmount from "./OriginSelectionAmount.js"
-import WalletConfirmation from "./WalletConfirmation.js"
-import TransferPending from "./TransferPendingVertical.js"
-import Receipt from "./Receipt.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { useRecentTokens } from "../hooks/useRecentTokens.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { invalidateTokenBalancesCache } from "../../query/balance.queries.js"
-
-type HookModalScreen =
-  | "select-origin-token"
-  | "select-origin-amount"
-  | "wallet-confirmation"
-  | "pending"
-  | "receipt"
-
-function getScreenFromStatus(status: HostTransactionStatus): HookModalScreen {
-  switch (status) {
-    case "awaiting-origin":
-      return "select-origin-token"
-    case "awaiting-amount":
-      return "select-origin-amount"
-    case "confirmation":
-      return "wallet-confirmation"
-    case "pending":
-      return "pending"
-    case "success":
-    case "error":
-      return "receipt"
-    default:
-      return "select-origin-token"
-  }
-}
-
-/**
- * HookModalContent is the core modal UI component used by useTrailsSendTransaction.
- * It renders inside WidgetProviders, so it has access to all widget-level context providers.
- * This component handles the modal screens: token selection, amount input, wallet confirmation,
- * pending state, and receipt.
- */
-export function HookModalContent() {
-  const { address } = useAccount()
-  const { renderInline } = useWidgetProps()
-  const {
-    isModalOpen,
-    closeModal,
-    pendingSelection,
-    setPendingSelection,
-    hostTransactionState,
-    setHostTransactionState,
-    hostTransactionQuote,
-    hostTransactionStates,
-    hostTransactionTimestamp,
-    resetHostTransactionState,
-    resetForNewTransaction,
-    receiptActionButtonText,
-    onReceiptAction,
-    retryTransactionRef,
-    repeatTransactionRef,
-    lastOriginSelection,
-    setLastOriginSelection,
-  } = useTrailsModal()
-  const queryClient = useQueryClient()
-
-  // Debug logging
-  logger.console.log("[trails-sdk] [HookModalContent] Render state:", {
-    isModalOpen,
-    hostTransactionStatus: hostTransactionState.status,
-    hasPendingSelection: !!pendingSelection,
-  })
-
-  const { selectedToken, setSelectedToken } = useOriginSelectedToken()
-  const { recentTokens, addRecentToken } = useRecentTokens(address)
-  const [totalCompletionSeconds, setTotalCompletionSeconds] = useState<
-    number | null
-  >(null)
-
-  // Ref to store the last entered amount (persists across all modal state changes)
-  const lastEnteredAmountRef = useRef<string | undefined>(
-    lastOriginSelection?.amount,
-  )
-
-  // Keep ref in sync with context
-  useEffect(() => {
-    if (lastOriginSelection?.amount) {
-      lastEnteredAmountRef.current = lastOriginSelection.amount
-    }
-  }, [lastOriginSelection?.amount])
-
-  // Derive screen from hostTransactionState
-  const currentScreen = getScreenFromStatus(hostTransactionState.status)
-
-  // Calculate elapsed time on success
-  useEffect(() => {
-    if (hostTransactionState.status === "success" && hostTransactionTimestamp) {
-      setTotalCompletionSeconds(
-        Math.max(0, toSeconds(elapsed(hostTransactionTimestamp))),
-      )
-    }
-  }, [hostTransactionState.status, hostTransactionTimestamp])
-
-  const handleCloseModal = useCallback(() => {
-    if (pendingSelection) {
-      logger.console.log(
-        "[trails-sdk] [HookModalContent] Closing modal, rejecting pending selection",
-      )
-      pendingSelection.reject(new Error("Modal closed by user"))
-      setPendingSelection(undefined)
-    }
-    closeModal()
-    resetHostTransactionState()
-    setSelectedToken(null)
-  }, [
-    closeModal,
-    resetHostTransactionState,
-    pendingSelection,
-    setPendingSelection,
-    setSelectedToken,
-  ])
-
-  const handleTokenSelect = (token: Token) => {
-    setSelectedToken(token)
-
-    // Track the token in recent tokens
-    addRecentToken(token)
-
-    // Check if there's a pending selection request from useTrailsSendTransaction
-    if (pendingSelection) {
-      if (pendingSelection.requireAmountInput) {
-        setHostTransactionState((prev) => ({
-          ...prev,
-          status: "awaiting-amount",
-        }))
-        return
-      }
-      const originAddress = token.contractAddress || zeroAddress
-      try {
-        pendingSelection.resolve({
-          fromTokenAddress: originAddress,
-          fromChainId: token.chainId ?? 0,
-        })
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] [HookModalContent] Error resolving pending selection:",
-          error,
-        )
-        pendingSelection.reject(error as Error)
-      } finally {
-        setPendingSelection(undefined)
-      }
-    }
-  }
-
-  const handleRecentTokenSelect = (token: Token) => {
-    handleTokenSelect(token)
-  }
-
-  const handleOriginAmountSubmit = (amount: string) => {
-    // Always save the amount to the ref for persistence
-    lastEnteredAmountRef.current = amount
-
-    if (selectedToken) {
-      // Save the origin selection immediately so it's preserved even if user cancels later
-      setLastOriginSelection({
-        tokenAddress: selectedToken.contractAddress || zeroAddress,
-        chainId: selectedToken.chainId ?? 0,
-        amount: amount,
-      })
-    }
-
-    // Only resolve pendingSelection if it exists
-    if (pendingSelection && selectedToken) {
-      try {
-        pendingSelection.resolve({
-          fromTokenAddress: selectedToken.contractAddress || zeroAddress,
-          fromChainId: selectedToken.chainId ?? 0,
-          fromAmount: amount,
-        })
-        setPendingSelection(undefined)
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] [HookModalContent] Error resolving pending selection amount:",
-          error,
-        )
-        pendingSelection.reject(error as Error)
-        setPendingSelection(undefined)
-      }
-    }
-  }
-
-  const handleHookRetry = () => {
-    if (retryTransactionRef.current) {
-      setHostTransactionState((prev) => ({
-        ...prev,
-        retryEnabled: false,
-      }))
-      retryTransactionRef.current()
-    }
-  }
-
-  // Default "Swap Again" handler that repeats the last transaction with fresh quote
-  const handleSendAnother = useCallback(() => {
-    logger.console.log(
-      "[trails-sdk] [HookModalContent] handleSendAnother called",
-    )
-
-    // Invalidate quote cache to ensure fresh quote on next transaction
-    queryClient.invalidateQueries({ queryKey: ["prepareSend"] })
-
-    // Invalidate balance cache to ensure fresh balances after completed swap
-    invalidateTokenBalancesCache()
-
-    // Call custom callback if provided
-    if (onReceiptAction) {
-      onReceiptAction()
-    }
-
-    // Repeat the last transaction with the same parameters (preserves swap config)
-    if (repeatTransactionRef.current) {
-      repeatTransactionRef.current()
-    } else {
-      // Fallback to token selection if no previous transaction
-      resetForNewTransaction()
-    }
-  }, [
-    queryClient,
-    onReceiptAction,
-    repeatTransactionRef,
-    resetForNewTransaction,
-  ])
-
-  const renderScreenContent = () => {
-    switch (currentScreen) {
-      case "select-origin-token":
-        return (
-          <TokenList
-            onContinue={handleTokenSelect}
-            onBack={handleCloseModal}
-            targetAmountUsd={null}
-            targetAmountUsdFormatted={null}
-            onError={(error) => {
-              logger.console.error(
-                "[trails-sdk] [HookModalContent] Token list error:",
-                error,
-              )
-            }}
-            recentTokens={recentTokens}
-            onRecentTokenSelect={handleRecentTokenSelect}
-            fundMethod={null}
-            renderInline={renderInline}
-          />
-        )
-      case "select-origin-amount":
-        return (
-          <OriginSelectionAmount
-            token={selectedToken}
-            onBack={(currentAmount) => {
-              // Save the current amount before going back
-              lastEnteredAmountRef.current = currentAmount
-              setHostTransactionState((prev) => ({
-                ...prev,
-                status: "awaiting-origin",
-              }))
-            }}
-            onCancel={(currentAmount) => {
-              // Save the current amount before canceling
-              lastEnteredAmountRef.current = currentAmount
-              handleCloseModal()
-            }}
-            onSubmit={handleOriginAmountSubmit}
-            initialAmount={lastEnteredAmountRef.current}
-          />
-        )
-      case "wallet-confirmation":
-        return (
-          <WalletConfirmation
-            onBack={() =>
-              setHostTransactionState((prev) => ({
-                ...prev,
-                status: "awaiting-origin",
-              }))
-            }
-            onComplete={() => {
-              // Will transition to pending via hostTransactionState update
-            }}
-            retryEnabled={hostTransactionState.retryEnabled ?? false}
-            onRetry={handleHookRetry}
-            quote={hostTransactionQuote}
-          />
-        )
-      case "pending":
-        return (
-          <TransferPending
-            onElapsedTime={(seconds) => setTotalCompletionSeconds(seconds ?? 0)}
-            transactionStates={hostTransactionStates}
-            quote={hostTransactionQuote}
-            timestamp={hostTransactionTimestamp ?? undefined}
-            onContinue={() => {
-              // Receipt screen will be shown via hostTransactionState
-            }}
-          />
-        )
-      case "receipt":
-        return (
-          <Receipt
-            onSendAnother={handleSendAnother}
-            onClose={handleCloseModal}
-            renderInline={renderInline}
-            transactionStates={hostTransactionStates}
-            totalCompletionSeconds={totalCompletionSeconds ?? undefined}
-            quote={hostTransactionQuote}
-            showCloseButton={false}
-            actionButtonText={receiptActionButtonText ?? undefined}
-          />
-        )
-      default:
-        return null
-    }
-  }
-
-  if (!isModalOpen || hostTransactionState.status === "idle") {
-    return null
-  }
-
-  return (
-    <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{ opacity: 0, scale: 0.95 }}
-        transition={{
-          type: "spring",
-          stiffness: 200,
-          damping: 30,
-          mass: 1,
-        }}
-        className="flex flex-col min-h-[400px] shadow-xl p-4 sm:p-6 relative w-full max-w-[400px] min-w-0 sm:w-[400px] mx-auto custom-scrollbar trails-bg-primary trails-text-primary trails-font trails-border-radius-widget trails-widget-border"
-        layout
-        layoutId="modal-container"
-        onClick={(e: React.MouseEvent) => e.stopPropagation()}
-      >
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={currentScreen}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
-            transition={{
-              type: "spring",
-              stiffness: 500,
-              damping: 30,
-              mass: 0.6,
-            }}
-            className="flex-1 flex flex-col w-full min-w-0"
-            layout
-          >
-            {renderScreenContent()}
-          </motion.div>
-        </AnimatePresence>
-      </motion.div>
-    </Modal>
-  )
-}