@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelegramChannel = 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)("TelegramChannel");
+const TelegramChannel = ({ userId, jwtToken, telegramChannel, isConnected, isOptimisticallyConnected, onConnectionChange, onToggle, }) => {
+    const { partnerId } = (0, useB3_1.useB3)();
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    const [status, setStatus] = (0, react_1.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_1.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_1.notificationsAPI.checkTelegramStatus(userId, jwtToken);
+                    if (connected) {
+                        if (timeoutId)
+                            clearTimeout(timeoutId);
+                        setStatus("connected");
+                        await notificationsAPI_1.notificationsAPI.ensureNotificationSettings(userId, partnerId, "general", jwtToken);
+                        toastApi_1.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);
+            toastApi_1.toast.error("Failed to connect Telegram");
+        }
+        finally {
+            setIsConnecting(false);
+        }
+    };
+    const handleToggle = () => {
+        if (isConnected) {
+            setStatus("idle");
+            onToggle(true);
+        }
+        else {
+            handleConnect();
+        }
+    };
+    const icon = ((0, jsx_runtime_1.jsx)("svg", { width: "1000px", height: "1000px", viewBox: "0 0 1000 1000", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("g", { id: "Telegram", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", children: (0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-yellow-700", children: "Waiting for connection..." }), (0, jsx_runtime_1.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" })] })) : ((0, jsx_runtime_1.jsxs)("button", { onClick: handleConnect, disabled: isConnecting, className: "mt-1 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 ? "Opening..." : "Add Telegram" })] }));
+    return ((0, jsx_runtime_1.jsx)(NotificationChannel_1.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 }));
+};
+exports.TelegramChannel = TelegramChannel;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelegramChannel = exports.PhoneChannel = exports.EmailChannel = exports.DiscordChannel = void 0;
+var DiscordChannel_1 = require("./DiscordChannel");
+Object.defineProperty(exports, "DiscordChannel", { enumerable: true, get: function () { return DiscordChannel_1.DiscordChannel; } });
+var EmailChannel_1 = require("./EmailChannel");
+Object.defineProperty(exports, "EmailChannel", { enumerable: true, get: function () { return EmailChannel_1.EmailChannel; } });
+var PhoneChannel_1 = require("./PhoneChannel");
+Object.defineProperty(exports, "PhoneChannel", { enumerable: true, get: function () { return PhoneChannel_1.PhoneChannel; } });
+var TelegramChannel_1 = require("./TelegramChannel");
+Object.defineProperty(exports, "TelegramChannel", { enumerable: true, get: function () { return TelegramChannel_1.TelegramChannel; } });

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

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

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

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

@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Send = Send;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const anyspend_1 = require("../../../../anyspend");
+const ChainTokenIcon_1 = require("../../../../anyspend/react/components/common/ChainTokenIcon");
+const react_1 = require("../../../../global-account/react");
+const number_1 = require("../../../../shared/utils/number");
+const invariant_1 = __importDefault(require("invariant"));
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const react_number_format_1 = require("react-number-format");
+const viem_1 = require("viem");
+const useRecentAddressesStore_1 = require("../../stores/useRecentAddressesStore");
+const ModalHeader_1 = __importDefault(require("../ModalHeader/ModalHeader"));
+const button_1 = require("../ui/button");
+// Component for displaying a recent address with profile data
+function RecentAddressItem({ address, onClick }) {
+    const { data: profileData } = (0, react_1.useProfile)({ address });
+    return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-start", children: (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+}
+function Send({ recipientAddress: initialRecipient, onSuccess }) {
+    const { address } = (0, react_1.useAccountWallet)();
+    const navigateBack = (0, react_1.useModalStore)(state => state.navigateBack);
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    // Wizard state
+    const [step, setStep] = (0, react_2.useState)("recipient");
+    const [selectedToken, setSelectedToken] = (0, react_2.useState)(null);
+    const [recipientAddress, setRecipientAddress] = (0, react_2.useState)(initialRecipient || "");
+    const [sendAmount, setSendAmount] = (0, react_2.useState)("");
+    const [isSending, setIsSending] = (0, react_2.useState)(false);
+    const [addressError, setAddressError] = (0, react_2.useState)("");
+    const [showValidatedResult, setShowValidatedResult] = (0, react_2.useState)(false);
+    // Hooks
+    const { data: simBalance, refetch: refetchSimBalance, isLoading: isLoadingBalance } = (0, react_1.useSimBalance)(address);
+    const { switchChainAndExecute } = (0, react_1.useUnifiedChainSwitchAndExecute)();
+    const { sendAnalyticsEvent } = (0, react_1.useAnalytics)();
+    // Recent addresses store
+    const recentAddresses = (0, useRecentAddressesStore_1.useRecentAddressesStore)(state => state.recentAddresses);
+    const addRecentAddress = (0, useRecentAddressesStore_1.useRecentAddressesStore)(state => state.addRecentAddress);
+    // Fetch profile data for validated address
+    const { data: validatedProfileData } = (0, react_1.useProfile)({
+        address: showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) ? recipientAddress : undefined,
+    });
+    // Address validation
+    const handleRecipientAddressChange = (value) => {
+        setRecipientAddress(value);
+        setShowValidatedResult(false);
+        if (value && !(0, viem_1.isAddress)(value)) {
+            setAddressError("Please enter a valid EVM address (0x...)");
+        }
+        else {
+            setAddressError("");
+            if (value && (0, viem_1.isAddress)(value)) {
+                setShowValidatedResult(true);
+            }
+        }
+    };
+    // Paste from clipboard
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            const trimmedText = text.trim();
+            setRecipientAddress(trimmedText);
+            if (trimmedText && (0, viem_1.isAddress)(trimmedText)) {
+                setAddressError("");
+                setShowValidatedResult(true);
+            }
+            else if (trimmedText) {
+                setAddressError("Please enter a valid EVM address (0x...)");
+                setShowValidatedResult(false);
+            }
+        }
+        catch (error) {
+            react_1.toast.error("Failed to read clipboard");
+        }
+    };
+    // Handle clicking on the validated result to proceed
+    const handleSelectValidatedAddress = () => {
+        if (recipientAddress && (0, viem_1.isAddress)(recipientAddress)) {
+            addRecentAddress(recipientAddress);
+            setStep("token");
+        }
+    };
+    // Go to previous step
+    const handleBack = () => {
+        if (step === "token")
+            setStep("recipient");
+        else if (step === "amount")
+            setStep("token");
+        else if (step === "confirm")
+            setStep("amount");
+        else
+            navigateBack();
+    };
+    // Get current selected token from fresh balance
+    const getCurrentSelectedToken = () => {
+        if (!selectedToken || !simBalance?.balances) {
+            return null;
+        }
+        const found = simBalance.balances.find(token => token.chain_id === selectedToken.chain_id && token.address === selectedToken.address);
+        return found || null;
+    };
+    // Percentage button handler
+    const handlePercentageClick = (percentage) => {
+        const currentToken = getCurrentSelectedToken();
+        if (currentToken) {
+            const tokenBalance = (BigInt(currentToken.amount) * BigInt(percentage)) / BigInt(100);
+            const amount = (0, number_1.formatTokenAmount)(tokenBalance, currentToken.decimals, 30, false);
+            setSendAmount(amount);
+        }
+    };
+    // Send transaction
+    const handleSend = async () => {
+        const sendAmountWithoutCommas = sendAmount.replace(/,/g, "");
+        const currentToken = getCurrentSelectedToken();
+        if (!currentToken || !recipientAddress || !sendAmount || parseFloat(sendAmountWithoutCommas) <= 0) {
+            return;
+        }
+        setIsSending(true);
+        const amountInWei = (0, viem_1.parseUnits)(sendAmountWithoutCommas, currentToken.decimals);
+        const analyticsData = {
+            amount: sendAmount,
+            symbol: currentToken.symbol,
+            chain_id: currentToken.chain_id,
+            address: currentToken.address,
+        };
+        try {
+            (0, invariant_1.default)((0, viem_1.isAddress)(recipientAddress), "Recipient address is not a valid address");
+            const sendTokenData = (0, viem_1.encodeFunctionData)({
+                abi: viem_1.erc20Abi,
+                functionName: "transfer",
+                args: [recipientAddress, amountInWei],
+            });
+            const tx = await switchChainAndExecute(currentToken.chain_id, {
+                to: currentToken.address === "native" ? recipientAddress : currentToken.address,
+                data: sendTokenData,
+                value: currentToken.address === "native" ? amountInWei : BigInt(0),
+            });
+            if (tx) {
+                sendAnalyticsEvent("send_token_button_click", {
+                    ...analyticsData,
+                    success: true,
+                    tx: (0, anyspend_1.getExplorerTxUrl)(currentToken.chain_id, tx),
+                });
+                setStep("success");
+                react_1.toast.success(`Successfully sent ${sendAmount} ${currentToken.symbol}`);
+                if (onSuccess) {
+                    onSuccess(tx);
+                }
+                setTimeout(async () => {
+                    await refetchSimBalance();
+                }, 1000);
+            }
+        }
+        catch (error) {
+            sendAnalyticsEvent("send_token_button_click", {
+                ...analyticsData,
+                success: false,
+                reason: error.message || "Unknown error",
+            });
+            react_1.toast.error(`Failed to send ${currentToken.symbol}: ${error.message || "Unknown error"}`);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    // Get step title
+    const getStepTitle = () => {
+        switch (step) {
+            case "recipient":
+                return "Select Recipient";
+            case "token":
+                return "Select Token";
+            case "amount":
+                return "Enter Amount";
+            case "confirm":
+                return "Confirm";
+            case "success":
+                return "Sent!";
+            default:
+                return "Send";
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-[600px] w-full flex-col bg-white", children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.default, { handleBack: handleBack, title: getStepTitle() }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46]", children: "To" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b]" }), (0, jsx_runtime_1.jsx)("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && (0, jsx_runtime_1.jsx)("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && (0, viem_1.isAddress)(recipientAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSelectValidatedAddress, className: "flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), (0, jsx_runtime_1.jsxs)("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), (0, jsx_runtime_1.jsx)("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => ((0, jsx_runtime_1.jsx)(RecentAddressItem, { address: recent.address, onClick: () => {
+                                                // Just fill the input and show validation - don't auto-proceed
+                                                handleRecipientAddressChange(recent.address);
+                                            } }, index))) })] }))] })), step === "token" && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col p-5", children: isLoadingBalance ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-xl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: simBalance.balances.map(token => ((0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {
+                                        setSelectedToken(token);
+                                        setStep("amount");
+                                    }, 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: anyspend_1.ALL_CHAINS[token.chain_id]?.logoUrl ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[token.chain_id].logoUrl, tokenUrl: token.token_metadata?.logo, className: "size-10" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-react-foreground size-10" })) }), (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 transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: token.symbol }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: token.name })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: (0, number_1.formatTokenAmount)(BigInt(token.amount), token.decimals) }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: (0, number_1.formatDisplayNumber)(token.value_usd, { style: "currency", fractionDigits: 2 }) })] })] }, token.chain_id + "_" + token.address))) }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-foreground-muted mb-4 h-8 w-8" }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "No tokens available" })] })) })), step === "amount" && selectedToken && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-xl border border-[#d1d1d6] bg-[#fafafa] p-3", 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", children: anyspend_1.ALL_CHAINS[selectedToken.chain_id]?.logoUrl ? ((0, jsx_runtime_1.jsx)(ChainTokenIcon_1.ChainTokenIcon, { chainUrl: anyspend_1.ALL_CHAINS[selectedToken.chain_id].logoUrl, tokenUrl: selectedToken.token_metadata?.logo, className: "size-10" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { className: "text-b3-react-foreground size-10" })) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-neue-montreal-semibold text-base text-[#18181b]", children: selectedToken.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: (0, number_1.formatTokenAmount)(BigInt(selectedToken.amount), selectedToken.decimals) })] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setStep("token"), className: "text-b3-primary-blue font-neue-montreal-semibold hover:text-b3-primary-blue/80 text-sm transition-colors", children: "Change" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "font-neue-montreal-medium placeholder:text-b3-foreground-muted w-full rounded-lg border border-[#d1d1d6] bg-white px-3 py-2 text-base text-[#18181b] outline-none focus:border-[#0c68e9]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: isSending, value: sendAmount, allowNegative: false, onValueChange: values => setSendAmount(values.value) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-2", children: [25, 50, 75, 100].map(percentage => ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", onClick: () => handlePercentageClick(percentage), className: "font-neue-montreal-medium border-[#d1d1d6] text-sm text-[#18181b] hover:bg-[#fafafa]", disabled: isSending, children: [percentage, "%"] }, percentage))) }), (0, jsx_runtime_1.jsxs)("div", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: ["Available: ", (0, number_1.formatTokenAmount)(BigInt(selectedToken.amount), selectedToken.decimals), " ", selectedToken.symbol] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setStep("confirm"), disabled: !sendAmount || parseFloat(sendAmount) <= 0, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold disabled:bg-b3-line disabled:text-b3-foreground-muted h-12 w-full rounded-xl text-white", children: "Continue" })] })), step === "confirm" && selectedToken && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-h-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4 px-5 pb-0 pt-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#d5e5fd]", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "h-7 w-7 text-[#0c68e9]" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[30px] leading-[38px] text-[#18181b]", children: sendAmount }), (0, jsx_runtime_1.jsx)("span", { className: "font-neue-montreal-semibold text-[30px] leading-[38px] text-[#70707b]", children: selectedToken.symbol })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-5" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 px-5", children: (0, jsx_runtime_1.jsx)("div", { className: "rounded-xl border border-[#e4e4e7] bg-[#fafafa] p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-[#e4e4e7] pb-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "To" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-inter text-sm font-normal leading-5 text-[#18181b]", children: ["Wallet (", recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), ")"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-[#e4e4e7] pb-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "Network" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: anyspend_1.ALL_CHAINS[selectedToken.chain_id]?.name || "Unknown" }), anyspend_1.ALL_CHAINS[selectedToken.chain_id]?.logoUrl && ((0, jsx_runtime_1.jsx)("img", { src: anyspend_1.ALL_CHAINS[selectedToken.chain_id].logoUrl, alt: anyspend_1.ALL_CHAINS[selectedToken.chain_id]?.name, className: "h-4 w-4 rounded-full" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "Network fee" }), (0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-normal leading-5 text-[#18181b]", children: "$0.1" })] })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 border-t border-[#e4e4e7] bg-[#fafafa] p-4", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleBack, disabled: isSending, variant: "outline", className: "font-inter h-12 flex-1 rounded-xl border border-[#e4e4e7] bg-white text-base font-semibold text-[#3f3f46] 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-[#fafafa]", children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleSend, disabled: isSending, className: "font-inter border-white/12 h-12 flex-1 rounded-xl border-2 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: isSending ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Sending..."] })) : ("Send") })] })] })), step === "success" && selectedToken && ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-6 p-5 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "h-7 w-7 text-green-600" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-neue-montreal-semibold mb-2 text-xl text-[#18181b]", children: "Sent!" }), (0, jsx_runtime_1.jsxs)("p", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: [sendAmount, " ", selectedToken.symbol, " was sent to ", recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4)] })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setB3ModalOpen(false), className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full rounded-xl text-white", children: "Done" })] }))] })] }));
+}

package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js

@@ -12,18 +12,18 @@ const utils_1 = require("../../../../shared/utils");
 const react_2 = require("@headlessui/react");
 const react_3 = require("react");
 const react_4 = require("thirdweb/react");
+const useAccountWallet_1 = require("../../hooks/useAccountWallet");
 const ManageAccountButton_1 = require("../custom/ManageAccountButton");
 function SignIn(props) {
     const { className } = props;
     const { automaticallySetFirstEoa, partnerId } = (0, react_1.useB3)();
-    const { wallet, address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = (0, react_1.useAccountWallet)();
+    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = (0, react_1.useAccountWallet)();
     const isMobile = (0, react_1.useIsMobile)();
     const { logout } = (0, react_1.useAuthentication)(partnerId);
     const onDisconnect = async () => {
         await logout();
     };
     const connectedWallets = (0, react_4.useConnectedWallets)();
-    const { data: walletInfo } = (0, react_4.useWalletInfo)(isActiveSmartWallet ? connectedSmartWallet?.id : connectedEOAWallet?.id);
     const setActiveWallet = (0, react_4.useSetActiveWallet)();
     const handleSetActiveAccount = (selectedWalletId) => {
         if (!selectedWalletId ||
@@ -40,10 +40,11 @@ function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
     // Desktop version - original dropdown menu
-    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3", children: [!!wallet.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: wallet.meta.icon, alt: wallet.meta.icon, className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0", modal: false, 
+    return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) }), (0, jsx_runtime_1.jsx)("div", { children: walletInfo?.name })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
                                             : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "grow pl-4", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) }), (0, jsx_runtime_1.jsx)("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] }))), (0, jsx_runtime_1.jsx)("div", { className: "ml-3", children: (0, jsx_runtime_1.jsx)(ManageAccountButton_1.ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), (0, jsx_runtime_1.jsx)("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -176,7 +176,7 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         return ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
     if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-        return ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "mt-8 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
+        return ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
     }
     if (step === "login") {
         // Custom strategy

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

@@ -0,0 +1,15 @@
+import type { ToastItem } from "./ToastContext";
+interface ToastProps {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    theme?: "light" | "dark";
+}
+export declare function Toast({ toast, onDismiss, theme }: ToastProps): import("react/jsx-runtime").JSX.Element;
+interface ToastContainerProps {
+    toasts: ToastItem[];
+    onDismiss: (id: string) => void;
+    theme?: "light" | "dark";
+    className?: string;
+}
+export declare function ToastContainer({ toasts, onDismiss, theme, className }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/global-account/react/components/Toast/ToastComponents.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = Toast;
+exports.ToastContainer = ToastContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../../shared/utils/cn");
+const framer_motion_1 = require("framer-motion");
+const getToastIcon = (type) => {
+    switch (type) {
+        case "success":
+            return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M16.6666 5L7.49998 14.1667L3.33331 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "error":
+            return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "info":
+            return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M10 13.3333V10M10 6.66667H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "warning":
+            return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M10 6.66667V10M10 13.3333H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+};
+const getToastStyles = (type, theme = "light") => {
+    const isDark = theme === "dark";
+    const baseStyles = "flex items-start gap-3 p-4 rounded-xl border shadow-sm";
+    switch (type) {
+        case "success":
+            return (0, cn_1.cn)(baseStyles, isDark ? "bg-green-950/50 border-green-800/50 text-green-100" : "bg-green-50 border-green-200 text-green-900");
+        case "error":
+            return (0, cn_1.cn)(baseStyles, isDark ? "bg-red-950/50 border-red-800/50 text-red-100" : "bg-red-50 border-red-200 text-red-900");
+        case "info":
+            return (0, cn_1.cn)(baseStyles, isDark ? "bg-blue-950/50 border-blue-800/50 text-blue-100" : "bg-blue-50 border-blue-200 text-blue-900");
+        case "warning":
+            return (0, cn_1.cn)(baseStyles, isDark
+                ? "bg-yellow-950/50 border-yellow-800/50 text-yellow-100"
+                : "bg-yellow-50 border-yellow-200 text-yellow-900");
+    }
+};
+const getIconColorClass = (type, theme = "light") => {
+    const isDark = theme === "dark";
+    switch (type) {
+        case "success":
+            return isDark ? "text-green-400" : "text-green-600";
+        case "error":
+            return isDark ? "text-red-400" : "text-red-600";
+        case "info":
+            return isDark ? "text-blue-400" : "text-blue-600";
+        case "warning":
+            return isDark ? "text-yellow-400" : "text-yellow-600";
+    }
+};
+function Toast({ toast, onDismiss, theme = "light" }) {
+    return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -20, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2 }, className: getToastStyles(toast.type, theme), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mt-0.5 shrink-0", getIconColorClass(toast.type, theme)), children: getToastIcon(toast.type) }), (0, jsx_runtime_1.jsx)("p", { className: "font-inter flex-1 text-sm font-medium", children: toast.message }), (0, jsx_runtime_1.jsx)("button", { onClick: () => onDismiss(toast.id), className: (0, cn_1.cn)("shrink-0 transition-opacity hover:opacity-70", theme === "dark" ? "text-gray-400" : "text-gray-500"), children: (0, jsx_runtime_1.jsx)("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: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
+}
+function ToastContainer({ toasts, onDismiss, theme = "light", className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-full space-y-2", className), children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "popLayout", children: toasts.map(toast => ((0, jsx_runtime_1.jsx)(Toast, { toast: toast, onDismiss: onDismiss, theme: theme }, toast.id))) }) }));
+}

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

@@ -0,0 +1,19 @@
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface ToastItem {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+    createdAt: number;
+}
+interface ToastContextType {
+    toasts: ToastItem[];
+    addToast: (type: ToastType, message: string, duration?: number) => string;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToastContext(): ToastContextType;
+export {};

package/dist/cjs/global-account/react/components/Toast/ToastContext.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastProvider = ToastProvider;
+exports.useToastContext = useToastContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ToastContext = (0, react_1.createContext)(undefined);
+let globalToastCounter = 0;
+function ToastProvider({ children }) {
+    const [toasts, setToasts] = (0, react_1.useState)([]);
+    const timeoutsRef = (0, react_1.useRef)(new Map());
+    const removeToast = (0, react_1.useCallback)((id) => {
+        setToasts(prev => prev.filter(toast => toast.id !== id));
+        const timeout = timeoutsRef.current.get(id);
+        if (timeout) {
+            clearTimeout(timeout);
+            timeoutsRef.current.delete(id);
+        }
+    }, []);
+    const addToast = (0, react_1.useCallback)((type, message, duration = 4000) => {
+        const id = `toast-${Date.now()}-${globalToastCounter++}`;
+        const newToast = {
+            id,
+            type,
+            message,
+            duration,
+            createdAt: Date.now(),
+        };
+        setToasts(prev => [...prev, newToast]);
+        if (duration > 0) {
+            const timeout = setTimeout(() => {
+                removeToast(id);
+            }, duration);
+            timeoutsRef.current.set(id, timeout);
+        }
+        return id;
+    }, [removeToast]);
+    const clearAll = (0, react_1.useCallback)(() => {
+        timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+        timeoutsRef.current.clear();
+        setToasts([]);
+    }, []);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        const timeouts = timeoutsRef.current;
+        return () => {
+            timeouts.forEach(timeout => clearTimeout(timeout));
+            timeouts.clear();
+        };
+    }, []);
+    return (0, jsx_runtime_1.jsx)(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll }, children: children });
+}
+function useToastContext() {
+    const context = (0, react_1.useContext)(ToastContext);
+    if (!context) {
+        throw new Error("useToastContext must be used within ToastProvider");
+    }
+    return context;
+}

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

@@ -0,0 +1,4 @@
+export { setToastContext, toast } from "./toastApi";
+export { Toast, ToastContainer } from "./ToastComponents";
+export { ToastProvider, useToastContext } from "./ToastContext";
+export type { ToastItem, ToastType } from "./ToastContext";

package/dist/cjs/global-account/react/components/Toast/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastContext = exports.ToastProvider = exports.ToastContainer = exports.Toast = exports.toast = exports.setToastContext = void 0;
+var toastApi_1 = require("./toastApi");
+Object.defineProperty(exports, "setToastContext", { enumerable: true, get: function () { return toastApi_1.setToastContext; } });
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return toastApi_1.toast; } });
+var ToastComponents_1 = require("./ToastComponents");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return ToastComponents_1.Toast; } });
+Object.defineProperty(exports, "ToastContainer", { enumerable: true, get: function () { return ToastComponents_1.ToastContainer; } });
+var ToastContext_1 = require("./ToastContext");
+Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return ToastContext_1.ToastProvider; } });
+Object.defineProperty(exports, "useToastContext", { enumerable: true, get: function () { return ToastContext_1.useToastContext; } });

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

@@ -0,0 +1,21 @@
+import { ToastType } from "./ToastContext";
+export declare function setToastContext(context: {
+    addToast: (type: ToastType, message: string, duration?: number) => string;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}): void;
+export declare const toast: {
+    success: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    error: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    info: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    warning: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    dismiss: (toastId?: string) => void;
+};