@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ens_normalize } from "@adraffy/ens-normalize";
+import app from "../../../../global-account/app.js";
+import { toast, useB3, useModalStore, useProfile } from "../../../../global-account/react/index.js";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { Check, Loader2, Pencil, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { useFirstEOA } from "../../hooks/useFirstEOA.js";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
+const SettingsProfileCard = () => {
+    const account = useActiveAccount();
+    const { address: eoaAddress } = useFirstEOA();
+    const { data: profile, refetch: refreshProfile } = useProfile({
+        address: eoaAddress || account?.address,
+        fresh: true,
+    });
+    const { user, setUser } = useB3();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const navigateBack = useModalStore(state => state.navigateBack);
+    // State for inline username editing
+    const [isEditingUsername, setIsEditingUsername] = useState(false);
+    const [editedUsername, setEditedUsername] = useState("");
+    const [isSaving, setIsSaving] = useState(false);
+    const inputRef = useRef(null);
+    // IPFSMediaRenderer will handle IPFS URL conversion and validation
+    const avatarSrc = user?.avatar || profile?.avatar;
+    // Get current username - prioritize user.username, fallback to profile data
+    const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+    // Focus input when entering edit mode
+    useEffect(() => {
+        if (isEditingUsername && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditingUsername]);
+    const handleEditAvatar = () => {
+        setB3ModalOpen(true);
+        setB3ModalContentType({
+            type: "avatarEditor",
+            onSuccess: () => {
+                // navigate back on success
+                navigateBack();
+            },
+        });
+    };
+    const handleEditUsername = () => {
+        setEditedUsername(currentUsername || "");
+        setIsEditingUsername(true);
+    };
+    const handleCancelEdit = () => {
+        setIsEditingUsername(false);
+        setEditedUsername("");
+    };
+    const handleSaveUsername = async () => {
+        if (!editedUsername.trim()) {
+            toast.error("Username cannot be empty");
+            return;
+        }
+        if (editedUsername === currentUsername) {
+            // No change, just exit edit mode
+            handleCancelEdit();
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const sanitizedUsername = ens_normalize(editedUsername.trim());
+            const b3Username = `${sanitizedUsername}.b3.fun`;
+            const usernameSignMessage = `Register "${b3Username}"`;
+            const usernameSignature = await account?.signMessage({ message: usernameSignMessage });
+            if (!usernameSignature) {
+                throw new Error("Failed to sign username registration message");
+            }
+            console.log("@@usernameSignature", usernameSignature);
+            // Register username with ENS
+            // Note: Type assertion needed until @b3dotfun/b3-api package is updated with RegisterUsername type
+            const updatedUser = (await app
+                .service("users")
+                .registerUsername({ username: b3Username, message: usernameSignMessage, hash: usernameSignature }, {}));
+            // Update user state - registerUsername returns an array with single user
+            setUser(Array.isArray(updatedUser) ? updatedUser[0] : updatedUser);
+            // Refresh profile to get updated data
+            await refreshProfile();
+            toast.success("Username updated successfully!");
+            setIsEditingUsername(false);
+            setEditedUsername("");
+        }
+        catch (error) {
+            console.error("Error updating username:", error);
+            toast.error("Failed to update username. Please try again.");
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleSaveUsername();
+        }
+        else if (e.key === "Escape") {
+            handleCancelEdit();
+        }
+    };
+    return (_jsxs("div", { className: "flex w-full items-center gap-3", children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile", className: "border-black/8 size-14 rounded-full border object-cover" }), _jsx("button", { onClick: handleEditAvatar, className: "absolute -bottom-0.5 -right-0.5 flex size-[18px] items-center justify-center rounded-full border-[1.5px] border-white bg-[#a0a0ab] transition-colors hover:bg-[#a0a0ab]/80", "aria-label": "Edit avatar", children: _jsx(Pencil, { size: 10, className: "text-white", strokeWidth: 2.5 }) })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", children: isEditingUsername ? (
+                /* Edit mode - inline input */
+                _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { ref: inputRef, type: "text", value: editedUsername, onChange: e => setEditedUsername(e.target.value), onKeyDown: handleKeyDown, disabled: isSaving, className: "border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue text-md w-full rounded-md border px-2 py-1 leading-none transition-colors focus:outline-none disabled:opacity-50", placeholder: "Enter username" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleSaveUsername, disabled: isSaving, className: "text-b3-primary-blue hover:text-b3-primary-blue/80 flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Save username", children: isSaving ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Check, { size: 18, strokeWidth: 2.5 }) }), _jsx("button", { onClick: handleCancelEdit, disabled: isSaving, className: "text-b3-foreground-muted hover:text-b3-grey flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50", "aria-label": "Cancel editing", children: _jsx(X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
+                /* Display mode */
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), _jsx("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: _jsx("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
+};
+export default SettingsProfileCard;

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

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
 interface TokenBalanceRowProps {
-    icon: ReactNode;
+    tokenLogo: string;
+    chainLogo: string;
     name: string;
     balance: string;
     usdValue: string;
     priceChange?: number | null;
 }
-export declare function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }: TokenBalanceRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenBalanceRow({ tokenLogo, chainLogo, name, balance, usdValue, priceChange }: TokenBalanceRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Triangle } from "lucide-react";
-export function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }) {
-    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: icon }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: name }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: balance })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", usdValue] }), _jsx("div", { className: "flex items-center gap-1", children: priceChange !== null && priceChange !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [priceChange >= 0 ? "+" : "", priceChange.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }));
+import { Coins, Triangle } from "lucide-react";
+export function TokenBalanceRow({ tokenLogo, chainLogo, name, balance, usdValue, priceChange }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative flex h-10 w-10 items-center justify-center", children: [tokenLogo ? (_jsx("img", { src: tokenLogo, alt: name, className: "h-full w-full rounded-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-gray-200", children: _jsx(Coins, { className: "h-5 w-5 text-gray-400" }) })), chainLogo && (_jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white bg-white", children: _jsx("img", { src: chainLogo, alt: "chain", className: "h-full w-full rounded-full object-cover" }) }))] }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: name }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: balance })] })] }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", usdValue] }), _jsx("div", { className: "flex items-center gap-1", children: priceChange !== null && priceChange !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Triangle, { className: `size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), _jsxs("span", { className: `font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [priceChange >= 0 ? "+" : "", priceChange.toFixed(2), "%"] })] })) : (_jsx("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }));
 }

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

@@ -0,0 +1,2 @@
+declare const TokenContent: () => import("react/jsx-runtime").JSX.Element;
+export default TokenContent;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSimBalance } from "../../../../global-account/react/index.js";
+import { getChainLogo } from "../../../../shared/constants/chains/supported.js";
+import { useActiveWallet } from "thirdweb/react";
+import { TokenBalanceRow } from "./TokenBalanceRow.js";
+// Chain logo URLs mapping
+const CHAIN_LOGOS = [1, 8453, 8333].map(chainId => getChainLogo(chainId));
+const TokenContent = () => {
+    // Get active wallet state
+    const activeWallet = useActiveWallet();
+    const activeAccount = activeWallet?.getAccount();
+    const activeAddress = activeAccount?.address;
+    const { data: simBalance } = useSimBalance(activeAddress, [8453, 8333, 1]);
+    console.log("simBalance :", simBalance);
+    if (!activeAddress) {
+        return _jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No tokens found" });
+    }
+    if (!simBalance?.balances || simBalance.balances.length === 0) {
+        return _jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No tokens found" });
+    }
+    // Sort by USD value descending
+    const sortedBalances = [...simBalance.balances].sort((a, b) => {
+        const valueA = a.value_usd || 0;
+        const valueB = b.value_usd || 0;
+        return valueB - valueA;
+    });
+    return (_jsx("div", { className: "flex max-h-[132px] flex-col gap-3 overflow-y-auto", children: sortedBalances.map((token, index) => {
+            // Format balance
+            const balance = (Number(token.amount) / Math.pow(10, token.decimals)).toFixed(4);
+            const usdValue = token.value_usd?.toFixed(2) || "0.00";
+            // Calculate 24h price change (if available in future API updates)
+            const priceChange = null; // API doesn't provide this yet
+            // Determine token logo
+            // For native tokens, use ETH logo instead of chain logo
+            let tokenLogo = token.token_metadata?.logo || "";
+            if (token.address === "native" && token.symbol === "ETH") {
+                tokenLogo = CHAIN_LOGOS[0];
+            }
+            return (_jsx(TokenBalanceRow, { tokenLogo: tokenLogo, chainLogo: CHAIN_LOGOS[token.chain_id] || "", name: token.name || token.symbol, balance: `${balance} ${token.symbol}`, usdValue: usdValue, priceChange: priceChange }, `${token.chain_id}-${token.address}-${index}`));
+        }) }));
+};
+export default TokenContent;

package/dist/esm/global-account/react/components/ManageAccount/channels/DiscordChannel.d.ts

@@ -0,0 +1,11 @@
+interface DiscordChannelProps {
+    userId: string;
+    jwtToken: string;
+    discordChannel: any;
+    isConnected: boolean;
+    isOptimisticallyConnected: boolean;
+    onConnectionChange: () => void;
+    onToggle: (enabled: boolean) => void;
+}
+export declare const DiscordChannel: ({ userId, jwtToken, discordChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }: DiscordChannelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { debugB3React } from "../../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI.js";
+import { useB3 } from "../../B3Provider/useB3.js";
+import { toast } from "../../Toast/toastApi.js";
+import { NotificationChannel } from "../NotificationChannel.js";
+const debug = debugB3React("DiscordChannel");
+export const DiscordChannel = ({ userId, jwtToken, discordChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = useB3();
+    const [discordId, setDiscordId] = useState("");
+    const [isConnecting, setIsConnecting] = useState(false);
+    // Detect if we're disconnecting
+    const isDisconnecting = isConnected && !isOptimisticallyConnected;
+    const handleConnect = async () => {
+        if (!discordId || !userId || !jwtToken)
+            return;
+        try {
+            setIsConnecting(true);
+            await notificationsAPI.connectDiscord(userId, discordId, jwtToken);
+            await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setDiscordId("");
+            toast.success("Discord connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting Discord:", err);
+            toast.error("Failed to connect Discord");
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    };
+    const handleToggle = () => {
+        onToggle(isConnected);
+    };
+    const icon = (_jsx("svg", { id: "Discord-Logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 126.644 96", children: _jsx("path", { id: "Discord-Symbol-Blurple", className: "fill-[#ffffff]", d: "M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z" }) }));
+    const inputSection = (_jsxs("div", { className: "mt-1 space-y-2", children: [_jsx("input", { type: "text", value: discordId, onChange: e => setDiscordId(e.target.value), onKeyDown: e => {
+                    if (e.key === "Enter" && discordId) {
+                        handleConnect();
+                    }
+                }, placeholder: "Discord User ID", className: "w-full rounded-lg border border-gray-300 px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:border-blue-500 focus:outline-none" }), _jsxs("button", { onClick: handleConnect, disabled: isConnecting || !discordId, className: "flex items-center gap-1 disabled:opacity-50", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Connecting..." : "Add Discord" })] })] }));
+    return (_jsx(NotificationChannel, { icon: icon, iconClassName: "bg-[#5865f2] rounded-xl p-2", title: "Discord", isConnected: isOptimisticallyConnected, isConnecting: isConnecting, isDisconnecting: isDisconnecting, connectedInfo: discordChannel?.channel_identifier, inputSection: inputSection, onToggle: handleToggle, showBorder: false }));
+};

package/dist/esm/global-account/react/components/ManageAccount/channels/EmailChannel.d.ts

@@ -0,0 +1,11 @@
+interface EmailChannelProps {
+    userId: string;
+    jwtToken: string;
+    emailChannel: any;
+    isConnected: boolean;
+    isOptimisticallyConnected: boolean;
+    onConnectionChange: () => void;
+    onToggle: (enabled: boolean) => void;
+}
+export declare const EmailChannel: ({ userId, jwtToken, emailChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }: EmailChannelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { debugB3React } from "../../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI.js";
+import { useB3 } from "../../B3Provider/useB3.js";
+import { toast } from "../../Toast/toastApi.js";
+import { NotificationChannel } from "../NotificationChannel.js";
+const debug = debugB3React("EmailChannel");
+const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+export const EmailChannel = ({ userId, jwtToken, emailChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = useB3();
+    const [email, setEmail] = useState("");
+    const [emailError, setEmailError] = useState(null);
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [showInput, setShowInput] = useState(false);
+    // Detect if we're disconnecting by comparing real vs optimistic state
+    const isDisconnecting = isConnected && !isOptimisticallyConnected;
+    const handleConnect = async () => {
+        if (!email || !userId || !jwtToken)
+            return;
+        if (!validateEmail(email)) {
+            setEmailError("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsConnecting(true);
+            setEmailError(null);
+            await notificationsAPI.connectEmail(userId, email, jwtToken);
+            await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setEmail("");
+            setShowInput(false);
+            toast.success("Email connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting email:", err);
+            toast.error("Failed to connect email");
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    };
+    const handleToggle = () => {
+        if (isConnected) {
+            setShowInput(false);
+        }
+        onToggle(isConnected); // Pass current state - parent will handle disconnect if true
+    };
+    const icon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [_jsx("path", { d: "M3.55588 13.6357C3.056 13.2787 2.80606 13.1001 2.58815 13.077C2.26227 13.0423 1.93568 13.2104 1.77447 13.4957C1.66667 13.6865 1.66668 13.9903 1.66669 14.5978V25.4022C1.66667 26.7438 1.66665 27.8511 1.74035 28.753C1.81689 29.6899 1.98116 30.551 2.39331 31.3599C3.03247 32.6144 4.05234 33.6342 5.30675 34.2734C6.11564 34.6855 6.97682 34.8498 7.91365 34.9263C8.81563 35 9.92288 35 11.2645 35H28.7356C30.0772 35 31.1844 35 32.0864 34.9263C33.0232 34.8498 33.8844 34.6855 34.6933 34.2734C35.9477 33.6342 36.9676 32.6144 37.6067 31.3599C38.0189 30.551 38.1832 29.6899 38.2597 28.753C38.3334 27.8511 38.3334 26.7438 38.3334 25.4022V14.5978C38.3334 14.3 38.3334 14.1511 38.3061 14.0472C38.1828 13.5771 37.6717 13.3094 37.2151 13.4755C37.1141 13.5123 36.9901 13.5981 36.7422 13.7697L23.8386 22.7032C22.9237 23.3386 22.1204 23.8965 21.2078 24.1177C20.4096 24.3112 19.5761 24.305 18.7808 24.0998C17.8716 23.8652 17.0766 23.2956 16.1711 22.6468L3.55588 13.6357Z", fill: "#0C68E9" }), _jsx("path", { d: "M36.888 9.61453C37.1957 9.40153 37.3495 9.29503 37.444 9.12373C37.5174 8.99071 37.5594 8.78007 37.5426 8.62908C37.5209 8.43465 37.4383 8.30628 37.273 8.04955C36.6399 7.06607 35.7288 6.25426 34.6933 5.72663C33.8844 5.31447 33.0232 5.1502 32.0864 5.07366C31.1844 4.99996 30.0771 4.99998 28.7355 5H11.2645C9.92292 4.99998 8.81563 4.99996 7.91365 5.07366C6.97682 5.1502 6.11564 5.31447 5.30675 5.72663C4.37503 6.20136 3.56969 6.88767 2.95729 7.72225C2.76463 7.98482 2.6683 8.1161 2.63656 8.31534C2.61174 8.47116 2.6464 8.68762 2.71862 8.8279C2.81098 9.00727 2.97117 9.1217 3.29156 9.35055L17.9167 19.7971C19.1288 20.6628 19.386 20.8135 19.6136 20.8722C19.8787 20.9406 20.1565 20.9426 20.4226 20.8782C20.651 20.8228 20.9104 20.6759 22.1351 19.8281L36.888 9.61453Z", fill: "#0C68E9" })] }));
+    const addButtonSection = (_jsxs("button", { onClick: () => setShowInput(true), className: "mt-1 flex items-center gap-1", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add Email" })] }));
+    const inputSection = showInput ? (_jsxs("div", { className: "mt-1 space-y-2", children: [_jsxs("div", { children: [_jsx("input", { type: "email", value: email, onChange: e => {
+                            setEmail(e.target.value);
+                            if (emailError)
+                                setEmailError(null);
+                        }, onKeyDown: e => {
+                            if (e.key === "Enter" && email) {
+                                handleConnect();
+                            }
+                        }, placeholder: "your@email.com", className: `w-full rounded-lg border px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:outline-none ${emailError ? "border-red-500 focus:border-red-500" : "border-gray-300 focus:border-blue-500"}` }), emailError && (_jsx("p", { className: "mt-1 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] leading-[16px] text-red-600", children: emailError }))] }), _jsxs("button", { onClick: handleConnect, disabled: isConnecting || !email, className: "flex items-center gap-1 disabled:opacity-50", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Connecting..." : "Add Email" })] })] })) : null;
+    return (_jsx(NotificationChannel, { icon: icon, title: "Email", isConnected: isOptimisticallyConnected, isConnecting: isConnecting, isDisconnecting: isDisconnecting, connectedInfo: emailChannel?.channel_identifier, inputSection: inputSection, addButtonSection: addButtonSection, onToggle: handleToggle }));
+};

package/dist/esm/global-account/react/components/ManageAccount/channels/PhoneChannel.d.ts

@@ -0,0 +1,14 @@
+interface PhoneChannelProps {
+    userId: string;
+    jwtToken: string;
+    smsChannel: any;
+    whatsappChannel: any;
+    isSMSConnected: boolean;
+    isWhatsAppConnected: boolean;
+    isOptimisticallySMSConnected: boolean;
+    isOptimisticallyWhatsAppConnected: boolean;
+    onConnectionChange: () => void;
+    onToggle: (type: "sms" | "whatsapp", enabled: boolean) => void;
+}
+export declare const PhoneChannel: ({ userId, jwtToken, smsChannel, whatsappChannel, isSMSConnected, isWhatsAppConnected, isOptimisticallySMSConnected, isOptimisticallyWhatsAppConnected, onConnectionChange, onToggle, }: PhoneChannelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { debugB3React } from "../../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI.js";
+import { useB3 } from "../../B3Provider/useB3.js";
+import { toast } from "../../Toast/toastApi.js";
+import { NotificationChannel } from "../NotificationChannel.js";
+const debug = debugB3React("PhoneChannel");
+export const PhoneChannel = ({ userId, jwtToken, smsChannel, whatsappChannel, isSMSConnected, isWhatsAppConnected, isOptimisticallySMSConnected, isOptimisticallyWhatsAppConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = useB3();
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [isConnectingSMS, setIsConnectingSMS] = useState(false);
+    const [isConnectingWhatsApp, setIsConnectingWhatsApp] = useState(false);
+    const [showInput, setShowInput] = useState(false);
+    // Detect if we're disconnecting
+    const isDisconnecting = (isSMSConnected && !isOptimisticallySMSConnected) || (isWhatsAppConnected && !isOptimisticallyWhatsAppConnected);
+    const handleConnectSMS = async () => {
+        if (!phoneNumber || !userId || !jwtToken)
+            return;
+        try {
+            setIsConnectingSMS(true);
+            await notificationsAPI.connectSMS(userId, phoneNumber, jwtToken);
+            await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setPhoneNumber("");
+            setShowInput(false);
+            toast.success("SMS connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting SMS:", err);
+            toast.error("Failed to connect SMS");
+        }
+        finally {
+            setIsConnectingSMS(false);
+        }
+    };
+    const handleConnectWhatsApp = async () => {
+        if (!phoneNumber || !userId || !jwtToken)
+            return;
+        try {
+            setIsConnectingWhatsApp(true);
+            await notificationsAPI.connectWhatsApp(userId, phoneNumber, jwtToken);
+            await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setPhoneNumber("");
+            setShowInput(false);
+            toast.success("WhatsApp connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting WhatsApp:", err);
+            toast.error("Failed to connect WhatsApp");
+        }
+        finally {
+            setIsConnectingWhatsApp(false);
+        }
+    };
+    const handleToggle = () => {
+        if (isSMSConnected || isWhatsAppConnected) {
+            setShowInput(false);
+        }
+        if (isSMSConnected)
+            onToggle("sms", true);
+        if (isWhatsAppConnected)
+            onToggle("whatsapp", true);
+    };
+    const icon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.7596 36.4673C21.4375 34.9568 16.416 32.1062 12.2299 27.9201C8.04385 23.7341 5.19327 18.7125 3.68271 13.3905C3.67375 13.3589 3.66487 13.3277 3.65605 13.2966C3.4102 12.4316 3.21956 11.7608 3.21682 10.841C3.21369 9.78971 3.5562 8.47265 4.07108 7.55607C4.95655 5.97979 6.85783 3.9597 8.50003 3.12908C9.91893 2.4114 11.5946 2.4114 13.0135 3.12908C14.4172 3.83908 15.9806 5.42835 16.8521 6.76878C17.9296 8.42601 17.9296 10.5625 16.8521 12.2197C16.5633 12.6638 16.1518 13.0746 15.674 13.5516C15.5253 13.7001 15.3615 13.8074 15.4702 14.0339C16.5499 16.2827 18.0224 18.392 19.8902 20.2598C21.758 22.1276 23.8674 23.6001 26.1162 24.6798C26.3506 24.7924 26.443 24.6317 26.5985 24.476C27.0754 23.9983 27.4863 23.5867 27.9304 23.298C29.5876 22.2205 31.724 22.2205 33.3813 23.298C34.6858 24.1462 36.3165 25.7438 37.021 27.1365C37.7386 28.5554 37.7386 30.2311 37.021 31.65C36.1903 33.2922 34.1703 35.1935 32.594 36.079C31.6774 36.5938 30.3603 36.9364 29.309 36.9332C28.3892 36.9305 27.7184 36.7398 26.8534 36.494C26.8224 36.4852 26.7911 36.4763 26.7596 36.4673Z", fill: "#0C68E9" }) }));
+    const addButtonSection = (_jsxs("div", { className: "mt-1 flex gap-2", children: [_jsxs("button", { onClick: () => setShowInput(true), className: "flex items-center gap-1", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add SMS" })] }), _jsx("span", { className: "text-[11px] text-gray-400", children: "|" }), _jsxs("button", { onClick: () => setShowInput(true), className: "flex items-center gap-1", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add WhatsApp" })] })] }));
+    const inputSection = showInput ? (_jsxs("div", { className: "mt-1 space-y-2", children: [_jsx("input", { type: "tel", value: phoneNumber, onChange: e => setPhoneNumber(e.target.value), onKeyDown: e => {
+                    if (e.key === "Enter" && phoneNumber) {
+                        handleConnectSMS();
+                    }
+                }, placeholder: "+1 (555) 123-4567", className: "w-full rounded-lg border border-gray-300 px-2 py-1.5 font-['Inter',sans-serif] text-sm focus:border-blue-500 focus:outline-none" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: handleConnectSMS, disabled: isConnectingSMS || !phoneNumber, className: "flex items-center gap-1 disabled:opacity-50", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnectingSMS ? "Connecting..." : "Add SMS" })] }), _jsx("span", { className: "text-[11px] text-gray-400", children: "|" }), _jsxs("button", { onClick: handleConnectWhatsApp, disabled: isConnectingWhatsApp || !phoneNumber, className: "flex items-center gap-1 disabled:opacity-50", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnectingWhatsApp ? "Connecting..." : "Add WhatsApp" })] })] })] })) : null;
+    const connectedInfo = (_jsxs(_Fragment, { children: [isSMSConnected && (_jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: smsChannel?.channel_identifier })), isWhatsAppConnected && (_jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: whatsappChannel?.channel_identifier }))] }));
+    return (_jsx(NotificationChannel, { icon: icon, title: "SMS/WhatsApp", isConnected: isOptimisticallySMSConnected || isOptimisticallyWhatsAppConnected, isConnecting: isConnectingSMS || isConnectingWhatsApp, isDisconnecting: isDisconnecting, connectedInfo: isSMSConnected || isWhatsAppConnected ? (_jsx("div", { className: "mt-1 flex flex-col gap-1", children: connectedInfo })) : undefined, inputSection: inputSection, addButtonSection: addButtonSection, onToggle: handleToggle }));
+};

package/dist/esm/global-account/react/components/ManageAccount/channels/TelegramChannel.d.ts

@@ -0,0 +1,11 @@
+interface TelegramChannelProps {
+    userId: string;
+    jwtToken: string;
+    telegramChannel: any;
+    isConnected: boolean;
+    isOptimisticallyConnected: boolean;
+    onConnectionChange: () => void;
+    onToggle: (enabled: boolean) => void;
+}
+export declare const TelegramChannel: ({ userId, jwtToken, telegramChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }: TelegramChannelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { debugB3React } from "../../../../../shared/utils/debug.js";
+import { useState } from "react";
+import { notificationsAPI } from "../../../utils/notificationsAPI.js";
+import { useB3 } from "../../B3Provider/useB3.js";
+import { toast } from "../../Toast/toastApi.js";
+import { NotificationChannel } from "../NotificationChannel.js";
+const debug = debugB3React("TelegramChannel");
+export const TelegramChannel = ({ userId, jwtToken, telegramChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = useB3();
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [status, setStatus] = useState("idle");
+    // Detect if we're disconnecting
+    const isDisconnecting = isConnected && !isOptimisticallyConnected;
+    const handleConnect = async () => {
+        if (!userId || !jwtToken)
+            return;
+        try {
+            setIsConnecting(true);
+            const { deepLink } = await notificationsAPI.getTelegramLink(jwtToken);
+            window.open(deepLink, "_blank");
+            setStatus("pending");
+            // Poll for connection using nested timeouts to avoid overlapping requests
+            const startTime = Date.now();
+            const maxDuration = 120000; // 2 minutes
+            let timeoutId = null;
+            const pollStatus = async () => {
+                try {
+                    const { connected } = await notificationsAPI.checkTelegramStatus(userId, jwtToken);
+                    if (connected) {
+                        if (timeoutId)
+                            clearTimeout(timeoutId);
+                        setStatus("connected");
+                        await notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+                        toast.success("Telegram connected successfully!");
+                        onConnectionChange();
+                        return;
+                    }
+                }
+                catch (err) {
+                    debug("Error checking Telegram status:", err);
+                }
+                // Check if we've exceeded max duration
+                if (Date.now() - startTime < maxDuration) {
+                    // Schedule next check after previous one completes
+                    timeoutId = setTimeout(pollStatus, 2000);
+                }
+                else {
+                    setStatus("idle");
+                }
+            };
+            // Start polling
+            timeoutId = setTimeout(pollStatus, 2000);
+        }
+        catch (err) {
+            debug("Error connecting Telegram:", err);
+            toast.error("Failed to connect Telegram");
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    };
+    const handleToggle = () => {
+        if (isConnected) {
+            setStatus("idle");
+            onToggle(true);
+        }
+        else {
+            handleConnect();
+        }
+    };
+    const icon = (_jsx("svg", { width: "1000px", height: "1000px", viewBox: "0 0 1000 1000", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "Telegram", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", children: _jsx("path", { d: "M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z", id: "Path-3", fill: "#FFFFFF" }) }) }));
+    const inputSection = status === "pending" ? (_jsxs("div", { className: "mt-1", children: [_jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700", children: "Waiting for connection..." }), _jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] text-yellow-600", children: "Send /start to @b3_notifications_bot" })] })) : (_jsxs("button", { onClick: handleConnect, disabled: isConnecting, className: "mt-1 flex items-center gap-1 disabled:opacity-50", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Opening..." : "Add Telegram" })] }));
+    return (_jsx(NotificationChannel, { icon: icon, iconClassName: "bg-[#24A1DE] rounded-xl", title: "Telegram", isConnected: isOptimisticallyConnected || status === "connected", isConnecting: isConnecting, isDisconnecting: isDisconnecting, connectedInfo: telegramChannel?.channel_identifier || "Connected", inputSection: inputSection, onToggle: handleToggle }));
+};

package/dist/esm/global-account/react/components/ManageAccount/channels/index.d.ts

@@ -0,0 +1,4 @@
+export { DiscordChannel } from "./DiscordChannel";
+export { EmailChannel } from "./EmailChannel";
+export { PhoneChannel } from "./PhoneChannel";
+export { TelegramChannel } from "./TelegramChannel";

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

@@ -0,0 +1,4 @@
+export { DiscordChannel } from "./DiscordChannel.js";
+export { EmailChannel } from "./EmailChannel.js";
+export { PhoneChannel } from "./PhoneChannel.js";
+export { TelegramChannel } from "./TelegramChannel.js";

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

@@ -0,0 +1,11 @@
+declare const ModalHeader: ({ showBackButton, handleBack, handleClose, title, children, showCloseButton, className, showBackWord, }: {
+    showBackButton?: boolean;
+    handleBack?: () => void;
+    handleClose?: () => void;
+    title: string;
+    children?: React.ReactNode;
+    showCloseButton?: boolean;
+    className?: string;
+    showBackWord?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ModalHeader;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/index.js";
+import { ChevronLeft, X } from "lucide-react";
+import { useModalStore } from "../../stores/index.js";
+const ModalHeader = ({ showBackButton = true, handleBack, handleClose, title, children, showCloseButton = true, className, showBackWord = false, }) => {
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    return (_jsxs("div", { className: cn("b3-modal-header flex h-16 items-center justify-between border-b border-[#e4e4e7] bg-white px-5 py-3", className), children: [showBackButton ? (_jsxs("button", { onClick: handleBack || navigateBack, className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: [_jsx(ChevronLeft, { className: "h-6 w-6 text-[#51525c]" }), showBackWord && _jsx("span", { className: "text-sm font-medium", children: "Back" })] })) : (_jsx("div", { className: "w-2" })), _jsx("p", { className: "font-inter text-lg font-semibold leading-7 text-[#18181b]", children: title }), showCloseButton ? (_jsx("button", { onClick: handleClose || (() => setB3ModalOpen(false)), className: "flex h-6 w-6 items-center justify-center transition-opacity hover:opacity-70", children: _jsx(X, { className: "h-6 w-6 text-[#51525c]" }) })) : !children ? (_jsx("div", { className: "w-2" })) : undefined, children] }));
+};
+export default ModalHeader;

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

@@ -0,0 +1,5 @@
+export interface SendModalProps {
+    recipientAddress?: string;
+    onSuccess?: (txHash?: string) => void;
+}
+export declare function Send({ recipientAddress: initialRecipient, onSuccess }: SendModalProps): import("react/jsx-runtime").JSX.Element;