0xtrails 0.1.3 → 0.1.4

package/src/widget/components/Swap.tsx

@@ -16,6 +16,7 @@ import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenSelector } from "./TokenSelector.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
 
 interface SwapProps {
   selectedToken: Token | null
@@ -48,8 +49,11 @@ interface SwapProps {
     quote?: PrepareSendQuote | null,
   ) => void
   onAmountUpdate?: (amount: string) => void
-  mode?: "pay" | "fund" | "earn" | "swap"
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
 }
 
 export const Swap: React.FC<SwapProps> = ({
@@ -76,6 +80,9 @@ export const Swap: React.FC<SwapProps> = ({
   onAmountUpdate,
   mode,
   checkoutOnHandlers,
+  recentTokens,
+  onRecentTokenSelect,
+  onTrackToken,
 }) => {
   const [isFlipped, setIsFlipped] = useState(false)
   const [originChainId, setOriginChainId] = useState<number | null | undefined>(
@@ -84,6 +91,10 @@ export const Swap: React.FC<SwapProps> = ({
   const [originToken, setOriginToken] = useState<SupportedToken | null>(
     initialSelectedToken as SupportedToken | null,
   )
+  const [tradeType, setTradeType] = useState<TradeType>(TradeType.EXACT_INPUT)
+  const [sellAmount, setSellAmount] = useState("")
+  const [buyAmount, setBuyAmount] = useState("")
+  const [lastInputType, setLastInputType] = useState<"sell" | "buy">("sell")
 
   const {
     amount,
@@ -108,9 +119,12 @@ export const Swap: React.FC<SwapProps> = ({
     destinationTokenAddress,
     isValidCustomToken,
     prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   } = useSendForm({
     account,
-    toAmount,
+    toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
     toRecipient: account.address,
     toChainId,
     toToken,
@@ -126,7 +140,7 @@ export const Swap: React.FC<SwapProps> = ({
     onSend,
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_INPUT,
+    tradeType: tradeType,
     quoteProvider,
     fundMethod,
     mode,
@@ -134,18 +148,57 @@ export const Swap: React.FC<SwapProps> = ({
     checkoutOnHandlers,
   })
 
-  // Handle amount input changes with decimal validation
-  const handleAmountChange = useCallback(
-    (value: string) => {
-      // Validate decimal places (max 8 decimals)
-      const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-      if (!decimalMatch && value !== "") {
-        return // Don't update if more than 8 decimals
-      }
-      setAmount(value)
-    },
-    [setAmount],
-  )
+  // Update amount based on last input type
+  useEffect(() => {
+    if (lastInputType === "sell") {
+      setAmount(sellAmount)
+    } else {
+      setAmount(buyAmount)
+    }
+  }, [sellAmount, buyAmount, lastInputType, setAmount])
+
+  // Handle sell amount input changes with decimal validation
+  const handleSellAmountChange = useCallback((value: string) => {
+    // Validate decimal places (max 8 decimals)
+    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+    if (!decimalMatch && value !== "") {
+      return // Don't update if more than 8 decimals
+    }
+    setTradeType(TradeType.EXACT_INPUT)
+    setSellAmount(value)
+    setBuyAmount("")
+    setLastInputType("sell")
+  }, [])
+
+  // Handle buy amount input changes with decimal validation
+  const handleBuyAmountChange = useCallback((value: string) => {
+    // Validate decimal places (max 8 decimals)
+    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+    if (!decimalMatch && value !== "") {
+      return // Don't update if more than 8 decimals
+    }
+    setTradeType(TradeType.EXACT_OUTPUT)
+    setBuyAmount(value)
+    setSellAmount("")
+    setLastInputType("buy")
+  }, [])
+
+  // Update amounts when quote is received
+  useEffect(() => {
+    if (!prepareSendQuote) return
+
+    if (
+      tradeType === TradeType.EXACT_OUTPUT &&
+      prepareSendQuote.originAmountDisplay
+    ) {
+      setSellAmount(prepareSendQuote.originAmountDisplay)
+    } else if (
+      tradeType === TradeType.EXACT_INPUT &&
+      prepareSendQuote.destinationAmountDisplay
+    ) {
+      setBuyAmount(prepareSendQuote.destinationAmountDisplay)
+    }
+  }, [prepareSendQuote, tradeType])
 
   // Handle percentage button clicks
   const handlePercentageClick = useCallback(
@@ -157,9 +210,12 @@ export const Swap: React.FC<SwapProps> = ({
       if (Number.isNaN(balance)) return
 
       const amount = (balance * percentage) / 100
-      setAmount(amount.toFixed(6))
+      setTradeType(TradeType.EXACT_INPUT)
+      setSellAmount(amount.toFixed(6))
+      setBuyAmount("")
+      setLastInputType("sell")
     },
-    [originToken, balanceFormatted, setAmount],
+    [originToken, balanceFormatted],
   )
 
   // Call onAmountUpdate when amountRaw changes
@@ -222,12 +278,11 @@ export const Swap: React.FC<SwapProps> = ({
     // Store current values
     const tempOriginToken = originToken
     const tempOriginChainId = originChainId
+    const tempBuyAmount = buyAmount || toAmountDisplay || ""
 
     // Swap origin and destination
     setOriginToken(selectedDestToken as any)
     setOriginChainId((selectedDestToken as any)?.chainId as any)
-
-    // Set destination to previous origin (convert to TokenInfo)
     setSelectedDestToken(tempOriginToken as any)
 
     // Update destination chain
@@ -235,6 +290,21 @@ export const Swap: React.FC<SwapProps> = ({
     if (newChain) {
       setSelectedDestinationChain(newChain)
     }
+
+    // When flipping, always set the current visible amount as the new sell amount
+    if (tradeType === TradeType.EXACT_INPUT) {
+      // If we were in EXACT_INPUT, use the buy amount (from quote) as the new sell amount
+      setSellAmount(tempBuyAmount)
+      setBuyAmount("")
+      setTradeType(TradeType.EXACT_INPUT)
+      setLastInputType("sell")
+    } else {
+      // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
+      setSellAmount(tempBuyAmount)
+      setBuyAmount("")
+      setTradeType(TradeType.EXACT_INPUT)
+      setLastInputType("sell")
+    }
   }
 
   return (
@@ -250,7 +320,7 @@ export const Swap: React.FC<SwapProps> = ({
         <div className="trails-bg-secondary trails-border-radius-container p-3 group">
           {/* Sell Label and Percentage Buttons */}
           <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-medium trails-text-secondary">
+            <div className="text-sm font-medium trails-text-secondary text-left">
               Sell
             </div>
 
@@ -292,15 +362,27 @@ export const Swap: React.FC<SwapProps> = ({
           <div className="flex items-center space-x-2">
             {/* Amount Input */}
             <div className="flex-1">
-              <input
-                ref={inputRef}
-                id="amount"
-                type="text"
-                value={amount}
-                onChange={(e) => handleAmountChange(e.target.value)}
-                placeholder="0.00"
-                className="w-full bg-transparent text-xl font-medium trails-text-primary placeholder:trails-text-muted border-none outline-none"
-              />
+              <div className="flex items-center space-x-2">
+                <input
+                  ref={inputRef}
+                  id="amount"
+                  type="text"
+                  value={sellAmount}
+                  onChange={(e) => handleSellAmountChange(e.target.value)}
+                  placeholder="0.00"
+                  className={`w-full bg-transparent text-xl font-medium trails-text-primary placeholder:trails-text-muted border-none outline-none ${
+                    isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
+                      ? "animate-pulse"
+                      : ""
+                  }`}
+                  readOnly={
+                    tradeType === TradeType.EXACT_OUTPUT && isLoadingQuote
+                  }
+                />
+                {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
+                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                )}
+              </div>
             </div>
 
             {/* Token Selection Button */}
@@ -353,14 +435,33 @@ export const Swap: React.FC<SwapProps> = ({
                             name: token.name,
                           },
                         } as any)
+                        console.log("selected origin token", token)
                         setOriginChainId(token.chainId)
                         setIsOriginTokenDropdownOpen(false)
+                        // Track the token selection
+                        onTrackToken?.(token)
                       }}
                       onError={onError}
                       mode="swap"
                       fundMethod={fundMethod}
                       showContinueButton={false}
                       compactMode={false}
+                      recentTokens={recentTokens}
+                      onRecentTokenSelect={(token) => {
+                        setOriginToken({
+                          ...token,
+                          decimals: token.decimals,
+                          contractInfo: {
+                            decimals: token.decimals,
+                            contractAddress: token.contractAddress,
+                            symbol: token.symbol,
+                            name: token.name,
+                          },
+                        } as any)
+                        setOriginChainId(token.chainId)
+                        setIsOriginTokenDropdownOpen(false)
+                        onRecentTokenSelect?.(token)
+                      }}
                     />
                   </div>
                 </div>
@@ -368,12 +469,17 @@ export const Swap: React.FC<SwapProps> = ({
             </div>
           </div>
 
-          {/* Bottom Info Row */}
+          {/* Bottom Info Row for sell */}
           <div className="mt-2 flex justify-between items-center">
             {/* USD Amount */}
-            {amountUsdDisplay && originToken?.symbol && (
+            {originToken?.symbol && (
               <div className="text-xs trails-text-muted">
-                ≈ {amountUsdDisplay}
+                ≈{" "}
+                {tradeType === TradeType.EXACT_INPUT
+                  ? amountUsdDisplay || "$0.00"
+                  : isLoadingQuote
+                    ? "$0.00"
+                    : prepareSendQuote?.originAmountUsdDisplay || "$0.00"}
               </div>
             )}
 
@@ -386,7 +492,10 @@ export const Swap: React.FC<SwapProps> = ({
                   if (balanceFormatted) {
                     const balance = parseFloat(balanceFormatted)
                     if (!Number.isNaN(balance)) {
-                      setAmount(balance.toFixed(6))
+                      setTradeType(TradeType.EXACT_INPUT)
+                      setSellAmount(balance.toFixed(6))
+                      setBuyAmount("")
+                      setLastInputType("sell")
                     }
                   }
                 }}
@@ -396,7 +505,10 @@ export const Swap: React.FC<SwapProps> = ({
                     if (balanceFormatted) {
                       const balance = parseFloat(balanceFormatted)
                       if (!Number.isNaN(balance)) {
-                        setAmount(balance.toFixed(6))
+                        setTradeType(TradeType.EXACT_INPUT)
+                        setSellAmount(balance.toFixed(6))
+                        setBuyAmount("")
+                        setLastInputType("sell")
                       }
                     }
                   }
@@ -423,7 +535,7 @@ export const Swap: React.FC<SwapProps> = ({
         {/* Output Section - Amount + Token Selection */}
         <div className="trails-bg-secondary trails-border-radius-container p-3">
           {/* Buy Label */}
-          <div className="text-sm font-medium trails-text-secondary mb-2">
+          <div className="text-sm font-medium trails-text-secondary mb-2 text-left">
             Buy
           </div>
 
@@ -431,12 +543,25 @@ export const Swap: React.FC<SwapProps> = ({
             {/* Output Amount */}
             <div className="flex-1">
               <div className="flex items-center space-x-2">
-                <div
-                  className={`text-xl font-medium ${!amount ? "text-gray-400 dark:text-gray-500" : "trails-text-primary"} ${isLoadingQuote ? "animate-pulse" : ""}`}
-                >
-                  {toAmountDisplay || "0.00"}
-                </div>
-                {isLoadingQuote && (
+                <input
+                  type="text"
+                  value={
+                    tradeType === TradeType.EXACT_OUTPUT
+                      ? buyAmount
+                      : toAmountDisplay || ""
+                  }
+                  onChange={(e) => handleBuyAmountChange(e.target.value)}
+                  placeholder="0.00"
+                  className={`w-full bg-transparent text-xl font-medium placeholder:trails-text-muted border-none outline-none ${
+                    !amount
+                      ? "text-gray-400 dark:text-gray-500"
+                      : "trails-text-primary"
+                  } ${isLoadingQuote && tradeType === TradeType.EXACT_INPUT ? "animate-pulse" : ""}`}
+                  readOnly={
+                    tradeType === TradeType.EXACT_INPUT && isLoadingQuote
+                  }
+                />
+                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT && (
                   <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
                 )}
               </div>
@@ -487,7 +612,11 @@ export const Swap: React.FC<SwapProps> = ({
                               token.contractInfo?.decimals || token.decimals,
                           },
                         } as any)
+                        console.log("selected destination token", token)
+
                         setIsTokenDropdownOpen(false)
+                        // Track the token selection
+                        onTrackToken?.(token)
                       }}
                       onError={onError}
                       mode="swap"
@@ -495,6 +624,18 @@ export const Swap: React.FC<SwapProps> = ({
                       allSupportedTokens={true}
                       showContinueButton={false}
                       compactMode={false}
+                      recentTokens={recentTokens}
+                      onRecentTokenSelect={(token) => {
+                        setSelectedDestToken({
+                          ...token,
+                          decimals: token.decimals,
+                          contractInfo: {
+                            decimals: token.decimals,
+                          },
+                        } as any)
+                        setIsTokenDropdownOpen(false)
+                        onRecentTokenSelect?.(token)
+                      }}
                     />
                   </div>
                 </div>
@@ -505,54 +646,18 @@ export const Swap: React.FC<SwapProps> = ({
           {/* Bottom Info Row */}
           <div className="mt-2 flex justify-between items-center">
             {/* Destination Amount USD from Quote */}
-            {prepareSendQuote?.destinationAmountUsdDisplay && (
+            {(prepareSendQuote?.destinationAmountUsdDisplay ||
+              (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
               <div className="text-xs trails-text-muted">
-                ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+                ≈{" "}
+                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
+                  ? "$0.00"
+                  : prepareSendQuote?.destinationAmountUsdDisplay}
               </div>
             )}
           </div>
         </div>
 
-        {/* Receive Section - Show what user will receive */}
-        {(toAmount || toChainId || toToken) && selectedDestinationChain && (
-          <div className="space-y-1">
-            <div className="text-lg font-semibold text-left trails-text-primary">
-              You Will Receive
-            </div>
-
-            <div className="p-2">
-              <div className="flex items-center space-x-3">
-                <TokenImage
-                  symbol={selectedDestToken?.symbol}
-                  imageUrl={selectedDestToken?.imageUrl}
-                  chainId={selectedDestinationChain.id}
-                  size={32}
-                />
-                <div>
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`text-lg font-semibold trails-text-primary ${isLoadingQuote ? "animate-pulse" : ""}`}
-                    >
-                      {toAmountDisplay} {selectedDestToken?.symbol}
-                    </div>
-                    {isLoadingQuote && (
-                      <div className="animate-spin trails-border-radius-button h-4 w-4 border-solid border-b-2 trails-primary" />
-                    )}
-                  </div>
-                  <div
-                    className={`text-xs trails-text-muted ${isLoadingQuote ? "animate-pulse" : ""}`}
-                  >
-                    ≈ {amountUsdDisplay}{" "}
-                    {selectedDestinationChain
-                      ? `on ${selectedDestinationChain.name}`
-                      : ""}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
         {/* Fee Options */}
         <FeeOptions
           options={FEE_TOKENS}
@@ -561,6 +666,18 @@ export const Swap: React.FC<SwapProps> = ({
         />
 
         {/* Warning Messages - Show only one at a time */}
+        {isSameTokenWithoutCustomCalldata ? (
+          <ErrorDisplay
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            severity="error"
+          />
+        ) : (
+          <ErrorDisplay
+            errorPrettified={quoteErrorPrettified}
+            error={quoteError}
+            severity="warning"
+          />
+        )}
         {prepareSendQuote?.noSufficientBalance ? (
           <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">
@@ -579,7 +696,8 @@ export const Swap: React.FC<SwapProps> = ({
                 />
               </svg>
               <p className="text-sm text-amber-600 dark:text-amber-400">
-                Insufficient balance to complete this transaction
+                Insufficient balance to complete this transaction. Required{" "}
+                {prepareSendQuote?.originAmountDisplay} {originToken?.symbol}
               </p>
             </div>
           </div>
@@ -618,7 +736,8 @@ export const Swap: React.FC<SwapProps> = ({
             !isValidCustomToken ||
             isLoadingQuote ||
             !prepareSendQuote ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata
           }
           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"
         >
@@ -627,6 +746,8 @@ export const Swap: React.FC<SwapProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2 trails-text-muted" />
               <span>{buttonText}</span>
             </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : (

package/src/widget/components/SwapDisplay.tsx

@@ -0,0 +1,68 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import { formatElapsed } from "../../utils.js"
+
+interface SwapDisplayProps {
+  quote: PrepareSendQuote
+  elapsedSeconds: number
+}
+
+export const SwapDisplay: React.FC<SwapDisplayProps> = ({
+  quote,
+  elapsedSeconds,
+}) => {
+  return (
+    <div className="w-full max-w-sm p-3 flex justify-center">
+      <div className="flex items-center space-x-4">
+        {/* Origin Token */}
+        <div className="flex flex-col items-start space-y-1">
+          <div style={{ width: "28px", height: "28px" }}>
+            <TokenImage
+              imageUrl={quote.originToken.imageUrl}
+              symbol={quote.originToken.symbol}
+              chainId={quote.originChain.id}
+              size={28}
+            />
+          </div>
+          <div className="text-left">
+            <div className="text-base font-bold text-gray-900 dark:text-white">
+              {quote.originToken.symbol}
+            </div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">
+              {quote.originAmountFormatted}
+            </div>
+          </div>
+        </div>
+
+        {/* Arrow with elapsed time below */}
+        <div className="flex flex-col items-center space-y-1">
+          <div className="text-xl text-gray-400 dark:text-gray-500">→</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            {formatElapsed(elapsedSeconds)}
+          </div>
+        </div>
+
+        {/* Destination Token */}
+        <div className="flex flex-col items-start space-y-1">
+          <div style={{ width: "28px", height: "28px" }}>
+            <TokenImage
+              imageUrl={quote.destinationToken.imageUrl}
+              symbol={quote.destinationToken.symbol}
+              chainId={quote.destinationChain.id}
+              size={28}
+            />
+          </div>
+          <div className="text-left">
+            <div className="text-base font-bold text-gray-900 dark:text-white">
+              {quote.destinationToken.symbol}
+            </div>
+            <div className="text-xs text-gray-600 dark:text-gray-400">
+              {quote.destinationAmountFormatted}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/TokenSelector.tsx

@@ -211,7 +211,7 @@ export const TokenSelector: React.FC<TokenSelectorProps> = ({
       {/* Token List */}
       {chainFilteredTokens.length > 0 && (
         <div
-          className={`${compactMode ? "max-h-48" : "max-h-[24vh]"} overflow-y-auto trails-scrollbar space-y-1`}
+          className={`${compactMode ? "max-h-48" : filteredRecentTokens.length > 0 ? "max-h-[17vh]" : "max-h-[24vh]"} overflow-y-auto trails-scrollbar space-y-1`}
         >
           <AnimatePresence mode="popLayout">
             {chainFilteredTokens.map((token: TokenFormatted) => {