@b3dotfun/sdk 0.0.34 → 0.0.35-alpha.1

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