@eos3/connect 0.2.0 → 0.2.2

package/README.md

@@ -286,7 +286,6 @@ await fetch('https://wallet.example.com/api/market/push', {
 - `client.getWalletView()`: returns the current wallet ViewModel for app UIs.
 - `checkEosConnectTelegramPayStorage(app)`: initializes Telegram biometrics and returns secure storage diagnostics.
 - `client.connectTelegram(options)`: starts or resumes Telegram binding.
-- `client.connectTokenPocket(options)`: starts TokenPocket binding.
 - `client.startTelegramWalletFlow(options)`: runs the high-level Telegram wallet setup flow from SDK-owned UI.
 - `client.enableQuickPay()`: opens the SDK-owned `<eos-connect-modal>` and returns current quick payment readiness.
 - `client.pay(options)`: builds, signs, confirms, and pushes a paylimit payment.

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { EosConnectError, isEosConnectError, normalizeEosConnectError, type EosC
 export { EOS_CONNECT_TELEGRAM_WEB_APP_SDK_URL, getEosConnectTelegramWebApp, loadEosConnectTelegramWebAppSdk, type EosConnectTelegramWebApp } from './telegram-web-app.js';
 export * from './shared/index.js';
 export * from './ui.js';
-export type EosConnectProviderId = 'telegram' | 'tokenpocket' | 'anchor';
+export type EosConnectProviderId = 'telegram';
 export type EosConnectProviderState = 'available' | 'coming_soon' | 'disabled';
 export type EosConnectStatus = 'idle' | 'not_connected' | 'pending' | 'connected' | 'unsupported' | 'error';
 export type EosConnectNetwork = 'testnet' | 'mainnet';
@@ -72,7 +72,6 @@ export interface EosConnectOptions {
     network?: EosConnectNetwork;
     apiBaseUrl?: string;
     botUsername?: string;
-    tokenPocketSource?: string;
     deviceLabel?: string;
     locale?: string;
     messages?: EosConnectMessages;
@@ -139,7 +138,6 @@ export interface EosConnectClient {
     getWalletView(): Promise<EosConnectWalletView>;
     connect(options: EosConnectConnectOptions): Promise<EosConnectState>;
     connectTelegram(options?: EosConnectTelegramOptions): Promise<EosConnectState>;
-    connectTokenPocket(options?: EosConnectTelegramOptions): Promise<EosConnectState>;
     startTelegramWalletFlow(options?: EosConnectWalletFlowOptions): Promise<EosConnectWalletView>;
     enableQuickPay(): Promise<EosConnectQuickPayStatus>;
     pay(options: EosConnectPayOptions): Promise<EosConnectPayResult>;
@@ -233,7 +231,6 @@ export declare function checkEosConnectTelegramPayStorage(app: EosConnectTelegra
 export declare function initEosConnectTelegramBiometricManager(app: EosConnectTelegramWebApp, timeoutMs?: number): Promise<boolean>;
 export declare function openEosConnectTelegramBiometricSettings(app: EosConnectTelegramWebApp): Promise<EosConnectTelegramBiometricSettingsResult>;
 export declare function eosConnectWalletSetupState(wallet: EosConnectWalletInfo, env?: EosConnectWalletSetupEnv): EosConnectWalletSetupState;
-export declare function tokenPocketDappUrl(url: string, source?: string): string;
 export declare function generateEosConnectPaymentKey(): Promise<{
     privateKey: string;
     publicKey: string;

package/dist/index.js

@@ -56,18 +56,6 @@ const providers = [
         name: 'Telegram secure binding',
         state: 'available',
         description: 'Create or connect an EOS wallet through Telegram SecureStorage and passkeys.'
-    },
-    {
-        id: 'tokenpocket',
-        name: 'TokenPocket',
-        state: 'available',
-        description: 'Open TokenPocket and bind an existing EOS wallet to Telegram payments.'
-    },
-    {
-        id: 'anchor',
-        name: 'Anchor',
-        state: 'coming_soon',
-        description: 'Anchor connection is reserved for a later wallet adapter.'
     }
 ];
 const idleState = {
@@ -82,9 +70,6 @@ const idleState = {
 function normalizeBaseUrl(apiBaseUrl) {
     return apiBaseUrl.replace(/\/+$/, '');
 }
-function providerDisplayName(provider) {
-    return providers.find((item) => item.id === provider)?.name ?? provider;
-}
 function titleCase(value) {
     if (!value)
         return value;
@@ -643,13 +628,6 @@ function parseRpcUrls(raw) {
     }
     return urls;
 }
-export function tokenPocketDappUrl(url, source = 'eosconnect') {
-    return `tpdapp://open?params=${encodeURIComponent(JSON.stringify({
-        url,
-        chain: 'EOS',
-        source
-    }))}`;
-}
 export async function generateEosConnectPaymentKey() {
     const privateKey = PrivateKey.generate('K1');
     return {
@@ -1506,8 +1484,8 @@ export function createEosConnect(options) {
             return this.refreshWallet();
         },
         async connect(connectOptions) {
-            if (connectOptions.provider !== 'telegram' && connectOptions.provider !== 'tokenpocket') {
-                throw new Error(`${providerDisplayName(connectOptions.provider)} is not supported yet`);
+            if (connectOptions.provider !== 'telegram') {
+                throw new Error('Only Telegram wallet binding is supported');
             }
             if (!initData()) {
                 return publish({
@@ -1518,21 +1496,17 @@ export function createEosConnect(options) {
                 });
             }
             if (!connectOptions.publicKey) {
-                throw new Error(`${providerDisplayName(connectOptions.provider)} provider requires a publicKey`);
+                throw new Error('Telegram provider requires a publicKey');
             }
-            const path = connectOptions.provider === 'tokenpocket'
-                ? '/api/tg-wallet/tp-bind/start'
-                : '/api/tg-wallet/bind/start';
-            const bind = await request(path, {
+            const bind = await request('/api/tg-wallet/bind/start', {
                 method: 'POST',
                 body: JSON.stringify({
                     initData: initData(),
-                    botPublicKey: connectOptions.provider === 'telegram' ? connectOptions.publicKey : undefined,
-                    tgpayPublicKey: connectOptions.provider === 'tokenpocket' ? connectOptions.publicKey : undefined,
+                    botPublicKey: connectOptions.publicKey,
                     botUsername: connectOptions.botUsername || options.botUsername || undefined,
                     deviceLabel: options.deviceLabel || telegramDeviceLabel(telegramWebApp()),
                     assetLimits: connectOptions.assetLimits,
-                    replaceWallet: connectOptions.provider === 'telegram' ? connectOptions.replaceWallet || undefined : undefined
+                    replaceWallet: connectOptions.replaceWallet || undefined
                 })
             });
             if (bind.hasWallet) {
@@ -1560,9 +1534,7 @@ export function createEosConnect(options) {
                 error: null
             });
             if (connectOptions.openLink !== false) {
-                openExternalUrl(connectOptions.provider === 'tokenpocket'
-                    ? tokenPocketDappUrl(bind.bindUrl, options.tokenPocketSource)
-                    : bind.bindUrl, options, telegramWebApp());
+                openExternalUrl(bind.bindUrl, options, telegramWebApp());
             }
             return next;
         },
@@ -1650,23 +1622,6 @@ export function createEosConnect(options) {
             }
             return this.checkQuickPay();
         },
-        async connectTokenPocket(tokenPocketOptions = {}) {
-            const paymentKey = await generateEosConnectPaymentKey();
-            const next = await this.connect({
-                provider: 'tokenpocket',
-                publicKey: paymentKey.publicKey,
-                assetLimits: tokenPocketOptions.assetLimits,
-                openLink: false
-            });
-            if (!next.bindUrl || !next.bindId) {
-                throw new Error('EOS Connect did not return a TokenPocket binding request');
-            }
-            await saveEosConnectPaymentKey(paymentKey.privateKey, telegramWebApp());
-            if (tokenPocketOptions.openLink !== false) {
-                openExternalUrl(tokenPocketDappUrl(next.bindUrl, options.tokenPocketSource), options, telegramWebApp());
-            }
-            return next;
-        },
         async pay(payOptions) {
             if (!initData()) {
                 throw new Error('Telegram initData is missing');

package/dist/ui.js

@@ -66,6 +66,20 @@ eos-connect-button {
   line-height: 1.2;
   font-weight: 700;
   padding: 0 18px;
+  transition:
+    background-color 160ms ease,
+    transform 120ms ease;
+}
+.eos-connect-button:hover {
+  background: var(--eos-connect-accent-strong);
+}
+.eos-connect-button:active {
+  transform: translateY(1px);
+}
+.eos-connect-button:focus-visible,
+.eos-connect-sdk-primary:focus-visible {
+  outline: 3px solid rgba(47, 128, 237, 0.28);
+  outline-offset: 2px;
 }
 .eos-connect-sdk-backdrop {
   appearance: none;
@@ -76,11 +90,13 @@ eos-connect-button {
   padding: 0;
   background: rgba(15, 23, 42, 0.36);
   cursor: pointer;
+  animation: eos-connect-sdk-backdrop-in 180ms cubic-bezier(0.25, 1, 0.5, 1) both;
 }
 .eos-connect-sdk-sheet {
   position: relative;
   width: min(100%, 420px);
   max-height: min(640px, calc(100dvh - 24px - env(safe-area-inset-bottom)));
+  box-sizing: border-box;
   border: 1px solid var(--eos-connect-border);
   border-radius: 8px;
   background: var(--eos-connect-surface);
@@ -88,6 +104,8 @@ eos-connect-button {
   padding: 16px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  transform-origin: center bottom;
+  animation: eos-connect-sdk-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 .eos-connect-sdk-sheet--quick {
   width: min(100%, 454px) !important;
@@ -116,6 +134,13 @@ eos-connect-button {
   line-height: 1 !important;
   font-weight: 300 !important;
   padding: 0 !important;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 120ms ease !important;
+}
+.eos-connect-sdk-close:active {
+  transform: scale(0.96);
 }
 .eos-connect-sdk-summary {
   margin-bottom: 16px;
@@ -169,6 +194,10 @@ eos-connect-button {
   font-weight: 700;
   padding: 0 16px;
   text-align: left;
+  transition:
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 120ms ease;
 }
 .eos-connect-sdk-primary--quick {
   display: grid !important;
@@ -183,6 +212,9 @@ eos-connect-button {
   line-height: 1.2 !important;
   text-align: center !important;
 }
+.eos-connect-sdk-primary--quick:not([disabled]):active {
+  transform: translateY(1px) scale(0.992);
+}
 .eos-connect-sdk-primary--quick[aria-busy="true"],
 .eos-connect-sdk-primary--quick[disabled] {
   opacity: 1 !important;
@@ -230,6 +262,7 @@ eos-connect-button {
   stroke-width: 2.4 !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
+  animation: eos-connect-sdk-success-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 .eos-connect-sdk-send-icon {
   justify-self: end !important;
@@ -250,6 +283,47 @@ eos-connect-button {
     transform: rotate(360deg);
   }
 }
+@keyframes eos-connect-sdk-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes eos-connect-sdk-sheet-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes eos-connect-sdk-success-in {
+  from {
+    opacity: 0;
+    transform: scale(0.88);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .eos-connect-button,
+  .eos-connect-sdk-backdrop,
+  .eos-connect-sdk-sheet,
+  .eos-connect-sdk-close,
+  .eos-connect-sdk-primary,
+  .eos-connect-sdk-spinner,
+  .eos-connect-sdk-success-icon svg {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
 .eos-connect-sdk-primary span {
   min-width: 0;
   overflow-wrap: anywhere;
@@ -348,6 +422,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';
 }
@@ -388,10 +463,10 @@ export function renderEosConnectButton(client, options = {}) {
         : t('enableQuickPayment');
     return `<button class="eos-connect-button" type="button">${escapeHtml(label)}</button>`;
 }
-function renderQuickPaymentSheet(provider, t, flowState = 'idle') {
+function renderQuickPaymentSheet(t, flowState = 'idle') {
     const isChecking = flowState === 'checking';
     const isSuccess = flowState === 'success';
-    const disabled = isChecking || isSuccess || provider?.state !== 'available';
+    const disabled = isChecking || isSuccess;
     const title = isSuccess ? t('quickPaymentSuccess') : t('enableQuickPayment');
     const description = isSuccess
         ? t('quickPaymentSuccessDescription')
@@ -438,7 +513,7 @@ function renderQuickPaymentSheet(provider, t, flowState = 'idle') {
       <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')}"
+        data-provider="telegram"
         aria-disabled="${disabled}"
         ${isChecking ? 'aria-busy="true"' : ''}
         ${disabled ? 'disabled' : ''}
@@ -452,15 +527,13 @@ function renderQuickPaymentSheet(provider, t, flowState = 'idle') {
 }
 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);
+    return renderQuickPaymentSheet(t, flowState);
 }
 export async function connectEosProvider(client, _provider = 'telegram', options = {}) {
     return client.startTelegramWalletFlow(options);
@@ -471,6 +544,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 +641,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,51 +651,113 @@ 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;
             }
             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') {
+                if (provider !== 'telegram' || this.flowState !== 'idle' || this.flowPromise) {
                     return;
                 }
-                if (provider === 'telegram') {
-                    this.flowState = 'checking';
-                    this.render();
-                }
-                void connectEosProvider(this.client, provider, {
+                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') {
-                        this.flowState = isQuickPaymentReadyView(view) || isQuickPaymentReadyState(this.client.getSnapshot())
-                            ? 'success'
-                            : 'idle';
-                        this.render();
+                    if (isQuickPaymentReadyView(view) || isQuickPaymentReadyState(this.client.getSnapshot())) {
+                        this.showQuickPaySuccess();
+                        return;
                     }
-                }).catch((error) => {
-                    if (provider === 'telegram') {
+                    if (isQuickPaymentTerminalView(view)) {
                         this.flowState = 'idle';
+                        this.clearQuickPayRefresh();
                         this.render();
+                        return;
                     }
+                    this.flowState = 'checking';
+                    this.render();
+                    this.scheduleQuickPayRefresh();
+                }).catch((error) => {
+                    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.2",
   "description": "Framework-neutral browser SDK for EOS Passkey Connect in Telegram Mini Apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles.css

@@ -105,6 +105,7 @@ eos-connect-button {
   padding: 0;
   background: rgba(15, 23, 42, 0.36);
   cursor: pointer;
+  animation: eos-connect-sdk-backdrop-in 180ms cubic-bezier(0.25, 1, 0.5, 1) both;
 }
 
 .eos-connect-sdk-sheet {
@@ -119,6 +120,8 @@ eos-connect-button {
   padding: 16px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  transform-origin: center bottom;
+  animation: eos-connect-sdk-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .eos-connect-sdk-sheet--quick {
@@ -149,6 +152,14 @@ eos-connect-button {
   line-height: 1 !important;
   font-weight: 300 !important;
   padding: 0 !important;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 120ms ease !important;
+}
+
+.eos-connect-sdk-close:active {
+  transform: scale(0.96);
 }
 
 .eos-connect-sdk-summary {
@@ -210,6 +221,10 @@ eos-connect-button {
   font-weight: 700;
   padding: 0 16px;
   text-align: left;
+  transition:
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 120ms ease;
 }
 
 .eos-connect-sdk-primary--quick {
@@ -226,6 +241,10 @@ eos-connect-button {
   text-align: center !important;
 }
 
+.eos-connect-sdk-primary--quick:not([disabled]):active {
+  transform: translateY(1px) scale(0.992);
+}
+
 .eos-connect-sdk-primary--quick[aria-busy="true"],
 .eos-connect-sdk-primary--quick[disabled] {
   opacity: 1 !important;
@@ -279,6 +298,7 @@ eos-connect-button {
   stroke-width: 2.4 !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
+  animation: eos-connect-sdk-success-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .eos-connect-sdk-send-icon {
@@ -303,6 +323,51 @@ eos-connect-button {
   }
 }
 
+@keyframes eos-connect-sdk-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes eos-connect-sdk-sheet-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes eos-connect-sdk-success-in {
+  from {
+    opacity: 0;
+    transform: scale(0.88);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .eos-connect-button,
+  .eos-connect-sdk-backdrop,
+  .eos-connect-sdk-sheet,
+  .eos-connect-sdk-close,
+  .eos-connect-sdk-primary,
+  .eos-connect-sdk-spinner,
+  .eos-connect-sdk-success-icon svg {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .eos-connect-sdk-primary span {
   min-width: 0;
   overflow-wrap: anywhere;