0xtrails 0.6.6 → 0.7.0

package/src/widget/components/Receipt.tsx

@@ -16,15 +16,17 @@ import { getChainInfo } from "../../chains.js"
 import { useMode } from "../hooks/useMode.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { getExplorerUrl } from "../../explorer.js"
+import { logger } from "../../logger.js"
 
 interface ReceiptProps {
-  onSendAnother: () => void
+  onSendAnother?: () => void
   onClose: () => void
   renderInline?: boolean
   transactionStates?: TransactionState[]
   totalCompletionSeconds?: number
   quote?: PrepareSendQuote | null
   showCloseButton?: boolean
+  actionButtonText?: string
 }
 
 // Hook to fetch the time difference in seconds between two transactions on possibly different chains
@@ -103,6 +105,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
   totalCompletionSeconds,
   quote,
   showCloseButton,
+  actionButtonText,
 }) => {
   const { mode } = useMode()
   const [showContent, setShowContent] = useState(false)
@@ -130,7 +133,16 @@ export const Receipt: React.FC<ReceiptProps> = ({
     return transactionStates.some((tx) => hasMetaTxError(tx))
   }, [transactionStates, hasMetaTxError])
 
+  // Check if any transaction is aborted
+  const hasAborted = useMemo(() => {
+    return transactionStates.some((tx) => tx.state === "aborted")
+  }, [transactionStates])
+
   const buttonText = useMemo(() => {
+    // Use custom actionButtonText if provided, otherwise use mode-based text
+    if (actionButtonText) {
+      return actionButtonText
+    }
     if (mode === "pay") {
       return "Pay Again"
     } else if (mode === "fund") {
@@ -140,7 +152,7 @@ export const Receipt: React.FC<ReceiptProps> = ({
     } else {
       return "Send Again"
     }
-  }, [mode])
+  }, [mode, actionButtonText])
 
   const {
     finalExplorerUrl,
@@ -208,7 +220,9 @@ export const Receipt: React.FC<ReceiptProps> = ({
                       className={`px-2 py-0.5 rounded-full text-xs ${
                         state.state === "confirmed"
                           ? "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400"
-                          : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
+                          : state.state === "aborted"
+                            ? "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400"
+                            : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400"
                       }`}
                     >
                       {state.state.charAt(0).toUpperCase() +
@@ -270,12 +284,25 @@ export const Receipt: React.FC<ReceiptProps> = ({
     </div>
   )
 
-  // Only show error state if we truly have no transaction hash at all
+  // Only show error state if we truly have no transaction hash at all OR if any transaction is aborted
   const hasAnyTransactionHash = transactionStates.some(
     (tx) => tx.transactionHash,
   )
 
-  if (!finalExplorerUrl && !showRefundInfo && !hasAnyTransactionHash) {
+  // Log intent ID if available when aborted (for debugging)
+  useEffect(() => {
+    if (hasAborted && quote?.intentId) {
+      logger.console.error(
+        "[trails-sdk] Transaction aborted with intent ID:",
+        quote.intentId,
+      )
+    }
+  }, [hasAborted, quote?.intentId])
+
+  if (
+    (!finalExplorerUrl && !showRefundInfo && !hasAnyTransactionHash) ||
+    hasAborted
+  ) {
     return (
       <div className="flex flex-col justify-center min-h-full space-y-6">
         <ScreenHeader />
@@ -303,11 +330,51 @@ export const Receipt: React.FC<ReceiptProps> = ({
             Transaction Failed
           </h2>
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            No final transaction hash found. This is likely due to a failed
-            transaction or failed relay. Please reach out to support.
+            {hasAborted ? (
+              <>
+                The transaction likely timed out and was aborted. Please{" "}
+                <a
+                  href="https://support.trails.build/en/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
+                >
+                  contact support
+                </a>{" "}
+                with the intent ID below to request a refund.
+              </>
+            ) : (
+              <>
+                No final transaction hash found. This is likely due to a failed
+                transaction or failed relay. Please{" "}
+                <a
+                  href="https://support.trails.build/en/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
+                >
+                  reach out to support
+                </a>
+                .
+              </>
+            )}
           </p>
         </div>
 
+        {/* Show Intent ID if available */}
+        {quote?.intentId && (
+          <div className="text-center">
+            <div className="inline-flex flex-col items-center gap-2 p-3 rounded-lg bg-gray-100 dark:bg-gray-800">
+              <span className="text-xs text-gray-600 dark:text-gray-400">
+                Intent ID
+              </span>
+              <code className="text-sm font-mono text-gray-900 dark:text-white break-all">
+                {quote.intentId}
+              </code>
+            </div>
+          </div>
+        )}
+
         {onSendAnother && (
           <div className="flex justify-center">
             <button

package/src/widget/components/RecentTokens.tsx

@@ -1,11 +1,11 @@
 import type React from "react"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { TokenImage } from "./TokenImage.js"
 
 interface RecentTokensProps {
-  recentTokens: SupportedToken[]
-  onTokenSelect: (token: SupportedToken) => void
-  selectedToken?: SupportedToken | null
+  recentTokens: Token[]
+  onTokenSelect: (token: Token) => void
+  selectedToken?: Token | null
 }
 
 export const RecentTokens: React.FC<RecentTokensProps> = ({
@@ -17,12 +17,12 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
     return null
   }
 
-  const isTokenSelected = (token: SupportedToken) => {
+  const isTokenSelected = (token: Token) => {
     if (!selectedToken) return false
     return (
       token.contractAddress.toLowerCase() ===
         selectedToken.contractAddress.toLowerCase() &&
-      token.chainId === selectedToken.chainId
+      (token.chainId || 0) === (selectedToken.chainId || 0)
     )
   }
 
@@ -37,7 +37,7 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
 
           return (
             <button
-              key={`${token.chainId}-${token.contractAddress}`}
+              key={`${token.chainId || 0}-${token.contractAddress}`}
               type="button"
               onClick={() => onTokenSelect(token)}
               title={`${token.symbol} - ${token.name}`}
@@ -51,7 +51,7 @@ export const RecentTokens: React.FC<RecentTokensProps> = ({
                 <TokenImage
                   symbol={token.symbol}
                   imageUrl={token.imageUrl}
-                  chainId={token.chainId}
+                  chainId={token.chainId || 0}
                   size={28}
                 />
               </div>

package/src/widget/components/RecipientSelectorButton.tsx

@@ -1,9 +1,9 @@
 import { ChevronRight } from "lucide-react"
 import type React from "react"
 import { truncateAddress } from "../../utils.js"
-import { Identicon } from "./Identicon.js"
 import { useBack } from "../hooks/useBack.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+import { AddressWalletIcon } from "./AddressWalletIcon.js"
 
 export const RecipientSelectorButton: React.FC = () => {
   const { setCurrentScreenWithBack } = useBack()
@@ -27,7 +27,9 @@ export const RecipientSelectorButton: React.FC = () => {
       {selectedRecipient ? (
         <>
           <div className="flex items-center mr-1">
-            <Identicon value={selectedRecipient} size={16} />
+            <AddressWalletIcon
+              walletAddress={selectedRecipient as `0x${string}`}
+            />
           </div>
           <span className="text-sm font-medium m-0">
             {truncateAddress(selectedRecipient, 4, 4)}

package/src/widget/components/ScreenHeader.tsx

@@ -4,7 +4,7 @@ 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"
+import { useTrailsModal } from "../providers/TrailsModalProvider.js"
 
 interface ScreenHeaderProps {
   onBack?: () => void
@@ -24,7 +24,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
 }) => {
   const connections = useConnections()
   const { renderInline } = useWidgetProps()
-  const { closeModal, isModalOpen } = useModal()
+  const { closeModal, isModalOpen } = useTrailsModal()
 
   // Check if there are any connected accounts across all connectors
   const isConnected = connections.length > 0

package/src/widget/components/SearchInputField.tsx

@@ -38,7 +38,7 @@ export const SearchInputField: React.FC<SearchInputFieldProps> = ({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className={`block w-full pl-10 ${rightAlignedComponent ? "pr-12" : "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`}
+        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 && (

package/src/widget/components/ShadowPortal.tsx

@@ -0,0 +1,58 @@
+import { useRef, useState, useEffect } from "react"
+import { createPortal } from "react-dom"
+import css from "../compiled.css?inline"
+
+export interface ShadowPortalProps {
+  children: React.ReactNode
+  customCss?: string
+}
+
+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) {
+      let shadow = hostRef.current.shadowRoot
+      if (!shadow) {
+        shadow = hostRef.current.attachShadow({ mode: "open" })
+
+        // Inject <style> tag with your widget's CSS
+        const styleTag = document.createElement("style")
+        styleTag.textContent = css
+        shadow.appendChild(styleTag)
+      }
+      setShadowRoot(shadow)
+    }
+  }, [])
+
+  // Update custom CSS when it changes
+  useEffect(() => {
+    if (shadowRoot) {
+      // Remove any existing custom CSS
+      const existingCustomStyles = shadowRoot.querySelectorAll(
+        'style[id="custom-css"]',
+      )
+      existingCustomStyles.forEach((style) => {
+        style.remove()
+      })
+
+      // Inject new custom CSS if provided
+      if (customCss) {
+        const customStyleTag = document.createElement("style")
+        customStyleTag.id = "custom-css"
+        customStyleTag.textContent = `:root, [data-theme="light"], [data-theme="dark"] { ${customCss} }`
+        shadowRoot.appendChild(customStyleTag)
+      }
+    }
+  }, [customCss, shadowRoot])
+
+  return (
+    <div ref={hostRef} className="w-full">
+      {shadowRoot ? createPortal(children, shadowRoot) : null}
+    </div>
+  )
+}

package/src/widget/components/Swap.tsx

@@ -1,8 +1,8 @@
 import type React from "react"
 import type { Account, WalletClient } from "viem"
 import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import type { Token } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { ClassicSwap } from "./ClassicSwap.js"
@@ -27,7 +27,7 @@ interface SwapProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  onNavigateToMeshConnect?: (
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -35,11 +35,12 @@ interface SwapProps {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   onAmountUpdate?: (amount: string) => void
   checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   onTrackToken?: (token: any) => void
   isSequenceWallet?: boolean
 }

package/src/widget/components/ThemeProvider.tsx

@@ -108,7 +108,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   )
 }
 
-export const useTheme = (): ThemeContextType => {
+export function useTheme(): ThemeContextType {
   const context = useContext(ThemeContext)
   if (context === undefined) {
     throw new Error("useTheme must be used within a ThemeProvider")

package/src/widget/components/TokenList.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react"
 import type React from "react"
-import type { Token } from "../hooks/useTokenList.js"
-import type { SupportedToken } from "../../tokens.js"
+import type { Token } from "../../tokens.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenSelector } from "./TokenSelector.js"
 import { ChainList } from "./ChainList.js"
@@ -15,8 +14,8 @@ interface TokenListProps {
   targetAmountUsd?: number | null
   targetAmountUsdFormatted?: string | null
   onError: (error: Error | string | null) => void
-  recentTokens?: SupportedToken[]
-  onRecentTokenSelect?: (token: SupportedToken) => void
+  recentTokens?: Token[]
+  onRecentTokenSelect?: (token: Token) => void
   fundMethod?: string | null
   renderInline?: boolean
   onNavigateToFundMethods?: () => void