@b3dotfun/sdk 0.0.49-alpha.0 → 0.0.49-alpha.10

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

@@ -0,0 +1,334 @@
+import { ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { components } from "../../../types/api";
+
+interface FeeDetailPanelProps {
+  fee: components["schemas"]["Fee"];
+  transactionAmountUsd?: number;
+  onBack: () => void;
+}
+
+// Fee tier definitions
+const CRYPTO_FEE_TIERS = [
+  { min: 0, max: 10, bps: 120, label: "$0 – $10" },
+  { min: 10, max: 500, bps: 80, label: "$10 – $500" },
+  { min: 500, max: 5000, bps: 60, label: "$500 – $5,000" },
+  { min: 5000, max: 50000, bps: 40, label: "$5,000 – $50,000" },
+  { min: 50000, max: Infinity, bps: 28, label: "$50,000+" },
+];
+
+const FIAT_FEE_TIERS = [
+  { min: 0.01, max: 25, fee: "$1", label: "$0.01 – $25" },
+  { min: 25.01, max: 250, fee: "2%", label: "$25.01 – $250" },
+  { min: 251, max: Infinity, fee: "3%", label: "$251+" },
+];
+
+// Whale discount tiers based on $ANY holdings
+const WHALE_DISCOUNT_TIERS = [
+  { minAny: 100000, discountPercent: 50, label: "Tier 1: 100k $ANY" },
+  { minAny: 500000, discountPercent: 75, label: "Tier 2: 500k $ANY" },
+  { minAny: 1000000, discountPercent: 100, label: "Tier 3: 1M+ $ANY" },
+];
+
+export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailPanelProps) {
+  // Detect if this is a fiat onramp order (Stripe) vs regular crypto swap
+  // stripeweb2_fee = Stripe/fiat onramp (uses FIAT_FEE_TIERS)
+  // standard_fee = Regular crypto swap (uses CRYPTO_FEE_TIERS)
+  const isStripeFee = fee.type === "stripeweb2_fee";
+
+  // Convert basis points to percentage
+  const bpsToPercent = (bps: number) => (bps / 100).toFixed(2);
+
+  // Check if discount is active
+  const hasWhaleDiscount = fee.anyspendWhaleDiscountBps > 0;
+  const hasPartnerDiscount = fee.anyspendPartnerDiscountBps > 0;
+
+  // Find current tier based on transaction amount
+  const getCurrentCryptoTier = (amount?: number) => {
+    if (!amount) return null;
+    return CRYPTO_FEE_TIERS.find(tier => amount >= tier.min && amount < tier.max);
+  };
+
+  const getCurrentFiatTier = (amount?: number) => {
+    if (!amount) return null;
+    return FIAT_FEE_TIERS.find(tier => amount >= tier.min && amount < tier.max);
+  };
+
+  const currentCryptoTier = getCurrentCryptoTier(transactionAmountUsd);
+  const currentFiatTier = getCurrentFiatTier(transactionAmountUsd);
+
+  // The whale discount is a percentage discount on the base fee itself
+  // Example: 50% discount on 80 bps fee = 40 bps discount, final fee = 40 bps
+  // So: finalFee = baseFee - (baseFee * discountPercent / 100)
+  // Which means: discountPercent = ((baseFee - finalFee) / baseFee) * 100
+  const baseFee = fee.type === "standard_fee" ? fee.anyspendFeeBps : 0;
+
+  // The whale discount percentage (50%, 75%, or 100%)
+  const whaleDiscountPercent =
+    baseFee > 0 && hasWhaleDiscount ? Math.round(((baseFee - fee.finalFeeBps) / baseFee) * 100) : 0;
+
+  // Determine which whale tier based on the discount percentage
+  const currentWhaleTier = WHALE_DISCOUNT_TIERS.find(
+    tier => Math.abs(whaleDiscountPercent - tier.discountPercent) <= 5,
+  );
+
+  // Calculate partner discount percentage
+  const partnerDiscountPercent =
+    baseFee > 0 && hasPartnerDiscount ? Math.round((fee.anyspendPartnerDiscountBps / baseFee) * 100) : 0;
+
+  // State for expanding tier lists
+  const [showAllFeeTiers, setShowAllFeeTiers] = useState(false);
+  const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
+
+  return (
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3">
+      <div className="flex w-full flex-col gap-3">
+        <div className="text-center">
+          <h3 className="text-as-primary text-lg font-bold">Fee Breakdown</h3>
+        </div>
+
+        {/* Base Fee Schedule Section */}
+        <div className="bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4">
+          <h4 className="text-as-primary mb-3 text-sm font-semibold">
+            {isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule"}
+          </h4>
+          <div className="space-y-1.5">
+            {isStripeFee
+              ? FIAT_FEE_TIERS.map((tier, idx) => {
+                  const isCurrentTier = currentFiatTier?.label === tier.label;
+                  const currentTierIndex = FIAT_FEE_TIERS.findIndex(t => t.label === currentFiatTier?.label);
+
+                  // Show all tiers if expanded, otherwise show up to current tier
+                  if (!showAllFeeTiers && currentTierIndex !== -1 && idx > currentTierIndex) {
+                    return null;
+                  }
+
+                  return (
+                    <div
+                      key={idx}
+                      className={cn(
+                        "flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
+                        isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60",
+                      )}
+                    >
+                      <span>{tier.label}</span>
+                      <span>Credit Card Fee + {tier.fee}</span>
+                    </div>
+                  );
+                })
+              : CRYPTO_FEE_TIERS.map((tier, idx) => {
+                  const isCurrentTier = currentCryptoTier?.label === tier.label;
+                  const currentTierIndex = CRYPTO_FEE_TIERS.findIndex(t => t.label === currentCryptoTier?.label);
+
+                  // Show all tiers if expanded, otherwise show up to current tier
+                  if (!showAllFeeTiers && currentTierIndex !== -1 && idx > currentTierIndex) {
+                    return null;
+                  }
+
+                  return (
+                    <div
+                      key={idx}
+                      className={cn(
+                        "flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
+                        isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60",
+                      )}
+                    >
+                      <span>{tier.label}</span>
+                      <span>{bpsToPercent(tier.bps)}%</span>
+                    </div>
+                  );
+                })}
+          </div>
+
+          {/* Show expand button if there are lower tiers */}
+          {(() => {
+            const currentTierIndex = isStripeFee
+              ? FIAT_FEE_TIERS.findIndex(t => t.label === currentFiatTier?.label)
+              : CRYPTO_FEE_TIERS.findIndex(t => t.label === currentCryptoTier?.label);
+            const totalTiers = isStripeFee ? FIAT_FEE_TIERS.length : CRYPTO_FEE_TIERS.length;
+            const hasMoreTiers = currentTierIndex !== -1 && currentTierIndex < totalTiers - 1;
+
+            if (hasMoreTiers) {
+              return (
+                <button
+                  onClick={() => setShowAllFeeTiers(!showAllFeeTiers)}
+                  className="text-as-primary/60 hover:text-as-primary mt-2 flex w-full items-center justify-center gap-1 text-xs transition-colors"
+                >
+                  <span>{showAllFeeTiers ? "Show less" : "Show higher tiers"}</span>
+                  <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", showAllFeeTiers && "rotate-180")} />
+                </button>
+              );
+            }
+            return null;
+          })()}
+        </div>
+
+        {/* Whale Discount Tiers - Always show for crypto (not fiat) */}
+        {!isStripeFee && (
+          <div className="bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4">
+            <h4 className="text-as-primary mb-3 text-sm font-semibold">
+              {hasWhaleDiscount ? "Whale Discount Tiers" : hasPartnerDiscount ? "Partner Discount" : "Discount Tiers"}
+            </h4>
+            <div className="space-y-1.5">
+              {hasPartnerDiscount && !hasWhaleDiscount ? (
+                <div className="flex items-center justify-between rounded-lg bg-green-500/10 px-3 py-2.5 text-sm font-semibold text-green-600">
+                  <span>Partner Discount</span>
+                  <span>{partnerDiscountPercent}% discount</span>
+                </div>
+              ) : (
+                <>
+                  {WHALE_DISCOUNT_TIERS.map((tier, idx) => {
+                    const isCurrentTier = currentWhaleTier?.label === tier.label;
+                    const currentTierIndex = WHALE_DISCOUNT_TIERS.findIndex(t => t.label === currentWhaleTier?.label);
+
+                    // If no whale discount, show only first tier; otherwise show up to current tier
+                    if (!showAllDiscountTiers) {
+                      if (!hasWhaleDiscount && idx > 0) {
+                        return null;
+                      }
+                      if (hasWhaleDiscount && currentTierIndex !== -1 && idx > currentTierIndex) {
+                        return null;
+                      }
+                    }
+
+                    return (
+                      <div
+                        key={idx}
+                        className={cn(
+                          "flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
+                          isCurrentTier ? "bg-green-500/10 font-semibold text-green-600" : "text-as-primary/60",
+                        )}
+                      >
+                        <span>{tier.label}</span>
+                        <span>{tier.discountPercent}% discount</span>
+                      </div>
+                    );
+                  })}
+
+                  {/* Show expand button */}
+                  {(() => {
+                    const currentTierIndex = WHALE_DISCOUNT_TIERS.findIndex(t => t.label === currentWhaleTier?.label);
+                    const hasMoreTiers = hasWhaleDiscount
+                      ? currentTierIndex !== -1 && currentTierIndex < WHALE_DISCOUNT_TIERS.length - 1
+                      : WHALE_DISCOUNT_TIERS.length > 1;
+
+                    if (hasMoreTiers) {
+                      return (
+                        <button
+                          onClick={() => setShowAllDiscountTiers(!showAllDiscountTiers)}
+                          className="text-as-primary/60 hover:text-as-primary mt-2 flex w-full items-center justify-center gap-1 text-xs transition-colors"
+                        >
+                          <span>{showAllDiscountTiers ? "Show less" : "Show all tiers"}</span>
+                          <ChevronDown
+                            className={cn("h-3.5 w-3.5 transition-transform", showAllDiscountTiers && "rotate-180")}
+                          />
+                        </button>
+                      );
+                    }
+                    return null;
+                  })()}
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Transaction Summary */}
+        {transactionAmountUsd && (
+          <div className="bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4">
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span className="text-as-secondary">Transaction</span>
+                <span className="text-as-primary font-semibold">${transactionAmountUsd.toFixed(2)}</span>
+              </div>
+
+              {isStripeFee && (
+                <>
+                  <div className="flex items-center justify-between">
+                    <span className="text-as-secondary">
+                      Credit Card Fee ({fee.stripeFeeBps ? `${bpsToPercent(fee.stripeFeeBps)}%` : "0%"} + $
+                      {fee.stripeFeeUsd?.toFixed(2) || "0.00"})
+                    </span>
+                    <span className="text-as-primary font-medium">
+                      ${((transactionAmountUsd * (fee.stripeFeeBps || 0)) / 10000 + (fee.stripeFeeUsd || 0)).toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-as-secondary">
+                      AnySpend Fee ({fee.anyspendFeeBps ? `${bpsToPercent(fee.anyspendFeeBps)}%` : "0%"}
+                      {fee.anyspendFeeUsd && fee.anyspendFeeUsd > 0 ? ` + $${fee.anyspendFeeUsd.toFixed(2)}` : ""})
+                    </span>
+                    <span className="text-as-primary font-medium">
+                      $
+                      {((transactionAmountUsd * (fee.anyspendFeeBps || 0)) / 10000 + (fee.anyspendFeeUsd || 0)).toFixed(
+                        2,
+                      )}
+                    </span>
+                  </div>
+                  <div className="border-as-border-secondary border-t pt-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-as-primary font-semibold">Total Fee</span>
+                      <span className="text-as-brand font-semibold">
+                        ${((transactionAmountUsd * (fee.finalFeeBps || 0)) / 10000 + (fee.finalFeeUsd || 0)).toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {!isStripeFee && currentCryptoTier && (
+                <>
+                  <div className="flex items-center justify-between">
+                    <span className="text-as-secondary">Base Fee ({bpsToPercent(currentCryptoTier.bps)}%)</span>
+                    <span className="text-as-primary font-medium">
+                      ${((transactionAmountUsd * currentCryptoTier.bps) / 10000).toFixed(2)}
+                    </span>
+                  </div>
+
+                  {hasWhaleDiscount && currentWhaleTier && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-green-600">Discount ({currentWhaleTier.discountPercent}% off)</span>
+                      <span className="font-medium text-green-600">
+                        -$
+                        {((transactionAmountUsd * baseFee * currentWhaleTier.discountPercent) / 100 / 10000).toFixed(2)}
+                      </span>
+                    </div>
+                  )}
+
+                  {hasPartnerDiscount && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-green-600">Partner Discount ({partnerDiscountPercent}% off)</span>
+                      <span className="font-medium text-green-600">
+                        -${((transactionAmountUsd * baseFee * partnerDiscountPercent) / 100 / 10000).toFixed(2)}
+                      </span>
+                    </div>
+                  )}
+
+                  <div className="border-as-border-secondary border-t pt-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-as-primary font-semibold">Total Fee</span>
+                      <span className="text-as-brand font-semibold">
+                        ${((transactionAmountUsd * fee.finalFeeBps) / 10000).toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          onClick={onBack}
+          className={cn("as-main-button !bg-as-brand relative w-full")}
+          textClassName={cn("text-white")}
+        >
+          Back to {isStripeFee ? "Payment" : "Swap"}
+        </ShinyButton>
+      </div>
+    </div>
+  );
+}

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

@@ -68,6 +68,7 @@ interface OrderDetailsProps {
   onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void; // Callback for payment method switching
   onBack?: () => void;
   disableUrlParamManagement?: boolean; // When true, will not modify URL parameters
+  points?: number | undefined; // Points earned from the transaction
 }
 
 // Add this helper function near the top or just above the component
@@ -212,6 +213,7 @@ export const OrderDetails = memo(function OrderDetails({
   onPaymentMethodChange,
   onBack,
   disableUrlParamManagement = false,
+  points,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -576,6 +578,7 @@ export const OrderDetails = memo(function OrderDetails({
           nft={nft}
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
+          points={points}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="refund-details" className="order-details-refund-item">
@@ -654,6 +657,7 @@ export const OrderDetails = memo(function OrderDetails({
           nft={nft}
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
+          points={points}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="execute-details" className="order-details-execute-item">
@@ -781,6 +785,7 @@ export const OrderDetails = memo(function OrderDetails({
           nft={nft}
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
+          points={points}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="more-details" className="order-details-more-item">
@@ -910,6 +915,7 @@ export const OrderDetails = memo(function OrderDetails({
           nft={nft}
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
+          points={points}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="deposit-details" className="order-details-deposit-item">
@@ -1190,6 +1196,7 @@ export const OrderDetails = memo(function OrderDetails({
           nft={nft}
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
+          points={points}
         />
       )}
 

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

@@ -5,6 +5,7 @@ import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
+import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronDown, Copy } from "lucide-react";
 import { motion } from "motion/react";
@@ -27,6 +28,7 @@ interface OrderDetailsCollapsibleProps {
   className?: string;
   showTotal?: boolean;
   totalAmount?: string;
+  points?: number;
 }
 
 export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
@@ -39,6 +41,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
   className,
   showTotal = false,
   totalAmount,
+  points,
 }: OrderDetailsCollapsibleProps) {
   const [showOrderDetails, setShowOrderDetails] = useState(true);
 
@@ -150,6 +153,19 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
               </div>
             </div>
 
+            {points !== undefined && points !== null && (
+              <>
+                <div className="order-details-divider divider w-full" />
+                {/* Points Section */}
+                <div className="order-details-points-section flex w-full justify-between gap-4">
+                  <div className="order-details-points-label text-as-tertiarry">Points</div>
+                  <div className="order-details-points-value text-as-brand font-semibold">
+                    +{formatNumber(points)} pts
+                  </div>
+                </div>
+              </>
+            )}
+
             <div className="order-details-divider divider w-full" />
 
             {/* Order ID / Total Section */}

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

@@ -1,11 +1,11 @@
-import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
+import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { Input, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
-import { ChevronRight, Wallet } from "lucide-react";
+import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
@@ -30,6 +30,7 @@ export function PanelOnramp({
   hideDstToken = false,
   anyspendQuote,
   onShowPointsDetail,
+  onShowFeeDetail,
   customUsdInputValues = ["5", "10", "20", "25"],
 }: {
   srcAmountOnRamp: string;
@@ -48,39 +49,46 @@ export function PanelOnramp({
   hideDstToken?: boolean;
   anyspendQuote?: GetQuoteResponse;
   onShowPointsDetail?: () => void;
+  onShowFeeDetail?: () => void;
   customUsdInputValues?: string[];
 }) {
   const featureFlags = useFeatureFlags();
-  // Get geo-based onramp options to access fee information
-  const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
 
-  // Helper function to get fees from API data
+  // Helper function to get fees from anyspend quote
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): number | null => {
+    // Try to get fee from anyspend quote first (most accurate)
+    if (anyspendQuote?.data?.fee) {
+      const fee = anyspendQuote.data.fee;
+      if (fee.type === "stripeweb2_fee") {
+        // Calculate total fee in USD from originalAmount - finalAmount
+        const originalAmount = Number(fee.originalAmount) / 1e6; // Convert from wei to USD
+        const finalAmount = Number(fee.finalAmount) / 1e6;
+        return originalAmount - finalAmount;
+      }
+    }
+
+    // Fallback to payment method defaults
     switch (paymentMethod) {
       case FiatPaymentMethod.COINBASE_PAY:
-        // Coinbase doesn't provide fee info in API, return 0
-        return 0;
+        return 0; // Coinbase has no additional fees
       case FiatPaymentMethod.STRIPE:
-        // Get fee from Stripe API response
-        if (stripeWeb2Support && "formattedFeeUsd" in stripeWeb2Support) {
-          return parseFloat(stripeWeb2Support.formattedFeeUsd) || 0;
-        }
-        return null;
+        return null; // No quote available yet
       default:
-        return null; // No fee when no payment method selected
+        return null;
     }
   };
 
   // Helper function to get total amount from API (for Stripe) or calculate it (for others)
   const getTotalAmount = (paymentMethod: FiatPaymentMethod): number => {
     const baseAmount = parseFloat(srcAmountOnRamp) || 5;
-    const fee = getFeeFromApi(paymentMethod);
 
-    if (paymentMethod === FiatPaymentMethod.STRIPE && stripeWeb2Support && "formattedTotalUsd" in stripeWeb2Support) {
-      // Use the total from Stripe API if available
-      return parseFloat(stripeWeb2Support.formattedTotalUsd) || baseAmount;
+    // Try to get from anyspend quote first (most accurate)
+    if (anyspendQuote?.data?.fee?.type === "stripeweb2_fee") {
+      return Number(anyspendQuote.data.fee.originalAmount) / 1e6; // Convert from wei to USD
     }
 
+    const fee = getFeeFromApi(paymentMethod);
+
     // For Coinbase or when fee is available, calculate manually
     if (fee !== null) {
       return baseAmount + fee;
@@ -257,13 +265,16 @@ export function PanelOnramp({
 
         <div className="">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="text-as-tertiarry text-sm">
-                {(() => {
-                  const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
-                  return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
-                })()}
-              </span>
+            <div className="flex items-center gap-1.5">
+              <span className="text-as-tertiarry text-sm">Total</span>
+              {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>
+              )}
               {featureFlags.showPoints &&
                 anyspendQuote?.data?.pointsAmount &&
                 anyspendQuote?.data?.pointsAmount > 0 && (
@@ -274,9 +285,29 @@ export function PanelOnramp({
                   />
                 )}
             </div>
-            <span className="text-as-primary font-semibold">
-              ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}
-            </span>
+            <div className="flex flex-col items-end gap-0.5">
+              <span className="text-as-primary font-semibold">
+                ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}
+              </span>
+              {(() => {
+                // For fiat payments, show the fee from the payment method
+                const fiatFee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
+                if (fiatFee !== null && fiatFee > 0) {
+                  return <span className="text-as-secondary text-xs">incl. ${fiatFee.toFixed(2)} fee</span>;
+                }
+
+                // For crypto payments (standard_fee), calculate from the quote
+                if (anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd) {
+                  const cryptoFee =
+                    (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) / 10000;
+                  if (cryptoFee > 0) {
+                    return <span className="text-as-secondary text-xs">incl. ${cryptoFee.toFixed(2)} fee</span>;
+                  }
+                }
+
+                return null;
+              })()}
+            </div>
           </div>
         </div>
       </div>

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

@@ -194,12 +194,24 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
           <div className="border-b3-react-border border-t pt-3">
             <div className="flex items-center justify-between">
               <p className="text-b3-react-foreground font-semibold">Amount</p>
-              <p
-                className="text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors"
-                onClick={onBack}
-              >
-                ${parseFloat(srcAmountOnRamp).toFixed(2)}
-              </p>
+              <div className="flex flex-col items-end gap-0.5">
+                <p
+                  className="text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors"
+                  onClick={onBack}
+                >
+                  ${parseFloat(srcAmountOnRamp).toFixed(2)}
+                </p>
+                {anyspendQuote?.data?.fee?.type === "standard_fee" && anyspendQuote.data.currencyIn?.amountUsd && (
+                  <p className="text-b3-react-foreground/60 text-xs">
+                    incl. $
+                    {(
+                      (Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
+                      10000
+                    ).toFixed(2)}{" "}
+                    fee
+                  </p>
+                )}
+              </div>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,5 @@
-import { Button, ShinyButton } from "@b3dotfun/sdk/global-account/react";
+import { ShinyButton } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
-import { ArrowDown } from "lucide-react";
 import Link from "next/link";
 
 interface PointsDetailPanelProps {
@@ -11,17 +10,6 @@ interface PointsDetailPanelProps {
 export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
   return (
     <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
-      <div className="flex w-full items-center justify-between">
-        <Button
-          variant="ghost"
-          onClick={onBack}
-          className="text-as-primary/70 hover:text-as-primary flex items-center gap-2"
-        >
-          <ArrowDown className="h-4 w-4 rotate-90" />
-          Back
-        </Button>
-      </div>
-
       <div className="flex flex-col items-center gap-4 text-center">
         <h3 className="text-as-primary text-xl font-bold">Earn Points with Every Swap</h3>
         <p className="text-as-primary/70 text-balance text-sm leading-relaxed">

package/src/anyspend/react/contexts/FeatureFlagsContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, ReactNode } from "react";
+import { ReactNode, createContext, useContext } from "react";
 
 export interface FeatureFlags {
   showPoints?: boolean;
@@ -18,7 +18,7 @@ interface FeatureFlagsProviderProps {
 }
 
 const defaultFeatureFlags: FeatureFlags = {
-  showPoints: false,
+  showPoints: true,
 };
 
 export function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }: FeatureFlagsProviderProps) {

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -32,6 +32,7 @@ export enum PanelView {
   ORDER_DETAILS,
   LOADING,
   POINTS_DETAIL,
+  FEE_DETAIL,
 }
 
 interface UseAnyspendFlowProps {