@b3dotfun/sdk 0.0.65-test.5 → 0.0.66

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

@@ -3,52 +3,113 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkAccount = void 0;
+exports.LinkAccount = LinkAccount;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const app_1 = __importDefault(require("../../../../global-account/app"));
-const react_1 = require("../../../../global-account/react");
+const constants_1 = require("../../../../shared/constants");
+const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
-const truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_1 = require("react");
 const sonner_1 = require("sonner");
-const react_3 = require("thirdweb/react");
+const react_2 = require("thirdweb/react");
+const wallets_1 = require("thirdweb/wallets");
+const __1 = require("../..");
+const useModalStore_1 = require("../../stores/useModalStore");
 const profileDisplay_1 = require("../../utils/profileDisplay");
-// Helper function to check if a string is a wallet address and format it
-const formatProfileTitle = (title) => {
-    // Check if title looks like an Ethereum address (0x followed by 40 hex characters)
-    const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
-    if (isEthereumAddress) {
-        return {
-            displayTitle: (0, truncateAddress_1.truncateAddress)(title),
-            isAddress: true,
+const useB3_1 = require("../B3Provider/useB3");
+const AppleIcon_1 = require("../icons/AppleIcon");
+const DiscordIcon_1 = require("../icons/DiscordIcon");
+const FarcasterIcon_1 = require("../icons/FarcasterIcon");
+const GoogleIcon_1 = require("../icons/GoogleIcon");
+const XIcon_1 = require("../icons/XIcon");
+const button_1 = require("../ui/button");
+const AUTH_METHODS = [
+    { id: "email", label: "Email", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { className: "text-b3-primary-blue size-6" }) },
+    { id: "phone", label: "Phone", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: "text-b3-primary-blue size-6" }) },
+    { id: "google", label: "Google", enabled: true, icon: (0, jsx_runtime_1.jsx)(GoogleIcon_1.GoogleIcon, { className: "size-6" }) },
+    { id: "x", label: "X (Twitter)", enabled: true, icon: (0, jsx_runtime_1.jsx)(XIcon_1.XIcon, { className: "size-6" }) },
+    { id: "discord", label: "Discord", enabled: true, icon: (0, jsx_runtime_1.jsx)(DiscordIcon_1.DiscordIcon, { className: "size-6" }) },
+    { id: "apple", label: "Apple", enabled: true, icon: (0, jsx_runtime_1.jsx)(AppleIcon_1.AppleIcon, { className: "size-6" }) },
+    {
+        id: "farcaster",
+        label: "Farcaster",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(FarcasterIcon_1.FarcasterIcon, { className: "size-6" }),
+    },
+];
+const WALLET_METHODS = [
+    {
+        id: "wallet",
+        label: "Wallet",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
+        walletType: "com.coinbase.wallet",
+    },
+    { id: "wallet", label: "Wallet", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }), walletType: "io.metamask" },
+    {
+        id: "wallet",
+        label: "Wallet",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
+        walletType: "me.rainbow",
+    },
+    {
+        id: "wallet",
+        label: "Wallet",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
+        walletType: "app.phantom",
+    },
+    { id: "wallet", label: "Wallet", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }), walletType: "io.rabby" },
+    {
+        id: "wallet",
+        label: "Wallet",
+        enabled: true,
+        icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
+        walletType: "walletConnect",
+    },
+];
+function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
+    const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = (0, useModalStore_1.useModalStore)();
+    const [selectedMethod, setSelectedMethod] = (0, react_1.useState)(null);
+    const [email, setEmail] = (0, react_1.useState)("");
+    const [phone, setPhone] = (0, react_1.useState)("");
+    const [otp, setOtp] = (0, react_1.useState)("");
+    const [otpSent, setOtpSent] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const { data: profilesRaw = [] } = (0, react_2.useProfiles)({ client: thirdweb_1.client });
+    // Get connected auth methods
+    const connectedAuthMethods = profilesRaw
+        .filter((profile) => !["custom_auth_endpoint"].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"].includes(profile.type))
+        .map((profile) => ({
+        ...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
+        originalProfile: profile,
+    }));
+    const { account } = (0, useB3_1.useB3)();
+    const { mutate: linkProfile } = (0, react_2.useLinkProfile)();
+    const onSuccess = (0, react_1.useCallback)(async () => {
+        await onSuccessCallback?.();
+    }, [onSuccessCallback]);
+    // Reset linking state when component unmounts
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (isLinking) {
+                setLinkingState(false);
+            }
         };
-    }
-    return {
-        displayTitle: title,
-        isAddress: false,
-    };
-};
-const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
-const LinkAccount = ({ partnerId, onLogout, chain, }) => {
-    const [unlinkingAccountId, setUnlinkingAccountId] = (0, react_2.useState)(null);
-    const { data: profilesRaw = [], isLoading: isLoadingProfiles } = (0, react_3.useProfiles)({ client: thirdweb_1.client });
-    const { mutate: unlinkProfile, isPending: isUnlinking } = (0, react_3.useUnlinkProfile)();
-    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
-    const isLinking = (0, react_1.useModalStore)(state => state.isLinking);
-    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
-    const contentType = (0, react_1.useModalStore)(state => state.contentType);
-    const { user, setUser } = (0, react_1.useB3)();
-    const [isUpdatingCode, setIsUpdatingCode] = (0, react_2.useState)(false);
-    const [newReferralCode, setNewReferralCode] = (0, react_2.useState)("");
-    const [isEditingCode, setIsEditingCode] = (0, react_2.useState)(false);
-    const referallCodeRef = (0, react_2.useRef)(null);
-    const { data: referrals, isLoading: isLoadingReferrals } = (0, react_1.useQueryB3)("referrals", "find", { query: { referrerId: user?.userId } }, !!user?.userId);
-    const showReferralInfo = contentType?.showReferralInfo ?? false;
+    }, [isLinking, setLinkingState]);
     const mutationOptions = {
         onError: (error) => {
-            console.error("Error Unlinking account:", error);
+            console.error("Error linking account:", error);
             sonner_1.toast.error(error.message);
+            setLinkingState(false);
+            onError?.(error);
         },
         onSuccess: async (data) => {
             console.log("Raw Link Account Data:", data);
@@ -61,100 +122,205 @@ const LinkAccount = ({ partnerId, onLogout, chain, }) => {
             }
         },
     };
-    // Fetch referred users
-    const currentReferralCode = user?.referralCode || user?.userId || "";
-    const handleCopyCode = async () => {
+    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 {
-            await navigator.clipboard.writeText(currentReferralCode);
-            sonner_1.toast.success("Referral code copied to clipboard!");
+            setLinkingState(true, selectedMethod);
+            setError(null);
+            if (selectedMethod === "email") {
+                await (0, wallets_1.preAuthenticate)({
+                    client: thirdweb_1.client,
+                    strategy: "email",
+                    email,
+                    ecosystem: {
+                        id: constants_1.ecosystemWalletId,
+                        partnerId: partnerId,
+                    },
+                });
+            }
+            else if (selectedMethod === "phone") {
+                await (0, wallets_1.preAuthenticate)({
+                    client: thirdweb_1.client,
+                    strategy: "phone",
+                    phoneNumber: phone,
+                    ecosystem: {
+                        id: constants_1.ecosystemWalletId,
+                        partnerId: partnerId,
+                    },
+                });
+            }
+            setOtpSent(true);
         }
         catch (error) {
-            sonner_1.toast.error("Failed to copy referral code");
+            console.error("Error sending OTP:", error);
+            setError(error instanceof Error ? error.message : "Failed to send OTP");
+            onError?.(error);
+            setLinkingState(false);
         }
     };
-    const handleUpdateReferralCode = async () => {
-        if (!newReferralCode)
+    const handleLinkAccount = async () => {
+        if (!otp) {
+            console.error("No OTP entered");
+            setError("Please enter the verification code");
             return;
-        setIsUpdatingCode(true);
+        }
         try {
-            // @ts-expect-error - setReferralCode is not typed for some reason
-            const newUser = await app_1.default.service("users").setReferralCode({
-                userId: user?.userId,
-                referralCode: newReferralCode,
-            });
-            setUser(newUser);
-            sonner_1.toast.success("Referral code updated successfully!");
-            setIsEditingCode(false);
-            setNewReferralCode("");
+            setOtpSent(false);
+            setLinkingState(true, selectedMethod);
+            setError(null);
+            if (selectedMethod === "email") {
+                await linkProfile({
+                    client: thirdweb_1.client,
+                    strategy: "email",
+                    email,
+                    verificationCode: otp,
+                }, mutationOptions);
+            }
+            else if (selectedMethod === "phone") {
+                await linkProfile({
+                    client: thirdweb_1.client,
+                    strategy: "phone",
+                    phoneNumber: phone,
+                    verificationCode: otp,
+                }, mutationOptions);
+            }
         }
         catch (error) {
-            sonner_1.toast.error("Failed to update referral code");
-        }
-        finally {
-            setIsUpdatingCode(false);
+            console.error("Error linking account:", error);
+            setError(error instanceof Error ? error.message : "Failed to link account");
+            onError?.(error);
         }
     };
-    const profiles = profilesRaw
-        .filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
-        .map((profile) => ({
-        ...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
-        originalProfile: profile,
-    }));
-    const handleUnlink = async (profile) => {
-        setUnlinkingAccountId(profile.title);
+    const handleLinkWallet = async (walletType) => {
+        setLinkingState(true, "wallet");
+        console.log("selectedMethod", walletType);
         try {
-            unlinkProfile({ client: thirdweb_1.client, profileToUnlink: profile.originalProfile }, mutationOptions);
+            if (!walletType) {
+                throw new Error("Wallet type not found");
+            }
+            await linkProfile({
+                client: thirdweb_1.client,
+                strategy: "wallet",
+                wallet: (0, wallets_1.createWallet)(walletType),
+                chain: b3Chain_1.thirdwebB3Mainnet,
+            }, mutationOptions);
         }
         catch (error) {
-            console.error("Error unlinking account:", error);
+            console.error("Error linking account:", error);
+            setError(error instanceof Error ? error.message : "Failed to link account");
+            onError?.(error);
         }
-        finally {
-            setUnlinkingAccountId(null);
+    };
+    const handleSocialLink = async (strategy) => {
+        try {
+            console.log("handleSocialLink", strategy);
+            setLinkingState(true, strategy);
+            setError(null);
+            const result = await linkProfile({
+                client: thirdweb_1.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);
         }
     };
-    const handleOpenLinkModal = () => {
-        setB3ModalOpen(true);
+    // Add effect to handle social auth completion
+    (0, react_1.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 = (0, react_1.useCallback)(() => {
+        if (isLinking)
+            return;
+        setSelectedMethod(null);
+        setEmail("");
+        setPhone("");
+        setOtp("");
+        setOtpSent(false);
+        setError(null);
+        setLinkingState(false);
+    }, [isLinking, setSelectedMethod, setEmail, setPhone, setOtp, setOtpSent, setError, setLinkingState]);
+    const handleFinishedLinking = (0, react_1.useCallback)((success) => {
+        if (success) {
+            onSuccess?.();
+            onClose?.();
+        }
+        setLinkingState(false);
+        navigateBack();
         setB3ModalContentType({
-            type: "linkNewAccount",
-            partnerId,
+            type: "manageAccount",
+            activeTab: "settings",
+            setActiveTab: () => { },
             chain,
-            onSuccess: async () => {
-                // Let the LinkAccount component handle modal closing
-            },
-            onError: () => {
-                // Let the LinkAccount component handle errors
-            },
-            onClose: () => {
-                // Let the LinkAccount component handle closing
-            },
+            partnerId,
         });
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-settings", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-section space-y-4 p-5", children: [isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-loading flex justify-center py-8", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item hover:bg-b3-line group flex cursor-pointer items-center justify-between rounded-xl p-4 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(() => {
-                                                            const { displayTitle, isAddress } = formatProfileTitle(profile.title);
-                                                            const handleCopyAddress = async (e) => {
-                                                                e.stopPropagation();
-                                                                try {
-                                                                    await navigator.clipboard.writeText(profile.title);
-                                                                    sonner_1.toast.success("Address copied to clipboard!");
-                                                                }
-                                                                catch (error) {
-                                                                    sonner_1.toast.error("Failed to copy address");
-                                                                }
-                                                            };
-                                                            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
-                                                                            ? "font-mono text-sm" // Use monospace font for addresses
-                                                                            : "break-words" // Use break-words for emails/names (better than break-all)
-                                                                        }`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
-                                                        })(), (0, jsx_runtime_1.jsx)("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" })), (0, jsx_runtime_1.jsx)(react_1.Button, { onClick: handleOpenLinkModal, disabled: isLinking, className: "b3-modal-link-new-account-button bg-b3-primary-blue hover:bg-b3-primary-blue/90 border-white/12 group relative h-12 w-full rounded-xl border-2 px-[18px] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] transition-all", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0001 13.3333V6.66667M6.66675 10H13.3334M18.3334 10C18.3334 14.6024 14.6025 18.3333 10.0001 18.3333C5.39771 18.3333 1.66675 14.6024 1.66675 10C1.66675 5.39763 5.39771 1.66667 10.0001 1.66667C14.6025 1.66667 18.3334 5.39763 18.3334 10Z", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Link new account" })] }) })] }), showReferralInfo && (
-            /* Referral Section */
-            (0, jsx_runtime_1.jsxs)("div", { className: "referrals-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header-editing", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-edit-form flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
-                                                        setIsEditingCode(false);
-                                                        setNewReferralCode("");
-                                                    }, children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", className: "referral-code-copy-button", onClick: handleCopyCode, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "referral-code-copy-icon h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", className: "referral-code-edit-button", onClick: () => {
-                                                        setIsEditingCode(true);
-                                                        setTimeout(() => {
-                                                            referallCodeRef.current?.focus();
-                                                        }, 100);
-                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "referral-code-edit-icon h-4 w-4" }) })] })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "referred-users-container bg-b3-line rounded-xl p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "referred-users-title text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-loading flex justify-center py-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-list space-y-3", children: referrals.data.map((referral) => ((0, jsx_runtime_1.jsxs)("div", { className: "referred-user-item flex items-center justify-between rounded-lg bg-white p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "referred-user-id text-sm font-medium", children: referral.referreeId }), (0, jsx_runtime_1.jsx)("div", { className: "referred-user-date text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "referred-users-empty py-4 text-center text-gray-500", children: "No referred users yet" }))] })] }))] }));
-};
-exports.LinkAccount = LinkAccount;
+    }, [chain, navigateBack, partnerId, setB3ModalContentType, setLinkingState, onSuccess, onClose]);
+    (0, react_1.useEffect)(() => {
+        if (isLinking) {
+            handleFinishedLinking(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [profiles.length]);
+    if (!account) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "Please connect your account first" });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `b3-link-account space-y-6 p-6 ${className || ""}`, "data-testid": "link-account", children: [(0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "b3-link-account-title text-b3-grey font-neue-montreal-semibold text-2xl", children: "Link New Account" }), selectedMethod && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", className: "text-b3-grey hover:text-b3-grey/80", onClick: handleBack, children: "Backs" }))] }), !selectedMethod ? ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-methods grid gap-3", children: [availableAuthMethods.map(method => ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", className: "b3-link-account-method-button border-b3-line hover:border-b3-primary-blue/30 hover:bg-b3-primary-blue/5 text-b3-grey font-neue-montreal-medium h-14 justify-start bg-transparent px-6 text-base transition-all duration-200", "data-method": method.id, onClick: () => {
+                            if (method.id === "email" || method.id === "phone") {
+                                setSelectedMethod(method.id);
+                            }
+                            else {
+                                handleSocialLink(method.id);
+                            }
+                        }, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), (0, jsx_runtime_1.jsx)("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), WALLET_METHODS.map(method => {
+                        if (!method.walletType) {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)(__1.WalletRow, { walletId: method.walletType, onClick: () => handleLinkWallet(method.walletType), isLoading: isLinking }, method.walletType));
+                    }), availableAuthMethods.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), (0, jsx_runtime_1.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" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), (0, jsx_runtime_1.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") }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), (selectedMethod === "email" || selectedMethod === "phone") &&
+                        (otpSent ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), (0, jsx_runtime_1.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) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : ((0, jsx_runtime_1.jsx)(button_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ("Send Verification Code") })))] }))] }));
+}

package/dist/cjs/global-account/react/components/ManageAccount/BalanceContent.js

@@ -7,11 +7,11 @@ const BankIcon_1 = require("../../../../global-account/react/components/icons/Ba
 const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
 const SwapIcon_1 = require("../../../../global-account/react/components/icons/SwapIcon");
 const utils_1 = require("../../../../shared/utils");
+const ipfs_1 = require("../../../../shared/utils/ipfs");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const react_3 = require("thirdweb/react");
 const useFirstEOA_1 = require("../../hooks/useFirstEOA");
-const IPFSMediaRenderer_1 = require("../IPFSMediaRenderer/IPFSMediaRenderer");
 const TokenIcon_1 = require("../TokenIcon");
 const accordion_1 = require("../ui/accordion");
 const TokenBalanceRow_1 = require("./TokenBalanceRow");
@@ -20,7 +20,6 @@ function centerTruncate(str, length = 4) {
         return str;
     return `${str.slice(0, length)}...${str.slice(-length)}`;
 }
-// Deprecated
 function BalanceContent({ onLogout, showDeposit = true, showSwap = true }) {
     const account = (0, react_3.useActiveAccount)();
     const globalAccount = (0, react_1.useGlobalAccount)();
@@ -35,12 +34,12 @@ function BalanceContent({ onLogout, showDeposit = true, showSwap = true }) {
     const [logoutLoading, setLogoutLoading] = (0, react_2.useState)(false);
     const [openAccordions, setOpenAccordions] = (0, react_2.useState)([]);
     const hasExpandedRef = (0, react_2.useRef)(false);
-    // IPFSMediaRenderer will handle IPFS URL conversion and validation
-    const avatarSrc = user?.avatar || profile?.avatar;
+    const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profile?.avatar;
     const handleEditProfile = () => {
         setB3ModalOpen(true);
         setB3ModalContentType({
-            type: "avatarEditor",
+            type: "profileEditor",
+            showBackButton: true,
             onSuccess: () => {
                 // navigate back on success
                 navigateBack();
@@ -91,7 +90,7 @@ function BalanceContent({ onLogout, showDeposit = true, showSwap = true }) {
         setB3ModalOpen(false);
         setLogoutLoading(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile", className: "size-24 rounded-full" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditProfile, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-avatar relative", children: [avatarUrl ? ((0, jsx_runtime_1.jsx)("img", { src: avatarUrl, alt: "Profile", className: "size-24 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash size-24 rounded-full" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditProfile, className: "bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 16, className: "text-b3-background" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "global-account-profile-info", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-b3-grey text-xl font-semibold", children: user?.username || profile?.displayName || (0, utils_1.formatUsername)(profile?.name || "") }), (0, jsx_runtime_1.jsxs)("div", { className: "address-button border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-mono text-xs", children: centerTruncate(account?.address || "", 6) }), (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: account?.address || "" })] })] })] }) }), (showDeposit || showSwap) && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [showDeposit && ((0, jsx_runtime_1.jsxs)(react_1.Button, { className: "manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl", onClick: () => {
                             setB3ModalOpen(true);
                             setB3ModalContentType({
                                 type: "anySpend",