@b3dotfun/sdk 0.0.49 → 0.0.50-test.0

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>

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

@@ -0,0 +1,105 @@
+import { components } from "../../../types/api";
+
+interface FeeBreakDownProps {
+  fee: components["schemas"]["Fee"];
+  /** Number of decimals for amount display (default: 6 for USDC) */
+  decimals?: number;
+  /** Show currency symbol for amounts (default: true) */
+  showCurrency?: boolean;
+  /** Custom className for the container */
+  className?: string;
+}
+
+export function FeeBreakDown({ fee, decimals = 6, showCurrency = true, className = "" }: FeeBreakDownProps) {
+  const isStripeFee = fee.type === "stripeweb2_fee";
+
+  // Convert basis points to percentage
+  const bpsToPercent = (bps: number) => (bps / 100).toFixed(2);
+
+  // Format amount with optional currency
+  const formatAmount = (amount: string) => {
+    const divisor = Math.pow(10, decimals);
+    const formatted = (Number(amount) / divisor).toFixed(2);
+    return showCurrency ? `$${formatted}` : formatted;
+  };
+
+  // Check if discount is active
+  const hasWhaleDiscount = fee.anyspendWhaleDiscountBps > 0;
+  const hasPartnerDiscount = fee.anyspendPartnerDiscountBps > 0;
+
+  return (
+    <div className={`min-w-[240px] ${className}`}>
+      {/* Fee Breakdown Section */}
+      <div className="mb-4">
+        <h3 className="text-as-primary mb-2 text-sm font-semibold">Fee Breakdown</h3>
+        <table className="w-full">
+          <tbody className="text-as-secondary text-xs">
+            {isStripeFee && (
+              <tr>
+                <td className="py-1">Stripe Fee</td>
+                <td className="py-1 text-right">
+                  {bpsToPercent(fee.stripeFeeBps)}% + ${fee.stripeFeeUsd.toFixed(2)}
+                </td>
+              </tr>
+            )}
+            <tr>
+              <td className="py-1">AnySpend Fee</td>
+              <td className="py-1 text-right">
+                {bpsToPercent(fee.anyspendFeeBps)}%
+                {isStripeFee && fee.anyspendFeeUsd > 0 && ` + $${fee.anyspendFeeUsd.toFixed(2)}`}
+              </td>
+            </tr>
+            {hasWhaleDiscount && (
+              <tr className="text-green-600">
+                <td className="py-1">Whale Discount</td>
+                <td className="py-1 text-right">-{bpsToPercent(fee.anyspendWhaleDiscountBps)}%</td>
+              </tr>
+            )}
+            {hasPartnerDiscount && (
+              <tr className="text-green-600">
+                <td className="py-1">Partner Discount</td>
+                <td className="py-1 text-right">-{bpsToPercent(fee.anyspendPartnerDiscountBps)}%</td>
+              </tr>
+            )}
+            <tr className="border-as-border-secondary border-t">
+              <td className="text-as-primary py-1.5 pt-2 font-semibold">Total Fee</td>
+              <td className="text-as-primary py-1.5 pt-2 text-right font-semibold">
+                {bpsToPercent(fee.finalFeeBps)}%{isStripeFee && ` + $${fee.finalFeeUsd.toFixed(2)}`}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Amount Calculation Section (Stripe only) */}
+      {isStripeFee && (
+        <>
+          <div className="border-as-border-secondary my-3 border-t"></div>
+          <div>
+            <h3 className="text-as-primary mb-2 text-sm font-semibold">Amount Calculation</h3>
+            <table className="w-full">
+              <tbody className="text-as-secondary text-xs">
+                <tr>
+                  <td className="py-1">Original Amount</td>
+                  <td className="py-1 text-right font-medium">{formatAmount(fee.originalAmount)}</td>
+                </tr>
+                <tr>
+                  <td className="py-1">Total Fee</td>
+                  <td className="py-1 text-right text-red-600">
+                    -{formatAmount((Number(fee.originalAmount) - Number(fee.finalAmount)).toString())}
+                  </td>
+                </tr>
+                <tr className="border-as-border-secondary border-t">
+                  <td className="text-as-primary py-1.5 pt-2 font-semibold">You Receive</td>
+                  <td className="text-as-primary py-1.5 pt-2 text-right font-semibold">
+                    {formatAmount(fee.finalAmount)}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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/OrderToken.tsx

@@ -5,7 +5,7 @@ import { Button, useAccountWallet, useTokenBalancesByChain } from "@b3dotfun/sdk
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { simpleHashChainToChainName } from "@b3dotfun/sdk/shared/utils/simplehash";
-import { TokenSelector } from "@reservoir0x/relay-kit-ui";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { CheckCircle2, ChevronsUpDown } from "lucide-react";
 import { useMemo } from "react";
 import { ChainTokenIcon } from "./ChainTokenIcon";