@b3dotfun/sdk 0.0.35 → 0.0.36

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

@@ -1,7 +1,6 @@
 import { preAuthenticate } from "thirdweb/wallets/in-app";
 export declare function useAuthentication(partnerId: string, loginWithSiwe?: boolean): {
     logout: (callback?: () => void) => Promise<void>;
-    isAuthenticating: boolean;
     isAuthenticated: boolean;
     isReady: boolean;
     isConnecting: boolean;
@@ -9,5 +8,5 @@ export declare function useAuthentication(partnerId: string, loginWithSiwe?: boo
     wallet: import("thirdweb/dist/types/wallets/in-app/core/wallet/types").EcosystemWallet;
     preAuthenticate: typeof preAuthenticate;
     connect: (strategyOptions?: import("thirdweb/wallets").SingleStepAuthArgsType) => Promise<import("thirdweb/wallets").Wallet | null>;
-    isAuthenticatingV2: boolean;
+    isAuthenticating: boolean;
 };

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

@@ -9,7 +9,7 @@ export interface Profile {
 export interface CombinedProfile {
     name: string | null;
     address: string | null;
-    avatar: string | null;
+    avatar: string | undefined;
     bio: string | null;
     displayName: string | null;
     profiles: Profile[];

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

@@ -0,0 +1,7 @@
+export declare function useRPMToken(): {
+    token: string;
+    accountId: string;
+    refetch: (queryParams: undefined) => Promise<any>;
+    isLoading: boolean;
+    isError: Error | null;
+};

package/dist/types/global-account/react/stores/useAuthStore.d.ts

@@ -5,7 +5,6 @@ interface AuthState {
     provider?: string;
     accessToken?: string;
     chain?: Chain;
-    isAuthenticating: boolean;
     isAuthenticated: boolean;
     isConnecting: boolean;
     isConnected: boolean;
@@ -15,7 +14,6 @@ interface AuthState {
     setStep: (step: "login" | "permissions") => void;
     setIsConnecting: (isConnecting: boolean) => void;
     setIsConnected: (isConnected: boolean) => void;
-    setIsAuthenticating: (isAuthenticating: boolean) => void;
     setIsAuthenticated: (isAuthenticated: boolean) => void;
     startAuth: (params: {
         provider: string;
@@ -25,8 +23,8 @@ interface AuthState {
         onError?: (error: Error) => void;
     }) => void;
     reset: () => void;
-    isAuthenticatingV2: boolean;
-    setIsAuthenticatingV2: (isAuthenticating: boolean) => void;
+    isAuthenticating: boolean;
+    setIsAuthenticating: (isAuthenticating: boolean) => void;
     hasStartedConnecting: boolean;
     setHasStartedConnecting: (hasStartedConnecting: boolean) => void;
 }

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -84,6 +84,10 @@ export interface ManageAccountModalProps extends BaseModalProps {
     setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
     /** Whether to show the referral information */
     showReferralInfo?: boolean;
+    /** Whether to show the swap button */
+    showSwap?: boolean;
+    /** Whether to show the deposit button */
+    showDeposit?: boolean;
 }
 /**
  * Props for the AnySpend modal
@@ -287,10 +291,16 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
     /** Callback function called when the deposit is successful */
     onSuccess?: (amount?: string) => void;
 }
+export interface AvatarEditorModalProps extends BaseModalProps {
+    /** Modal type identifier */
+    type: "avatarEditor";
+    /** Callback function called when avatar is successfully set */
+    onSuccess?: () => void;
+}
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps | AnySpendDepositHypeProps | AvatarEditorModalProps;
 /**
  * State interface for the modal store
  */

package/dist/types/global-account/react/utils/updateAvatar.d.ts

@@ -0,0 +1,4 @@
+export declare function updateAvatar(avatar: string): Promise<{
+    success: boolean;
+    error?: string;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -237,7 +237,7 @@
     "constants"
   ],
   "dependencies": {
-    "@b3dotfun/b3-api": "0.0.48",
+    "@b3dotfun/b3-api": "0.0.49",
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
@@ -254,8 +254,8 @@
     "@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.11",
-    "@reservoir0x/relay-sdk": "2.3.1",
+    "@reservoir0x/relay-kit-ui": "2.17.2",
+    "@reservoir0x/relay-sdk": "2.4.0",
     "@solana/spl-token": "^0.4.13",
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
@@ -321,9 +321,10 @@
   "peerDependencies": {
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@privy-io/react-auth": "^2.8.0",
-    "@react-three/postprocessing": "^2.16.6",
-    "@readyplayerme/visage": "^6.10.0",
-    "@tanstack/react-query": ">=5.55.0",
+    "@react-three/postprocessing": "2.16.6",
+    "@readyplayerme/react-avatar-creator": "0.5.0",
+    "@readyplayerme/visage": "6.10.0",
+    "@tanstack/react-query": "5.55.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-native-mmkv": "^3.2.0",

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

@@ -32,6 +32,7 @@ import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
+import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
@@ -40,7 +41,6 @@ import { OrderHistory } from "./common/OrderHistory";
 import { OrderStatus } from "./common/OrderStatus";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
-import { PaySection } from "./common/PaySection";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 
@@ -567,7 +567,10 @@ function AnySpendInner({
         return { text: "Choose payment method", disable: false, error: false };
       }
       // If payment method selected, show appropriate action
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+      if (
+        selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+        selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ) {
         return { text: "Swap", disable: false, error: false };
       }
       if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
@@ -632,6 +635,7 @@ function AnySpendInner({
         // If payment method is selected, create order with payment method info
         if (
           selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+          selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ||
           selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO
         ) {
           console.log("Creating crypto order with payment method:", selectedCryptoPaymentMethod);
@@ -856,8 +860,7 @@ function AnySpendInner({
       <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
         {/* Send section */}
         {activeTab === "crypto" ? (
-          <PaySection
-            paymentType="crypto"
+          <CryptoPaySection
             selectedSrcChainId={selectedSrcChainId}
             setSelectedSrcChainId={setSelectedSrcChainId}
             selectedSrcToken={selectedSrcToken}
@@ -866,9 +869,7 @@ function AnySpendInner({
             setSrcAmount={setSrcAmount}
             setIsSrcInputDirty={setIsSrcInputDirty}
             selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-            selectedFiatPaymentMethod={selectedFiatPaymentMethod}
             onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
-            onSelectFiatPaymentMethod={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
             anyspendQuote={anyspendQuote}
           />
         ) : (

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

@@ -8,13 +8,13 @@ import { toast } from "sonner";
 import { base } from "viem/chains";
 import { PanelView, useAnyspendFlow } from "../hooks/useAnyspendFlow";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
+import { CryptoPaySection } from "./common/CryptoPaySection";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 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 { PaySection } from "./common/PaySection";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -191,8 +191,7 @@ function AnySpendDepositHypeInner({
         <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
           {/* Send section */}
           {paymentType === "crypto" ? (
-            <PaySection
-              paymentType="crypto"
+            <CryptoPaySection
               selectedSrcChainId={selectedSrcChainId}
               setSelectedSrcChainId={setSelectedSrcChainId}
               selectedSrcToken={selectedSrcToken}
@@ -201,9 +200,7 @@ function AnySpendDepositHypeInner({
               setSrcAmount={setSrcAmount}
               setIsSrcInputDirty={setIsSrcInputDirty}
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-              selectedFiatPaymentMethod={selectedFiatPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
-              onSelectFiatPaymentMethod={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
             />
           ) : (

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

@@ -8,6 +8,7 @@ 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";
 
 type Tournament = components["schemas"]["Tournament"];
@@ -22,6 +23,7 @@ interface ConnectWalletPaymentProps {
   phantomWalletAddress?: string | null;
   tournament?: Tournament;
   nft?: NFT;
+  cryptoPaymentMethod: CryptoPaymentMethodType;
 }
 
 export default function ConnectWalletPayment({
@@ -32,6 +34,7 @@ export default function ConnectWalletPayment({
   phantomWalletAddress,
   tournament,
   nft,
+  cryptoPaymentMethod,
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
@@ -79,7 +82,9 @@ export default function ConnectWalletPayment({
               <span className="whitespace-nowrap pl-4 text-lg md:text-sm">
                 {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
                   ? "Pay from Phantom Wallet"
-                  : "Pay from Connected Wallet"}
+                  : cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+                    ? "Pay from Global Account"
+                    : "Pay from Connected Wallet"}
               </span>
               <ChevronRight className="h-4 w-4" />
             </>

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

@@ -0,0 +1,153 @@
+import { useAccountWallet, useProfile, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
+import { ChevronRight } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useRef } from "react";
+import { useAccount } from "wagmi";
+import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { OrderTokenAmount } from "./OrderTokenAmount";
+import { TokenBalance } from "./TokenBalance";
+
+interface CryptoPaySectionProps {
+  // Token state
+  selectedSrcChainId: number;
+  setSelectedSrcChainId: (chainId: number) => void;
+  selectedSrcToken: components["schemas"]["Token"];
+  setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
+  srcAmount: string;
+  setSrcAmount: (amount: string) => void;
+  setIsSrcInputDirty: (dirty: boolean) => void;
+  // Payment method state
+  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+  onSelectCryptoPaymentMethod: () => void;
+  // Quote data
+  anyspendQuote?: any;
+}
+
+export function CryptoPaySection({
+  selectedSrcChainId,
+  setSelectedSrcChainId,
+  selectedSrcToken,
+  setSelectedSrcToken,
+  srcAmount,
+  setSrcAmount,
+  setIsSrcInputDirty,
+  selectedCryptoPaymentMethod,
+  onSelectCryptoPaymentMethod,
+  anyspendQuote,
+}: CryptoPaySectionProps) {
+  const { address: connectedAddress, isConnected } = useAccount();
+  const { data: profileData } = useProfile({ address: connectedAddress });
+  const connectedName = profileData?.displayName;
+  const { address: globalAddress } = useAccountWallet();
+  const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
+
+  // Determine which address to use based on payment method
+  const walletAddress =
+    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? globalAddress : connectedAddress;
+
+  // Add ref to track if we've applied metadata
+  const appliedSrcMetadataRef = useRef(false);
+
+  // Update source token with metadata
+  useEffect(() => {
+    if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+      // Mark as applied
+      appliedSrcMetadataRef.current = true;
+
+      const enhancedToken = {
+        ...selectedSrcToken,
+        decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+        symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+        name: srcTokenMetadata.name || selectedSrcToken.name,
+        metadata: {
+          ...selectedSrcToken.metadata,
+          logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+        },
+      };
+      setSelectedSrcToken(enhancedToken);
+    }
+  }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
+
+  // Reset source token ref when address/chain changes
+  useEffect(() => {
+    appliedSrcMetadataRef.current = false;
+  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
+      className="pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+    >
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-7 items-center text-sm">Pay</div>
+        <button
+          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          onClick={onSelectCryptoPaymentMethod}
+        >
+          {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+            <>
+              {isConnected ? (
+                <div className="flex items-center gap-1">
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                </div>
+              ) : (
+                "Connect wallet"
+              )}
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
+            <>
+              Global Account
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+            <>
+              Transfer crypto
+              <ChevronRight className="h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Select payment method
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </button>
+      </div>
+      <OrderTokenAmount
+        address={walletAddress}
+        context="from"
+        inputValue={srcAmount}
+        onChangeInput={value => {
+          setIsSrcInputDirty(true);
+          setSrcAmount(value);
+        }}
+        chainId={selectedSrcChainId}
+        setChainId={setSelectedSrcChainId}
+        token={selectedSrcToken}
+        setToken={setSelectedSrcToken}
+      />
+      <div className="flex items-center justify-between">
+        <div className="text-as-primary/50 flex h-5 items-center text-sm">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+        </div>
+        <TokenBalance
+          token={selectedSrcToken}
+          walletAddress={walletAddress}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+        />
+      </div>
+    </motion.div>
+  );
+}

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

@@ -13,6 +13,7 @@ import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 export enum CryptoPaymentMethodType {
   NONE = "none",
   CONNECT_WALLET = "connect_wallet",
+  GLOBAL_WALLET = "global_wallet",
   TRANSFER_CRYPTO = "transfer_crypto",
 }
 
@@ -37,7 +38,7 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { wallet: globalWallet } = useAccountWallet();
+  const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
   const { address, isConnected, connector } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
@@ -201,58 +202,94 @@ export function CryptoPaymentMethod({
           </button>
 
           {/* Installed Wallets Section */}
-          {isConnected && (
+          {(isConnected || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
                 {/* Current Connected Wallet */}
-                <button
-                  onClick={() => {
-                    setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                    onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
-                    toast.success(`Selected ${connector?.name || "wallet"}`);
-                  }}
-                  className={cn(
-                    "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
-                    selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
-                      ? "connected-wallet border-as-brand bg-as-brand/5"
-                      : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
-                  )}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      {globalWallet?.meta?.icon ? (
-                        <img src={globalWallet.meta.icon} alt="Wallet" className="h-10 w-10 rounded-full" />
-                      ) : (
+                {isConnected && (
+                  <button
+                    onClick={() => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      toast.success(`Selected ${connector?.name || "wallet"}`);
+                    }}
+                    className={cn(
+                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                        ? "connected-wallet border-as-brand bg-as-brand/5"
+                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
                         <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
                           <Wallet className="h-5 w-5 text-blue-600" />
                         </div>
-                      )}
-                      <div className="flex flex-col">
-                        <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
-                        <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
+                          <span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                        <button
+                          onClick={e => {
+                            e.stopPropagation();
+                            disconnect();
+                            toast.success("Wallet disconnected");
+                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            }
+                          }}
+                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
                       </div>
                     </div>
-                    <div className="flex items-center gap-2">
-                      {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
-                        <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                      )}
-                      <button
-                        onClick={e => {
-                          e.stopPropagation();
-                          disconnect();
-                          toast.success("Wallet disconnected");
-                          if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-                            setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
-                          }
-                        }}
-                        className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
-                      >
-                        <X className="h-4 w-4" />
-                      </button>
+                  </button>
+                )}
+
+                {/* Global Wallet (B3 Account) */}
+                {globalAddress && (
+                  <button
+                    onClick={() => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
+                      toast.success("Selected B3 Account");
+                    }}
+                    className={cn(
+                      "crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+                        ? "connected-wallet border-as-brand bg-as-brand/5"
+                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        {globalWallet?.meta?.icon ? (
+                          <img src={globalWallet.meta.icon} alt="Global Account" className="h-10 w-10 rounded-full" />
+                        ) : (
+                          <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
+                            <Wallet className="h-5 w-5 text-purple-600" />
+                          </div>
+                        )}
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">Global Account</span>
+                          <span className="text-as-primary/60 text-sm">{shortenAddress(globalAddress || "")}</span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </button>
+                  </button>
+                )}
               </div>
             </div>
           )}

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

@@ -240,7 +240,8 @@ export const OrderDetails = memo(function OrderDetails({
   const [showQRCode, setShowQRCode] = useState(false);
   const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
 
-  const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
+  const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } =
+    useUnifiedChainSwitchAndExecute();
 
   const roundedUpSrcAmount = useMemo(() => {
     // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
@@ -293,12 +294,18 @@ export const OrderDetails = memo(function OrderDetails({
       value = BigInt(0);
     }
 
-    const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+    // Use appropriate execution method based on payment method
+    let txHash: string | undefined;
+    if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET) {
+      txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
+    } else {
+      txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
+    }
 
     if (txHash) {
       setTxHash(txHash as `0x${string}`);
     }
-  }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
+  }, [order, switchChainAndExecuteWithEOA, switchChainAndExecute, depositDeficit, effectiveCryptoPaymentMethod]);
 
   // Main payment handler that triggers chain switch and payment
   const handlePayment = async () => {
@@ -994,7 +1001,8 @@ export const OrderDetails = memo(function OrderDetails({
         <>
           {order.onrampMetadata ? (
             <PaymentVendorUI order={order} dstTokenSymbol={dstToken.symbol} />
-          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+          ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ||
+            effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? (
             <ConnectWalletPayment
               order={order}
               onPayment={handlePayment}
@@ -1004,6 +1012,7 @@ export const OrderDetails = memo(function OrderDetails({
               phantomWalletAddress={phantomWalletAddress}
               tournament={tournament}
               nft={nft}
+              cryptoPaymentMethod={effectiveCryptoPaymentMethod}
             />
           ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
             // Transfer Crypto Payment Method - Show new card-based UI