0xtrails 0.13.0 → 0.13.2

package/src/widget/components/MeshExchangeSelection.tsx

@@ -0,0 +1,218 @@
+import { useQuery } from "@tanstack/react-query"
+import { ChevronRight } from "lucide-react"
+import type React from "react"
+import { useState } from "react"
+import { useOnrampClient } from "../../onrampClient.js"
+import { logger } from "../../logger.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
+import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
+
+const INITIAL_VISIBLE_EXCHANGES = 3
+
+export interface MeshExchangeSelectionProps {
+  onBack: () => void
+  onSelectExchange: (exchange: {
+    integrationId: string
+    exchangeKey: string
+    exchangeName: string
+  }) => void
+}
+
+function getExchangeBackgroundClassName(exchangeKey: string): string {
+  switch (exchangeKey) {
+    case "coinbase":
+    case "coinbaseRamp":
+    case "sandboxCoinbase":
+      return "bg-white"
+    case "binanceInternational":
+    case "binanceInternationalDirect":
+    case "binanceUs":
+    case "binanceUsDirect":
+    case "sandbox":
+    case "binanceConnect":
+      return "bg-black"
+    case "bitfinex":
+    case "bitfinexDirect":
+      return "bg-[#0e3452]"
+    case "kraken":
+    case "krakenDirect":
+      return "bg-[#5841d7]"
+    case "uphold":
+    case "upholdDirect":
+      return "bg-[#49cc68]"
+    case "paribu":
+    case "paribuOAuth":
+      return "bg-[#9cba3b]"
+    case "robinhood":
+    case "robinhoodDirect":
+    case "robinhoodConnect":
+      return "bg-[#ccff00]"
+    default:
+      return "bg-gray-700"
+  }
+}
+
+export const MeshExchangeSelection: React.FC<MeshExchangeSelectionProps> = ({
+  onBack,
+  onSelectExchange,
+}) => {
+  const { onramp: onrampFactory, apiKey, trailsApiUrl } = useWidgetProps()
+  const onrampClient = useOnrampClient()
+  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
+  const [showAllExchanges, setShowAllExchanges] = useState(false)
+  const [failedLogos, setFailedLogos] = useState<Record<string, true>>({})
+
+  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
+
+  const {
+    data: exchangeOptions = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["mesh-exchange-options", meshEnvironment, trailsApiUrl, apiKey],
+    queryFn: async () => {
+      const response = await onrampClient.getMeshIntegrations({
+        environment: meshEnvironment,
+      })
+
+      return (response.integrations || []).map((integration) => {
+        return {
+          key: integration.key,
+          integrationId: integration.id,
+          exchangeName: integration.displayName || integration.key,
+          imageUrl: integration.imageUrl || "",
+        }
+      })
+    },
+    enabled: !!apiKey && !!trailsApiUrl,
+    staleTime: 24 * 60 * 60 * 1000,
+    gcTime: 24 * 60 * 60 * 1000,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const visibleExchangeOptions = showAllExchanges
+    ? exchangeOptions
+    : exchangeOptions.slice(0, INITIAL_VISIBLE_EXCHANGES)
+
+  return (
+    <div className="flex flex-col h-full">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Select Exchange"
+        headerContentAlign="left"
+      />
+
+      <div className="flex-1">
+        {isLoading ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center">
+              <div className="mt-4 mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-solid border-blue-500 border-t-transparent" />
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Loading exchanges...
+              </p>
+            </div>
+          </div>
+        ) : error ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="rounded-lg border border-solid border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
+              {error instanceof Error
+                ? error.message
+                : "Failed to load exchanges"}
+            </div>
+          </div>
+        ) : exchangeOptions.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="rounded-lg border border-solid border-gray-200 bg-gray-50 p-4 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-300">
+              No supported exchanges are currently available.
+            </div>
+          </div>
+        ) : (
+          <div className="max-h-[420px] overflow-y-auto pr-1 pt-4">
+            <div className="space-y-4">
+              {visibleExchangeOptions.map((exchange) => (
+                <button
+                  key={exchange.integrationId}
+                  type="button"
+                  onClick={() => {
+                    logger.console.log(
+                      "[trails-sdk] Selected Mesh exchange in widget:",
+                      exchange,
+                    )
+                    onSelectExchange({
+                      integrationId: exchange.integrationId,
+                      exchangeKey: exchange.key,
+                      exchangeName: exchange.exchangeName,
+                    })
+                  }}
+                  className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 rounded-lg transition-all duration-200 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-900 dark:text-white"
+                >
+                  <div className="flex items-center space-x-3 flex-1">
+                    <div
+                      className={`flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg border border-solid border-gray-200 dark:border-gray-700 ${getExchangeBackgroundClassName(exchange.key)}`}
+                    >
+                      {exchange.imageUrl &&
+                      !failedLogos[exchange.integrationId] ? (
+                        <img
+                          src={exchange.imageUrl}
+                          alt={`${exchange.exchangeName} logo`}
+                          className="h-8 w-8 rounded object-contain"
+                          loading="lazy"
+                          referrerPolicy="no-referrer"
+                          onError={() => {
+                            setFailedLogos((current) => ({
+                              ...current,
+                              [exchange.integrationId]: true,
+                            }))
+                          }}
+                        />
+                      ) : (
+                        <span className="text-sm font-semibold text-white">
+                          {exchange.exchangeName.slice(0, 2).toUpperCase()}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex-1 text-left">
+                      <h4 className="font-semibold text-gray-900 dark:text-gray-100">
+                        {exchange.exchangeName}
+                      </h4>
+                      <p className="text-sm text-gray-600 dark:text-gray-400">
+                        Connect your account to transfer funds
+                      </p>
+                    </div>
+                  </div>
+                  <ChevronRight className="w-5 h-5 text-gray-400" />
+                </button>
+              ))}
+              {!showAllExchanges &&
+                exchangeOptions.length > INITIAL_VISIBLE_EXCHANGES && (
+                  <button
+                    type="button"
+                    onClick={() => setShowAllExchanges(true)}
+                    className="w-full cursor-pointer rounded-lg border border-solid border-gray-200 px-6 py-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                  >
+                    Show more
+                  </button>
+                )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {meshEnvironment === "sandbox" && (
+        <div className="mt-4 border border-solid border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-800 dark:bg-yellow-900/20">
+          <div className="text-center">
+            <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+              Sandbox environment
+            </p>
+            <p className="text-xs text-yellow-600 dark:text-yellow-300">
+              No real funds are used
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/widget/components/OnrampHistoryRow.tsx

@@ -4,11 +4,12 @@ import { useState } from "react"
 import { getChainName } from "../../chains.js"
 import { isValidNumber } from "../../utils/validation.js"
 import { logger } from "../../logger.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 { truncateAddress } from "../../utils/address.js"
 import type { MeldTransactionData } from "../hooks/useMeldTransactionHistory.js"
 import { getProviderImage } from "../utils/meldProviderUtils.js"
+import { formatRawStatusLabel } from "../utils/statusLabel.js"
 import { TokenImage } from "./TokenImage.js"
 
 function getStatusColor(status: string): string {
@@ -33,31 +34,6 @@ function getStatusColor(status: string): string {
   }
 }
 
-function getStatusLabel(status: string): 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 "-"
 
@@ -206,7 +182,7 @@ export const OnrampHistoryRow: React.FC<OnrampHistoryRowProps> = ({
               transaction.status,
             )}`}
           >
-            {getStatusLabel(transaction.status)}
+            {formatRawStatusLabel(transaction.status)}
           </span>
 
           {/* Provider */}

package/src/widget/components/OnrampProviderConfirmation.tsx

@@ -226,31 +226,6 @@ export const OnrampProviderConfirmation: React.FC<
     !isMeldSuccess &&
     !hasSufficientDeposit
 
-  // Debug logging
-  useEffect(() => {
-    logger.console.log("[OnrampProviderConfirmation] Debug info:", {
-      externalSessionId,
-      transaction,
-      isLoadingTransaction,
-      transactionError,
-      isDirectDeposit,
-      hasSufficientDeposit,
-      lastTransactionHash,
-      meldTransactionHash,
-      meldSettledAmount,
-    })
-  }, [
-    externalSessionId,
-    transaction,
-    isLoadingTransaction,
-    transactionError,
-    isDirectDeposit,
-    hasSufficientDeposit,
-    lastTransactionHash,
-    meldTransactionHash,
-    meldSettledAmount,
-  ])
-
   useEffect(() => {
     const completionKey = externalSessionId || quote?.intentId || "unknown"
     if (

package/src/widget/components/Pay.tsx

@@ -21,7 +21,7 @@ import { useSendForm } from "../hooks/useSendForm.js"
 import { useSwapAmount } from "../hooks/useSwapAmount.js"
 import { useSwapState } from "../hooks/useSwapState.js"
 import { useTargetAmount } from "../hooks/useTargetAmount.js"
-import { useTokenList } from "../hooks/useTokenList.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import type { BaseProps } from "../types/commonProps.js"
 import { AddressOrEnsName } from "./AddressOrEnsName.js"
 import { AddressWalletIcon } from "./AddressWalletIcon.js"
@@ -130,27 +130,11 @@ export const Pay: React.FC<PayProps> = ({
   const { trackClick } = useClickTracking()
   const paymentRequestInputRef = useRef<HTMLInputElement>(null)
 
-  // Get sorted tokens to auto-select origin and destination tokens
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: fundMethod,
-    allSupportedTokens: true, // Show all tokens for destination selection
-  })
-
-  // Get origin token balance for display
-  const originTokenBalance = useMemo(() => {
-    if (!originToken || !filteredTokensFormatted) return null
-
-    const foundToken = filteredTokensFormatted.find(
-      (token) =>
-        token.contractAddress?.toLowerCase() ===
-          originToken.contractAddress?.toLowerCase() &&
-        token.chainId === originToken.chainId,
-    )
-
-    return foundToken
-  }, [originToken, filteredTokensFormatted])
+  // Get origin token with fresh balance for display and fee option checks
+  const {
+    token: freshOriginToken,
+    isLoadingBalance: isLoadingFreshOriginBalance,
+  } = useAccountTokenBalanceOnchain(originToken, account?.address)
 
   // Calculate effective recipient for useSendForm
   const effectiveRecipient =
@@ -782,9 +766,9 @@ export const Pay: React.FC<PayProps> = ({
                         type="button"
                         className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
                         onClick={() => {
-                          if (originTokenBalance?.balanceFormatted) {
+                          if (freshOriginToken?.balanceFormatted) {
                             const balance = parseFloat(
-                              originTokenBalance.balanceFormatted,
+                              freshOriginToken.balanceFormatted,
                             )
                             if (isValidNumber(balance)) {
                               setTokenAmountForBackend(balance.toFixed(6))
@@ -794,9 +778,9 @@ export const Pay: React.FC<PayProps> = ({
                         onKeyDown={(e) => {
                           if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault()
-                            if (originTokenBalance?.balanceFormatted) {
+                            if (freshOriginToken?.balanceFormatted) {
                               const balance = parseFloat(
-                                originTokenBalance.balanceFormatted,
+                                freshOriginToken.balanceFormatted,
                               )
                               if (isValidNumber(balance)) {
                                 setTokenAmountForBackend(balance.toFixed(6))
@@ -805,26 +789,26 @@ export const Pay: React.FC<PayProps> = ({
                           }
                         }}
                         title="Click to use full balance"
-                        disabled={!originTokenBalance?.balanceFormatted}
+                        disabled={!freshOriginToken?.balanceFormatted}
                       >
                         <span translate="no">
                           Balance:{" "}
-                          {isLoadingTokens ? (
+                          {isLoadingFreshOriginBalance ? (
                             <span className="inline-block w-12 h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></span>
                           ) : (
-                            originTokenBalance?.balanceLocaleDisplay ||
-                            originTokenBalance?.balanceFormatted ||
+                            freshOriginToken?.balanceLocaleDisplay ||
+                            freshOriginToken?.balanceFormatted ||
                             ""
                           )}
                         </span>
                       </button>
 
                       {/* Percentage Buttons - Only show if toAmount is not set */}
-                      {!toAmount && originTokenBalance?.balanceFormatted && (
+                      {!toAmount && freshOriginToken?.balanceFormatted && (
                         <PercentageMaxButtons
-                          userBalance={originTokenBalance.balanceFormatted}
-                          userBalanceRaw={originTokenBalance.balance ?? "0"}
-                          decimals={originTokenBalance.decimals ?? 18}
+                          userBalance={freshOriginToken.balanceFormatted}
+                          userBalanceRaw={freshOriginToken.balance ?? "0"}
+                          decimals={freshOriginToken.decimals ?? 18}
                           isNativeToken={originToken.isNativeToken ?? false}
                           gasCostFormatted={prepareSendQuote?.gasCostFormatted}
                           chainId={originToken.chainId}
@@ -1064,7 +1048,7 @@ export const Pay: React.FC<PayProps> = ({
               originToken
                 ? {
                     originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
+                    originTokenBalance: freshOriginToken?.balance ?? "0",
                     originTokenAmount:
                       prepareSendQuote?.originAmountFormatted ?? "0",
                   }
@@ -1129,7 +1113,7 @@ export const Pay: React.FC<PayProps> = ({
               (selectedFeeOption && originToken
                 ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
                     originToken: originToken,
-                    originTokenBalance: originTokenBalance?.balance ?? "0",
+                    originTokenBalance: freshOriginToken?.balance ?? "0",
                     originTokenAmount:
                       prepareSendQuote?.originAmountFormatted ?? "0",
                   })

package/src/widget/components/PoolDeposit.tsx

@@ -11,8 +11,7 @@ import {
   generateMorphoDepositCalldata,
 } from "../../poolUtils.js"
 import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
-import { formatTvl } from "../../prices.js"
-import { formatUsdAmountLocaleDisplay } from "../../utils/format.js"
+import { formatTvl, formatUsdAmountLocaleDisplay } from "../../utils/format.js"
 import type { Token } from "../../tokens.js"
 import type { FundMethod } from "../../transactionIntent/types.js"
 import type { TransactionState } from "../../transactions.js"
@@ -26,9 +25,9 @@ import { useViewManager } from "../hooks/useViewManager.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
 import { useSendForm } from "../hooks/useSendForm.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
+import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
 import { ChainList } from "./ChainList.js"
 import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 import { EarnPools } from "./EarnPools.js"
@@ -97,24 +96,19 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   const {
     token: freshOriginToken,
     isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(originToken, account?.address)
+  } = useAccountTokenBalanceOnchain(originToken, account?.address)
 
   const { selectedPool, setSelectedPool } = useEarnPool()
 
+  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
+    useDefaultOriginToken()
+
   const [showEarnPools, setShowEarnPools] = useState(false)
   const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
   const [showOriginChainList, setShowOriginChainList] = useState(false)
   const [amount, setAmount] = useState("")
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: undefined,
-    allSupportedTokens: false,
-  })
-
   // Memoized generated calldata
   const generatedDepositCalldata = useMemo(() => {
     if (!selectedPool || !amount || !walletClient || Number(amount) <= 0) {
@@ -233,19 +227,15 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     chainId: originToken?.chainId,
   })
 
-  // Auto-select the highest USD value token as origin token
   useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingTokens &&
-      filteredTokensFormatted?.length > 0
-    ) {
-      const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
-      if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        setOriginToken(highestValueToken)
-      }
+    if (!originToken && !isLoadingOriginDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting origin token:",
+        defaultOriginToken,
+      )
+      setOriginToken(defaultOriginToken as any)
     }
-  }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
+  }, [originToken, isLoadingOriginDefaults, defaultOriginToken, setOriginToken])
 
   // Auto-focus input field on component mount
   useEffect(() => {

package/src/widget/components/PoolWithdraw.tsx

@@ -5,7 +5,6 @@ import type { Account, Chain, WalletClient } from "viem"
 import { formatUnits, parseAbi, parseUnits } from "viem"
 import { usePublicClient } from "wagmi"
 import { getChainInfo } from "../../chains.js"
-import { estimateGasCostFormatted, estimateGasLimit } from "../../estimate.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { sendOriginTransaction } from "../../intents.js"
 import { logger } from "../../logger.js"
@@ -13,8 +12,8 @@ import {
   generateAaveWithdrawCalldata,
   generateMorphoWithdrawCalldata,
 } from "../../poolUtils.js"
-import { formatTvl } from "../../prices.js"
 import {
+  formatTvl,
   formatAmount,
   formatAmountLocaleDisplay,
   formatUsdAmountLocaleDisplay,
@@ -71,23 +70,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   const [isLoadingBalance, setIsLoadingBalance] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  // Log when pool is selected
-  useEffect(() => {
-    if (selectedPool) {
-      logger.console.log("[pool-withdraw] Pool selected:", {
-        name: selectedPool.name,
-        protocol: selectedPool.protocol,
-        chainId: selectedPool.chainId,
-        depositAddress: selectedPool.depositAddress,
-        tokenAddress: selectedPool.token.address,
-        tokenSymbol: selectedPool.token.symbol,
-        tokenDecimals: selectedPool.token.decimals,
-      })
-    } else {
-      logger.console.log("[pool-withdraw] No pool selected")
-    }
-  }, [selectedPool])
-
   // Fetch aToken address for Aave pools
   useEffect(() => {
     const fetchATokenAddress = async () => {
@@ -366,15 +348,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     chainId: selectedPool?.chainId,
   })
 
-  // Log pool balance when it changes
-  useEffect(() => {
-    logger.console.log("[pool-withdraw] Pool balance updated:", {
-      poolBalance,
-      hasBalance: !!poolBalance,
-      isLoadingBalance,
-    })
-  }, [poolBalance, isLoadingBalance])
-
   // Auto-focus input field on component mount
   useEffect(() => {
     if (inputRef.current) {
@@ -390,8 +363,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
   }, [showEarnPools, onPoolSelectorStateChange])
 
-  const [gasCostFormatted, setGasCostFormatted] = useState("")
-
   // For Aave, check if wallet has enough aTokens in order to withdraw
   const [hasEnoughATokens, setHasEnoughATokens] = useState<boolean | null>(null)
   useEffect(() => {
@@ -426,38 +397,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
   }, [publicClient, selectedPool, account, amountToWithdraw])
 
-  // Estimate gas when pool selected and amount is set
-  useEffect(() => {
-    const estimateGas = async () => {
-      if (publicClient && selectedPool && amountToWithdraw) {
-        try {
-          const gasLimit = await estimateGasLimit(publicClient, {
-            account: account?.address as `0x${string}`,
-            to: selectedPool.depositAddress as `0x${string}`,
-            data: withdrawCalldata as `0x${string}`,
-            value: 0n,
-          })
-          const gasCostFormatted = await estimateGasCostFormatted(
-            publicClient,
-            gasLimit || 100_000n,
-            18,
-          )
-          setGasCostFormatted(gasCostFormatted)
-        } catch (error) {
-          logger.console.error(
-            "[pool-withdraw] ❌ Error estimating gas:",
-            error,
-          )
-        }
-      } else {
-        logger.console.error(
-          "[pool-withdraw] ❌ Error estimating gas: no public client or selected pool or amount to withdraw",
-        )
-      }
-    }
-    estimateGas()
-  }, [publicClient, selectedPool, withdrawCalldata, account, amountToWithdraw])
-
   const handleAmountChange = (value: string) => {
     setAmount(value)
     setAmountToWithdraw(value) // Sync with useSendForm for quote functionality
@@ -761,7 +700,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
                   userBalanceRaw={poolBalanceWei ?? "0"}
                   decimals={selectedPool.token.decimals ?? 18}
                   isNativeToken={false} // Pool tokens are never native tokens
-                  gasCostFormatted={gasCostFormatted}
                   chainId={selectedPool.chainId}
                   onAmountSelect={handleAmountSelect}
                   className="opacity-100"

package/src/widget/components/QRCodeWalletSelect.tsx

@@ -1,5 +1,8 @@
+import {
+  getQRCodeWallets,
+  type QRCodeWalletOption,
+} from "@0xtrails/wallet-registry"
 import type React from "react"
-import { useQRCodeWallets, type QRCodeWalletOption } from "../../wallets.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 
 interface QRCodeWalletSelectProps {
@@ -19,7 +22,7 @@ export const QRCodeWalletSelect: React.FC<QRCodeWalletSelectProps> = ({
   title = "Which wallet will scan the QR code?",
   disabled = false,
 }) => {
-  const defaultQrCodeWallets = useQRCodeWallets()
+  const defaultQrCodeWallets = getQRCodeWallets()
   const defaultWalletOptions = walletOptions || defaultQrCodeWallets
   return (
     <div className="space-y-6">