@eos3/connect 0.2.0 → 0.2.1

package/dist/ui.js

@@ -348,6 +348,7 @@ const EOS_CONNECT_UI_MESSAGES = {
         closeEosConnect: '关闭 EOS Connect'
     }
 };
+const EOS_CONNECT_QUICK_PAY_REFRESH_INTERVAL_MS = 1500;
 function normalizeEosConnectUiLocale(locale) {
     return String(locale ?? '').toLowerCase().startsWith('zh') ? 'zh-CN' : 'en';
 }
@@ -471,6 +472,9 @@ function isQuickPaymentReadyView(view) {
 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;
@@ -565,6 +569,8 @@ function createModalElement(options) {
         unsubscribe = null;
         client = null;
         flowState = 'idle';
+        flowPromise = null;
+        quickPayRefreshTimer = null;
         connectedCallback() {
             this.client = resolveClient(this, options.client, options);
             this.render();
@@ -573,15 +579,22 @@ function createModalElement(options) {
                 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;
@@ -593,10 +606,14 @@ function createModalElement(options) {
                     return;
                 }
                 if (provider === 'telegram') {
+                    if (this.flowState !== 'idle' || this.flowPromise) {
+                        return;
+                    }
                     this.flowState = 'checking';
                     this.render();
+                    this.scheduleQuickPayRefresh();
                 }
-                void connectEosProvider(this.client, provider, {
+                this.flowPromise = connectEosProvider(this.client, provider, {
                     ...options.telegramOptions,
                     botUsername: options.telegramOptions?.botUsername ?? options.botUsername,
                     assetLimits: options.telegramOptions?.assetLimits ?? options.assetLimits,
@@ -604,20 +621,81 @@ function createModalElement(options) {
                     openExternal: options.openExternal
                 }).then((view) => {
                     if (provider === 'telegram') {
-                        this.flowState = isQuickPaymentReadyView(view) || isQuickPaymentReadyState(this.client.getSnapshot())
-                            ? 'success'
-                            : 'idle';
+                        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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eos3/connect",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Framework-neutral browser SDK for EOS Passkey Connect in Telegram Mini Apps.",
   "type": "module",
   "license": "UNLICENSED",