@b3dotfun/sdk 0.0.40-alpha.1 → 0.0.40-alpha.11

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.d.ts

@@ -798,6 +798,16 @@ export interface paths {
                                  * @example 0
                                  */
                                 userBalance?: string;
+                                /**
+                                 * @description Anyspend points that will be awarded for the order
+                                 * @example 100
+                                 */
+                                pointsAmount?: number;
+                                /**
+                                 * @description Multiplier applied to points that will be awarded for the order
+                                 * @example 1.5
+                                 */
+                                pointsMultiplier?: number;
                             };
                             /** @example 200 */
                             statusCode: number;

package/dist/types/bondkit/bondkitToken.d.ts

@@ -1,6 +1,7 @@
 import type { Address, EIP1193Provider, GetContractReturnType, Hex, PublicClient, WalletClient } from "viem";
 import { BondkitTokenABI } from "./abis";
-import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, TokenDetails, TokenStatus, TransactionResponse } from "./types";
+import type { BondkitTokenInitializationConfig, GetTransactionHistoryOptions, SwapQuote, TokenDetails, TransactionResponse } from "./types";
+import { TokenStatus } from "./types";
 type ExecuteWriteOptions = {
     value?: bigint;
     gas?: bigint;
@@ -18,7 +19,8 @@ export declare class BondkitToken {
     private walletClientInstance;
     private connectedProvider?;
     private tradingToken?;
-    constructor(contractAddress: string, walletKey?: string);
+    private swapService?;
+    constructor(contractAddress: string, walletKey?: string, rpcUrl?: string);
     connect(provider?: EIP1193Provider): boolean;
     /**
      * Connects using an EIP-1193 provider and requests accounts, selecting the first one.
@@ -69,5 +71,38 @@ export declare class BondkitToken {
     migrateToDex(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
     transferTokenOwnership(newOwner: Address, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
     renounceTokenOwnership(options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Get the swap service instance (lazy initialization)
+     */
+    private getSwapService;
+    /**
+     * Check if DEX swapping is available (token must be in Dex phase)
+     */
+    isSwapAvailable(): Promise<boolean | undefined>;
+    /**
+     * Get swap quote for trading token → bondkit token
+     */
+    getSwapQuoteForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
+    /**
+     * Get swap quote for bondkit token → trading token
+     */
+    getSwapQuoteForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number): Promise<SwapQuote | undefined>;
+    /**
+     * Swap trading token for bondkit token
+     */
+    swapTradingTokenForBondkitToken(amountTradingTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Swap bondkit token for trading token
+     */
+    swapBondkitTokenForTradingToken(amountBondkitTokenIn: string, slippageTolerance?: number, options?: ExecuteWriteOptions): Promise<Hex | undefined>;
+    /**
+     * Helper method to get trading token decimals
+     */
+    private getTradingTokenDecimals;
+    /**
+     * Get trading token symbol
+     * @param tradingTokenAddress Optional trading token address to avoid fetching it again
+     */
+    getTradingTokenSymbol(tradingTokenAddress?: Address): Promise<string | undefined>;
 }
 export {};

package/dist/types/bondkit/bondkitTokenFactory.d.ts

@@ -10,7 +10,7 @@ export declare class BondkitTokenFactory {
     private rpcUrl;
     private walletClientInstance;
     private connectedProvider?;
-    constructor(chainId: SupportedChainId, walletKey?: string);
+    constructor(chainId: SupportedChainId, walletKey?: string, rpcUrl?: string);
     connect(provider?: EIP1193Provider): boolean;
     /**
      * Connects using an EIP-1193 provider and requests accounts, selecting the first one.

package/dist/types/bondkit/config.d.ts

@@ -7,4 +7,4 @@ export interface Config {
     apiEndpoint: string;
 }
 export type SupportedChainId = typeof base.id;
-export declare const getConfig: (chainId: number) => Config;
+export declare const getConfig: (chainId: number, rpcUrl?: string) => Config;

package/dist/types/bondkit/constants.d.ts

@@ -1,3 +1,7 @@
 import type { Address } from "viem";
 export declare const BaseBondkitTokenFactoryContractAddress: Address;
 export declare const BaseMainnetRpcUrl = "https://base-rpc.publicnode.com";
+export declare const UniversalRouterAddress: Address;
+export declare const QuoterAddress: Address;
+export declare const Permit2Address: Address;
+export declare const B3TokenAddress: Address;

package/dist/types/bondkit/index.d.ts

@@ -4,4 +4,5 @@ export * from "./config";
 export * from "./constants";
 export * from "./types";
 export * from "./abis";
+export { BondkitSwapService } from "./swapService";
 export { default as TradingView } from "./components/TradingView";

package/dist/types/bondkit/swapService.d.ts

@@ -0,0 +1,43 @@
+import type { Address, WalletClient } from "viem";
+import type { SwapQuote } from "./types";
+interface SwapParams {
+    tokenIn: Address;
+    tokenOut: Address;
+    amountIn: string;
+    tokenInDecimals: number;
+    tokenOutDecimals: number;
+    slippageTolerance: number;
+    recipient: Address;
+    deadline?: number;
+}
+/**
+ * Internal swap service for handling Uniswap V4 swaps between trading token and bondkit token
+ */
+export declare class BondkitSwapService {
+    private v4Config;
+    private configInitialized;
+    private readonly bondkitTokenAddress;
+    private readonly publicClient;
+    constructor(bondkitTokenAddress: Address);
+    /**
+     * Initialize V4 pool configuration from bondkit token contract
+     */
+    private initializeV4Config;
+    /**
+     * Get V4 pool configuration
+     */
+    private getV4Config;
+    /**
+     * Handle token approvals for swap
+     */
+    private handleTokenApprovals;
+    /**
+     * Get swap quote
+     */
+    getSwapQuote(params: SwapParams): Promise<SwapQuote | null>;
+    /**
+     * Execute swap transaction
+     */
+    executeSwap(params: SwapParams, walletClient: WalletClient): Promise<string | null>;
+}
+export {};

package/dist/types/bondkit/types.d.ts

@@ -49,10 +49,9 @@ export type DexMigrationEventArgs = {
     ethForFeeRecipient: bigint;
 };
 export declare enum TokenStatus {
-    Inactive = 0,// Assuming mapping from ABI, verify actual enum values if specified elsewhere
-    BondingPhase = 1,
-    DexPhase = 2,
-    Migrated = 3
+    Uninitialized = 0,
+    Bonding = 1,
+    Dex = 2
 }
 export interface GetTransactionHistoryOptions {
     userAddress?: Address;
@@ -80,3 +79,10 @@ export interface TransactionResponse {
     skip: number;
     data: Transaction[];
 }
+export interface SwapQuote {
+    amountOut: string;
+    amountOutMin: string;
+    priceImpact: string;
+    executionPrice: string;
+    fee: string;
+}

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -1,13 +1,12 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import "@reservoir0x/relay-kit-ui/styles.css";
 import { Account } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
 import { B3ContextType } from "./types";
-import "@reservoir0x/relay-kit-ui/styles.css";
-export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -19,6 +18,8 @@ export declare function B3Provider({ theme, children, accountOverride, environme
         style?: React.CSSProperties;
     };
     clientType?: ClientType;
+    rpcUrls?: Record<number, string>;
+    partnerId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-alpha.1",
+  "version": "0.0.40-alpha.11",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -241,8 +241,8 @@
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
-    "@feathersjs/socketio-client": "5.0.33",
     "@feathersjs/rest-client": "5.0.33",
+    "@feathersjs/socketio-client": "5.0.33",
     "@feathersjs/typebox": "5.0.33",
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@hey-api/client-fetch": "0.8.3",
@@ -261,6 +261,7 @@
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.3.1",
+    "@thirdweb-dev/wagmi-adapter": "^0.2.141",
     "@web3icons/react": "3.16.0",
     "big.js": "^7.0.1",
     "class-variance-authority": "0.7.0",
@@ -329,10 +330,10 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",
-    "thirdweb": "^5.105.20",
+    "thirdweb": "5.106.0",
     "three": "^0.175.0",
-    "wagmi": "^2.14.15",
-    "viem": "^2.28.1"
+    "viem": "^2.28.1",
+    "wagmi": "^2.14.15"
   },
   "peerDependenciesMeta": {
     "@react-three/postprocessing": {

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

@@ -40,6 +40,7 @@ import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
@@ -59,6 +60,7 @@ export enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -890,6 +892,8 @@ function AnySpendInner({
               fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
               recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
               hideDstToken={isBuyMode}
+              anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           </motion.div>
         )}
@@ -949,6 +953,7 @@ function AnySpendInner({
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
           />
         )}
       </div>
@@ -1060,6 +1065,13 @@ function AnySpendInner({
     />
   );
 
+  const pointsDetailView = (
+    <PointsDetailPanel
+      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1115,6 +1127,9 @@ function AnySpendInner({
             <div key="fiat-payment-method-view" className={cn(mode === "page" && "p-6")}>
               {fiatPaymentMethodView}
             </div>,
+            <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
+              {pointsDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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

@@ -14,6 +14,7 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -223,6 +224,8 @@ function AnySpendDepositHypeInner({
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+                anyspendQuote={anyspendQuote}
+                onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               />
             </motion.div>
           )}
@@ -263,6 +266,7 @@ function AnySpendDepositHypeInner({
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           )}
         </div>
@@ -448,6 +452,13 @@ function AnySpendDepositHypeInner({
     />
   );
 
+  const pointsDetailView = (
+    <PointsDetailPanel
+      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  );
+
   // If showing token selection, render with panel transitions
   return (
     <StyleRoot>
@@ -497,6 +508,9 @@ function AnySpendDepositHypeInner({
             <div key="loading-view" className={cn(mode === "page" && "p-6")}>
               {loadingView}
             </div>,
+            <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
+              {pointsDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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

@@ -5,6 +5,7 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 
 interface CryptoReceiveSectionProps {
@@ -27,6 +28,8 @@ interface CryptoReceiveSectionProps {
   // custom dst token data
   dstTokenSymbol?: string;
   dstTokenLogoURI?: string;
+  // Points navigation
+  onShowPointsDetail?: () => void;
 }
 
 export function CryptoReceiveSection({
@@ -44,7 +47,10 @@ export function CryptoReceiveSection({
   anyspendQuote,
   dstTokenSymbol,
   dstTokenLogoURI,
+  onShowPointsDetail,
 }: CryptoReceiveSectionProps) {
+  const featureFlags = useFeatureFlags();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -100,61 +106,73 @@ 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-start gap-2 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 && (
+          <button
+            key={`points-${anyspendQuote.data.pointsAmount}`}
+            className="bg-as-brand hover:scale-102 active:scale-98 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+            onClick={() => onShowPointsDetail?.()}
+          >
+            <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+            <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
+          </button>
+        )}
       </div>
     </motion.div>
   );

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

@@ -110,9 +110,6 @@ function getOrderSuccessText({
     case "custom":
       actionText = order.metadata.action || `executed contract`;
       return `Successfully ${actionText}`;
-    case "hype_duel":
-      actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
-      return `Successfully ${actionText} to ${recipient}`;
     default:
       throw new Error("Invalid order type");
   }
@@ -667,8 +664,8 @@ export const OrderDetails = memo(function OrderDetails({
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="execute-details" className="order-details-execute-item">
-            <AccordionTrigger className="order-details-execute-trigger">Transaction Details</AccordionTrigger>
-            <AccordionContent className="order-details-execute-content pl-2">
+            <AccordionTrigger className="accordion-trigger">Transaction Details</AccordionTrigger>
+            <AccordionContent className="accordion-content pl-2">
               <div className="relative flex w-full flex-col gap-4">
                 <div className="bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2">
                   <motion.div

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

@@ -1,5 +1,6 @@
 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";
@@ -7,6 +8,7 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 
@@ -25,6 +27,8 @@ export function PanelOnramp({
   recipientSelectionPanelIndex,
   dstTokenSymbol,
   hideDstToken = false,
+  anyspendQuote,
+  onShowPointsDetail,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -40,7 +44,10 @@ export function PanelOnramp({
   recipientSelectionPanelIndex: number;
   dstTokenSymbol?: string;
   hideDstToken?: boolean;
+  anyspendQuote?: GetQuoteResponse;
+  onShowPointsDetail?: () => void;
 }) {
+  const featureFlags = useFeatureFlags();
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
 
@@ -245,21 +252,27 @@ 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 && (
+                <button
+                  key={`points-${anyspendQuote.data.pointsAmount}`}
+                  className="bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+                  onClick={() => onShowPointsDetail?.()}
+                >
+                  <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+                  <span className="text-xs text-white">+{anyspendQuote.data.pointsAmount.toLocaleString()} pts</span>
+                </button>
+              )}
+            </div>
+            <span className="text-as-primary font-semibold">
+              ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}
+            </span>
           </div>
         </div>
       </div>