0xtrails 0.1.3 → 0.1.4

package/src/widget/components/FundSendForm.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Loader2 } from "lucide-react"
+import { ChevronDown, Loader2, RefreshCcw } from "lucide-react"
 import type React from "react"
 import { useEffect, useRef, useState, useCallback, useMemo } from "react"
 import type { Account, WalletClient } from "viem"
@@ -16,6 +16,7 @@ import { TradeType } from "../../prepareSend.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import { formatAmount, formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
 
 interface FundSendFormProps {
   selectedToken: Token
@@ -38,7 +39,7 @@ interface FundSendFormProps {
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
-  mode?: "pay" | "fund" | "earn" | "swap"
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   onNavigateToMeshConnect?: (
     props: {
       toTokenSymbol: string
@@ -78,6 +79,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 }) => {
   // Local state for fund-specific functionality
   const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
+  const [refetchTrigger, setRefetchTrigger] = useState(0)
   // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
   // const [refundAddress, setRefundAddress] = useState<string>(account.address)
 
@@ -122,6 +124,9 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     setSelectedDestinationChain,
     setSelectedDestToken,
     prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   } = useSendForm({
     account,
     // Don't pass toAmount for fund form - user enters input amount
@@ -147,6 +152,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     mode,
     onNavigateToMeshConnect,
     checkoutOnHandlers,
+    refetchTrigger,
   })
 
   // Get source token price for USD conversions
@@ -344,6 +350,11 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
     }, 0)
   }, [tokenAmountForBackend, isInputTypeUsd, sourceTokenPrice])
 
+  // Handle manual quote refetch
+  const handleRefetchQuote = useCallback(() => {
+    setRefetchTrigger((prev) => prev + 1)
+  }, [])
+
   // Dynamic font size based on input length
   const inputStyles = useMemo(() => {
     const inputLength = displayAmount.length
@@ -501,7 +512,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="destination-chain"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Destination Chain
             </label>
@@ -564,7 +575,7 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="token"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Receive Token
             </label>
@@ -630,10 +641,37 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
 
         {/* Receive Section */}
         <div className="space-y-1">
-          <div
-            className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
-          >
-            Receive
+          <div className="flex items-center justify-between">
+            <div
+              className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
+            >
+              Receive
+            </div>
+            <button
+              type="button"
+              onClick={handleRefetchQuote}
+              disabled={
+                isLoadingQuote ||
+                !tokenAmountForBackend ||
+                !selectedDestToken ||
+                !selectedDestinationChain ||
+                !isValidRecipient
+              }
+              className={`p-2 rounded-md transition-colors cursor-pointer ${
+                isLoadingQuote ||
+                !tokenAmountForBackend ||
+                !selectedDestToken ||
+                !selectedDestinationChain ||
+                !isValidRecipient
+                  ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                  : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
+              }`}
+              title="Refetch quote"
+            >
+              <RefreshCcw
+                className={`h-4 w-4 ${isLoadingQuote ? "animate-spin" : ""}`}
+              />
+            </button>
           </div>
 
           <div className="p-2">
@@ -703,6 +741,18 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
         /> */}
 
         {/* Warning Messages - Show only one at a time */}
+        {isSameTokenWithoutCustomCalldata ? (
+          <ErrorDisplay
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            severity="error"
+          />
+        ) : (
+          <ErrorDisplay
+            errorPrettified={quoteErrorPrettified}
+            error={quoteError}
+            severity="warning"
+          />
+        )}
         {prepareSendQuote?.noSufficientBalance ? (
           <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
             <div className="flex items-center space-x-2">
@@ -760,7 +810,8 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
             !isValidRecipient ||
             buttonText === "No quote available" ||
             buttonText === "Getting quote..." ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata
           }
           className={`w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative`}
         >
@@ -769,6 +820,8 @@ export const FundSendForm: React.FC<FundSendFormProps> = ({
               <Loader2 className="w-5 h-5 animate-spin mr-2 text-white dark:text-gray-400" />
               <span>{buttonText}</span>
             </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : !tokenAmountForBackend ||

package/src/widget/components/OriginTransferInformation.tsx

@@ -0,0 +1,59 @@
+import type React from "react"
+import { TokenImage } from "./TokenImage.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import { getTimeAgo } from "../../utils.js"
+
+interface OriginTransferInformationProps {
+  quote: PrepareSendQuote
+  elapsedSeconds: number
+  timestamp?: number
+}
+
+export const OriginTransferInformation: React.FC<
+  OriginTransferInformationProps
+> = ({ quote, elapsedSeconds, timestamp }) => {
+  return (
+    <div className="w-full max-w-sm p-3 trails-border-radius-container trails-bg-secondary trails-text-secondary">
+      <div className="flex items-start justify-between">
+        {/* Left side - Chain and Token images with token name */}
+        <div className="flex items-start space-x-2">
+          {/* Token Image and Name */}
+          <div className="flex items-center space-x-2">
+            <div style={{ width: "24px", height: "24px" }}>
+              <TokenImage
+                imageUrl={quote.originToken.imageUrl}
+                symbol={quote.originToken.symbol}
+                chainId={quote.originChain.id}
+                size={24}
+              />
+            </div>
+            <div className="flex flex-col">
+              <span className="text-xs font-medium text-left text-gray-900 dark:text-white">
+                {quote.originToken.name}
+              </span>
+              <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
+                {getTimeAgo(timestamp)}
+                <span
+                  className="ml-1 font-mono animate-pulse text-gray-500 dark:text-gray-400"
+                  title="Elapsed time"
+                >
+                  {elapsedSeconds}s
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right side - USD value and amount */}
+        <div className="text-right">
+          <div className="text-xs font-medium text-right text-gray-900 dark:text-white">
+            {quote.originAmountUsdDisplay}
+          </div>
+          <div className="text-xs text-gray-600 dark:text-gray-400">
+            {quote.originAmountFormatted} {quote.originToken.symbol}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/widget/components/PaySendForm.tsx

@@ -1,6 +1,6 @@
-import { ChevronDown, Loader2, TrendingUp } from "lucide-react"
+import { ChevronDown, Loader2, RefreshCcw, TrendingUp } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import type { Account, WalletClient } from "viem"
 import { isAddress } from "viem"
 import type { TransactionState } from "../../transactions.js"
@@ -21,6 +21,7 @@ import morphoLogo from "../assets/morpho.svg"
 import { formatUsdAmountDisplay } from "../../tokenBalances.js"
 import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
 
 interface PaySendFormProps {
   selectedToken: Token
@@ -53,7 +54,7 @@ interface PaySendFormProps {
     quote?: PrepareSendQuote | null,
   ) => void
   onAmountUpdate?: (amount: string) => void
-  mode?: "pay" | "fund" | "earn" | "swap"
+  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
   selectedPool?: {
     id: string
     name: string
@@ -105,6 +106,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
 }) => {
   // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
   // const [refundAddress, setRefundAddress] = useState<string>(account.address)
+  const [refetchTrigger, setRefetchTrigger] = useState(0)
   const {
     amount,
     amountRaw,
@@ -141,6 +143,9 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     supportedChains,
     isValidCustomToken,
     prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
   } = useSendForm({
     account,
     toAmount,
@@ -166,6 +171,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     mode,
     onNavigateToMeshConnect,
     checkoutOnHandlers,
+    refetchTrigger,
   })
 
   // Handle amount input changes with decimal validation
@@ -181,6 +187,11 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
     [setAmount],
   )
 
+  // Handle manual quote refetch
+  const handleRefetchQuote = useCallback(() => {
+    setRefetchTrigger((prev) => prev + 1)
+  }, [])
+
   // Call onAmountUpdate when amountRaw changes
   useEffect(() => {
     if (onAmountUpdate) {
@@ -377,7 +388,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="destination-chain"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Destination Chain
             </label>
@@ -440,7 +451,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-4">
             <label
               htmlFor="token"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Receive Token
             </label>
@@ -509,7 +520,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
           <div className="mb-2">
             <label
               htmlFor="amount"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300"
+              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
             >
               Amount to {mode === "earn" ? "Deposit" : "Receive"}
             </label>
@@ -530,7 +541,7 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
             </div>
             {amountUsdDisplay && selectedDestToken?.symbol && (
               <div className="h-6 mt-1">
-                <div className="text-sm text-gray-400">
+                <div className="text-sm text-gray-400 text-left">
                   ≈ {amountUsdDisplay}
                 </div>
               </div>
@@ -541,10 +552,37 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
         {/* Receive Section - Similar to FundSendForm */}
         {(toAmount || toChainId || toToken) && (
           <div className="space-y-1">
-            <div
-              className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
-            >
-              {mode === "earn" ? "Deposit" : "Receive"}
+            <div className="flex items-center justify-between">
+              <div
+                className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
+              >
+                {mode === "earn" ? "Deposit" : "Receive"}
+              </div>
+              <button
+                type="button"
+                onClick={handleRefetchQuote}
+                disabled={
+                  isLoadingQuote ||
+                  !amount ||
+                  !selectedDestToken ||
+                  !selectedDestinationChain ||
+                  !isValidRecipient
+                }
+                className={`p-2 rounded-md transition-colors cursor-pointer ${
+                  isLoadingQuote ||
+                  !amount ||
+                  !selectedDestToken ||
+                  !selectedDestinationChain ||
+                  !isValidRecipient
+                    ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                    : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
+                }`}
+                title="Refetch quote"
+              >
+                <RefreshCcw
+                  className={`h-4 w-4 ${isLoadingQuote ? "animate-spin" : ""}`}
+                />
+              </button>
             </div>
 
             <div className="p-2">
@@ -675,6 +713,18 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
         />
 
         {/* Warning Messages - Show only one at a time */}
+        {isSameTokenWithoutCustomCalldata ? (
+          <ErrorDisplay
+            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
+            severity="error"
+          />
+        ) : (
+          <ErrorDisplay
+            errorPrettified={quoteErrorPrettified}
+            error={quoteError}
+            severity="warning"
+          />
+        )}
         {prepareSendQuote?.noSufficientBalance ? (
           <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
             <div className="flex items-center space-x-2">
@@ -733,7 +783,8 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
             !isValidCustomToken ||
             isLoadingQuote ||
             !prepareSendQuote ||
-            prepareSendQuote?.noSufficientBalance
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata
           }
           className={`w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative`}
         >
@@ -744,6 +795,8 @@ export const PaySendForm: React.FC<PaySendFormProps> = ({
               />
               <span>{buttonText}</span>
             </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
           ) : prepareSendQuote?.noSufficientBalance ? (
             "Insufficient Balance"
           ) : (

package/src/widget/components/QRCodeDeposit.tsx

@@ -23,12 +23,12 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
 
   const eip631Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originAddress}@${quote.originChain.id}`
+    return `ethereum:${quote.originDepositAddress}@${quote.originChain.id}`
   }, [quote])
 
   const eip681Url = useMemo(() => {
     if (!quote) return ""
-    return `ethereum:${quote.originToken.contractAddress}@${quote.originChain.id}/transfer?address=${quote.originAddress}&uint256=${quote.originAmount}`
+    return `ethereum:${quote.originToken.contractAddress}@${quote.originChain.id}/transfer?address=${quote.originDepositAddress}&uint256=${quote.originAmount}`
   }, [quote])
 
   return (
@@ -114,7 +114,7 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                 </span>
                 <a
                   href={getExplorerUrlForAddress({
-                    address: quote.originAddress,
+                    address: quote.originDepositAddress,
                     chainId: quote.originChain.id,
                   })}
                   target="_blank"
@@ -122,8 +122,8 @@ export const QRCodeDeposit: React.FC<QRCodeDepositProps> = ({
                   className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:underline transition-all"
                 >
                   <span>
-                    {quote.originAddress.slice(0, 6)}...
-                    {quote.originAddress.slice(-4)}
+                    {quote.originDepositAddress.slice(0, 6)}...
+                    {quote.originDepositAddress.slice(-4)}
                   </span>
                   <ExternalLink className="w-3 h-3" />
                 </a>

package/src/widget/components/QrCode.tsx

@@ -292,7 +292,7 @@ export const QrCode: React.FC<QrCodeProps> = ({
         width={size}
         height={size}
         viewBox={`0 0 ${size} ${size}`}
-        className="rounded-lg border border-solid border-gray-200 dark:border-gray-700"
+        className="rounded-lg bg-white"
       />
     </div>
   )

package/src/widget/components/QuoteDetails.tsx

@@ -390,7 +390,7 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 </div>
               )}
 
-            {quote?.originAddress && (
+            {quote?.originDepositAddress && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   Origin Deposit Address:
@@ -400,14 +400,14 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
                 </span>
                 <a
                   href={getExplorerUrlForAddress({
-                    address: quote.originAddress,
+                    address: quote.originDepositAddress,
                     chainId: quote.originChain.id,
                   })}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="font-mono text-xs hover:underline flex items-center gap-1 text-gray-700 dark:text-gray-300"
                 >
-                  {truncateAddress(quote.originAddress)}
+                  {truncateAddress(quote.originDepositAddress)}
                   <svg
                     className="w-3 h-3"
                     fill="none"
@@ -426,11 +426,49 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
+            {quote?.destinationDepositAddress &&
+              quote?.destinationDepositAddress !==
+                quote?.originDepositAddress && (
+                <div className="flex justify-between items-center">
+                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+                    Destination Deposit Address:
+                    <Tooltip message="This is the address that will receive the tokens after any swap and/or bridge from the origin chain">
+                      <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                    </Tooltip>
+                  </span>
+                  <a
+                    href={getExplorerUrlForAddress({
+                      address: quote.destinationDepositAddress,
+                      chainId: quote.destinationChain.id,
+                    })}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-mono text-xs hover:underline flex items-center gap-1 text-gray-700 dark:text-gray-300"
+                  >
+                    {truncateAddress(quote.destinationDepositAddress)}
+                    <svg
+                      className="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              )}
+
             {quote?.destinationAddress && (
               <div className="flex justify-between items-center">
                 <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                   Destination Target Address:
-                  <Tooltip message="This is the address that will receive the tokens after any swap and/or bridge">
+                  <Tooltip message="This is the final execution address or recipient address">
                     <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
                   </Tooltip>
                 </span>
@@ -476,28 +514,58 @@ export const QuoteDetails: React.FC<QuoteDetailsProps> = ({
               </div>
             )}
 
-            {quote?.priceImpact != null && (
-              <div className="space-y-1">
-                <div className="flex justify-between items-center">
-                  <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
-                    Price Impact:
-                    <Tooltip message="The percentage change in the token price caused by your trade. Higher impact means your trade affects the market price more, potentially resulting in worse rates.">
-                      <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
-                    </Tooltip>
-                  </span>
-                  <span className="font-medium text-xs text-gray-900 dark:text-white">
-                    {quote.priceImpact}%
-                  </span>
-                </div>
-                {quote.priceImpactUsdDisplay && (
-                  <div className="text-right">
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
-                      ≈ {quote.priceImpactUsdDisplay}
-                    </span>
+            {quote?.priceImpact != null &&
+              (() => {
+                const priceImpactNum = Math.abs(Number(quote.priceImpact))
+                return (
+                  <div className="space-y-1">
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
+                        Price Impact:
+                        <Tooltip message="The percentage change in the token price caused by your trade. Higher impact means your trade affects the market price more, potentially resulting in worse rates.">
+                          <InfoIcon className="w-3 h-3 text-gray-500 dark:text-gray-400 cursor-pointer" />
+                        </Tooltip>
+                      </span>
+                      <span
+                        className={`font-medium text-xs flex items-center gap-1 ${
+                          priceImpactNum > 5
+                            ? "text-red-600 dark:text-red-400"
+                            : priceImpactNum > 0.5
+                              ? "text-orange-600 dark:text-orange-400"
+                              : "text-gray-900 dark:text-white"
+                        }`}
+                      >
+                        {priceImpactNum > 0.5 && (
+                          <span title="High price impact">
+                            <svg
+                              className="w-3 h-3"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                              aria-hidden="true"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                              />
+                            </svg>
+                          </span>
+                        )}
+                        {quote.priceImpact}%
+                      </span>
+                    </div>
+                    {quote.priceImpactUsdDisplay && (
+                      <div className="text-right">
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          ≈ {quote.priceImpactUsdDisplay}
+                        </span>
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
-            )}
+                )
+              })()}
 
             {quote?.fees?.totalFeeAmountUsd != null && (
               <div className="flex justify-between items-center">