@b3dotfun/sdk 0.0.26-alpha.5 → 0.0.26-alpha.7

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/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/stores/useModalStore.d.ts

@@ -78,6 +78,10 @@ export interface ManageAccountModalProps extends BaseModalProps {
     chain: Chain;
     /** Partner ID */
     partnerId: string;
+    /** Active Tab */
+    activeTab?: "balance" | "assets" | "apps" | "settings";
+    /** Function to set the active tab */
+    setActiveTab?: (tab: "balance" | "assets" | "apps" | "settings") => void;
 }
 /**
  * Props for the AnySpend modal
@@ -274,10 +278,19 @@ export interface AnySpendBondKitProps extends BaseModalProps {
     /** Callback function called when purchase is successful */
     onSuccess?: (txHash?: string) => void;
 }
+export interface LinkAccountModalProps extends BaseModalProps {
+    type: "linkAccount";
+    showBackButton?: boolean;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    onClose?: () => void;
+    partnerId: string;
+    chain: Chain;
+}
 /**
  * Union type of all possible modal content types
  */
-export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | TransakProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps;
+export type ModalContentType = SignInWithB3ModalProps | RequestPermissionsModalProps | ManageAccountModalProps | AnySpendModalProps | AnyspendOrderDetailsProps | AnySpendNftProps | AnySpendJoinTournamentProps | AnySpendFundTournamentProps | TransakProps | AnySpendOrderHistoryProps | AnySpendStakeB3Props | AnySpendBuySpinProps | AnySpendSignatureMintProps | AnySpendBondKitProps | LinkAccountModalProps;
 /**
  * State interface for the modal store
  */
@@ -300,6 +313,12 @@ interface ModalState {
     ecoSystemAccountAddress?: Address;
     /** Function to set the ecosystem account address */
     setEcoSystemAccountAddress: (address: Address) => void;
+    /** Whether an account linking operation is in progress */
+    isLinking: boolean;
+    /** The method currently being linked */
+    linkingMethod: string | null;
+    /** Function to set the linking state */
+    setLinkingState: (isLinking: boolean, method?: string | null) => void;
 }
 /**
  * Zustand store for managing modal state

package/dist/esm/global-account/react/stores/useModalStore.js

@@ -30,4 +30,7 @@ export const useModalStore = create(set => ({
     clearHistory: () => set({ history: [] }),
     ecoSystemAccountAddress: undefined,
     setEcoSystemAccountAddress: (address) => set({ ecoSystemAccountAddress: address }),
+    isLinking: false,
+    linkingMethod: null,
+    setLinkingState: (isLinking, method = null) => set({ isLinking, linkingMethod: isLinking ? method : null }),
 }));

package/dist/esm/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/esm/global-account/react/utils/profileDisplay.js

@@ -0,0 +1,60 @@
+export 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;
+}