@b3dotfun/sdk 0.0.23 → 0.0.24

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

@@ -0,0 +1,77 @@
+import type { Address, Hex } from "viem";
+export type TokenDetails = {
+    name: string;
+    symbol: string;
+    decimals: number;
+    totalSupply: bigint;
+    owner: Address;
+};
+export type BondkitTokenConfig = {
+    name: string;
+    symbol: string;
+    feeRecipient: Address;
+    finalTokenSupply: bigint;
+    aggressivenessFactor: number;
+    lpSplitRatioFeeRecipientBps: bigint;
+    targetEth: bigint;
+    uniswapV2RouterAddress: Address;
+    migrationAdminAddress: Address;
+};
+export type BondkitTokenCreatedEventArgs = {
+    tokenAddress: Address;
+    implementationAddress: Address;
+    name: string;
+    symbol: string;
+    feeRecipient: Address;
+    migrationAdmin: Address;
+};
+export type BondkitTokenInitializationConfig = BondkitTokenConfig;
+export type BoughtEventArgs = {
+    buyer: Address;
+    ethIn: bigint;
+    tokensOut: bigint;
+    feeRecipientFee: bigint;
+};
+export type SoldEventArgs = {
+    seller: Address;
+    tokensIn: bigint;
+    ethOut: bigint;
+    feeRecipientFee: bigint;
+};
+export type DexMigrationEventArgs = {
+    ethForLp: bigint;
+    tokensForLp: bigint;
+    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
+}
+export interface GetTransactionHistoryOptions {
+    userAddress?: Address;
+    type?: "buy" | "sell";
+    from?: number;
+    to?: number;
+    limit?: number;
+    offset?: number;
+}
+export interface Transaction {
+    timestamp: number;
+    price: number;
+    amount: string;
+    type: "buy" | "sell";
+    userAddress: Address;
+    txHash: Hex;
+    chainId: number;
+    blockNumber?: number;
+    totalEthRaisedBonding?: string;
+    value?: string;
+}
+export interface TransactionResponse {
+    total: number;
+    limit: number;
+    skip: number;
+    data: Transaction[];
+}

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

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+interface SendERC20ButtonProps {
+    chainId: number;
+    to: `0x${string}`;
+    tokenAddress: `0x${string}`;
+    amount: bigint;
+    className?: string;
+    children?: string | JSX.Element;
+    onSuccess?: (tx: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export declare function SendERC20Button({ chainId, to, tokenAddress, amount, className, children, onSuccess, onError, }: SendERC20ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+interface SendETHButtonProps {
+    chainId: number;
+    to: `0x${string}`;
+    value: bigint;
+    className?: string;
+    children?: string | JSX.Element;
+    onSuccess?: (tx: `0x${string}`) => void;
+    onError?: (error: Error) => void;
+}
+export declare function SendETHButton({ chainId, to, value, className, children, onSuccess, onError }: SendETHButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -17,6 +17,8 @@ export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 export { RequestPermissionsButton } from "./RequestPermissions/RequestPermissionsButton";
 export { AccountAssets } from "./AccountAssets/AccountAssets";
 export { MintButton } from "./MintButton/MintButton";
+export { SendETHButton } from "./SendETHButton/SendETHButton";
+export { SendERC20Button } from "./SendERC20Button/SendERC20Button";
 export { TransakModal } from "./Transak/TransakModal";
 export { Button as CustomButton, buttonVariants as customButtonVariants } from "./custom/Button";
 export { ClientOnly } from "./custom/ClientOnly";

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

@@ -3,5 +3,5 @@ import * as React from "react";
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/types/global-account/react/hooks/index.d.ts

@@ -6,7 +6,7 @@ export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
 export { useB3EnsName } from "./useB3EnsName";
 export { useBestTransactionPath } from "./useBestTransactionPath";
 export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
-export { useClaim } from "./useClaim";
+export * from "./useClaim";
 export { useConnect } from "./useConnect";
 export { useExchangeRate } from "./useExchangeRate";
 export { useGetAllTWSigners, type TWSignerWithMetadata } from "./useGetAllTWSigners";
@@ -32,4 +32,5 @@ export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
+export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";

package/dist/types/global-account/react/hooks/useChainSwitchWithAction.d.ts

@@ -1,5 +1,4 @@
-import { WalletClient } from "viem";
 export declare function useChainSwitchWithAction(): {
-    switchChainAndExecute: (targetChainId: number, action: (client: WalletClient) => Promise<void>) => Promise<void>;
+    switchChainAndExecute: (targetChainId: number, action: () => Promise<void>) => Promise<void>;
     isSwitchingOrExecuting: boolean;
 };

package/dist/types/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts

@@ -0,0 +1,11 @@
+export interface UnifiedTransactionParams {
+    to: string;
+    data?: string;
+    value: bigint;
+}
+export declare function useUnifiedChainSwitchAndExecute(): {
+    switchChainAndExecute: (targetChainId: number, params: UnifiedTransactionParams) => Promise<string | undefined>;
+    isSwitchingOrExecuting: boolean;
+    isActiveSmartWallet: boolean | undefined;
+    isActiveEOAWallet: boolean | undefined;
+};

package/dist/types/shared/constants/chains/supported.d.ts

@@ -62,3 +62,7 @@ export declare const b3TestnetThirdWeb: Readonly<import("thirdweb/dist/types/cha
 export declare const b3Mainnet: import("viem").Chain;
 export declare const b3Testnet: import("viem").Chain;
 export declare const baseMainnet: import("viem").Chain;
+/**
+ * Get a Thirdweb chain by chain ID from supportedChainsTW
+ */
+export declare function getThirdwebChain(chainId: number): ThirdwebChain;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -65,6 +65,36 @@
       "import": "./dist/esm/anyspend/abis/*.js",
       "require": "./dist/cjs/anyspend/abis/*.js"
     },
+    "./bondkit": {
+      "types": "./dist/types/bondkit/index.d.ts",
+      "import": "./dist/esm/bondkit/index.js",
+      "require": "./dist/cjs/bondkit/index.js"
+    },
+    "./bondkit/types": {
+      "types": "./dist/types/bondkit/types.d.ts",
+      "import": "./dist/esm/bondkit/types.js",
+      "require": "./dist/cjs/bondkit/types.js"
+    },
+    "./bondkit/constants": {
+      "types": "./dist/types/bondkit/constants.d.ts",
+      "import": "./dist/esm/bondkit/constants.js",
+      "require": "./dist/cjs/bondkit/constants.js"
+    },
+    "./bondkit/config": {
+      "types": "./dist/types/bondkit/config.d.ts",
+      "import": "./dist/esm/bondkit/config.js",
+      "require": "./dist/cjs/bondkit/config.js"
+    },
+    "./bondkit/abis": {
+      "types": "./dist/types/bondkit/abis/index.d.ts",
+      "import": "./dist/esm/bondkit/abis/index.js",
+      "require": "./dist/cjs/bondkit/abis/index.js"
+    },
+    "./bondkit/abis/*": {
+      "types": "./dist/types/bondkit/abis/*.d.ts",
+      "import": "./dist/esm/bondkit/abis/*.js",
+      "require": "./dist/cjs/bondkit/abis/*.js"
+    },
     "./global-account": {
       "react-native": {
         "types": "./dist/types/global-account/index.native.d.ts",
@@ -179,6 +209,11 @@
       "types": "./dist/types/generated/chain-networks.d.ts",
       "import": "./dist/esm/generated/chain-networks.js",
       "require": "./dist/cjs/generated/chain-networks.js"
+    },
+    "./bondkit/components/TradingView/TradingView": {
+      "types": "./dist/types/bondkit/components/TradingView/TradingView.d.ts",
+      "import": "./dist/esm/bondkit/components/TradingView/TradingView.js",
+      "require": "./dist/cjs/bondkit/components/TradingView/TradingView.js"
     }
   },
   "files": [
@@ -191,9 +226,8 @@
   ],
   "dependencies": {
     "@amplitude/analytics-browser": "2.14.0",
-    "@b3dotfun/b3-api": "0.0.38",
+    "@b3dotfun/b3-api": "0.0.41",
     "@b3dotfun/basement-api": "0.0.11",
-    "@b3dotfun/bondkit": "^0.1.17",
     "@chakra-ui/react": "2.10.7",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
@@ -203,13 +237,14 @@
     "@hey-api/client-fetch": "0.8.3",
     "@hey-api/openapi-ts": "0.64.13",
     "@lottiefiles/dotlottie-react": "0.7.2",
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-dialog": "1.1.7",
     "@radix-ui/react-popover": "1.1.7",
     "@radix-ui/react-scroll-area": "1.1.0",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-tooltip": "1.1.8",
-    "@reservoir0x/relay-kit-ui": "2.15.9",
+    "@reservoir0x/relay-kit-ui": "2.15.11",
     "@reservoir0x/relay-sdk": "2.3.1",
     "@reservoir0x/reservoir-kit-ui": "2.8.7",
     "@solana/spl-token": "^0.4.13",
@@ -240,7 +275,7 @@
     "thirdweb": "5.105.20",
     "typescript": "5.8.2",
     "vaul": "^1.1.2",
-    "viem": "2.27.2",
+    "viem": "2.28.1",
     "wagmi": "2.14.15",
     "zod": "3.25.51",
     "zustand": "4.5.6"
@@ -314,8 +349,8 @@
     "fix-dist": "[ -d ./dist/react/src ] && cp -r ./dist/react/src/* ./dist/ && rm -rf ./dist/react || echo \"No react directory found\"",
     "build": "pnpm clean && pnpm lint && pnpm build:types && pnpm build:cjs && pnpm build:esm && pnpm build:css",
     "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --declarationDir dist/types",
-    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/",
-    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && node scripts/fix-esm-imports.js",
+    "build:cjs": "tsc -p tsconfig.cjs.json --outDir dist/cjs --module commonjs && tsc-alias -p tsconfig.cjs.json --outDir dist/cjs && mkdir -p dist/cjs/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/cjs/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/cjs/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/cjs/bondkit/json_abis/ || echo \"No bondkit json_abis\")",
+    "build:esm": "tsc -p tsconfig.esm.json --outDir dist/esm --module esnext  && tsc-alias -p tsconfig.esm.json --outDir dist/esm && mkdir -p dist/esm/shared/generated && cp src/shared/generated/chain-networks.json src/shared/generated/coingecko-chains.json dist/esm/shared/generated/ && ([ -d src/bondkit/json_abis ] && mkdir -p dist/esm/bondkit/json_abis && cp -r src/bondkit/json_abis/* dist/esm/bondkit/json_abis/ || echo \"No bondkit json_abis\") && node scripts/fix-esm-imports.js",
     "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
     "dev:cjs": "tsc-watch -p tsconfig.cjs.json --onSuccess \"tsc-alias -p tsconfig.cjs.json --outDir dist/cjs\"",
     "dev:esm": "tsc-watch -p tsconfig.esm.json --onSuccess \"tsc-alias -p tsconfig.esm.json --outDir dist/esm\"",

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

@@ -415,7 +415,7 @@ function AnySpendInner({
   }, [recipientAddressFromProps, globalAddress]);
 
   // Get geo-based onramp options for fiat payments
-  const { geoData, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } = useGeoOnrampOptions(
+  const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(
     isMainnet,
     srcAmountOnRamp,
   );
@@ -427,9 +427,7 @@ function AnySpendInner({
         return "coinbase";
       case FiatPaymentMethod.STRIPE:
         // Determine if it's stripe onramp or stripe-web2 based on support
-        if (isStripeOnrampSupported) {
-          return "stripe";
-        } else if (stripeWeb2Support?.isSupport) {
+        if (stripeWeb2Support?.isSupport) {
           return "stripe-web2";
         }
         return undefined;
@@ -844,7 +842,7 @@ function AnySpendInner({
         vendor = "coinbase";
         paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
       } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-        if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+        if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
           toast.error("Stripe not available");
           return;
         }
@@ -1078,16 +1076,8 @@ function AnySpendInner({
                   <>
                     {connectedAddress ? (
                       <>
-                        {globalWallet?.meta?.icon && (
-                          <img
-                            src={globalWallet.meta.icon || ""}
-                            alt={globalWallet.ensName || ""}
-                            className="bg-b3-react-foreground size-6 rounded-full object-cover opacity-100"
-                          />
-                        )}
                         <div className="flex items-center gap-1">
-                          {connectedName && <span>{formatUsername(connectedName)}</span>}
-                          <span>{shortenAddress(connectedAddress || "")}</span>
+                          {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                         </div>
                       </>
                     ) : (
@@ -1211,16 +1201,8 @@ function AnySpendInner({
                   <>
                     {recipientAddress ? (
                       <>
-                        {recipientProfile?.data?.avatar && (
-                          <img
-                            src={recipientProfile.data?.avatar || ""}
-                            alt="Connected Wallet"
-                            className="bg-as-primary h-6 w-6 rounded-full"
-                          />
-                        )}
                         <span className="text-as-tertiarry flex items-center gap-1 text-sm">
-                          {recipientName && <span>{formatUsername(recipientName)}</span>}
-                          <span>{shortenAddress(recipientAddress || "")}</span>
+                          {recipientName ? formatUsername(recipientName) : shortenAddress(recipientAddress || "")}
                         </span>
                       </>
                     ) : (

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

@@ -1,4 +1,4 @@
-import { BondkitToken } from "@b3dotfun/bondkit";
+import { BondkitToken } from "../../../bondkit";
 import {
   Button,
   GlareCardRounded,
@@ -202,7 +202,7 @@ export function AnySpendBondKit({
   };
 
   const header = () => (
-    <div className="w-full px-6 py-4">
+    <div className="bg-as-surface-primary w-full px-6 py-4">
       <div className="flex w-full flex-col items-center space-y-6">
         <h2 className="text-[28px] font-bold">
           Buy {tokenName} ({tokenSymbol})

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

@@ -5,10 +5,10 @@ import {
   Input,
   StyleRoot,
   TextLoop,
-  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
   useTokenBalance,
+  useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import invariant from "invariant";
@@ -17,7 +17,7 @@ import { motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
@@ -159,8 +159,7 @@ export function AnySpendBuySpin({
 
   // Wagmi hooks
   const { address } = useAccount();
-  const { writeContractAsync } = useWriteContract();
-  const { switchChainAndExecute } = useChainSwitchWithAction();
+  const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
   // State for direct buying flow (when user has B3 tokens)
   const [isBuying, setIsBuying] = useState(false);
@@ -348,41 +347,52 @@ export function AnySpendBuySpin({
     try {
       setIsBuying(true);
 
-      await switchChainAndExecute(chainId, async () => {
-        // Check current allowance for B3 token to entryModule
-        const allowance = await basePublicClient.readContract({
-          address: B3_TOKEN.address as `0x${string}`,
+      // Check current allowance for B3 token to entryModule
+      const allowance = await basePublicClient.readContract({
+        address: B3_TOKEN.address as `0x${string}`,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [address, paymentConfig.entryModule as `0x${string}`],
+      });
+
+      // If allowance is insufficient, request approval first
+      if (allowance < totalCost) {
+        toast.info("Approving B3 spending...");
+
+        const approvalData = encodeFunctionData({
           abi: erc20Abi,
-          functionName: "allowance",
-          args: [address, paymentConfig.entryModule as `0x${string}`],
+          functionName: "approve",
+          args: [paymentConfig.entryModule as `0x${string}`, totalCost],
         });
 
-        // If allowance is insufficient, request approval
-        if (allowance < totalCost) {
-          toast.info("Approving B3 spending...");
+        await switchChainAndExecute(chainId, {
+          to: B3_TOKEN.address as `0x${string}`,
+          data: approvalData,
+          value: BigInt(0),
+        });
 
-          await writeContractAsync({
-            address: B3_TOKEN.address as `0x${string}`,
-            abi: erc20Abi,
-            functionName: "approve",
-            args: [paymentConfig.entryModule as `0x${string}`, totalCost],
-          });
+        toast.info("Approval confirmed. Proceeding with spin purchase...");
+      }
 
-          toast.info("Approval confirmed. Proceeding with spin purchase...");
-        }
+      // Execute the buy entries and spin
+      toast.info("Buying spins...");
 
-        // Execute the buy entries and spin
-        toast.info("Buying spins...");
-        const buyHash = await writeContractAsync({
-          address: spinwheelContractAddress as `0x${string}`,
-          abi: SPIN_WHEEL_ABI,
-          functionName: "buyEntriesAndSpin",
-          args: [address, BigInt(userSpinQuantity)],
-        });
+      const buyData = encodeFunctionData({
+        abi: SPIN_WHEEL_ABI,
+        functionName: "buyEntriesAndSpin",
+        args: [address, BigInt(userSpinQuantity)],
+      });
 
+      const buyHash = await switchChainAndExecute(chainId, {
+        to: spinwheelContractAddress as `0x${string}`,
+        data: buyData,
+        value: BigInt(0),
+      });
+
+      if (buyHash) {
         setBuyingTxHash(buyHash);
         toast.success("Spin purchase transaction submitted!");
-      });
+      }
     } catch (error) {
       console.error("@@anyspend-buy-spin:error:", error);
       toast.error("Spin purchase failed. Please try again.");
@@ -637,10 +647,10 @@ export function AnySpendBuySpin({
 
                 <Button
                   onClick={confirmQuantity}
-                  disabled={!isQuantityValid || !displayQuantity || isBuying || isTxPending}
+                  disabled={!isQuantityValid || !displayQuantity || isBuying || isTxPending || isSwitchingOrExecuting}
                   className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
                 >
-                  {isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue"}
+                  {isBuying || isSwitchingOrExecuting ? "Buying..." : isTxPending ? "Confirming..." : "Continue"}
                 </Button>
               </div>
             ) : null}

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

@@ -371,8 +371,10 @@ function AnySpendCustomInner({
   );
 
   // Get geo data and onramp options (after quote is available)
-  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } =
-    useGeoOnrampOptions(isMainnet, srcFiatAmount);
+  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(
+    isMainnet,
+    srcFiatAmount,
+  );
 
   useEffect(() => {
     if (oat?.data?.order.status === "executed") {
@@ -404,7 +406,7 @@ function AnySpendCustomInner({
 
   const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
 
-  const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
+  const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
   const recipientProfile = useProfile({ address: recipientAddress });
   const recipientName = recipientProfile.data?.name;
 
@@ -556,7 +558,7 @@ function AnySpendCustomInner({
         vendor = "coinbase";
         paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
       } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-        if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+        if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
           toast.error("Stripe not available");
           return;
         }
@@ -861,16 +863,8 @@ function AnySpendCustomInner({
                     <>
                       {connectedAddress ? (
                         <>
-                          {connectedProfile?.data?.avatar && (
-                            <img
-                              src={connectedProfile.data?.avatar || ""}
-                              alt="Connected Wallet"
-                              className="bg-as-primary h-6 w-6 rounded-full"
-                            />
-                          )}
                           <span className="text-as-tertiarry flex items-center gap-1">
-                            {connectedName && <span>{formatUsername(connectedName)}</span>}
-                            <span>{shortenAddress(connectedAddress || "")}</span>
+                            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                           </span>
                         </>
                       ) : (

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

@@ -5,10 +5,10 @@ import {
   Input,
   StyleRoot,
   TextLoop,
-  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
   useTokenBalance,
+  useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -18,7 +18,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
@@ -70,8 +70,7 @@ export function AnySpendStakeB3({
 
   // Wagmi hooks for direct staking
   const { address } = useAccount();
-  const { writeContractAsync } = useWriteContract();
-  const { switchChainAndExecute } = useChainSwitchWithAction();
+  const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
   // State for direct staking flow
   const [isStaking, setIsStaking] = useState(false);
@@ -191,41 +190,52 @@ export function AnySpendStakeB3({
     try {
       setIsStaking(true);
 
-      await switchChainAndExecute(base.id, async () => {
-        // Check current allowance
-        const allowance = await basePublicClient.readContract({
-          address: B3_TOKEN.address as `0x${string}`,
+      // Check current allowance
+      const allowance = await basePublicClient.readContract({
+        address: B3_TOKEN.address as `0x${string}`,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [address, ERC20Staking as `0x${string}`],
+      });
+
+      // If allowance is insufficient, request approval first
+      if (allowance < BigInt(userStakeAmount)) {
+        toast.info("Approving B3 spending...");
+
+        const approvalData = encodeFunctionData({
           abi: erc20Abi,
-          functionName: "allowance",
-          args: [address, ERC20Staking as `0x${string}`],
+          functionName: "approve",
+          args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
         });
 
-        // If allowance is insufficient, request approval
-        if (allowance < BigInt(userStakeAmount)) {
-          toast.info("Approving B3 spending...");
-
-          await writeContractAsync({
-            address: B3_TOKEN.address as `0x${string}`,
-            abi: erc20Abi,
-            functionName: "approve",
-            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
-          });
-
-          toast.info("Approval confirmed. Proceeding with stake...");
-        }
-
-        // Execute the stake
-        toast.info("Staking B3...");
-        const stakeHash = await writeContractAsync({
-          address: ERC20Staking as `0x${string}`,
-          abi: ABI_ERC20_STAKING,
-          functionName: "stake",
-          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
+        await switchChainAndExecute(base.id, {
+          to: B3_TOKEN.address as `0x${string}`,
+          data: approvalData,
+          value: BigInt(0),
         });
 
+        toast.info("Approval confirmed. Proceeding with stake...");
+      }
+
+      // Execute the stake
+      toast.info("Staking B3...");
+
+      const stakeData = encodeFunctionData({
+        abi: ABI_ERC20_STAKING,
+        functionName: "stake",
+        args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
+      });
+
+      const stakeHash = await switchChainAndExecute(base.id, {
+        to: ERC20Staking as `0x${string}`,
+        data: stakeData,
+        value: BigInt(0),
+      });
+
+      if (stakeHash) {
         setStakingTxHash(stakeHash);
         toast.success("Staking transaction submitted!");
-      });
+      }
     } catch (error) {
       console.error("@@b3-stake:error:", error);
       toast.error("Staking failed. Please try again.");
@@ -375,10 +385,10 @@ export function AnySpendStakeB3({
 
             <Button
               onClick={confirmAmount}
-              disabled={!isAmountValid || !displayAmount || isStaking || isTxPending}
+              disabled={!isAmountValid || !displayAmount || isStaking || isTxPending || isSwitchingOrExecuting}
               className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
             >
-              {isStaking ? "Staking..." : isTxPending ? "Confirming..." : "Continue"}
+              {isStaking || isSwitchingOrExecuting ? "Staking..." : isTxPending ? "Confirming..." : "Continue"}
             </Button>
           </motion.div>
         </div>