@b3dotfun/sdk 0.0.49 → 0.0.50-alpha.1

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 {