0xtrails 0.2.2 → 0.2.5

package/src/widget/components/FundingMethodSelectorButton.tsx

@@ -0,0 +1,60 @@
+import { ChevronRight, QrCode, Send } from "lucide-react"
+import type React from "react"
+import { truncateAddress } from "../../utils.js"
+import { useAccount } from "wagmi"
+import { Identicon } from "./Identicon.js"
+import { useBack } from "../hooks/useBack.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
+
+export const FundingMethodSelectorButton: React.FC = () => {
+  const { address, isConnected } = useAccount()
+  const { setCurrentScreenWithBack } = useBack()
+  const { selectedFundMethod } = useSelectedFundMethod()
+
+  const handleClick = () => {
+    if (isConnected && address) {
+      // If wallet is connected, go to fund methods
+      setCurrentScreenWithBack("fund-methods")
+    } else {
+      // If no wallet connected, go to connect wallet
+      setCurrentScreenWithBack("connect")
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="flex items-center space-x-2 text-blue-500 hover:text-blue-600 transition-colors cursor-pointer bg-transparent border-none p-0"
+      title={
+        isConnected && address ? "Select funding method" : "Connect wallet"
+      }
+    >
+      {isConnected && address ? (
+        selectedFundMethod === "qr-code" ? (
+          <>
+            <QrCode className="w-4 h-4" />
+            <span className="text-sm font-medium">QR Code</span>
+          </>
+        ) : selectedFundMethod === "exchange" ? (
+          <>
+            <Send className="w-4 h-4" />
+            <span className="text-sm font-medium">Exchange</span>
+          </>
+        ) : (
+          <>
+            <Identicon value={address} size={16} />
+            <span className="text-sm font-medium">
+              {truncateAddress(address, 4, 2)}
+            </span>
+          </>
+        )
+      ) : (
+        <span className="text-sm font-medium">Connect Wallet</span>
+      )}
+      <ChevronRight className="w-4 h-4" />
+    </button>
+  )
+}
+
+export default FundingMethodSelectorButton

package/src/widget/components/Modal.tsx

@@ -73,9 +73,13 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
               <button
                 type="button"
                 onClick={onClose}
-                className="absolute right-2 top-2 p-1 rounded-full transition-colors cursor-pointer z-10 hover:bg-gray-100 text-gray-600 dark:hover:bg-gray-800 dark:text-gray-400 z-20"
+                className="absolute right-4 top-6 flex h-8 w-8 justify-center items-center rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 z-20"
+                title="Close"
               >
-                <X className="h-4 w-4" />
+                <X
+                  className="h-4 w-4"
+                  style={{ transform: "translate(0, -2px)" }}
+                />
               </button>
               {children}
             </motion.div>

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)
@@ -45,6 +50,7 @@ interface PayProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   gasless?: boolean
+  isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -82,6 +88,7 @@ export const Pay: React.FC<PayProps> = ({
   onSend,
   paymasterUrls,
   gasless,
+  isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -143,6 +150,18 @@ export const Pay: React.FC<PayProps> = ({
     allSupportedTokens: true, // Show all tokens for destination selection
   })
 
+  // Get origin token balance for display
+  const originTokenBalance = useMemo(() => {
+    if (!originToken || !filteredTokensFormatted) return null
+
+    return filteredTokensFormatted.find(
+      (token) =>
+        token.contractAddress?.toLowerCase() ===
+          originToken.contractAddress?.toLowerCase() &&
+        token.chainId === originToken.chainId,
+    )
+  }, [originToken, filteredTokensFormatted])
+
   // Use useSendForm for quote functionality with EXACT_OUTPUT trade type
   const {
     amountUsdDisplay,
@@ -314,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) {
@@ -403,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 {
@@ -426,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 = {
@@ -519,7 +563,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -566,7 +609,6 @@ export const Pay: React.FC<PayProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -603,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"
@@ -621,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>
@@ -629,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"
@@ -640,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 */}
@@ -729,9 +751,59 @@ export const Pay: React.FC<PayProps> = ({
                     <span>&nbsp;</span>
                   )}
                 </div>
-                <div className="text-xs trails-text-muted">
-                  <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>
@@ -817,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>
 
@@ -866,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 */}
@@ -985,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>
@@ -999,6 +996,7 @@ export const Pay: React.FC<PayProps> = ({
         fundMethod={fundMethod}
         isSenderContractOnOrigin={isSenderContractOnOrigin}
         isSenderContractOnDestination={isSenderContractOnDestination}
+        isSequenceWallet={isSequenceWallet}
       />
 
       {/* Error Display */}
@@ -1040,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
@@ -1078,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>
   )
 }