0xtrails 0.13.1 → 0.14.0

package/src/widget/components/RefundWarning.tsx

@@ -1,66 +0,0 @@
-import type React from "react"
-import type { FundMethod } from "../../transactionIntent/types.js"
-
-interface RefundWarningProps {
-  fundMethod?: FundMethod
-  isSenderContractOnOrigin?: boolean
-  isSenderContractOnDestination?: boolean
-  isSequenceWallet?: boolean
-}
-
-export const RefundWarning: React.FC<RefundWarningProps> = ({
-  fundMethod,
-  isSenderContractOnOrigin,
-  isSenderContractOnDestination,
-  isSequenceWallet = false,
-}) => {
-  // Determine if we should show the warning
-  const shouldShowWarning =
-    fundMethod === "onramp-mesh" ||
-    (isSenderContractOnOrigin &&
-      !isSenderContractOnDestination &&
-      !isSequenceWallet)
-
-  if (!shouldShowWarning) {
-    return null
-  }
-
-  // Determine the warning message
-  let warningMessage = ""
-  if (fundMethod === "onramp-mesh") {
-    warningMessage =
-      "Using exchange funding may result in loss of funds if the transaction fails and the sender address cannot accept refunds on the origin chain."
-  } else if (isSenderContractOnOrigin && !isSenderContractOnDestination) {
-    warningMessage =
-      "The sender is a contract address. Funds may be lost if the transaction fails and the contract cannot accept refunds on the destination chain."
-  }
-
-  return (
-    <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-      <div className="flex items-start space-x-2">
-        <svg
-          className="w-4 h-4 text-amber-500 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>
-          <p className="text-sm font-medium text-amber-600 dark:text-amber-400">
-            Risk of Fund Loss
-          </p>
-          <p className="text-xs mt-1 text-amber-600 dark:text-amber-400">
-            {warningMessage}
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/widget/components/RequiredPropsError.tsx

@@ -1,33 +0,0 @@
-import type React from "react"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-
-interface RequiredPropsErrorProps {
-  missingProps: string[]
-  componentName: string
-}
-
-export const RequiredPropsError: React.FC<RequiredPropsErrorProps> = ({
-  missingProps,
-  componentName,
-}) => {
-  if (missingProps.length === 0) {
-    return null
-  }
-
-  const isMultiple = missingProps.length > 1
-
-  const prettifiedMessage = `Missing required ${componentName} prop${isMultiple ? "s" : ""}`
-
-  const detailedMessage = `The following required props are missing for the ${componentName} component:
-${missingProps.map((prop) => `- ${prop}`).join("\n")}
-
-Please ensure all required props are provided when rendering the ${componentName} component.`
-
-  return (
-    <ErrorDisplay
-      errorPrettified={prettifiedMessage}
-      error={detailedMessage}
-      severity="error"
-    />
-  )
-}

package/src/widget/components/ScreenHeader.tsx

@@ -1,123 +0,0 @@
-import { ChevronLeft, X } from "lucide-react"
-import type React from "react"
-import { useConnections } from "wagmi"
-import AccountActionsDropdown from "./AccountActionsDropdown.js"
-import AccountIntentTransactionHistoryButton from "./AccountIntentTransactionHistoryButton.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useTrailsModal } from "../providers/TrailsModalProvider.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-
-interface ScreenHeaderProps {
-  onBack?: () => void
-  headerContent?: string | React.ReactNode
-  rightSideContent?: React.ReactNode
-  headerContentAlign?: "left" | "center"
-  onDebugScreenSelect?: (screen: string) => void
-  showAccountActions?: boolean
-  customActions?: React.ReactNode
-}
-
-export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
-  onBack,
-  headerContent,
-  rightSideContent,
-  headerContentAlign = "left",
-  showAccountActions = false,
-  customActions,
-}) => {
-  const connections = useConnections()
-  const { renderInline } = useWidgetProps()
-  const { getHandleCloseModal, isModalOpen } = useTrailsModal()
-  const { trackClick } = useClickTracking()
-
-  const handleClose = () => {
-    trackClick({
-      component: "ScreenHeader",
-      action: "close_modal",
-      metadata: {
-        headerContent:
-          typeof headerContent === "string" ? headerContent : "custom",
-      },
-    })
-    const handleCloseModal = getHandleCloseModal()
-    if (handleCloseModal) {
-      handleCloseModal()
-    }
-  }
-
-  // Check if there are any connected accounts across all connectors
-  const isConnected = connections.length > 0
-
-  // Show close button when in modal mode (not renderInline) and modal is open
-  const showCloseButton = !renderInline && isModalOpen
-  return (
-    <div className="flex items-center justify-between w-full mb-4">
-      {/* Left side - Back button */}
-      <div className="flex items-center">
-        {onBack && (
-          <button
-            type="button"
-            onClick={() => {
-              trackClick({
-                component: "ScreenHeader",
-                action: "navigate_back",
-                metadata: {
-                  headerContent:
-                    typeof headerContent === "string"
-                      ? headerContent
-                      : "custom",
-                },
-              })
-              onBack()
-            }}
-            className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 mr-2"
-            title="Back"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-        )}
-
-        {/* Header content */}
-        {headerContent && (
-          <h2
-            className={`text-lg font-bold ${
-              headerContentAlign === "center" ? "text-center" : "text-left"
-            } text-gray-900 dark:text-white`}
-          >
-            {headerContent}
-          </h2>
-        )}
-      </div>
-
-      {/* Right side - Content, Account Actions, and Close button */}
-      <div className="flex items-center gap-2">
-        {/* Right side content and Account Actions */}
-        {rightSideContent && (
-          <div className="text-right max-w-[280px]">{rightSideContent}</div>
-        )}
-        {/* Custom actions - appears before account actions */}
-        {customActions}
-        {isConnected && showAccountActions && (
-          <>
-            <div className="m-0">
-              <AccountIntentTransactionHistoryButton />
-            </div>
-            <AccountActionsDropdown />
-          </>
-        )}
-
-        {/* Close button (always rightmost) */}
-        {showCloseButton && (
-          <button
-            type="button"
-            onClick={handleClose}
-            className="flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
-            title="Close"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/widget/components/SearchInputField.tsx

@@ -1,99 +0,0 @@
-import { Search } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
-
-interface SearchInputFieldProps {
-  value?: string
-  onChange?: (value: string) => void
-  onDebouncedChange?: (value: string) => void
-  debounceMs?: number
-  placeholder?: string
-  autoFocus?: boolean
-  rightAlignedComponent?: React.ReactNode
-  className?: string
-}
-
-export const SearchInputField: React.FC<SearchInputFieldProps> = ({
-  value: controlledValue,
-  onChange,
-  onDebouncedChange,
-  debounceMs = 300,
-  placeholder = "Search",
-  autoFocus = false,
-  rightAlignedComponent,
-  className = "",
-}) => {
-  const searchInputRef = useRef<HTMLInputElement>(null)
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const [internalValue, setInternalValue] = useState(controlledValue ?? "")
-  const isControlled = controlledValue !== undefined && onChange !== undefined
-  const displayValue = isControlled ? controlledValue : internalValue
-
-  useEffect(() => {
-    if (isControlled && controlledValue !== internalValue) {
-      setInternalValue(controlledValue)
-    }
-  }, [controlledValue, isControlled, internalValue])
-
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current)
-      }
-    }
-  }, [])
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value
-
-      setInternalValue(newValue)
-
-      if (onChange) {
-        onChange(newValue)
-      }
-
-      if (onDebouncedChange) {
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current)
-        }
-        debounceTimerRef.current = setTimeout(() => {
-          onDebouncedChange(newValue)
-        }, debounceMs)
-      }
-    },
-    [onChange, onDebouncedChange, debounceMs],
-  )
-
-  useEffect(() => {
-    if (autoFocus && searchInputRef.current) {
-      searchInputRef.current.focus()
-    }
-  }, [autoFocus])
-
-  return (
-    <div className={`relative ${className}`}>
-      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <Search className="h-5 w-5 text-gray-500 dark:text-gray-500" />
-      </div>
-      <input
-        ref={searchInputRef}
-        type="text"
-        value={displayValue}
-        onChange={handleChange}
-        placeholder={placeholder}
-        className={`block w-full pl-10 ${rightAlignedComponent ? "pr-16" : "pr-4"} py-2 border border-solid border-gray-200 dark:border-gray-700 trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-input`}
-      />
-
-      {rightAlignedComponent && (
-        <div className="absolute inset-y-0 right-0 flex items-center">
-          {rightAlignedComponent}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default SearchInputField

package/src/widget/components/SessionTimeoutScreen.tsx

@@ -1,103 +0,0 @@
-import { Clock, RefreshCw } from "lucide-react"
-import type React from "react"
-import { useEffect, useState } from "react"
-import { ScreenHeader } from "./ScreenHeader.js"
-
-interface SessionTimeoutScreenProps {
-  onTryAgain?: () => void
-  onBack?: () => void
-  onRetry?: () => void // For regenerating widget session
-  title?: string
-  message?: string
-  showAnimation?: boolean
-}
-
-export const SessionTimeoutScreen: React.FC<SessionTimeoutScreenProps> = ({
-  onTryAgain,
-  onBack,
-  onRetry,
-  title = "Session Timeout",
-  message = "Your payment session has timed out. Please try again to continue with your transaction.",
-  showAnimation = true,
-}) => {
-  const [showContent, setShowContent] = useState(false)
-
-  useEffect(() => {
-    if (showAnimation) {
-      const timer = setTimeout(() => setShowContent(true), 100)
-      return () => clearTimeout(timer)
-    } else {
-      setShowContent(true)
-    }
-  }, [showAnimation])
-
-  return (
-    <div className="space-y-6">
-      <ScreenHeader onBack={onBack} headerContent={title} />
-
-      <div className="flex flex-col items-center justify-center min-h-[400px] space-y-6 px-4">
-        {/* Timeout Icon */}
-        <div
-          className={`transition-all duration-700 ease-out ${
-            showContent ? "opacity-100 scale-100" : "opacity-0 scale-75"
-          }`}
-        >
-          <div className="w-20 h-20 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
-            <Clock className="w-10 h-10 text-orange-600 dark:text-orange-400" />
-          </div>
-        </div>
-
-        {/* Content */}
-        <div
-          className={`text-center space-y-4 transition-all duration-700 ease-out delay-200 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
-            {title}
-          </h2>
-
-          <p className="text-gray-600 dark:text-gray-400 max-w-md leading-relaxed">
-            {message}
-          </p>
-
-          <div className="text-sm text-gray-500 dark:text-gray-500 mt-2">
-            No payment was processed
-          </div>
-        </div>
-
-        {/* Action Buttons */}
-        <div
-          className={`flex flex-col sm:flex-row gap-3 w-full max-w-xs transition-all duration-700 ease-out delay-400 ${
-            showContent
-              ? "opacity-100 translate-y-0"
-              : "opacity-0 translate-y-4"
-          }`}
-        >
-          <button
-            type="button"
-            onClick={onRetry || onTryAgain}
-            className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
-          >
-            <RefreshCw className="w-4 h-4" />
-            Try Again
-          </button>
-
-          {onBack && (
-            <button
-              type="button"
-              onClick={onBack}
-              className="flex-1 px-6 py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-colors cursor-pointer"
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SessionTimeoutScreen

package/src/widget/components/ShadowPortal.tsx

@@ -1,99 +0,0 @@
-import { useRef, useState, useEffect } from "react"
-import { createPortal } from "react-dom"
-import { ShadowRootProvider } from "./ShadowRootContext.js"
-import { styles } from "../styles.js"
-
-export interface ShadowPortalProps {
-  children: React.ReactNode
-  customCss?: string
-}
-
-type ShadowRootWithStyles = ShadowRoot & {
-  adoptedStyleSheets?: CSSStyleSheet[]
-}
-
-const buildStyleSheetCss = (customCss?: string) => {
-  if (!customCss) {
-    return styles
-  }
-
-  return `${styles}\n\n:root, [data-theme="light"], [data-theme="dark"] { ${customCss} }`
-}
-
-export function ShadowPortal({
-  children,
-  customCss,
-}: ShadowPortalProps): React.JSX.Element {
-  const hostRef = useRef<HTMLDivElement>(null)
-  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)
-
-  useEffect(() => {
-    if (hostRef.current) {
-      const root =
-        hostRef.current.shadowRoot ??
-        hostRef.current.attachShadow({ mode: "open" })
-      const rootWithStyles = root as ShadowRootWithStyles
-      const stylesheetCss = buildStyleSheetCss(customCss)
-
-      if (typeof rootWithStyles.adoptedStyleSheets !== "undefined") {
-        const sheet = new CSSStyleSheet()
-        sheet.replaceSync(stylesheetCss)
-        rootWithStyles.adoptedStyleSheets = [sheet]
-      } else {
-        const styleTag = document.createElement("style")
-        styleTag.id = "trails-widget-inline-styles"
-        styleTag.textContent = stylesheetCss
-        root.appendChild(styleTag)
-      }
-
-      setShadowRoot(root)
-    }
-  }, [customCss])
-
-  // Update custom CSS when it changes
-  useEffect(() => {
-    if (!shadowRoot) {
-      return
-    }
-
-    const root = shadowRoot
-    const rootWithStyles = root as ShadowRootWithStyles
-    const stylesheetCss = buildStyleSheetCss(customCss)
-
-    if (typeof rootWithStyles.adoptedStyleSheets !== "undefined") {
-      const sheet = new CSSStyleSheet()
-      sheet.replaceSync(stylesheetCss)
-      rootWithStyles.adoptedStyleSheets = [sheet]
-      return
-    }
-
-    const existingStyle = root.querySelector(
-      'style[id="trails-widget-inline-styles"]',
-    )
-
-    if (existingStyle) {
-      existingStyle.textContent = stylesheetCss
-      return
-    }
-
-    const styleTag = document.createElement("style")
-    styleTag.id = "trails-widget-inline-styles"
-    styleTag.textContent = stylesheetCss
-    root.appendChild(styleTag)
-  }, [customCss, shadowRoot])
-
-  return (
-    <div ref={hostRef} className="w-full">
-      {shadowRoot ? (
-        <ShadowRootProvider
-          value={{
-            shadowRoot,
-            container: shadowRoot as unknown as HTMLElement,
-          }}
-        >
-          {createPortal(children, shadowRoot)}
-        </ShadowRootProvider>
-      ) : null}
-    </div>
-  )
-}

package/src/widget/components/ShadowRootContext.tsx

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react"
-
-interface ShadowRootContextValue {
-  shadowRoot: ShadowRoot | null
-  container: HTMLElement | null
-}
-
-const ShadowRootContext = createContext<ShadowRootContextValue>({
-  shadowRoot: null,
-  container: null,
-})
-
-export const ShadowRootProvider = ShadowRootContext.Provider
-
-export function useShadowRoot() {
-  return useContext(ShadowRootContext)
-}

package/src/widget/components/SimpleRecipientInputScreen.tsx

@@ -1,91 +0,0 @@
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { isAddress } from "viem"
-
-interface SimpleRecipientInputScreenProps {
-  recipientInput: string
-  onChange: (value: string) => void
-  validationMessage?: string | null
-  validationColor?: string
-  onUseConnected?: () => void
-  canUseConnected?: boolean
-  placeholder?: string
-}
-
-export const SimpleRecipientInputScreen: React.FC<
-  SimpleRecipientInputScreenProps
-> = ({
-  recipientInput,
-  onChange,
-  validationMessage,
-  validationColor = "text-gray-500",
-  onUseConnected,
-  canUseConnected = false,
-  placeholder = "0x123... or vitalik.eth",
-}) => {
-  const [localInput, setLocalInput] = useState(recipientInput)
-  const debounceRef = useRef<number | undefined>(undefined)
-
-  useEffect(() => {
-    setLocalInput(recipientInput)
-  }, [recipientInput])
-
-  useEffect(() => {
-    if (debounceRef.current !== undefined) {
-      window.clearTimeout(debounceRef.current)
-    }
-    debounceRef.current = window.setTimeout(() => {
-      if (localInput !== recipientInput) {
-        onChange(localInput)
-      }
-    }, 300)
-
-    return () => {
-      if (debounceRef.current !== undefined) {
-        window.clearTimeout(debounceRef.current)
-      }
-    }
-  }, [localInput, recipientInput, onChange])
-
-  const isHexAddress = isAddress(localInput.trim())
-
-  return (
-    <div>
-      <label
-        htmlFor="recipient-input"
-        className="block text-xs text-gray-500 dark:text-gray-400 mb-2"
-      >
-        Address or ENS name
-      </label>
-      <div className="relative">
-        <input
-          type="text"
-          id="recipient-input"
-          value={localInput}
-          onChange={(e) => setLocalInput(e.target.value)}
-          placeholder={placeholder}
-          className={`w-full px-4 py-4 rounded-xl border trails-border-primary bg-transparent trails-text-primary placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-grey-500 focus:border-transparent text-xs`}
-        />
-        {!isHexAddress &&
-          canUseConnected &&
-          onUseConnected &&
-          localInput.length < 12 && (
-            <button
-              type="button"
-              onClick={onUseConnected}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium text-polygon-500 hover:text-polygon-600 transition-colors cursor-pointer"
-            >
-              Use connected
-            </button>
-          )}
-      </div>
-      {validationMessage && (
-        <p className={`text-xs ${validationColor} text-left mt-2 ml-2`}>
-          {validationMessage}
-        </p>
-      )}
-    </div>
-  )
-}
-
-export default SimpleRecipientInputScreen