0xtrails 0.2.0 → 0.2.1

package/src/widget/components/ClassicSwap.tsx

@@ -7,13 +7,10 @@ import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
 import type { SupportedToken } from "../../tokens.js"
 import { useSendForm } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import { FeeOptions } from "./FeeOptions.js"
 import { TokenImage } from "./TokenImage.js"
 import { QuoteDetails } from "./QuoteDetails.js"
 import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
 import { getChainInfo } from "../../chains.js"
-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"
@@ -24,6 +21,7 @@ import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js"
+import { ChainList } from "./ChainList.js"
 
 interface ClassicSwapProps {
   selectedToken: Token | null
@@ -86,7 +84,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
   onAmountUpdate,
   checkoutOnHandlers,
   recentTokens,
-  onRecentTokenSelect,
   onTrackToken,
 }) => {
   const { mode } = useMode()
@@ -122,17 +119,12 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     handleSubmit,
     isSubmitting,
     isLoadingQuote,
-    isTokenDropdownOpen,
     selectedDestinationChain,
     selectedDestToken,
     setAmount,
     setSelectedDestinationChain,
     setSelectedDestToken,
     buttonText,
-    selectedFeeToken,
-    setSelectedFeeToken,
-    feeOptions,
-    setIsTokenDropdownOpen,
     toAmountDisplay,
     destinationTokenAddress,
     isValidCustomToken,
@@ -177,6 +169,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
   // Handle sell amount input changes with decimal validation
   const handleSellAmountChange = useCallback((value: string) => {
+    // Limit total length to 16 characters
+    if (value.length > 16) {
+      return
+    }
+
     // Validate decimal places (max 8 decimals)
     const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
     if (!decimalMatch && value !== "") {
@@ -190,6 +187,11 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
 
   // Handle buy amount input changes with decimal validation
   const handleBuyAmountChange = useCallback((value: string) => {
+    // Limit total length to 16 characters
+    if (value.length > 16) {
+      return
+    }
+
     // Validate decimal places (max 8 decimals)
     const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
     if (!decimalMatch && value !== "") {
@@ -299,11 +301,13 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [])
 
-  const originTokenDropdownRef = useRef<HTMLDivElement>(null)
-  const tokenDropdownRef = useRef<HTMLInputElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const [isOriginTokenDropdownOpen, setIsOriginTokenDropdownOpen] =
+  const [showSourceTokenSelector, setShowSourceTokenSelector] = useState(false)
+  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
+    useState(false)
+  const [showSourceChainList, setShowSourceChainList] = useState(false)
+  const [showDestinationChainList, setShowDestinationChainList] =
     useState(false)
 
   useEffect(() => {
@@ -326,28 +330,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [destinationToken, setSelectedDestToken])
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        tokenDropdownRef.current &&
-        !tokenDropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsTokenDropdownOpen(false)
-      }
-      if (
-        originTokenDropdownRef.current &&
-        !originTokenDropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOriginTokenDropdownOpen(false)
-      }
-    }
-
-    if (isTokenDropdownOpen || isOriginTokenDropdownOpen) {
-      document.addEventListener("click", handleClickOutside)
-      return () => document.removeEventListener("click", handleClickOutside)
-    }
-  }, [isTokenDropdownOpen, isOriginTokenDropdownOpen, setIsTokenDropdownOpen])
-
   // Handle flip functionality
   const handleFlip = () => {
     if (!selectedDestinationChain || !originToken || !selectedDestToken) return
@@ -434,6 +416,159 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
     }
   }, [tradeType, buyAmount, toAmountDisplay])
 
+  // Handle source token selection from full-screen selector
+  const handleSourceTokenSelectorSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      }
+      setOriginToken(formattedToken as any)
+      setOriginChainId(token.chainId)
+      setShowSourceTokenSelector(false)
+      onTrackToken?.(token)
+      logger.console.log("[trails-sdk] selected origin token", token)
+    },
+    [setOriginToken, onTrackToken],
+  )
+
+  // Handle destination token selection from full-screen selector
+  const handleDestinationTokenSelectorSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      }
+      setDestinationToken(formattedToken as any)
+      setSelectedDestToken(formattedToken as any)
+
+      // Update destination chain
+      const chainInfo = getChainInfo(token.chainId)
+      if (chainInfo) {
+        setSelectedDestinationChain(chainInfo)
+      }
+
+      setShowDestinationTokenSelector(false)
+      onTrackToken?.(token)
+      logger.console.log("[trails-sdk] selected destination token", token)
+    },
+    [
+      setDestinationToken,
+      setSelectedDestToken,
+      setSelectedDestinationChain,
+      onTrackToken,
+    ],
+  )
+
+  // Handle recent token selection
+  const handleRecentTokenSelect = useCallback(
+    (token: any) => {
+      if (showSourceTokenSelector) {
+        handleSourceTokenSelectorSelect(token)
+      } else if (showDestinationTokenSelector) {
+        handleDestinationTokenSelectorSelect(token)
+      }
+    },
+    [
+      showSourceTokenSelector,
+      showDestinationTokenSelector,
+      handleSourceTokenSelectorSelect,
+      handleDestinationTokenSelectorSelect,
+    ],
+  )
+
+  // Show source chain list screen
+  if (showSourceChainList) {
+    return (
+      <ChainList
+        onBack={() => {
+          setShowSourceChainList(false)
+          setShowSourceTokenSelector(true)
+        }}
+      />
+    )
+  }
+
+  // Show source token selector screen
+  if (showSourceTokenSelector) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowSourceTokenSelector(false)}
+          headerContent="Select From Token"
+          headerContentAlign="left"
+        />
+        <TokenSelector
+          onTokenSelect={handleSourceTokenSelectorSelect}
+          onError={onError}
+          showContinueButton={false}
+          compactMode={false}
+          allSupportedTokens={false}
+          fundMethod={fundMethod}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowSourceTokenSelector(false)
+            setShowSourceChainList(true)
+          }}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={handleRecentTokenSelect}
+        />
+      </div>
+    )
+  }
+
+  // Show destination chain list screen
+  if (showDestinationChainList) {
+    return (
+      <ChainList
+        onBack={() => {
+          setShowDestinationChainList(false)
+          setShowDestinationTokenSelector(true)
+        }}
+      />
+    )
+  }
+
+  // Show destination token selector screen
+  if (showDestinationTokenSelector) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowDestinationTokenSelector(false)}
+          headerContent="Select To Token"
+          headerContentAlign="left"
+        />
+        <TokenSelector
+          onTokenSelect={handleDestinationTokenSelectorSelect}
+          onError={onError}
+          showContinueButton={false}
+          compactMode={false}
+          allSupportedTokens={true}
+          fundMethod={fundMethod}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowDestinationTokenSelector(false)
+            setShowDestinationChainList(true)
+          }}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={handleRecentTokenSelect}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2">
       <ScreenHeader
@@ -516,12 +651,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
             </div>
 
             {/* Token Selection Button */}
-            <div className="relative" ref={originTokenDropdownRef}>
+            <div className="relative">
               <button
                 type="button"
-                onClick={() =>
-                  setIsOriginTokenDropdownOpen(!isOriginTokenDropdownOpen)
-                }
+                onClick={() => setShowSourceTokenSelector(true)}
                 className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
                   originToken
                     ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
@@ -550,60 +683,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   </>
                 )}
               </button>
-
-              {/* Token Selector Modal */}
-              {isOriginTokenDropdownOpen && (
-                <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10 -translate-y-28">
-                  <div className="p-2">
-                    <TokenSelector
-                      onTokenSelect={(token: any) => {
-                        const formattedToken = {
-                          ...token,
-                          decimals:
-                            token.contractInfo?.decimals || token.decimals,
-                          contractInfo: {
-                            decimals:
-                              token.contractInfo?.decimals || token.decimals,
-                            contractAddress: token.contractAddress,
-                            symbol: token.symbol,
-                            name: token.name,
-                          },
-                        } as any
-                        setOriginToken(formattedToken)
-                        logger.console.log(
-                          "[trails-sdk] selected origin token",
-                          token,
-                        )
-                        setOriginChainId(token.chainId)
-                        setIsOriginTokenDropdownOpen(false)
-                        // Track the token selection
-                        onTrackToken?.(token)
-                      }}
-                      onError={onError}
-                      fundMethod={fundMethod}
-                      showContinueButton={false}
-                      compactMode={false}
-                      recentTokens={recentTokens}
-                      onRecentTokenSelect={(token) => {
-                        const formattedToken = {
-                          ...token,
-                          decimals: token.decimals,
-                          contractInfo: {
-                            decimals: token.decimals,
-                            contractAddress: token.contractAddress,
-                            symbol: token.symbol,
-                            name: token.name,
-                          },
-                        } as any
-                        setOriginToken(formattedToken)
-                        setOriginChainId(token.chainId)
-                        setIsOriginTokenDropdownOpen(false)
-                        onRecentTokenSelect?.(token)
-                      }}
-                    />
-                  </div>
-                </div>
-              )}
             </div>
           </div>
 
@@ -714,10 +793,10 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
             </div>
 
             {/* Destination Token Selection */}
-            <div className="relative" ref={tokenDropdownRef}>
+            <div className="relative">
               <button
                 type="button"
-                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
+                onClick={() => setShowDestinationTokenSelector(true)}
                 className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
                   selectedDestToken
                     ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
@@ -746,56 +825,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
                   </>
                 )}
               </button>
-
-              {/* Token Selector Modal */}
-              {isTokenDropdownOpen && (
-                <div className="absolute right-0 bottom-full mb-1 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10 translate-y-32">
-                  <div className="p-2">
-                    <TokenSelector
-                      onTokenSelect={(token: any) => {
-                        const formattedToken = {
-                          ...token,
-                          decimals:
-                            token.contractInfo?.decimals || token.decimals,
-                          contractInfo: {
-                            decimals:
-                              token.contractInfo?.decimals || token.decimals,
-                          },
-                        } as any
-                        setDestinationToken(formattedToken)
-                        setSelectedDestToken(formattedToken)
-                        logger.console.log(
-                          "[trails-sdk] selected destination token",
-                          token,
-                        )
-
-                        setIsTokenDropdownOpen(false)
-                        // Track the token selection
-                        onTrackToken?.(token)
-                      }}
-                      onError={onError}
-                      fundMethod={fundMethod}
-                      allSupportedTokens={true}
-                      showContinueButton={false}
-                      compactMode={false}
-                      recentTokens={recentTokens}
-                      onRecentTokenSelect={(token) => {
-                        const formattedToken = {
-                          ...token,
-                          decimals: token.decimals,
-                          contractInfo: {
-                            decimals: token.decimals,
-                          },
-                        } as any
-                        setDestinationToken(formattedToken)
-                        setSelectedDestToken(formattedToken)
-                        setIsTokenDropdownOpen(false)
-                        onRecentTokenSelect?.(token)
-                      }}
-                    />
-                  </div>
-                </div>
-              )}
             </div>
           </div>
 
@@ -814,13 +843,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
           </div>
         </div>
 
-        {/* Fee Options */}
-        <FeeOptions
-          options={feeOptions}
-          selectedOption={selectedFeeToken ?? undefined}
-          onSelect={setSelectedFeeToken}
-        />
-
         {/* Warning Messages - Show only one at a time */}
         <ErrorDisplay
           errorPrettified={quoteErrorPrettified}
@@ -851,30 +873,6 @@ export const ClassicSwap: React.FC<ClassicSwapProps> = ({
               </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}
 
         {/* Quote Details */}

package/src/widget/components/ConfigDisplay.tsx

@@ -16,6 +16,7 @@ import { getChainInfo } from "../../chains.js"
 import { mainnet } from "viem/chains"
 import { logger } from "../../logger.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
+import { useTargetAmount } from "../hooks/useTargetAmount.js"
 
 interface ConfigDisplayProps {
   className?: string
@@ -24,7 +25,14 @@ interface ConfigDisplayProps {
 export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
   className = "",
 }) => {
-  const { toast = false } = useWidgetProps()
+  const {
+    toast = false,
+    toAddress,
+    toAmount,
+    toToken,
+    toCalldata,
+  } = useWidgetProps()
+  const { targetAmountUsdFormatted } = useTargetAmount()
   const [sequenceEnv, setSequenceEnv] = useState(getSequenceEnv())
   const [trailsApiUrl, setTrailsApiUrl] = useState(getTrailsApiUrl())
   const [sequenceIndexerUrl, setSequenceIndexerUrl] = useState(
@@ -114,6 +122,31 @@ export const ConfigDisplay: React.FC<ConfigDisplayProps> = ({
     { label: "Slippage Tolerance", value: `${slippageTolerance}%` },
     { label: "Debug Mode", value: debugMode ? "Enabled" : "Disabled" },
     { label: "Toast Notifications", value: toast ? "Enabled" : "Disabled" },
+    {
+      label: "Target Amount USD",
+      value: targetAmountUsdFormatted || "N/A",
+      display: targetAmountUsdFormatted || "N/A",
+    },
+    {
+      label: "To Address",
+      value: toAddress || "N/A",
+      display: toAddress ? truncateString(toAddress, 20) : "N/A",
+    },
+    {
+      label: "To Amount",
+      value: toAmount || "N/A",
+      display: toAmount || "N/A",
+    },
+    {
+      label: "To Token",
+      value: toToken || "N/A",
+      display: toToken ? truncateString(toToken, 20) : "N/A",
+    },
+    {
+      label: "To Calldata",
+      value: toCalldata || "N/A",
+      display: toCalldata ? truncateString(toCalldata, 20) : "N/A",
+    },
   ]
 
   return (