@b3dotfun/sdk 0.0.49 → 0.0.50-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.49",
+  "version": "0.0.50-alpha.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -295,8 +295,8 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-tooltip": "1.1.8",
-    "@reservoir0x/relay-kit-ui": "2.17.2",
-    "@reservoir0x/relay-sdk": "2.4.0",
+    "@relayprotocol/relay-kit-ui": "5.0.3",
+    "@relayprotocol/relay-sdk": "3.0.0",
     "@solana/spl-token": "^0.4.13",
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
@@ -374,7 +374,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",
-    "thirdweb": "5.108.9",
+    "thirdweb": "5.108.14",
     "three": "^0.175.0",
     "viem": "^2.28.1",
     "wagmi": "^2.14.15"

package/src/anyspend/constants/index.ts

@@ -12,7 +12,7 @@ export const SOLANA_ASSOCIATED_TOKEN_ACCOUNT_PROGRAM_ID = "ATokenGPvbdGVxr1b2hvZ
 export const SOLANA_TOKEN_2022_PROGRAM_ID = "TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb";
 
 export const B3_TOKEN: components["schemas"]["Token"] = {
-  chainId: 8453,
+  chainId: base.id,
   address: "0xb3b32f9f8827d4634fe7d973fa1034ec9fddb3b3",
   decimals: 18,
   name: "B3",
@@ -22,6 +22,17 @@ export const B3_TOKEN: components["schemas"]["Token"] = {
   },
 };
 
+export const ANYSPEND_TOKEN: components["schemas"]["Token"] = {
+  chainId: base.id,
+  address: "0xc17dda248e2d50fc006d8febb5a406dd31972712",
+  decimals: 18,
+  name: "Anyspend",
+  symbol: "ANY",
+  metadata: {
+    logoURI: "https://cdn.b3.fun/anyspend_64x64.png",
+  },
+};
+
 export const USDC_BASE: components["schemas"]["Token"] = {
   symbol: "USDC",
   chainId: base.id,

package/src/anyspend/react/components/AnySpend.tsx

@@ -40,6 +40,7 @@ import { OrderHistory } from "./common/OrderHistory";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
+import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
@@ -60,6 +61,7 @@ export enum PanelView {
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
   POINTS_DETAIL,
+  FEE_DETAIL,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -607,9 +609,20 @@ function AnySpendInner({
     },
   });
 
+  // Check if it's a same-chain same-token swap
+  const isSameChainSameToken = useMemo(() => {
+    return (
+      activeTab === "crypto" &&
+      selectedSrcChainId === selectedDstChainId &&
+      selectedSrcToken.address.toLowerCase() === selectedDstToken.address.toLowerCase()
+    );
+  }, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
+
   // Determine button state and text
   const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
     if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
+    if (isSameChainSameToken)
+      return { text: "Select a different token or chain", disable: true, error: false, loading: false };
     if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
     if (!recipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
     if (isCreatingOrder || isCreatingOnrampOrder)
@@ -646,6 +659,7 @@ function AnySpendInner({
     return { text: "Buy", disable: false, error: false, loading: false };
   }, [
     activeInputAmountInWei,
+    isSameChainSameToken,
     isLoadingAnyspendQuote,
     recipientAddress,
     isCreatingOrder,
@@ -903,6 +917,7 @@ function AnySpendInner({
             refundTxs={oat.data.refundTxs}
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            points={oat.data.points || undefined}
             onBack={() => {
               setOrderId(undefined);
               navigateBack();
@@ -953,11 +968,13 @@ function AnySpendInner({
             setSelectedSrcToken={setSelectedSrcToken}
             srcAmount={srcAmount}
             setSrcAmount={setSrcAmount}
+            isSrcInputDirty={isSrcInputDirty}
             setIsSrcInputDirty={setIsSrcInputDirty}
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward")}
             anyspendQuote={anyspendQuote}
             onTokenSelect={onTokenSelect}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
           />
         ) : (
           <motion.div
@@ -989,6 +1006,7 @@ function AnySpendInner({
               hideDstToken={isBuyMode}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
+              onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
               customUsdInputValues={customUsdInputValues}
             />
           </motion.div>
@@ -1044,12 +1062,14 @@ function AnySpendInner({
             selectedDstChainId={selectedDstChainId}
             setSelectedDstChainId={setSelectedDstChainId}
             setSelectedDstToken={setSelectedDstToken}
+            isSrcInputDirty={isSrcInputDirty}
             onChangeDstAmount={value => {
               setIsSrcInputDirty(false);
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
             onShowPointsDetail={() => navigateToPanel(PanelView.POINTS_DETAIL, "forward")}
+            onShowFeeDetail={() => navigateToPanel(PanelView.FEE_DETAIL, "forward")}
           />
         )}
       </div>
@@ -1166,6 +1186,16 @@ function AnySpendInner({
     <PointsDetailPanel pointsAmount={anyspendQuote?.data?.pointsAmount || 0} onBack={navigateBack} />
   );
 
+  const feeDetailView = anyspendQuote?.data?.fee ? (
+    <FeeDetailPanel
+      fee={anyspendQuote.data.fee}
+      transactionAmountUsd={
+        activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp)
+      }
+      onBack={navigateBack}
+    />
+  ) : null;
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1231,6 +1261,9 @@ function AnySpendInner({
             <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
               {pointsDetailView}
             </div>,
+            <div key="fee-detail-view" className={cn(mode === "page" && "p-6")}>
+              {feeDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -22,6 +22,7 @@ import {
   TextShimmer,
   Tooltip,
   TooltipContent,
+  TooltipProvider,
   TooltipTrigger,
   TransitionPanel,
   useAccountWallet,
@@ -37,7 +38,7 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
 import invariant from "invariant";
-import { ChevronRight, ChevronRightCircle, Loader2 } from "lucide-react";
+import { ChevronRight, ChevronRightCircle, Info, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -45,6 +46,7 @@ import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
+import { FeeBreakDown } from "./common/FeeBreakDown";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
@@ -77,6 +79,7 @@ function generateGetRelayQuoteRequest({
   contractType,
   encodedData,
   spenderAddress,
+  onrampVendor,
 }: {
   orderType: components["schemas"]["Order"]["type"];
   srcChainId: number;
@@ -90,6 +93,7 @@ function generateGetRelayQuoteRequest({
   contractType?: components["schemas"]["NftContract"]["type"];
   encodedData: string;
   spenderAddress?: string;
+  onrampVendor?: components["schemas"]["OnrampMetadata"]["vendor"];
 }): GetQuoteRequest {
   switch (orderType) {
     case "mint_nft": {
@@ -105,6 +109,7 @@ function generateGetRelayQuoteRequest({
         contractAddress: contractAddress,
         tokenId: tokenId,
         contractType: contractType,
+        onrampVendor,
       };
     }
     case "join_tournament": {
@@ -117,6 +122,7 @@ function generateGetRelayQuoteRequest({
         recipientAddress,
         price: dstAmount,
         contractAddress: contractAddress,
+        onrampVendor,
       };
     }
     case "fund_tournament": {
@@ -129,6 +135,7 @@ function generateGetRelayQuoteRequest({
         recipientAddress,
         fundAmount: dstAmount,
         contractAddress: contractAddress,
+        onrampVendor,
       };
     }
     case "custom": {
@@ -145,6 +152,7 @@ function generateGetRelayQuoteRequest({
           to: contractAddress,
           spenderAddress: spenderAddress,
         },
+        onrampVendor,
       };
     }
     default: {
@@ -336,6 +344,7 @@ function AnySpendCustomInner({
       contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
+      onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
     });
   }, [
     activeTab,
@@ -351,6 +360,7 @@ function AnySpendCustomInner({
     spenderAddress,
     srcChainId,
     srcToken,
+    selectedFiatPaymentMethod,
   ]);
   const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote(getRelayQuoteRequest);
 
@@ -960,14 +970,40 @@ function AnySpendCustomInner({
                   className="relative flex w-full items-center justify-between"
                 >
                   <div className="flex items-center gap-2">
-                    <span className="text-as-tertiarry text-sm">
+                    <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
                       Total <span className="text-as-tertiarry">(with fee)</span>
+                      {anyspendQuote?.data?.fee && (
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                                <Info className="h-4 w-4" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="top">
+                              <FeeBreakDown fee={anyspendQuote.data.fee} />
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      )}
                     </span>
                     {renderPointsBadge()}
                   </div>
-                  <span className="text-as-primary font-semibold">
-                    {formattedSrcAmount || "--"} {srcToken.symbol}
-                  </span>
+                  <div className="flex flex-col items-end gap-0.5">
+                    <span className="text-as-primary font-semibold">
+                      {formattedSrcAmount || "--"} {srcToken.symbol}
+                    </span>
+                    {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
+                      <span className="text-as-secondary text-xs">
+                        incl. $
+                        {(
+                          (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                          10000
+                        ).toFixed(2)}{" "}
+                        fee
+                      </span>
+                    )}
+                  </div>
                 </motion.div>
               </div>
             </div>
@@ -1086,12 +1122,38 @@ function AnySpendCustomInner({
                 className="relative flex w-full items-center justify-between"
               >
                 <div className="flex items-center gap-2">
-                  <span className="text-as-tertiarry text-sm">
+                  <span className="text-as-tertiarry flex items-center gap-1.5 text-sm">
                     Total <span className="text-as-tertiarry">(USD)</span>
+                    {anyspendQuote?.data?.fee && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+                              <Info className="h-4 w-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            <FeeBreakDown fee={anyspendQuote.data.fee} />
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
                   </span>
                   {renderPointsBadge()}
                 </div>
-                <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
+                <div className="flex flex-col items-end gap-0.5">
+                  <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
+                  {anyspendQuote?.data?.fee?.type === "stripeweb2_fee" && anyspendQuote.data.fee.originalAmount && (
+                    <span className="text-as-secondary text-xs">
+                      incl. $
+                      {(
+                        (Number(anyspendQuote.data.fee.originalAmount) - Number(anyspendQuote.data.fee.finalAmount)) /
+                        1e6
+                      ).toFixed(2)}{" "}
+                      fee
+                    </span>
+                  )}
+                </div>
               </motion.div>
             </div>
 

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -12,6 +12,7 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFing
 import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
+import { FeeDetailPanel } from "./common/FeeDetailPanel";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
@@ -80,6 +81,7 @@ function AnySpendDepositHypeInner({
     srcAmount,
     setSrcAmount,
     dstAmount,
+    isSrcInputDirty,
     setIsSrcInputDirty,
     selectedCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
@@ -207,6 +209,7 @@ function AnySpendDepositHypeInner({
               setSelectedSrcToken={setSelectedSrcToken}
               srcAmount={srcAmount}
               setSrcAmount={setSrcAmount}
+              isSrcInputDirty={isSrcInputDirty}
               setIsSrcInputDirty={setIsSrcInputDirty}
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
@@ -236,6 +239,7 @@ function AnySpendDepositHypeInner({
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
                 anyspendQuote={anyspendQuote}
                 onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+                onShowFeeDetail={() => setActivePanel(PanelView.FEE_DETAIL)}
                 customUsdInputValues={customUsdInputValues}
               />
             </motion.div>
@@ -272,12 +276,14 @@ function AnySpendDepositHypeInner({
               selectedDstChainId={base.id}
               setSelectedDstChainId={() => {}}
               setSelectedDstToken={() => {}}
+              isSrcInputDirty={isSrcInputDirty}
               onChangeDstAmount={value => {
                 setIsSrcInputDirty(false);
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
               onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
+              onShowFeeDetail={() => setActivePanel(PanelView.FEE_DETAIL)}
             />
           )}
         </div>
@@ -410,6 +416,7 @@ function AnySpendDepositHypeInner({
               setActivePanel(PanelView.MAIN);
             }}
             disableUrlParamManagement
+            points={oat.data.points || undefined}
           />
         )}
       </div>
@@ -470,6 +477,20 @@ function AnySpendDepositHypeInner({
     />
   );
 
+  const feeDetailView = anyspendQuote?.data?.fee ? (
+    <FeeDetailPanel
+      fee={anyspendQuote.data.fee}
+      transactionAmountUsd={
+        paymentType === "fiat"
+          ? parseFloat(srcAmount)
+          : anyspendQuote.data.currencyIn?.amountUsd
+            ? Number(anyspendQuote.data.currencyIn.amountUsd)
+            : undefined
+      }
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  ) : null;
+
   // If showing token selection, render with panel transitions
   return (
     <StyleRoot>
@@ -522,6 +543,9 @@ function AnySpendDepositHypeInner({
             <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
               {pointsDetailView}
             </div>,
+            <div key="fee-detail-view" className={cn(mode === "page" && "p-6")}>
+              {feeDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

package/src/anyspend/react/components/common/CryptoPaySection.tsx

@@ -2,7 +2,7 @@ import { useAccountWallet, useProfile, useTokenData } from "@b3dotfun/sdk/global
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { components } from "../../../types/api";
@@ -18,6 +18,7 @@ interface CryptoPaySectionProps {
   setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
   srcAmount: string;
   setSrcAmount: (amount: string) => void;
+  isSrcInputDirty: boolean;
   setIsSrcInputDirty: (dirty: boolean) => void;
   // Payment method state
   selectedCryptoPaymentMethod: CryptoPaymentMethodType;
@@ -26,6 +27,8 @@ interface CryptoPaySectionProps {
   anyspendQuote?: any;
   // Token selection callback
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
+  // Fee detail callback
+  onShowFeeDetail?: () => void;
 }
 
 export function CryptoPaySection({
@@ -35,11 +38,13 @@ export function CryptoPaySection({
   setSelectedSrcToken,
   srcAmount,
   setSrcAmount,
+  isSrcInputDirty,
   setIsSrcInputDirty,
   selectedCryptoPaymentMethod,
   onSelectCryptoPaymentMethod,
   anyspendQuote,
   onTokenSelect,
+  onShowFeeDetail,
 }: CryptoPaySectionProps) {
   const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
@@ -89,7 +94,14 @@ export function CryptoPaySection({
       className="pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
     >
       <div className="flex items-center justify-between">
-        <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
+        <div className="text-as-primary/50 flex h-7 items-center gap-1.5 text-sm">
+          Pay
+          {!isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (
+            <button onClick={onShowFeeDetail} className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+              <Info className="h-4 w-4" />
+            </button>
+          )}
+        </div>
         <button
           className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
           onClick={onSelectCryptoPaymentMethod}

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -2,7 +2,7 @@ import { formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
@@ -23,6 +23,7 @@ interface CryptoReceiveSectionProps {
   selectedDstChainId?: number;
   setSelectedDstChainId?: (chainId: number) => void;
   setSelectedDstToken?: (token: components["schemas"]["Token"]) => void;
+  isSrcInputDirty: boolean;
   onChangeDstAmount?: (value: string) => void;
   // Quote data
   anyspendQuote?: any;
@@ -31,6 +32,8 @@ interface CryptoReceiveSectionProps {
   dstTokenLogoURI?: string;
   // Points navigation
   onShowPointsDetail?: () => void;
+  // Fee detail navigation
+  onShowFeeDetail?: () => void;
 }
 
 export function CryptoReceiveSection({
@@ -44,11 +47,13 @@ export function CryptoReceiveSection({
   selectedDstChainId,
   setSelectedDstChainId,
   setSelectedDstToken,
+  isSrcInputDirty,
   onChangeDstAmount,
   anyspendQuote,
   dstTokenSymbol,
   dstTokenLogoURI,
   onShowPointsDetail,
+  onShowFeeDetail,
 }: CryptoReceiveSectionProps) {
   const featureFlags = useFeatureFlags();
 
@@ -60,7 +65,14 @@ export function CryptoReceiveSection({
       className="receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
     >
       <div className="flex w-full items-center justify-between">
-        <div className="text-as-primary/50 flex h-7 items-center text-sm">{isDepositMode ? "Deposit" : "Receive"}</div>
+        <div className="text-as-primary/50 flex h-7 items-center gap-1.5 text-sm">
+          {isDepositMode ? "Deposit" : "Receive"}
+          {isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (
+            <button onClick={onShowFeeDetail} className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
+              <Info className="h-4 w-4" />
+            </button>
+          )}
+        </div>
         {selectedRecipientAddress ? (
           <button
             className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
@@ -118,7 +130,7 @@ export function CryptoReceiveSection({
             (() => {
               const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
                 if (!inputUsd || !outputUsd) {
-                  return { percentage: "0.00", isNegative: false };
+                  return { percentage: "0.00", percentageNum: 0, isNegative: false };
                 }
 
                 const input = Number(inputUsd);
@@ -126,38 +138,46 @@ export function CryptoReceiveSection({
 
                 // Handle edge cases
                 if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
-                  return { percentage: "0.00", isNegative: false };
+                  return { percentage: "0.00", percentageNum: 0, isNegative: false };
                 }
 
                 const percentageValue = ((output - input) / input) * 100;
 
                 // Handle the -0.00% case
                 if (percentageValue > -0.005 && percentageValue < 0) {
-                  return { percentage: "0.00", isNegative: false };
+                  return { percentage: "0.00", percentageNum: 0, isNegative: false };
                 }
 
                 return {
                   percentage: Math.abs(percentageValue).toFixed(2),
+                  percentageNum: Math.abs(percentageValue),
                   isNegative: percentageValue < 0,
                 };
               };
 
-              const { percentage, isNegative } = calculatePriceImpact(
+              const { percentage, percentageNum, isNegative } = calculatePriceImpact(
                 anyspendQuote.data.currencyIn.amountUsd,
                 anyspendQuote.data.currencyOut.amountUsd,
               );
 
-              // Parse the percentage as a number for comparison
-              const percentageNum = parseFloat(percentage);
+              // Get the fee percentage if available
+              const feePercent = anyspendQuote.data.fee?.finalFeeBps ? anyspendQuote.data.fee.finalFeeBps / 100 : 0;
+
+              // Calculate actual slippage (price impact minus fee)
+              const actualSlippage = percentageNum - feePercent;
+
+              // Show warning based on actual slippage, not total impact
+              const yellowThreshold = 1; // 1% actual slippage
+              const redThreshold = 2; // 2% actual slippage
 
-              // Don't show if less than 1%
-              if (percentageNum < 1) {
+              // Don't show if actual slippage is less than yellow threshold
+              if (actualSlippage < yellowThreshold) {
                 return null;
               }
 
               // Using inline style to ensure color displays
               return (
-                <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
+                <span className="ml-2" style={{ color: actualSlippage >= redThreshold ? "red" : "#FFD700" }}>
                   ({isNegative ? "-" : ""}
                   {percentage}%)
                 </span>