0xtrails 0.2.5 → 0.3.0

package/src/widget/components/FeeBreakdown.tsx

@@ -0,0 +1,155 @@
+import type React from "react"
+import { useState } from "react"
+import { InfoIcon } from "@0xsequence/design-system"
+import { Tooltip } from "./Tooltip.js"
+import { TokenImage } from "./TokenImage.js"
+import type { TrailsFeeBreakdown, FeeItem } from "../../fees.js"
+
+interface FeeBreakdownProps {
+  feeBreakdown: TrailsFeeBreakdown
+  children?: React.ReactNode
+}
+
+interface FeeRowProps {
+  label: string
+  feeItem: FeeItem
+  tooltip?: string
+}
+
+const FeeRow: React.FC<FeeRowProps> = ({ label, feeItem, tooltip }) => (
+  <div className="flex justify-between items-center py-1 items-start">
+    <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+      {label}
+      {tooltip && (
+        <Tooltip message={tooltip}>
+          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+        </Tooltip>
+      )}
+    </span>
+    <div className="text-right">
+      <div className="font-medium text-xs text-gray-900 dark:text-white flex items-center gap-1 justify-end">
+        <TokenImage
+          imageUrl=""
+          symbol={feeItem.tokenSymbol}
+          chainId={feeItem.chainId}
+          contractAddress={feeItem.tokenAddress}
+          size={16}
+        />
+        {feeItem.amount} {feeItem.tokenSymbol}
+      </div>
+      <div className="text-xs text-gray-500 dark:text-gray-400">
+        ≈ {feeItem.usdValue}
+      </div>
+    </div>
+  </div>
+)
+
+export const FeeBreakdown: React.FC<FeeBreakdownProps> = ({
+  feeBreakdown,
+  children,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // Don't render at all if there are no fees
+  const hasAnyFees =
+    feeBreakdown.originRelayFee ||
+    feeBreakdown.destinationRelayFee ||
+    feeBreakdown.providerFee ||
+    feeBreakdown.trailsFee
+
+  if (!hasAnyFees) {
+    return null
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Accordion header */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between py-1 text-xs transition-colors duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer"
+        aria-label={isExpanded ? "Hide fee breakdown" : "Show fee breakdown"}
+      >
+        <span className="flex items-center gap-1 w-full">
+          {children ? (
+            children
+          ) : (
+            <Tooltip message="Detailed breakdown of the Trails platform fees">
+              <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+            </Tooltip>
+          )}
+        </span>
+        <svg
+          className={`w-3 h-3 transition-transform duration-300 ease-out ml-2 ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {/* Collapsible content */}
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-out ${
+          isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="space-y-1 pl-2">
+          {feeBreakdown.originRelayFee && (
+            <FeeRow
+              label="Origin Relay Fee"
+              feeItem={feeBreakdown.originRelayFee}
+              tooltip="Fee for relaying the origin chain transaction"
+            />
+          )}
+          {feeBreakdown.destinationRelayFee && (
+            <FeeRow
+              label="Destination Relay Fee"
+              feeItem={feeBreakdown.destinationRelayFee}
+              tooltip="Fee for relaying the destination chain transaction"
+            />
+          )}
+          {feeBreakdown.providerFee && (
+            <FeeRow
+              label="Liquidity Provider Fee"
+              feeItem={feeBreakdown.providerFee}
+              tooltip="Fee charged by the bridge/swap liquidity provider for executing the transaction"
+            />
+          )}
+          {feeBreakdown.trailsFee && (
+            <FeeRow
+              label="Trails Platform Fee"
+              feeItem={feeBreakdown.trailsFee}
+              tooltip="Platform fee for using the Trails service"
+            />
+          )}
+
+          {/* Total line - only show if we have a total value */}
+          {/* {feeBreakdown.totalUsdValue && (
+            <div className="flex justify-between items-center py-1 pt-2 border-t border-gray-200 dark:border-gray-700">
+              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">
+                Total Fees
+              </span>
+              <div className="text-right">
+                <div className="font-medium text-xs text-gray-900 dark:text-white">
+                  ~{feeBreakdown.totalUsdValue}
+                </div>
+              </div>
+            </div>
+          )} */}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FeeBreakdown

package/src/widget/components/FeeOption.tsx

@@ -47,7 +47,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
           chainId={option.chainId || chainId}
           size={16}
         />
-        <div className="text-left">
+        <div className="ml-2 text-left">
           <div
             className={`text-xs font-medium ${
               option.notEnoughBalance
@@ -68,7 +68,7 @@ export const FeeOption: React.FC<FeeOptionProps> = ({
               : "trails-text-primary"
           }`}
         >
-          {option.amountUsdDisplay}
+          ≈ {option.amountUsdDisplay}
         </div>
       </div>
     </button>

package/src/widget/components/FeeOptions.tsx

@@ -1,34 +1,76 @@
 import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useRef, useState } from "react"
+import { useRef, useState, useEffect } 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
+import { TokenImage } from "./TokenImage.js"
+import { ethAddress, zeroAddress } from "viem"
+import type { FeeOption as APIFeeOption } from "../../widget/hooks/useSelectedFeeToken.js"
+
+const ZERO_ADDRESS = zeroAddress.toLowerCase()
+const ETH_ADDRESS = ethAddress.toLowerCase()
+
+const normalizeAddress = (address?: string | null): string =>
+  (address ?? "").toLowerCase()
+
+const isNativeTokenAddress = (address?: string | null): boolean => {
+  const normalized = normalizeAddress(address)
+  return normalized === ZERO_ADDRESS || normalized === ETH_ADDRESS
+}
+
+const safeFormatAmountWithSymbol = (option: APIFeeOption): string => {
+  const tokenDecimals =
+    typeof option.tokenDecimals === "number" &&
+    option.tokenDecimals > 0 &&
+    option.tokenDecimals <= 18
+      ? option.tokenDecimals
+      : isNativeTokenAddress(option.tokenAddress)
+        ? 18
+        : undefined
+
+  if (tokenDecimals === undefined) {
+    logger.console.warn("[trails-sdk] [FEE-OPTIONS] Missing token decimals", {
+      tokenAddress: option.tokenAddress,
+      tokenSymbol: option.tokenSymbol,
+    })
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+
+  try {
+    const formattedAmount = formatRawAmount(option.amount, tokenDecimals)
+    return option.tokenSymbol
+      ? `${formattedAmount} ${option.tokenSymbol}`
+      : formattedAmount
+  } catch (error) {
+    logger.console.warn(
+      "[trails-sdk] [FEE-OPTIONS] Failed to format fee option amount",
+      {
+        option,
+        tokenDecimals,
+        error,
+      },
+    )
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+}
+
+const safeFormatUsdDisplay = (option: APIFeeOption): string => {
+  const usdValue =
+    (option as { amountUsd?: number }).amountUsd ?? option.amountUSD ?? 0
+  return formatUsdAmountDisplay(usdValue)
 }
 
 interface FeeOptionsProps {
-  feeOptions: OriginalFeeOption[]
-  selectedFeeToken: OriginalFeeOption | null
-  setSelectedFeeToken: (token: OriginalFeeOption | null) => void
+  feeOptions: APIFeeOption[]
+  selectedFeeToken: APIFeeOption | null
+  setSelectedFeeToken: (token: APIFeeOption | null) => void
   chainId?: number
+  isRefetching?: boolean // When true, the fee quote is stale and being refreshed, so hide the component
 }
 
 export const FeeOptions: React.FC<FeeOptionsProps> = ({
@@ -36,23 +78,53 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   selectedFeeToken,
   setSelectedFeeToken,
   chainId,
+  isRefetching,
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
+  // Early returns BEFORE any hooks - this prevents "Rendered more hooks" error
+  // Hide component when fee quote is stale and being refreshed
+  if (isRefetching) {
+    return null
+  }
 
   // Don't render if no fee options available
   if (!feeOptions || feeOptions.length === 0) {
     return null
   }
 
+  // Check if there are non-native options before calling hooks
+  const hasNonNativeOptions = feeOptions.some(
+    (opt) => !isNativeTokenAddress(opt.tokenAddress),
+  )
+
+  // Don't render if only native token is available
+  if (!hasNonNativeOptions) {
+    return null
+  }
+
+  // NOW we can safely call hooks after all early returns
+  const [isOpen, setIsOpen] = useState(false)
+  const accordionRef = useRef<HTMLDivElement>(null)
+
+  // Clear selected fee token when feeOptions change (stale quote)
+  // This resets the user's fee selection when they pick a different token
+  // Use comprehensive key that includes token addresses and amounts
+  const feeOptionsKey = feeOptions
+    .map((opt) => `${opt.tokenAddress}-${opt.tokenSymbol}-${opt.amount}`)
+    .join("|")
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedFeeToken is stable
+  useEffect(() => {
+    setSelectedFeeToken(null)
+  }, [feeOptionsKey])
+
   // 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),
+      amountFormatted: safeFormatAmountWithSymbol(option),
+      amountUsdDisplay: safeFormatUsdDisplay(option),
       tokenImageUrl: getTokenImageUrl({
-        chainId: option.chainId || chainId, // Use fee option's chain ID, fallback to prop
+        chainId: option.chainId || chainId,
         contractAddress: option.tokenAddress,
         symbol: option.tokenSymbol,
       }),
@@ -60,92 +132,54 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   )
 
   // Find native gas option (zero address) for header display
-  const nativeGasOption = enhancedFeeOptions.find(
-    (opt) => opt.tokenAddress.toLowerCase() === zeroAddress.toLowerCase(),
+  const nativeGasOption = enhancedFeeOptions.find((opt) =>
+    isNativeTokenAddress(opt.tokenAddress),
   )
 
-  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,
+  // Find the currently selected option from enhancedFeeOptions for header display
+  const getSelectedOption = (): EnhancedFeeOptionType | undefined => {
+    if (
+      selectedFeeToken === null ||
+      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
+    ) {
+      return nativeGasOption
+    }
+
+    if (!selectedFeeToken) {
+      return undefined
     }
 
-    // For native gas (zero address), set to null to trigger non-gasless flow
-    if (option.tokenAddress.toLowerCase() === zeroAddress.toLowerCase()) {
+    const selectedAddress = normalizeAddress(selectedFeeToken.tokenAddress)
+
+    return enhancedFeeOptions.find(
+      (opt) => normalizeAddress(opt.tokenAddress) === selectedAddress,
+    )
+  }
+
+  const selectedOption = getSelectedOption()
+
+  // Use nativeGasOption as fallback when selectedOption is null/undefined
+  const displayOption = selectedOption || nativeGasOption
+
+  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
+    // For native gas (zero/ETH address), set to null to trigger non-gasless flow
+    if (isNativeTokenAddress(option.tokenAddress)) {
       setSelectedFeeToken(null)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected native gas fee option",
       )
     } else {
-      setSelectedFeeToken(originalOption)
+      // Use the option directly - it already has all required fields
+      setSelectedFeeToken(option as APIFeeOption)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected ERC20 fee option:",
-        originalOption,
+        option,
       )
     }
 
     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={accordionRef}>
       <div className="p-2">
@@ -165,24 +199,30 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
           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"
         >
           <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>
+            {displayOption && (
+              <>
+                <TokenImage
+                  imageUrl={displayOption.tokenImageUrl}
+                  symbol={displayOption.tokenSymbol}
+                  chainId={displayOption.chainId || chainId}
+                  size={16}
+                />
+                <div className="ml-2 text-left">
+                  <div className="text-xs font-medium trails-text-primary">
+                    {displayOption.amountFormatted}
+                  </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}
+            {displayOption && (
+              <div className="text-right">
+                <div className="text-xs font-medium trails-text-primary">
+                  ≈ {displayOption.amountUsdDisplay}
+                </div>
               </div>
-            </div>
+            )}
             <ChevronDown
               className={`w-3 h-3 trails-text-muted transition-transform ${
                 isOpen ? "transform rotate-180" : ""
@@ -200,12 +240,11 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
                 key={`${option.tokenAddress}-${index}`}
                 option={option}
                 isSelected={
-                  option.tokenAddress.toLowerCase() ===
-                  zeroAddress.toLowerCase()
+                  isNativeTokenAddress(option.tokenAddress)
                     ? selectedFeeToken === null ||
-                      selectedFeeToken?.tokenAddress?.toLowerCase() ===
-                        zeroAddress.toLowerCase()
-                    : selectedFeeToken?.tokenAddress === option.tokenAddress
+                      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
+                    : normalizeAddress(selectedFeeToken?.tokenAddress) ===
+                      normalizeAddress(option.tokenAddress)
                 }
                 onClick={() => handleFeeTokenSelect(option)}
                 chainId={option.chainId || chainId}

package/src/widget/components/Fund.tsx

@@ -32,11 +32,12 @@ import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { TokenSelectorButton } from "./TokenSelectorButton.js"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 
 interface FundProps {
   onBack?: () => void
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -44,7 +45,6 @@ interface FundProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
@@ -80,7 +80,6 @@ export const Fund: React.FC<FundProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
@@ -151,7 +150,7 @@ export const Fund: React.FC<FundProps> = ({
   } = useSendForm({
     account,
     toAmount: undefined, // Don't pass toAmount for fund form - user enters input amount
-    toRecipient: selectedRecipient || account.address,
+    toRecipient: selectedRecipient || account?.address,
     toChainId,
     toToken,
     toCalldata,
@@ -160,7 +159,6 @@ export const Fund: React.FC<FundProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
     onConfirm,
     onComplete,
     onSend,
@@ -521,27 +519,10 @@ export const Fund: React.FC<FundProps> = ({
   }, [tokenAmountForBackend, isInputTypeUsd, sourceTokenPrice])
 
   // Dynamic font size based on input length - matching Earn.tsx
-  const inputStyles = useMemo(() => {
-    const inputLength = displayAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "0.875rem"
-    } else if (inputLength > 9) {
-      fontSize = "1rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.125rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.25rem"
-    } else {
-      fontSize = "1.5rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [displayAmount.length])
+  const inputStyles = useDynamicInputStyles({
+    inputValue: displayAmount,
+    variant: "smaller",
+  })
 
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
@@ -839,7 +820,7 @@ export const Fund: React.FC<FundProps> = ({
           {/* Bottom Info Row */}
           <div className="mt-2 flex justify-between items-center">
             {/* USD Amount */}
-            <div className="text-xs trails-text-muted">
+            <div className="text-xs text-gray-500 dark:text-gray-400">
               {originToken?.symbol && displayAmount ? (
                 <>≈ {amountUsdDisplay || "$0.00"}</>
               ) : (
@@ -852,7 +833,7 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 <button
                   type="button"
-                  className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
+                  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={() => handlePercentageClick(100)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {

package/src/widget/components/FundMethods.tsx

@@ -1,5 +1,5 @@
 import type React from "react"
-import { QrCode, Send, ChevronRight } from "lucide-react"
+import { QrCode, ArrowLeftRight, ChevronRight } from "lucide-react"
 import { useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { ConnectedWallets } from "./ConnectedWallets.js"
@@ -103,10 +103,11 @@ const FundMethods: React.FC<FundMethodsProps> = ({
             <button
               type="button"
               onClick={onSelectExchangeList}
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+              disabled
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-not-allowed transition-colors opacity-50"
             >
               <div className="flex items-center gap-3">
-                <Send className="w-4 h-4" />
+                <ArrowLeftRight className="w-4 h-4" />
                 <span className="text-sm font-bold">Send from Exchange</span>
               </div>
               <ChevronRight className="w-5 h-5 text-gray-400" />

package/src/widget/components/FundSwap.tsx

@@ -13,18 +13,17 @@ interface FundProps {
   onBack?: () => void
   onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  account: Account
+  account?: Account
   toRecipient?: string
   toAmount?: string
   toChainId?: number
   toToken?: string
   toCalldata?: string
-  walletClient: WalletClient
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string