0xtrails 0.6.3 → 0.6.5

package/src/widget/components/FeeOptions.tsx

@@ -6,7 +6,10 @@ import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 import { logger } from "../../logger.js"
 import type { FeeOption } from "@0xsequence/trails-api"
-import { FeeOption as FeeOptionComponent } from "./FeeOption.js"
+import {
+  FeeOption as FeeOptionComponent,
+  isFeeOptionDisabled,
+} from "./FeeOption.js"
 import { isNativeToken, normalizeAddress } from "../../utils.js"
 import type { Token } from "../hooks/useOriginSelectedToken.js"
 
@@ -90,7 +93,11 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   const selectedOption = getSelectedOption()
 
   // Use nativeGasOption as fallback when selectedOption is null/undefined
-  const displayOption = selectedOption || nativeGasOption
+  const displayOption = selectedOption
+    ? isFeeOptionDisabled(selectedOption as ProcessedFeeOption, originTokenInfo)
+      ? nativeGasOption
+      : selectedOption
+    : nativeGasOption
 
   const handleFeeOptionSelect = (option: FeeOption) => {
     // For native gas (zero/ETH address), set to null to trigger non-gasless flow
@@ -111,6 +118,35 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
     setIsOpen(false)
   }
 
+  if (processedFeeOptions.length === 1 && selectedOption) {
+    return (
+      <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 Option
+            </div>
+          </div>
+          <div className="mt-2 space-y-1">
+            <FeeOptionComponent
+              key={`${selectedOption?.tokenAddress}-0`}
+              option={selectedOption as ProcessedFeeOption}
+              isSelected={
+                isNativeToken(selectedOption?.tokenAddress)
+                  ? selectedFeeOption === null ||
+                    isNativeToken(selectedFeeOption?.tokenAddress)
+                  : normalizeAddress(selectedFeeOption?.tokenAddress) ===
+                    normalizeAddress(selectedOption?.tokenAddress)
+              }
+              chainId={selectedOption?.chainId || chainId}
+              originTokenInfo={originTokenInfo}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-1" ref={accordionRef}>
       <div className="p-2">
@@ -126,8 +162,17 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
         {/* Accordion Header */}
         <button
           type="button"
-          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"
+          onClick={
+            processedFeeOptions.length === 1
+              ? undefined
+              : () => setIsOpen(!isOpen)
+          }
+          disabled={processedFeeOptions.length === 1}
+          className={`w-full flex items-center justify-between p-1.5 trails-border-radius-input border trails-border-primary transition-colors ${
+            processedFeeOptions.length === 1
+              ? "cursor-default"
+              : "hover:trails-hover-bg cursor-pointer"
+          }`}
         >
           <div className="flex items-center space-x-2">
             {displayOption && (
@@ -154,16 +199,18 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
                 </div>
               </div>
             )}
-            <ChevronDown
-              className={`w-3 h-3 trails-text-muted transition-transform ${
-                isOpen ? "transform rotate-180" : ""
-              }`}
-            />
+            {processedFeeOptions.length > 1 && (
+              <ChevronDown
+                className={`w-3 h-3 trails-text-muted transition-transform ${
+                  isOpen ? "transform rotate-180" : ""
+                }`}
+              />
+            )}
           </div>
         </button>
 
         {/* Accordion Content */}
-        {isOpen && (
+        {isOpen && processedFeeOptions.length > 1 && (
           <div className="mt-2 space-y-1">
             {/* All Fee Options (including native gas) */}
             {processedFeeOptions.map((option, index) => (

package/src/widget/components/Fund.tsx

@@ -142,7 +142,6 @@ export const Fund: React.FC<FundProps> = ({
     setSelectedDestinationChain,
     quoteError,
     quoteErrorPrettified,
-    isSameTokenWithoutCustomCalldata,
     destinationTokenAddress,
     isValidCustomToken,
     isSenderContractOnOrigin,
@@ -1149,7 +1148,6 @@ export const Fund: React.FC<FundProps> = ({
             !destinationTokenAddress ||
             !isValidCustomToken ||
             prepareSendQuote?.noSufficientBalance ||
-            isSameTokenWithoutCustomCalldata ||
             !prepareSendQuote
           }
           className="w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative"
@@ -1159,8 +1157,6 @@ export const Fund: React.FC<FundProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2" />
               <span>{buttonText}</span>
             </div>
-          ) : isSameTokenWithoutCustomCalldata ? (
-            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : !selectedRecipient ? (

package/src/widget/components/Pay.tsx

@@ -38,6 +38,8 @@ import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { isFeeOptionDisabled } from "./FeeOption.js"
+import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
 
 interface PayProps {
   selectedToken?: any // Origin token (optional - user can select)
@@ -1019,18 +1021,23 @@ export const Pay: React.FC<PayProps> = ({
       ) : null}
 
       {/* Fee Options */}
-      {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
+      {fundMethod !== "qr-code" && fundMethod !== "exchange" && originToken && (
         <FeeOptions
           processedFeeOptions={processedFeeOptions}
           selectedFeeOption={selectedFeeOption}
           setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
-          chainId={originToken?.chainId}
+          chainId={originToken.chainId}
           isRefetching={isLoadingQuote}
-          originTokenInfo={{
-            originToken: originToken!,
-            originTokenBalance: originToken?.balance ?? "0",
-            originTokenAmount: tokenAmountForBackend ?? "0",
-          }}
+          originTokenInfo={
+            originToken
+              ? {
+                  originToken,
+                  originTokenBalance: originToken.balance ?? "0",
+                  originTokenAmount:
+                    prepareSendQuote?.originAmountFormatted ?? "0",
+                }
+              : undefined
+          }
         />
       )}
 
@@ -1058,7 +1065,15 @@ export const Pay: React.FC<PayProps> = ({
             !destinationTokenAddress ||
             !isValidCustomToken ||
             prepareSendQuote?.noSufficientBalance ||
-            !prepareSendQuote
+            !prepareSendQuote ||
+            selectedFeeOption
+              ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
+                  originToken: originToken,
+                  originTokenBalance: originToken?.balance ?? "0",
+                  originTokenAmount:
+                    prepareSendQuote?.originAmountFormatted ?? "0",
+                })
+              : false
           }
           className="w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative"
         >

package/src/widget/components/PoolDeposit.tsx

@@ -40,6 +40,8 @@ import { generateAaveDepositCalldata } from "../../aave.js"
 import { generateMorphoDepositCalldata } from "../../morpho.js"
 import { TRAILS_ROUTER_PLACEHOLDER_AMOUNT } from "../../trailsRouter.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
+import { isFeeOptionDisabled } from "./FeeOption.js"
 
 interface PoolDepositProps {
   account?: Account
@@ -626,7 +628,14 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
             !selectedPool ||
             isLoadingQuote ||
             !prepareSendQuote ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            selectedFeeOption
+              ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
+                  originToken: originToken!,
+                  originTokenBalance: originToken?.balance ?? "0",
+                  originTokenAmount: amount ?? "0",
+                })
+              : false
           }
           className={`w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative`}
         >

package/src/widget/hooks/useQuote.ts

@@ -72,6 +72,7 @@ export type UseQuoteProps = {
   abortSignal?: AbortSignal
   apiKey?: string | null
   nodeGatewayEnv?: "prod" | "dev" | "local" | "cors-anywhere"
+  isSmartWallet?: boolean | null
 }
 
 export type SwapReturn = {
@@ -149,6 +150,7 @@ export function useQuote({
   nodeGatewayEnv,
   abortSignal: externalAbortSignal,
   apiKey,
+  isSmartWallet,
 }: Partial<UseQuoteProps> = {}): UseQuoteReturn {
   // Set node gateway environment override for this quote session
   if (nodeGatewayEnv) {
@@ -212,6 +214,7 @@ export function useQuote({
       slippageTolerance,
       quoteProvider,
       apiKey,
+      isSmartWallet,
     ],
     queryFn: async () => {
       try {
@@ -467,6 +470,7 @@ export function useQuote({
           sequenceProjectAccessKey,
           originPublicClient: originPublicClient ?? undefined,
           destinationPublicClient: destinationPublicClient ?? undefined,
+          isSmartWallet: isSmartWallet ?? undefined,
         }
 
         logger.console.log("[trails-sdk] options", options)

package/src/widget/hooks/useSendForm.ts

@@ -50,6 +50,7 @@ import {
   useSelectedFeeOption,
   type ProcessedFeeOption,
 } from "./useSelectedFeeOption.js"
+import { useWidgetProps } from "./useWidgetProps.js"
 
 export interface Token {
   id: number
@@ -170,7 +171,6 @@ export type UseSendReturn = {
   toAmountDisplay: string
   quoteError: string | null
   quoteErrorPrettified: string | null
-  isSameTokenWithoutCustomCalldata: boolean
   isRecipientContract: boolean
   isSenderContractOnOrigin: boolean
   isSenderContractOnDestination: boolean
@@ -206,6 +206,9 @@ export function useSendForm({
   const { connector } = useAccount()
   const walletId = connector?.id
 
+  // Read isSmartWallet from widget props
+  const { isSmartWallet } = useWidgetProps()
+
   // Auto-set quoteProvider to "lifi" if either from or to chain is etherlink
   const effectiveQuoteProvider = useMemo(() => {
     if (!quoteProvider || quoteProvider === "auto") {
@@ -742,6 +745,67 @@ export function useSendForm({
 
   // Get quote automatically when inputs change
   const getQuote = useCallback(async () => {
+    // Debug log: comprehensive state check
+    const debugState = {
+      account: account ? { address: account.address } : null,
+      amount,
+      amountRaw,
+      destinationTokenAddress,
+      destinationTokenAddressFromTokenSymbol,
+      isValidRecipient,
+      selectedDestToken: selectedDestToken
+        ? {
+            symbol: selectedDestToken.symbol,
+            name: selectedDestToken.name,
+            decimals: selectedDestToken.decimals,
+          }
+        : null,
+      selectedDestinationChain: selectedDestinationChain
+        ? {
+            id: selectedDestinationChain.id,
+            name: selectedDestinationChain.name,
+          }
+        : null,
+      selectedToken: selectedToken
+        ? {
+            symbol: selectedToken.symbol,
+            contractAddress: selectedToken.contractAddress,
+            chainId: selectedToken.chainId,
+            contractInfo: selectedToken.contractInfo,
+          }
+        : null,
+      isCustomToken,
+      toToken,
+      recipient,
+      conditions: {
+        hasAccount: !!account,
+        hasAmount: !!amount,
+        hasAmountRaw: !!amountRaw,
+        amountNotZero: amount !== "0",
+        amountRawNotZero: amountRaw !== "0",
+        hasDestinationTokenAddress: !!destinationTokenAddress,
+        hasDestinationTokenAddressFromSymbol:
+          !!destinationTokenAddressFromTokenSymbol,
+        isValidRecipientValue: isValidRecipient,
+        hasSelectedDestToken: !!selectedDestToken,
+        hasSelectedDestinationChain: !!selectedDestinationChain,
+        hasSelectedToken: !!selectedToken,
+      },
+      allConditionsMet:
+        !!account &&
+        !!amount &&
+        !!destinationTokenAddress &&
+        isValidRecipient &&
+        !!selectedDestToken &&
+        !!selectedDestinationChain &&
+        amount !== "0" &&
+        !!amountRaw &&
+        amountRaw !== "0" &&
+        !!selectedToken,
+    }
+
+    logger.console.log("[trails-sdk] [DEBUG] getQuote state check", debugState)
+
     // Only get quote if all required inputs are present
     if (
       !account ||
@@ -765,6 +829,7 @@ export function useSendForm({
           selectedDestinationChain,
           amountRaw,
           selectedToken,
+          debugState,
         },
       )
       setQuoteError(null)
@@ -918,6 +983,7 @@ export function useSendForm({
         sequenceProjectAccessKey: trailsApiKey,
         originPublicClient: originChainPublicClient ?? undefined,
         destinationPublicClient: destinationChainPublicClient ?? undefined,
+        isSmartWallet,
       }
 
       logger.console.log(
@@ -982,6 +1048,9 @@ export function useSendForm({
     selectedDestToken?.decimals,
     recipient,
     destinationTokenAddress,
+    destinationTokenAddressFromTokenSymbol,
+    isCustomToken,
+    toToken,
     sequenceIndexerUrl,
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
@@ -1009,6 +1078,7 @@ export function useSendForm({
     buildQuoteInputsFingerprint,
     originChainPublicClient,
     destinationChainPublicClient,
+    isSmartWallet,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -1432,40 +1502,6 @@ export function useSendForm({
     }
   }, [quoteError])
 
-  // Check if origin and destination tokens are the same (same contract address on same chain)
-  // Only block same-token transactions when there's no custom calldata AND recipient is the same as sender
-  const isSameTokenWithoutCustomCalldata = useMemo(() => {
-    if (
-      !selectedToken ||
-      !selectedToken.contractAddress ||
-      !destinationTokenAddress ||
-      !selectedToken?.chainId ||
-      !selectedDestinationChain?.id
-    ) {
-      return false
-    }
-    const isSameChainAndToken =
-      selectedToken.contractAddress.toLowerCase() ===
-        destinationTokenAddress.toLowerCase() &&
-      selectedToken.chainId === selectedDestinationChain?.id
-
-    // Allow same-token transactions if:
-    // 1. There's custom calldata (e.g., NFT minting)
-    // 2. Recipient is different from sender (simple transfer to another address)
-    const recipientIsSameAsSender =
-      recipient?.toLowerCase() === account?.address?.toLowerCase()
-
-    return isSameChainAndToken && !toCalldata && recipientIsSameAsSender
-  }, [
-    selectedToken,
-    destinationTokenAddress,
-    selectedDestinationChain,
-    toCalldata,
-    selectedToken?.chainId,
-    recipient,
-    account?.address,
-  ])
-
   return {
     amount,
     amountRaw,
@@ -1511,7 +1547,6 @@ export function useSendForm({
     prepareSendQuote: prepareSendResult?.quote ?? null,
     quoteError,
     quoteErrorPrettified,
-    isSameTokenWithoutCustomCalldata,
     isRecipientContract,
     isSenderContractOnOrigin,
     isSenderContractOnDestination,

package/src/widget/widget.tsx

@@ -275,6 +275,7 @@ export type TrailsWidgetProps = {
   appImageUrl?: string
   appDescription?: string
   payMessage?: string
+  isSmartWallet?: boolean
 }
 
 export interface TrailsWidgetRef {