@ab-org/predicate-market-sdk 0.0.1

package/dist/ui/DepositModal.js

@@ -0,0 +1,326 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { ModalFrame } from "./components/ModalFrame.js";
+import { StepIndicator } from "./components/StepIndicator.js";
+import { DropdownField } from "./components/DropdownField.js";
+import { Countdown } from "./components/Countdown.js";
+import { DepositDetailsPanel } from "./components/DepositDetailsPanel.js";
+import { LoginRequiredOverlay } from "./components/LoginRequiredOverlay.js";
+import { useSession } from "./hooks/useSession.js";
+import { colors, fonts, radii } from "./theme.js";
+import { getChains, quote, } from "../modules/api.js";
+/** 校验是否为合法的充值地址（传入值）：非空且长度满足常见链地址格式 */
+function isValidDepositAddress(v) {
+    return typeof v === "string" && v.trim().length >= 20;
+}
+/* ─── Icons ──────────────────────────────────── */
+const BackArrow = () => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M15 6L9 12L15 18", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const TransferIcon = () => (_jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [_jsx("circle", { cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.08)" }), _jsx("circle", { cx: "18", cy: "18", r: "7", stroke: colors.textPrimary, strokeWidth: "1.5" }), _jsx("circle", { cx: "18", cy: "18", r: "2.5", fill: colors.textPrimary }), _jsx("path", { d: "M18 7V11", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M18 25V29", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M7 18H11", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M25 18H29", stroke: colors.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" })] }));
+const FiatIcon = () => (_jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [_jsx("circle", { cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.06)" }), _jsx("circle", { cx: "18", cy: "18", r: "10", stroke: colors.textSecondary, strokeWidth: "1.5" }), _jsx("path", { d: "M18 12V24", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M15 15.5C15 14.12 16.34 13 18 13C19.66 13 21 14.12 21 15.5C21 16.88 19.66 18 18 18C16.34 18 15 19.12 15 20.5C15 21.88 16.34 23 18 23C19.66 23 21 21.88 21 20.5", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round" })] }));
+const DefaultCryptoIcons = () => {
+    const tokens = [
+        { label: "B", bg: "#F7931A" },
+        { label: "E", bg: "#627EEA" },
+        { label: "≡", bg: "#26A17B" },
+        { label: "$", bg: "#2775CA" },
+        { label: "S", bg: "#9945FF" },
+        { label: "A", bg: "#E84142" },
+    ];
+    return (_jsx("div", { style: { display: "flex", gap: 0 }, children: tokens.map((t, i) => (_jsx("div", { style: {
+                width: 24,
+                height: 24,
+                borderRadius: "50%",
+                background: t.bg,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 11,
+                fontWeight: 700,
+                color: "#fff",
+                marginLeft: i > 0 ? -4 : 0,
+                border: `2px solid ${colors.card}`,
+                boxSizing: "content-box",
+            }, children: t.label }, i))) }));
+};
+/* ─── Helpers: derive options from getChains ─── */
+/** Deposit 时不可选 USD1（充值是转入 USD1，源代币为 USDT/USDC 等） */
+const DEPOSIT_EXCLUDED_TOKEN = "USD1";
+function chainsToTokenOptions(chains) {
+    const bySymbol = new Map();
+    for (const c of chains) {
+        for (const t of c.tokens) {
+            if (!bySymbol.has(t.symbol))
+                bySymbol.set(t.symbol, { symbol: t.symbol, decimals: t.decimals });
+        }
+    }
+    return Array.from(bySymbol.entries())
+        .filter(([id]) => id !== DEPOSIT_EXCLUDED_TOKEN)
+        .map(([id, { symbol }]) => ({
+        id,
+        label: symbol,
+        subtitle: symbol,
+    }));
+}
+function chainsToChainOptionsForToken(chains, tokenSymbol) {
+    return chains
+        .filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol))
+        .map((c) => ({
+        id: c.chain_id,
+        label: c.network,
+        subtitle: `chainId: ${c.chain_id}`,
+        icon: (_jsx("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 28,
+                height: 28,
+                padding: "0 6px",
+                borderRadius: radii.card,
+                background: "rgba(255,255,255,0.08)",
+                fontSize: 12,
+                fontWeight: 600,
+                color: colors.textPrimary,
+                fontFamily: fonts.family,
+            }, children: c.network })),
+    }));
+}
+function getTokenAddressForChain(chains, chainId, tokenSymbol) {
+    const chain = chains.find((c) => c.chain_id === chainId);
+    return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
+}
+export const DepositModal = ({ token, chain, tokenOptions: tokenOptionsProp, chainOptions: chainOptionsProp, depositAddress, minimumDeposit, qrCenterIcon, cryptoIcons, depositAmount, onShowToast, txHash, explorerTxUrl, onTokenSelect, onChainSelect, onCopyAddress, onBuyCrypto, onSignIn, onBack, onClose, }) => {
+    const session = useSession();
+    const [view, setView] = useState("entry");
+    const [copySuccessMessage, setCopySuccessMessage] = useState(null);
+    const [apiChains, setApiChains] = useState(null);
+    const [apiQuote, setApiQuote] = useState(null);
+    const [loadingChains, setLoadingChains] = useState(false);
+    const [loadingQuote, setLoadingQuote] = useState(false);
+    const [quoteRefreshKey, setQuoteRefreshKey] = useState(0);
+    const tokenOptions = useMemo(() => {
+        const excludeUsd1 = (opts) => opts.filter((o) => o.id !== DEPOSIT_EXCLUDED_TOKEN && o.label !== DEPOSIT_EXCLUDED_TOKEN);
+        if (tokenOptionsProp?.length)
+            return excludeUsd1(tokenOptionsProp);
+        if (!apiChains?.length)
+            return undefined;
+        return chainsToTokenOptions(apiChains);
+    }, [tokenOptionsProp, apiChains]);
+    const chainOptions = useMemo(() => {
+        if (chainOptionsProp?.length)
+            return chainOptionsProp;
+        if (!apiChains?.length || !token)
+            return undefined;
+        return chainsToChainOptionsForToken(apiChains, token);
+    }, [chainOptionsProp, apiChains, token]);
+    // 当前选中的是 USD1 时自动切到第一个可选 token（deposit 不允许选 USD1）
+    useEffect(() => {
+        if (token !== DEPOSIT_EXCLUDED_TOKEN || !tokenOptions?.length || !onTokenSelect)
+            return;
+        onTokenSelect(tokenOptions[0].id);
+    }, [token, tokenOptions, onTokenSelect]);
+    // 仅有一个 chain 选项时默认选中
+    useEffect(() => {
+        if (chainOptions?.length !== 1 || !onChainSelect)
+            return;
+        const onlyId = chainOptions[0].id;
+        if (chain === onlyId)
+            return;
+        onChainSelect(onlyId);
+    }, [chainOptions, chain, onChainSelect]);
+    useEffect(() => {
+        if (view !== "transfer")
+            return;
+        setLoadingChains(true);
+        getChains()
+            .then((res) => setApiChains(res?.chains ?? {}))
+            .finally(() => setLoadingChains(false));
+    }, [view]);
+    useEffect(() => {
+        if (!apiChains?.length || !token || !chain) {
+            setApiQuote(null);
+            return;
+        }
+        const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
+        if (!tokenAddress) {
+            setApiQuote(null);
+            return;
+        }
+        setLoadingQuote(true);
+        console.log('setLoadingQuote', tokenAddress, depositAmount);
+        quote({
+            direction: "deposit",
+            chain_id: chain,
+            token_address: tokenAddress,
+            token_amount: depositAmount || undefined,
+        })
+            .then((q) => setApiQuote(q ?? null))
+            .catch((err) => {
+            const message = err?.message ?? String(err);
+            console.error('setLoadingQuote', message);
+            if (onShowToast)
+                onShowToast(message);
+            setApiQuote({
+                token_address: tokenAddress,
+                token_symbol: token,
+                token_decimals: 18,
+                rate: "1",
+                chain_id: Number(chain) || 56,
+                deposit_address: "0x" + "0".repeat(39) + "1",
+                usd1_amount: depositAmount ?? "0",
+                expires_at: new Date(Date.now() + 60000).toISOString(),
+            });
+        })
+            .finally(() => setLoadingQuote(false));
+    }, [apiChains, token, chain, depositAmount, quoteRefreshKey, onShowToast]);
+    const handleQuoteExpired = useCallback(() => {
+        setQuoteRefreshKey((k) => k + 1);
+    }, []);
+    useEffect(() => {
+        if (txHash && chain && onShowToast) {
+            onShowToast("Transfer confirmed");
+        }
+    }, [txHash, chain, onShowToast]);
+    if (!session) {
+        return _jsx(LoginRequiredOverlay, { title: "Deposit", onSignIn: onSignIn, onClose: onClose });
+    }
+    const goToEntry = () => {
+        setView("entry");
+        onBack?.();
+    };
+    const handleCopyAddress = useCallback(() => {
+        onCopyAddress?.();
+        onShowToast?.("Address copied");
+        setCopySuccessMessage("Address copied");
+    }, [onCopyAddress, onShowToast]);
+    useEffect(() => {
+        if (!copySuccessMessage)
+            return;
+        const t = setTimeout(() => setCopySuccessMessage(null), 2000);
+        return () => clearTimeout(t);
+    }, [copySuccessMessage]);
+    return (_jsxs(ModalFrame, { onClose: onClose, contentStyle: { padding: "24px", position: "relative" }, children: [copySuccessMessage && (_jsx("div", { style: {
+                    position: "absolute",
+                    bottom: 24,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    padding: "10px 20px",
+                    borderRadius: 8,
+                    background: "var(--pm-colors-card, #1a1a2e)",
+                    color: "var(--pm-colors-textPrimary, #fff)",
+                    fontSize: 13,
+                    fontWeight: 500,
+                    boxShadow: "0 4px 12px rgba(0,0,0,.25)",
+                    zIndex: 10,
+                }, children: copySuccessMessage })), view === "entry" ? (_jsx(EntryView, { cryptoIcons: cryptoIcons, onTransferCrypto: () => setView("transfer"), onBuyCrypto: onBuyCrypto })) : (_jsx(TransferView, { token: token, chain: chain, tokenOptions: tokenOptions, chainOptions: chainOptions, depositAddress: depositAddress, minimumDeposit: minimumDeposit, qrCenterIcon: qrCenterIcon, quote: apiQuote, quoteLoading: loadingQuote, txHash: txHash, chainIdForExplorer: chain, explorerTxUrl: explorerTxUrl, loadingChains: loadingChains, onTokenSelect: onTokenSelect, onChainSelect: onChainSelect, onCopyAddress: handleCopyAddress, onQuoteExpired: handleQuoteExpired, onRefreshQuote: () => {
+                    if (!apiChains?.length || !token || !chain)
+                        return;
+                    const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
+                    if (tokenAddress) {
+                        setLoadingQuote(true);
+                        quote({ direction: "deposit", chain_id: chain, token_address: tokenAddress, token_amount: depositAmount })
+                            .then((q) => setApiQuote(q ?? null))
+                            .catch(() => {
+                            setApiQuote({
+                                token_address: tokenAddress,
+                                token_symbol: token,
+                                token_decimals: 18,
+                                rate: "1",
+                                chain_id: Number(chain) || 56,
+                                deposit_address: "0x" + "0".repeat(39) + "1",
+                                usd1_amount: depositAmount ?? "0",
+                                expires_at: new Date(Date.now() + 60000).toISOString(),
+                            });
+                        })
+                            .finally(() => setLoadingQuote(false));
+                    }
+                }, onShowToast: onShowToast, onBack: goToEntry }))] }));
+};
+/* ─── Entry View ─────────────────────────────── */
+const EntryView = ({ cryptoIcons, onTransferCrypto, onBuyCrypto: _onBuyCrypto, }) => (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [_jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Deposit" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsxs("button", { type: "button", onClick: onTransferCrypto, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 14,
+                        padding: "18px 20px",
+                        borderRadius: radii.card,
+                        border: `1px solid ${colors.border}`,
+                        background: "transparent",
+                        cursor: "pointer",
+                        textAlign: "left",
+                        fontFamily: fonts.family,
+                        width: "100%",
+                        transition: "border-color .15s",
+                    }, onMouseEnter: (e) => { e.target.closest("button").style.borderColor = colors.borderStrong; }, onMouseLeave: (e) => { e.target.closest("button").style.borderColor = colors.border; }, children: [_jsx(TransferIcon, {}), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx("span", { style: { color: colors.textPrimary, fontSize: 16, fontWeight: 600 }, children: "Transfer Crypto" }), _jsx("span", { style: { color: colors.textSecondary, fontSize: 13 }, children: "No limit \u00B7 Instant" })] }), cryptoIcons ?? _jsx(DefaultCryptoIcons, {})] }), _jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 14,
+                        padding: "18px 20px",
+                        borderRadius: radii.card,
+                        border: `1px solid ${colors.border}`,
+                        opacity: 0.55,
+                    }, children: [_jsx(FiatIcon, {}), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx("span", { style: { color: colors.textSecondary, fontSize: 16, fontWeight: 600 }, children: "Buy Crypto" }), _jsx("span", { style: { color: colors.textSecondary, fontSize: 13 }, children: "Debit card, credit card, ACH" })] }), _jsx("span", { style: {
+                                padding: "5px 12px",
+                                borderRadius: radii.pill,
+                                border: `1px solid ${colors.border}`,
+                                fontSize: 12,
+                                fontWeight: 500,
+                                color: colors.textSecondary,
+                                whiteSpace: "nowrap",
+                            }, children: "Coming Soon" })] })] })] }));
+/* ─── Transfer View (stepper) ────────────────── */
+const TransferView = ({ token, chain, tokenOptions, chainOptions, depositAddress, minimumDeposit, qrCenterIcon, quote: quoteData, quoteLoading, txHash, chainIdForExplorer, explorerTxUrl, loadingChains, onTokenSelect, onChainSelect, onCopyAddress, onQuoteExpired, onRefreshQuote, onShowToast, onBack, }) => {
+    const activeStep = chain ? 2 : token ? 1 : 0;
+    const stepActive = [!!token, !!chain, !!quoteData];
+    const quoteExpired = useMemo(() => {
+        if (!quoteData?.expires_at)
+            return false;
+        try {
+            return new Date(quoteData.expires_at).getTime() < Date.now();
+        }
+        catch {
+            return false;
+        }
+    }, [quoteData?.expires_at]);
+    const didToastWait = useRef(false);
+    useEffect(() => {
+        if (!depositAddress || !onShowToast || didToastWait.current)
+            return;
+        didToastWait.current = true;
+        onShowToast("Please wait for deposit-address balance to update");
+    }, [depositAddress, onShowToast]);
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [onBack && (_jsx("button", { type: "button", onClick: onBack, style: {
+                                background: "transparent",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: 0,
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: _jsx(BackArrow, {}) })), _jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Transfer Crypto" })] }) }), _jsxs("div", { style: { display: "flex", gap: 16, position: "relative" }, children: [_jsx(StepIndicator, { steps: 3, stepActive: stepActive, activeStep: activeStep }), _jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 40 }, children: [_jsx(DropdownField, { label: "Select token", placeholder: loadingChains ? "Loading…" : "Token", value: token, options: tokenOptions, onSelect: onTokenSelect }), _jsx(DropdownField, { label: "Select chain", placeholder: loadingChains ? "Loading…" : "Chain", value: chain, options: chainOptions, onSelect: onChainSelect }), quoteData && token && chain && (_jsx("div", { id: "quote-panel", style: {
+                                    padding: "12px 16px",
+                                    borderRadius: radii.card,
+                                    margin: "-10px 0",
+                                    border: `1px solid ${colors.border}`,
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: 8,
+                                }, children: quoteLoading ? (_jsx("span", { style: { fontSize: 13, color: colors.textSecondary }, children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [_jsxs("span", { style: { fontSize: 13, color: colors.textSecondary }, children: ["1 ", quoteData.token_symbol, " = ", quoteData.rate, " USD1"] }), quoteData.expires_at && (_jsx(Countdown, { expiresAt: quoteData.expires_at, isExpired: quoteExpired, onExpired: onQuoteExpired })), quoteExpired && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }), onRefreshQuote && (_jsx("button", { type: "button", onClick: onRefreshQuote, style: {
+                                                        padding: "4px 12px",
+                                                        fontSize: 12,
+                                                        borderRadius: radii.pill,
+                                                        border: `1px solid ${colors.border}`,
+                                                        background: "transparent",
+                                                        color: colors.textPrimary,
+                                                        cursor: "pointer",
+                                                        fontFamily: fonts.family,
+                                                    }, children: "Refresh" }))] }))] })) })), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: "-5px" }, id: "deposit-details", children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary }, children: "Deposit details" }), depositAddress ? (_jsxs(_Fragment, { children: [_jsx(DepositDetailsPanel, { address: depositAddress, tokenIcon: qrCenterIcon, minimumDeposit: minimumDeposit, onCopyAddress: onCopyAddress }), txHash && chainIdForExplorer && explorerTxUrl && (_jsx("a", { href: explorerTxUrl(chainIdForExplorer, txHash), target: "_blank", rel: "noopener noreferrer", style: {
+                                                    fontSize: 13,
+                                                    color: colors.textPrimary,
+                                                    textDecoration: "underline",
+                                                }, children: "View on explorer" }))] })) : (_jsx("div", { style: {
+                                            padding: "20px",
+                                            borderRadius: radii.card,
+                                            border: `1px solid ${colors.border}`,
+                                            color: colors.textSecondary,
+                                            fontSize: 13,
+                                            textAlign: "center",
+                                        }, children: "Select token and chain to view deposit details" }))] })] })] })] }));
+};

package/dist/ui/SignInModal.d.ts

@@ -0,0 +1,22 @@
+import { type CubeSignerSession, type WalletSession } from "@ab-org/sdk-core";
+import type { GoogleCredential } from "../auth/google.js";
+import type { TwitterAuthResult } from "../auth/twitter.js";
+import type { SocialProvider, WalletItem } from "./signInTypes.js";
+export interface SignInModalProps {
+    title?: string;
+    socialProviders?: SocialProvider[];
+    wallets?: WalletItem[];
+    initialVisibleCount?: number;
+    privacyPolicyUrl?: string;
+    termsOfUseUrl?: string;
+    onGoogleLogin?: (credential: GoogleCredential) => void;
+    onTwitterLogin?: (result: TwitterAuthResult) => void;
+    onCubeSignerSession?: (session: CubeSignerSession) => void;
+    onWalletConnected?: (session: WalletSession, walletId: string) => void;
+    onSocialLogin?: (providerId: string) => void;
+    onWalletSelect?: (walletId: string) => void | Promise<void>;
+    onDismiss?: () => void;
+    onSuccess?: (session: WalletSession) => void;
+}
+export declare function clearSocialAccountInstance(): void;
+export declare const SignInModal: ({ title, socialProviders, wallets, initialVisibleCount, privacyPolicyUrl, termsOfUseUrl, onGoogleLogin, onTwitterLogin, onCubeSignerSession, onWalletConnected, onSocialLogin, onWalletSelect, onDismiss, onSuccess, }: SignInModalProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/SignInModal.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { sessionStore } from "@ab-org/sdk-core";
+import { getSDKConfig } from "../auth/config.js";
+import { resolveSocialProviders } from "./SignInModal.shared.js";
+import { SignInModalFooter, SignInModalFrame, SignInModalSocialSection, SignInModalWalletGrid, } from "./SignInModal.sections.js";
+import { useSignInModalController } from "./useSignInModalController.js";
+import { Toast } from "./components/Toast.js";
+export function clearSocialAccountInstance() {
+    try {
+        const storage = typeof localStorage !== "undefined" ? localStorage : null;
+        const adapterId = storage?.getItem("ab:wallet:adapterId");
+        const session = sessionStore.getState().session;
+        const isSocialSession = session?.walletType === "social" ||
+            session?.authSource === "google" ||
+            session?.authSource === "twitter" ||
+            adapterId === "cubist";
+        if (!isSocialSession)
+            return;
+        sessionStore.clearSession();
+        storage?.removeItem("ab:wallet:session");
+        storage?.removeItem("ab:wallet:adapterId");
+    }
+    catch {
+        sessionStore.clearSession();
+    }
+}
+export const SignInModal = ({ title = "Welcome to PredicateMarket", socialProviders, wallets, initialVisibleCount, privacyPolicyUrl = "#", termsOfUseUrl = "#", onGoogleLogin, onTwitterLogin, onCubeSignerSession, onWalletConnected, onSocialLogin, onWalletSelect, onDismiss, onSuccess, }) => {
+    const sdkConfig = getSDKConfig();
+    const effectiveSocialProviders = resolveSocialProviders(socialProviders ?? sdkConfig.signIn?.socialProviders);
+    const effectiveWallets = wallets ?? sdkConfig.signIn?.wallets;
+    const effectiveInitialVisibleCount = initialVisibleCount ?? sdkConfig.signIn?.initialVisibleCount ?? 5;
+    const [toastError, setToastError] = useState(null);
+    const { expanded, loadingProvider, loadingWalletId, visibleWallets, showExpandToggle, isBusy, handleSocialClick, handleWalletClick, toggleExpanded, } = useSignInModalController({
+        wallets: effectiveWallets,
+        initialVisibleCount: effectiveInitialVisibleCount,
+        onGoogleLogin,
+        onTwitterLogin,
+        onCubeSignerSession,
+        onWalletConnected,
+        onSocialLogin,
+        onWalletSelect,
+    });
+    return (_jsxs(SignInModalFrame, { id: "SignInModalFrame", title: title, onClose: onDismiss, footer: _jsx(SignInModalFooter, { privacyPolicyUrl: privacyPolicyUrl, termsOfUseUrl: termsOfUseUrl }), children: [toastError ? (_jsx(Toast, { message: toastError, variant: "error", duration: 5000, onClose: () => setToastError(null) })) : null, _jsx(SignInModalSocialSection, { id: "SignInModalSocialSection", socialProviders: effectiveSocialProviders, isBusy: isBusy, loadingProvider: loadingProvider, onSocialClick: async (providerId) => {
+                    try {
+                        const session = await handleSocialClick(providerId);
+                        if (!session)
+                            return;
+                        const normalizedAuthSource = providerId === "x"
+                            ? "twitter"
+                            : providerId;
+                        onSuccess?.({
+                            ...session,
+                            walletType: session.walletType ?? "social",
+                            authSource: session.authSource ?? normalizedAuthSource,
+                        });
+                    }
+                    catch (error) {
+                        const msg = error instanceof Error ? error.message : "Social login failed";
+                        setToastError(msg);
+                    }
+                } }), _jsx(SignInModalWalletGrid, { wallets: visibleWallets, isBusy: isBusy, loadingWalletId: loadingWalletId, expanded: expanded, showExpandToggle: showExpandToggle, onWalletClick: async (walletId) => {
+                    try {
+                        const session = await handleWalletClick(walletId);
+                        if (session) {
+                            onSuccess?.(session);
+                        }
+                    }
+                    catch (error) {
+                        const msg = error instanceof Error ? error.message : "Wallet connect failed";
+                        setToastError(msg);
+                    }
+                }, onToggleExpanded: toggleExpanded })] }));
+};

package/dist/ui/SignInModal.sections.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import type { SocialProvider, WalletItem } from "./signInTypes.js";
+export interface SignInModalSocialSectionProps {
+    id: string;
+    socialProviders: SocialProvider[];
+    isBusy: boolean;
+    loadingProvider: string | null;
+    onSocialClick: (providerId: string) => void | Promise<void>;
+}
+export interface SignInModalFrameProps {
+    id: string;
+    title: string;
+    onClose?: () => void;
+    footer?: ReactNode;
+    children: ReactNode;
+}
+export declare const SignInModalFrame: ({ id, title, onClose, footer, children, }: SignInModalFrameProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SignInModalSocialSection: ({ id, socialProviders, isBusy, loadingProvider, onSocialClick, }: SignInModalSocialSectionProps) => import("react/jsx-runtime.js").JSX.Element;
+export interface SignInModalWalletGridProps {
+    wallets: WalletItem[];
+    isBusy: boolean;
+    loadingWalletId: string | null;
+    expanded: boolean;
+    showExpandToggle: boolean;
+    onWalletClick: (walletId: string) => void | Promise<void>;
+    onToggleExpanded: () => void;
+}
+export declare const SignInModalWalletGrid: ({ wallets, isBusy, loadingWalletId, expanded, showExpandToggle, onWalletClick, onToggleExpanded, }: SignInModalWalletGridProps) => import("react/jsx-runtime.js").JSX.Element;
+export interface SignInModalFooterProps {
+    privacyPolicyUrl: string;
+    termsOfUseUrl: string;
+}
+export declare const SignInModalFooter: ({ privacyPolicyUrl, termsOfUseUrl, }: SignInModalFooterProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/SignInModal.sections.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalFrame } from "./components/ModalFrame.js";
+import { colors, fonts, radii } from "./theme.js";
+import { DefaultWalletIcon, ExpandIcon, SpinnerIcon } from "./SignInModal.shared.js";
+export const SignInModalFrame = ({ id, title, onClose, footer, children, }) => (_jsx(ModalFrame, { onClose: onClose, cardStyle: { padding: "32px 24px" }, contentStyle: { alignItems: "center" }, children: _jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24, alignItems: "center" }, id: id, children: [_jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4, textAlign: "center" }, children: title }), _jsx("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 12, alignItems: "center" }, children: children }), footer] }) }));
+export const SignInModalSocialSection = ({ id, socialProviders, isBusy, loadingProvider, onSocialClick, }) => (_jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24 }, id: id, children: [_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: socialProviders.map((provider) => {
+                const isLoading = loadingProvider === provider.id;
+                return (_jsxs("button", { type: "button", disabled: isBusy, onClick: () => onSocialClick(provider.id), style: {
+                        width: "100%",
+                        height: 48,
+                        borderRadius: radii.pill,
+                        border: `1px solid ${colors.border}`,
+                        background: "transparent",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 12,
+                        cursor: isBusy ? "wait" : "pointer",
+                        padding: 12,
+                        boxSizing: "border-box",
+                        opacity: isLoading ? 0.6 : isBusy ? 0.8 : 1,
+                        transition: "opacity .15s",
+                    }, children: [isLoading ? _jsx(SpinnerIcon, {}) : provider.icon, _jsx("span", { style: { fontSize: 16, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family }, children: isLoading ? "Signing in..." : provider.label })] }, provider.id));
+            }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 20, width: "100%" }, children: [_jsx("div", { style: { flex: 1, height: 1, background: colors.border } }), _jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary, opacity: 0.4, whiteSpace: "nowrap" }, children: "Or connect a wallet" }), _jsx("div", { style: { flex: 1, height: 1, background: colors.border } })] })] }));
+export const SignInModalWalletGrid = ({ wallets, isBusy, loadingWalletId, expanded, showExpandToggle, onWalletClick, onToggleExpanded, }) => (_jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 8, alignItems: "center", paddingTop: 12 }, children: [_jsx("div", { style: { width: "100%", display: "flex", flexWrap: "wrap", gap: "14px 0" }, children: wallets.map((wallet) => (_jsxs("button", { type: "button", disabled: isBusy, onClick: () => onWalletClick(wallet.id), style: {
+                    width: "25%",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 4,
+                    background: "transparent",
+                    border: "none",
+                    cursor: isBusy ? "wait" : "pointer",
+                    padding: 0,
+                    opacity: loadingWalletId === wallet.id ? 0.7 : isBusy ? 0.85 : 1,
+                }, children: [_jsx("div", { style: { width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center" }, children: loadingWalletId === wallet.id ? (_jsx(SpinnerIcon, {})) : (wallet.icon ?? _jsx(DefaultWalletIcon, { walletId: wallet.id, name: wallet.name })) }), _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [_jsx("span", { style: { fontSize: 12, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family, textAlign: "center", whiteSpace: "nowrap" }, children: wallet.name }), loadingWalletId === wallet.id ? (_jsx("span", { style: { fontSize: 10, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family }, children: "Connecting..." })) : wallet.installed ? (_jsx("span", { style: { fontSize: 10, lineHeight: 1.4, color: colors.accent, fontFamily: fonts.family }, children: "Installed" })) : wallet.installUrl ? (_jsx("a", { href: wallet.installUrl, target: "_blank", rel: "noopener noreferrer", onClick: (event) => event.stopPropagation(), style: { fontSize: 10, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family, textDecoration: "underline" }, children: "Install" })) : null] })] }, wallet.id))) }), showExpandToggle && (_jsx("button", { type: "button", onClick: onToggleExpanded, style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 4,
+            }, children: _jsx(ExpandIcon, { expanded: expanded }) }))] }));
+export const SignInModalFooter = ({ privacyPolicyUrl, termsOfUseUrl, }) => (_jsx("div", { style: { padding: "12px 0", display: "flex", justifyContent: "center", width: "100%" }, children: _jsxs("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family, textAlign: "center" }, children: ["By continuing, I agree to the", " ", _jsx("a", { href: privacyPolicyUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), " ", "and", " ", _jsx("a", { href: termsOfUseUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Terms of Use" })] }) }));

package/dist/ui/SignInModal.shared.d.ts

@@ -0,0 +1,15 @@
+import type { InjectedWalletRegistryItem } from "@ab-org/sdk-core";
+import type { SocialProvider, WalletItem } from "./signInTypes.js";
+export declare const GoogleIcon: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const XIcon: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const ExpandIcon: ({ expanded }: {
+    expanded: boolean;
+}) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SpinnerIcon: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const defaultSocialProviders: SocialProvider[];
+export declare function resolveWalletItems(wallets: WalletItem[] | undefined, defaultWalletRegistry: InjectedWalletRegistryItem[]): WalletItem[];
+export declare function resolveSocialProviders(socialProviders: SocialProvider[] | undefined): SocialProvider[];
+export declare const DefaultWalletIcon: ({ walletId, name, }: {
+    walletId: string;
+    name: string;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/ui/SignInModal.shared.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors, fonts } from "./theme.js";
+export const GoogleIcon = () => (_jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", children: [_jsx("path", { d: "M20.3 10.73c0-.79-.07-1.54-.19-2.27H10.5v4.51h5.5a4.69 4.69 0 0 1-2.04 3.09v2.57h3.3c1.93-1.78 3.04-4.4 3.04-7.9Z", fill: "#4285F4" }), _jsx("path", { d: "M10.5 21c2.76 0 5.07-.91 6.76-2.47l-3.3-2.57c-.92.61-2.09.97-3.46.97-2.66 0-4.91-1.8-5.71-4.22H1.39v2.65A10.5 10.5 0 0 0 10.5 21Z", fill: "#34A853" }), _jsx("path", { d: "M4.79 12.71A6.3 6.3 0 0 1 4.46 10.5c0-.77.13-1.51.33-2.21V5.64H1.39A10.5 10.5 0 0 0 0 10.5c0 1.7.41 3.3 1.39 4.86l3.4-2.65Z", fill: "#FBBC05" }), _jsx("path", { d: "M10.5 4.07c1.5 0 2.84.51 3.9 1.52l2.92-2.92C15.56 1.02 13.26 0 10.5 0A10.5 10.5 0 0 0 1.39 5.64l3.4 2.65C5.59 5.87 7.84 4.07 10.5 4.07Z", fill: "#EA4335" })] }));
+export const XIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z", fill: "white" }) }));
+export const ExpandIcon = ({ expanded }) => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", style: { transform: expanded ? "rotate(180deg)" : undefined, transition: "transform 0.2s" }, children: [_jsx("path", { d: "M5 9L9 13L13 9", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M11 9L15 13L19 9", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const SpinnerIcon = () => (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: { animation: "spin 1s linear infinite" }, children: [_jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "rgba(255,255,255,0.2)", strokeWidth: "2.5" }), _jsx("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: colors.textPrimary, strokeWidth: "2.5", strokeLinecap: "round" }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })] }));
+export const defaultSocialProviders = [
+    { id: "google", label: "Continue with Google", icon: _jsx(GoogleIcon, {}) },
+    { id: "x", label: "Continue with X", icon: _jsx(XIcon, {}) },
+];
+export function resolveWalletItems(wallets, defaultWalletRegistry) {
+    const walletMap = new Map(defaultWalletRegistry.map((item) => [
+        item.id,
+        {
+            name: item.title,
+            installed: item.installed,
+            installUrl: item.installUrl,
+        },
+    ]));
+    if (wallets === undefined) {
+        return defaultWalletRegistry.map((item) => ({
+            id: item.id,
+            name: item.title,
+            icon: undefined,
+            installed: item.installed,
+            installUrl: item.installUrl,
+        }));
+    }
+    if (wallets.length === 0) {
+        return [];
+    }
+    return wallets.map((wallet) => {
+        const fallback = walletMap.get(wallet.id);
+        return {
+            ...wallet,
+            name: wallet.name ?? fallback?.name ?? wallet.id,
+            installed: wallet.installed ?? fallback?.installed,
+            installUrl: wallet.installUrl ?? fallback?.installUrl,
+        };
+    });
+}
+export function resolveSocialProviders(socialProviders) {
+    if (socialProviders === undefined) {
+        return defaultSocialProviders;
+    }
+    if (socialProviders.length === 0) {
+        return [];
+    }
+    const defaultProviderMap = new Map(defaultSocialProviders.map((provider) => [provider.id, provider]));
+    return socialProviders.map((provider) => {
+        const fallback = defaultProviderMap.get(provider.id);
+        return {
+            ...provider,
+            label: provider.label ?? fallback?.label ?? provider.id,
+            icon: provider.icon ?? fallback?.icon,
+        };
+    });
+}
+const IconFrame = ({ background, children, }) => (_jsx("div", { style: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+    }, children: children }));
+const walletIconTheme = {
+    metamask: "#F6851B",
+    okx: "#050608",
+    coinbase: "#0052FF",
+    trust: "#3375FF",
+    phantom: "#6C47FF",
+    rabby: "#7084FF",
+    rainbow: "#123F99",
+    zerion: "#2962EF",
+    brave: "#FF452A",
+    bitget: "#00F0FF",
+};
+const WalletPlaceholder = ({ walletId, name }) => (_jsx(IconFrame, { background: walletIconTheme[walletId] ?? colors.cardRaised, children: _jsx("span", { style: {
+            fontSize: 14,
+            fontWeight: 700,
+            color: walletIconTheme[walletId] ? "#FFFFFF" : colors.textSecondary,
+            fontFamily: fonts.family,
+        }, children: name.slice(0, 2).toUpperCase() }) }));
+export const DefaultWalletIcon = ({ walletId, name, }) => _jsx(WalletPlaceholder, { walletId: walletId, name: name });

package/dist/ui/WalletSelectionModal.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface WalletOption {
+    id: string;
+    label: string;
+    description: string;
+    category: "social" | "plugin";
+    icon?: ReactNode;
+}
+export interface WalletSelectionModalProps {
+    title?: string;
+    options: WalletOption[];
+    onSelect?: (id: string) => void;
+}
+export declare const WalletSelectionModal: ({ title, options, onSelect, }: WalletSelectionModalProps) => import("react/jsx-runtime.js").JSX.Element;