0xtrails 0.0.1 → 0.0.2

package/src/widget/components/FeeOptions.tsx

@@ -0,0 +1,199 @@
+import { TokenImage } from "./TokenImage.js"
+import { ChevronDown } from "lucide-react"
+import type React from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useQueryParams } from "../../queryParams.js"
+import type { ActiveTheme } from "../../theme.js"
+
+// Simulated fee amounts and prices
+const FEE_AMOUNTS = {
+  ETH: "0.00001",
+  USDC: "0.1",
+}
+
+const TOKEN_PRICES = {
+  ETH: 3500, // Simulated ETH price in USD
+  USDC: 1, // USDC is pegged to USD
+}
+
+interface FeeToken {
+  name: string
+  symbol: string
+  imageUrl: string
+  decimals: number
+}
+
+interface FeeOptionsProps {
+  options: FeeToken[]
+  selectedOption?: FeeToken
+  onSelect: (option: FeeToken) => void
+  theme?: ActiveTheme
+}
+
+export const FeeOptions: React.FC<FeeOptionsProps> = ({
+  options,
+  selectedOption,
+  onSelect,
+  theme = "light",
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const { hasParam } = useQueryParams()
+
+  // Show fee display if feeOptions=true is in URL params
+  const shouldShowFeeDisplay = hasParam("feeOptions", "true")
+
+  // Calculate USD value of fee
+  const feeUsdValue = useMemo(() => {
+    if (!selectedOption) return "0.00"
+    const feeAmount = parseFloat(
+      FEE_AMOUNTS[selectedOption.symbol as keyof typeof FEE_AMOUNTS] || "0",
+    )
+    const tokenPrice =
+      TOKEN_PRICES[selectedOption.symbol as keyof typeof TOKEN_PRICES] || 0
+    const usdValue = feeAmount * tokenPrice
+    return usdValue.toFixed(2)
+  }, [selectedOption])
+
+  // Set first option as default if none selected
+  useEffect(() => {
+    if (!selectedOption && options.length > 0) {
+      onSelect(options[0]!)
+    }
+  }, [selectedOption, options, onSelect])
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
+
+  if (!shouldShowFeeDisplay) {
+    return null
+  }
+
+  return (
+    <div className="space-y-1" ref={dropdownRef}>
+      <div className="flex items-center justify-between">
+        <label
+          className={`block text-xs font-medium ${
+            theme === "dark" ? "text-gray-300" : "text-gray-700"
+          }`}
+        >
+          Pay fee with
+        </label>
+        {selectedOption && (
+          <div
+            className={`text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`}
+          >
+            Fee {FEE_AMOUNTS[selectedOption.symbol as keyof typeof FEE_AMOUNTS]}{" "}
+            {selectedOption.symbol}
+            <span
+              className={`ml-1 text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`}
+            >
+              ≈ ${feeUsdValue}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="relative flex justify-start">
+        <button
+          type="button"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          className={`w-32 flex items-center px-3 py-2 border rounded-[16px] hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm ${
+            theme === "dark"
+              ? "bg-gray-800 border-gray-700 text-white"
+              : "bg-white border-gray-300 text-gray-900"
+          }`}
+        >
+          {selectedOption ? (
+            <>
+              <TokenImage
+                symbol={selectedOption.symbol}
+                imageUrl={selectedOption.imageUrl}
+                size={16}
+              />
+              <span className="ml-1.5 flex-1 text-left">
+                {selectedOption.symbol}
+              </span>
+            </>
+          ) : (
+            <span className="flex-1 text-left text-gray-400">
+              Select Fee Token
+            </span>
+          )}
+          <ChevronDown
+            className={`h-4 w-4 ${
+              theme === "dark" ? "text-gray-400" : "text-gray-400"
+            } transition-transform ${
+              isDropdownOpen ? "transform rotate-180" : ""
+            }`}
+          />
+        </button>
+
+        {isDropdownOpen && (
+          <div
+            className={`absolute z-10 mt-1 border rounded-[16px] shadow-lg w-32 ${
+              theme === "dark"
+                ? "bg-gray-800 border-gray-700"
+                : "bg-white border-gray-200"
+            }`}
+          >
+            {options.map((option) => (
+              <button
+                key={option.symbol}
+                type="button"
+                onClick={() => {
+                  onSelect(option)
+                  setIsDropdownOpen(false)
+                }}
+                className={`w-full flex items-center px-3 py-2 cursor-pointer text-sm ${
+                  theme === "dark"
+                    ? selectedOption?.symbol === option.symbol
+                      ? "bg-gray-700 text-white"
+                      : "text-white hover:bg-gray-700"
+                    : selectedOption?.symbol === option.symbol
+                      ? "bg-gray-100 text-gray-900"
+                      : "text-gray-900 hover:bg-gray-50"
+                }`}
+              >
+                <div
+                  className={`w-4 h-4 rounded-full flex items-center justify-center ${
+                    theme === "dark" ? "bg-gray-700" : "bg-gray-100"
+                  }`}
+                >
+                  <TokenImage
+                    symbol={option.symbol}
+                    imageUrl={option.imageUrl}
+                    size={16}
+                  />
+                </div>
+                <span className="ml-1.5">{option.symbol}</span>
+                {selectedOption?.symbol === option.symbol && (
+                  <span
+                    className={`ml-auto ${
+                      theme === "dark" ? "text-white" : "text-gray-900"
+                    }`}
+                  >
+                    •
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default FeeOptions

package/src/widget/components/Footer.tsx

@@ -0,0 +1,51 @@
+import { motion } from "motion/react"
+import type React from "react"
+import type { ActiveTheme } from "../../theme.js"
+import TrailsLogoBlack from "../assets/Trails-logo-black.svg"
+import TrailsLogoWhite from "../assets/Trails-logo-white.svg"
+import { SITE_URL } from "../config.js"
+import DebugScreensDropdown from "./DebugScreensDropdown.js"
+
+interface FooterProps {
+  theme: ActiveTheme
+  onDebugScreenSelect: (screen: string) => void
+}
+
+export const Footer: React.FC<FooterProps> = ({
+  theme,
+  onDebugScreenSelect,
+}) => {
+  const TrailsLogo = theme === "dark" ? TrailsLogoWhite : TrailsLogoBlack
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.15 }}
+      className={`mt-auto pt-4 text-center text-sm relative flex items-center justify-center ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`}
+      layout
+    >
+      <div className="absolute right-0 flex items-center h-full">
+        <DebugScreensDropdown
+          onScreenSelect={onDebugScreenSelect}
+          theme={theme}
+        />
+      </div>
+      Powered by&nbsp;
+      <a
+        href={SITE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`font-medium transition-colors hover:opacity-80 leading-none ${
+          theme === "dark"
+            ? "text-gray-400 hover:text-white"
+            : "text-gray-500 hover:text-black"
+        }`}
+      >
+        <img src={TrailsLogo} alt="Trails" className="h-4 inline-block" />
+      </a>
+    </motion.div>
+  )
+}
+
+export default Footer

package/src/widget/components/GreenCheckAnimation.tsx

@@ -0,0 +1,119 @@
+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 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 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/Modal.tsx

@@ -0,0 +1,97 @@
+import { X } from "lucide-react"
+import { AnimatePresence, motion } from "motion/react"
+import type React from "react"
+import { useEffect, useRef } from "react"
+import type { ActiveTheme } from "../../theme.js"
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
+  theme?: ActiveTheme
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  theme = "light",
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  // Handle click outside
+  const handleClickOutside = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      onClose()
+    }
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            onClick={onClose}
+          />
+          <div
+            className={`fixed inset-0 flex items-center justify-center z-50 p-2 sm:p-4 ${theme === "dark" ? "text-white" : "text-gray-900"}`}
+            onClick={handleClickOutside}
+          >
+            <motion.div
+              ref={modalRef}
+              initial={{ opacity: 0, scale: 0.95, y: 10 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 10 }}
+              transition={{
+                type: "spring",
+                stiffness: 400,
+                damping: 25,
+                mass: 0.8,
+              }}
+              className="pointer-events-auto relative"
+              layoutId="modal-content"
+              layout="preserve-aspect"
+            >
+              <button
+                type="button"
+                onClick={onClose}
+                className={`absolute right-2 top-2 p-2 rounded-full transition-colors cursor-pointer z-10 ${
+                  theme === "dark"
+                    ? "hover:bg-gray-800 text-gray-400"
+                    : "hover:bg-gray-100 text-gray-600"
+                }`}
+              >
+                <X className="h-6 w-6" />
+              </button>
+              {children}
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}
+
+export default Modal

package/src/widget/components/Receipt.tsx

@@ -0,0 +1,237 @@
+// biome-ignore lint/style/useImportType: False positive
+import React, { useEffect, useState } from "react"
+import type { TransactionState } from "../../prepareSend.js"
+import type { ActiveTheme } from "../../theme.js"
+import { GreenCheckAnimation } from "./GreenCheckAnimation.js"
+
+interface ReceiptProps {
+  onSendAnother: () => void
+  onClose: () => void
+  theme?: ActiveTheme
+  renderInline?: boolean
+  transactionStates?: TransactionState[]
+}
+
+export const Receipt: React.FC<ReceiptProps> = ({
+  onClose,
+  theme = "light",
+  renderInline = false,
+  transactionStates = [],
+}) => {
+  const [showDetails, setShowDetails] = useState(false)
+  const [showContent, setShowContent] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowContent(true)
+    }, 400)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  const finalExplorerUrl =
+    transactionStates?.[transactionStates.length - 1]?.explorerUrl
+
+  if (!finalExplorerUrl) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col justify-center min-h-full space-y-6 pt-8">
+      <div className="text-center">
+        <div className={`mx-auto flex items-center justify-center`}>
+          <GreenCheckAnimation />
+        </div>
+
+        <div
+          className={`transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+        >
+          <h2
+            className={`mt-4 text-2xl font-bold ${theme === "dark" ? "text-white" : "text-gray-900"}`}
+          >
+            Transaction Confirmed
+          </h2>
+        </div>
+      </div>
+
+      <div
+        className={`text-center transition-all duration-500 ease-out delay-100 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+      >
+        <a
+          href={finalExplorerUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-md font-medium transition-colors border text-sm
+            ${
+              theme === "dark"
+                ? "bg-gray-900 border-gray-700 text-blue-300 hover:bg-gray-800 hover:text-blue-200"
+                : "bg-white border-gray-200 text-black hover:bg-gray-50 hover:text-gray-900"
+            }
+          `}
+        >
+          View on Explorer
+          <svg
+            className="w-4 h-4 ml-1"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke={theme === "dark" ? "currentColor" : "black"}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </a>
+      </div>
+
+      <div
+        className={`space-y-3 transition-all duration-500 ease-out delay-200 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+      >
+        {!renderInline && (
+          <button
+            onClick={onClose}
+            className={`w-full cursor-pointer font-semibold py-3 px-4 rounded-[24px] transition-colors ${
+              theme === "dark"
+                ? "bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white"
+                : "bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900"
+            }`}
+          >
+            Close
+          </button>
+        )}
+        <button
+          onClick={() => setShowDetails(!showDetails)}
+          className={`w-full flex items-center justify-center gap-2 py-2 px-4 rounded-[24px] transition-colors cursor-pointer text-sm ${
+            theme === "dark"
+              ? "text-gray-400 hover:text-gray-300"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          <span>More Details</span>
+          <svg
+            className={`w-4 h-4 transition-transform ${showDetails ? "rotate-180" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+        {showDetails && (
+          <div
+            className={`p-4 rounded-lg text-sm space-y-4 ${
+              theme === "dark" ? "bg-gray-800" : "bg-gray-50"
+            }`}
+          >
+            {transactionStates.length > 0 && (
+              <div className="space-y-2">
+                <div
+                  className={`font-medium ${
+                    theme === "dark" ? "text-gray-300" : "text-gray-700"
+                  }`}
+                >
+                  Transactions:
+                </div>
+                <div className="space-y-2">
+                  {transactionStates.map((state) => (
+                    <div
+                      key={state.transactionHash}
+                      className={`p-2 rounded ${
+                        theme === "dark" ? "bg-gray-700/50" : "bg-gray-100"
+                      }`}
+                    >
+                      <div className="flex justify-between items-center">
+                        <span
+                          className={
+                            theme === "dark" ? "text-gray-400" : "text-gray-600"
+                          }
+                        >
+                          {state.label}:
+                        </span>
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs ${
+                            state.state === "confirmed"
+                              ? theme === "dark"
+                                ? "bg-green-900/50 text-green-400"
+                                : "bg-green-100 text-green-700"
+                              : theme === "dark"
+                                ? "bg-yellow-900/50 text-yellow-400"
+                                : "bg-yellow-100 text-yellow-700"
+                          }`}
+                        >
+                          {state.state}
+                        </span>
+                      </div>
+                      <div className="mt-1 flex justify-between items-center">
+                        <span
+                          className={
+                            theme === "dark" ? "text-gray-400" : "text-gray-600"
+                          }
+                        >
+                          Chain ID:
+                        </span>
+                        <span
+                          className={
+                            theme === "dark" ? "text-white" : "text-gray-900"
+                          }
+                        >
+                          {state.chainId}
+                        </span>
+                      </div>
+                      <div className="mt-1 flex justify-between items-center">
+                        <span
+                          className={
+                            theme === "dark" ? "text-gray-400" : "text-gray-600"
+                          }
+                        >
+                          Hash:
+                        </span>
+                        <a
+                          href={state.explorerUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`flex items-center gap-1 hover:underline ${
+                            theme === "dark"
+                              ? "text-blue-400 hover:text-blue-300"
+                              : "text-blue-600 hover:text-blue-700"
+                          }`}
+                        >
+                          <span>
+                            {state.transactionHash.slice(0, 6)}...
+                            {state.transactionHash.slice(-4)}
+                          </span>
+                          <svg
+                            className="w-3 h-3"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Receipt