@b3dotfun/sdk 0.0.20-alpha.0 → 0.0.20-alpha.2

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

@@ -24,13 +24,21 @@ import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber, formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
-import { ArrowDown, ChevronLeft, ChevronRightCircle, ChevronsUpDown, CircleAlert, HistoryIcon } from "lucide-react";
+import {
+  ArrowDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronRightCircle,
+  ChevronsUpDown,
+  CircleAlert,
+  HistoryIcon,
+} from "lucide-react";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useConnectedWallets } from "thirdweb/react";
 import { parseUnits } from "viem";
 import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
-import { useAccount } from "wagmi";
 import { components } from "../../types/api";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, PaymentMethod } from "./common/CryptoPaymentMethod";
@@ -105,7 +113,7 @@ function AnySpendInner({
   const router = useRouter();
 
   // Get wagmi account state for wallet connection
-  const wagmiAccount = useAccount();
+  const connectedWallets = useConnectedWallets();
 
   // Determine if we're in "buy mode" based on whether destination token props are provided
   const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
@@ -464,6 +472,10 @@ function AnySpendInner({
         },
   );
 
+  const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
+  const connectedProfile = useProfile({ address: connectedAddress });
+  const connectedName = connectedProfile.data?.name?.replace(/\.b3\.fun/g, "");
+
   const recipientProfile = useProfile({ address: recipientAddress });
   const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
 
@@ -1071,32 +1083,38 @@ function AnySpendInner({
             <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-primary/50 hover:text-as-primary/70 flex h-7 items-center gap-1 text-sm transition-colors"
+                className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
                 onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               >
                 {selectedPaymentMethod === PaymentMethod.CONNECT_WALLET ? (
                   <>
-                    {globalAddress || wagmiAccount.address ? (
+                    {connectedAddress ? (
                       <>
                         {globalWallet?.meta?.icon && (
-                          <img src={globalWallet.meta.icon} alt="Connected Wallet" className="h-4 w-4 rounded-full" />
+                          <img
+                            src={globalWallet.meta.icon}
+                            alt="Connected Wallet"
+                            className="bg-as-primary h-6 w-6 rounded-full"
+                          />
                         )}
-                        <span>{shortenAddress(globalAddress || wagmiAccount.address || "")}</span>
+                        <span className="text-as-tertiarry">
+                          {connectedName || shortenAddress(connectedAddress || "")}
+                        </span>
                       </>
                     ) : (
                       "Connect wallet"
                     )}
-                    <ChevronRightCircle className="h-4 w-4" />
+                    <ChevronRight className="h-4 w-4" />
                   </>
                 ) : selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO ? (
                   <>
                     Transfer crypto
-                    <ChevronRightCircle className="h-4 w-4" />
+                    <ChevronRight className="h-4 w-4" />
                   </>
                 ) : (
                   <>
                     Select payment method
-                    <ChevronRightCircle className="h-4 w-4" />
+                    <ChevronRight className="h-4 w-4" />
                   </>
                 )}
               </button>
@@ -1198,7 +1216,7 @@ function AnySpendInner({
               <div className="text-as-primary/50 flex h-7 items-center text-sm">Receive</div>
               {recipientAddress ? (
                 <button
-                  className={cn("text-as-primary/70 flex h-7 items-center gap-2 rounded-lg px-2")}
+                  className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
                   onClick={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
                 >
                   {globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? (
@@ -1213,7 +1231,7 @@ function AnySpendInner({
                     </div>
                   )}
                   <div className="text-sm">{recipientName ? recipientName : shortenAddress(recipientAddress)}</div>
-                  <ChevronRightCircle className="h-4 w-4" />
+                  <ChevronRight className="h-4 w-4" />
                 </button>
               ) : (
                 <button
@@ -1487,7 +1505,8 @@ function AnySpendInner({
       <div
         className={cn(
           "mx-auto w-full max-w-[460px]",
-          mode === "page" && "bg-as-surface-primary border-as-border-secondary rounded-2xl border p-6 shadow-xl",
+          mode === "page" &&
+            "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
         )}
       >
         <TransitionPanel
@@ -1500,7 +1519,7 @@ function AnySpendInner({
                 ? PanelView.MAIN
                 : activePanel
           }
-          className={cn("overflow-hidden", {
+          className={cn("rounded-2xl", {
             "mt-0": mode === "modal",
           })}
           variants={{
@@ -1511,14 +1530,30 @@ function AnySpendInner({
           transition={{ type: "spring", stiffness: 300, damping: 30 }}
         >
           {[
-            <div key="main-view">{mainView}</div>,
-            <div key="history-view">{historyView}</div>,
-            <div key="order-details-view">{orderDetailsView}</div>,
-            <div key="loading-view">{OrderDetailsLoadingView}</div>,
-            <div key="fiat-payment-view">{onrampPaymentView}</div>,
-            <div key="recipient-selection-view">{recipientSelectionView}</div>,
-            <div key="crypto-payment-method-view">{cryptoPaymentMethodView}</div>,
-            <div key="fiat-payment-method-view">{fiatPaymentMethodView}</div>,
+            <div key="main-view" className={cn(mode === "page" && "p-6")}>
+              {mainView}
+            </div>,
+            <div key="history-view" className={cn(mode === "page" && "p-6")}>
+              {historyView}
+            </div>,
+            <div key="order-details-view" className={cn(mode === "page" && "p-6")}>
+              {orderDetailsView}
+            </div>,
+            <div key="loading-view" className={cn(mode === "page" && "p-6")}>
+              {OrderDetailsLoadingView}
+            </div>,
+            <div key="fiat-payment-view" className={cn(mode === "page" && "p-6")}>
+              {onrampPaymentView}
+            </div>,
+            <div key="recipient-selection-view" className={cn(mode === "page" && "p-6")}>
+              {recipientSelectionView}
+            </div>,
+            <div key="crypto-payment-method-view" className={cn(mode === "page" && "p-6")}>
+              {cryptoPaymentMethodView}
+            </div>,
+            <div key="fiat-payment-method-view" className={cn(mode === "page" && "p-6")}>
+              {fiatPaymentMethodView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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

@@ -44,16 +44,12 @@ export function AnySpendFingerprintWrapper({ children, fingerprint }: AnySpendFi
   );
 }
 
-// Helper function to get fingerprint config from environment variables
-export function getFingerprintConfig(): FingerprintConfig | undefined {
-  const apiKey = process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY;
-
-  if (!apiKey) {
-    return undefined;
-  }
+const defaultApiKey = "80EnsS6POsxPAR9xGxmN";
 
+// Helper function to get fingerprint config from environment variables
+export function getFingerprintConfig(): FingerprintConfig {
   return {
-    apiKey,
+    apiKey: process.env.NEXT_PUBLIC_FINGERPRINT_API_KEY || defaultApiKey,
     endpoint: process.env.NEXT_PUBLIC_FINGERPRINT_ENDPOINT,
     scriptUrlPattern: process.env.NEXT_PUBLIC_FINGERPRINT_SCRIPT_URL,
   };

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

@@ -1,13 +1,17 @@
 "use client";
 
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { thirdwebB3Mainnet } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
 import { toast } from "sonner";
-import { useSetActiveWallet } from "thirdweb/react";
-import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { ConnectEmbed, lightTheme } from "thirdweb/react";
+import { createWallet } from "thirdweb/wallets";
+import { useDisconnect } from "wagmi";
 
 export enum PaymentMethod {
   NONE = "none",
@@ -36,59 +40,22 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { connect, connectors, isPending: isConnecting, error: connectError } = useConnect();
-  const wagmiAccount = useAccount();
-  const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = useAccountWallet();
+  const { address: globalAddress, wallet: globalWallet } = useAccountWallet();
   const { disconnect } = useDisconnect();
-  const previousAddress = useRef<string | undefined>(globalAddress);
+  const [showWalletModal, setShowWalletModal] = useState(false);
 
-  const setActiveWallet = useSetActiveWallet();
-
-  // Automatically set EOA wallet as active when available
-  useEffect(() => {
-    if (connectedEOAWallet) {
-      console.log("Setting active wallet", connectedEOAWallet);
-      setActiveWallet(connectedEOAWallet);
-    }
-  }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
-
-  // Handle wallet connection success
-  useEffect(() => {
-    if (globalAddress && previousAddress.current !== globalAddress) {
-      previousAddress.current = globalAddress;
-      toast.success("Wallet connected successfully");
-      // Automatically select connect wallet method and go back to main view
-      setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-      onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-    }
-  }, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
-
-  // Handle connection errors
-  useEffect(() => {
-    if (connectError) {
-      // Handle specific error cases
-      if (connectError.message.includes("Connector already connected")) {
-        // If connector is already connected, just proceed with the flow
-        console.log("Connector already connected, proceeding with selection");
-        // Use wagmi account address or global address
-        if (wagmiAccount.address || globalAddress) {
-          setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-          onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-        } else {
-          // Fallback: proceed anyway as the connector reports it's connected
-          setTimeout(() => {
-            setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-            onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-          }, 100);
-        }
-      } else {
-        toast.error(`Failed to connect wallet: ${connectError.message}`);
-      }
-    }
-  }, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
+  // Define available wallets for the modal
+  const availableWallets = [
+    createWallet("io.metamask"),
+    // createWallet("com.coinbase.wallet"),
+    createWallet("me.rainbow"),
+    createWallet("walletConnect"),
+    createWallet("io.rabby"),
+    createWallet("app.phantom"),
+  ];
 
   return (
-    <div className="mx-auto w-[460px] max-w-full">
+    <div className="mx-auto h-fit w-[460px] max-w-full">
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button
@@ -109,43 +76,8 @@ export function CryptoPaymentMethod({
           {!globalAddress ? (
             // Not connected - show single connect button
             <button
-              onClick={() => {
-                // Prevent connecting if already connecting or if there's already a connection
-                if (isConnecting) return;
-
-                try {
-                  // Check if wagmi already has a connection
-                  if (wagmiAccount.isConnected && wagmiAccount.address) {
-                    // Already connected via wagmi, just proceed with selection
-                    console.log("Wagmi already connected, proceeding with selection");
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    return;
-                  }
-
-                  // Check if global address exists (b3 account system)
-                  if (globalAddress) {
-                    // Already connected via global account, just proceed with selection
-                    console.log("Global address already exists, proceeding with selection");
-                    setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
-                    return;
-                  }
-
-                  // Use the first available connector or a preferred one
-                  const preferredConnector =
-                    connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
-
-                  if (preferredConnector) {
-                    connect({ connector: preferredConnector });
-                  }
-                } catch (error) {
-                  console.error("Connection error:", error);
-                  toast.error("Failed to connect wallet. Please try again.");
-                }
-              }}
-              disabled={isConnecting}
-              className="bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => setShowWalletModal(true)}
+              className="bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
             >
               <div className="flex items-center gap-3">
                 <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
@@ -153,14 +85,10 @@ export function CryptoPaymentMethod({
                 </div>
                 <div className="flex flex-col items-start text-left">
                   <h4 className="text-as-primary font-semibold">Connect wallet</h4>
-                  <p className="text-as-primary/60 text-sm">Connect your wallet to continue</p>
+                  <p className="text-as-primary/60 text-sm">Choose from multiple wallet options</p>
                 </div>
               </div>
-              {isConnecting ? (
-                <div className="border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2"></div>
-              ) : (
-                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-              )}
+              <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
             </button>
           ) : (
             // Connected - show wallet info
@@ -190,7 +118,7 @@ export function CryptoPaymentMethod({
                     Use Wallet
                   </button>
                   <button
-                    onClick={() => {
+                    onClick={async () => {
                       disconnect();
                       toast.success("Wallet disconnected");
                       if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
@@ -222,6 +150,43 @@ export function CryptoPaymentMethod({
           </button>
         </div>
       </div>
+
+      {/* Wallet Connection Modal */}
+      {showWalletModal &&
+        createPortal(
+          <div className="pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50">
+            <div className="max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Connect Wallet</h3>
+                <button
+                  onClick={() => setShowWalletModal(false)}
+                  className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+              <ConnectEmbed
+                client={client}
+                chain={thirdwebB3Mainnet}
+                wallets={availableWallets}
+                showThirdwebBranding={false}
+                theme={lightTheme()}
+                onConnect={async wallet => {
+                  console.log("Wallet connected:", wallet);
+                  // setShowWalletModal(false);
+                  setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                  onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
+                  setShowWalletModal(false);
+                }}
+                style={{
+                  width: "100%",
+                  minHeight: "300px",
+                }}
+              />
+            </div>
+          </div>,
+          typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body,
+        )}
     </div>
   );
 }

package/src/global-account/react/hooks/index.ts

@@ -21,9 +21,9 @@ export { useOneBalance } from "./useOneBalance";
 export {
   useProfile,
   useProfilePreference,
-  type Profile,
   type CombinedProfile,
   type PreferenceRequestBody,
+  type Profile,
 } from "./useProfile";
 export { useQueryB3 } from "./useQueryB3";
 export { useQueryBSMNT } from "./useQueryBSMNT";