@b3dotfun/sdk 0.0.26 → 0.0.27-alpha.1

package/dist/cjs/global-account/react/utils/profileDisplay.d.ts

@@ -0,0 +1,21 @@
+import { type Profile } from "thirdweb/wallets";
+export interface ExtendedProfileDetails {
+    id?: string;
+    email?: string;
+    phone?: string;
+    address?: string;
+    name?: string;
+    username?: string;
+    profileImageUrl?: string;
+}
+export interface ExtendedProfile extends Omit<Profile, "details"> {
+    details: ExtendedProfileDetails;
+}
+export interface ProfileDisplayInfo {
+    title: string;
+    subtitle: string;
+    imageUrl: string | null;
+    initial: string;
+    type: Profile["type"];
+}
+export declare function getProfileDisplayInfo(profile: ExtendedProfile): ProfileDisplayInfo;

package/dist/cjs/global-account/react/utils/profileDisplay.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProfileDisplayInfo = getProfileDisplayInfo;
+function getProfileDisplayInfo(profile) {
+    const { type, details } = profile;
+    // Default display info
+    let displayInfo = {
+        title: details.email || details.phone || details.address || "Unknown",
+        subtitle: `Connected with ${type}`,
+        imageUrl: null,
+        initial: (type.charAt(0) || "U").toUpperCase(),
+        type,
+    };
+    // Handle specific providers
+    switch (type) {
+        case "x":
+            displayInfo = {
+                title: details.name || details.username || "Unknown",
+                subtitle: details.username ? `@${details.username}` : "X Account",
+                imageUrl: details.profileImageUrl || null,
+                initial: "X",
+                type,
+            };
+            break;
+        case "google":
+            displayInfo = {
+                title: details.name || details.email || "Unknown",
+                subtitle: details.email || "Google Account",
+                imageUrl: details.profileImageUrl || null,
+                initial: "G",
+                type,
+            };
+            break;
+        case "discord":
+            displayInfo = {
+                title: details.username || details.name || "Unknown",
+                subtitle: "Discord Account",
+                imageUrl: details.profileImageUrl || null,
+                initial: "D",
+                type,
+            };
+            break;
+        case "email":
+            displayInfo = {
+                title: details.email || "Unknown",
+                subtitle: "Email Account",
+                imageUrl: null,
+                initial: "E",
+                type,
+            };
+            break;
+        case "phone":
+            displayInfo = {
+                title: details.phone || "Unknown",
+                subtitle: "Phone Number",
+                imageUrl: null,
+                initial: "P",
+                type,
+            };
+            break;
+    }
+    return displayInfo;
+}

package/dist/esm/anyspend/react/components/AnySpendCustom.d.ts

@@ -4,6 +4,7 @@ import React from "react";
 export declare function AnySpendCustom(props: {
     loadOrder?: string;
     mode?: "modal" | "page";
+    activeTab?: "crypto" | "fiat";
     recipientAddress?: string;
     spenderAddress?: string;
     orderType: components["schemas"]["Order"]["type"];

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -34,6 +34,7 @@ var PanelView;
 function generateGetRelayQuoteRequest({ orderType, srcChainId, srcToken, dstChainId, dstToken, dstAmount, contractAddress, tokenId, contractType, encodedData, spenderAddress, }) {
     switch (orderType) {
         case "mint_nft": {
+            invariant(contractType, "Contract type is required");
             return {
                 type: "mint_nft",
                 srcChain: srcChainId,
@@ -92,12 +93,12 @@ export function AnySpendCustom(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomInner, { ...props }) }));
 }
-function AnySpendCustomInner({ loadOrder, mode = "modal", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
+function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, }) {
     const hasMounted = useHasMounted();
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
-    const [activeTab, setActiveTab] = useState("crypto");
+    const [activeTab, setActiveTab] = useState(activeTabProps);
     // Add state for selected payment methods
     const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState(CryptoPaymentMethodType.NONE);
     const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState(FiatPaymentMethod.NONE);

package/dist/esm/anyspend/react/components/AnySpendNFT.js

@@ -79,11 +79,11 @@ export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftCo
             }
         }
         fetchContractMetadata();
-    }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId]);
+    }, [nftContract.contractAddress, nftContract.chainId, nftContract.imageUrl, nftContract.tokenId, isLoadingFallback]);
     const header = ({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
                                             "opacity-0": isLoadingAnyspendPrice,
                                         }), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] }));
-    return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
+    return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
             type: "mint_nft",
             nftContract: nftContract,
         }, header: header, onSuccess: onSuccess }));

package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.d.ts

@@ -1,7 +1,8 @@
 import { components } from "../../../../anyspend/types/api";
 interface PaymentStripeWeb2Props {
     order: components["schemas"]["Order"];
+    stripePaymentIntentId: string;
     onPaymentSuccess?: (paymentIntent: any) => void;
 }
-export default function PaymentStripeWeb2({ order, onPaymentSuccess }: PaymentStripeWeb2Props): import("react/jsx-runtime").JSX.Element;
+export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }: PaymentStripeWeb2Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -12,10 +12,10 @@ import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFin
 import HowItWorks from "./HowItWorks.js";
 import PaymentMethodIcons from "./PaymentMethodIcons.js";
 const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
-export default function PaymentStripeWeb2({ order, onPaymentSuccess }) {
+export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
     const { theme } = useB3();
     const fingerprintConfig = getFingerprintConfig();
-    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(order.stripePaymentIntentId);
+    const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(stripePaymentIntentId);
     if (isLoadingStripeClientSecret) {
         return _jsx(StripeLoadingState, {});
     }
@@ -164,7 +164,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                     // Validation
                                     validation: {
                                         phone: {
-                                            required: "auto", // or 'always', 'never'
+                                            required: "always", // or 'always', 'never'
                                         },
                                     },
                                 } }))] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));

package/dist/esm/anyspend/react/components/common/PaymentVendorUI.js

@@ -8,8 +8,8 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }) {
         return _jsx(PaymentOneClick, { order: order, dstTokenSymbol: dstTokenSymbol });
     }
     // Handle Stripe Web2 payment flow
-    if (vendor === "stripe-web2") {
-        return _jsx(PaymentStripeWeb2, { order: order });
+    if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
+        return _jsx(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId });
     }
     // Return null for unsupported vendors
     return null;

package/dist/esm/anyspend/utils/chain.js

@@ -90,7 +90,7 @@ export const EVM_MAINNET = {
         name: avalanche.name,
         logoUrl: "https://assets.relay.link/icons/square/43114/light.png",
         type: ChainType.EVM,
-        nativeRequired: parseEther("0.005"),
+        nativeRequired: parseEther("0.01"),
         canDepositNative: true,
         defaultToken: getAvaxToken(),
         nativeToken: getAvaxToken(),
@@ -104,7 +104,7 @@ export const EVM_MAINNET = {
         name: bsc.name,
         logoUrl: "https://avatars.githubusercontent.com/u/45615063?s=280&v=4",
         type: ChainType.EVM,
-        nativeRequired: parseEther("0.00001"),
+        nativeRequired: parseEther("0.000025"),
         canDepositNative: true,
         defaultToken: getBnbToken(),
         nativeToken: getBnbToken(),

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -4,6 +4,7 @@ import { useIsMobile, useModalStore } from "../../../global-account/react/index.
 import { cn } from "../../../shared/utils/cn.js";
 import { debugB3React } from "../../../shared/utils/debug.js";
 import { useB3 } from "./B3Provider/useB3.js";
+import { LinkAccount } from "./LinkAccount/LinkAccount.js";
 import { ManageAccount } from "./ManageAccount/ManageAccount.js";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions.js";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow.js";
@@ -28,6 +29,7 @@ export function B3DynamicModal() {
         "signInWithB3",
         "anySpendSignatureMint",
         "anySpendBondKit",
+        "linkAccount",
     ];
     const freestyleTypes = [
         "anySpendNft",
@@ -79,6 +81,8 @@ export function B3DynamicModal() {
                 return _jsx(AnyspendSignatureMint, { ...contentType, mode: "modal" });
             case "anySpendBondKit":
                 return _jsx(AnySpendBondKit, { ...contentType });
+            case "linkAccount":
+                return _jsx(LinkAccount, { ...contentType });
             // Add other modal types here
             default:
                 return null;

package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.d.ts

@@ -0,0 +1,2 @@
+import { LinkAccountModalProps } from "../../stores/useModalStore";
+export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }: LinkAccountModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { client } from "../../../../shared/utils/thirdweb.js";
+import { Loader2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useLinkProfile, useProfiles } from "thirdweb/react";
+import { preAuthenticate } from "thirdweb/wallets";
+import { useModalStore } from "../../stores/useModalStore.js";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
+import { useB3 } from "../B3Provider/useB3.js";
+import { Button } from "../ui/button.js";
+const AUTH_METHODS = [
+    { id: "email", label: "Email", enabled: true },
+    { id: "phone", label: "Phone", enabled: true },
+    { id: "google", label: "Google", enabled: true },
+    { id: "x", label: "X (Twitter)", enabled: true },
+    { id: "discord", label: "Discord", enabled: true },
+    { id: "apple", label: "Apple", enabled: true },
+];
+export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, }) {
+    const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
+    const [selectedMethod, setSelectedMethod] = useState(null);
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [otp, setOtp] = useState("");
+    const [otpSent, setOtpSent] = useState(false);
+    const [error, setError] = useState(null);
+    const { data: profilesRaw = [] } = useProfiles({ client });
+    // Get connected auth methods
+    const connectedAuthMethods = profilesRaw
+        .filter((profile) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+        .map((profile) => profile.type);
+    // Filter available auth methods
+    const availableAuthMethods = AUTH_METHODS.filter(method => !connectedAuthMethods.includes(method.id) && method.enabled);
+    const profiles = profilesRaw
+        .filter((profile) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+        .map((profile) => ({
+        ...getProfileDisplayInfo(profile),
+        originalProfile: profile,
+    }));
+    const { account } = useB3();
+    const { mutate: linkProfile } = useLinkProfile();
+    const onSuccess = useCallback(async () => {
+        await onSuccessCallback?.();
+    }, [onSuccessCallback]);
+    // Reset linking state when component unmounts
+    useEffect(() => {
+        return () => {
+            if (isLinking) {
+                setLinkingState(false);
+            }
+        };
+    }, [isLinking, setLinkingState]);
+    const mutationOptions = {
+        onError: (error) => {
+            console.error("Error linking account:", error);
+            toast.error(error.message);
+            setLinkingState(false);
+            onError?.(error);
+        },
+    };
+    const validateInput = () => {
+        if (selectedMethod === "email") {
+            if (!email) {
+                setError("Please enter your email address");
+                return false;
+            }
+            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                setError("Please enter a valid email address");
+                return false;
+            }
+        }
+        else if (selectedMethod === "phone") {
+            if (!phone) {
+                setError("Please enter your phone number");
+                return false;
+            }
+            if (!/^\+?[\d\s-]{10,}$/.test(phone)) {
+                setError("Please enter a valid phone number");
+                return false;
+            }
+        }
+        setError(null);
+        return true;
+    };
+    const handleSendOTP = async () => {
+        if (!validateInput())
+            return;
+        try {
+            setLinkingState(true, selectedMethod);
+            setError(null);
+            if (selectedMethod === "email") {
+                await preAuthenticate({
+                    client,
+                    strategy: "email",
+                    email,
+                });
+            }
+            else if (selectedMethod === "phone") {
+                await preAuthenticate({
+                    client,
+                    strategy: "phone",
+                    phoneNumber: phone,
+                });
+            }
+            setOtpSent(true);
+        }
+        catch (error) {
+            console.error("Error sending OTP:", error);
+            setError(error instanceof Error ? error.message : "Failed to send OTP");
+            onError?.(error);
+            setLinkingState(false);
+        }
+    };
+    const handleLinkAccount = async () => {
+        if (!otp) {
+            setError("Please enter the verification code");
+            return;
+        }
+        try {
+            setLinkingState(true, selectedMethod);
+            setError(null);
+            if (selectedMethod === "email") {
+                await linkProfile({
+                    client,
+                    strategy: "email",
+                    email,
+                    verificationCode: otp,
+                }, mutationOptions);
+            }
+            else if (selectedMethod === "phone") {
+                await linkProfile({
+                    client,
+                    strategy: "phone",
+                    phoneNumber: phone,
+                    verificationCode: otp,
+                }, mutationOptions);
+            }
+            onSuccess?.();
+            onClose?.();
+        }
+        catch (error) {
+            console.error("Error linking account:", error);
+            setError(error instanceof Error ? error.message : "Failed to link account");
+            onError?.(error);
+        }
+        finally {
+            setLinkingState(false);
+        }
+    };
+    const handleSocialLink = async (strategy) => {
+        try {
+            console.log("handleSocialLink", strategy);
+            setLinkingState(true, strategy);
+            setError(null);
+            const result = await linkProfile({
+                client,
+                strategy,
+            }, mutationOptions);
+            console.log("result", result);
+            // Don't close the modal yet, wait for auth to complete
+            onSuccess?.();
+        }
+        catch (error) {
+            console.error("Error linking with social:", error);
+            setError(error instanceof Error ? error.message : "Failed to link social account");
+            onError?.(error);
+            setLinkingState(false);
+        }
+    };
+    // Add effect to handle social auth completion
+    useEffect(() => {
+        if (isLinking && linkingMethod && !selectedMethod) {
+            // This means we're in a social auth flow
+            const checkAuthStatus = async () => {
+                try {
+                    // Wait a bit to ensure auth is complete
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    onClose?.();
+                }
+                catch (error) {
+                    console.error("Error checking auth status:", error);
+                    setLinkingState(false);
+                }
+            };
+            checkAuthStatus();
+        }
+    }, [isLinking, linkingMethod, selectedMethod, onClose, setLinkingState]);
+    const handleBack = useCallback(() => {
+        if (isLinking)
+            return;
+        setSelectedMethod(null);
+        setEmail("");
+        setPhone("");
+        setOtp("");
+        setOtpSent(false);
+        setError(null);
+        setLinkingState(false);
+    }, [isLinking, setSelectedMethod, setEmail, setPhone, setOtp, setOtpSent, setError, setLinkingState]);
+    useEffect(() => {
+        if (isLinking) {
+            setLinkingState(false);
+            navigateBack();
+            setB3ModalContentType({
+                type: "manageAccount",
+                activeTab: "settings",
+                setActiveTab: () => { },
+                chain,
+                partnerId,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [profiles.length]);
+    if (!account) {
+        return _jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "Please connect your account first" });
+    }
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && (_jsx(Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? (_jsxs("div", { className: "grid gap-3", children: [availableAuthMethods.map(method => (_jsx(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 text-b3-grey font-neue-montreal-semibold h-16 justify-start px-6 text-lg", onClick: () => {
+                            if (method.id === "email" || method.id === "phone") {
+                                setSelectedMethod(method.id);
+                            }
+                            else {
+                                handleSocialLink(method.id);
+                            }
+                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? _jsx(Loader2, { className: "animate-spin" }) : method.label }, method.id))), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value), disabled: isLinking && linkingMethod === selectedMethod })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, disabled: !otp || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? _jsx(Loader2, { className: "animate-spin" }) : "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") }))] }))] }));
+}

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -5,11 +5,13 @@ import { SignOutIcon } from "../../../../global-account/react/components/icons/S
 import { SwapIcon } from "../../../../global-account/react/components/icons/SwapIcon.js";
 import { formatUsername } from "../../../../shared/utils/index.js";
 import { formatNumber } from "../../../../shared/utils/formatNumber.js";
-import { Loader2, Pencil, Triangle } from "lucide-react";
+import { client } from "../../../../shared/utils/thirdweb.js";
+import { LinkIcon, Loader2, Pencil, Triangle, UnlinkIcon } from "lucide-react";
 import { useState } from "react";
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useProfiles, useUnlinkProfile } from "thirdweb/react";
 import { formatUnits } from "viem";
 import useFirstEOA from "../../hooks/useFirstEOA.js";
+import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
 import { AccountAssets } from "../AccountAssets/AccountAssets.js";
 function centerTruncate(str, length = 4) {
     if (str.length <= length * 2)
@@ -17,7 +19,6 @@ function centerTruncate(str, length = 4) {
     return `${str.slice(0, length)}...${str.slice(-length)}`;
 }
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, }) {
-    const [activeTab, setActiveTab] = useState("balance");
     const [revokingSignerId, setRevokingSignerId] = useState(null);
     const account = useActiveAccount();
     const { data: assets, isLoading } = useAccountAssets(account?.address);
@@ -34,7 +35,8 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
         chain,
         accountAddress: account?.address,
     });
-    const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+    const { setB3ModalOpen, setB3ModalContentType, contentType } = useModalStore();
+    const { activeTab = "balance", setActiveTab } = contentType;
     const { logout } = useAuthentication(partnerId);
     const [logoutLoading, setLogoutLoading] = useState(false);
     console.log("account", account);
@@ -81,5 +83,56 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
     };
     const AssetsContent = () => (_jsx("div", { className: "grid grid-cols-3 gap-4", children: assets?.nftResponse ? (_jsx(AccountAssets, { nfts: assets.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }));
     const AppsContent = () => (_jsxs("div", { className: "space-y-4", children: [signers?.map((signer) => (_jsx("div", { className: "rounded-xl border border-gray-200 p-4 dark:border-gray-800", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", children: _jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: "App" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-gray-900 dark:text-white", children: signer.partner.name }), _jsxs("div", { className: "mt-2 space-y-1", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Added ", new Date(signer.createdAt).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Expires ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max spend: ", formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] })] })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "border-red-200 text-red-500 hover:border-red-300 hover:text-red-600", onClick: () => handleRevoke(signer), disabled: revokingSignerId === signer.id, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }) }, signer.id))), !signers?.length && _jsx("div", { className: "py-12 text-center text-gray-500", children: "No connected apps" })] }));
-    return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: setActiveTab, children: [_jsxs(TabsListPrimitive, { className: "font-neue-montreal-semibold text-b3-grey flex h-8 w-full items-start justify-start gap-8 border-0 text-xl md:p-4", children: [_jsx(TabTriggerPrimitive, { value: "balance", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Overview" }), _jsx(TabTriggerPrimitive, { value: "assets", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Mints" }), _jsx(TabTriggerPrimitive, { value: "apps", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Apps" })] }), _jsx(TabsContentPrimitive, { value: "balance", className: "pt-4 md:p-4", children: _jsx(BalanceContent, {}) }), _jsx(TabsContentPrimitive, { value: "assets", className: "pt-4 md:p-4", children: _jsx(AssetsContent, {}) }), _jsx(TabsContentPrimitive, { value: "apps", className: "pt-4 md:p-4", children: _jsx(AppsContent, {}) })] }) }) }));
+    const SettingsContent = () => {
+        const [unlinkingAccountId, setUnlinkingAccountId] = useState(null);
+        const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
+        const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
+        const { setB3ModalOpen, setB3ModalContentType, isLinking } = useModalStore();
+        const profiles = profilesRaw
+            .filter((profile) => !["custom_auth_endpoint", "siwe"].includes(profile.type))
+            .map((profile) => ({
+            ...getProfileDisplayInfo(profile),
+            originalProfile: profile,
+        }));
+        const handleUnlink = async (profile) => {
+            setUnlinkingAccountId(profile.title);
+            try {
+                await unlinkProfile({
+                    client,
+                    profileToUnlink: profile.originalProfile,
+                });
+            }
+            catch (error) {
+                console.error("Error unlinking account:", error);
+            }
+            finally {
+                setUnlinkingAccountId(null);
+            }
+        };
+        const handleOpenLinkModal = () => {
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+                type: "linkAccount",
+                showBackButton: true,
+                partnerId,
+                chain,
+                onSuccess: async () => {
+                    // Let the LinkAccount component handle modal closing
+                },
+                onError: () => {
+                    // Let the LinkAccount component handle errors
+                },
+                onClose: () => {
+                    // Let the LinkAccount component handle closing
+                },
+            });
+        };
+        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3-powered apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
+    };
+    return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
+                    const tab = value;
+                    if (["balance", "assets", "apps", "settings"].includes(tab)) {
+                        setActiveTab?.(tab);
+                    }
+                }, children: [_jsxs(TabsListPrimitive, { className: "font-neue-montreal-semibold text-b3-grey flex h-8 w-full items-start justify-start gap-8 border-0 text-xl md:p-4", children: [_jsx(TabTriggerPrimitive, { value: "balance", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Overview" }), _jsx(TabTriggerPrimitive, { value: "assets", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Mints" }), _jsx(TabTriggerPrimitive, { value: "apps", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Apps" }), _jsx(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:text-b3-primary-blue data-[state=active]:border-b-b3-primary-blue flex-none rounded-none border-0 p-0 pb-1 text-xl leading-none tracking-wide transition-colors data-[state=active]:border-b data-[state=active]:bg-white md:pb-4", children: "Settings" })] }), _jsx(TabsContentPrimitive, { value: "balance", className: "pt-4 md:p-4", children: _jsx(BalanceContent, {}) }), _jsx(TabsContentPrimitive, { value: "assets", className: "pt-4 md:p-4", children: _jsx(AssetsContent, {}) }), _jsx(TabsContentPrimitive, { value: "apps", className: "pt-4 md:p-4", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "pt-4 md:p-4", children: _jsx(SettingsContent, {}) })] }) }) }));
 }

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -13,7 +13,7 @@ export function LoginStepContainer({ children, partnerId }) {
         },
     }, !!partnerId);
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [partnerLogo && _jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "mb-6 mt-6 h-12 w-auto object-contain" }), children, _jsxs("h2", { className: "mt-6 flex items-center gap-2 text-lg font-bold", children: ["Powered by", _jsx("img", { alt: "B3 Logo", className: "h-5", src: "https://cdn.b3.fun/b3_logo.svg" }), "Connect"] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 mt-6 h-12 w-auto object-contain" })), children, _jsxs("h2", { className: "mt-6 flex items-center gap-2 text-lg font-bold", children: ["Powered by", _jsx("img", { alt: "B3 Logo", className: "h-5", src: "https://cdn.b3.fun/b3_logo.svg" }), "Connect"] })] }));
 }
 export function LoginStep({ onSuccess, onError, partnerId, chain }) {
     const wallet = ecosystemWallet(ecosystemWalletId, {

package/dist/esm/global-account/react/components/custom/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "b3" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "default" | "outline";

package/dist/esm/global-account/react/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js

@@ -34,9 +34,14 @@ export function useUnifiedChainSwitchAndExecute() {
             if (!signer) {
                 throw new Error("No account connected");
             }
+            // Get the target chain configuration instead of using potentially stale walletClient.chain
+            const targetChain = supportedChains.find(chain => chain.id === targetChainId);
+            if (!targetChain) {
+                throw new Error(`Chain ${targetChainId} is not supported`);
+            }
             const hash = await walletClient.sendTransaction({
                 account: signer,
-                chain: walletClient.chain,
+                chain: targetChain,
                 to: params.to,
                 data: params.data,
                 value: params.value,
@@ -49,7 +54,7 @@ export function useUnifiedChainSwitchAndExecute() {
             if (onCorrectChain) {
                 return await executeTransaction();
             }
-            toast.info(`Switching to ${getChainName(targetChainId)}…`);
+            const switchingToastId = toast.info(`Switching to ${getChainName(targetChainId)}…`);
             const targetChain = supportedChains.find(chain => chain.id === targetChainId);
             if (!targetChain) {
                 toast.error(`Chain ${targetChainId} is not supported`);
@@ -71,6 +76,7 @@ export function useUnifiedChainSwitchAndExecute() {
                     },
                 },
             });
+            toast.dismiss(switchingToastId);
             return await executeTransaction();
         }
         catch (e) {