0xtrails 0.2.5 → 0.3.0

package/src/widget/components/Pay.tsx

@@ -36,12 +36,14 @@ 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"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.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
@@ -49,7 +51,6 @@ interface PayProps {
   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
@@ -87,7 +88,6 @@ export const Pay: React.FC<PayProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
@@ -162,6 +162,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 +200,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,
@@ -196,7 +209,6 @@ export const Pay: React.FC<PayProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
     onConfirm,
     onComplete,
     onSend,
@@ -288,15 +300,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 +453,7 @@ 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])
-
-  // 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 inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
 
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
@@ -649,7 +634,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 +679,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"
@@ -713,16 +698,12 @@ export const Pay: React.FC<PayProps> = ({
                 {/* Amount Display - Non-editable */}
                 <div className="flex-1">
                   <div className="flex items-center space-x-2">
-                    <input
+                    <DynamicSizeInputField
                       ref={paymentRequestInputRef}
-                      type="text"
                       value={prepareSendQuote?.originAmountFormatted || ""}
-                      placeholder={`0 ${originToken?.symbol || ""}`.trim()}
                       readOnly={true}
-                      className={`w-full bg-transparent font-bold trails-text-primary border-none outline-none ${
-                        isLoadingQuote ? "animate-pulse" : ""
-                      }`}
-                      style={originInputStyles}
+                      isLoading={isLoadingQuote}
+                      variant="default"
                     />
                     {isLoadingQuote && (
                       <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
@@ -741,9 +722,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 +738,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 +914,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 />
@@ -953,6 +940,7 @@ export const Pay: React.FC<PayProps> = ({
                       onChange={(e) => handleAmountChange(e.target.value)}
                       placeholder={`0 ${selectedDestToken?.symbol || ""}`}
                       readOnly={!!toAmount}
+                      autoComplete="off"
                       className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
                         isLoadingQuote ? "animate-pulse" : ""
                       }`}
@@ -976,9 +964,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"}</>
                   ) : (
@@ -1036,12 +1024,17 @@ export const Pay: React.FC<PayProps> = ({
         selectedFeeToken={selectedFeeToken}
         setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
         chainId={originToken?.chainId}
+        isRefetching={isLoadingQuote}
       />
 
       {/* Quote Details */}
       {prepareSendQuote && (
-        <div className="space-y-2">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+        <div className="mb-4">
+          <QuoteDetails
+            quote={prepareSendQuote}
+            showContent={true}
+            isRefetching={isLoadingQuote}
+          />
         </div>
       )}
 
@@ -1067,10 +1060,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 ||