0xtrails 0.2.5 → 0.3.0

package/src/widget/components/PoolDeposit.tsx

@@ -13,7 +13,6 @@ import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import { useSendForm } from "../hooks/useSendForm.js"
-import { TradeType } from "../../prepareSend.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useEarnPool } from "../hooks/useEarnPool.js"
 import { useTokenList } from "../hooks/useTokenList.js"
@@ -32,13 +31,15 @@ import { useAmountUsd } from "../hooks/useAmountUsd.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
-import type { PrepareSendQuote } from "../../prepareSend.js"
+import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { FeeOptions } from "./FeeOptions.js"
 
 interface PoolDepositProps {
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
   onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
@@ -46,7 +47,6 @@ interface PoolDepositProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -63,6 +63,7 @@ interface PoolDepositProps {
   recentTokens?: SupportedToken[]
   onRecentTokenSelect?: (token: SupportedToken) => void
   onTrackToken?: (token: any) => void
+  onPoolSelectorStateChange?: (isShowing: boolean) => void
 }
 
 export const PoolDeposit: React.FC<PoolDepositProps> = ({
@@ -75,7 +76,6 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -84,6 +84,7 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   recentTokens,
   onRecentTokenSelect,
   onTrackToken,
+  onPoolSelectorStateChange,
 }) => {
   const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
@@ -115,6 +116,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     isSubmitting,
     buttonText,
     isValidRecipient,
+    feeOptions,
+    selectedFeeToken,
+    setSelectedFeeToken,
   } = useSendForm({
     account,
     toAmount: undefined,
@@ -127,10 +131,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
+    onSend,
     onConfirm,
     onComplete,
-    onSend,
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: TradeType.EXACT_INPUT,
@@ -180,12 +183,22 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     }
   }, [])
 
-  const handleAmountChange = (value: string) => {
-    // Validate decimal places (max 8 decimals)
-    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-    if (!decimalMatch && value !== "") {
-      return // Don't update if more than 8 decimals
+  // Notify parent component about pool selector and token selector visibility
+  useEffect(() => {
+    if (onPoolSelectorStateChange) {
+      // Hide tabs when showing EarnPools selector, token selector, or chain list
+      onPoolSelectorStateChange(
+        showEarnPools || showOriginTokenSelector || showOriginChainList,
+      )
     }
+  }, [
+    showEarnPools,
+    showOriginTokenSelector,
+    showOriginChainList,
+    onPoolSelectorStateChange,
+  ])
+
+  const handleAmountChange = (value: string) => {
     setAmount(value)
     setSendFormAmount(value) // Sync with useSendForm for quote functionality
   }
@@ -264,268 +277,221 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
 
   return (
     <div className="space-y-2">
-      <div className="space-y-1">
-        {/* Origin Token Selection */}
-        <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">
-          {/* Deposit Label */}
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-semibold trails-text-secondary text-left">
-              From
-            </div>
-            <FundingMethodSelectorButton />
+      {/* Input Section - Amount + Token Selection */}
+      <div className="pt-4 pb-4 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">
+        {/* Deposit Label */}
+        <div className="mb-4 flex justify-between items-center">
+          <div className="text-sm font-medium trails-text-secondary text-left m-0">
+            {mode === "fund" ? "Payment method" : "From"}
           </div>
+          <FundingMethodSelectorButton />
+        </div>
 
-          <div className="flex items-center space-x-2">
-            {/* Amount Input */}
-            <div className="flex-1">
-              <button
-                type="button"
-                className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
-                onClick={() => inputRef.current?.focus()}
-              >
-                <div className="flex items-center">
-                  <input
-                    ref={inputRef}
-                    type="text"
-                    value={amount}
-                    onChange={(e) => handleAmountChange(e.target.value)}
-                    placeholder="0"
-                    className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
-                      isLoadingQuote ? "animate-pulse" : ""
-                    }`}
-                    style={{
-                      fontSize:
-                        amount.length > 12
-                          ? "0.875rem"
-                          : amount.length > 9
-                            ? "1rem"
-                            : amount.length > 6
-                              ? "1.125rem"
-                              : amount.length > 3
-                                ? "1.25rem"
-                                : "1.5rem",
-                      width: `${Math.max((amount || "0").length, 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:
-                        amount.length > 12
-                          ? "0.875rem"
-                          : amount.length > 9
-                            ? "1rem"
-                            : amount.length > 6
-                              ? "1.125rem"
-                              : amount.length > 3
-                                ? "1.25rem"
-                                : "1.5rem",
-                      marginLeft: "0.1em",
-                      padding: "0",
-                      transition: "all 0.2s ease-in-out",
-                    }}
-                  >
-                    {originToken?.symbol.slice(0, 4) || ""}
-                  </span>
-                  {isLoadingQuote && (
-                    <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                  )}
-                </div>
-              </button>
+        <div className="flex items-center space-x-2 flex-1">
+          {/* Amount Input */}
+          <div className="flex-1">
+            <div className="flex items-center space-x-2">
+              <DynamicSizeInputField
+                ref={inputRef}
+                value={amount}
+                onChange={(e) => handleAmountChange(e.target.value)}
+                isLoading={isLoadingQuote}
+                variant="default"
+              />
+              {isLoadingQuote && (
+                <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+              )}
             </div>
+          </div>
 
-            {/* Token Selection Button */}
+          {/* Token Selection Button */}
+          <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">
-            {/* USD Amount */}
-            <div className="text-xs trails-text-muted">
-              {originToken?.symbol && amount ? (
-                <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
-              ) : (
-                <span>&nbsp;</span>
-              )}
+        {/* Bottom Info Row */}
+        <div className="mt-4 flex justify-between items-center">
+          {/* USD Amount */}
+          {originToken?.symbol && (
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              ≈ {underlyingTokenUsdDisplay || "$0.00"}
             </div>
+          )}
 
-            {/* Origin Token Balance and Percentage Buttons */}
-            {originToken && 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={() => handleAmountSelect(balanceFormatted || "0")}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      handleAmountSelect(balanceFormatted || "0")
-                    }
-                  }}
-                  title="Click to use full balance"
-                >
-                  Balance:{" "}
-                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
-                </button>
+          {/* Origin Token Balance and Percentage Buttons */}
+          {originToken && 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={() => handleAmountSelect(balanceFormatted || "0")}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    handleAmountSelect(balanceFormatted || "0")
+                  }
+                }}
+                title="Click to use full balance"
+              >
+                Balance:{" "}
+                {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
+              </button>
 
-                {/* Percentage Buttons */}
-                <PercentageMaxButtons
-                  userBalance={balanceFormatted}
-                  isNativeToken={originToken.contractAddress === zeroAddress}
-                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                  chainId={originToken.chainId}
-                  onAmountSelect={handleAmountSelect}
-                  className="opacity-100"
-                />
-              </div>
-            )}
-          </div>
+              {/* Percentage Buttons */}
+              <PercentageMaxButtons
+                userBalance={balanceFormatted}
+                isNativeToken={originToken.contractAddress === zeroAddress}
+                gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                chainId={originToken.chainId}
+                onAmountSelect={handleAmountSelect}
+                className="opacity-100"
+              />
+            </div>
+          )}
         </div>
+      </div>
 
-        {/* Arrow Down Between Sections */}
-        <div className="relative">
-          <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary transition-colors border-2 border-white dark:border-gray-800 z-1">
-            <ArrowDown
-              className="w-5 h-5 text-gray-900 dark:text-white"
-              strokeWidth={2.5}
-            />
-          </div>
-        </div>
+      {/* Flip Button - Absolutely Positioned */}
+      <div className="relative">
+        <button
+          type="button"
+          className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary hover:trails-hover-bg transition-colors cursor-pointer border-2 border-white dark:border-gray-800"
+        >
+          <ArrowDown
+            className="w-5 h-5 text-gray-900 dark:text-white"
+            strokeWidth={2.5}
+          />
+        </button>
+      </div>
 
-        {/* Destination Vault Selection */}
-        <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
-          {selectedPool ? (
-            <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
-              {/* Vault Label */}
-              <div className="flex justify-between items-center mb-2">
-                <div className="text-sm font-semibold trails-text-secondary text-left">
-                  Vault
-                </div>
+      {/* Destination Vault Selection */}
+      <div className="mb-4 trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
+        {selectedPool ? (
+          <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
+            {/* Vault Label */}
+            <div className="flex justify-between items-center mb-2">
+              <div className="text-sm font-semibold trails-text-secondary text-left">
+                Vault
               </div>
+            </div>
 
-              <div className="px-1">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-3">
-                    <div style={{ width: "32px", height: "32px" }}>
-                      <a
-                        href={getExplorerUrlForAddress({
-                          address: selectedPool.token.address,
-                          chainId: selectedPool.chainId,
-                        })}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="cursor-pointer"
-                      >
-                        <TokenImage
-                          symbol={selectedPool.token.symbol}
-                          imageUrl={selectedPool.token.logoUrl}
-                          chainId={selectedPool.chainId}
-                          contractAddress={selectedPool.token.address}
-                          size={32}
-                        />
-                      </a>
-                    </div>
-                    <div>
-                      <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                        {selectedPool.poolUrl ? (
+            <div className="px-1">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div style={{ width: "32px", height: "32px" }}>
+                    <a
+                      href={getExplorerUrlForAddress({
+                        address: selectedPool.token.address,
+                        chainId: selectedPool.chainId,
+                      })}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="cursor-pointer"
+                    >
+                      <TokenImage
+                        symbol={selectedPool.token.symbol}
+                        imageUrl={selectedPool.token.logoUrl}
+                        chainId={selectedPool.chainId}
+                        contractAddress={selectedPool.token.address}
+                        size={32}
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-white text-sm">
+                      {selectedPool.poolUrl ? (
+                        <a
+                          href={selectedPool.poolUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:underline cursor-pointer"
+                        >
+                          {selectedPool.name}
+                        </a>
+                      ) : (
+                        selectedPool.name
+                      )}
+                    </h3>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                        {selectedPool.protocol === "Aave" && (
+                          <img
+                            src={aaveLogo}
+                            alt="Aave"
+                            className="w-3 h-3 mr-1"
+                          />
+                        )}
+                        {selectedPool.protocol === "Morpho" && (
+                          <img
+                            src={morphoLogo}
+                            alt="Morpho"
+                            className="w-3 h-3 mr-1"
+                          />
+                        )}
+                        {selectedPool.protocolUrl ? (
                           <a
-                            href={selectedPool.poolUrl}
+                            href={selectedPool.protocolUrl}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="hover:underline cursor-pointer"
                           >
-                            {selectedPool.name}
+                            {selectedPool.protocol}
                           </a>
                         ) : (
-                          selectedPool.name
+                          selectedPool.protocol
                         )}
-                      </h3>
-                      <div className="flex items-center space-x-2">
-                        <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                          {selectedPool.protocol === "Aave" && (
-                            <img
-                              src={aaveLogo}
-                              alt="Aave"
-                              className="w-3 h-3 mr-1"
-                            />
-                          )}
-                          {selectedPool.protocol === "Morpho" && (
-                            <img
-                              src={morphoLogo}
-                              alt="Morpho"
-                              className="w-3 h-3 mr-1"
-                            />
-                          )}
-                          {selectedPool.protocolUrl ? (
-                            <a
-                              href={selectedPool.protocolUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="hover:underline cursor-pointer"
-                            >
-                              {selectedPool.protocol}
-                            </a>
-                          ) : (
-                            selectedPool.protocol
-                          )}
-                        </span>
-                      </div>
+                      </span>
                     </div>
                   </div>
-                  <button
-                    type="button"
-                    title="Select Vault"
-                    onClick={() => setShowEarnPools(true)}
-                    className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
-                  >
-                    <div>
-                      <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
-                        <TrendingUp className="w-3 h-3" />
-                        <span className="font-semibold text-sm">
-                          {selectedPool.apy.toFixed(1)}% APY
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                        TVL: {formatTvl(selectedPool.tvl)}
-                      </p>
-                    </div>
-                    <ChevronRight className="w-4 h-4 text-gray-400" />
-                  </button>
                 </div>
+                <button
+                  type="button"
+                  title="Select Vault"
+                  onClick={() => setShowEarnPools(true)}
+                  className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
+                >
+                  <div>
+                    <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
+                      <TrendingUp className="w-3 h-3" />
+                      <span className="font-semibold text-sm">
+                        {selectedPool.apy.toFixed(1)}% APY
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      TVL: {formatTvl(selectedPool.tvl)}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-gray-400" />
+                </button>
               </div>
             </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setShowEarnPools(true)}
-              className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3 flex-1">
-                  <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                    <Search className="w-4 h-4 text-gray-400" />
-                  </div>
-                  <div className="text-left flex-1">
-                    <div className="font-semibold text-gray-900 dark:text-white text-sm">
-                      Select vault to earn yield with
-                    </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setShowEarnPools(true)}
+            className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3 flex-1">
+                <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                  <Search className="w-4 h-4 text-gray-400" />
+                </div>
+                <div className="text-left flex-1">
+                  <div className="font-semibold text-gray-900 dark:text-white text-sm">
+                    Select vault to earn yield with
                   </div>
                 </div>
-                <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
               </div>
-            </button>
-          )}
-        </div>
+              <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+            </div>
+          </button>
+        )}
       </div>
 
       {prepareSendQuote?.noSufficientBalance ? (
@@ -552,10 +518,23 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
         </div>
       ) : null}
 
+      {/* Fee Options */}
+      <FeeOptions
+        feeOptions={feeOptions || []}
+        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>
       )}