0xtrails 0.1.13 → 0.2.0

package/src/widget/hooks/useSendForm.ts

@@ -39,6 +39,7 @@ import { useResolveEnsAddress } from "../../ens.js"
 import { etherlink } from "viem/chains"
 import { logger } from "../../logger.js"
 import { getIsContract } from "../../contractUtils.js"
+import { useTrailsClient } from "../../trailsClient.js"
 
 export interface Token {
   id: number
@@ -178,6 +179,8 @@ export type UseSendReturn = {
   quoteErrorPrettified: string | null
   isSameTokenWithoutCustomCalldata: boolean
   isRecipientContract: boolean
+  isSenderContractOnOrigin: boolean
+  isSenderContractOnDestination: boolean
 }
 
 export function useSendForm({
@@ -277,6 +280,7 @@ export function useSendForm({
             recipient as `0x${string}`,
             selectedDestinationChain.id,
           )
+          logger.console.log("[trails-sdk] isRecipientContract:", isContract)
           setIsRecipientContract(isContract)
         } catch (error) {
           logger.console.error(
@@ -293,6 +297,64 @@ export function useSendForm({
     checkRecipientContract()
   }, [recipient, selectedDestinationChain?.id])
 
+  // Check if sender is a contract address on origin chain
+  useEffect(() => {
+    const checkSenderContractOnOrigin = async () => {
+      if (account?.address && selectedToken?.chainId) {
+        try {
+          const isContract = await getIsContract(
+            account.address as `0x${string}`,
+            selectedToken.chainId,
+          )
+          logger.console.log(
+            "[trails-sdk] isSenderContractOnOrigin:",
+            isContract,
+          )
+          setIsSenderContractOnOrigin(isContract)
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error checking if sender is contract on origin:",
+            error,
+          )
+          setIsSenderContractOnOrigin(false)
+        }
+      } else {
+        setIsSenderContractOnOrigin(false)
+      }
+    }
+
+    checkSenderContractOnOrigin()
+  }, [account?.address, selectedToken?.chainId])
+
+  // Check if sender is a contract address on destination chain
+  useEffect(() => {
+    const checkSenderContractOnDestination = async () => {
+      if (account?.address && selectedDestinationChain?.id) {
+        try {
+          const isContract = await getIsContract(
+            account.address as `0x${string}`,
+            selectedDestinationChain.id,
+          )
+          logger.console.log(
+            "[trails-sdk] isSenderContractOnDestination:",
+            isContract,
+          )
+          setIsSenderContractOnDestination(isContract)
+        } catch (error) {
+          logger.console.error(
+            "[trails-sdk] Error checking if sender is contract on destination:",
+            error,
+          )
+          setIsSenderContractOnDestination(false)
+        }
+      } else {
+        setIsSenderContractOnDestination(false)
+      }
+    }
+
+    checkSenderContractOnDestination()
+  }, [account?.address, selectedDestinationChain?.id])
+
   const isCustomToken = useMemo(() => toToken?.startsWith("0x"), [toToken])
 
   const {
@@ -354,7 +416,7 @@ export function useSendForm({
       token = supportedTokens.find(
         (token) =>
           (isToTokenAddress // Match by specified destination token address or symbol
-            ? token.contractAddress === toToken
+            ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
             : token.symbol === toToken) &&
           (toChainId // Match by specified destination chain id
             ? token.chainId === toChainId
@@ -372,22 +434,30 @@ export function useSendForm({
   }, [selectedDestToken, defaultDestToken])
 
   const apiClient = useAPIClient()
+  const trailsClient = useTrailsClient()
 
   const destTokenAddress = useTokenAddress({
     chainId: selectedDestinationChain?.id,
     tokenSymbol: selectedDestToken?.symbol,
   })
 
+  const destTokenPricesInput = useMemo(() => {
+    const input =
+      selectedDestToken && destTokenAddress && selectedDestinationChain?.id
+        ? [
+            {
+              tokenId: selectedDestToken.symbol,
+              contractAddress: destTokenAddress,
+              chainId: selectedDestinationChain.id,
+            },
+          ]
+        : []
+
+    return input
+  }, [selectedDestToken, destTokenAddress, selectedDestinationChain?.id])
+
   const { tokenPrices: destTokenPrices } = useTokenPrices(
-    selectedDestToken && destTokenAddress
-      ? [
-          {
-            tokenId: selectedDestToken.symbol,
-            contractAddress: destTokenAddress,
-            chainId: selectedDestinationChain.id,
-          },
-        ]
-      : [],
+    destTokenPricesInput,
     apiClient,
   )
 
@@ -421,7 +491,7 @@ export function useSendForm({
       const newToken = supportedTokens.find(
         (token) =>
           (isToTokenAddress // Match by specified destination token address or symbol
-            ? token.contractAddress === toToken
+            ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
             : token.symbol === toToken) &&
           (toChainId // Match by specified destination chain id
             ? token.chainId === toChainId
@@ -479,12 +549,13 @@ export function useSendForm({
     [onTransactionStateChange],
   )
 
-  const balanceFormatted = selectedToken
-    ? formatRawAmount(
-        selectedToken.balance,
-        selectedToken.contractInfo?.decimals,
-      )
-    : "0"
+  const balanceFormatted =
+    selectedToken?.balance && selectedToken?.contractInfo?.decimals
+      ? formatRawAmount(
+          selectedToken.balance,
+          selectedToken.contractInfo?.decimals!,
+        )
+      : "0"
   const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
   const isValidRecipient = Boolean(recipient && isAddress(recipient))
 
@@ -502,6 +573,10 @@ export function useSendForm({
     null,
   )
   const [isRecipientContract, setIsRecipientContract] = useState(false)
+  const [isSenderContractOnOrigin, setIsSenderContractOnOrigin] =
+    useState(false)
+  const [isSenderContractOnDestination, setIsSenderContractOnDestination] =
+    useState(false)
 
   const { hasParam } = useQueryParams()
   const isDryMode = hasParam("dryMode", "true")
@@ -520,7 +595,39 @@ export function useSendForm({
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
-    if (!amount || !selectedToken?.contractInfo?.decimals) {
+    if (
+      !amount &&
+      !(selectedToken?.contractInfo?.decimals || selectedDestToken?.decimals)
+    ) {
+      logger.console.warn("[trails-sdk] Missing token decimals for quote", {
+        amount,
+        selectedToken,
+        selectedDestToken,
+        tradeType,
+      })
+      return "0"
+    }
+
+    if (
+      tradeType === TradeType.EXACT_INPUT &&
+      !selectedToken?.contractInfo?.decimals
+    ) {
+      logger.console.warn(
+        "[trails-sdk] Missing source token decimals for quote",
+        {
+          selectedToken,
+          tradeType,
+        },
+      )
+      return "0"
+    } else if (!selectedDestToken?.decimals) {
+      logger.console.warn(
+        "[trails-sdk] Missing destination token decimals for quote",
+        {
+          selectedDestToken,
+          tradeType,
+        },
+      )
       return "0"
     }
 
@@ -528,7 +635,7 @@ export function useSendForm({
     // For EXACT_OUTPUT: use destination token decimals (user enters destination amount)
     const decimals =
       tradeType === TradeType.EXACT_INPUT
-        ? selectedToken.contractInfo?.decimals
+        ? selectedToken?.contractInfo?.decimals
         : selectedDestToken?.decimals
 
     if (!decimals) {
@@ -569,6 +676,18 @@ export function useSendForm({
       amountRaw === "0" ||
       !selectedToken
     ) {
+      logger.console.log(
+        "[trails-sdk] Skipping quote because of missing inputs",
+        {
+          amount,
+          destinationTokenAddress,
+          isValidRecipient,
+          selectedDestToken,
+          selectedDestinationChain,
+          amountRaw,
+          selectedToken,
+        },
+      )
       setQuoteError(null)
       setPrepareSendResult(null)
       return
@@ -589,7 +708,13 @@ export function useSendForm({
       const destinationTokenDecimals = selectedDestToken.decimals
 
       if (!sourceTokenDecimals || !destinationTokenDecimals) {
-        logger.console.warn("[trails-sdk] Missing token decimals for quote")
+        logger.console.warn("[trails-sdk] Missing token decimals for quote", {
+          sourceTokenDecimals,
+          destinationTokenDecimals,
+          selectedToken,
+          selectedDestToken,
+          tradeType,
+        })
         setPrepareSendResult(null)
         setIsLoadingQuote(false)
         return
@@ -681,6 +806,7 @@ export function useSendForm({
         fee: "0",
         client: walletClient,
         apiClient,
+        trailsClient,
         originRelayer,
         destinationRelayer,
         destinationCalldata: toCalldata,
@@ -721,6 +847,7 @@ export function useSendForm({
     account,
     walletClient,
     apiClient,
+    trailsClient,
     selectedDestToken?.decimals,
     recipient,
     destinationTokenAddress,
@@ -776,6 +903,10 @@ export function useSendForm({
     selectedDestinationChain?.id,
     toCalldata,
     refetchTrigger,
+    selectedToken?.contractAddress,
+    selectedToken?.chainId,
+    selectedToken?.balance,
+    selectedToken?.tokenPriceUsd,
   ])
 
   // Calculate destination amount from quote if available
@@ -991,9 +1122,13 @@ export function useSendForm({
       const checksummedRecipient = getAddress(recipient)
       const checksummedAccount = getAddress(account.address)
 
-      if (mode === "swap") {
-        return `Swap ${amountDisplay} ${tokenSymbol}`
-      }
+      logger.console.log("[trails-sdk] buttonText:", {
+        mode,
+        fundMethod,
+        isSameChain,
+        isSameToken,
+        checksummedRecipient,
+      })
 
       if (fundMethod === "exchange") {
         return `Continue to Exchange`
@@ -1003,6 +1138,14 @@ export function useSendForm({
         return `Continue to QR Code`
       }
 
+      if (!fundMethod || fundMethod === "wallet") {
+        return `Continue on wallet`
+      }
+
+      if (mode === "swap") {
+        return `Swap ${amountDisplay} ${tokenSymbol}`
+      }
+
       if (mode === "earn") {
         return `Deposit ${destinationAmountDisplay} ${destinationTokenSymbol}`
       }
@@ -1054,7 +1197,7 @@ export function useSendForm({
   }, [quoteError])
 
   // Check if origin and destination tokens are the same (same contract address on same chain)
-  // Only block same-token transactions when there's no custom calldata
+  // Only block same-token transactions when there's no custom calldata AND recipient is the same as sender
   const isSameTokenWithoutCustomCalldata = useMemo(() => {
     if (
       !selectedToken ||
@@ -1069,14 +1212,22 @@ export function useSendForm({
       selectedToken.contractAddress.toLowerCase() ===
         destinationTokenAddress.toLowerCase() &&
       selectedToken.chainId === selectedDestinationChain?.id
-    // Allow same-token transactions if there's custom calldata (e.g., NFT minting)
-    return isSameChainAndToken && !toCalldata
+
+    // Allow same-token transactions if:
+    // 1. There's custom calldata (e.g., NFT minting)
+    // 2. Recipient is different from sender (simple transfer to another address)
+    const recipientIsSameAsSender =
+      recipient?.toLowerCase() === account?.address?.toLowerCase()
+
+    return isSameChainAndToken && !toCalldata && recipientIsSameAsSender
   }, [
     selectedToken,
     destinationTokenAddress,
     selectedDestinationChain,
     toCalldata,
     selectedToken?.chainId,
+    recipient,
+    account?.address,
   ])
 
   return {
@@ -1126,5 +1277,7 @@ export function useSendForm({
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
     isRecipientContract,
+    isSenderContractOnOrigin,
+    isSenderContractOnDestination,
   }
 }

package/src/widget/hooks/useSwapAmount.tsx

@@ -0,0 +1,50 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react"
+
+interface SwapAmountContextType {
+  amount: string
+  setAmount: (amount: string) => void
+  clearAmount: () => void
+}
+
+const SwapAmountContext = createContext<SwapAmountContextType | undefined>(
+  undefined,
+)
+
+interface SwapAmountProviderProps {
+  children: ReactNode
+}
+
+export const SwapAmountProvider: React.FC<SwapAmountProviderProps> = ({
+  children,
+}) => {
+  const [amount, setAmount] = useState<string>("")
+
+  const clearAmount = () => {
+    setAmount("")
+  }
+
+  return (
+    <SwapAmountContext.Provider
+      value={{
+        amount,
+        setAmount,
+        clearAmount,
+      }}
+    >
+      {children}
+    </SwapAmountContext.Provider>
+  )
+}
+
+export const useSwapAmount = () => {
+  const context = useContext(SwapAmountContext)
+  if (context === undefined) {
+    throw new Error("useSwapAmount must be used within a SwapAmountProvider")
+  }
+  return context
+}

package/src/widget/hooks/useSwapSettings.tsx

@@ -0,0 +1,100 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react"
+import { logger } from "../../logger.js"
+
+interface SwapSettingsContextType {
+  isSimpleSwapMode: boolean
+  setIsSimpleSwapMode: (simple: boolean) => void
+  setIsSimpleSwapModeWithStorage: (simple: boolean) => void
+  toggleSimpleSwapMode: () => void
+  resetSwapSettings: () => void
+}
+
+const SwapSettingsContext = createContext<SwapSettingsContextType | undefined>(
+  undefined,
+)
+
+interface SwapSettingsProviderProps {
+  children: ReactNode
+  initialSimpleMode?: boolean
+}
+
+const SIMPLE_SWAP_MODE_KEY = "trails-simple-swap-mode"
+
+export const SwapSettingsProvider: React.FC<SwapSettingsProviderProps> = ({
+  children,
+  initialSimpleMode = false,
+}) => {
+  // Initialize state from localStorage or use initialSimpleMode as fallback
+  const [isSimpleSwapMode, setIsSimpleSwapMode] = useState<boolean>(() => {
+    try {
+      const stored = localStorage.getItem(SIMPLE_SWAP_MODE_KEY)
+      return stored !== null ? JSON.parse(stored) : initialSimpleMode
+    } catch (error) {
+      logger.console.warn(
+        "Failed to read simple swap mode from localStorage:",
+        error,
+      )
+      return initialSimpleMode
+    }
+  })
+
+  // Function that updates state and saves to localStorage (for user preferences)
+  const setIsSimpleSwapModeWithStorage = useCallback((simple: boolean) => {
+    setIsSimpleSwapMode(simple)
+    try {
+      localStorage.setItem(SIMPLE_SWAP_MODE_KEY, JSON.stringify(simple))
+    } catch (error) {
+      logger.console.warn(
+        "Failed to save simple swap mode to localStorage:",
+        error,
+      )
+    }
+  }, [])
+
+  const toggleSimpleSwapMode = useCallback(() => {
+    const newMode = !isSimpleSwapMode
+    setIsSimpleSwapModeWithStorage(newMode)
+  }, [isSimpleSwapMode, setIsSimpleSwapModeWithStorage])
+
+  const resetSwapSettings = useCallback(() => {
+    try {
+      localStorage.removeItem(SIMPLE_SWAP_MODE_KEY)
+      setIsSimpleSwapMode(false) // Default: advanced swap mode
+    } catch (error) {
+      logger.console.warn("Failed to reset swap settings:", error)
+      setIsSimpleSwapMode(false) // Still reset state even if localStorage fails
+    }
+  }, [])
+
+  const value: SwapSettingsContextType = {
+    isSimpleSwapMode,
+    setIsSimpleSwapMode, // This one doesn't save to localStorage
+    setIsSimpleSwapModeWithStorage, // This one saves to localStorage
+    toggleSimpleSwapMode,
+    resetSwapSettings,
+  }
+
+  return (
+    <SwapSettingsContext.Provider value={value}>
+      {children}
+    </SwapSettingsContext.Provider>
+  )
+}
+
+export const useSwapSettings = (): SwapSettingsContextType => {
+  const context = useContext(SwapSettingsContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useSwapSettings must be used within a SwapSettingsProvider",
+    )
+  }
+
+  return context
+}

package/src/widget/hooks/useTargetAmount.ts

@@ -0,0 +1,23 @@
+import { useAmountUsd } from "./useAmountUsd.js"
+import { useWidgetProps } from "./useWidgetProps.js"
+
+export function useTargetAmount(): {
+  targetAmountUsd: number | null
+  targetAmountUsdFormatted: string
+} {
+  const { toAmount, toToken, toChainId } = useWidgetProps()
+
+  const {
+    amountUsd: targetAmountUsd,
+    amountUsdFormatted: targetAmountUsdFormatted,
+  } = useAmountUsd({
+    amount: toAmount,
+    token: toToken,
+    chainId: Number(toChainId),
+  })
+
+  return {
+    targetAmountUsd,
+    targetAmountUsdFormatted,
+  }
+}

package/src/widget/hooks/useTheme.tsx

@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react"
+import { logger } from "../../logger.js"
+
+type Theme = "auto" | "light" | "dark"
+
+interface ThemeContextType {
+  selectedTheme: Theme | null
+  setSelectedTheme: (theme: Theme) => void
+  resetThemePreference: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+interface ThemeProviderProps {
+  children: ReactNode
+}
+
+const THEME_KEY = "trails-theme"
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  // Initialize state from localStorage or return null if no preference is stored
+  const [selectedTheme, setSelectedThemeState] = useState<Theme | null>(() => {
+    try {
+      const stored = localStorage.getItem(THEME_KEY)
+      if (stored && ["auto", "light", "dark"].includes(stored)) {
+        return stored as Theme
+      }
+      return null // No user preference stored
+    } catch (error) {
+      logger.console.warn("Failed to read theme from localStorage:", error)
+      return null
+    }
+  })
+
+  // Function that updates state and saves to localStorage
+  const setSelectedTheme = useCallback((theme: Theme) => {
+    setSelectedThemeState(theme)
+    try {
+      localStorage.setItem(THEME_KEY, theme)
+    } catch (error) {
+      logger.console.warn("Failed to save theme to localStorage:", error)
+    }
+  }, [])
+
+  const resetThemePreference = useCallback(() => {
+    try {
+      localStorage.removeItem(THEME_KEY)
+      setSelectedThemeState(null) // Clear user preference
+    } catch (error) {
+      logger.console.warn("Failed to reset theme preference:", error)
+      setSelectedThemeState(null) // Still reset state even if localStorage fails
+    }
+  }, [])
+
+  const value: ThemeContextType = {
+    selectedTheme,
+    setSelectedTheme,
+    resetThemePreference,
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export const useThemePreference = (): ThemeContextType => {
+  const context = useContext(ThemeContext)
+
+  if (context === undefined) {
+    throw new Error(
+      "useThemePreference must be used within a ThemePreferenceProvider",
+    )
+  }
+
+  return context
+}

package/src/widget/hooks/useTokenList.ts

@@ -310,9 +310,14 @@ export function useTokenList({
   }, [balanceError, onError])
 
   const handleTokenSelect = (token: TokenFormatted) => {
-    const isNative = !("contractAddress" in token)
+    const isNative =
+      !("contractAddress" in token) || token.contractAddress === zeroAddress
     const chainInfo = getChainInfo(token.chainId)
     const imageUrl = token.imageUrl
+    const decimals = isNative ? 18 : token.contractInfo?.decimals
+    if (!decimals) {
+      throw new Error("Decimals not found")
+    }
 
     let formattedToken: Token
     if (isNative) {
@@ -328,7 +333,7 @@ export function useTokenList({
           (token as TokenBalanceExtended).balanceUsdFormatted ?? "",
         tokenPriceUsd: (token as TokenBalanceExtended).price?.value ?? 0,
         contractInfo: {
-          decimals: 18,
+          decimals,
           symbol: chainInfo?.nativeCurrency.symbol || "ETH",
           name: chainInfo?.nativeCurrency.name || "Native Token",
         },
@@ -346,7 +351,7 @@ export function useTokenList({
           ...token.contractInfo,
           name: token.contractInfo?.name ?? "Unknown Token",
           symbol: token.contractInfo?.symbol ?? "???",
-          decimals: token.contractInfo?.decimals ?? 18,
+          decimals,
         },
         balanceUsdFormatted: token.balanceUsdFormatted ?? "",
         tokenPriceUsd: token.price?.value ?? 0,
@@ -373,7 +378,8 @@ export function useTokenList({
   const isTokenSelected = (token: TokenBalanceExtended): boolean => {
     if (!selectedToken) return false
 
-    const isNative = !("contractAddress" in token)
+    const isNative =
+      !("contractAddress" in token) || token.contractAddress === zeroAddress
     return (
       selectedToken.chainId === token.chainId &&
       (isNative
@@ -395,7 +401,8 @@ export function useTokenList({
 
     const matchingTokens = sortedTokens.filter(
       (token: TokenBalanceExtended) => {
-        const isNative = !("contractAddress" in token)
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
         const chainInfo = getChainInfo(token.chainId)
         const chainName = chainInfo?.name || ""
         const chainNameLower = chainName.toLowerCase()
@@ -506,7 +513,8 @@ export function useTokenList({
     // Get base formatted tokens
     const baseFormattedTokens = filteredTokens.map(
       (token: TokenBalanceExtended): TokenFormatted => {
-        const isNative = !("contractAddress" in token)
+        const isNative =
+          !("contractAddress" in token) || token.contractAddress === zeroAddress
         const chainInfo = getChainInfo(token.chainId)
         const nativeSymbol = chainInfo?.nativeCurrency.symbol || "ETH"
         const tokenSymbol = isNative
@@ -525,13 +533,14 @@ export function useTokenList({
           tokenSymbol,
           token.chainId,
         )
-        const formattedBalance = formatRawAmount(
-          token.balance,
-          isNative ? 18 : token.contractInfo?.decimals,
-        )
+        const decimals = isNative ? 18 : token.contractInfo?.decimals
+        if (!decimals) {
+          throw new Error("Decimals not found")
+        }
+        const formattedBalance = formatRawAmount(token.balance, decimals)
         const priceUsd = Number(token.price?.value) ?? 0
         const balanceUsdFormatted = token.balanceUsdFormatted ?? ""
-        const decimals = isNative ? 18 : (token.contractInfo?.decimals ?? 18)
+
         let isSufficientBalance = true
         if (targetAmountUsd) {
           isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd