@b3dotfun/sdk 0.0.40-alpha.7 → 0.0.40-alpha.8

package/dist/esm/anyspend/react/components/common/PanelOnramp.js

@@ -7,9 +7,11 @@ import { formatAddress } from "../../../../shared/utils/formatAddress.js";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext.js";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
-export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, }) {
+export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken = false, anyspendQuote, }) {
+    const featureFlags = useFeatureFlags();
     // Get geo-based onramp options to access fee information
     const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
     // Helper function to get fees from API data
@@ -70,9 +72,8 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
                                         width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
                                     } })] }) }), _jsx("div", { className: cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0"), children: ["5", "10", "20", "25"].map(value => (_jsxs("button", { onClick: () => handleQuickAmount(value), className: `bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${srcAmountOnRamp === value
                                 ? "border-as-border-secondary bg-as-surface-secondary"
-                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsx("div", { className: "flex items-center justify-between", children: (() => {
-                                const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
-                                const fee = getFeeFromApi(currentPaymentMethod);
-                                return (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total" }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(currentPaymentMethod).toFixed(2)] })] }));
-                            })() }) })] })] }));
+                                : "bg-as-surface-secondary hover:bg-as-surface-secondary"}`, children: ["$", value] }, value))) }), destinationToken && destinationChainId && !hideDstToken && (_jsx(OrderTokenAmountFiat, { address: _recipientAddress, context: "to", inputValue: destinationAmount || "0", onChangeInput: () => { }, chainId: destinationChainId, setChainId: onDestinationChainChange || (() => { }), token: destinationToken, setToken: onDestinationTokenChange || (() => { }) }))] }), _jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary mt-4 flex w-full flex-col gap-3 rounded-xl border p-4", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm", children: "Recipient" }), _recipientAddress ? (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(recipientSelectionPanelIndex), children: [_jsx("span", { className: "text-sm", children: recipientName ? formatUsername(recipientName) : formatAddress(_recipientAddress) }), _jsx(ChevronRight, { size: 16 })] })) : (_jsxs("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(5), children: [_jsx(Wallet, { className: "text-as-brand", size: 16 }), "Select recipient", _jsx(ChevronRight, { size: 16 })] }))] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: "Expected to receive" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-as-primary font-semibold", children: [destinationAmount || "0", " ", dstTokenSymbol || destinationToken?.symbol || ""] }), _jsxs("span", { className: "text-as-tertiarry text-sm", children: ["on ", destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""] }), destinationToken && destinationChainId && destinationToken.metadata?.logoURI && (_jsx("img", { src: ALL_CHAINS[destinationChainId]?.logoUrl, alt: "Chain", className: "h-4 w-4 rounded-full" }))] })] }), _jsx("div", { className: "divider w-full" }), _jsx("div", { className: "", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-as-tertiarry text-sm", children: (() => {
+                                                const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
+                                                return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
+                                            })() }), featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (_jsxs("span", { className: "text-as-brand text-sm font-medium", children: ["+", anyspendQuote.data.pointsAmount.toLocaleString(), " pts"] }, `points-${anyspendQuote.data.pointsAmount}`))] }), _jsxs("span", { className: "text-as-primary font-semibold", children: ["$", getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)] })] }) })] })] }));
 }

package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export interface FeatureFlags {
+    showPoints?: boolean;
+}
+interface FeatureFlagsProviderProps {
+    children: ReactNode;
+    featureFlags?: FeatureFlags;
+}
+export declare function FeatureFlagsProvider({ children, featureFlags }: FeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useFeatureFlags(): FeatureFlags;
+export {};

package/dist/esm/anyspend/react/contexts/FeatureFlagsContext.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const FeatureFlagsContext = createContext(undefined);
+const defaultFeatureFlags = {
+    showPoints: false,
+};
+export function FeatureFlagsProvider({ children, featureFlags = defaultFeatureFlags }) {
+    return _jsx(FeatureFlagsContext.Provider, { value: { featureFlags }, children: children });
+}
+export function useFeatureFlags() {
+    const context = useContext(FeatureFlagsContext);
+    if (!context) {
+        return defaultFeatureFlags;
+    }
+    return context.featureFlags;
+}

package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -78,71 +78,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     globalAddress: string | undefined;
     hasEnoughBalance: boolean;
     isBalanceLoading: boolean;
-    anyspendQuote: {
-        success: boolean;
-        message: string;
-        data: {
-            operation?: string;
-            sender?: string;
-            recipient?: string;
-            currencyIn?: {
-                currency?: {
-                    chainId?: number;
-                    address?: string;
-                    symbol?: string;
-                    name?: string;
-                    decimals?: number;
-                    metadata?: {
-                        logoURI?: string;
-                    };
-                };
-                amount?: string;
-                amountFormatted?: string;
-                amountUsd?: string;
-                minimumAmount?: string;
-            };
-            currencyOut?: {
-                currency?: {
-                    chainId?: number;
-                    address?: string;
-                    symbol?: string;
-                    name?: string;
-                    decimals?: number;
-                    metadata?: {
-                        logoURI?: string;
-                    };
-                };
-                amount?: string;
-                amountFormatted?: string;
-                amountUsd?: string;
-                minimumAmount?: string;
-            };
-            totalImpact?: {
-                usd?: string;
-                percent?: string;
-            };
-            swapImpact?: {
-                usd?: string;
-                percent?: string;
-            };
-            rate?: string;
-            slippageTolerance?: {
-                origin?: {
-                    usd?: string;
-                    value?: string;
-                    percent?: string;
-                };
-                destination?: {
-                    usd?: string;
-                    value?: string;
-                    percent?: string;
-                };
-            };
-            timeEstimate?: number;
-            userBalance?: string;
-        };
-        statusCode: number;
-    } | undefined;
+    anyspendQuote: import("../../types/api_req_res").GetQuoteResponse | undefined;
     isLoadingAnyspendQuote: boolean;
     getAnyspendQuoteError: Error | null;
     activeInputAmountInWei: string;

package/dist/esm/anyspend/react/providers/AnyspendProvider.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
+import { FeatureFlags } from "../contexts/FeatureFlagsContext";
 interface AnyspendProviderProps {
     children: ReactNode;
+    featureFlags?: FeatureFlags;
 }
 /**
  * AnyspendProvider is a top-level provider that wraps your application to provide
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
  * - Handles Stripe payment redirects and modal state
+ * - Provides feature flags configuration
  *
  * @example
  * ```tsx
  * function App() {
  *   return (
- *     <AnyspendProvider>
+ *     <AnyspendProvider featureFlags={{ showPoints: true }}>
  *       <YourApp />
  *     </AnyspendProvider>
  *   );
  * }
  * ```
  */
-export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/providers/AnyspendProvider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TooltipProvider } from "../../../global-account/react/index.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
+import { FeatureFlagsProvider } from "../contexts/FeatureFlagsContext.js";
 import { StripeRedirectHandler } from "./StripeRedirectHandler.js";
 const defaultQueryClientConfig = {
     defaultOptions: {
@@ -23,19 +24,20 @@ const defaultQueryClientConfig = {
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
  * - Handles Stripe payment redirects and modal state
+ * - Provides feature flags configuration
  *
  * @example
  * ```tsx
  * function App() {
  *   return (
- *     <AnyspendProvider>
+ *     <AnyspendProvider featureFlags={{ showPoints: true }}>
  *       <YourApp />
  *     </AnyspendProvider>
  *   );
  * }
  * ```
  */
-export const AnyspendProvider = function AnyspendProvider({ children }) {
+export const AnyspendProvider = function AnyspendProvider({ children, featureFlags }) {
     const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(FeatureFlagsProvider, { featureFlags: featureFlags, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }) }));
 };

package/dist/esm/anyspend/react/providers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./AnyspendProvider";
 export * from "./StripeRedirectHandler";
+export { useFeatureFlags, type FeatureFlags } from "../contexts/FeatureFlagsContext";

package/dist/esm/anyspend/react/providers/index.js

@@ -1,2 +1,3 @@
 export * from "./AnyspendProvider.js";
 export * from "./StripeRedirectHandler.js";
+export { useFeatureFlags } from "../contexts/FeatureFlagsContext.js";

package/dist/esm/anyspend/types/api_req_res.d.ts

@@ -1,10 +1,17 @@
 import { paths } from "./api";
 export type GetOrderAndTxsResponse = paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetQuoteRequest = paths["/orders/quote"]["post"]["requestBody"]["content"]["application/json"];
-export type GetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
+type BaseGetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
+export type GetQuoteResponse = BaseGetQuoteResponse & {
+    data: BaseGetQuoteResponse["data"] & {
+        pointsAmount?: number;
+        pointsMultiplier?: number;
+    };
+};
 export type GetCoinbaseOnrampOptionsResponse = paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetOrderHistoryResponse = paths["/orders"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetTokenListResponse = paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
 export type CreateOrderResponse = paths["/orders"]["post"]["responses"]["200"]["content"]["application/json"];
 export type GetStripeSupportedResponse = paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetStripeClientSecret = paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];
+export {};

package/dist/types/anyspend/react/components/common/PanelOnramp.d.ts

@@ -1,6 +1,7 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
-export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, }: {
+export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMethod, setActivePanel, _recipientAddress, destinationToken, destinationChainId, destinationAmount, onDestinationTokenChange, onDestinationChainChange, fiatPaymentMethodIndex, recipientSelectionPanelIndex, dstTokenSymbol, hideDstToken, anyspendQuote, }: {
     srcAmountOnRamp: string;
     setSrcAmountOnRamp: (amount: string) => void;
     selectedPaymentMethod?: FiatPaymentMethod;
@@ -15,4 +16,5 @@ export declare function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selec
     recipientSelectionPanelIndex: number;
     dstTokenSymbol?: string;
     hideDstToken?: boolean;
+    anyspendQuote?: GetQuoteResponse;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/contexts/FeatureFlagsContext.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export interface FeatureFlags {
+    showPoints?: boolean;
+}
+interface FeatureFlagsProviderProps {
+    children: ReactNode;
+    featureFlags?: FeatureFlags;
+}
+export declare function FeatureFlagsProvider({ children, featureFlags }: FeatureFlagsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useFeatureFlags(): FeatureFlags;
+export {};

package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts

@@ -78,71 +78,7 @@ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrd
     globalAddress: string | undefined;
     hasEnoughBalance: boolean;
     isBalanceLoading: boolean;
-    anyspendQuote: {
-        success: boolean;
-        message: string;
-        data: {
-            operation?: string;
-            sender?: string;
-            recipient?: string;
-            currencyIn?: {
-                currency?: {
-                    chainId?: number;
-                    address?: string;
-                    symbol?: string;
-                    name?: string;
-                    decimals?: number;
-                    metadata?: {
-                        logoURI?: string;
-                    };
-                };
-                amount?: string;
-                amountFormatted?: string;
-                amountUsd?: string;
-                minimumAmount?: string;
-            };
-            currencyOut?: {
-                currency?: {
-                    chainId?: number;
-                    address?: string;
-                    symbol?: string;
-                    name?: string;
-                    decimals?: number;
-                    metadata?: {
-                        logoURI?: string;
-                    };
-                };
-                amount?: string;
-                amountFormatted?: string;
-                amountUsd?: string;
-                minimumAmount?: string;
-            };
-            totalImpact?: {
-                usd?: string;
-                percent?: string;
-            };
-            swapImpact?: {
-                usd?: string;
-                percent?: string;
-            };
-            rate?: string;
-            slippageTolerance?: {
-                origin?: {
-                    usd?: string;
-                    value?: string;
-                    percent?: string;
-                };
-                destination?: {
-                    usd?: string;
-                    value?: string;
-                    percent?: string;
-                };
-            };
-            timeEstimate?: number;
-            userBalance?: string;
-        };
-        statusCode: number;
-    } | undefined;
+    anyspendQuote: import("../../types/api_req_res").GetQuoteResponse | undefined;
     isLoadingAnyspendQuote: boolean;
     getAnyspendQuoteError: Error | null;
     activeInputAmountInWei: string;

package/dist/types/anyspend/react/providers/AnyspendProvider.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
+import { FeatureFlags } from "../contexts/FeatureFlagsContext";
 interface AnyspendProviderProps {
     children: ReactNode;
+    featureFlags?: FeatureFlags;
 }
 /**
  * AnyspendProvider is a top-level provider that wraps your application to provide
@@ -12,17 +14,18 @@ interface AnyspendProviderProps {
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
  * - Handles Stripe payment redirects and modal state
+ * - Provides feature flags configuration
  *
  * @example
  * ```tsx
  * function App() {
  *   return (
- *     <AnyspendProvider>
+ *     <AnyspendProvider featureFlags={{ showPoints: true }}>
  *       <YourApp />
  *     </AnyspendProvider>
  *   );
  * }
  * ```
  */
-export declare const AnyspendProvider: ({ children }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnyspendProvider: ({ children, featureFlags }: AnyspendProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/providers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./AnyspendProvider";
 export * from "./StripeRedirectHandler";
+export { useFeatureFlags, type FeatureFlags } from "../contexts/FeatureFlagsContext";

package/dist/types/anyspend/types/api_req_res.d.ts

@@ -1,10 +1,17 @@
 import { paths } from "./api";
 export type GetOrderAndTxsResponse = paths["/orders/{orderId}"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetQuoteRequest = paths["/orders/quote"]["post"]["requestBody"]["content"]["application/json"];
-export type GetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
+type BaseGetQuoteResponse = paths["/orders/quote"]["post"]["responses"]["200"]["content"]["application/json"];
+export type GetQuoteResponse = BaseGetQuoteResponse & {
+    data: BaseGetQuoteResponse["data"] & {
+        pointsAmount?: number;
+        pointsMultiplier?: number;
+    };
+};
 export type GetCoinbaseOnrampOptionsResponse = paths["/onramp/coinbase/options"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetOrderHistoryResponse = paths["/orders"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetTokenListResponse = paths["/chains/{chainId}/tokens"]["get"]["responses"]["200"]["content"]["application/json"];
 export type CreateOrderResponse = paths["/orders"]["post"]["responses"]["200"]["content"]["application/json"];
 export type GetStripeSupportedResponse = paths["/onramp/stripe/supported"]["get"]["responses"]["200"]["content"]["application/json"];
 export type GetStripeClientSecret = paths["/stripe/clientSecret"]["get"]["responses"]["200"]["content"]["application/json"];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-alpha.7",
+  "version": "0.0.40-alpha.8",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -890,6 +890,7 @@ function AnySpendInner({
               fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
               recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
               hideDstToken={isBuyMode}
+              anyspendQuote={anyspendQuote}
             />
           </motion.div>
         )}

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

@@ -223,6 +223,7 @@ function AnySpendDepositHypeInner({
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+                anyspendQuote={anyspendQuote}
               />
             </motion.div>
           )}

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

@@ -4,7 +4,9 @@ import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
+import { useEffect } from "react";
 import { components } from "../../../types/api";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 
 interface CryptoReceiveSectionProps {
@@ -45,6 +47,8 @@ export function CryptoReceiveSection({
   dstTokenSymbol,
   dstTokenLogoURI,
 }: CryptoReceiveSectionProps) {
+  const featureFlags = useFeatureFlags();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -100,61 +104,68 @@ export function CryptoReceiveSection({
           setToken={setSelectedDstToken || (() => {})}
         />
       )}
-      <div className="text-as-primary/50 flex h-5 items-center text-sm">
-        {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
-          style: "currency",
-          fallback: "",
-        })}
-        {anyspendQuote?.data?.currencyIn?.amountUsd &&
-          anyspendQuote?.data?.currencyOut?.amountUsd &&
-          (() => {
-            const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
-              if (!inputUsd || !outputUsd) {
-                return { percentage: "0.00", isNegative: false };
-              }
+      <div className="text-as-primary/50 flex h-5 items-center justify-between text-sm">
+        <div className="flex items-center gap-2">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+          {anyspendQuote?.data?.currencyIn?.amountUsd &&
+            anyspendQuote?.data?.currencyOut?.amountUsd &&
+            (() => {
+              const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
+                if (!inputUsd || !outputUsd) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const input = Number(inputUsd);
-              const output = Number(outputUsd);
+                const input = Number(inputUsd);
+                const output = Number(outputUsd);
 
-              // Handle edge cases
-              if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle edge cases
+                if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const percentageValue = ((output - input) / input) * 100;
+                const percentageValue = ((output - input) / input) * 100;
 
-              // Handle the -0.00% case
-              if (percentageValue > -0.005 && percentageValue < 0) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle the -0.00% case
+                if (percentageValue > -0.005 && percentageValue < 0) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              return {
-                percentage: Math.abs(percentageValue).toFixed(2),
-                isNegative: percentageValue < 0,
+                return {
+                  percentage: Math.abs(percentageValue).toFixed(2),
+                  isNegative: percentageValue < 0,
+                };
               };
-            };
 
-            const { percentage, isNegative } = calculatePriceImpact(
-              anyspendQuote.data.currencyIn.amountUsd,
-              anyspendQuote.data.currencyOut.amountUsd,
-            );
+              const { percentage, isNegative } = calculatePriceImpact(
+                anyspendQuote.data.currencyIn.amountUsd,
+                anyspendQuote.data.currencyOut.amountUsd,
+              );
 
-            // Parse the percentage as a number for comparison
-            const percentageNum = parseFloat(percentage);
+              // Parse the percentage as a number for comparison
+              const percentageNum = parseFloat(percentage);
 
-            // Don't show if less than 1%
-            if (percentageNum < 1) {
-              return null;
-            }
+              // Don't show if less than 1%
+              if (percentageNum < 1) {
+                return null;
+              }
 
-            // Using inline style to ensure color displays
-            return (
-              <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
-                ({isNegative ? "-" : ""}
-                {percentage}%)
-              </span>
-            );
-          })()}
+              // Using inline style to ensure color displays
+              return (
+                <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
+                  ({isNegative ? "-" : ""}
+                  {percentage}%)
+                </span>
+              );
+            })()}
+        </div>
+        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
+          <div key={`points-${anyspendQuote.data.pointsAmount}`} className="flex items-center gap-1">
+            <span className="text-as-brand font-medium">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
+          </div>
+        )}
       </div>
     </motion.div>
   );

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

@@ -1,12 +1,14 @@
 import { useCoinbaseOnrampOptions, useGeoOnrampOptions } 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 { useRef } from "react";
+import { useRef, useEffect } from "react";
 import { toast } from "sonner";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 
@@ -25,6 +27,7 @@ export function PanelOnramp({
   recipientSelectionPanelIndex,
   dstTokenSymbol,
   hideDstToken = false,
+  anyspendQuote,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -40,7 +43,9 @@ export function PanelOnramp({
   recipientSelectionPanelIndex: number;
   dstTokenSymbol?: string;
   hideDstToken?: boolean;
+  anyspendQuote?: GetQuoteResponse;
 }) {
+  const featureFlags = useFeatureFlags();
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
 
@@ -245,21 +250,22 @@ export function PanelOnramp({
 
         <div className="">
           <div className="flex items-center justify-between">
-            {(() => {
-              const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
-              const fee = getFeeFromApi(currentPaymentMethod);
-
-              return (
-                <>
-                  <span className="text-as-tertiarry text-sm">
-                    {fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total"}
-                  </span>
-                  <span className="text-as-primary font-semibold">
-                    ${getTotalAmount(currentPaymentMethod).toFixed(2)}
-                  </span>
-                </>
-              );
-            })()}
+            <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>
+              {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0 && (
+                <span key={`points-${anyspendQuote.data.pointsAmount}`} className="text-as-brand text-sm font-medium">
+                  +{anyspendQuote.data.pointsAmount.toLocaleString()} pts
+                </span>
+              )}
+            </div>
+            <span className="text-as-primary font-semibold">
+              ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}
+            </span>
           </div>
         </div>
       </div>