0xtrails 0.0.1 → 0.0.2

package/dist/widget/components/DebugScreensDropdown.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useRef, useState } from "react";
+import { useQueryParams } from "../../queryParams.js";
+const SCREENS = [
+    "Connect",
+    "Tokens",
+    "Send",
+    "Wallet Confirmation",
+    "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",
+    "Receipt",
+];
+export const DebugScreensDropdown = ({ onScreenSelect, theme = "light", }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const { hasParam } = useQueryParams();
+    const shouldShow = hasParam("debug", "true");
+    if (!shouldShow) {
+        return null;
+    }
+    return (_jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsx("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: `p-1 rounded-full hover:bg-opacity-10 ${theme === "dark"
+                    ? "hover:bg-gray-800 text-gray-200"
+                    : "hover:bg-gray-100 text-gray-700"}`, children: _jsx(ChevronDown, { className: "w-4 h-4" }) }), isOpen && (_jsx("div", { className: `absolute bottom-full right-0 mb-1 w-40 border rounded-lg shadow-lg overflow-hidden max-h-[300px] overflow-y-auto ${theme === "dark"
+                    ? "bg-gray-800 border-gray-700 text-gray-200"
+                    : "bg-white border-gray-200 text-gray-700"}`, children: SCREENS.map((screen) => (_jsx("button", { type: "button", onClick: () => {
+                        onScreenSelect(screen);
+                        setIsOpen(false);
+                    }, className: `w-full text-left px-3 py-2 text-sm ${theme === "dark"
+                        ? "text-gray-200 hover:bg-gray-700"
+                        : "text-gray-700 hover:bg-gray-50"}`, children: screen }, screen))) }))] }));
+};
+export default DebugScreensDropdown;

package/dist/widget/components/FeeOptions.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { ActiveTheme } from "../../theme.js";
+interface FeeToken {
+    name: string;
+    symbol: string;
+    imageUrl: string;
+    decimals: number;
+}
+interface FeeOptionsProps {
+    options: FeeToken[];
+    selectedOption?: FeeToken;
+    onSelect: (option: FeeToken) => void;
+    theme?: ActiveTheme;
+}
+export declare const FeeOptions: React.FC<FeeOptionsProps>;
+export default FeeOptions;
+//# sourceMappingURL=FeeOptions.d.ts.map

package/dist/widget/components/FeeOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeeOptions.d.ts","sourceRoot":"","sources":["../../../src/widget/components/FeeOptions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAajD,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,QAAQ,EAAE,CAAA;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAA;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IACpC,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoKhD,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/widget/components/FeeOptions.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TokenImage } from "./TokenImage.js";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQueryParams } from "../../queryParams.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
+};
+export const FeeOptions = ({ options, selectedOption, onSelect, theme = "light", }) => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef(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] || "0");
+        const tokenPrice = TOKEN_PRICES[selectedOption.symbol] || 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) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    if (!shouldShowFeeDisplay) {
+        return null;
+    }
+    return (_jsxs("div", { className: "space-y-1", ref: dropdownRef, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: `block text-xs font-medium ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Pay fee with" }), selectedOption && (_jsxs("div", { className: `text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: ["Fee ", FEE_AMOUNTS[selectedOption.symbol], " ", selectedOption.symbol, _jsxs("span", { className: `ml-1 text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: ["\u2248 $", feeUsdValue] })] }))] }), _jsxs("div", { className: "relative flex justify-start", children: [_jsxs("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"}`, children: [selectedOption ? (_jsxs(_Fragment, { children: [_jsx(TokenImage, { symbol: selectedOption.symbol, imageUrl: selectedOption.imageUrl, size: 16 }), _jsx("span", { className: "ml-1.5 flex-1 text-left", children: selectedOption.symbol })] })) : (_jsx("span", { className: "flex-1 text-left text-gray-400", children: "Select Fee Token" })), _jsx(ChevronDown, { className: `h-4 w-4 ${theme === "dark" ? "text-gray-400" : "text-gray-400"} transition-transform ${isDropdownOpen ? "transform rotate-180" : ""}` })] }), isDropdownOpen && (_jsx("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"}`, children: options.map((option) => (_jsxs("button", { 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"}`, children: [_jsx("div", { className: `w-4 h-4 rounded-full flex items-center justify-center ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: _jsx(TokenImage, { symbol: option.symbol, imageUrl: option.imageUrl, size: 16 }) }), _jsx("span", { className: "ml-1.5", children: option.symbol }), selectedOption?.symbol === option.symbol && (_jsx("span", { className: `ml-auto ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: "\u2022" }))] }, option.symbol))) }))] })] }));
+};
+export default FeeOptions;

package/dist/widget/components/Footer.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+import type { ActiveTheme } from "../../theme.js";
+interface FooterProps {
+    theme: ActiveTheme;
+    onDebugScreenSelect: (screen: string) => void;
+}
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/widget/components/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/widget/components/Footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAMjD,UAAU,WAAW;IACnB,KAAK,EAAE,WAAW,CAAA;IAClB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9C;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCxC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/widget/components/Footer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+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";
+export const Footer = ({ theme, onDebugScreenSelect, }) => {
+    const TrailsLogo = theme === "dark" ? TrailsLogoWhite : TrailsLogoBlack;
+    return (_jsxs(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: true, children: [_jsx("div", { className: "absolute right-0 flex items-center h-full", children: _jsx(DebugScreensDropdown, { onScreenSelect: onDebugScreenSelect, theme: theme }) }), "Powered by\u00A0", _jsx("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"}`, children: _jsx("img", { src: TrailsLogo, alt: "Trails", className: "h-4 inline-block" }) })] }));
+};
+export default Footer;

package/dist/widget/components/GreenCheckAnimation.d.ts

@@ -0,0 +1,2 @@
+export declare function GreenCheckAnimation(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GreenCheckAnimation.d.ts.map

package/dist/widget/components/GreenCheckAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GreenCheckAnimation.d.ts","sourceRoot":"","sources":["../../../src/widget/components/GreenCheckAnimation.tsx"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,4CAoHlC"}

package/dist/widget/components/GreenCheckAnimation.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function GreenCheckAnimation() {
+    const [animate, setAnimate] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setAnimate(true);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    const styles = {
+        container: {
+            width: "80px",
+            height: "80px",
+            position: "relative",
+        },
+        circleContainer: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+        },
+        circleFill: {
+            position: "absolute",
+            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",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            transform: "rotate(-90deg)",
+        },
+        circle: {
+            fill: "none",
+            stroke: "url(#gradient)",
+            strokeWidth: 4,
+            strokeLinecap: "round",
+            strokeDasharray: 226,
+            strokeDashoffset: animate ? 0 : 226,
+            transition: "stroke-dashoffset 0.3s ease-out",
+        },
+        checkmarkContainer: {
+            position: "absolute",
+            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",
+            strokeLinejoin: "round",
+            strokeDasharray: 18,
+            strokeDashoffset: animate ? 0 : 18,
+            transition: "stroke-dashoffset 0.15s ease-out 0.45s",
+        },
+    };
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.circleContainer, children: [_jsx("div", { style: styles.circleFill }), _jsxs("svg", { style: styles.progressRing, children: [_jsx("defs", { children: _jsxs("radialGradient", { id: "gradient", cx: "50%", cy: "50%", r: "50%", gradientUnits: "objectBoundingBox", children: [_jsx("stop", { offset: "0%", style: { stopColor: "#22c55e", stopOpacity: 0 } }), _jsx("stop", { offset: "70%", style: { stopColor: "#22c55e", stopOpacity: 0.3 } }), _jsx("stop", { offset: "100%", style: { stopColor: "#22c55e", stopOpacity: 1 } })] }) }), _jsx("circle", { cx: "40", cy: "40", r: "36", style: styles.circle })] }), _jsx("div", { style: styles.checkmarkContainer, children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", children: _jsx("path", { d: "M6 14l4 4L18 8", style: styles.checkmarkPath }) }) })] }) }));
+}

package/dist/widget/components/Modal.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { ActiveTheme } from "../../theme.js";
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    theme?: ActiveTheme;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/widget/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/widget/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAEjD,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiF/B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/widget/components/Modal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useRef } from "react";
+const Modal = ({ isOpen, onClose, children, theme = "light", }) => {
+    const modalRef = useRef(null);
+    // Handle escape key
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen, onClose]);
+    // Handle click outside
+    const handleClickOutside = (e) => {
+        if (modalRef.current && !modalRef.current.contains(e.target)) {
+            onClose();
+        }
+    };
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(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 }), _jsx("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, children: _jsxs(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", children: [_jsx("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"}`, children: _jsx(X, { className: "h-6 w-6" }) }), children] }) })] })) }));
+};
+export default Modal;

package/dist/widget/components/Receipt.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { TransactionState } from "../../prepareSend.js";
+import type { ActiveTheme } from "../../theme.js";
+interface ReceiptProps {
+    onSendAnother: () => void;
+    onClose: () => void;
+    theme?: ActiveTheme;
+    renderInline?: boolean;
+    transactionStates?: TransactionState[];
+}
+export declare const Receipt: React.FC<ReceiptProps>;
+export default Receipt;
+//# sourceMappingURL=Receipt.d.ts.map

package/dist/widget/components/Receipt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Receipt.d.ts","sourceRoot":"","sources":["../../../src/widget/components/Receipt.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAGjD,UAAU,YAAY;IACpB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAA;CACvC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4N1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/widget/components/Receipt.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: False positive
+import { useEffect, useState } from "react";
+import { GreenCheckAnimation } from "./GreenCheckAnimation.js";
+export const Receipt = ({ 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 (_jsxs("div", { className: "flex flex-col justify-center min-h-full space-y-6 pt-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: `mx-auto flex items-center justify-center`, children: _jsx(GreenCheckAnimation, {}) }), _jsx("div", { className: `transition-all duration-500 ease-out ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: _jsx("h2", { className: `mt-4 text-2xl font-bold ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: "Transaction Confirmed" }) })] }), _jsx("div", { className: `text-center transition-all duration-500 ease-out delay-100 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: _jsxs("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"}
+          `, children: ["View on Explorer", _jsx("svg", { className: "w-4 h-4 ml-1", fill: "none", viewBox: "0 0 24 24", stroke: theme === "dark" ? "currentColor" : "black", children: _jsx("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" }) })] }) }), _jsxs("div", { className: `space-y-3 transition-all duration-500 ease-out delay-200 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: [!renderInline && (_jsx("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"}`, children: "Close" })), _jsxs("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"}`, children: [_jsx("span", { children: "More Details" }), _jsx("svg", { className: `w-4 h-4 transition-transform ${showDetails ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), showDetails && (_jsx("div", { className: `p-4 rounded-lg text-sm space-y-4 ${theme === "dark" ? "bg-gray-800" : "bg-gray-50"}`, children: transactionStates.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: `font-medium ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Transactions:" }), _jsx("div", { className: "space-y-2", children: transactionStates.map((state) => (_jsxs("div", { className: `p-2 rounded ${theme === "dark" ? "bg-gray-700/50" : "bg-gray-100"}`, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsxs("span", { className: theme === "dark" ? "text-gray-400" : "text-gray-600", children: [state.label, ":"] }), _jsx("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"}`, children: state.state })] }), _jsxs("div", { className: "mt-1 flex justify-between items-center", children: [_jsx("span", { className: theme === "dark" ? "text-gray-400" : "text-gray-600", children: "Chain ID:" }), _jsx("span", { className: theme === "dark" ? "text-white" : "text-gray-900", children: state.chainId })] }), _jsxs("div", { className: "mt-1 flex justify-between items-center", children: [_jsx("span", { className: theme === "dark" ? "text-gray-400" : "text-gray-600", children: "Hash:" }), _jsxs("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"}`, children: [_jsxs("span", { children: [state.transactionHash.slice(0, 6), "...", state.transactionHash.slice(-4)] }), _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("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" }) })] })] })] }, state.transactionHash))) })] })) }))] })] }));
+};
+export default Receipt;

package/dist/widget/components/SendForm.d.ts

@@ -0,0 +1,44 @@
+import type React from "react";
+import type { Account, WalletClient } from "viem";
+import type { TransactionState } from "../../prepareSend.js";
+import type { RelayerEnv } from "../../relayer.js";
+import type { ActiveTheme } from "../../theme.js";
+import type { OnCompleteProps, Token } from "../hooks/useSendForm.js";
+interface SendFormProps {
+    selectedToken: Token;
+    onSend: (amount: string, recipient: string) => void;
+    onBack: () => void;
+    onConfirm: () => void;
+    onComplete: (result: OnCompleteProps) => void;
+    account: Account;
+    sequenceProjectAccessKey: string;
+    apiUrl?: string;
+    env?: RelayerEnv;
+    toRecipient?: string;
+    toAmount?: string;
+    toChainId?: number;
+    toToken?: string;
+    toCalldata?: string;
+    walletClient: WalletClient;
+    theme?: ActiveTheme;
+    onTransactionStateChange: (transactionStates: TransactionState[]) => void;
+    useSourceTokenForButtonText?: boolean;
+    onError: (error: Error | string | null) => void;
+    onWaitingForWalletConfirm: (intentAddress?: string, originTokenInfo?: {
+        amount: string;
+        amountUsd: string;
+        tokenSymbol: string;
+        tokenName: string;
+        chainId: number;
+        imageUrl: string;
+    }) => void;
+    paymasterUrls?: Array<{
+        chainId: number;
+        url: string;
+    }>;
+    gasless?: boolean;
+    setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void;
+}
+export declare const SendForm: React.FC<SendFormProps>;
+export default SendForm;
+//# sourceMappingURL=SendForm.d.ts.map

package/dist/widget/components/SendForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendForm.d.ts","sourceRoot":"","sources":["../../../src/widget/components/SendForm.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAEjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAa,MAAM,yBAAyB,CAAA;AAMhF,UAAU,aAAa;IACrB,aAAa,EAAE,KAAK,CAAA;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,OAAO,CAAA;IAChB,wBAAwB,EAAE,MAAM,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,wBAAwB,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAA;IACzE,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,yBAAyB,EAAE,CACzB,aAAa,CAAC,EAAE,MAAM,EACtB,eAAe,CAAC,EAAE;QAChB,MAAM,EAAE,MAAM,CAAA;QACd,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,QAAQ,EAAE,MAAM,CAAA;KACjB,KACE,IAAI,CAAA;IACT,aAAa,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACvD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4BAA4B,EAAE,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;CACrE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+kB5C,CAAA;AAqDD,eAAe,QAAQ,CAAA"}

package/dist/widget/components/SendForm.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, Loader2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { isAddress } from "viem";
+import { useSendForm } from "../hooks/useSendForm.js";
+import { ChainImage } from "./ChainImage.js";
+import { FeeOptions } from "./FeeOptions.js";
+import { TokenImage } from "./TokenImage.js";
+export const SendForm = ({ selectedToken, onSend, onBack, onConfirm, onComplete, account, sequenceProjectAccessKey, apiUrl, env, toAmount, toRecipient, toChainId, toToken, toCalldata, walletClient, theme = "light", onTransactionStateChange, useSourceTokenForButtonText = false, onError, onWaitingForWalletConfirm, paymasterUrls, gasless, setWalletConfirmRetryHandler, }) => {
+    const { amount, amountUsdFormatted, balanceUsdFormatted, chainInfo, balanceFormatted, handleRecipientInputChange, handleSubmit, isChainDropdownOpen, isSubmitting, isTokenDropdownOpen, recipient, recipientInput, selectedDestinationChain, selectedDestToken, setAmount, setRecipient, setRecipientInput, setSelectedDestinationChain, setSelectedDestToken, buttonText, isValidRecipient, ensAddress, selectedFeeToken, setSelectedFeeToken, FEE_TOKENS, supportedTokens, setIsChainDropdownOpen, setIsTokenDropdownOpen, toAmountFormatted, destinationTokenAddress, supportedChains, isValidCustomToken, } = useSendForm({
+        account,
+        sequenceProjectAccessKey,
+        apiUrl,
+        env,
+        toAmount,
+        toRecipient,
+        toChainId,
+        toToken,
+        toCalldata,
+        walletClient,
+        theme,
+        onTransactionStateChange,
+        useSourceTokenForButtonText,
+        onError,
+        onWaitingForWalletConfirm,
+        paymasterUrls,
+        gasless,
+        onConfirm,
+        onComplete,
+        onSend,
+        selectedToken,
+        setWalletConfirmRetryHandler,
+    });
+    console.log("[trails-sdk] SendForm", {
+        amount,
+        isValidRecipient,
+        isSubmitting,
+        destinationTokenAddress,
+        isValidCustomToken,
+        isChainDropdownOpen,
+        selectedDestinationChain,
+        supportedChains: supportedChains.length,
+    });
+    const chainDropdownRef = useRef(null);
+    const tokenDropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            console.log("[trails-sdk] click outside handler called, isChainDropdownOpen:", isChainDropdownOpen);
+            if (chainDropdownRef.current &&
+                !chainDropdownRef.current.contains(event.target)) {
+                console.log("[trails-sdk] closing chain dropdown from outside click");
+                setIsChainDropdownOpen(false);
+            }
+            if (tokenDropdownRef.current &&
+                !tokenDropdownRef.current.contains(event.target)) {
+                setIsTokenDropdownOpen(false);
+            }
+        };
+        if (isChainDropdownOpen || isTokenDropdownOpen) {
+            document.addEventListener("click", handleClickOutside);
+            return () => document.removeEventListener("click", handleClickOutside);
+        }
+    }, [
+        setIsChainDropdownOpen,
+        setIsTokenDropdownOpen,
+        isChainDropdownOpen,
+        isTokenDropdownOpen,
+    ]);
+    if (!selectedDestinationChain) {
+        return null;
+    }
+    if (!selectedToken) {
+        return null;
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center relative", children: [_jsx("button", { type: "button", onClick: onBack, className: `absolute -left-2 p-2 rounded-full transition-colors cursor-pointer ${theme === "dark"
+                            ? "hover:bg-gray-800 text-gray-400"
+                            : "hover:bg-gray-100 text-gray-600"}`, children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("h2", { className: `text-lg font-semibold w-full text-center ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: "Send Payment" })] }), _jsx("div", { className: `flex items-center space-x-4 p-4 rounded-lg ${theme === "dark" ? "bg-gray-800" : "bg-gray-50"}`, children: _jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-start space-x-2", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { style: { width: "32px", height: "32px" }, children: _jsx(TokenImage, { symbol: selectedToken.symbol, imageUrl: selectedToken.imageUrl, chainId: selectedToken.chainId, size: 32 }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: `text-sm font-medium max-w-[135px] truncate ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: selectedToken.name }), _jsxs("span", { className: `text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: ["on ", chainInfo?.name || "Unknown Chain"] })] })] }) }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: `text-sm font-medium ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: [_jsxs("span", { className: `${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: ["Balance:", " "] }), balanceUsdFormatted] }), _jsxs("div", { className: `text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-600"}`, children: [balanceFormatted, " ", selectedToken.symbol] })] })] }) }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [_jsxs("div", { className: !toChainId ? "mb-4" : undefined, children: [_jsx("label", { htmlFor: "destination-chain", className: `block text-sm font-medium mb-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Destination Chain" }), toChainId ? (_jsxs("div", { className: "flex items-center px-2 py-1", children: [_jsx(ChainImage, { chainId: selectedDestinationChain.id, size: 24 }), _jsx("span", { className: `ml-2 ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: selectedDestinationChain.name })] })) : (_jsxs("div", { className: "relative", ref: chainDropdownRef, children: [_jsxs("button", { type: "button", onClick: () => setIsChainDropdownOpen(!isChainDropdownOpen), className: `w-full flex items-center px-4 py-3 border rounded-[24px] hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${theme === "dark"
+                                            ? "bg-gray-800 border-gray-700 text-white"
+                                            : "bg-white border-gray-300 text-gray-900"}`, children: [_jsx(ChainImage, { chainId: selectedDestinationChain.id, size: 24 }), _jsx("span", { className: "ml-2 flex-1 text-left", children: selectedDestinationChain.name }), _jsx(ChevronDown, { className: `h-5 w-5 ${theme === "dark" ? "text-gray-400" : "text-gray-400"} transition-transform ${isChainDropdownOpen ? "transform rotate-180" : ""}` })] }), isChainDropdownOpen && (_jsx("div", { className: `absolute z-10 w-full mt-1 border rounded-[24px] shadow-lg max-h-60 overflow-y-auto ${theme === "dark"
+                                            ? "bg-gray-800 border-gray-700"
+                                            : "bg-white border-gray-200"}`, children: supportedChains.map((chain) => (_jsxs("button", { type: "button", onClick: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                setSelectedDestinationChain(chain);
+                                                setIsChainDropdownOpen(false);
+                                            }, onMouseDown: (e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }, className: `w-full flex items-center px-4 py-3 ${theme === "dark"
+                                                ? selectedDestinationChain.id === chain.id
+                                                    ? "bg-gray-700 text-white"
+                                                    : "text-white hover:bg-gray-700"
+                                                : selectedDestinationChain.id === chain.id
+                                                    ? "bg-gray-100 text-gray-900"
+                                                    : "text-gray-900 hover:bg-gray-50"}`, children: [_jsx(ChainImage, { chainId: chain.id, size: 24 }), _jsx("span", { className: "ml-2", children: chain.name }), selectedDestinationChain.id === chain.id && (_jsx("span", { className: `ml-auto ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: "\u2022" }))] }, chain.id))) }))] }))] }), _jsxs("div", { className: !toToken ? "mb-4" : undefined, children: [_jsx("label", { htmlFor: "token", className: `block text-sm font-medium mb-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Receive Token" }), toToken ? (_jsxs("div", { className: "flex items-center px-2 py-1", children: [_jsx(TokenImage, { symbol: selectedDestToken?.symbol, imageUrl: selectedDestToken?.imageUrl, size: 24 }), _jsxs("span", { className: `ml-2 ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: [selectedDestToken?.name ?? "Unknown Token", " (", selectedDestToken?.symbol ?? "Unknown Symbol", ")"] })] })) : (_jsxs("div", { className: "relative", ref: tokenDropdownRef, children: [_jsxs("button", { type: "button", onClick: () => setIsTokenDropdownOpen(!isTokenDropdownOpen), className: `w-full flex items-center px-4 py-3 border rounded-[24px] hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${theme === "dark"
+                                            ? "bg-gray-800 border-gray-700 text-white"
+                                            : "bg-white border-gray-300 text-gray-900"}`, children: [_jsx("div", { className: `w-5 h-5 rounded-full flex items-center justify-center text-sm ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: _jsx(TokenImage, { symbol: selectedDestToken?.symbol, imageUrl: selectedDestToken?.imageUrl, size: 24 }) }), _jsxs("span", { className: "ml-2 flex-1 text-left", children: [selectedDestToken?.name, " (", selectedDestToken?.symbol, ")"] }), _jsx(ChevronDown, { className: `h-5 w-5 ${theme === "dark" ? "text-gray-400" : "text-gray-400"} transition-transform ${isTokenDropdownOpen ? "transform rotate-180" : ""}` })] }), isTokenDropdownOpen && (_jsx("div", { className: `absolute z-10 w-full mt-1 border rounded-[24px] shadow-lg max-h-60 overflow-y-auto ${theme === "dark"
+                                            ? "bg-gray-800 border-gray-700"
+                                            : "bg-white border-gray-200"}`, children: supportedTokens.map((token) => (_jsxs("button", { type: "button", onClick: () => {
+                                                setSelectedDestToken(token);
+                                                setIsTokenDropdownOpen(false);
+                                            }, className: `w-full flex items-center px-4 py-3 cursor-pointer ${theme === "dark"
+                                                ? selectedDestToken?.symbol === token.symbol
+                                                    ? "bg-gray-700 text-white"
+                                                    : "text-white hover:bg-gray-700"
+                                                : selectedDestToken?.symbol === token.symbol
+                                                    ? "bg-gray-100 text-gray-900"
+                                                    : "text-gray-900 hover:bg-gray-50"}`, children: [_jsx("div", { className: `w-5 h-5 rounded-full flex items-center justify-center text-sm ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: _jsx(TokenImage, { symbol: token.symbol, imageUrl: token.imageUrl, size: 24 }) }), _jsxs("span", { className: "ml-2", children: [token.name, " (", token.symbol, ")"] }), selectedDestToken?.symbol === token.symbol && (_jsx("span", { className: `ml-auto ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: "\u2022" }))] }, `${token.contractAddress}-${token.chainId}`))) }))] }))] }), _jsxs("div", { className: !toAmount ? "mb-2" : undefined, children: [_jsx("label", { htmlFor: "amount", className: `block text-sm font-medium mb-1 ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Amount to Receive" }), toAmount ? (_jsxs("div", { className: "flex items-center justify-between px-2 py-1", children: [_jsxs("span", { className: `${theme === "dark" ? "text-white" : "text-gray-900"}`, children: [toAmountFormatted, " ", selectedDestToken?.symbol] }), _jsxs("span", { className: `text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: ["\u2248 ", amountUsdFormatted] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative rounded-lg", children: [_jsx("input", { id: "amount", type: "text", value: amount, onChange: (e) => setAmount(e.target.value), placeholder: "0.00", className: `block w-full pl-4 pr-12 py-3 border rounded-[24px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg ${theme === "dark"
+                                                    ? "bg-gray-800 border-gray-700 text-white placeholder-gray-500"
+                                                    : "bg-white border-gray-300 text-gray-900 placeholder-gray-400"}` }), _jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-4", children: _jsx("span", { className: theme === "dark" ? "text-gray-400" : "text-gray-500", children: selectedDestToken?.symbol }) })] }), _jsx("div", { className: "h-6 mt-1", children: amount && selectedDestToken?.symbol && (_jsxs("div", { className: `text-sm ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: ["\u2248 ", amountUsdFormatted] })) })] }))] }), _jsxs("div", { className: !toRecipient ? "mb-4" : undefined, children: [_jsxs("div", { className: "flex justify-between items-center mb-1", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "recipient", className: `text-sm font-medium ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: toCalldata ? "Destination Address" : "Recipient Address" }), recipient &&
+                                                isAddress(recipient) &&
+                                                recipient.toLowerCase() === account.address.toLowerCase() && (_jsx("div", { className: `text-xs mt-0.5 ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "Same as sender" }))] }), _jsx("div", { className: "h-7 flex items-center", children: !toRecipient && recipient !== account.address ? (_jsx("button", { type: "button", onClick: (event) => {
+                                                event.preventDefault();
+                                                setRecipientInput(account.address);
+                                                setRecipient(account.address);
+                                            }, className: `px-2 py-1 text-xs cursor-pointer rounded-[24px] transition-colors bg-blue-500 hover:bg-blue-600 text-white`, children: "Use Account" })) : null })] }), toRecipient ? (_jsx("div", { className: "px-2 py-1 font-mono text-sm", children: _jsx("span", { className: `break-all ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: recipient }) })) : (_jsxs(_Fragment, { children: [_jsx("input", { id: "recipient", type: "text", value: recipientInput, onChange: handleRecipientInputChange, placeholder: "0x... or name.eth", className: `block w-full px-4 py-3 border rounded-[24px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm ${theme === "dark"
+                                            ? "bg-gray-800 border-gray-700 text-white placeholder-gray-500"
+                                            : "bg-white border-gray-300 text-gray-900 placeholder-gray-400"}` }), ensAddress && (_jsx("p", { className: theme === "dark"
+                                            ? "text-sm text-gray-400"
+                                            : "text-sm text-gray-500", children: recipient }))] }))] }), toCalldata && (_jsx("div", { className: "px-2 py-1", children: _jsx("p", { className: `text-xs ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "This transaction includes custom calldata for contract interaction at the destination address" }) })), _jsx(FeeOptions, { options: FEE_TOKENS, selectedOption: selectedFeeToken ?? undefined, onSelect: setSelectedFeeToken, theme: theme }), _jsx("div", { className: "flex flex-col space-y-3 pt-2", children: _jsx("button", { type: "submit", disabled: !amount ||
+                                !isValidRecipient ||
+                                isSubmitting ||
+                                !destinationTokenAddress ||
+                                !isValidCustomToken, className: `w-full font-semibold py-3 px-4 rounded-[24px] transition-colors relative ${theme === "dark"
+                                ? "bg-blue-600 disabled:bg-gray-700 text-white disabled:text-gray-400 enabled:hover:bg-blue-700"
+                                : "bg-blue-500 disabled:bg-gray-300 text-white disabled:text-gray-500 enabled:hover:bg-blue-600"} disabled:cursor-not-allowed cursor-pointer`, children: isSubmitting ? (_jsxs("div", { className: "flex items-center justify-center", children: [_jsx(Loader2, { className: `w-5 h-5 animate-spin mr-2 ${theme === "dark" ? "text-gray-400" : "text-white"}` }), _jsx("span", { children: buttonText })] })) : (buttonText) }) })] })] }));
+};
+const styles = `
+  select {
+    appearance: none;
+    border: 1px solid #e5e7eb;
+    outline: none;
+    font-size: 1rem;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    padding-right: 2rem;
+    
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  select:hover {
+    border-color: #d1d5db;
+  }
+
+  select:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+
+  select option {
+    padding: 0.75rem 1rem;
+    min-height: 3rem;
+    display: flex;
+    align-items: center;
+    padding-left: 2.75rem;
+    position: relative;
+    cursor: pointer;
+  }
+
+  select option:hover {
+    background-color: #f3f4f6;
+  }
+
+  select option:checked {
+    background-color: #eff6ff;
+    color: #1d4ed8;
+  }
+`;
+if (typeof document !== "undefined") {
+    const styleTag = document.createElement("style");
+    styleTag.textContent = styles;
+    document.head.appendChild(styleTag);
+}
+export default SendForm;

package/dist/widget/components/TokenImage.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+interface TokenImageProps {
+    imageUrl?: string;
+    symbol?: string;
+    chainId?: number;
+    size?: number;
+}
+export declare const TokenImage: React.FC<TokenImageProps>;
+export default TokenImage;
+//# sourceMappingURL=TokenImage.d.ts.map

package/dist/widget/components/TokenImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenImage.d.ts","sourceRoot":"","sources":["../../../src/widget/components/TokenImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwBhD,CAAA;AAED,eAAe,UAAU,CAAA"}