@eos3/connect 0.1.13 → 0.2.1

package/dist/ui.js

@@ -0,0 +1,740 @@
+import { createEosConnect } from './index.js';
+const EOS_CONNECT_DEFAULT_STYLES = `
+:root {
+  --eos-connect-accent: #2f80ed;
+  --eos-connect-accent-strong: #1f6fd1;
+  --eos-connect-surface: #ffffff;
+  --eos-connect-surface-soft: #f5f7fb;
+  --eos-connect-border: #e5e7eb;
+  --eos-connect-text: #111827;
+  --eos-connect-muted: #6b7280;
+  --eos-connect-shadow: 0 18px 55px rgba(15, 23, 42, 0.18);
+}
+eos-connect-button,
+eos-connect,
+eos-connect-modal {
+  box-sizing: border-box;
+  color: var(--eos-connect-text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  line-height: 1.4;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+eos-connect *,
+eos-connect *::before,
+eos-connect *::after,
+eos-connect-button *,
+eos-connect-button *::before,
+eos-connect-button *::after,
+eos-connect-modal *,
+eos-connect-modal *::before,
+eos-connect-modal *::after {
+  box-sizing: border-box;
+}
+eos-connect-button[hidden],
+eos-connect[hidden],
+eos-connect-modal[hidden] {
+  display: none !important;
+}
+eos-connect,
+eos-connect-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: grid;
+  align-items: end;
+  justify-items: center;
+  min-width: 0;
+  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
+  overflow: hidden;
+}
+eos-connect-button {
+  display: inline-block;
+}
+.eos-connect-button {
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: 44px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--eos-connect-accent);
+  color: #ffffff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.2;
+  font-weight: 700;
+  padding: 0 18px;
+}
+.eos-connect-sdk-backdrop {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  inset: 0;
+  border: 0;
+  padding: 0;
+  background: rgba(15, 23, 42, 0.36);
+  cursor: pointer;
+}
+.eos-connect-sdk-sheet {
+  position: relative;
+  width: min(100%, 420px);
+  max-height: min(640px, calc(100dvh - 24px - env(safe-area-inset-bottom)));
+  border: 1px solid var(--eos-connect-border);
+  border-radius: 8px;
+  background: var(--eos-connect-surface);
+  box-shadow: var(--eos-connect-shadow);
+  padding: 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.eos-connect-sdk-sheet--quick {
+  width: min(100%, 454px) !important;
+  border: 0 !important;
+  border-radius: 28px !important;
+  padding: 50px 24px 34px !important;
+  overflow: visible !important;
+}
+.eos-connect-sdk-close {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  top: 24px !important;
+  right: 24px !important;
+  display: grid;
+  width: 48px !important;
+  height: 48px !important;
+  place-items: center;
+  border: 0 !important;
+  border-radius: 999px !important;
+  background: var(--eos-connect-surface-soft) !important;
+  color: #6b7280 !important;
+  cursor: pointer;
+  font-family: inherit !important;
+  font-size: 34px !important;
+  line-height: 1 !important;
+  font-weight: 300 !important;
+  padding: 0 !important;
+}
+.eos-connect-sdk-summary {
+  margin-bottom: 16px;
+}
+.eos-connect-sdk-summary--quick {
+  margin: 122px 0 38px !important;
+  text-align: center !important;
+}
+.eos-connect-sdk-summary h2 {
+  margin: 0 0 6px;
+  font-size: 22px;
+  line-height: 1.2;
+}
+.eos-connect-sdk-summary--quick h2 {
+  margin: 0 0 14px !important;
+  font-size: 28px !important;
+  line-height: 1.18 !important;
+  font-weight: 800 !important;
+}
+.eos-connect-sdk-summary p {
+  margin: 0;
+  color: var(--eos-connect-muted);
+  font-size: 15px;
+  line-height: 1.45;
+}
+.eos-connect-sdk-summary--quick p {
+  margin: 0 !important;
+  font-size: 17px !important;
+  line-height: 1.55 !important;
+}
+.eos-connect-sdk-summary--quick strong {
+  color: var(--eos-connect-text) !important;
+}
+.eos-connect-sdk-primary {
+  appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  width: 100%;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--eos-connect-accent);
+  color: #ffffff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 700;
+  padding: 0 16px;
+  text-align: left;
+}
+.eos-connect-sdk-primary--quick {
+  display: grid !important;
+  min-height: 66px !important;
+  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
+  align-items: center !important;
+  border-radius: 14px !important;
+  padding: 0 14px !important;
+  box-shadow: 0 14px 34px rgba(47, 128, 237, 0.26) !important;
+  font-family: inherit !important;
+  font-size: 18px !important;
+  line-height: 1.2 !important;
+  text-align: center !important;
+}
+.eos-connect-sdk-primary--quick[aria-busy="true"],
+.eos-connect-sdk-primary--quick[disabled] {
+  opacity: 1 !important;
+}
+.eos-connect-sdk-primary--success {
+  background: #10b981 !important;
+  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.22) !important;
+}
+.eos-connect-sdk-key-icon,
+.eos-connect-sdk-send-icon,
+.eos-connect-sdk-spinner-icon,
+.eos-connect-sdk-success-icon,
+.eos-connect-sdk-empty-icon {
+  display: grid !important;
+  width: 40px !important;
+  height: 40px !important;
+  place-items: center !important;
+}
+.eos-connect-sdk-key-icon {
+  border-radius: 11px !important;
+  background: #ffffff !important;
+  color: var(--eos-connect-accent) !important;
+}
+.eos-connect-sdk-spinner-icon,
+.eos-connect-sdk-success-icon,
+.eos-connect-sdk-empty-icon {
+  border-radius: 11px !important;
+  background: rgba(255, 255, 255, 0.18) !important;
+  color: #ffffff !important;
+}
+.eos-connect-sdk-spinner {
+  display: block !important;
+  width: 24px !important;
+  height: 24px !important;
+  border: 3px solid rgba(255, 255, 255, 0.42) !important;
+  border-top-color: #ffffff !important;
+  border-radius: 999px !important;
+  animation: eos-connect-sdk-spin 760ms linear infinite !important;
+}
+.eos-connect-sdk-success-icon svg {
+  width: 26px !important;
+  height: 26px !important;
+  fill: none !important;
+  stroke: currentColor !important;
+  stroke-width: 2.4 !important;
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+}
+.eos-connect-sdk-send-icon {
+  justify-self: end !important;
+  color: rgba(255, 255, 255, 0.86) !important;
+}
+.eos-connect-sdk-key-icon svg,
+.eos-connect-sdk-send-icon svg {
+  width: 24px;
+  height: 24px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+@keyframes eos-connect-sdk-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.eos-connect-sdk-primary span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.eos-connect-sdk-primary[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+@media (max-width: 480px) {
+  eos-connect,
+  eos-connect-modal {
+    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
+  }
+  .eos-connect-sdk-sheet {
+    width: 100%;
+    max-height: min(620px, calc(100dvh - 16px - env(safe-area-inset-bottom)));
+    border-radius: 8px 8px 0 0;
+    padding: 14px;
+  }
+  .eos-connect-sdk-sheet--quick {
+    border-radius: 28px 28px 0 0 !important;
+    padding: 46px 24px 34px !important;
+  }
+  .eos-connect-sdk-close {
+    top: 22px !important;
+    right: 24px !important;
+    width: 48px !important;
+    height: 48px !important;
+  }
+  .eos-connect-sdk-summary {
+    margin-bottom: 14px;
+  }
+  .eos-connect-sdk-summary--quick {
+    margin: 118px 0 36px !important;
+  }
+  .eos-connect-sdk-summary h2 {
+    font-size: 20px;
+  }
+  .eos-connect-sdk-summary--quick h2 {
+    font-size: 28px !important;
+  }
+  .eos-connect-sdk-summary p {
+    font-size: 14px;
+  }
+  .eos-connect-sdk-summary--quick p {
+    font-size: 17px !important;
+  }
+  .eos-connect-sdk-primary {
+    min-height: 52px;
+    padding: 0 14px;
+  }
+  .eos-connect-sdk-primary--quick {
+    min-height: 66px !important;
+    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
+    font-size: 18px !important;
+  }
+}
+`;
+export function installEosConnectStyles(documentRef = globalThis.document) {
+    if (!documentRef || documentRef.querySelector('[data-eos-connect-ui-style]')) {
+        return;
+    }
+    const style = documentRef.createElement('style');
+    style.setAttribute('data-eos-connect-ui-style', '');
+    style.textContent = EOS_CONNECT_DEFAULT_STYLES;
+    documentRef.head.append(style);
+}
+function escapeHtml(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+const EOS_CONNECT_UI_MESSAGES = {
+    en: {
+        enableQuickPayment: 'Enable quick payment',
+        quickPaymentEnabled: 'Quick payment enabled',
+        quickPaymentChecking: 'Checking binding status...',
+        quickPaymentCheckingDescription: 'Finish binding in the opened page\nThis window will update automatically',
+        quickPaymentSuccess: 'Enabled successfully',
+        quickPaymentSuccessDescription: 'Quick payment is enabled\nYou can return to continue payment',
+        quickPaymentSetupDescription: 'Complete one binding\nEligible payments can be confirmed quickly',
+        localKeyMissingDescription: 'Complete one binding\nEligible payments can be confirmed quickly',
+        closeEosConnect: 'Close EOS Connect'
+    },
+    'zh-CN': {
+        enableQuickPayment: '开启快捷支付',
+        quickPaymentEnabled: '快捷支付已开启',
+        quickPaymentChecking: '正在检测绑定状态...',
+        quickPaymentCheckingDescription: '请在打开的页面完成认证\n返回后会自动继续检测',
+        quickPaymentSuccess: '开启成功',
+        quickPaymentSuccessDescription: '快捷支付已开启\n可以返回继续支付',
+        quickPaymentSetupDescription: '完成一次绑定\n符合额度的支付可快速确认',
+        localKeyMissingDescription: '完成一次绑定\n符合额度的支付可快速确认',
+        closeEosConnect: '关闭 EOS Connect'
+    }
+};
+const EOS_CONNECT_QUICK_PAY_REFRESH_INTERVAL_MS = 1500;
+function normalizeEosConnectUiLocale(locale) {
+    return String(locale ?? '').toLowerCase().startsWith('zh') ? 'zh-CN' : 'en';
+}
+function browserLanguage() {
+    const maybeNavigator = globalThis;
+    return maybeNavigator.navigator?.language;
+}
+function telegramLanguageCode(app) {
+    const maybeApp = app;
+    return maybeApp?.initDataUnsafe?.user?.language_code;
+}
+function resolveEosConnectUiLocale(options = {}) {
+    return normalizeEosConnectUiLocale(options.locale ?? telegramLanguageCode(options.telegramWebApp) ?? browserLanguage());
+}
+function createTranslator(options = {}) {
+    const locale = resolveEosConnectUiLocale(options);
+    return (key, values = {}) => {
+        let text = options.messages?.[key] ??
+            (key === 'quickPaymentSetupDescription' ? options.messages?.localKeyMissingDescription : undefined) ??
+            EOS_CONNECT_UI_MESSAGES[locale][key];
+        for (const [name, value] of Object.entries(values)) {
+            text = text.replaceAll(`{${name}}`, value);
+        }
+        return text;
+    };
+}
+function formatMultilineText(value) {
+    return value
+        .split('\n')
+        .map((line) => escapeHtml(line))
+        .join('<br>');
+}
+export function renderEosConnectButton(client, options = {}) {
+    const snapshot = client.getSnapshot();
+    const t = createTranslator(options);
+    const label = snapshot.status === 'connected' && snapshot.canUse
+        ? t('quickPaymentEnabled')
+        : t('enableQuickPayment');
+    return `<button class="eos-connect-button" type="button">${escapeHtml(label)}</button>`;
+}
+function renderQuickPaymentSheet(provider, t, flowState = 'idle') {
+    const isChecking = flowState === 'checking';
+    const isSuccess = flowState === 'success';
+    const disabled = isChecking || isSuccess || provider?.state !== 'available';
+    const title = isSuccess ? t('quickPaymentSuccess') : t('enableQuickPayment');
+    const description = isSuccess
+        ? t('quickPaymentSuccessDescription')
+        : isChecking
+            ? t('quickPaymentCheckingDescription')
+            : t('quickPaymentSetupDescription');
+    const label = isSuccess
+        ? t('quickPaymentEnabled')
+        : isChecking
+            ? t('quickPaymentChecking')
+            : t('enableQuickPayment');
+    const leadingIcon = isSuccess
+        ? `<span class="eos-connect-sdk-success-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" focusable="false">
+            <path d="m5 12.4 4.2 4.2L19 6.8" />
+          </svg>
+        </span>`
+        : isChecking
+            ? `<span class="eos-connect-sdk-spinner-icon" aria-hidden="true">
+          <span class="eos-connect-sdk-spinner"></span>
+        </span>`
+            : `<span class="eos-connect-sdk-key-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" focusable="false">
+            <path d="M7.5 14.5a4 4 0 1 1 3.6-2.26L20 3.35 20.65 4 18 6.65 20 8.65 18.65 10 16.65 8 15 9.65 17 11.65 15.65 13 13.65 11 11.76 12.9A4 4 0 0 1 7.5 14.5Z" />
+            <circle cx="7.5" cy="10.5" r="1.45" />
+          </svg>
+        </span>`;
+    const trailingIcon = isChecking || isSuccess
+        ? '<span class="eos-connect-sdk-empty-icon" aria-hidden="true"></span>'
+        : `<span class="eos-connect-sdk-send-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" focusable="false">
+            <path d="M20.9 3.35 3.75 10.72c-.85.36-.78 1.59.1 1.85l6.1 1.79 1.82 6.05c.27.88 1.5.94 1.86.09l7.28-17.15Z" />
+            <path d="m10.28 14.02 4.76-4.76" />
+          </svg>
+        </span>`;
+    return `
+      <button type="button" class="eos-connect-sdk-backdrop" data-eos-connect-close aria-label="${escapeHtml(t('closeEosConnect'))}"></button>
+    <section class="eos-connect-sdk-sheet eos-connect-sdk-sheet--quick" role="dialog" aria-modal="true">
+      <button type="button" class="eos-connect-sdk-close" data-eos-connect-close aria-label="${escapeHtml(t('closeEosConnect'))}">×</button>
+      <div class="eos-connect-sdk-summary eos-connect-sdk-summary--quick">
+        <h2>${escapeHtml(title)}</h2>
+        <p>${formatMultilineText(description)}</p>
+      </div>
+      <button
+        type="button"
+        class="eos-connect-sdk-primary eos-connect-sdk-primary--quick${isSuccess ? ' eos-connect-sdk-primary--success' : ''}"
+        data-provider="${escapeHtml(provider?.id ?? 'telegram')}"
+        aria-disabled="${disabled}"
+        ${isChecking ? 'aria-busy="true"' : ''}
+        ${disabled ? 'disabled' : ''}
+      >
+        ${leadingIcon}
+        <span>${escapeHtml(label)}</span>
+        ${trailingIcon}
+      </button>
+    </section>
+  `;
+}
+export function renderEosConnectSheet(client, options = {}) {
+    const snapshot = client.getSnapshot();
+    const providers = client.getProviders();
+    const primary = providers.find((provider) => provider.id === 'telegram') ?? providers[0];
+    const t = createTranslator(options);
+    const flowState = options.flowState === 'success' || options.flowState === 'checking'
+        ? options.flowState
+        : snapshot.status === 'connected' && snapshot.canUse
+            ? 'success'
+            : 'idle';
+    return renderQuickPaymentSheet(primary, t, flowState);
+}
+export async function connectEosProvider(client, _provider = 'telegram', options = {}) {
+    return client.startTelegramWalletFlow(options);
+}
+function isQuickPaymentReadyView(view) {
+    return view?.status === 'ready' && view.canPay === true;
+}
+function isQuickPaymentReadyState(state) {
+    return state.status === 'connected' && state.canUse === true;
+}
+function isQuickPaymentTerminalView(view) {
+    return view?.status === 'error' || view?.status === 'unsupported';
+}
+function globalTelegramWebApp() {
+    const maybeWindow = globalThis;
+    return maybeWindow.window?.Telegram?.WebApp ?? maybeWindow.Telegram?.WebApp ?? null;
+}
+function networkFromAttribute(value) {
+    if (value === 'testnet' || value === 'mainnet') {
+        return value;
+    }
+    return undefined;
+}
+function resolveClient(host, configuredClient, options) {
+    if (configuredClient) {
+        return configuredClient;
+    }
+    const existing = host.__eosConnectClient;
+    if (existing) {
+        return existing;
+    }
+    const apiBaseUrl = host.getAttribute('api-base-url') ?? options.apiBaseUrl;
+    const botUsername = host.getAttribute('bot-username') ?? options.botUsername;
+    const network = networkFromAttribute(host.getAttribute('network')) ?? options.network;
+    const cacheKey = [network ?? '', apiBaseUrl ?? '', botUsername ?? ''].join('\u001f');
+    const clientCache = options.__eosConnectClientCache ?? new Map();
+    options.__eosConnectClientCache = clientCache;
+    const cachedClient = clientCache.get(cacheKey);
+    if (cachedClient) {
+        host.__eosConnectClient = cachedClient;
+        return cachedClient;
+    }
+    const client = createEosConnect({
+        ...(network ? { network } : {}),
+        ...(apiBaseUrl ? { apiBaseUrl } : {}),
+        ...(botUsername ? { botUsername } : {}),
+        telegramWebApp: options.telegramWebApp ?? globalTelegramWebApp()
+    });
+    clientCache.set(cacheKey, client);
+    host.__eosConnectClient = client;
+    return client;
+}
+function dispatchEosConnectError(host, detail) {
+    host.dispatchEvent(new CustomEvent('eos-connect-error', {
+        bubbles: true,
+        composed: true,
+        detail
+    }));
+}
+function defaultModalForButton(host) {
+    const root = host.getRootNode?.();
+    return root?.querySelector?.('eos-connect-modal,eos-connect') ?? globalThis.document?.querySelector?.('eos-connect-modal,eos-connect') ?? null;
+}
+function createButtonElement(options) {
+    const BaseElement = globalThis.HTMLElement ?? class {
+    };
+    return class EosConnectButton extends BaseElement {
+        unsubscribe = null;
+        client = null;
+        connectedCallback() {
+            this.client = resolveClient(this, options.client, options);
+            this.render();
+            this.unsubscribe = this.client.subscribe(() => this.render());
+            void this.client.checkWallet().catch((error) => {
+                dispatchEosConnectError(this, { error });
+            });
+            this.addEventListener('click', this.open);
+        }
+        disconnectedCallback() {
+            this.unsubscribe?.();
+            this.removeEventListener('click', this.open);
+        }
+        open = () => {
+            defaultModalForButton(this)?.removeAttribute('hidden');
+            this.dispatchEvent(new CustomEvent('eos-connect-open', {
+                bubbles: true,
+                composed: true
+            }));
+        };
+        render() {
+            if (!this.client)
+                return;
+            this.innerHTML = renderEosConnectButton(this.client, {
+                locale: options.locale,
+                messages: options.messages,
+                telegramWebApp: options.telegramWebApp ?? globalTelegramWebApp()
+            });
+        }
+    };
+}
+function createModalElement(options) {
+    const BaseElement = globalThis.HTMLElement ?? class {
+    };
+    return class EosConnectModal extends BaseElement {
+        unsubscribe = null;
+        client = null;
+        flowState = 'idle';
+        flowPromise = null;
+        quickPayRefreshTimer = null;
+        connectedCallback() {
+            this.client = resolveClient(this, options.client, options);
+            this.render();
+            this.unsubscribe = this.client.subscribe(() => this.render());
+            void this.client.checkWallet().catch((error) => {
+                dispatchEosConnectError(this, { error });
+            });
+            this.addEventListener('click', this.handleClick);
+            globalThis.addEventListener?.('focus', this.handleForeground);
+            globalThis.document?.addEventListener?.('visibilitychange', this.handleForeground);
+        }
+        disconnectedCallback() {
+            this.clearQuickPayRefresh();
+            this.unsubscribe?.();
+            this.removeEventListener('click', this.handleClick);
+            globalThis.removeEventListener?.('focus', this.handleForeground);
+            globalThis.document?.removeEventListener?.('visibilitychange', this.handleForeground);
+        }
+        handleClick = (event) => {
+            const target = event.target;
+            if (target?.closest('[data-eos-connect-close]')) {
+                this.flowState = 'idle';
+                this.flowPromise = null;
+                this.clearQuickPayRefresh();
+                this.setAttribute('hidden', '');
+                this.dispatchEvent(new CustomEvent('eos-connect-close', { bubbles: true, composed: true }));
+                return;
+            }
+            const provider = target?.closest('[data-provider]')?.dataset.provider;
+            if (provider && this.client) {
+                const providerConfig = this.client.getProviders().find((item) => item.id === provider);
+                if (providerConfig?.state && providerConfig.state !== 'available') {
+                    return;
+                }
+                if (provider === 'telegram') {
+                    if (this.flowState !== 'idle' || this.flowPromise) {
+                        return;
+                    }
+                    this.flowState = 'checking';
+                    this.render();
+                    this.scheduleQuickPayRefresh();
+                }
+                this.flowPromise = connectEosProvider(this.client, provider, {
+                    ...options.telegramOptions,
+                    botUsername: options.telegramOptions?.botUsername ?? options.botUsername,
+                    assetLimits: options.telegramOptions?.assetLimits ?? options.assetLimits,
+                    replaceWallet: options.telegramOptions?.replaceWallet ?? options.replaceWallet,
+                    openExternal: options.openExternal
+                }).then((view) => {
+                    if (provider === 'telegram') {
+                        if (isQuickPaymentReadyView(view) || isQuickPaymentReadyState(this.client.getSnapshot())) {
+                            this.showQuickPaySuccess();
+                            return;
+                        }
+                        if (isQuickPaymentTerminalView(view)) {
+                            this.flowState = 'idle';
+                            this.clearQuickPayRefresh();
+                            this.render();
+                            return;
+                        }
+                        this.flowState = 'checking';
+                        this.render();
+                        this.scheduleQuickPayRefresh();
+                    }
+                }).catch((error) => {
+                    if (provider === 'telegram') {
+                        this.flowState = 'idle';
+                        this.clearQuickPayRefresh();
+                        this.render();
+                    }
+                    dispatchEosConnectError(this, { error, provider });
+                }).finally(() => {
+                    this.flowPromise = null;
+                });
+            }
+        };
+        handleForeground = () => {
+            if (globalThis.document?.visibilityState && globalThis.document.visibilityState !== 'visible') {
+                return;
+            }
+            if (this.flowState !== 'checking') {
+                return;
+            }
+            this.clearQuickPayRefresh();
+            void this.refreshQuickPayStatus();
+        };
+        scheduleQuickPayRefresh(delayMs = EOS_CONNECT_QUICK_PAY_REFRESH_INTERVAL_MS) {
+            if (!this.client || this.flowState !== 'checking' || this.quickPayRefreshTimer) {
+                return;
+            }
+            this.quickPayRefreshTimer = globalThis.setTimeout(() => {
+                this.quickPayRefreshTimer = null;
+                void this.refreshQuickPayStatus();
+            }, delayMs);
+        }
+        clearQuickPayRefresh() {
+            if (this.quickPayRefreshTimer) {
+                globalThis.clearTimeout(this.quickPayRefreshTimer);
+                this.quickPayRefreshTimer = null;
+            }
+        }
+        async refreshQuickPayStatus() {
+            if (!this.client || this.flowState !== 'checking') {
+                return;
+            }
+            try {
+                const quickPay = await this.client.checkQuickPay();
+                if (this.flowState !== 'checking') {
+                    return;
+                }
+                if (quickPay.enabled) {
+                    this.showQuickPaySuccess();
+                    return;
+                }
+            }
+            catch (error) {
+                dispatchEosConnectError(this, { error, provider: 'telegram' });
+            }
+            this.scheduleQuickPayRefresh();
+        }
+        showQuickPaySuccess() {
+            this.flowState = 'success';
+            this.clearQuickPayRefresh();
+            this.render();
+        }
+        render() {
+            if (!this.client)
+                return;
+            this.innerHTML = renderEosConnectSheet(this.client, {
+                locale: options.locale,
+                messages: options.messages,
+                telegramWebApp: options.telegramWebApp ?? globalTelegramWebApp(),
+                flowState: this.flowState
+            });
+        }
+    };
+}
+export function defineEosConnectElements({ client, network, apiBaseUrl, botUsername, locale, messages, assetLimits, replaceWallet, telegramOptions, openExternal, telegramWebApp, injectStyles = true, customElements: registry = globalThis.customElements }) {
+    if (injectStyles) {
+        installEosConnectStyles();
+    }
+    if (!registry) {
+        throw new Error('CustomElementRegistry is not available');
+    }
+    const elementOptions = {
+        client,
+        network,
+        apiBaseUrl,
+        botUsername,
+        locale,
+        messages,
+        assetLimits,
+        replaceWallet,
+        telegramOptions,
+        openExternal,
+        telegramWebApp
+    };
+    if (!registry.get('eos-connect')) {
+        registry.define('eos-connect', createModalElement(elementOptions));
+    }
+    if (!registry.get('eos-connect-button')) {
+        registry.define('eos-connect-button', createButtonElement(elementOptions));
+    }
+    if (!registry.get('eos-connect-modal')) {
+        registry.define('eos-connect-modal', createModalElement(elementOptions));
+    }
+}