0xtrails 0.2.0 → 0.2.1

package/src/widget/components/FeeOption.tsx

@@ -0,0 +1,78 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+
+export type FeeOption = {
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  amountFormatted: string
+  amountUsdDisplay: string
+  tokenImageUrl?: string
+  notEnoughBalance?: boolean
+  chainId?: number
+}
+
+interface FeeOptionProps {
+  option: FeeOption
+  isSelected: boolean
+  onClick: () => void
+  chainId?: number
+}
+
+export const FeeOption: React.FC<FeeOptionProps> = ({
+  option,
+  isSelected,
+  onClick,
+  chainId,
+}) => {
+  return (
+    <button
+      type="button"
+      className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border transition-colors ${
+        option.notEnoughBalance
+          ? "cursor-not-allowed opacity-50 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600"
+          : isSelected
+            ? "cursor-pointer trails-bg-primary/10 border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+            : "cursor-pointer trails-bg-card trails-border-primary hover:trails-hover-bg"
+      }`}
+      onClick={option.notEnoughBalance ? undefined : onClick}
+      disabled={option.notEnoughBalance}
+    >
+      <div className="flex items-center space-x-2">
+        <TokenImage
+          imageUrl={option.tokenImageUrl}
+          symbol={option.tokenSymbol}
+          chainId={option.chainId || chainId}
+          size={16}
+        />
+        <div className="text-left">
+          <div
+            className={`text-xs font-medium ${
+              option.notEnoughBalance
+                ? "text-gray-400 dark:text-gray-500"
+                : "trails-text-primary"
+            }`}
+          >
+            {option.amountFormatted}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-right">
+        <div
+          className={`text-xs font-medium ${
+            option.notEnoughBalance
+              ? "text-gray-400 dark:text-gray-500"
+              : "trails-text-primary"
+          }`}
+        >
+          {option.amountUsdDisplay}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export default FeeOption

package/src/widget/components/FeeOptions.tsx

@@ -1,150 +1,215 @@
-import { TokenImage } from "./TokenImage.js"
 import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { formatRawAmount } from "../../tokenBalances.js"
-
-export type FeeOption = {
-  token: {
-    chainId: number
-    name: string
-    symbol: string
-    type: string
-    decimals: number
-    logoURL: string
-    contractAddress: string | null
-    tokenID: string | null
-  }
-  to: string
-  value: string
-  gasLimit: number
+import { useRef, useState } from "react"
+import { formatUsdAmountDisplay, formatRawAmount } from "../../tokenBalances.js"
+import {
+  FeeOption,
+  type FeeOption as EnhancedFeeOptionType,
+} from "./FeeOption.js"
+import { logger } from "../../logger.js"
+import { getChainInfo } from "../../chains.js"
+import { TokenImage } from "./TokenImage.js"
+import { getTokenImageUrl } from "../../tokens.js"
+import { zeroAddress } from "viem"
+
+// Original FeeOption type from useSendForm hook
+type OriginalFeeOption = {
+  tokenAddress: string
+  tokenSymbol: string
+  tokenDecimals: number
+  amount: string
+  amountUSD: number
+  notEnoughBalance?: boolean
+  tokenImageUrl?: string
+  chainId?: number
 }
 
 interface FeeOptionsProps {
-  options: FeeOption[]
-  selectedOption?: FeeOption
-  onSelect: (option: FeeOption) => void
+  feeOptions: OriginalFeeOption[]
+  selectedFeeToken: OriginalFeeOption | null
+  setSelectedFeeToken: (token: OriginalFeeOption | null) => void
+  chainId?: number
 }
 
-// Enable once we have a way to pay fees with other tokens
-const DISABLED_FEE_OPTIONS = true
-
 export const FeeOptions: React.FC<FeeOptionsProps> = ({
-  options,
-  selectedOption,
-  onSelect,
+  feeOptions,
+  selectedFeeToken,
+  setSelectedFeeToken,
+  chainId,
 }) => {
-  if (DISABLED_FEE_OPTIONS) return null
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  const formattedFeeAmount = useMemo(() => {
-    if (!selectedOption) return "0.00"
-    return formatRawAmount(selectedOption.value, selectedOption.token.decimals)
-  }, [selectedOption])
-
-  // Calculate USD value of fee
-  const feeUsdValue = useMemo(() => {
-    if (!selectedOption) return ""
-    return "" // TODO
-  }, [selectedOption])
-
-  // Set first option as default if none selected
-  useEffect(() => {
-    if (!selectedOption && options.length > 0) {
-      onSelect(options[0]!)
-    }
-  }, [selectedOption, options, onSelect])
+  const [isOpen, setIsOpen] = useState(false)
+  const accordionRef = useRef<HTMLDivElement>(null)
 
-  if (!options?.length) {
+  // Don't render if no fee options available
+  if (!feeOptions || feeOptions.length === 0) {
     return null
   }
 
+  // Enhance ALL fee options with formatted values and image URLs (including native gas)
+  const enhancedFeeOptions: EnhancedFeeOptionType[] = feeOptions.map(
+    (option) => ({
+      ...option,
+      amountFormatted: `${formatRawAmount(option.amount, option.tokenDecimals)} ${option.tokenSymbol}`,
+      amountUsdDisplay: formatUsdAmountDisplay(option.amountUSD),
+      tokenImageUrl: getTokenImageUrl({
+        chainId: option.chainId || chainId, // Use fee option's chain ID, fallback to prop
+        contractAddress: option.tokenAddress,
+        symbol: option.tokenSymbol,
+      }),
+    }),
+  )
+
+  // Find native gas option (zero address) for header display
+  const nativeGasOption = enhancedFeeOptions.find(
+    (opt) => opt.tokenAddress.toLowerCase() === zeroAddress.toLowerCase(),
+  )
+
+  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
+    // Convert back to original format for the parent component
+    const originalOption: OriginalFeeOption = {
+      tokenAddress: option.tokenAddress,
+      tokenSymbol: option.tokenSymbol,
+      tokenDecimals: option.tokenDecimals,
+      amount: option.amount,
+      amountUSD: option.amountUSD,
+    }
+
+    // For native gas (zero address), set to null to trigger non-gasless flow
+    if (option.tokenAddress.toLowerCase() === zeroAddress.toLowerCase()) {
+      setSelectedFeeToken(null)
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] Selected native gas fee option",
+      )
+    } else {
+      setSelectedFeeToken(originalOption)
+      logger.console.log(
+        "[trails-sdk] [FEE-SELECT] Selected ERC20 fee option:",
+        originalOption,
+      )
+    }
+
+    setIsOpen(false)
+  }
+
+  // Get display text and image for selected option
+  const getSelectedDisplayText = () => {
+    if (
+      selectedFeeToken === null ||
+      selectedFeeToken?.tokenAddress?.toLowerCase() ===
+        zeroAddress.toLowerCase()
+    ) {
+      // Native gas selected - use native gas option data
+      const nativeSymbol =
+        nativeGasOption?.tokenSymbol ||
+        (chainId ? getNativeSymbol(chainId) : "ETH")
+      const nativeImageUrl = getTokenImageUrl({
+        chainId,
+        contractAddress: zeroAddress,
+        symbol: nativeSymbol,
+      })
+      const amountDisplay = nativeGasOption
+        ? `${formatRawAmount(nativeGasOption.amount, nativeGasOption.tokenDecimals)} ${nativeGasOption.tokenSymbol}`
+        : ""
+      const usdDisplay = nativeGasOption
+        ? formatUsdAmountDisplay(nativeGasOption.amountUSD)
+        : ""
+      return {
+        title: nativeSymbol,
+        amountDisplay,
+        usdDisplay,
+        symbol: nativeSymbol,
+        imageUrl: nativeImageUrl,
+      }
+    } else {
+      const tokenImageUrl = getTokenImageUrl({
+        chainId: selectedFeeToken.chainId || chainId, // Use fee token's chain ID, fallback to prop
+        contractAddress: selectedFeeToken.tokenAddress,
+        symbol: selectedFeeToken.tokenSymbol,
+      })
+      const amountDisplay = `${formatRawAmount(selectedFeeToken.amount, selectedFeeToken.tokenDecimals)} ${selectedFeeToken.tokenSymbol}`
+      const usdDisplay = formatUsdAmountDisplay(selectedFeeToken.amountUSD)
+      return {
+        title: selectedFeeToken.tokenSymbol,
+        amountDisplay,
+        usdDisplay,
+        symbol: selectedFeeToken.tokenSymbol,
+        imageUrl: tokenImageUrl,
+      }
+    }
+  }
+
+  // Helper function to get native symbol for a chain
+  const getNativeSymbol = (chainId: number) => {
+    const chainInfo = getChainInfo(chainId)
+    return chainInfo?.nativeCurrency.symbol || "ETH"
+  }
+
+  const selectedDisplay = getSelectedDisplayText()
+
   return (
-    <div className="space-y-1" ref={dropdownRef}>
-      <div className="flex items-center justify-between">
-        <div className="block text-xs font-medium text-gray-700 dark:text-gray-300">
-          Pay fee with
-        </div>
-        {selectedOption && (
-          <div className="text-xs text-gray-500 dark:text-gray-400">
-            Fee {formattedFeeAmount} {selectedOption.token.symbol}
-            <div>
-              {feeUsdValue && (
-                <span className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-                  ≈ {feeUsdValue}
-                </span>
-              )}
-            </div>
+    <div className="space-y-1" ref={accordionRef}>
+      <div className="p-2">
+        <div className="flex justify-between items-center mb-2">
+          <div className="text-xs font-medium trails-text-primary">
+            Gas Fee Options
           </div>
-        )}
-      </div>
-      <div className="relative flex justify-start">
+          <div className="text-xs trails-text-muted">
+            Choose how to pay for gas for transfer
+          </div>
+        </div>
+
+        {/* Accordion Header */}
         <button
           type="button"
-          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-          className="w-32 flex items-center px-3 py-2 border border-solid trails-border-radius-container hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white border-gray-300 text-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between p-1.5 trails-border-radius-input border trails-border-primary hover:trails-hover-bg transition-colors cursor-pointer"
         >
-          {selectedOption ? (
-            <>
-              <TokenImage
-                symbol={selectedOption.token.symbol}
-                imageUrl={selectedOption.token.logoURL}
-                size={16}
-              />
-              <span className="ml-1.5 flex-1 text-left">
-                {selectedOption.token.symbol}
-              </span>
-            </>
-          ) : (
-            <span className="flex-1 text-left text-gray-400">
-              Select Fee Token
-            </span>
-          )}
-          <ChevronDown
-            className={`h-4 w-4 ${
-              isDropdownOpen ? "transform rotate-180" : ""
-            }`}
-          />
+          <div className="flex items-center space-x-2">
+            <TokenImage
+              imageUrl={selectedDisplay.imageUrl}
+              symbol={selectedDisplay.symbol}
+              chainId={selectedFeeToken?.chainId || chainId}
+              size={16}
+            />
+            <div className="text-left">
+              <div className="text-xs font-medium trails-text-primary">
+                {selectedDisplay.amountDisplay}
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="text-right">
+              <div className="text-xs font-medium trails-text-primary">
+                {selectedDisplay.usdDisplay}
+              </div>
+            </div>
+            <ChevronDown
+              className={`w-3 h-3 trails-text-muted transition-transform ${
+                isOpen ? "transform rotate-180" : ""
+              }`}
+            />
+          </div>
         </button>
 
-        {isDropdownOpen && (
-          <div className="absolute z-10 mt-1 border border-solid trails-border-radius-container shadow-lg w-32 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-            {options.map((option) => (
-              <button
-                key={option.token.symbol}
-                type="button"
-                onClick={() => {
-                  console.log("[trails] selected fee option", option)
-                  onSelect(option)
-                  setIsDropdownOpen(false)
-                }}
-                className={`w-full flex items-center px-3 py-2 cursor-pointer text-sm ${
-                  selectedOption?.token.symbol === option.token.symbol
-                    ? "bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-white"
-                    : "text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg"
-                }`}
-              >
-                <div
-                  className={`w-4 h-4 rounded-full flex items-center justify-center ${
-                    selectedOption?.token.symbol === option.token.symbol
-                      ? "bg-gray-200 dark:bg-gray-700"
-                      : "bg-gray-100 dark:bg-gray-600"
-                  }`}
-                >
-                  <TokenImage
-                    symbol={option.token.symbol}
-                    imageUrl={option.token.logoURL}
-                    size={16}
-                  />
-                </div>
-                <span className="ml-1.5">{option.token.symbol}</span>
-                {selectedOption?.token.symbol === option.token.symbol && (
-                  <span className="ml-auto text-gray-900 dark:text-white">
-                    •
-                  </span>
-                )}
-              </button>
+        {/* Accordion Content */}
+        {isOpen && (
+          <div className="mt-2 space-y-1">
+            {/* All Fee Options (including native gas) */}
+            {enhancedFeeOptions.map((option, index) => (
+              <FeeOption
+                key={`${option.tokenAddress}-${index}`}
+                option={option}
+                isSelected={
+                  option.tokenAddress.toLowerCase() ===
+                  zeroAddress.toLowerCase()
+                    ? selectedFeeToken === null ||
+                      selectedFeeToken?.tokenAddress?.toLowerCase() ===
+                        zeroAddress.toLowerCase()
+                    : selectedFeeToken?.tokenAddress === option.tokenAddress
+                }
+                onClick={() => handleFeeTokenSelect(option)}
+                chainId={option.chainId || chainId}
+              />
             ))}
           </div>
         )}

package/src/widget/components/Fund.tsx

@@ -21,6 +21,7 @@ import { useMode } from "../hooks/useMode.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
 import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
+import { useTargetAmount } from "../hooks/useTargetAmount.js"
 import { TokenImage } from "./TokenImage.js"
 import { Identicon } from "./Identicon.js"
 import { TokenSelector } from "./TokenSelector.js"
@@ -29,8 +30,6 @@ import { ChainList } from "./ChainList.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { ErrorDisplay } from "./ErrorDisplay.js"
 import { getChainInfo } from "../../chains.js"
-import { formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import { truncateAddress } from "../../utils.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
@@ -108,6 +107,7 @@ export const Fund: React.FC<FundProps> = ({
   const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
   const { amount: globalAmount, setAmount: setGlobalAmount } = useSwapAmount()
   const { setCurrentScreen } = useCurrentScreen()
+  const { targetAmountUsd } = useTargetAmount()
 
   // Use new default token selection hook
   const {
@@ -639,6 +639,7 @@ export const Fund: React.FC<FundProps> = ({
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
+          targetAmountUsd={targetAmountUsd}
           onError={onError}
           fundMethod={fundMethod}
           showContinueButton={false}
@@ -665,6 +666,9 @@ export const Fund: React.FC<FundProps> = ({
             setShowOriginTokenSelector(false)
             setShowOriginChainList(true)
           }}
+          onNavigateToFundMethods={() => {
+            setCurrentScreen("fund-methods")
+          }}
         />
       </div>
     )
@@ -682,6 +686,7 @@ export const Fund: React.FC<FundProps> = ({
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
+          targetAmountUsd={targetAmountUsd}
           onError={onError}
           fundMethod={fundMethod}
           showContinueButton={false}
@@ -767,6 +772,13 @@ export const Fund: React.FC<FundProps> = ({
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-medium trails-text-secondary text-left">
               Deposit
+              {fundMethod === "qr-code" ? (
+                <span className="text-xs"> with QR Code</span>
+              ) : fundMethod === "exchange" ? (
+                <span className="text-xs"> with Exchange</span>
+              ) : (
+                ""
+              )}
             </div>
 
             {/* Percentage Buttons */}
@@ -807,7 +819,10 @@ export const Fund: React.FC<FundProps> = ({
           <div className="flex items-center space-x-2">
             {/* Amount Input */}
             <div className="flex-1">
-              <div className="flex items-center justify-start">
+              <div
+                className="flex items-center justify-start cursor-text"
+                onClick={() => inputRef.current?.focus()}
+              >
                 <div className="flex items-center">
                   <input
                     ref={inputRef}
@@ -1166,30 +1181,6 @@ export const Fund: React.FC<FundProps> = ({
             </p>
           </div>
         </div>
-      ) : prepareSendQuote?.minimumNotMet ? (
-        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-          <div className="flex items-center space-x-2">
-            <svg
-              className="w-4 h-4 text-amber-500 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-              />
-            </svg>
-            <p className="text-sm text-amber-600 dark:text-amber-400">
-              Please enter an amount above{" "}
-              {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
-              transfer may fail
-            </p>
-          </div>
-        </div>
       ) : null}
 
       {/* Fund Button */}

package/src/widget/components/FundMethods.tsx

@@ -10,7 +10,7 @@ import { ScreenHeader } from "./ScreenHeader.js"
 export interface FundMethodsProps {
   onBack?: () => void
   onSelectWalletConnect: () => void
-  onSelectExchange: () => void
+  onSelectExchangeList: () => void
   onSelectConnectedAccount: () => void
   onSelectQrCode: () => void
 }
@@ -18,7 +18,7 @@ export interface FundMethodsProps {
 const FundMethods: React.FC<FundMethodsProps> = ({
   onBack,
   onSelectWalletConnect,
-  onSelectExchange,
+  onSelectExchangeList,
   onSelectConnectedAccount,
   onSelectQrCode,
 }) => {
@@ -158,7 +158,7 @@ const FundMethods: React.FC<FundMethodsProps> = ({
 
           <button
             type="button"
-            onClick={onSelectExchange}
+            onClick={onSelectExchangeList}
             className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
           >
             <div className="flex items-center space-x-3 flex-1">

package/src/widget/components/FundSendForm.tsx

@@ -20,7 +20,6 @@ import { ErrorDisplay } from "./ErrorDisplay.js"
 import { useMode } from "../hooks/useMode.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import { logger } from "../../logger.js"
-import { FeeOptions } from "./FeeOptions.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 
 interface FundSendFormProps {
@@ -138,9 +137,6 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     quoteErrorPrettified,
     isSameTokenWithoutCustomCalldata,
     destinationTokenAddress,
-    feeOptions,
-    selectedFeeToken,
-    setSelectedFeeToken,
     isRecipientContract,
   } = useSendForm({
     account,
@@ -825,13 +821,6 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           chainId={selectedDestinationChain.id}
         /> */}
 
-        {/* Fee Options */}
-        <FeeOptions
-          options={feeOptions}
-          selectedOption={selectedFeeToken ?? undefined}
-          onSelect={setSelectedFeeToken}
-        />
-
         {/* Warning Messages - Show only one at a time */}
         {isSameTokenWithoutCustomCalldata ? (
           <ErrorDisplay
@@ -867,28 +856,6 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
               </p>
             </div>
           </div>
-        ) : prepareSendQuote?.minimumNotMet ? (
-          <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
-            <div className="flex items-center space-x-2">
-              <svg
-                className="w-4 h-4 text-amber-500 flex-shrink-0"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
-                />
-              </svg>
-              <p className="text-sm text-amber-600 dark:text-amber-400">
-                Please enter an amount above $0.15 otherwise transfer may fail
-              </p>
-            </div>
-          </div>
         ) : null}
 
         {/* Continue Button */}

package/src/widget/components/MeshConnectExchanges.tsx

@@ -11,16 +11,26 @@ import BinanceLogo from "../assets/Binance_Icon_Logo.svg"
 import CoinbaseLogo from "../assets/Coinbase_Icon_Logo.svg"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { logger } from "../../logger.js"
+import { useSelectedMeshExchange } from "../hooks/useSelectedMeshExchange.js"
+import { useMode } from "../hooks/useMode.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import type { Mode } from "../../mode.js"
+import type { Screen } from "../hooks/useCurrentScreen.js"
 
 export interface MeshConnectExchangesProps {
-  onBack: () => void
-  onSelectExchange: (integrationId: string, exchangeName: string) => void
+  onBack?: () => void
+  onSelectExchange?: (integrationId: string, exchangeName: string) => void
+  getInitialScreenForMode?: (mode: Mode) => Screen
 }
 
 export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
   onBack,
   onSelectExchange,
+  getInitialScreenForMode,
 }) => {
+  const { setSelectedExchange } = useSelectedMeshExchange()
+  const { mode } = useMode()
+  const { setCurrentScreen } = useCurrentScreen()
   const [coinbaseId, setCoinbaseId] = useState<string | null>(null)
   const [binanceId, setBinanceId] = useState<string | null>(null)
   const [bitfinexId, setBitfinexId] = useState<string | null>(null)
@@ -73,7 +83,26 @@ export const MeshConnectExchanges: React.FC<MeshConnectExchangesProps> = ({
     logger.console.log(
       `[trails-sdk] Selected exchange: ${exchangeName} (${integrationId})`,
     )
-    onSelectExchange(integrationId, exchangeName)
+
+    // If a callback is provided (MeshConnectFlow), use it
+    if (onSelectExchange) {
+      onSelectExchange(integrationId, exchangeName)
+      return
+    }
+
+    // Otherwise, use the hook-based approach (main widget flow)
+    // Store the selected exchange
+    setSelectedExchange({ integrationId, exchangeName })
+
+    // Navigate to the initial screen for the current mode
+    if (getInitialScreenForMode) {
+      const currentMode = (mode || "pay") as Mode
+      const initialScreen = getInitialScreenForMode(currentMode)
+      logger.console.log(
+        `[trails-sdk] Navigating to initial screen for mode ${currentMode}: ${initialScreen}`,
+      )
+      setCurrentScreen(initialScreen)
+    }
   }
 
   if (loading) {