0xtrails 0.2.2 → 0.2.5

package/src/widget/hooks/useInitialRedirect.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react"
+import { useCurrentScreen, type Screen } from "./useCurrentScreen.js"
+import { useBack } from "./useBack.js"
+import { logger } from "../../logger.js"
+import type { Mode } from "../../mode.js"
+
+export function useInitialRedirect(
+  isConnected: boolean,
+  currentMode: Mode,
+  getInitialScreenForMode: (mode: Mode) => Screen,
+) {
+  const { setCurrentScreen } = useCurrentScreen()
+  const { getBreadcrumbHistory } = useBack()
+  const [hasConnectedBefore, setHasConnectedBefore] = useState(false)
+  const [isInitialScreenSet, setIsInitialScreenSet] = useState(false)
+
+  useEffect(() => {
+    if (!isConnected || isInitialScreenSet) {
+      return
+    }
+
+    // Check if this is the first time connecting (no previous wallet connected)
+    const isFirstTimeConnection = !hasConnectedBefore
+
+    if (isFirstTimeConnection) {
+      // First time connecting - go to appropriate mode screen
+      const initialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        "[trails-sdk] First time connection, redirecting to:",
+        initialScreen,
+      )
+      setCurrentScreen(initialScreen)
+      setHasConnectedBefore(true)
+    } else {
+      // Subsequent connections - check if user came from account-settings
+      const breadcrumbHistory = getBreadcrumbHistory()
+      const lastBreadcrumbScreen =
+        breadcrumbHistory.length > 0
+          ? breadcrumbHistory[breadcrumbHistory.length - 1]
+          : null
+
+      if (lastBreadcrumbScreen === "account-settings") {
+        // User came from account-settings, return there
+        logger.console.log(
+          "[trails-sdk] Returning to account-settings after wallet connection",
+        )
+        setCurrentScreen("account-settings")
+      } else {
+        // User came from elsewhere, go to appropriate mode screen
+        const initialScreen = getInitialScreenForMode(currentMode)
+        logger.console.log(
+          "[trails-sdk] Subsequent connection, redirecting to:",
+          initialScreen,
+        )
+        setCurrentScreen(initialScreen)
+      }
+      setIsInitialScreenSet(true)
+    }
+  }, [
+    isConnected,
+    currentMode,
+    hasConnectedBefore,
+    getInitialScreenForMode,
+    setCurrentScreen,
+    getBreadcrumbHistory,
+    isInitialScreenSet,
+  ])
+
+  return { hasConnectedBefore, isInitialScreenSet }
+}

package/src/widget/hooks/usePayMessage.tsx

@@ -8,6 +8,7 @@ import { truncateAddress } from "../../utils.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import ChainImage from "../components/ChainImage.js"
 import TokenImage from "../components/TokenImage.js"
+import { Identicon } from "../components/Identicon.js"
 import { logger } from "../../logger.js"
 
 export interface PayMessagePart {
@@ -85,25 +86,23 @@ export function usePayMessage(): UsePayMessageReturn {
   })
 
   const parsed = useMemo(() => {
-    // Default message if no payMessage provided
-    const defaultMessage = appName
-      ? `Pay {APP_IMAGE} {APP_NAME} {TO_AMOUNT_USD}`
-      : `Pay {TO_AMOUNT_USD}`
-
-    const template = payMessage || defaultMessage
+    // If no payMessage provided, return empty parts (default layout handled separately)
+    if (!payMessage) {
+      return []
+    }
 
     // Parse the template into parts
     const parts: PayMessagePart[] = []
     const regex = /\{([^}]+)\}/g
     let lastIndex = 0
-    let match: RegExpExecArray | null = regex.exec(template)
+    let match: RegExpExecArray | null = regex.exec(payMessage)
 
     while (match !== null) {
       // Add text before the placeholder
       if (match.index > lastIndex) {
         parts.push({
           type: "text",
-          value: template.substring(lastIndex, match.index),
+          value: payMessage.substring(lastIndex, match.index),
         })
       }
 
@@ -176,14 +175,14 @@ export function usePayMessage(): UsePayMessageReturn {
       }
 
       lastIndex = regex.lastIndex
-      match = regex.exec(template)
+      match = regex.exec(payMessage)
     }
 
     // Add remaining text
-    if (lastIndex < template.length) {
+    if (lastIndex < payMessage.length) {
       parts.push({
         type: "text",
-        value: template.substring(lastIndex),
+        value: payMessage.substring(lastIndex),
       })
     }
 
@@ -206,6 +205,78 @@ export function usePayMessage(): UsePayMessageReturn {
 
   // Render the message
   const message = useMemo(() => {
+    // If no payMessage provided, render default layout
+    if (!payMessage) {
+      return (
+        <div className="flex flex-col items-center justify-center px-8 py-4 space-y-4 min-w-full">
+          {/* App image above the amount if it exists */}
+          {appImageUrl && (
+            <img
+              src={appImageUrl}
+              alt={appName || "App"}
+              className="w-12 h-12 rounded-lg"
+              onError={(e) => {
+                logger.console.error(
+                  `Error loading app image: ${e}, appImageUrl: ${appImageUrl}`,
+                )
+                // Hide image on error
+                e.currentTarget.style.display = "none"
+              }}
+            />
+          )}
+
+          {/* Large amount in center */}
+          <div className="font-bold text-center">
+            {(() => {
+              const amountToShow = targetAmountUsdFormatted || toAmount || "0"
+              const tokenSymbol = tokenInfo?.symbol || ""
+              const displayText = targetAmountUsdFormatted
+                ? amountToShow
+                : `${amountToShow} ${tokenSymbol}`.trim()
+
+              // Dynamic font size based on text length
+              const textLength = displayText.length
+              let fontSize = "text-6xl" // Default large size
+
+              if (textLength > 12) {
+                fontSize = "text-2xl"
+              } else if (textLength > 10) {
+                fontSize = "text-3xl"
+              } else if (textLength > 8) {
+                fontSize = "text-4xl"
+              } else if (textLength > 6) {
+                fontSize = "text-5xl"
+              }
+
+              return <div className={fontSize}>{displayText}</div>
+            })()}
+          </div>
+
+          {/* Recipient info below */}
+          {toAddress && (
+            <div className="flex items-center space-x-2 text-center">
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                to
+              </span>
+              <Identicon value={toAddress} size={20} />
+              <a
+                href={getExplorerUrlForAddress({
+                  address: toAddress,
+                  chainId: toChainId ? Number(toChainId) : 1,
+                })}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm hover:underline cursor-pointer text-blue-600 dark:text-blue-400"
+              >
+                {truncateAddress(toAddress)}
+              </a>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    // Render user-provided message with handlebar interpolation
     return (
       <>
         {parsed.map((part) => {
@@ -354,6 +425,7 @@ export function usePayMessage(): UsePayMessageReturn {
       </>
     )
   }, [
+    payMessage,
     parsed,
     appName,
     appUrl,
@@ -361,6 +433,9 @@ export function usePayMessage(): UsePayMessageReturn {
     appDescription,
     tokenInfo,
     toChainId,
+    toAddress,
+    targetAmountUsdFormatted,
+    toAmount,
   ])
 
   return {

package/src/widget/hooks/useSelectedFeeToken.tsx

@@ -65,22 +65,16 @@ export const SelectedFeeTokenProvider: React.FC<
   const [availableTokens, setAvailableTokens] = useState<TokenWithBalance[]>([])
 
   // Wrapper to log all state changes to selectedFeeToken
-  const setSelectedFeeTokenInternal = useCallback(
-    (token: FeeOption | null) => {
-      logger.console.log(
-        "[trails-sdk] [FEE-SELECT] selectedFeeToken state changing:",
-        {
-          from: selectedFeeToken,
-          to: token,
-          fromNull: selectedFeeToken === null,
-          toNull: token === null,
-          stackTrace: new Error().stack?.split("\n").slice(2, 5).join("\n"), // Get call stack
-        },
-      )
-      setSelectedFeeTokenInternalRaw(token)
-    },
-    [selectedFeeToken],
-  )
+  const setSelectedFeeTokenInternal = useCallback((token: FeeOption | null) => {
+    logger.console.log(
+      "[trails-sdk] [FEE-SELECT] selectedFeeToken state changing:",
+      {
+        to: token,
+        toNull: token === null,
+      },
+    )
+    setSelectedFeeTokenInternalRaw(token)
+  }, [])
 
   // Wrapper to track when user makes an explicit selection
   const setSelectedFeeToken = useCallback(

package/src/widget/hooks/useSelectedFundMethod.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, type ReactNode } from "react"
+
+interface SelectedFundMethodContextType {
+  selectedFundMethod: string
+  setSelectedFundMethod: (method: string) => void
+}
+
+const SelectedFundMethodContext = createContext<
+  SelectedFundMethodContextType | undefined
+>(undefined)
+
+interface SelectedFundMethodProviderProps {
+  children: ReactNode
+}
+
+export const SelectedFundMethodProvider = ({
+  children,
+}: SelectedFundMethodProviderProps) => {
+  const [selectedFundMethod, setSelectedFundMethod] = useState<string>("wallet")
+
+  const value: SelectedFundMethodContextType = {
+    selectedFundMethod,
+    setSelectedFundMethod,
+  }
+
+  return (
+    <SelectedFundMethodContext.Provider value={value}>
+      {children}
+    </SelectedFundMethodContext.Provider>
+  )
+}
+
+export const useSelectedFundMethod = (): SelectedFundMethodContextType => {
+  const context = useContext(SelectedFundMethodContext)
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedFundMethod must be used within a SelectedFundMethodProvider",
+    )
+  }
+  return context
+}

package/src/widget/hooks/useSelectedRecipient.tsx

@@ -2,8 +2,10 @@ import React, {
   createContext,
   useContext,
   useState,
+  useEffect,
   type ReactNode,
 } from "react"
+import { useAccount } from "wagmi"
 
 interface SelectedRecipientContextType {
   selectedRecipient: string | null
@@ -21,10 +23,18 @@ interface SelectedRecipientProviderProps {
 export const SelectedRecipientProvider: React.FC<
   SelectedRecipientProviderProps
 > = ({ children }) => {
+  const { address } = useAccount()
   const [selectedRecipient, setSelectedRecipient] = useState<string | null>(
     null,
   )
 
+  // Set recipient to address only if address exists and no recipient is selected
+  useEffect(() => {
+    if (address && !selectedRecipient) {
+      setSelectedRecipient(address)
+    }
+  }, [address, selectedRecipient])
+
   return (
     <SelectedRecipientContext.Provider
       value={{

package/src/widget/hooks/useSendForm.ts

@@ -1,6 +1,6 @@
 import type { TokenPrice } from "@0xsequence/trails-api"
 import type React from "react"
-import { useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState, useRef } from "react"
 import {
   type Account,
   getAddress,
@@ -9,6 +9,7 @@ import {
   type WalletClient,
   zeroAddress,
 } from "viem"
+import { useAccount } from "wagmi"
 import { useAPIClient } from "../../apiClient.js"
 import { getChainInfo, useSupportedChains } from "../../chains.js"
 import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
@@ -207,6 +208,10 @@ export function useSendForm({
   checkoutOnHandlers,
   refetchTrigger = 0,
 }: UseSendProps): UseSendReturn {
+  // Get the active wallet ID from wagmi
+  const { connector } = useAccount()
+  const walletId = connector?.id
+
   // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
   const effectiveQuoteProvider = useMemo(() => {
     if (!quoteProvider || quoteProvider === "auto") {
@@ -441,6 +446,12 @@ export function useSendForm({
     allSupportedTokens: true, // Get all tokens for balance checking
   })
 
+  // Use ref to store latest filteredTokensFormatted without triggering re-renders
+  const filteredTokensFormattedRef = useRef(filteredTokensFormatted)
+  useEffect(() => {
+    filteredTokensFormattedRef.current = filteredTokensFormatted
+  }, [filteredTokensFormatted])
+
   const destTokenAddress = useTokenAddress({
     chainId: selectedDestinationChain?.id,
     tokenSymbol: selectedDestToken?.symbol,
@@ -798,6 +809,9 @@ export function useSendForm({
         nativeTokenPriceUsd = nativePrice?.price?.value ?? 0
       }
 
+      // Disable gasless for sequence-waas wallet
+      const effectiveGasless = walletId === "sequence-waas" ? false : gasless
+
       const options = {
         account,
         originTokenAddress: selectedToken.contractAddress,
@@ -834,13 +848,14 @@ export function useSendForm({
           paymasterUrls?.find(
             (p) => p.chainId.toString() === selectedToken.chainId.toString(),
           )?.url ?? undefined,
-        gasless,
+        gasless: effectiveGasless,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
         quoteProvider: effectiveQuoteProvider,
         mode,
         fundMethod,
         checkoutOnHandlers,
         selectedFeeToken,
+        walletId,
       }
 
       logger.console.log(
@@ -895,6 +910,7 @@ export function useSendForm({
     checkoutOnHandlers,
     mode,
     selectedFeeToken,
+    walletId,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -945,7 +961,7 @@ export function useSendForm({
     return formatAmountDisplay(quotedDestinationAmount || "0")
   }, [quotedDestinationAmount])
 
-  // Set raw fee options in the hook whenever prepareSendResult or tokens change
+  // Set raw fee options in the hook whenever prepareSendResult changes
   useEffect(() => {
     const apiFeeOptions = prepareSendResult?.feeOptions?.feeOptions ?? []
     logger.console.log(
@@ -961,15 +977,9 @@ export function useSendForm({
     setRawFeeOptions(
       apiFeeOptions,
       selectedToken?.chainId,
-      filteredTokensFormatted,
+      filteredTokensFormattedRef.current,
     )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    prepareSendResult,
-    selectedToken?.chainId,
-    filteredTokensFormatted,
-    setRawFeeOptions,
-  ])
+  }, [prepareSendResult, selectedToken?.chainId, setRawFeeOptions])
 
   const processSend = useCallback(async () => {
     try {
@@ -1194,7 +1204,19 @@ export function useSendForm({
       }
 
       if (!fundMethod || fundMethod === "wallet") {
-        return `Continue on wallet`
+        if (mode === "pay") {
+          return `Pay`
+        } else if (mode === "fund") {
+          return `Fund`
+        } else if (mode === "swap") {
+          return `Swap`
+        } else if (mode === "earn") {
+          return `Deposit`
+        } else if (mode === "receive") {
+          return `Pay`
+        } else {
+          return `Continue on wallet`
+        }
       }
 
       if (mode === "swap") {

package/src/widget/hooks/useTokenList.ts

@@ -405,7 +405,7 @@ export function useTokenList({
       return sortedTokens
     }
 
-    const query = searchQuery.toLowerCase().trim()
+    const query = searchQuery.trim().toLowerCase()
     const queryParts = query.split(/\s+/).filter((part) => part.length > 0)
 
     const matchingTokens = sortedTokens.filter(

package/src/widget/index.css

@@ -39,6 +39,11 @@
   --trails-modal-button-hover-bg: var(--trails-primary-hover, rgb(17 75 202)); /* Defaults to primary hover */
   --trails-modal-button-text: rgb(255 255 255); /* white text */
   --trails-modal-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtle shadow */
+
+  /* Percentage Button Colors - Customizable percentage buttons */
+  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Utility Classes that use CSS Variables */
@@ -110,6 +115,18 @@
   color: var(--trails-hover-text);
 }
 
+.trails-bg-percentage-button {
+  background-color: var(--trails-percentage-button-bg);
+}
+
+.trails-text-percentage-button {
+  color: var(--trails-percentage-button-text);
+}
+
+.trails-hover-percentage-button:hover {
+  background-color: var(--trails-percentage-button-hover-bg);
+}
+
 
 
 /* Font Family Utility Class */
@@ -304,6 +321,11 @@
   /* Shadow */
   --trails-shadow:
     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+
+  /* Percentage Button Colors - Light Mode */
+  --trails-percentage-button-bg: rgb(228 228 231); /* #E4E4E7 - Light gray background */
+  --trails-percentage-button-text: rgb(113 113 123); /* #71717B - Dark gray text */
+  --trails-percentage-button-hover-bg: rgb(212 212 216); /* #D4D4D8 - Slightly darker on hover */
 }
 
 /* Dark Mode Theme Variables */
@@ -391,6 +413,11 @@
   /* Shadow */
   --trails-shadow:
     0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+
+  /* Percentage Button Colors - Dark Mode */
+  --trails-percentage-button-bg: rgb(55 65 81); /* gray-700 - Dark gray background */
+  --trails-percentage-button-text: rgb(209 213 219); /* gray-300 - Light gray text */
+  --trails-percentage-button-hover-bg: rgb(75 85 99); /* gray-600 - Slightly lighter on hover */
 }
 
 /* Custom Scrollbar Styles */