0xtrails 0.13.2 → 0.14.0

package/src/widget/components/TokenSelectorButton.tsx

@@ -1,123 +0,0 @@
-import { ChevronRight } from "lucide-react"
-import type React from "react"
-import { useMemo } from "react"
-import { useConnections } from "wagmi"
-import { getChainInfo } from "../../chains.js"
-import { useClickTracking } from "../hooks/useClickTracking.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { TokenImage } from "./TokenImage.js"
-
-interface TokenSelectorButtonProps {
-  token?: {
-    symbol: string
-    imageUrl?: string
-    contractAddress?: string
-    chainId?: number | null
-  } | null
-  chainId?: number | null
-  onSelect: () => void
-  className?: string
-  unselectable?: boolean
-  fullWidth?: boolean
-}
-
-export const TokenSelectorButton: React.FC<TokenSelectorButtonProps> = ({
-  token,
-  chainId,
-  onSelect,
-  className = "flex items-center justify-between trails-border-radius-input px-2.5 py-2 border transition-all duration-200",
-  unselectable = false,
-  fullWidth = false,
-}) => {
-  const connections = useConnections()
-  const { navigate } = useViewManager()
-  const { selectedFundMethod } = useSelectedFundMethod()
-  const displayChainId = token?.chainId || chainId
-
-  // Check if there are any connected accounts across all connectors
-  const isConnected = connections.length > 0
-
-  const chainInfo = useMemo(() => {
-    return displayChainId ? getChainInfo(displayChainId) : null
-  }, [displayChainId])
-
-  const { trackClick } = useClickTracking()
-
-  const handleClick = () => {
-    if (unselectable) return
-
-    trackClick({
-      component: "TokenSelectorButton",
-      action: "select_token",
-      label: token?.symbol || "unselected",
-      metadata: {
-        chainId: displayChainId?.toString(),
-        tokenSymbol: token?.symbol,
-        contractAddress: token?.contractAddress,
-        fundMethod: selectedFundMethod,
-      },
-    })
-
-    // If no wallet connected and fund method is "wallet", redirect to connect screen
-    if (!isConnected && selectedFundMethod === "wallet") {
-      navigate("connect")
-      return
-    }
-
-    onSelect()
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={unselectable}
-      className={`flex h-[52px] my-0 min-h-[52px] shrink-0 items-center ${className} ${!fullWidth && token ? "max-w-[145px]" : ""} ${fullWidth ? "w-full" : ""} ${
-        unselectable
-          ? "bg-[#F4F4F5] dark:bg-gray-800 border-gray-200 dark:border-gray-700 cursor-default"
-          : token
-            ? "bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 cursor-pointer"
-            : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white cursor-pointer"
-      }`}
-    >
-      {token ? (
-        <>
-          <div className="flex items-center flex-1 min-w-0 overflow-hidden">
-            <div className="flex items-center shrink-0">
-              <TokenImage
-                symbol={token.symbol}
-                imageUrl={token.imageUrl}
-                chainId={displayChainId}
-                contractAddress={token.contractAddress}
-                size={28}
-              />
-            </div>
-            <div className="flex flex-col items-start flex-1 min-w-0 overflow-hidden ml-1.5">
-              <span className="font-bold trails-text-primary text-sm leading-tight truncate w-full text-left">
-                {token.symbol}
-              </span>
-              {chainInfo && (
-                <span className="text-xs trails-text-muted leading-tight truncate w-full text-left">
-                  {chainInfo.name}
-                </span>
-              )}
-            </div>
-          </div>
-          {!unselectable && (
-            <ChevronRight className="w-3.5 h-3.5 shrink-0 trails-text-muted ml-1" />
-          )}
-        </>
-      ) : (
-        <>
-          <span className="font-medium text-sm text-white flex-1">
-            Select Token
-          </span>
-          {!unselectable && (
-            <ChevronRight className="w-3.5 h-3.5 shrink-0 text-white ml-1" />
-          )}
-        </>
-      )}
-    </button>
-  )
-}

package/src/widget/components/TokenSkeleton.tsx

@@ -1,53 +0,0 @@
-import type React from "react"
-
-interface TokenSkeletonProps {
-  className?: string
-}
-
-export const TokenSkeleton: React.FC<TokenSkeletonProps> = ({
-  className = "",
-}) => {
-  return (
-    <div
-      className={`w-full py-2 px-4 flex items-center space-x-3 ${className}`}
-      style={{ height: 56 }}
-    >
-      <div className="relative shrink-0 mr-2">
-        <div
-          className="rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse"
-          style={{ width: 32, height: 32 }}
-        />
-      </div>
-
-      <div className="flex-1 min-w-0 text-left space-y-2">
-        <div
-          className="bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
-          style={{ width: "65%", height: 14 }}
-        />
-        <div
-          className="bg-gray-200 dark:bg-gray-700 rounded animate-pulse"
-          style={{ width: "45%", height: 12 }}
-        />
-      </div>
-    </div>
-  )
-}
-
-interface TokenSkeletonListProps {
-  count?: number
-  className?: string
-}
-
-export const TokenSkeletonList: React.FC<TokenSkeletonListProps> = ({
-  count = 4,
-  className = "",
-}) => {
-  return (
-    <div className={className}>
-      {Array.from({ length: count }).map((_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: Static skeleton list that never reorders
-        <TokenSkeleton key={index} />
-      ))}
-    </div>
-  )
-}

package/src/widget/components/Tooltip.tsx

@@ -1,64 +0,0 @@
-import type React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-import { useTheme } from "./ThemeProvider.js"
-import { useShadowRoot } from "./ShadowRootContext.js"
-
-interface TooltipProps {
-  message?: string
-  content?: React.ReactNode
-  children: React.ReactNode
-  className?: string
-  side?: "top" | "right" | "bottom" | "left"
-  align?: "start" | "center" | "end"
-  sideOffset?: number
-  alignOffset?: number
-}
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  message,
-  content,
-  children,
-  className = "",
-  side = "top",
-  align = "center",
-  sideOffset = 4,
-  alignOffset = 0,
-}) => {
-  const { isDark } = useTheme()
-  const { container } = useShadowRoot()
-  const tooltipContent = content ?? message
-
-  return (
-    <TooltipPrimitive.Provider>
-      <TooltipPrimitive.Root delayDuration={0}>
-        <TooltipPrimitive.Trigger asChild>
-          <div className={className}>{children}</div>
-        </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal container={container}>
-          <TooltipPrimitive.Content
-            className="trails-border-radius-container px-3 py-2 text-xs font-medium shadow-lg z-[100] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-            style={{
-              maxWidth: "400px",
-              wordWrap: "break-word",
-              whiteSpace: "normal",
-              overflowWrap: "break-word",
-              backgroundColor: isDark ? "#111827" : "#ffffff", // gray-900 or white
-              color: isDark ? "#ffffff" : "#000000", // white or black
-            }}
-            side={side}
-            align={align}
-            sideOffset={sideOffset}
-            alignOffset={alignOffset}
-          >
-            {tooltipContent}
-            <TooltipPrimitive.Arrow
-              style={{ fill: isDark ? "#111827" : "#ffffff" }} // gray-900 or white
-            />
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
-  )
-}
-
-export default Tooltip

package/src/widget/components/TrailsHookModal.tsx

@@ -1,107 +0,0 @@
-import { useState, useEffect, useContext, useMemo } from "react"
-import { createPortal } from "react-dom"
-import { WagmiContext, WagmiProvider, createStorage } from "wagmi"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { logger } from "../../logger.js"
-import { getConnectorsInternal } from "../../wallets.js"
-import { queryClient, defaultQueryOptions } from "../../query/client.js"
-import { createWagmiConfig } from "../utils/createWagmiConfig.js"
-import { TrailsContext } from "../providers/TrailsProvider.js"
-import { ShadowPortal } from "./ShadowPortal.js"
-import { ThemeProvider } from "./ThemeProvider.js"
-import { WidgetProviders } from "./WidgetProviders.js"
-import { HookModalContent } from "./HookModalContent.js"
-
-/** Shares the singleton's QueryCache + MutationCache for cache deduplication. */
-const modalQueryClient = new QueryClient({
-  queryCache: queryClient.getQueryCache(),
-  mutationCache: queryClient.getMutationCache(),
-  defaultOptions: defaultQueryOptions,
-})
-
-/**
- * Inner component that renders the portal with shared provider tree.
- * Uses WidgetProviders to ensure all widget-level context providers are available.
- */
-function TrailsHookModalInner() {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-    logger.console.log("[trails-sdk] [TrailsHookModalInner] Mounted")
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  return createPortal(
-    <ShadowPortal>
-      <ThemeProvider>
-        <WidgetProviders>
-          <HookModalContent />
-        </WidgetProviders>
-      </ThemeProvider>
-    </ShadowPortal>,
-    document.body,
-  )
-}
-
-/**
- * TrailsHookModal is the modal component used by useTrailsSendTransaction.
- * It creates its own WagmiProvider if none exists, ensuring it can work
- * both with and without a parent TrailsWidget.
- *
- * The modal content is wrapped with WidgetProviders to ensure all widget-level
- * context providers are available, making shared components like ScreenHeader work.
- */
-export function TrailsHookModal() {
-  const wagmiContext = useContext(WagmiContext)
-  const trailsContext = useContext(TrailsContext)
-
-  logger.console.log("[trails-sdk] [TrailsHookModal] Check:", {
-    hasWagmiContext: !!wagmiContext,
-    hasTrailsContext: !!trailsContext,
-  })
-
-  // Create wagmi config if no parent WagmiProvider exists
-  const wagmiConfig = useMemo(() => {
-    if (wagmiContext) {
-      logger.console.log(
-        "[trails-sdk] [TrailsHookModal] Using parent WagmiProvider",
-      )
-      return null // Use parent's config
-    }
-
-    logger.console.log(
-      "[trails-sdk] [TrailsHookModal] Creating own WagmiProvider",
-    )
-
-    const apiKey = trailsContext?.trailsApiKey || ""
-
-    return createWagmiConfig({
-      apiKey,
-      nodeGatewayUrl: trailsContext?.sequenceNodeGatewayUrl,
-      connectors: getConnectorsInternal(apiKey, trailsContext?.trailsApiUrl),
-      storage: createStorage({
-        storage: localStorage,
-        key: "trails-hook-modal-wagmi",
-      }),
-    })
-  }, [wagmiContext, trailsContext])
-
-  const content = <TrailsHookModalInner />
-
-  // Wrap with WagmiProvider if we created our own config
-  if (wagmiConfig) {
-    return (
-      <WagmiProvider config={wagmiConfig}>
-        <QueryClientProvider client={modalQueryClient}>
-          {content}
-        </QueryClientProvider>
-      </WagmiProvider>
-    )
-  }
-
-  return content
-}