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

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>

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>
+  );
+}