@b3dotfun/sdk 0.0.40-alpha.2 → 0.0.40-alpha.21

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

@@ -507,7 +507,7 @@ export interface paths {
                          * @description Type of trade execution
                          * @enum {string}
                          */
-                        tradeType: "EXACT_INPUT" | "EXPECTED_OUTPUT" | "EXACT_OUTPUT";
+                        tradeType: "EXACT_INPUT" | "EXACT_OUTPUT";
                         /**
                          * @description Amount to quote
                          * @example 1000000000000000000
@@ -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.2",
+  "version": "0.0.40-alpha.21",
   "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";
@@ -71,6 +73,11 @@ export function AnySpend(props: {
   recipientAddress?: string;
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * Useful for handling special cases like B3 token selection.
+   */
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -89,6 +96,7 @@ function AnySpendInner({
   loadOrder,
   hideTransactionHistoryButton,
   recipientAddress: recipientAddressFromProps,
+  onTokenSelect,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -97,6 +105,7 @@ function AnySpendInner({
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
   recipientAddress?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -437,7 +446,7 @@ function AnySpendInner({
           srcTokenAddress: selectedSrcToken.address,
           dstTokenAddress: isBuyMode ? destinationTokenAddress : selectedDstToken.address,
           type: "swap",
-          tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXPECTED_OUTPUT",
+          tradeType: isSrcInputDirty ? "EXACT_INPUT" : "EXACT_OUTPUT",
           amount: activeInputAmountInWei,
         }
       : {
@@ -869,6 +878,7 @@ function AnySpendInner({
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
             anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
           />
         ) : (
           <motion.div
@@ -890,6 +900,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 +961,7 @@ function AnySpendInner({
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
           />
         )}
       </div>
@@ -1060,6 +1073,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 +1135,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/AnySpendBondKit.tsx

@@ -366,7 +366,6 @@ export function AnySpendBondKit({
       contractAddress={contractAddress}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "BondKit Buy",
       }}
       header={header}

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

@@ -675,7 +675,6 @@ export function AnySpendBuySpin({
       spenderAddress={paymentConfig.entryModule}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: `buy ${userSpinQuantity} spin${userSpinQuantity !== "1" ? "s" : ""}`,
       }}
       header={header}

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

@@ -42,12 +42,15 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
+import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
 import { OrderToken } from "./common/OrderToken";
+import { PointsBadge } from "./common/PointsBadge";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 enum PanelView {
@@ -58,6 +61,7 @@ enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 function generateGetRelayQuoteRequest({
@@ -165,6 +169,7 @@ export function AnySpendCustom(props: {
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -191,6 +196,7 @@ function AnySpendCustomInner({
   header,
   onSuccess,
   showRecipient = true,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -213,8 +219,10 @@ function AnySpendCustomInner({
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const hasMounted = useHasMounted();
+  const featureFlags = useFeatureFlags();
 
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -314,8 +322,8 @@ function AnySpendCustomInner({
       dstToken: dstToken,
       dstAmount: dstAmount,
       contractAddress: contractAddress,
-      tokenId: metadata.type === "mint_nft" ? metadata.nftContract.tokenId : undefined,
-      contractType: metadata.type === "mint_nft" ? metadata.nftContract.type : undefined,
+      tokenId: orderType === "mint_nft" ? metadata.nftContract.tokenId : undefined,
+      contractType: orderType === "mint_nft" ? metadata.nftContract.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
     });
@@ -328,7 +336,6 @@ function AnySpendCustomInner({
     encodedData,
     metadata?.nftContract?.tokenId,
     metadata?.nftContract?.type,
-    metadata?.type,
     orderType,
     spenderAddress,
     srcChainId,
@@ -426,7 +433,7 @@ function AnySpendCustomInner({
         recipientAddress,
         creatorAddress: currentWallet?.wallet?.address,
         nft:
-          metadata.type === "mint_nft"
+          orderType === "mint_nft"
             ? metadata.nftContract.type === "erc1155"
               ? {
                   type: "erc1155",
@@ -448,7 +455,7 @@ function AnySpendCustomInner({
                 }
             : undefined,
         tournament:
-          metadata.type === "join_tournament" || metadata.type === "fund_tournament"
+          orderType === "join_tournament" || orderType === "fund_tournament"
             ? {
                 ...metadata.tournament,
                 contractAddress: contractAddress,
@@ -457,13 +464,12 @@ function AnySpendCustomInner({
             : undefined,
         // only populate payload for custom tx
         payload:
-          metadata.type === "custom"
+          orderType === "custom"
             ? {
                 amount: dstAmount,
                 data: encodedData,
                 spenderAddress: spenderAddress,
                 to: contractAddress,
-                action: metadata.action,
               }
             : undefined,
       } as CreateOrderParams;
@@ -749,6 +755,23 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Render points badge if conditions are met
+  const renderPointsBadge = () => {
+    if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+      return (
+        <PointsBadge
+          pointsAmount={anyspendQuote.data.pointsAmount}
+          pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+          onClick={() => {
+            onShowPointsDetail?.();
+            setActivePanel(PanelView.POINTS_DETAIL);
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
   // Confirm order view.
   const confirmOrderView = (
     <div className={"relative mx-auto flex w-full flex-col items-center"}>
@@ -917,9 +940,12 @@ function AnySpendCustomInner({
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                   className="relative flex w-full items-center justify-between"
                 >
-                  <span className="text-as-tertiarry text-sm">
-                    Total <span className="text-as-tertiarry">(with fee)</span>
-                  </span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-as-tertiarry text-sm">
+                      Total <span className="text-as-tertiarry">(with fee)</span>
+                    </span>
+                    {renderPointsBadge()}
+                  </div>
                   <span className="text-as-primary font-semibold">
                     {formattedSrcAmount || "--"} {srcToken.symbol}
                   </span>
@@ -1040,9 +1066,12 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <span className="text-as-tertiarry text-sm">
-                  Total <span className="text-as-tertiarry">(USD)</span>
-                </span>
+                <div className="flex items-center gap-2">
+                  <span className="text-as-tertiarry text-sm">
+                    Total <span className="text-as-tertiarry">(USD)</span>
+                  </span>
+                  {renderPointsBadge()}
+                </div>
                 <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
               </motion.div>
             </div>
@@ -1153,6 +1182,16 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Points detail view
+  const pointsDetailView = (
+    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+      <PointsDetailPanel
+        pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+        onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
+      />
+    </div>
+  );
+
   // Return the TransitionPanel with all views
   return (
     <StyleRoot>
@@ -1196,6 +1235,9 @@ function AnySpendCustomInner({
           <div key="fiat-payment-method-view" className="w-full">
             {fiatPaymentMethodView}
           </div>,
+          <div key="points-detail-view" className="w-full">
+            {pointsDetailView}
+          </div>,
         ]}
       </TransitionPanel>
     </StyleRoot>

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

@@ -36,12 +36,14 @@ export function AnySpendNFT({
   recipientAddress,
   nftContract,
   onSuccess,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
   nftContract: components["schemas"]["NftContract"];
   onSuccess?: (txHash?: string) => void;
+  onShowPointsDetail?: () => void;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const [isLoadingFallback, setIsLoadingFallback] = useState(false);
@@ -164,6 +166,7 @@ export function AnySpendNFT({
       }}
       header={header}
       onSuccess={onSuccess}
+      onShowPointsDetail={onShowPointsDetail}
     />
   );
 }

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

@@ -491,7 +491,6 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "stake B3",
       }}
       header={header}

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

@@ -1,4 +1,5 @@
 import { B3_TOKEN } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import invariant from "invariant";
@@ -14,6 +15,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";
@@ -35,6 +37,11 @@ export interface AnySpendDepositHypeProps {
   sourceTokenChainId?: number;
   onSuccess?: () => void;
   mainFooter?: React.ReactNode;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * Useful for handling special cases like B3 token selection.
+   */
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function AnySpendDepositHype(props: AnySpendDepositHypeProps) {
@@ -56,6 +63,7 @@ function AnySpendDepositHypeInner({
   sourceTokenChainId,
   onSuccess,
   mainFooter,
+  onTokenSelect,
 }: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
@@ -201,6 +209,7 @@ function AnySpendDepositHypeInner({
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
+              onTokenSelect={onTokenSelect}
             />
           ) : (
             <motion.div
@@ -223,6 +232,8 @@ function AnySpendDepositHypeInner({
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+                anyspendQuote={anyspendQuote}
+                onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               />
             </motion.div>
           )}
@@ -263,6 +274,7 @@ function AnySpendDepositHypeInner({
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           )}
         </div>
@@ -448,6 +460,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 +516,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/AnyspendSignatureMint.tsx

@@ -144,7 +144,6 @@ export function AnyspendSignatureMint({
       contractAddress={signatureData.collection.address!}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "Signature Mint",
       }}
       header={header}