0xtrails 0.2.4 → 0.2.5

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,6 +32,10 @@ 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"
 
 interface PayProps {
   selectedToken?: any // Origin token (optional - user can select)
@@ -328,10 +333,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,21 +424,21 @@ export const Pay: React.FC<PayProps> = ({
     return inputDisplayValue
   }, [inputDisplayValue])
 
-  // Dynamic font size based on input length
+  // Dynamic font size based on input length for destination amount
   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 > 9) {
+      fontSize = "1.25rem"
     } else if (inputLength > 6) {
-      fontSize = "1.125rem"
+      fontSize = "1.5rem"
     } else if (inputLength > 3) {
-      fontSize = "1.25rem"
+      fontSize = "1.75rem"
     } else {
-      fontSize = "1.5rem"
+      fontSize = "2rem"
     }
 
     return {
@@ -440,6 +447,29 @@ export const Pay: React.FC<PayProps> = ({
     }
   }, [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 handleOriginTokenSelect = useCallback(
     (token: any) => {
       const formattedToken = {
@@ -533,7 +563,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -580,7 +609,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -617,11 +645,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("toRecipient")
+
   // 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,7 +687,7 @@ 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>
@@ -643,10 +695,10 @@ export const Pay: React.FC<PayProps> = ({
 
           {/* 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="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">
               {/* 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="text-sm font-medium trails-text-secondary text-left">
                   Pay with
                   {fundMethod === "qr-code"
                     ? " QR Code"
@@ -654,82 +706,38 @@ 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 ${originToken?.symbol || ""}`.trim()}
+                      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 */}
@@ -743,17 +751,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 trails-text-muted cursor-pointer hover:trails-hover-text 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 +889,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,113 +933,46 @@ 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="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">
               {/* Amount to Pay Label */}
               <div className="flex justify-between items-center mb-2">
                 <div className="text-sm font-medium trails-text-secondary text-left">
                   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 */}
@@ -1007,9 +985,6 @@ export const Pay: React.FC<PayProps> = ({
                     <span>&nbsp;</span>
                   )}
                 </div>
-                <div className="text-xs trails-text-muted">
-                  <span>&nbsp;</span>
-                </div>
               </div>
             </div>
           </div>
@@ -1063,6 +1038,13 @@ export const Pay: React.FC<PayProps> = ({
         chainId={originToken?.chainId}
       />
 
+      {/* Quote Details */}
+      {prepareSendQuote && (
+        <div className="space-y-2">
+          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+        </div>
+      )}
+
       {/* Pay Button */}
       <form onSubmit={handleSubmit}>
         <button
@@ -1101,13 +1083,6 @@ export const Pay: React.FC<PayProps> = ({
           )}
         </button>
       </form>
-
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="space-y-2">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
-        </div>
-      )}
     </div>
   )
 }

package/src/widget/components/PercentageMaxButtons.tsx

@@ -0,0 +1,77 @@
+import type React from "react"
+import {
+  calculateMaxNativeAmount,
+  getDefaultGasCostEstimate,
+} from "../../estimate.js"
+
+interface PercentageMaxButtonsProps {
+  userBalance: string | undefined
+  isNativeToken: boolean
+  gasCostFormatted?: string
+  chainId?: number
+  onAmountSelect: (amount: string) => void
+  className?: string
+}
+
+export const PercentageMaxButtons: React.FC<PercentageMaxButtonsProps> = ({
+  userBalance,
+  isNativeToken,
+  gasCostFormatted,
+  chainId,
+  onAmountSelect,
+  className = "",
+}) => {
+  // Don't render if no balance
+  if (!userBalance) return null
+
+  const handlePercentageClick = (percentage: number) => {
+    const balance = parseFloat(userBalance)
+    if (Number.isNaN(balance)) return
+
+    const amount = (balance * percentage) / 100
+    onAmountSelect(amount.toFixed(6))
+  }
+
+  const handleMaxClick = async () => {
+    if (isNativeToken) {
+      // For native tokens, subtract gas cost
+      // Priority: 1) Use actual gas cost from quote, 2) Fetch real gas price, 3) Fallback to 1% of balance
+      const effectiveGasCost =
+        gasCostFormatted ||
+        (await getDefaultGasCostEstimate(userBalance, chainId))
+      const maxAmount = calculateMaxNativeAmount(userBalance, effectiveGasCost)
+      onAmountSelect(maxAmount)
+    } else {
+      // For ERC20 tokens, use full balance
+      onAmountSelect(userBalance)
+    }
+  }
+
+  return (
+    <div
+      className={`flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${className}`}
+    >
+      <button
+        type="button"
+        onClick={() => handlePercentageClick(20)}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        20%
+      </button>
+      <button
+        type="button"
+        onClick={() => handlePercentageClick(50)}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        50%
+      </button>
+      <button
+        type="button"
+        onClick={handleMaxClick}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        Max
+      </button>
+    </div>
+  )
+}