0xtrails 0.2.5 → 0.3.0

package/src/widget/components/Receipt.tsx

@@ -13,6 +13,7 @@ import { truncateAddress } from "../../utils.js"
 import { formatElapsed } from "../../utils.js"
 import { ChainImage } from "./ChainImage.js"
 import { getChainInfo } from "../../chains.js"
+import { useMode } from "../hooks/useMode.js"
 
 interface ReceiptProps {
   onSendAnother: () => void
@@ -86,6 +87,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   quote,
   showCloseButton,
 }) => {
+  const { mode } = useMode()
   const [showContent, setShowContent] = useState(false)
   const [showRefundInfo, setShowRefundInfo] = useState(false)
   const [refundMessage, setRefundMessage] = useState<string | ReactNode | null>(
@@ -111,6 +113,18 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return transactionStates.some((tx) => hasMetaTxError(tx))
   }, [transactionStates, hasMetaTxError])
 
+  const buttonText = useMemo(() => {
+    if (mode === "pay") {
+      return "Pay Again"
+    } else if (mode === "fund") {
+      return "Fund Again"
+    } else if (mode === "swap") {
+      return "Swap Again"
+    } else {
+      return "Send Again"
+    }
+  }, [mode])
+
   const {
     finalExplorerUrl,
     finalChainId,
@@ -154,7 +168,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   // Extract QuoteDetails section to reuse in both success and failure states
   const quoteDetailsSection = quote && (
     <div className="mt-2">
-      <QuoteDetails quote={quote} showContent={true}>
+      <QuoteDetails quote={quote} showContent={true} compact={true}>
         {transactionStates.length > 0 && (
           <>
             <div className="font-medium text-gray-700 dark:text-gray-300">
@@ -477,7 +491,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
               onClick={onSendAnother}
               className="inline-flex items-center gap-1 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 trails-border-radius-button transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer font-medium"
             >
-              Send Again
+              {buttonText}
               <ChevronRight className="w-4 h-4" />
             </button>
           </div>

package/src/widget/components/RecipientSelectorButton.tsx

@@ -26,15 +26,17 @@ export const RecipientSelectorButton: React.FC = () => {
     >
       {selectedRecipient ? (
         <>
-          <Identicon value={selectedRecipient} size={16} />
-          <span className="text-sm font-medium">
-            {truncateAddress(selectedRecipient, 4, 2)}
+          <div className="flex items-center mr-1">
+            <Identicon value={selectedRecipient} size={16} />
+          </div>
+          <span className="text-sm font-medium m-0">
+            {truncateAddress(selectedRecipient, 4, 4)}
           </span>
         </>
       ) : (
-        <span className="text-sm font-medium">Select Recipient</span>
+        <span className="text-sm font-medium m-0">Select Recipient</span>
       )}
-      <ChevronRight className="w-4 h-4" />
+      <ChevronRight className="w-4 h-4 m-0" />
     </button>
   )
 }

package/src/widget/components/Recipients.tsx

@@ -233,7 +233,7 @@ export const Recipients: React.FC<RecipientsProps> = ({
         {/* Recent Recipients */}
         {recentRecipients.length > 0 && (
           <div className="space-y-2">
-            <div className="text-sm font-medium text-gray-700 dark:text-gray-300 text-left">
+            <div className="text-sm font-medium text-gray-900 dark:text-gray-100 text-left">
               Recent wallets
             </div>
             <div className="trails-border-radius-container border trails-border-primary">

package/src/widget/components/ScreenHeader.tsx

@@ -1,8 +1,10 @@
-import { ChevronLeft } from "lucide-react"
+import { ChevronLeft, X } from "lucide-react"
 import type React from "react"
-import { useAccount } from "wagmi"
+import { useConnections } from "wagmi"
 import AccountActionsDropdown from "./AccountActionsDropdown.js"
+import AccountIntentTransactionHistoryButton from "./AccountIntentTransactionHistoryButton.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useModal } from "../widget.js"
 
 interface ScreenHeaderProps {
   onBack?: () => void
@@ -20,45 +22,67 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
   headerContentAlign = "left",
   showAccountActions = false,
 }) => {
-  const { isConnected } = useAccount()
+  const connections = useConnections()
   const { renderInline } = useWidgetProps()
+  const { closeModal, isModalOpen } = useModal()
+
+  // 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="relative w-full mb-4">
-      {/* Left side - Back button (absolute positioned) */}
-      {onBack && (
-        <button
-          type="button"
-          onClick={onBack}
-          className="absolute -left-2 top-1/2 -translate-y-1/2 -translate-x-0 w-6 h-6 flex-shrink-0 rounded-full transition-colors cursor-pointer text-gray-400 z-10 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800"
+    <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={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 */}
+        <h2
+          className={`text-lg font-semibold ${
+            headerContentAlign === "center" ? "text-center" : "text-left"
+          } text-gray-900 dark:text-white`}
         >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-      )}
+          {headerContent}
+        </h2>
+      </div>
 
-      {/* Center - Header content */}
-      <h2
-        className={`text-lg font-semibold ${
-          headerContentAlign === "left"
-            ? onBack
-              ? "text-left ml-8" // Add margin when back button exists to prevent overlap
-              : "text-left" // No margin when no back button
-            : "text-center" // Perfect center when center-aligned
-        } ${"text-gray-900 dark:text-white"}`}
-      >
-        {headerContent}
-      </h2>
+      {/* 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>
+        )}
+        {isConnected && showAccountActions && (
+          <>
+            <div className="m-0">
+              <AccountIntentTransactionHistoryButton />
+            </div>
+            <AccountActionsDropdown />
+          </>
+        )}
 
-      {/* Right side - Optional content and Account Actions */}
-      {(rightSideContent || (isConnected && showAccountActions)) && (
-        <div
-          className={`absolute ${renderInline ? "right-0" : "right-8"} top-1/2 -translate-y-1/2 -translate-x-0 flex items-center gap-2 z-10`}
-        >
-          {rightSideContent && (
-            <div className="text-right max-w-[280px]">{rightSideContent}</div>
-          )}
-          {isConnected && showAccountActions && <AccountActionsDropdown />}
-        </div>
-      )}
+        {/* Close button (always rightmost) */}
+        {showCloseButton && (
+          <button
+            type="button"
+            onClick={closeModal}
+            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/Swap.tsx

@@ -13,18 +13,17 @@ interface SwapProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string

package/src/widget/components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { createContext, useContext, useEffect, useState } from "react"
 import type { Theme } from "../../theme.js"
 import { ThemeProvider as DesignSystemThemeProvider } from "@0xsequence/design-system"
 import { logger } from "../../logger.js"
+import { DEFAULT_THEME } from "../../constants.js"
 
 interface ThemeContextType {
   theme: Theme
@@ -31,7 +32,7 @@ const getIsDark = (theme: Theme): boolean => {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   children,
-  initialTheme = "auto",
+  initialTheme = DEFAULT_THEME,
 }) => {
   const [theme, setTheme] = useState<Theme>(initialTheme)
   const [isDark, setIsDark] = useState(getIsDark(initialTheme))

package/src/widget/components/TokenDisplayNonSelectable.tsx

@@ -0,0 +1,40 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+
+interface TokenDisplayNonSelectableProps {
+  symbol: string
+  imageUrl?: string
+  chainId: number
+  contractAddress: string
+  chainName?: string
+}
+
+export const TokenDisplayNonSelectable: React.FC<
+  TokenDisplayNonSelectableProps
+> = ({ symbol, imageUrl, chainId, contractAddress, chainName }) => {
+  return (
+    <div className="relative max-w-[120px]">
+      <div className="flex items-center space-x-1.5 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
+        <div className="flex items-center flex-shrink-0">
+          <TokenImage
+            symbol={symbol}
+            imageUrl={imageUrl}
+            chainId={chainId}
+            contractAddress={contractAddress}
+            size={28}
+          />
+        </div>
+        <div className="flex flex-col items-start min-w-0 overflow-hidden">
+          <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
+            {symbol}
+          </span>
+          {chainName && (
+            <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
+              {chainName}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/TokenImage.tsx

@@ -64,7 +64,7 @@ export const TokenImage: React.FC<TokenImageProps> = ({
 
   return (
     <div
-      className={`rounded-full flex items-center justify-center text-sm relative ${
+      className={`rounded-full flex items-center justify-center text-sm relative m-0 ${
         symbol !== "ETH" ? "bg-gray-400 dark:bg-gray-900" : ""
       }`}
       style={{

package/src/widget/components/TokenSelector.tsx

@@ -2,6 +2,7 @@ import { ChevronLeft, Copy } from "lucide-react"
 import type React from "react"
 import { useState, useMemo } from "react"
 import { AnimatePresence, motion } from "framer-motion"
+import { zeroAddress } from "viem"
 import type { Token, TokenFormatted } from "../hooks/useTokenList.js"
 import { useTokenList } from "../hooks/useTokenList.js"
 import { useChainFilter } from "../hooks/useChainFilter.js"
@@ -14,6 +15,7 @@ import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
 import { SearchInputField } from "./SearchInputField.js"
 import { truncateAddress } from "../../utils.js"
 import { logger } from "../../logger.js"
+import { useAccount } from "wagmi"
 
 interface TokenSelectorProps {
   onTokenSelect: (selectedToken: Token) => void
@@ -55,6 +57,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
 }) => {
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null)
   const { isBalanceVisible } = useBalanceVisible()
+  const { address } = useAccount()
 
   const {
     searchQuery,
@@ -224,7 +227,9 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
               ? "No tokens found matching your search."
               : fundMethod === "qr-code" || fundMethod === "exchange"
                 ? ""
-                : "No available tokens found"}
+                : address
+                  ? "No available tokens found"
+                  : ""}
           </p>
         </div>
       )}
@@ -330,7 +335,9 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                       {/* Default state: show symbol */}
                       <div
                         className={`flex items-center transition-all duration-300 ease-in-out ${
-                          contractAddress
+                          contractAddress &&
+                          contractAddress.toLowerCase() !==
+                            zeroAddress.toLowerCase()
                             ? "group-hover:opacity-0 group-hover:transform group-hover:-translate-x-2"
                             : ""
                         } ${
@@ -346,58 +353,60 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
                         </span>
                       </div>
 
-                      {/* Hover state: show address with copy button */}
-                      {contractAddress && (
-                        <div
-                          className={`absolute top-0 left-0 flex items-center transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
-                            !isSufficientBalance &&
-                            fundMethod !== "qr-code" &&
-                            fundMethod !== "exchange"
-                              ? "group-hover:opacity-70"
-                              : "group-hover:opacity-100"
-                          } group-hover:translate-x-0`}
-                        >
-                          <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                            {truncateAddress(contractAddress)}
-                          </span>
-                          <button
-                            type="button"
-                            onClick={(e) =>
-                              handleCopyAddress(contractAddress, e)
-                            }
-                            className={`ml-1 p-0.5 rounded transition-all duration-200 cursor-pointer ${
-                              copiedAddress === contractAddress
-                                ? "bg-green-100 dark:bg-green-900/30"
-                                : "hover:bg-gray-200 dark:hover:bg-gray-600"
-                            }`}
-                            title={
-                              copiedAddress === contractAddress
-                                ? "Copied!"
-                                : "Copy full address"
-                            }
+                      {/* Hover state: show address with copy button (only for non-zero addresses) */}
+                      {contractAddress &&
+                        contractAddress.toLowerCase() !==
+                          zeroAddress.toLowerCase() && (
+                          <div
+                            className={`absolute top-0 left-0 flex items-center transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
+                              !isSufficientBalance &&
+                              fundMethod !== "qr-code" &&
+                              fundMethod !== "exchange"
+                                ? "group-hover:opacity-70"
+                                : "group-hover:opacity-100"
+                            } group-hover:translate-x-0`}
                           >
-                            {copiedAddress === contractAddress ? (
-                              <svg
-                                className="w-3 h-3 text-green-600 dark:text-green-400"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                aria-label="Copied"
-                              >
-                                <title>Copied</title>
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M5 13l4 4L19 7"
-                                />
-                              </svg>
-                            ) : (
-                              <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
-                            )}
-                          </button>
-                        </div>
-                      )}
+                            <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                              {truncateAddress(contractAddress)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={(e) =>
+                                handleCopyAddress(contractAddress, e)
+                              }
+                              className={`ml-1 p-0.5 rounded transition-all duration-200 cursor-pointer ${
+                                copiedAddress === contractAddress
+                                  ? "bg-green-100 dark:bg-green-900/30"
+                                  : "hover:bg-gray-200 dark:hover:bg-gray-600"
+                              }`}
+                              title={
+                                copiedAddress === contractAddress
+                                  ? "Copied!"
+                                  : "Copy full address"
+                              }
+                            >
+                              {copiedAddress === contractAddress ? (
+                                <svg
+                                  className="w-3 h-3 text-green-600 dark:text-green-400"
+                                  fill="none"
+                                  viewBox="0 0 24 24"
+                                  stroke="currentColor"
+                                  aria-label="Copied"
+                                >
+                                  <title>Copied</title>
+                                  <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 13l4 4L19 7"
+                                  />
+                                </svg>
+                              ) : (
+                                <Copy className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
+                              )}
+                            </button>
+                          </div>
+                        )}
                     </div>
                   </div>
 

package/src/widget/components/TokenSelectorButton.tsx

@@ -1,8 +1,11 @@
 import { ChevronRight } from "lucide-react"
 import type React from "react"
 import { useMemo } from "react"
+import { useConnections } from "wagmi"
 import { TokenImage } from "./TokenImage.js"
 import { getChainInfo } from "../../chains.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 
 interface TokenSelectorButtonProps {
   token?: {
@@ -21,47 +24,67 @@ export const TokenSelectorButton: React.FC<TokenSelectorButtonProps> = ({
   token,
   chainId,
   onSelect,
-  className = "flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors",
+  className = "flex items-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200",
   unselectable = false,
 }) => {
+  const connections = useConnections()
+  const { setCurrentScreen } = useCurrentScreen()
+  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 handleClick = () => {
+    if (unselectable) return
+
+    // If no wallet connected and fund method is "wallet", redirect to connect screen
+    if (!isConnected && selectedFundMethod === "wallet") {
+      setCurrentScreen("connect")
+      return
+    }
+
+    onSelect()
+  }
+
   return (
     <button
       type="button"
-      onClick={unselectable ? undefined : onSelect}
+      onClick={handleClick}
       disabled={unselectable}
-      className={`${className} ${
+      className={`${className} ${token ? "max-w-[120px]" : ""} ${
         token
-          ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
+          ? "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"
           : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
       } ${unselectable ? "cursor-default" : "cursor-pointer"}`}
     >
       {token ? (
         <>
-          <TokenImage
-            symbol={token.symbol}
-            imageUrl={token.imageUrl}
-            chainId={displayChainId}
-            contractAddress={token.contractAddress}
-            size={28}
-          />
-          <div className="flex flex-col items-start">
-            <span className="font-bold trails-text-primary text-sm">
+          <div className="flex items-center flex-shrink-0">
+            <TokenImage
+              symbol={token.symbol}
+              imageUrl={token.imageUrl}
+              chainId={displayChainId}
+              contractAddress={token.contractAddress}
+              size={28}
+            />
+          </div>
+          <div className="flex flex-col items-start min-w-0 overflow-hidden">
+            <span className="font-bold trails-text-primary text-sm leading-tight truncate max-w-full text-left">
               {token.symbol}
             </span>
             {chainInfo && (
-              <span className="text-xs trails-text-muted">
+              <span className="text-xs trails-text-muted leading-tight truncate max-w-full text-left">
                 {chainInfo.name}
               </span>
             )}
           </div>
           {!unselectable && (
-            <ChevronRight className="w-3.5 h-3.5 trails-text-muted" />
+            <ChevronRight className="w-3.5 h-3.5 trails-text-muted flex-shrink-0" />
           )}
         </>
       ) : (

package/src/widget/components/Tooltip.tsx

@@ -0,0 +1,51 @@
+import type React from "react"
+import { TooltipPrimitive } from "@0xsequence/design-system"
+import { useTheme } from "./ThemeProvider.js"
+
+interface TooltipProps {
+  message: string
+  children: React.ReactNode
+  className?: string
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  message,
+  children,
+  className = "",
+}) => {
+  const { isDark } = useTheme()
+
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={0}>
+        <TooltipPrimitive.Trigger asChild>
+          <div className={className}>{children}</div>
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className="trails-border-radius-container px-3 py-2 text-xs font-medium shadow-lg z-50 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="top"
+            align="center"
+            sideOffset={4}
+            alignOffset={0}
+          >
+            {message}
+            <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/TransferPendingVertical.tsx

@@ -477,15 +477,19 @@ export const TransferPending: React.FC<TransferPendingProps> = ({
       )}
 
       {/* Details Section */}
-      <div
-        className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
-          showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
-        }`}
-      >
-        <div className="mt-4">
-          <QuoteDetails quote={quote} showContent={true} />
+      {quote && (
+        <div
+          className={`w-full max-w-sm transition-all duration-500 ease-out delay-200 ${
+            showContent
+              ? "opacity-100 translate-y-0"
+              : "opacity-0 translate-y-4"
+          }`}
+        >
+          <div className="mt-4">
+            <QuoteDetails quote={quote} showContent={true} compact={true} />
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Timeout Warning */}
       {showTimeoutWarning && !showContinueButton && (