@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const thirdweb_1 = require("../../../../shared/utils/thirdweb");
+const react_2 = require("thirdweb/react");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const SettingsMenuItem_1 = __importDefault(require("./SettingsMenuItem"));
+const SettingsProfileCard_1 = __importDefault(require("./SettingsProfileCard"));
+const SettingsContent = ({ partnerId, onLogout, chain, }) => {
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const { data: profilesRaw = [] } = (0, react_2.useProfiles)({ client: thirdweb_1.client });
+    const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
+    const handleNavigate = (type) => {
+        if (type === "home") {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain,
+                partnerId,
+                onLogout,
+                activeTab: "home",
+            });
+        }
+        else if (type === "swap") {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain,
+                partnerId,
+                onLogout,
+                activeTab: "tokens",
+            });
+        }
+        else if (type === "linkAccount") {
+            setB3ModalContentType({
+                type: "linkAccount",
+                chain,
+                partnerId,
+            });
+        }
+        else if (type === "notifications") {
+            setB3ModalContentType({
+                type: "notifications",
+                chain,
+                partnerId,
+            });
+        }
+        else {
+            setB3ModalContentType({
+                type: "avatarEditor",
+            });
+        }
+        setB3ModalOpen(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[470px] flex-col", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { showBackButton: false, showCloseButton: false, title: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: "p-5", children: (0, jsx_runtime_1.jsx)("div", { className: "b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: (0, jsx_runtime_1.jsx)(SettingsProfileCard_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 px-5", children: [(0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), (0, jsx_runtime_1.jsx)(SettingsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsx)("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") })] })] }));
+};
+exports.default = SettingsContent;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface SettingsMenuItemProps {
+    icon: ReactNode;
+    title: string;
+    subtitle: string;
+    onClick?: () => void;
+}
+declare const SettingsMenuItem: ({ icon, title, subtitle, onClick }: SettingsMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingsMenuItem;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const SettingsMenuItem = ({ icon, title, subtitle, onClick }) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
+};
+exports.default = SettingsMenuItem;

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

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

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

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ens_normalize_1 = require("@adraffy/ens-normalize");
+const app_1 = __importDefault(require("../../../../global-account/app"));
+const react_1 = require("../../../../global-account/react");
+const utils_1 = require("../../../../shared/utils");
+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 SettingsProfileCard = () => {
+    const account = (0, react_3.useActiveAccount)();
+    const { address: eoaAddress } = (0, useFirstEOA_1.useFirstEOA)();
+    const { data: profile, refetch: refreshProfile } = (0, react_1.useProfile)({
+        address: eoaAddress || account?.address,
+        fresh: true,
+    });
+    const { user, setUser } = (0, react_1.useB3)();
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
+    // State for inline username editing
+    const [isEditingUsername, setIsEditingUsername] = (0, react_2.useState)(false);
+    const [editedUsername, setEditedUsername] = (0, react_2.useState)("");
+    const [isSaving, setIsSaving] = (0, react_2.useState)(false);
+    const inputRef = (0, react_2.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 || (0, utils_1.formatUsername)(profile?.name || "");
+    // Focus input when entering edit mode
+    (0, react_2.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()) {
+            react_1.toast.error("Username cannot be empty");
+            return;
+        }
+        if (editedUsername === currentUsername) {
+            // No change, just exit edit mode
+            handleCancelEdit();
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const sanitizedUsername = (0, ens_normalize_1.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_1.default
+                .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();
+            react_1.toast.success("Username updated successfully!");
+            setIsEditingUsername(false);
+            setEditedUsername("");
+        }
+        catch (error) {
+            console.error("Error updating username:", error);
+            react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0", children: [(0, jsx_runtime_1.jsx)(IPFSMediaRenderer_1.IPFSMediaRenderer, { src: avatarSrc, alt: "Profile", className: "border-black/8 size-14 rounded-full border object-cover" }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 10, className: "text-white", strokeWidth: 2.5 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 flex-col gap-1", children: isEditingUsername ? (
+                /* Edit mode - inline input */
+                (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 18, className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, strokeWidth: 2.5 }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, strokeWidth: 2.5 }) })] })] })) : (
+                /* Display mode */
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "b3-modal-username font-neue-montreal-semibold text-lg leading-none text-[#0B57C2]", children: currentUsername }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleEditUsername, className: "flex items-center justify-center gap-1 text-left transition-opacity hover:opacity-80", children: (0, jsx_runtime_1.jsx)("p", { className: "font-inter text-sm font-semibold leading-5 text-[#51525C]", children: "Edit Username" }) })] })) })] }));
+};
+exports.default = SettingsProfileCard;

package/dist/cjs/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/cjs/global-account/react/components/ManageAccount/TokenBalanceRow.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenBalanceRow = TokenBalanceRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
-function TokenBalanceRow({ icon, name, balance, usdValue, priceChange }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: name }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: balance })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", usdValue] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: priceChange !== null && priceChange !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [priceChange >= 0 ? "+" : "", priceChange.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }));
+function TokenBalanceRow({ tokenLogo, chainLogo, name, balance, usdValue, priceChange }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-10 w-10 items-center justify-center", children: [tokenLogo ? ((0, jsx_runtime_1.jsx)("img", { src: tokenLogo, alt: name, className: "h-full w-full rounded-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-gray-200", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Coins, { className: "h-5 w-5 text-gray-400" }) })), chainLogo && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("img", { src: chainLogo, alt: "chain", className: "h-full w-full rounded-full object-cover" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: name }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: balance })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: ["$", usdValue] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: priceChange !== null && priceChange !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Triangle, { className: `size-3 ${priceChange >= 0 ? "text-b3-positive fill-b3-positive" : "text-b3-negative fill-b3-negative rotate-180"}` }), (0, jsx_runtime_1.jsxs)("span", { className: `font-neue-montreal-medium text-sm ${priceChange >= 0 ? "text-b3-positive" : "text-b3-negative"}`, children: [priceChange >= 0 ? "+" : "", priceChange.toFixed(2), "%"] })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "--" })) })] })] }));
 }

package/dist/cjs/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/cjs/global-account/react/components/ManageAccount/TokenContent.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../../global-account/react");
+const supported_1 = require("../../../../shared/constants/chains/supported");
+const react_2 = require("thirdweb/react");
+const TokenBalanceRow_1 = require("./TokenBalanceRow");
+// Chain logo URLs mapping
+const CHAIN_LOGOS = [1, 8453, 8333].map(chainId => (0, supported_1.getChainLogo)(chainId));
+const TokenContent = () => {
+    // Get active wallet state
+    const activeWallet = (0, react_2.useActiveWallet)();
+    const activeAccount = activeWallet?.getAccount();
+    const activeAddress = activeAccount?.address;
+    const { data: simBalance } = (0, react_1.useSimBalance)(activeAddress, [8453, 8333, 1]);
+    console.log("simBalance :", simBalance);
+    if (!activeAddress) {
+        return (0, jsx_runtime_1.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 (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(TokenBalanceRow_1.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}`));
+        }) }));
+};
+exports.default = TokenContent;

package/dist/cjs/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/cjs/global-account/react/components/ManageAccount/channels/DiscordChannel.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscordChannel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const debug_1 = require("../../../../../shared/utils/debug");
+const react_1 = require("react");
+const notificationsAPI_1 = require("../../../utils/notificationsAPI");
+const useB3_1 = require("../../B3Provider/useB3");
+const toastApi_1 = require("../../Toast/toastApi");
+const NotificationChannel_1 = require("../NotificationChannel");
+const debug = (0, debug_1.debugB3React)("DiscordChannel");
+const DiscordChannel = ({ userId, jwtToken, discordChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = (0, useB3_1.useB3)();
+    const [discordId, setDiscordId] = (0, react_1.useState)("");
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    // Detect if we're disconnecting
+    const isDisconnecting = isConnected && !isOptimisticallyConnected;
+    const handleConnect = async () => {
+        if (!discordId || !userId || !jwtToken)
+            return;
+        try {
+            setIsConnecting(true);
+            await notificationsAPI_1.notificationsAPI.connectDiscord(userId, discordId, jwtToken);
+            await notificationsAPI_1.notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setDiscordId("");
+            toastApi_1.toast.success("Discord connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting Discord:", err);
+            toastApi_1.toast.error("Failed to connect Discord");
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    };
+    const handleToggle = () => {
+        onToggle(isConnected);
+    };
+    const icon = ((0, jsx_runtime_1.jsx)("svg", { id: "Discord-Logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 126.644 96", children: (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 space-y-2", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleConnect, disabled: isConnecting || !discordId, className: "flex items-center gap-1 disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Connecting..." : "Add Discord" })] })] }));
+    return ((0, jsx_runtime_1.jsx)(NotificationChannel_1.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 }));
+};
+exports.DiscordChannel = DiscordChannel;

package/dist/cjs/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/cjs/global-account/react/components/ManageAccount/channels/EmailChannel.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailChannel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const debug_1 = require("../../../../../shared/utils/debug");
+const react_1 = require("react");
+const notificationsAPI_1 = require("../../../utils/notificationsAPI");
+const useB3_1 = require("../../B3Provider/useB3");
+const toastApi_1 = require("../../Toast/toastApi");
+const NotificationChannel_1 = require("../NotificationChannel");
+const debug = (0, debug_1.debugB3React)("EmailChannel");
+const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+const EmailChannel = ({ userId, jwtToken, emailChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = (0, useB3_1.useB3)();
+    const [email, setEmail] = (0, react_1.useState)("");
+    const [emailError, setEmailError] = (0, react_1.useState)(null);
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    const [showInput, setShowInput] = (0, react_1.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_1.notificationsAPI.connectEmail(userId, email, jwtToken);
+            await notificationsAPI_1.notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setEmail("");
+            setShowInput(false);
+            toastApi_1.toast.success("Email connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting email:", err);
+            toastApi_1.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 = ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowInput(true), className: "mt-1 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add Email" })] }));
+    const inputSection = showInput ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[12px] leading-[16px] text-red-600", children: emailError }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleConnect, disabled: isConnecting || !email, className: "flex items-center gap-1 disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnecting ? "Connecting..." : "Add Email" })] })] })) : null;
+    return ((0, jsx_runtime_1.jsx)(NotificationChannel_1.NotificationChannel, { icon: icon, title: "Email", isConnected: isOptimisticallyConnected, isConnecting: isConnecting, isDisconnecting: isDisconnecting, connectedInfo: emailChannel?.channel_identifier, inputSection: inputSection, addButtonSection: addButtonSection, onToggle: handleToggle }));
+};
+exports.EmailChannel = EmailChannel;

package/dist/cjs/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/cjs/global-account/react/components/ManageAccount/channels/PhoneChannel.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneChannel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const debug_1 = require("../../../../../shared/utils/debug");
+const react_1 = require("react");
+const notificationsAPI_1 = require("../../../utils/notificationsAPI");
+const useB3_1 = require("../../B3Provider/useB3");
+const toastApi_1 = require("../../Toast/toastApi");
+const NotificationChannel_1 = require("../NotificationChannel");
+const debug = (0, debug_1.debugB3React)("PhoneChannel");
+const PhoneChannel = ({ userId, jwtToken, smsChannel, whatsappChannel, isSMSConnected, isWhatsAppConnected, isOptimisticallySMSConnected, isOptimisticallyWhatsAppConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = (0, useB3_1.useB3)();
+    const [phoneNumber, setPhoneNumber] = (0, react_1.useState)("");
+    const [isConnectingSMS, setIsConnectingSMS] = (0, react_1.useState)(false);
+    const [isConnectingWhatsApp, setIsConnectingWhatsApp] = (0, react_1.useState)(false);
+    const [showInput, setShowInput] = (0, react_1.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_1.notificationsAPI.connectSMS(userId, phoneNumber, jwtToken);
+            await notificationsAPI_1.notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setPhoneNumber("");
+            setShowInput(false);
+            toastApi_1.toast.success("SMS connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting SMS:", err);
+            toastApi_1.toast.error("Failed to connect SMS");
+        }
+        finally {
+            setIsConnectingSMS(false);
+        }
+    };
+    const handleConnectWhatsApp = async () => {
+        if (!phoneNumber || !userId || !jwtToken)
+            return;
+        try {
+            setIsConnectingWhatsApp(true);
+            await notificationsAPI_1.notificationsAPI.connectWhatsApp(userId, phoneNumber, jwtToken);
+            await notificationsAPI_1.notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+            setPhoneNumber("");
+            setShowInput(false);
+            toastApi_1.toast.success("WhatsApp connected successfully!");
+            onConnectionChange();
+        }
+        catch (err) {
+            debug("Error connecting WhatsApp:", err);
+            toastApi_1.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 = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowInput(true), className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add SMS" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-gray-400", children: "|" }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowInput(true), className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: "Add WhatsApp" })] })] }));
+    const inputSection = showInput ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1 space-y-2", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleConnectSMS, disabled: isConnectingSMS || !phoneNumber, className: "flex items-center gap-1 disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnectingSMS ? "Connecting..." : "Add SMS" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-gray-400", children: "|" }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleConnectWhatsApp, disabled: isConnectingWhatsApp || !phoneNumber, className: "flex items-center gap-1 disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 3.33333V12.6667M3.33333 8H12.6667", stroke: "#0c68e9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("span", { className: "font-['Inter',sans-serif] text-[11px] font-semibold leading-[16px] text-[#0b57c2]", children: isConnectingWhatsApp ? "Connecting..." : "Add WhatsApp" })] })] })] })) : null;
+    const connectedInfo = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSMSConnected && ((0, jsx_runtime_1.jsx)("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: smsChannel?.channel_identifier })), isWhatsAppConnected && ((0, jsx_runtime_1.jsx)("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: whatsappChannel?.channel_identifier }))] }));
+    return ((0, jsx_runtime_1.jsx)(NotificationChannel_1.NotificationChannel, { icon: icon, title: "SMS/WhatsApp", isConnected: isOptimisticallySMSConnected || isOptimisticallyWhatsAppConnected, isConnecting: isConnectingSMS || isConnectingWhatsApp, isDisconnecting: isDisconnecting, connectedInfo: isSMSConnected || isWhatsAppConnected ? ((0, jsx_runtime_1.jsx)("div", { className: "mt-1 flex flex-col gap-1", children: connectedInfo })) : undefined, inputSection: inputSection, addButtonSection: addButtonSection, onToggle: handleToggle }));
+};
+exports.PhoneChannel = PhoneChannel;

package/dist/cjs/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 {};