0xtrails 0.2.4 → 0.2.6

package/src/widget/components/Pay.tsx

@@ -1,7 +1,8 @@
-import { ChevronRight, Search, Loader2, ChevronDown } from "lucide-react"
+import { Search, Loader2, ChevronRight } from "lucide-react"
 import { useEffect, useState, useMemo, useRef, useCallback } from "react"
 import type React from "react"
 import type { Account, WalletClient } from "viem"
+import { zeroAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
@@ -31,12 +32,17 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
+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
@@ -157,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,
@@ -182,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,
@@ -283,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(() => {
@@ -328,10 +363,12 @@ export const Pay: React.FC<PayProps> = ({
       const destTokenToUse = globalDestinationToken || defaultDestinationToken
 
       if (destTokenToUse && !isLoadingDefaults) {
-        logger.console.log(
-          "[trails-sdk] Initializing destination token:",
-          destTokenToUse,
-        )
+        logger.console.log("[trails-sdk] Initializing destination token:", {
+          symbol: destTokenToUse.symbol,
+          chainId: destTokenToUse.chainId,
+          name: destTokenToUse.name,
+          contractAddress: destTokenToUse.contractAddress,
+        })
 
         // Set destination token if not already set by global state
         if (!globalDestinationToken && defaultDestinationToken) {
@@ -417,28 +454,13 @@ export const Pay: React.FC<PayProps> = ({
     return inputDisplayValue
   }, [inputDisplayValue])
 
-  // Dynamic font size based on input length
-  const inputStyles = useMemo(() => {
-    const inputLength = displayAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "0.875rem"
-    } else if (inputLength > 9) {
-      fontSize = "1rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.125rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.25rem"
-    } else {
-      fontSize = "1.5rem"
-    }
+  // Dynamic font size based on input length for destination amount
+  const inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
 
-    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 = useDynamicInputStyles({
+    inputValue: prepareSendQuote?.originAmountFormatted || "",
+  })
 
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
@@ -533,7 +555,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -580,7 +601,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -617,11 +637,35 @@ export const Pay: React.FC<PayProps> = ({
     )
   }
 
+  // Check for required props
+  const missingRequiredProps = []
+  if (!toAmount) missingRequiredProps.push("toAmount")
+  if (!toToken) missingRequiredProps.push("toToken")
+  if (!toRecipient) missingRequiredProps.push("toAddress")
+
   // Check if this is a payment request (all required props are set)
   const isPaymentRequest = !!(toToken && toAmount && toChainId && toRecipient)
 
+  // If required props are missing, only show the error
+  if (missingRequiredProps.length > 0) {
+    return (
+      <div className="space-y-4">
+        <ScreenHeader
+          onBack={onBack}
+          headerContent="Pay"
+          headerContentAlign="left"
+          showAccountActions={true}
+        />
+        <RequiredPropsError
+          missingProps={missingRequiredProps}
+          componentName="Pay"
+        />
+      </div>
+    )
+  }
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-2">
       <ScreenHeader
         onBack={onBack}
         headerContent="Pay"
@@ -635,18 +679,18 @@ export const Pay: React.FC<PayProps> = ({
           {/* Payment Request Header */}
           <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
             <div className="flex justify-start">
-              <div className="flex items-center font-medium trails-text-primary text-sm whitespace-nowrap overflow-hidden">
+              <div className="flex items-center font-medium trails-text-primary text-sm whitespace-nowrap overflow-hidden min-w-full">
                 {payMessage}
               </div>
             </div>
           </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">
+          <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-bold 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"
@@ -654,88 +698,44 @@ export const Pay: React.FC<PayProps> = ({
                       ? " Exchange"
                       : ""}
                 </div>
+                <FundingMethodSelectorButton />
               </div>
 
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-2 flex-1">
                 {/* Amount Display - Non-editable */}
                 <div className="flex-1">
-                  <div
-                    className="flex items-center justify-start cursor-text"
-                    onClick={() => paymentRequestInputRef.current?.focus()}
-                  >
-                    <div className="flex items-center">
-                      <input
-                        ref={paymentRequestInputRef}
-                        type="text"
-                        value={prepareSendQuote?.originAmountFormatted || ""}
-                        readOnly={true}
-                        className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary ${
-                          isLoadingQuote ? "animate-pulse" : ""
-                        }`}
-                        style={{
-                          fontSize: inputStyles.fontSize,
-                          width: prepareSendQuote?.originAmountFormatted
-                            ? `${Math.max(prepareSendQuote.originAmountFormatted.length - 1 + 0.5, 1)}ch`
-                            : "1ch",
-                          minWidth: "1ch",
-                          maxWidth: "200px",
-                          padding: "0",
-                          margin: "0",
-                          transition: "all 0.1s ease-in-out",
-                        }}
-                      />
-                      <span
-                        className="font-bold text-gray-400 dark:text-gray-500"
-                        style={{
-                          fontSize: inputStyles.fontSize,
-                          marginLeft: "0.1em",
-                          padding: "0",
-                          transition: "all 0.2s ease-in-out",
-                        }}
-                      >
-                        {originToken?.symbol || "TOKEN"}
-                      </span>
-                      {isLoadingQuote && (
-                        <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                      )}
-                    </div>
+                  <div className="flex items-center space-x-2">
+                    <input
+                      ref={paymentRequestInputRef}
+                      type="text"
+                      value={prepareSendQuote?.originAmountFormatted || ""}
+                      placeholder={"0"}
+                      readOnly={true}
+                      className={`w-full bg-transparent font-bold trails-text-primary border-none outline-none ${
+                        isLoadingQuote ? "animate-pulse" : ""
+                      }`}
+                      style={originInputStyles}
+                    />
+                    {isLoadingQuote && (
+                      <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                    )}
                   </div>
                 </div>
 
-                {/* Origin Token Selection Button */}
-                <button
-                  type="button"
-                  onClick={() => setShowOriginTokenSelector(true)}
-                  className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
-                >
-                  {originToken ? (
-                    <>
-                      <TokenImage
-                        symbol={originToken.symbol}
-                        imageUrl={originToken.imageUrl}
-                        chainId={originToken.chainId}
-                        size={20}
-                      />
-                      <span className="font-medium trails-text-primary text-sm">
-                        {originToken.symbol}
-                      </span>
-                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                    </>
-                  ) : (
-                    <>
-                      <span className="font-medium trails-text-muted text-sm">
-                        Select Token
-                      </span>
-                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                    </>
-                  )}
-                </button>
+                {/* Origin Token Selection */}
+                <div className="relative">
+                  <TokenSelectorButton
+                    token={originToken}
+                    chainId={originToken?.chainId}
+                    onSelect={() => setShowOriginTokenSelector(true)}
+                  />
+                </div>
               </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"}</>
@@ -743,17 +743,59 @@ export const Pay: React.FC<PayProps> = ({
                     <span>&nbsp;</span>
                   )}
                 </div>
-                {/* Token Balance */}
-                <div className="text-xs trails-text-muted">
-                  {originTokenBalance?.balanceFormatted ? (
-                    <>
-                      Balance: {originTokenBalance.balanceFormatted}{" "}
-                      {originToken?.symbol}
-                    </>
-                  ) : (
-                    <span>&nbsp;</span>
-                  )}
-                </div>
+
+                {/* Origin Token Balance and Percentage Buttons */}
+                {originToken && originTokenBalance?.balanceFormatted && (
+                  <div className="flex items-center space-x-2">
+                    <button
+                      type="button"
+                      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(
+                            originTokenBalance.balanceFormatted,
+                          )
+                          if (!Number.isNaN(balance)) {
+                            setTokenAmountForBackend(balance.toFixed(6))
+                          }
+                        }
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          if (originTokenBalance.balanceFormatted) {
+                            const balance = parseFloat(
+                              originTokenBalance.balanceFormatted,
+                            )
+                            if (!Number.isNaN(balance)) {
+                              setTokenAmountForBackend(balance.toFixed(6))
+                            }
+                          }
+                        }
+                      }}
+                      title="Click to use full balance"
+                    >
+                      Balance: {originTokenBalance.balanceFormatted}
+                    </button>
+
+                    {/* Percentage Buttons - Only show if toAmount is not set */}
+                    {!toAmount && (
+                      <PercentageMaxButtons
+                        userBalance={originTokenBalance.balanceFormatted}
+                        isNativeToken={
+                          originToken.contractAddress === zeroAddress ||
+                          originToken.contractAddress === undefined
+                        }
+                        gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                        chainId={originToken.chainId}
+                        onAmountSelect={(amount) => {
+                          setTokenAmountForBackend(amount)
+                        }}
+                        className="opacity-100"
+                      />
+                    )}
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -839,12 +881,7 @@ export const Pay: React.FC<PayProps> = ({
               >
                 <div className="text-left">
                   <div className="font-medium trails-text-primary text-sm">
-                    Pay with
-                    {fundMethod === "qr-code"
-                      ? " QR Code"
-                      : fundMethod === "exchange"
-                        ? " Exchange"
-                        : ""}
+                    Payment method
                   </div>
                 </div>
 
@@ -888,128 +925,64 @@ 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">
+            <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 />
               </div>
 
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center space-x-2 flex-1">
                 {/* Amount Input */}
                 <div className="flex-1">
-                  <div
-                    className="flex items-center justify-start cursor-text"
-                    onClick={() => inputRef.current?.focus()}
-                  >
-                    <div className="flex items-center">
-                      <input
-                        ref={inputRef}
-                        type="text"
-                        value={displayAmount}
-                        onChange={(e) => handleAmountChange(e.target.value)}
-                        placeholder={`0 ${selectedDestToken?.symbol || ""}`}
-                        readOnly={!!toAmount}
-                        className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
-                          isLoadingQuote ? "animate-pulse" : ""
-                        }`}
-                        style={{
-                          fontSize: inputStyles.fontSize,
-                          width: `${Math.max((displayAmount || "0").length - 1 + 0.5, 1)}ch`,
-                          minWidth: "1ch",
-                          maxWidth: "270px",
-                          padding: "0",
-                          margin: "0",
-                          transition: "all 0.1s ease-in-out",
-                        }}
-                        inputMode="decimal"
-                      />
-                      <span
-                        className="font-bold text-gray-400 dark:text-gray-500"
-                        style={{
-                          fontSize: inputStyles.fontSize,
-                          marginLeft: "0.1em",
-                          padding: "0",
-                          transition: "all 0.2s ease-in-out",
-                        }}
-                      >
-                        {selectedDestToken?.symbol?.slice(0, 4) || "TOKEN"}
-                      </span>
-                      {isLoadingQuote && (
-                        <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                      )}
-                    </div>
+                  <div className="flex items-center space-x-2">
+                    <input
+                      ref={inputRef}
+                      type="text"
+                      value={displayAmount}
+                      onChange={(e) => handleAmountChange(e.target.value)}
+                      placeholder={`0 ${selectedDestToken?.symbol || ""}`}
+                      readOnly={!!toAmount}
+                      className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
+                        isLoadingQuote ? "animate-pulse" : ""
+                      }`}
+                      style={inputStyles}
+                    />
+                    {isLoadingQuote && (
+                      <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                    )}
                   </div>
                 </div>
 
-                {/* Destination Token Selection Button */}
-                {toToken ? (
-                  /* Non-clickable display when toToken is provided */
-                  <div className="flex items-center space-x-2 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
-                    {selectedDestToken ? (
-                      <>
-                        <TokenImage
-                          symbol={selectedDestToken.symbol}
-                          imageUrl={selectedDestToken.imageUrl}
-                          chainId={globalDestinationToken?.chainId || toChainId}
-                          size={20}
-                        />
-                        <span className="font-medium trails-text-primary text-sm">
-                          {selectedDestToken.symbol}
-                        </span>
-                      </>
-                    ) : (
-                      <span className="font-medium trails-text-muted text-sm">
-                        Select Token
-                      </span>
-                    )}
-                  </div>
-                ) : (
-                  /* Clickable button when toToken is not provided */
-                  <button
-                    type="button"
-                    onClick={() => setShowDestinationTokenSelector(true)}
-                    className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
-                  >
-                    {selectedDestToken ? (
-                      <>
-                        <TokenImage
-                          symbol={selectedDestToken.symbol}
-                          imageUrl={selectedDestToken.imageUrl}
-                          chainId={globalDestinationToken?.chainId || toChainId}
-                          size={20}
-                        />
-                        <span className="font-medium trails-text-primary text-sm">
-                          {selectedDestToken.symbol}
-                        </span>
-                        <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                      </>
-                    ) : (
-                      <>
-                        <span className="font-medium trails-text-muted text-sm">
-                          Select Token
-                        </span>
-                        <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                      </>
-                    )}
-                  </button>
-                )}
+                {/* Destination Token Selection */}
+                <div className="relative">
+                  <TokenSelectorButton
+                    token={selectedDestToken}
+                    chainId={globalDestinationToken?.chainId || toChainId}
+                    onSelect={() => setShowDestinationTokenSelector(true)}
+                    unselectable={!!toToken}
+                  />
+                </div>
               </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"}</>
                   ) : (
                     <span>&nbsp;</span>
                   )}
                 </div>
-                <div className="text-xs trails-text-muted">
-                  <span>&nbsp;</span>
-                </div>
               </div>
             </div>
           </div>
@@ -1063,6 +1036,13 @@ export const Pay: React.FC<PayProps> = ({
         chainId={originToken?.chainId}
       />
 
+      {/* Quote Details */}
+      {prepareSendQuote && (
+        <div className="mb-4">
+          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+        </div>
+      )}
+
       {/* Pay Button */}
       <form onSubmit={handleSubmit}>
         <button
@@ -1085,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 ||
@@ -1101,13 +1085,6 @@ export const Pay: React.FC<PayProps> = ({
           )}
         </button>
       </form>
-
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="space-y-2">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
-        </div>
-      )}
     </div>
   )
 }