0xtrails 0.2.5 → 0.2.6

package/src/widget/components/Modal.tsx

@@ -1,4 +1,3 @@
-import { X } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import type React from "react"
 import { useEffect, useRef } from "react"
@@ -70,17 +69,6 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
               layoutId="modal-content"
               layout="preserve-aspect"
             >
-              <button
-                type="button"
-                onClick={onClose}
-                className="absolute right-4 top-6 flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 z-20"
-                title="Close"
-              >
-                <X
-                  className="h-4 w-4"
-                  style={{ transform: "translate(0, -2px)" }}
-                />
-              </button>
               {children}
             </motion.div>
           </div>

package/src/widget/components/Pay.tsx

@@ -36,12 +36,13 @@ import { TokenSelectorButton } from "./TokenSelectorButton.js"
 import { RequiredPropsError } from "./RequiredPropsError.js"
 import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
+import { useDynamicInputStyles } from "./DynamicInputStyles.js"
 
 interface PayProps {
   selectedToken?: any // Origin token (optional - user can select)
   onBack?: () => void
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -162,6 +163,19 @@ export const Pay: React.FC<PayProps> = ({
     )
   }, [originToken, filteredTokensFormatted])
 
+  // Calculate effective recipient for useSendForm
+  const effectiveRecipient = useMemo(() => {
+    const recipient = selectedRecipient || toRecipient || account?.address
+    logger.console.log("[trails-sdk] Effective recipient calculated:", {
+      selectedRecipient,
+      toRecipient,
+      accountAddress: account?.address,
+      effectiveRecipient: recipient,
+      willPassToUseSendForm: recipient,
+    })
+    return recipient
+  }, [selectedRecipient, toRecipient, account?.address])
+
   // Use useSendForm for quote functionality with EXACT_OUTPUT trade type
   const {
     amountUsdDisplay,
@@ -187,7 +201,7 @@ export const Pay: React.FC<PayProps> = ({
   } = useSendForm({
     account,
     toAmount: tokenAmountForBackend || toAmount, // Use the input amount as target amount for EXACT_OUTPUT
-    toRecipient: selectedRecipient || toRecipient || account.address,
+    toRecipient: effectiveRecipient,
     toChainId,
     toToken,
     toCalldata,
@@ -288,15 +302,31 @@ export const Pay: React.FC<PayProps> = ({
     setSelectedDestinationChain,
   ])
 
-  // Initialize selected recipient from toRecipient prop or default to connected wallet
+  // Initialize and update selected recipient from toRecipient prop or default to connected wallet
+  // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
   useEffect(() => {
-    if (toRecipient && !selectedRecipient) {
+    logger.console.log("[trails-sdk] toRecipient prop effect:", {
+      toRecipient,
+      selectedRecipient,
+      accountAddress: account?.address,
+    })
+
+    if (toRecipient) {
+      // Always sync with toRecipient prop when it changes
+      logger.console.log(
+        "[trails-sdk] Setting selectedRecipient to toRecipient:",
+        toRecipient,
+      )
       setSelectedRecipient(toRecipient)
     } else if (!selectedRecipient && account?.address) {
       // Default to connected wallet address if no recipient is set
+      logger.console.log(
+        "[trails-sdk] Setting selectedRecipient to account address:",
+        account.address,
+      )
       setSelectedRecipient(account.address)
     }
-  }, [toRecipient, selectedRecipient, setSelectedRecipient, account?.address])
+  }, [toRecipient, setSelectedRecipient, account?.address])
 
   // Initialize and update amount from toAmount prop
   useEffect(() => {
@@ -425,50 +455,12 @@ export const Pay: React.FC<PayProps> = ({
   }, [inputDisplayValue])
 
   // Dynamic font size based on input length for destination amount
-  const inputStyles = useMemo(() => {
-    const inputLength = displayAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [displayAmount.length])
+  const inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
 
   // Dynamic font size based on input length for origin amount (Pay with section)
-  const originInputStyles = useMemo(() => {
-    const inputLength = (prepareSendQuote?.originAmountFormatted || "").length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [prepareSendQuote?.originAmountFormatted])
+  const originInputStyles = useDynamicInputStyles({
+    inputValue: prepareSendQuote?.originAmountFormatted || "",
+  })
 
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
@@ -649,7 +641,7 @@ export const Pay: React.FC<PayProps> = ({
   const missingRequiredProps = []
   if (!toAmount) missingRequiredProps.push("toAmount")
   if (!toToken) missingRequiredProps.push("toToken")
-  if (!toRecipient) missingRequiredProps.push("toRecipient")
+  if (!toRecipient) missingRequiredProps.push("toAddress")
 
   // Check if this is a payment request (all required props are set)
   const isPaymentRequest = !!(toToken && toAmount && toChainId && toRecipient)
@@ -694,11 +686,11 @@ export const Pay: React.FC<PayProps> = ({
           </div>
 
           {/* Origin Token Selection for Payment Request */}
-          <div className="space-y-1">
-            <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+          <div className="mb-4">
+            <div className="pt-4 pb-4 trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent min-h-[120px] flex flex-col">
               {/* Amount to Pay Label */}
-              <div className="flex justify-between items-center mb-2">
-                <div className="text-sm font-medium trails-text-secondary text-left">
+              <div className="mb-4 flex justify-between items-center">
+                <div className="text-sm font-medium trails-text-secondary text-left m-0">
                   Pay with
                   {fundMethod === "qr-code"
                     ? " QR Code"
@@ -717,7 +709,7 @@ export const Pay: React.FC<PayProps> = ({
                       ref={paymentRequestInputRef}
                       type="text"
                       value={prepareSendQuote?.originAmountFormatted || ""}
-                      placeholder={`0 ${originToken?.symbol || ""}`.trim()}
+                      placeholder={"0"}
                       readOnly={true}
                       className={`w-full bg-transparent font-bold trails-text-primary border-none outline-none ${
                         isLoadingQuote ? "animate-pulse" : ""
@@ -741,9 +733,9 @@ export const Pay: React.FC<PayProps> = ({
               </div>
 
               {/* Bottom Info Row */}
-              <div className="mt-2 flex justify-between items-center">
+              <div className="mt-4 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 &&
                   prepareSendQuote?.originAmountFormatted ? (
                     <>≈ {prepareSendQuote?.originAmountUsdDisplay || "$0.00"}</>
@@ -757,7 +749,7 @@ export const Pay: React.FC<PayProps> = ({
                   <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={() => {
                         if (originTokenBalance.balanceFormatted) {
                           const balance = parseFloat(
@@ -933,10 +925,16 @@ export const Pay: React.FC<PayProps> = ({
 
           <div className="space-y-1">
             {/* Destination Amount Input Section - Like Fund.tsx but for destination token */}
-            <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+            <div
+              className={`pt-4 pb-4 trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent min-h-[120px] flex flex-col ${
+                !toAmount
+                  ? "trails-bg-secondary-hover focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary"
+                  : ""
+              }`}
+            >
               {/* Amount to Pay Label */}
-              <div className="flex justify-between items-center mb-2">
-                <div className="text-sm font-medium trails-text-secondary text-left">
+              <div className="mb-4 flex justify-between items-center">
+                <div className="text-sm font-medium trails-text-secondary text-left m-0">
                   Recipient receives
                 </div>
                 <FundingMethodSelectorButton />
@@ -976,9 +974,9 @@ export const Pay: React.FC<PayProps> = ({
               </div>
 
               {/* Bottom Info Row */}
-              <div className="mt-2 flex justify-between items-center">
+              <div className="mt-4 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">
                   {selectedDestToken?.symbol && displayAmount ? (
                     <>≈ {amountUsdDisplay || "$0.00"}</>
                   ) : (
@@ -1040,7 +1038,7 @@ export const Pay: React.FC<PayProps> = ({
 
       {/* Quote Details */}
       {prepareSendQuote && (
-        <div className="space-y-2">
+        <div className="mb-4">
           <QuoteDetails quote={prepareSendQuote} showContent={true} />
         </div>
       )}
@@ -1067,10 +1065,14 @@ export const Pay: React.FC<PayProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2" />
               <span>{buttonText}</span>
             </div>
+          ) : !account?.address ? (
+            "Connect your wallet"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : !selectedRecipient ? (
             "Select recipient address"
+          ) : !originToken ? (
+            "Select payment token"
           ) : !selectedDestToken ? (
             "Select destination token"
           ) : !tokenAmountForBackend ||