feat(telegram): native dialogs for confirms and deep-link notices
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 10s
CI / integration (pull_request) Successful in 15s
CI / ui (pull_request) Successful in 56s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m19s

Inside the Mini App, route the destructive confirmations (resign, block, unfriend)
through Telegram's native showConfirm, and present the deep-link info modals (stale
invite, welcome-on-redeem) as a native showPopup whose button opens the bot chat.
Outside Telegram, or on a client predating the dialogs, the existing in-app Modal is
used unchanged; offline also keeps the modal so the action retains its disabled state.

Adds showConfirm/showPopup wrappers to telegram.ts and a pure popup-params builder
(nativedialogs.ts) with unit tests; the deep-link modal components choose native vs
in-app via an effect gated on insideTelegram + dialog availability.
This commit is contained in:
Ilia Denisov
2026-06-24 12:36:52 +02:00
parent 29b6c7e4d8
commit 2ba7cc3086
8 changed files with 209 additions and 15 deletions
+44
View File
@@ -6,6 +6,20 @@
import type { TelegramThemeParams } from './theme';
/** TelegramPopupButton is one button of a native showPopup (Bot API 6.2). */
export interface TelegramPopupButton {
id?: string;
type?: 'default' | 'ok' | 'close' | 'cancel' | 'destructive';
text?: string;
}
/** TelegramPopupParams configures a native showPopup (title optional, message required, up to 3 buttons). */
export interface TelegramPopupParams {
title?: string;
message: string;
buttons?: TelegramPopupButton[];
}
interface TelegramWebApp {
initData: string;
initDataUnsafe?: { start_param?: string };
@@ -51,6 +65,8 @@ interface TelegramWebApp {
getItem?: (key: string, cb: (err: string | null, value?: string) => void) => void;
setItem?: (key: string, value: string, cb?: (err: string | null, ok?: boolean) => void) => void;
};
showConfirm?: (message: string, cb?: (ok: boolean) => void) => void;
showPopup?: (params: TelegramPopupParams, cb?: (buttonId: string) => void) => void;
}
function webApp(): TelegramWebApp | undefined {
@@ -347,6 +363,34 @@ export function telegramCloudSet(key: string, value: string): Promise<void> {
});
}
/** telegramDialogsAvailable reports whether Telegram's native dialogs (showConfirm / showPopup, Bot
* API 6.2) are usable, so a caller can choose the native path over its own modal. */
export function telegramDialogsAvailable(): boolean {
return !!webApp()?.showPopup;
}
/**
* telegramShowConfirm shows Telegram's native confirm dialog and resolves true when the user
* accepts. Resolves false outside Telegram or on a client predating the dialog, so callers should
* gate on telegramDialogsAvailable and fall back to their own modal otherwise.
*/
export function telegramShowConfirm(message: string): Promise<boolean> {
const w = webApp();
if (!w?.showConfirm) return Promise.resolve(false);
return new Promise((resolve) => w.showConfirm!(message, (ok) => resolve(!!ok)));
}
/**
* telegramShowPopup shows Telegram's native popup and resolves the pressed button id (the empty
* string when dismissed without pressing a button). Resolves null outside Telegram or on a client
* predating the popup, so callers can fall back to their own modal.
*/
export function telegramShowPopup(params: TelegramPopupParams): Promise<string | null> {
const w = webApp();
if (!w?.showPopup) return Promise.resolve(null);
return new Promise((resolve) => w.showPopup!(params, (id) => resolve(id ?? '')));
}
/** Haptic is the set of feedbacks the app triggers. */
export type Haptic = 'select' | 'success' | 'error' | 'warning' | 'light' | 'medium' | 'heavy';