@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-test.0

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

@@ -6,7 +6,7 @@ import { B3ContextType } from "./types";
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, partnerId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, partnerId, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -18,6 +18,7 @@ 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;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-test.6",
+  "version": "0.0.41-test.0",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -239,6 +239,7 @@
   "dependencies": {
     "@b3dotfun/b3-api": "0.0.50",
     "@b3dotfun/basement-api": "0.0.11",
+    "@farcaster/miniapp-wagmi-connector": "^1.0.0",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
     "@feathersjs/rest-client": "5.0.33",

package/src/anyspend/constants/index.ts

@@ -96,5 +96,3 @@ export const VENDOR_DISPLAY_NAMES = {
   stripe: "Stripe",
   unknown: "Unknown Vendor",
 } as const;
-
-export const DEPOSIT_HYPE_ACTION = "deposit_hype";

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

@@ -38,9 +38,9 @@ import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus } from "./common/OrderStatus";
 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";
 
@@ -60,6 +60,7 @@ export enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -72,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();
 
@@ -90,6 +96,7 @@ function AnySpendInner({
   loadOrder,
   hideTransactionHistoryButton,
   recipientAddress: recipientAddressFromProps,
+  onTokenSelect,
 }: {
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
@@ -98,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();
@@ -807,22 +815,21 @@ function AnySpendInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
-              }}
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+              setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
+            }}
+          />
         )}
         {/* {mode === "page" && <div className="h-12" />} */}
       </div>
@@ -871,6 +878,7 @@ function AnySpendInner({
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
             onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
             anyspendQuote={anyspendQuote}
+            onTokenSelect={onTokenSelect}
           />
         ) : (
           <motion.div
@@ -892,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>
         )}
@@ -951,6 +961,7 @@ function AnySpendInner({
               setDstAmount(value);
             }}
             anyspendQuote={anyspendQuote}
+            onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
           />
         )}
       </div>
@@ -1062,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>
@@ -1117,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/AnySpendCustom.tsx

@@ -47,7 +47,6 @@ import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPay
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus";
 import { OrderToken } from "./common/OrderToken";
 import { RecipientSelection } from "./common/RecipientSelection";
 
@@ -648,26 +647,25 @@ function AnySpendCustomInner({
       )}
     >
       {oat && (
-        <>
-          <OrderStatusDisplay order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-          <OrderDetails
-            mode={mode}
-            order={oat.data.order}
-            depositTxs={oat.data.depositTxs}
-            relayTxs={oat.data.relayTxs}
-            executeTx={oat.data.executeTx}
-            refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-            onBack={() => {
-              setOrderId(undefined);
-              setActivePanel(PanelView.CONFIRM_ORDER);
-              // Remove orderId from URL when canceling
-              const params = new URLSearchParams(searchParams.toString());
-              params.delete("orderId");
-              router.push(`${window.location.pathname}?${params.toString()}`);
-            }}
-          />
-        </>
+        <OrderDetails
+          mode={mode}
+          order={oat.data.order}
+          depositTxs={oat.data.depositTxs}
+          relayTxs={oat.data.relayTxs}
+          executeTx={oat.data.executeTx}
+          refundTxs={oat.data.refundTxs}
+          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+          selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+          onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+          onBack={() => {
+            setOrderId(undefined);
+            setActivePanel(PanelView.CONFIRM_ORDER);
+            // Remove orderId from URL when canceling
+            const params = new URLSearchParams(searchParams.toString());
+            params.delete("orderId");
+            router.push(`${window.location.pathname}?${params.toString()}`);
+          }}
+        />
       )}
       {mode === "page" && <div className="h-12" />}
     </div>

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,7 +15,7 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
-import { OrderStatus } from "./common/OrderStatus";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -36,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) {
@@ -57,6 +63,7 @@ function AnySpendDepositHypeInner({
   sourceTokenChainId,
   onSuccess,
   mainFooter,
+  onTokenSelect,
 }: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
@@ -202,6 +209,7 @@ function AnySpendDepositHypeInner({
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
+              onTokenSelect={onTokenSelect}
             />
           ) : (
             <motion.div
@@ -224,6 +232,8 @@ function AnySpendDepositHypeInner({
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+                anyspendQuote={anyspendQuote}
+                onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               />
             </motion.div>
           )}
@@ -264,6 +274,7 @@ function AnySpendDepositHypeInner({
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           )}
         </div>
@@ -381,23 +392,22 @@ function AnySpendDepositHypeInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-              }}
-              disableUrlParamManagement
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+            }}
+            disableUrlParamManagement
+          />
         )}
       </div>
     </div>
@@ -450,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>
@@ -499,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/common/ConnectWalletPayment.tsx

@@ -2,14 +2,14 @@
 
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { ShinyButton, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { ShinyButton, useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
 
 type Tournament = components["schemas"]["Tournament"];
 type NFT = components["schemas"]["NFT"];
@@ -24,6 +24,7 @@ interface ConnectWalletPaymentProps {
   tournament?: Tournament;
   nft?: NFT;
   cryptoPaymentMethod: CryptoPaymentMethodType;
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 
 export default function ConnectWalletPayment({
@@ -35,10 +36,15 @@ export default function ConnectWalletPayment({
   tournament,
   nft,
   cryptoPaymentMethod,
+  onPaymentMethodChange,
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
-  const { address: connectedAddress } = useAccount();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+  const connectedEvmAddress =
+    cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
 
   const srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
@@ -94,9 +100,11 @@ export default function ConnectWalletPayment({
           Connected to:{" "}
           {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
             ? centerTruncate(phantomWalletAddress, 6)
-            : centerTruncate(connectedAddress || "")}
+            : centerTruncate(connectedEvmAddress || "")}
         </span>
 
+        <PaymentMethodSwitch currentMethod={cryptoPaymentMethod} onMethodChange={onPaymentMethodChange} />
+
         <div className="mt-4">
           <OrderDetailsCollapsible
             order={order}