0xtrails 0.12.0 → 0.12.2

package/src/widget/hooks/useTokenWithFreshBalance.ts

@@ -5,26 +5,91 @@ import {
   WIDGET_REFRESH_INTERVAL,
 } from "../../query/balance.hooks.js"
 import type { Address } from "viem"
+import { erc20Abi } from "viem"
+import { useBalance, useReadContract } from "wagmi"
 import { logger } from "../../index.js"
+import { isNativeToken, addressEqual } from "../../utils/address.js"
+import { formatBalanceFields } from "../../utils/format.js"
 
-import { addressEqual } from "../../utils/address.js"
 /**
- * Enriches a token with fresh balance data from the cache/API
- * This prevents displaying stale balance data from localStorage or props
+ * Reads the on-chain balance for a single token (native or ERC20).
+ * This is the source of truth — it bypasses the indexer entirely.
+ */
+function useOnChainBalance(
+  token: Token | null | undefined,
+  accountAddress?: string,
+): { balance: string | undefined; isLoading: boolean } {
+  const isNative = isNativeToken(token?.contractAddress)
+  const enabled = !!token && !!accountAddress && !!token.chainId
+
+  // Native token balance (ETH, MATIC, etc.)
+  const { data: nativeData, isLoading: nativeLoading } = useBalance({
+    address: accountAddress as Address | undefined,
+    chainId: token?.chainId,
+    query: {
+      enabled: enabled && isNative,
+      refetchInterval: WIDGET_REFRESH_INTERVAL,
+    },
+  })
+
+  // ERC20 token balance
+  const { data: erc20Data, isLoading: erc20Loading } = useReadContract({
+    address: token?.contractAddress as Address | undefined,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: accountAddress ? [accountAddress as Address] : undefined,
+    chainId: token?.chainId,
+    query: {
+      enabled: enabled && !isNative,
+      refetchInterval: WIDGET_REFRESH_INTERVAL,
+    },
+  })
+
+  return useMemo(() => {
+    if (!enabled) return { balance: undefined, isLoading: false }
+
+    if (isNative) {
+      return {
+        balance: nativeData?.value?.toString(),
+        isLoading: nativeLoading,
+      }
+    }
+
+    return {
+      balance: erc20Data?.toString(),
+      isLoading: erc20Loading,
+    }
+  }, [
+    enabled,
+    isNative,
+    nativeData?.value,
+    nativeLoading,
+    erc20Data,
+    erc20Loading,
+  ])
+}
+
+/**
+ * Enriches a token with fresh balance data from the cache/API,
+ * with an on-chain balance read as source of truth fallback.
+ * This prevents displaying stale balance data from localStorage or props.
  */
 export function useTokenWithFreshBalance(
   token: Token | null | undefined,
   accountAddress?: string,
   disabled?: boolean,
 ): { token: Token | null | undefined; isLoadingBalance: boolean } {
-  // Fetch fresh balance data for the account
-  // We are already filtering the token here, we don't need to pass it to the API, it will collide with useTokenBalances because they share the same query key.
+  // Fetch fresh balance data for the account (indexer-backed, includes USD prices)
   const { sortedTokens, isLoadingBalances } = useTokenBalances(
     accountAddress as Address | null,
     undefined,
     { disabled: disabled, refetchInterval: WIDGET_REFRESH_INTERVAL },
   )
 
+  // On-chain balance as source of truth for the selected token
+  const { balance: onChainBalance, isLoading: isLoadingOnChain } =
+    useOnChainBalance(disabled ? null : token, accountAddress)
+
   logger.console.log(
     "[trails-sdk] sortedTokens FROM useTokenWithFreshBalance",
     sortedTokens,
@@ -35,7 +100,7 @@ export function useTokenWithFreshBalance(
     if (!token) return token
     if (!sortedTokens) return token // Return original if no fresh data available
 
-    // Find matching token in balance data
+    // Find matching token in indexer balance data
     const freshToken = sortedTokens.find(
       (t: Token) =>
         addressEqual(t.contractAddress, token.contractAddress) &&
@@ -43,6 +108,28 @@ export function useTokenWithFreshBalance(
     )
 
     if (freshToken) {
+      // If on-chain balance is lower than indexer balance, the indexer is stale —
+      // use the on-chain value as source of truth for the balance fields.
+      if (onChainBalance !== undefined && freshToken.balance) {
+        try {
+          const onChain = BigInt(onChainBalance)
+          const indexed = BigInt(freshToken.balance)
+          if (onChain < indexed) {
+            const fields = formatBalanceFields(onChainBalance, token.decimals)
+            return {
+              ...token,
+              ...fields,
+              balanceUsd: freshToken.balanceUsd,
+              balanceUsdFormatted: freshToken.balanceUsdFormatted,
+              isSufficientBalance: freshToken.isSufficientBalance,
+              priceUsd: freshToken.priceUsd,
+            }
+          }
+        } catch {
+          // Fall through to indexer balance
+        }
+      }
+
       // Merge token metadata with fresh balance data
       return {
         ...token,
@@ -57,11 +144,41 @@ export function useTokenWithFreshBalance(
       }
     }
 
-    // Return original token if no fresh data found
+    // Token not found in indexer data — use on-chain balance as source of truth
+    if (onChainBalance !== undefined) {
+      const fields = formatBalanceFields(onChainBalance, token.decimals)
+      return {
+        ...token,
+        ...fields,
+        balanceUsd: 0,
+        balanceUsdFormatted: "$0.00",
+        isSufficientBalance: false,
+        priceUsd: token.priceUsd,
+      }
+    }
+
+    // Token not found and no on-chain data yet — zero out if indexer has loaded
+    if (sortedTokens.length > 0 || !isLoadingBalances) {
+      return {
+        ...token,
+        balance: "0",
+        balanceDisplay: "0",
+        balanceLocaleDisplay: "0",
+        balanceFormatted: "0",
+        balanceUsd: 0,
+        balanceUsdFormatted: "$0.00",
+        isSufficientBalance: false,
+      }
+    }
+
+    // Return original token while still loading
     return token
-  }, [token, sortedTokens])
+  }, [token, sortedTokens, isLoadingBalances, onChainBalance])
 
-  return { token: tokenWithFreshBalance, isLoadingBalance: isLoadingBalances }
+  return {
+    token: tokenWithFreshBalance,
+    isLoadingBalance: isLoadingBalances || isLoadingOnChain,
+  }
 }
 
 /**
@@ -107,10 +224,23 @@ export function useTokensWithFreshBalance(
         }
       }
 
-      // Return original token if no fresh data found
+      // Token not found — balance is likely zero (filtered out by useTokenBalances)
+      if (sortedTokens.length > 0 || !isLoadingBalances) {
+        return {
+          ...token,
+          balance: "0",
+          balanceDisplay: "0",
+          balanceLocaleDisplay: "0",
+          balanceFormatted: "0",
+          balanceUsd: 0,
+          balanceUsdFormatted: "$0.00",
+          isSufficientBalance: false,
+        }
+      }
+
       return token
     })
-  }, [tokens, sortedTokens])
+  }, [tokens, sortedTokens, isLoadingBalances])
 
   return { tokens: tokensWithFreshBalance, isLoadingBalance: isLoadingBalances }
 }

package/src/widget/types/commonProps.ts

@@ -45,6 +45,8 @@ export interface BaseProps {
   toCalldata?: string
   swapProvider?: string
   bridgeProvider?: string
+  swapProviderFallback?: boolean
+  bridgeProviderFallback?: boolean
   fundMethod?: FundMethod
   checkoutOnHandlers?: CheckoutOnHandlers
   selectedToken: Token | null

package/src/widget/utils/transactionFailure.ts

@@ -0,0 +1,52 @@
+import type { TransactionState } from "../../transactions.js"
+
+export const hasFailedTransaction = (tx: TransactionState): boolean => {
+  const hasFailedState = tx.state === "failed"
+  const hasFailureEvent = tx.decodedGuestModuleEvents?.some(
+    (event) => event.type === "CallFailed",
+  )
+  return hasFailedState || Boolean(hasFailureEvent)
+}
+
+export const hasAbortedTransaction = (tx: TransactionState): boolean => {
+  const hasAbortedState = tx.state === "aborted"
+  const hasAbortedEvent = tx.decodedGuestModuleEvents?.some(
+    (event) => event.type === "CallAborted",
+  )
+  return hasAbortedState || Boolean(hasAbortedEvent)
+}
+
+/**
+ * Returns true when a transaction should be treated as failed in widget UI.
+ *
+ * A transaction is considered failed if:
+ * - its lifecycle state is `failed` or `aborted`, or
+ * - decoded guest module events include `CallFailed` or `CallAborted`.
+ */
+export function hasFailedOrAbortedTransaction(
+  tx?: TransactionState | null,
+): boolean {
+  if (!tx) return false
+
+  const hasFailedState = tx.state === "failed" || tx.state === "aborted"
+  const hasFailureEvent = tx.decodedGuestModuleEvents?.some(
+    (event) => event.type === "CallFailed" || event.type === "CallAborted",
+  )
+
+  return hasFailedState || Boolean(hasFailureEvent)
+}
+
+/**
+ * Returns true when any transaction in the list is failed or aborted.
+ *
+ * This is used for screen-level decisions (for example, showing failure CTAs
+ * or rendering the receipt in failure state) so pending/receipt logic stays
+ * consistent across components.
+ */
+export function hasAnyFailedOrAbortedTransactions(
+  transactionStates?: TransactionState[] | null,
+): boolean {
+  return Boolean(
+    transactionStates?.some((tx) => hasFailedOrAbortedTransaction(tx)),
+  )
+}