@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Deposit = Deposit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../../../anyspend/constants");
+const chain_1 = require("../../../../anyspend/utils/chain");
+const react_1 = require("../../../../global-account/react");
+const relay_kit_ui_1 = require("@relayprotocol/relay-kit-ui");
+const lucide_react_1 = require("lucide-react");
+const qrcode_react_1 = require("qrcode.react");
+const react_2 = require("react");
+const chains_1 = require("thirdweb/chains");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const button_1 = require("../ui/button");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+// Coinbase logo SVG
+const CoinbaseLogo = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#0052FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.00065 11.3337C6.16065 11.3337 4.66732 9.84033 4.66732 8.00033C4.66732 6.16033 6.16065 4.66699 8.00065 4.66699C9.47399 4.66699 10.734 5.64699 11.1607 7.00033H13.2273C12.774 4.54699 10.6273 2.66699 8.00065 2.66699C5.05399 2.66699 2.66732 5.05366 2.66732 8.00033C2.66732 10.947 5.05399 13.3337 8.00065 13.3337C10.6273 13.3337 12.774 11.4537 13.2273 9.00033H11.1607C10.734 10.3537 9.47399 11.3337 8.00065 11.3337Z", fill: "white" })] }));
+function Deposit() {
+    const { address } = (0, react_1.useAccountWallet)();
+    const [selectedChainId, setSelectedChainId] = (0, react_2.useState)(chains_1.base.id);
+    const [selectedToken, setSelectedToken] = (0, react_2.useState)({
+        address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+        chainId: chains_1.base.id,
+        decimals: 6,
+        symbol: "USDC",
+        name: "USD Coin",
+        metadata: {
+            logoURI: "https://assets.relay.link/icons/1/light/usdc.png",
+        },
+    });
+    // Get the selected chain object
+    const selectedChain = (0, react_2.useMemo)(() => chain_1.ALL_CHAINS[selectedChainId], [selectedChainId]);
+    // Get all supported chains for the dropdown
+    const supportedChains = (0, react_2.useMemo)(() => Object.values(chain_1.ALL_CHAINS), []);
+    // The deposit address is the user's active wallet address
+    const depositAddress = address;
+    const handleTokenSelect = (token) => {
+        setSelectedChainId(token.chainId);
+        setSelectedToken({
+            address: token.address,
+            chainId: token.chainId,
+            decimals: token.decimals,
+            metadata: { logoURI: token.logoURI },
+            name: token.name,
+            symbol: token.symbol,
+        });
+    };
+    const handleCopyAddress = async () => {
+        try {
+            await navigator.clipboard.writeText(depositAddress || "");
+            react_1.toast.success("Address copied to clipboard");
+        }
+        catch (error) {
+            react_1.toast.error("Failed to copy address");
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { title: "Deposit", showCloseButton: false }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col pb-5 pt-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 px-5", children: (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium text-base leading-snug text-[#3f3f46]", children: "Send any accepted token and we'll convert it to B3 on Base for you to use." }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Chain" }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedChain?.logoUrl && ((0, jsx_runtime_1.jsx)("img", { src: selectedChain.logoUrl, alt: selectedChain.name, className: "h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-base text-[#18181b]", children: selectedChain?.name || "Select Chain" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuContent, { className: "max-h-[300px] w-full overflow-y-auto", children: supportedChains.map(chain => ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onClick: () => setSelectedChainId(chain.id), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [chain.logoUrl && (0, jsx_runtime_1.jsx)("img", { src: chain.logoUrl, alt: chain.name, className: "h-6 w-6 rounded-full" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#18181b]", children: chain.name })] }) }, chain.id))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1.5 block text-sm font-medium text-[#3f3f46]", children: "Accepted tokens" }), (0, jsx_runtime_1.jsx)(relay_kit_ui_1.TokenSelector, { address: address, chainIdsFilter: [selectedChainId], context: "from", fromChainWalletVMSupported: true, isValidAddress: true, lockedChainIds: [selectedChainId], multiWalletSupportEnabled: true, onAnalyticEvent: undefined, popularChainIds: [1, 8453, constants_1.RELAY_SOLANA_MAINNET_CHAIN_ID], setToken: handleTokenSelect, supportedWalletVMs: ["evm", "svm"], token: undefined, trigger: (0, jsx_runtime_1.jsxs)("button", { className: "flex h-10 w-full items-center justify-between rounded-lg border border-[#d1d1d6] bg-white px-2.5 py-2 transition-colors hover:bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedToken?.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedToken.metadata.logoURI, alt: selectedToken.symbol, className: "h-6 w-6 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-base text-[#18181b]", children: selectedToken.symbol })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-[#51525c]" })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mx-5 mt-4 flex items-start rounded-xl border border-[#e4e4e7] bg-[#fafafa]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-center gap-2 px-5 pb-3 pt-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-full items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "flex aspect-[144/146] w-full flex-col items-center justify-center overflow-hidden", children: (0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { value: depositAddress || "", size: 144, level: "M" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold leading-[18px] text-[#0b57c2]", children: "SCAN WITH" }), (0, jsx_runtime_1.jsx)(CoinbaseLogo, {})] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-1 flex-col gap-2 self-stretch border-l border-[#e4e4e7] p-6", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium leading-5 text-[#3f3f46]", children: "Deposit address:" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-wrap items-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "h-[74px] flex-1 overflow-hidden text-ellipsis whitespace-pre-wrap break-all pr-6 text-base font-semibold leading-6 text-[#18181b]", children: depositAddress }), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "absolute bottom-0 right-0 h-4 w-4 transition-opacity hover:opacity-70", "aria-label": "Copy address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-full w-full text-[#51525c]" }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mx-5 mt-4", children: (0, jsx_runtime_1.jsxs)("p", { className: "font-neue-montreal-italic text-center text-sm leading-[1.3] text-[#3f3f46]", children: ["Do not send any tokens other than the ones specified.", (0, jsx_runtime_1.jsx)("br", {}), "Tokens not accepted will not be converted."] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 px-5", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCopyAddress, className: "h-12 w-full rounded-xl bg-[#0c68e9] 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)] hover:bg-[#0b5fd4]", children: "Copy deposit address" }) })] })] }));
+}

package/dist/cjs/global-account/react/components/IPFSMediaRenderer/IPFSMediaRenderer.d.ts

@@ -0,0 +1,39 @@
+import type { ThirdwebClient } from "thirdweb";
+interface IPFSMediaRendererProps {
+    /** The source URL - can be IPFS URL (ipfs://...) or HTTP URL */
+    src: string | null | undefined;
+    /** Alt text for the media */
+    alt?: string;
+    /** CSS class name */
+    className?: string;
+    /** Thirdweb client instance (optional, uses default if not provided) */
+    client?: ThirdwebClient;
+    /** Width of the media */
+    width?: string | number;
+    /** Height of the media */
+    height?: string | number;
+    /** Controls property for video/audio */
+    controls?: boolean;
+    /** Style object */
+    style?: React.CSSProperties;
+}
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+export declare function IPFSMediaRenderer({ src, alt, className, client, width, height, controls, style, }: IPFSMediaRendererProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IPFSMediaRenderer = IPFSMediaRenderer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const react_1 = require("thirdweb/react");
+/**
+ * IPFSMediaRenderer - A wrapper around Thirdweb's MediaRenderer that configures
+ * the IPFS gateway URL to use our validated gateway.
+ *
+ * Features:
+ * - Configures MediaRenderer to use cloudflare-ipfs.com gateway
+ * - Gateway matches our allowed list in profileDisplay.ts
+ * - Provides fallback for missing sources
+ *
+ * @example
+ * ```tsx
+ * <IPFSMediaRenderer
+ *   src="ipfs://QmX..."
+ *   alt="Profile Avatar"
+ *   className="size-14 rounded-full"
+ * />
+ * ```
+ */
+function IPFSMediaRenderer({ src, alt = "Media", className, client = thirdweb_1.client, width, height, controls, style, }) {
+    // If no source, render fallback
+    if (!src) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, "aria-label": alt, children: (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-full w-full items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-xs", children: alt.charAt(0).toUpperCase() }) }) }));
+    }
+    // Convert IPFS URLs to HTTP gateway URLs if needed
+    // This handles both ipfs:// URLs and existing HTTP gateway URLs
+    return ((0, jsx_runtime_1.jsx)(react_1.MediaRenderer, { src: src, client: client, alt: alt, className: className, width: width ? width.toString() : undefined, height: height ? height.toString() : undefined, controls: controls, style: style }));
+}

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

@@ -1,4 +1,6 @@
-import { LinkAccountModalProps } from "../../stores/useModalStore";
-export declare function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkAccountModalProps & {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+import { Chain } from "thirdweb";
+export declare const LinkAccount: ({ partnerId, onLogout: _onLogout, chain, }: {
+    partnerId: string;
+    onLogout?: () => void;
+    chain: Chain;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,113 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkAccount = LinkAccount;
+exports.LinkAccount = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const app_1 = __importDefault(require("../../../../global-account/app"));
-const constants_1 = require("../../../../shared/constants");
-const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
+const react_1 = require("../../../../global-account/react");
 const thirdweb_1 = require("../../../../shared/utils/thirdweb");
 const lucide_react_1 = require("lucide-react");
-const react_1 = require("react");
-const sonner_1 = require("sonner");
-const react_2 = require("thirdweb/react");
-const wallets_1 = require("thirdweb/wallets");
-const __1 = require("../..");
-const useModalStore_1 = require("../../stores/useModalStore");
+const react_2 = require("react");
+const react_3 = require("thirdweb/react");
 const profileDisplay_1 = require("../../utils/profileDisplay");
-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);
-            }
-        };
-    }, [isLinking, setLinkingState]);
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const LinkedAccountItem_1 = __importDefault(require("./LinkedAccountItem"));
+const LinkAccount = ({ partnerId, onLogout: _onLogout, chain, }) => {
+    const [unlinkingAccountId, setUnlinkingAccountId] = (0, react_2.useState)(null);
+    const [profileToUnlink, setProfileToUnlink] = (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;
     const mutationOptions = {
         onError: (error) => {
-            console.error("Error linking account:", error);
-            sonner_1.toast.error(error.message);
-            setLinkingState(false);
-            onError?.(error);
+            console.error("Error Unlinking account:", error);
+            react_1.toast.error(error.message);
         },
         onSuccess: async (data) => {
             console.log("Raw Link Account Data:", data);
@@ -122,205 +46,102 @@ function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, pa
             }
         },
     };
-    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;
-            }
+    // Fetch referred users
+    const currentReferralCode = user?.referralCode || user?.userId || "";
+    const handleCopyCode = async () => {
+        try {
+            await navigator.clipboard.writeText(currentReferralCode);
+            react_1.toast.success("Referral code copied to clipboard!");
         }
-        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;
-            }
+        catch (error) {
+            react_1.toast.error("Failed to copy referral code");
         }
-        setError(null);
-        return true;
     };
-    const handleSendOTP = async () => {
-        if (!validateInput())
+    const handleUpdateReferralCode = async () => {
+        if (!newReferralCode)
             return;
+        setIsUpdatingCode(true);
         try {
-            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);
+            // @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);
+            react_1.toast.success("Referral code updated successfully!");
+            setIsEditingCode(false);
+            setNewReferralCode("");
         }
         catch (error) {
-            console.error("Error sending OTP:", error);
-            setError(error instanceof Error ? error.message : "Failed to send OTP");
-            onError?.(error);
-            setLinkingState(false);
+            react_1.toast.error("Failed to update referral code");
+        }
+        finally {
+            setIsUpdatingCode(false);
         }
     };
-    const handleLinkAccount = async () => {
-        if (!otp) {
-            console.error("No OTP entered");
-            setError("Please enter the verification code");
-            return;
+    const profiles = profilesRaw
+        .filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
+        .map((profile) => ({
+        ...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
+        originalProfile: profile,
+    }));
+    console.log("profiles :", profiles);
+    // Reset confirmation state after 3 seconds
+    (0, react_2.useEffect)(() => {
+        if (profileToUnlink) {
+            const timer = setTimeout(() => {
+                setProfileToUnlink(null);
+            }, 5000);
+            return () => clearTimeout(timer);
         }
-        try {
-            setOtpSent(false);
-            setLinkingState(true, selectedMethod);
-            setError(null);
-            if (selectedMethod === "email") {
-                await linkProfile({
-                    client: thirdweb_1.client,
-                    strategy: "email",
-                    email,
-                    verificationCode: otp,
-                }, mutationOptions);
+    }, [profileToUnlink]);
+    const handleUnlinkClick = (profile) => {
+        // If this profile is already pending confirmation, perform the unlink
+        if (profileToUnlink?.title === profile.title) {
+            setUnlinkingAccountId(profile.title);
+            try {
+                unlinkProfile({ client: thirdweb_1.client, profileToUnlink: profile.originalProfile }, mutationOptions);
             }
-            else if (selectedMethod === "phone") {
-                await linkProfile({
-                    client: thirdweb_1.client,
-                    strategy: "phone",
-                    phoneNumber: phone,
-                    verificationCode: otp,
-                }, mutationOptions);
+            catch (error) {
+                console.error("Error unlinking account:", error);
             }
-        }
-        catch (error) {
-            console.error("Error linking account:", error);
-            setError(error instanceof Error ? error.message : "Failed to link account");
-            onError?.(error);
-        }
-    };
-    const handleLinkWallet = async (walletType) => {
-        setLinkingState(true, "wallet");
-        console.log("selectedMethod", walletType);
-        try {
-            if (!walletType) {
-                throw new Error("Wallet type not found");
+            finally {
+                setUnlinkingAccountId(null);
+                setProfileToUnlink(null);
             }
-            await linkProfile({
-                client: thirdweb_1.client,
-                strategy: "wallet",
-                wallet: (0, wallets_1.createWallet)(walletType),
-                chain: b3Chain_1.thirdwebB3Mainnet,
-            }, mutationOptions);
         }
-        catch (error) {
-            console.error("Error linking account:", error);
-            setError(error instanceof Error ? error.message : "Failed to link account");
-            onError?.(error);
+        else {
+            // First click - set pending confirmation
+            setProfileToUnlink(profile);
         }
     };
-    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);
-        }
-    };
-    // 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();
+    const handleOpenLinkModal = () => {
+        setB3ModalOpen(true);
         setB3ModalContentType({
-            type: "manageAccount",
-            activeTab: "settings",
-            setActiveTab: () => { },
-            chain,
+            type: "linkNewAccount",
             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
+            },
         });
-    }, [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") })))] }))] }));
-}
+    };
+    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.jsx)(LinkedAccountItem_1.default, { profile: profile, profileToUnlink: profileToUnlink, unlinkingAccountId: unlinkingAccountId, isUnlinking: isUnlinking, onUnlinkClick: handleUnlinkClick }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty font-neue-montreal-medium 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;

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

@@ -0,0 +1,4 @@
+import { LinkNewAccountModalProps } from "../../stores/useModalStore";
+export declare function LinkNewAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }: LinkNewAccountModalProps & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;