0xtrails 0.13.0 → 0.13.2

package/src/widget/components/Fund.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query"
 import { ArrowLeftRight } from "lucide-react"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -17,6 +18,9 @@ import { useSupportedTokens, type Token } from "../../tokens.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import { isPassthroughEligible } from "../../utils/passthrough.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { getMatchingMeshSupportedTokens } from "../utils/meshSupportedTokens.js"
+import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
+import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
 import type { Screen } from "../hooks/useViewManager.js"
 import { useViewManager } from "../hooks/useViewManager.js"
 import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
@@ -33,9 +37,9 @@ import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useSendForm } from "../hooks/useSendForm.js"
+import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
 import { useSwapState } from "../hooks/useSwapState.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import type { BaseProps, OnrampConfirmCallback } from "../types/commonProps.js"
 import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
 import { forexRateStore } from "../utils/forexRateStore.js"
@@ -58,6 +62,7 @@ import { TokenSelectorButton } from "./TokenSelectorButton.js"
 import LoadingSpinner from "./LoadingSpinner.js"
 
 import { addressEqual } from "../../utils/address.js"
+import { useOnrampClient } from "../../onrampClient.js"
 interface FundProps extends BaseProps {
   onWaitingForOnrampConfirm?: OnrampConfirmCallback
   title?: string
@@ -102,7 +107,14 @@ const Fund: React.FC<FundProps> = ({
   defaultInputMode,
 }) => {
   const { mode, navigate } = useViewManager()
-  const { fundOptions } = useWidgetProps()
+  const widgetProps = useWidgetProps()
+  const {
+    fundOptions,
+    onramp: onrampFactory,
+    apiKey,
+    trailsApiUrl,
+  } = widgetProps
+  const onrampClient = useOnrampClient()
   const {
     selectedToken: originToken,
     setSelectedToken: setOriginToken,
@@ -116,7 +128,21 @@ const Fund: React.FC<FundProps> = ({
     setHasManualSelection: setHasManualDestinationSelection,
     isControlledByProps: isDestinationControlledByProps,
   } = useDestinationSelectedToken()
-  const { paymentMethod } = useSelectedFundMethod()
+  const { paymentMethod, selectedMeshExchange } = useSelectedFundMethod()
+  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
+  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
+  const meshEnabled = !!meshOnrampConfig?.mesh
+  const meshAllowedExchanges = meshOnrampConfig?.mesh?.exchanges ?? null
+  const activeMeshIntegrationIds = selectedMeshExchange
+    ? [selectedMeshExchange.integrationId]
+    : null
+  const activeMeshExchangeKeys = selectedMeshExchange
+    ? null
+    : meshAllowedExchanges
+  const isCoinbaseMeshOnramp =
+    fundMethod === "onramp-mesh" &&
+    (selectedMeshExchange?.exchangeKey === "coinbase" ||
+      selectedMeshExchange?.exchangeKey === "coinbaseRamp")
 
   // Check if fee options will be shown (not needed for onramp/direct-transfer modes)
   const skipFeeBalanceFetch =
@@ -129,11 +155,9 @@ const Fund: React.FC<FundProps> = ({
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(
-    originToken,
-    account?.address,
-    skipFeeBalanceFetch,
-  )
+  } = useAccountTokenBalanceOnchain(originToken, account?.address, {
+    disabled: skipFeeBalanceFetch,
+  })
 
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const {
@@ -179,6 +203,14 @@ const Fund: React.FC<FundProps> = ({
   const [isUserTyping, setIsUserTyping] = useState(false)
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current)
+      }
+    }
+  }, [])
+
   // Get country defaults when onramp is active
   const {
     countryCode: detectedCountryCode,
@@ -314,6 +346,7 @@ const Fund: React.FC<FundProps> = ({
     setSellAmount,
     buyAmount,
     setBuyAmount,
+    resetSwapState,
     enterFormMode,
   } = useSwapState()
 
@@ -351,6 +384,16 @@ const Fund: React.FC<FundProps> = ({
   const [isCreatingWidgetSession, setIsCreatingWidgetSession] = useState(false)
   const [widgetError, setWidgetError] = useState<string | null>(null)
 
+  const handleCompleteAndClearAmounts = useCallback(
+    (result: OnCompleteProps) => {
+      setInputDisplayValue("")
+      setSellFiatAmount("")
+      resetSwapState()
+      onComplete(result)
+    },
+    [onComplete, resetSwapState, setSellFiatAmount],
+  )
+
   // Initialize and update selected recipient from toRecipient prop (but don't auto-set to account address)
   // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
   useEffect(() => {
@@ -435,7 +478,6 @@ const Fund: React.FC<FundProps> = ({
     isSubmitting,
     isLoadingQuote,
     selectedDestToken,
-    setAmount,
     setSelectedDestinationChain,
     setSelectedDestToken,
     buttonText,
@@ -463,7 +505,7 @@ const Fund: React.FC<FundProps> = ({
     paymasterUrls,
     onSend,
     onConfirm,
-    onComplete,
+    onComplete: handleCompleteAndClearAmounts,
     selectedToken: effectiveOriginToken as any,
     setWalletConfirmRetryHandler,
     tradeType: tradeType,
@@ -490,6 +532,60 @@ const Fund: React.FC<FundProps> = ({
         : undefined,
   })
 
+  const {
+    data: isMeshRouteSupported = true,
+    isLoading: isLoadingMeshRouteSupport,
+  } = useQuery({
+    queryKey: [
+      "mesh-route-support",
+      meshEnvironment,
+      activeMeshExchangeKeys,
+      prepareSendQuote?.originChain?.id,
+      prepareSendQuote?.originToken?.symbol,
+      trailsApiUrl,
+      apiKey,
+    ],
+    queryFn: async () => {
+      const response = await onrampClient.getMeshSupportedTokens({
+        environment: meshEnvironment,
+      })
+
+      const allowedTokens = !activeMeshExchangeKeys?.length
+        ? !activeMeshIntegrationIds?.length
+          ? response.tokens || []
+          : (response.tokens || []).filter((token) =>
+              (token.integrationIds || []).some((integrationId) =>
+                activeMeshIntegrationIds.includes(integrationId),
+              ),
+            )
+        : (response.tokens || []).filter((token) =>
+            (token.exchangeKeys || []).some((exchangeKey) =>
+              activeMeshExchangeKeys.includes(exchangeKey),
+            ),
+          )
+
+      return (
+        getMatchingMeshSupportedTokens(
+          allowedTokens,
+          prepareSendQuote?.originChain?.id,
+          prepareSendQuote?.originToken?.symbol,
+        ).length > 0
+      )
+    },
+    enabled:
+      fundMethod === "onramp-mesh" &&
+      meshEnabled &&
+      !!prepareSendQuote?.originChain?.id &&
+      !!prepareSendQuote?.originToken?.symbol &&
+      !!apiKey &&
+      !!trailsApiUrl,
+    staleTime: 24 * 60 * 60 * 1000,
+    gcTime: 24 * 60 * 60 * 1000,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+
   const selectedOnrampProviderQuote =
     selectedOnrampProvider || autoSelectedOnrampQuote
 
@@ -706,8 +802,7 @@ const Fund: React.FC<FundProps> = ({
     useState(false)
 
   const { supportedTokens } = useSupportedTokens({
-    disabled:
-      !!toToken || showSourceTokenSelector || showDestinationTokenSelector,
+    disabled: !toToken,
   })
 
   // Use a ref to track if we've already auto-selected from toToken prop
@@ -779,15 +874,6 @@ const Fund: React.FC<FundProps> = ({
     }
   }, [exactInputOnly, setTradeType, setBuyAmount])
 
-  // Update amount based on last input type
-  useEffect(() => {
-    if (tradeType === TradeType.EXACT_INPUT) {
-      setAmount(sellAmount)
-    } else {
-      setAmount(buyAmount)
-    }
-  }, [sellAmount, buyAmount, tradeType, setAmount])
-
   // Handle sell amount input changes
   const handleSellAmountChange = useCallback(
     (value: string) => {
@@ -900,9 +986,33 @@ const Fund: React.FC<FundProps> = ({
     setHasManualOriginSelection,
   ])
 
+  useEffect(() => {
+    if (hasManualOriginSelection || !isCoinbaseMeshOnramp) {
+      return
+    }
+
+    const isUsdcBaseSelected =
+      !!originToken &&
+      originToken.chainId === USDC_BASE.chainId &&
+      addressEqual(originToken.contractAddress, USDC_BASE.contractAddress)
+
+    if (!isUsdcBaseSelected) {
+      logger.console.log(
+        "[Fund] Preselecting USDC on Base for Coinbase Mesh onramp",
+      )
+      setOriginToken(USDC_BASE as Token)
+    }
+  }, [
+    hasManualOriginSelection,
+    isCoinbaseMeshOnramp,
+    originToken,
+    setOriginToken,
+  ])
+
   // Auto-select origin token using separated hook
   useEffect(() => {
     if (
+      fundMethod !== "onramp-mesh" &&
       !originToken &&
       !isLoadingOriginDefaults &&
       defaultOriginToken &&
@@ -920,6 +1030,7 @@ const Fund: React.FC<FundProps> = ({
     defaultOriginToken,
     setOriginToken,
     hasManualOriginSelection,
+    fundMethod,
   ])
 
   // Auto-select destination token using separated hook
@@ -988,14 +1099,6 @@ const Fund: React.FC<FundProps> = ({
   const [showDestinationChainList, setShowDestinationChainList] =
     useState(false)
 
-  useEffect(() => {
-    if (selectedDestToken) {
-      setSelectedDestinationChain(
-        getChainInfo((selectedDestToken as any)?.chainId as any) as any,
-      )
-    }
-  }, [selectedDestToken, setSelectedDestinationChain])
-
   // Sync destination token from hook with useSendForm
   // This ensures the destination token auto-selection flows into useSendForm
   useEffect(() => {
@@ -1797,7 +1900,7 @@ const Fund: React.FC<FundProps> = ({
                         }
                       }
                     }}
-                    className="text-xs text-blue-500 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
+                    className="text-base text-blue-500 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-2 py-1.5"
                     title={
                       originToken
                         ? `Toggle between USD and ${originToken.symbol}`
@@ -1806,8 +1909,8 @@ const Fund: React.FC<FundProps> = ({
                   >
                     <svg
                       aria-hidden="true"
-                      width="16"
-                      height="16"
+                      width="20"
+                      height="20"
                       viewBox="0 0 16 16"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -1994,83 +2097,28 @@ const Fund: React.FC<FundProps> = ({
             fundMethod !== "direct-transfer" &&
             fundMethod !== "onramp-mesh" ? (
             <div className="mt-3 flex justify-center items-center space-x-2">
-              {isMeldOnRampActive ? (
-                // USD Amount Buttons for onramp - convert from USD to selected currency
-                <div className="flex items-center space-x-1">
-                  <button
-                    type="button"
-                    className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-                    onClick={() => {
-                      // Convert USD amount to selected currency
-                      if (selectedFiatCurrency?.currencyCode === "USD") {
-                        setSellFiatAmount("25")
-                      } else if (fiatToUsdExchangeRate) {
-                        // Convert $25 USD to the selected currency
-                        const convertedAmount = 25 * fiatToUsdExchangeRate
-                        setSellFiatAmount(convertedAmount.toFixed(2))
-                      }
-                    }}
-                  >
-                    $25
-                  </button>
-                  <button
-                    type="button"
-                    className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-                    onClick={() => {
-                      // Convert USD amount to selected currency
-                      if (selectedFiatCurrency?.currencyCode === "USD") {
-                        setSellFiatAmount("50")
-                      } else if (fiatToUsdExchangeRate) {
-                        // Convert $50 USD to the selected currency
-                        const convertedAmount = 50 * fiatToUsdExchangeRate
-                        setSellFiatAmount(convertedAmount.toFixed(2))
-                      }
-                    }}
-                  >
-                    $50
-                  </button>
-                  <button
-                    type="button"
-                    className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
-                    onClick={() => {
-                      // Convert USD amount to selected currency
-                      if (selectedFiatCurrency?.currencyCode === "USD") {
-                        setSellFiatAmount("100")
-                      } else if (fiatToUsdExchangeRate) {
-                        // Convert $100 USD to the selected currency
-                        const convertedAmount = 100 * fiatToUsdExchangeRate
-                        setSellFiatAmount(convertedAmount.toFixed(2))
-                      }
-                    }}
-                  >
-                    $100
-                  </button>
-                </div>
-              ) : (
-                <PercentageMaxButtons
-                  userBalance={balanceFormatted}
-                  userBalanceRaw={balanceRaw}
-                  decimals={tokenDecimals}
-                  isNativeToken={originToken.isNativeToken ?? false}
-                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                  chainId={originChainId || undefined}
-                  onAmountSelect={(amount) => {
-                    setTradeType(TradeType.EXACT_INPUT)
-                    setSellAmount(amount)
-                    setBuyAmount("")
-                    // Update display value based on current mode
-                    if (isEnteringFiat && tokenPriceUsd > 0) {
-                      const usdAmount = parseFloat(amount) * tokenPriceUsd
-                      setInputDisplayValue(
-                        Number(usdAmount.toFixed(2)).toString(),
-                      )
-                    } else {
-                      setInputDisplayValue(amount)
-                    }
-                  }}
-                  className="opacity-100"
-                />
-              )}
+              <PercentageMaxButtons
+                userBalance={balanceFormatted}
+                userBalanceRaw={balanceRaw}
+                decimals={tokenDecimals}
+                isNativeToken={originToken.isNativeToken ?? false}
+                gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                chainId={originChainId || undefined}
+                onAmountSelect={(amount) => {
+                  setTradeType(TradeType.EXACT_INPUT)
+                  setSellAmount(amount)
+                  setBuyAmount("")
+                  if (isEnteringFiat && tokenPriceUsd > 0) {
+                    const usdAmount = parseFloat(amount) * tokenPriceUsd
+                    setInputDisplayValue(
+                      Number(usdAmount.toFixed(2)).toString(),
+                    )
+                  } else {
+                    setInputDisplayValue(amount)
+                  }
+                }}
+                className="opacity-100"
+              />
             </div>
           ) : null}
         </div>
@@ -2331,6 +2379,8 @@ const Fund: React.FC<FundProps> = ({
                 !isValidCustomToken ||
                 isLoadingQuote ||
                 !prepareSendQuote ||
+                (fundMethod === "onramp-mesh" &&
+                  (isLoadingMeshRouteSupport || !isMeshRouteSupported)) ||
                 (!isMeldOnRampActive &&
                   fundMethod !== "direct-transfer" &&
                   prepareSendQuote?.noSufficientBalance) ||
@@ -2368,6 +2418,15 @@ const Fund: React.FC<FundProps> = ({
           ) : fundMethod !== "direct-transfer" &&
             prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
+          ) : fundMethod === "onramp-mesh" && isLoadingMeshRouteSupport ? (
+            <div className="flex items-center justify-center">
+              <LoadingSpinner className="mr-2" />
+              <span>Checking exchange funding...</span>
+            </div>
+          ) : fundMethod === "onramp-mesh" &&
+            prepareSendQuote &&
+            !isMeshRouteSupported ? (
+            "Exchange funding unavailable"
           ) : isMeldOnRampActive && !sellFiatAmount ? (
             "Enter amount"
           ) : !isMeldOnRampActive && !sellAmount ? (

package/src/widget/components/FundMethods.tsx

@@ -1,18 +1,18 @@
 import type React from "react"
 import { ChevronRight, CreditCard, Wallet, ZapIcon } from "lucide-react"
+import { wagmiConnectorToWalletId } from "@0xtrails/wallet-registry"
 import { useAccount, useConnections, useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import { useViewManager } from "../hooks/useViewManager.js"
 import { useWalletConnectionContext } from "../hooks/useWalletConnectionContext.js"
-import { useWallets, wagmiConnectorToWalletId } from "../../wallets.js"
+import { useWallets } from "../../wallets.js"
 import ExchangeIcon from "../assets/Exchange-icon-black.svg"
 import WalletChange from "../assets/WalletChange-black.svg"
 import { truncateAddress } from "../../utils/address.js"
 import { useResolveEns } from "../../ens.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { useAccountTotalBalanceUsd } from "../../query/balance.hooks.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import type { FundMethodListOption } from "../widget.js"
 
@@ -107,17 +107,13 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     eligibleConnectedWallets.find((wallet) => wallet.isActive) ||
     eligibleConnectedWallets[0]
 
-  const { data: activeWalletBalanceUsd = 0 } = useAccountTotalBalanceUsd(
-    activeConnection?.address || null,
-  )
-  const hasActiveWalletBalance = activeWalletBalanceUsd > 0
-
-  const showWalletInline = !!activeConnection && hasActiveWalletBalance
+  const showWalletInline = !!activeConnection
 
   const fundMethodAliases: Record<FundMethodListOption, FundMethod> = {
     "connected-wallet": "wallet",
     "crypto-transfer": "direct-transfer",
     "cc-onramp": "onramp-meld",
+    exchange: "onramp-mesh",
     "exchange-onramp": "onramp-mesh",
   }
 
@@ -170,7 +166,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
     listedInternalSet.size > 0 &&
     !listedInternalSet.has(method)
 
-  const displayMeshExchange = !!onramp // MeshConnect Exchange enabled when onramp prop is provided
+  const displayMeshExchange = !!onramp
 
   const renderFundMethod = (method: FundMethod) => {
     const forceDisabled = isUnlisted(method)

package/src/widget/components/HighPriceImpactBlock.tsx

@@ -0,0 +1,44 @@
+import type React from "react"
+import { getIsHighPriceImpactError } from "../../error.js"
+
+interface HighPriceImpactBlockProps {
+  quoteError: string | null
+}
+
+export const HighPriceImpactBlock: React.FC<HighPriceImpactBlockProps> = ({
+  quoteError,
+}) => {
+  if (!quoteError || !getIsHighPriceImpactError(quoteError)) return null
+
+  return (
+    <div className="mb-2 p-3 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-800">
+      <div className="flex items-start gap-2">
+        <svg
+          className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-red-700 dark:text-red-300">
+            Quote Unavailable — High Price Impact
+          </p>
+          <p className="text-xs text-red-600 dark:text-red-400 mt-0.5">
+            This transfer has a price impact over 30% on an amount over $100.
+            Try a smaller amount or a different route.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HighPriceImpactBlock

package/src/widget/components/MeldHistory.tsx

@@ -6,7 +6,7 @@ import { isValidNumber } from "../../utils/validation.js"
 import { getChainName } from "../../chains.js"
 import { logger } from "../../logger.js"
 import { useMeldServiceProviders } from "../../query/meld.hooks.js"
-import type { MeldServiceProvider } from "../../onramp-client/trails-onramp.gen.js"
+import type { MeldServiceProvider } from "@0xtrails/api/onramp"
 import { SECOND_MS, formatRelativeDate } from "../../utils/time.js"
 import {
   useMeldTransactionHistory,
@@ -14,6 +14,7 @@ import {
   type MeldTransactionStatus,
 } from "../hooks/useMeldTransactionHistory.js"
 import { getProviderImage } from "../utils/meldProviderUtils.js"
+import { formatRawStatusLabel } from "../utils/statusLabel.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenImage } from "./TokenImage.js"
@@ -51,31 +52,6 @@ function getStatusColor(status: MeldTransactionStatus): string {
   }
 }
 
-function getStatusLabel(status: MeldTransactionStatus): string {
-  switch (status) {
-    case "COMPLETED":
-      return "Completed"
-    case "SETTLED":
-      return "Settled"
-    case "DECLINED":
-      return "Declined"
-    case "FAILED":
-      return "Failed"
-    case "CANCELLED":
-      return "Cancelled"
-    case "ERROR":
-      return "Error"
-    case "REFUNDED":
-      return "Refunded"
-    case "PENDING":
-      return "Pending"
-    case "PROCESSING":
-      return "Processing"
-    default:
-      return status
-  }
-}
-
 function formatAmount(amount?: string): string {
   if (!amount) return "-"
 
@@ -191,9 +167,9 @@ const TransactionItem: React.FC<{
         <div className="flex items-center gap-2">
           <span
             className={`px-2 py-0.5 rounded text-xs font-medium ${getStatusColor(transaction.status)}`}
-            title={`Status: ${getStatusLabel(transaction.status)}`}
+            title={`Status: ${formatRawStatusLabel(transaction.status)}`}
           >
-            {getStatusLabel(transaction.status)}
+            {formatRawStatusLabel(transaction.status)}
           </span>
           <span className="text-xs trails-text-tertiary">
             {formatDate(transaction.createdAt || transaction.updatedAt)}