@eos3/connect 0.1.2 → 0.1.3

package/README.md

@@ -37,6 +37,7 @@ const eosConnect = createEosConnect({
   network: 'testnet',
   apiBaseUrl: 'https://your-wallet-api.example.com',
   botUsername: 'your_bot',
+  locale: 'zh-CN',
   telegramWebApp
 });
 
@@ -61,6 +62,23 @@ verification.
 generate that URL from its `WEB_BASE_URL`, so users leave the Mini App and finish
 passkey authentication on the hosted passkey binding page.
 
+## Internationalization
+
+The built-in payment confirmation sheet supports English and Simplified Chinese.
+The SDK uses explicit `locale`, then Telegram `language_code`, then
+`navigator.language`, and falls back to English:
+
+```ts
+const eosConnect = createEosConnect({
+  telegramWebApp,
+  locale: 'zh-CN',
+  messages: {
+    paymentConfirmTitle: '确认付款',
+    paymentConfirmAction: '支付'
+  }
+});
+```
+
 ## Connect a Telegram Wallet
 
 ```ts

package/dist/index.d.ts

@@ -14,6 +14,11 @@ export interface EosConnectProvider {
 }
 export interface EosConnectTelegramWebApp {
     initData?: string;
+    initDataUnsafe?: {
+        user?: {
+            language_code?: string;
+        };
+    };
     platform?: string;
     version?: string;
     openLink?(url: string): void;
@@ -98,6 +103,8 @@ export interface EosConnectOptions {
     apiBaseUrl?: string;
     botUsername?: string;
     deviceLabel?: string;
+    locale?: string;
+    messages?: EosConnectMessages;
     balanceAsset?: EosConnectBalanceAsset;
     rpcUrls?: string | string[];
     signTransaction?: EosConnectTransactionSigner;
@@ -186,6 +193,15 @@ export interface EosConnectPaymentDetails {
 }
 export type EosConnectSignedTransaction = SignedTransferPayload;
 export type EosConnectPaymentConfirmer = (details: EosConnectPaymentDetails) => boolean | Promise<boolean>;
+export interface EosConnectMessages {
+    paymentConfirmTitle?: string;
+    paymentConfirmClose?: string;
+    paymentConfirmRecipient?: string;
+    paymentConfirmMemo?: string;
+    paymentConfirmGas?: string;
+    paymentConfirmAction?: string;
+    emptyMemo?: string;
+}
 export type EosConnectTransactionSigner = (transaction: Record<string, unknown>, context: {
     telegramWebApp?: EosConnectTelegramWebApp | null;
     rpcUrls: string[];

package/dist/index.js

@@ -546,6 +546,42 @@ function rawErrorMessage(error) {
     }
     return 'EOS Connect request failed';
 }
+const EOS_CONNECT_MESSAGES = {
+    en: {
+        paymentConfirmTitle: 'Payment details',
+        paymentConfirmClose: 'Close',
+        paymentConfirmRecipient: 'Recipient',
+        paymentConfirmMemo: 'Memo',
+        paymentConfirmGas: 'Gas',
+        paymentConfirmAction: 'Confirm',
+        emptyMemo: '-'
+    },
+    'zh-CN': {
+        paymentConfirmTitle: '交易详情',
+        paymentConfirmClose: '关闭',
+        paymentConfirmRecipient: '收款地址',
+        paymentConfirmMemo: '备注',
+        paymentConfirmGas: 'Gas',
+        paymentConfirmAction: '确定',
+        emptyMemo: '-'
+    }
+};
+function normalizeEosConnectLocale(locale) {
+    return String(locale ?? '').toLowerCase().startsWith('zh') ? 'zh-CN' : 'en';
+}
+function telegramLanguageCode(app) {
+    return app?.initDataUnsafe?.user?.language_code;
+}
+function browserLanguage() {
+    const maybeNavigator = globalThis;
+    return maybeNavigator.navigator?.language;
+}
+function resolveEosConnectLocale(explicitLocale, telegramWebApp) {
+    return normalizeEosConnectLocale(explicitLocale ?? telegramLanguageCode(telegramWebApp) ?? browserLanguage());
+}
+function eosConnectMessage(key, locale, overrides) {
+    return overrides?.[key] ?? EOS_CONNECT_MESSAGES[locale][key];
+}
 function ensurePaymentConfirmStyle(documentRef) {
     if (documentRef.querySelector('[data-eos-connect-payment-confirm-style]'))
         return;
@@ -658,11 +694,12 @@ function ensurePaymentConfirmStyle(documentRef) {
   `;
     documentRef.head.appendChild(style);
 }
-function defaultConfirmPayment(details) {
+function defaultConfirmPayment(details, options) {
     const documentRef = globalThis.document;
     if (!documentRef?.body)
         return Promise.resolve(true);
     ensurePaymentConfirmStyle(documentRef);
+    const message = (key) => eosConnectMessage(key, options.locale, options.messages);
     const backdrop = documentRef.createElement('div');
     backdrop.className = 'eos-connect-payment-confirm-backdrop';
     backdrop.setAttribute('role', 'presentation');
@@ -670,7 +707,7 @@ function defaultConfirmPayment(details) {
         .slice(1)
         .map((payment) => `
         <div class="eos-connect-payment-confirm-row">
-          <span>Gas</span>
+          <span>${escapeConfirmHtml(message('paymentConfirmGas'))}</span>
           <strong>${escapeConfirmHtml(payment.quantity)}</strong>
         </div>
       `)
@@ -679,20 +716,20 @@ function defaultConfirmPayment(details) {
     <section class="eos-connect-payment-confirm-sheet" role="dialog" aria-modal="true" aria-labelledby="eos-connect-payment-confirm-title">
       <header class="eos-connect-payment-confirm-header">
         <span></span>
-        <h2 id="eos-connect-payment-confirm-title">交易详情</h2>
-        <button type="button" class="eos-connect-payment-confirm-close" aria-label="关闭">×</button>
+        <h2 id="eos-connect-payment-confirm-title">${escapeConfirmHtml(message('paymentConfirmTitle'))}</h2>
+        <button type="button" class="eos-connect-payment-confirm-close" aria-label="${escapeConfirmHtml(message('paymentConfirmClose'))}">×</button>
       </header>
       <div class="eos-connect-payment-confirm-amount">-${escapeConfirmHtml(details.quantity)}</div>
       <div class="eos-connect-payment-confirm-row">
-        <span>收款地址</span>
+        <span>${escapeConfirmHtml(message('paymentConfirmRecipient'))}</span>
         <strong>${escapeConfirmHtml(details.to)}</strong>
       </div>
       <div class="eos-connect-payment-confirm-row">
-        <span>备注</span>
-        <strong>${escapeConfirmHtml(details.memo || '-')}</strong>
+        <span>${escapeConfirmHtml(message('paymentConfirmMemo'))}</span>
+        <strong>${escapeConfirmHtml(details.memo || message('emptyMemo'))}</strong>
       </div>
       ${serviceRows}
-      <button type="button" class="eos-connect-payment-confirm-action">确定</button>
+      <button type="button" class="eos-connect-payment-confirm-action">${escapeConfirmHtml(message('paymentConfirmAction'))}</button>
     </section>
   `;
     return new Promise((resolve) => {
@@ -1432,7 +1469,11 @@ export function createEosConnect(options) {
                     symbol: payOptions.symbol
                 })
             });
-            const confirmPayment = options.confirmPayment === false ? null : options.confirmPayment ?? defaultConfirmPayment;
+            const defaultPaymentConfirmer = (details) => defaultConfirmPayment(details, {
+                locale: resolveEosConnectLocale(options.locale, telegramWebApp()),
+                messages: options.messages
+            });
+            const confirmPayment = options.confirmPayment === false ? null : options.confirmPayment ?? defaultPaymentConfirmer;
             if (confirmPayment) {
                 const confirmed = await confirmPayment(paymentDetailsFromBuiltTransfer(built));
                 if (!confirmed) {

package/package.json

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