Skip to content

[telegram-web-app] Update Telegram Web App to API 7.7 #69995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
typescript-bot merged 4 commits into from
Jul 7, 2024
Merged

[telegram-web-app] Update Telegram Web App to API 7.7 #69995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4272943
feat(telegram-web-app): Update to API 7.7
deptyped Jul 7, 2024
a055cb2
feat(telegram-web-app): Export callback type definitions
deptyped Jul 7, 2024
60bc086
test(telegram-web-app): Add tests for vertical swipe
deptyped Jul 7, 2024
dce69be
style(telegram-web-app): Fix formatting
deptyped Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 91 additions & 66 deletions types/telegram-web-app/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,62 +145,38 @@ interface WebApp {
* A method that sets the app event handler. Check the list of available
* events.
*/
onEvent(
eventType:
| "themeChanged"
| "mainButtonClicked"
| "backButtonClicked"
| "settingsButtonClicked"
| "biometricManagerUpdated",
eventHandler: () => void,
): void;
onEvent(eventType: "popupClosed", eventHandler: (eventData: { button_id: string | null }) => void): void;
onEvent(eventType: "viewportChanged", eventHandler: (eventData: { isStateStable: boolean }) => void): void;
onEvent(
eventType: "invoiceClosed",
eventHandler: (eventData: { url: string; status: "paid" | "cancelled" | "failed" | "pending" }) => void,
): void;
onEvent(eventType: "qrTextReceived", eventHandler: (eventData: { data: string }) => void): void;
onEvent(eventType: "clipboardTextReceived", eventHandler: (eventData: { data: string | null }) => void): void;
onEvent(
eventType: "writeAccessRequested",
eventHandler: (eventData: { status: "allowed" | "cancelled" }) => void,
): void;
onEvent(eventType: "contactRequested", eventHandler: (eventData: RequestContactResponse) => void): void;
onEvent(
eventType: "biometricAuthRequested",
eventHandler: (eventData: { isAuthenticated: boolean; biometricToken?: string }) => void,
): void;
onEvent(eventType: "biometricTokenUpdated", eventHandler: (eventData: { isUpdated: boolean }) => void): void;
onEvent(eventType: "themeChanged", eventHandler: ThemeChangedCallback): void;
onEvent(eventType: "mainButtonClicked", eventHandler: MainButtonClickedCallback): void;
onEvent(eventType: "backButtonClicked", eventHandler: BackButtonClickedCallback): void;
onEvent(eventType: "settingsButtonClicked", eventHandler: SettingsButtonClickedCallback): void;
onEvent(eventType: "popupClosed", eventHandler: PopupClosedCallback): void;
onEvent(eventType: "viewportChanged", eventHandler: ViewportChangedCallback): void;
onEvent(eventType: "invoiceClosed", eventHandler: InvoiceClosedCallback): void;
onEvent(eventType: "qrTextReceived", eventHandler: QrTextReceivedCallback): void;
onEvent(eventType: "scanQrPopupClosed", eventHandler: ScanQrPopupClosedCallback): void;
onEvent(eventType: "clipboardTextReceived", eventHandler: ClipboardTextReceivedCallback): void;
onEvent(eventType: "writeAccessRequested", eventHandler: WriteAccessRequestedCallback): void;
onEvent(eventType: "contactRequested", eventHandler: ContactRequestedCallback): void;
onEvent(eventType: "biometricManagerUpdated", eventHandler: BiometricManagerUpdatedCallback): void;
onEvent(eventType: "biometricAuthRequested", eventHandler: BiometricAuthRequestedCallback): void;
onEvent(eventType: "biometricTokenUpdated", eventHandler: BiometricTokenUpdatedCallback): void;

/** A method that deletes a previously set event handler. */
offEvent(
eventType:
| "themeChanged"
| "mainButtonClicked"
| "backButtonClicked"
| "settingsButtonClicked"
| "biometricManagerUpdated",
eventHandler: () => void,
): void;
offEvent(eventType: "popupClosed", eventHandler: (eventData: { button_id: string | null }) => void): void;
offEvent(eventType: "viewportChanged", eventHandler: (eventData: { isStateStable: boolean }) => void): void;
offEvent(
eventType: "invoiceClosed",
eventHandler: (eventData: { url: string; status: "paid" | "cancelled" | "failed" | "pending" }) => void,
): void;
offEvent(eventType: "qrTextReceived", eventHandler: (eventData: { data: string }) => void): void;
offEvent(eventType: "clipboardTextReceived", eventHandler: (eventData: { data: string | null }) => void): void;
offEvent(
eventType: "writeAccessRequested",
eventHandler: (eventData: { status: "allowed" | "cancelled" }) => void,
): void;
offEvent(eventType: "contactRequested", eventHandler: (eventData: RequestContactResponse) => void): void;
offEvent(
eventType: "biometricAuthRequested",
eventHandler: (eventData: { isAuthenticated: boolean; biometricToken?: string }) => void,
): void;
offEvent(eventType: "biometricTokenUpdated", eventHandler: (eventData: { isUpdated: boolean }) => void): void;
offEvent(eventType: "themeChanged", eventHandler: ThemeChangedCallback): void;
offEvent(eventType: "mainButtonClicked", eventHandler: MainButtonClickedCallback): void;
offEvent(eventType: "backButtonClicked", eventHandler: BackButtonClickedCallback): void;
offEvent(eventType: "settingsButtonClicked", eventHandler: SettingsButtonClickedCallback): void;
offEvent(eventType: "popupClosed", eventHandler: PopupClosedCallback): void;
offEvent(eventType: "viewportChanged", eventHandler: ViewportChangedCallback): void;
offEvent(eventType: "invoiceClosed", eventHandler: InvoiceClosedCallback): void;
offEvent(eventType: "qrTextReceived", eventHandler: QrTextReceivedCallback): void;
offEvent(eventType: "scanQrPopupClosed", eventHandler: ScanQrPopupClosedCallback): void;
offEvent(eventType: "clipboardTextReceived", eventHandler: ClipboardTextReceivedCallback): void;
offEvent(eventType: "writeAccessRequested", eventHandler: WriteAccessRequestedCallback): void;
offEvent(eventType: "contactRequested", eventHandler: ContactRequestedCallback): void;
offEvent(eventType: "biometricManagerUpdated", eventHandler: BiometricManagerUpdatedCallback): void;
offEvent(eventType: "biometricAuthRequested", eventHandler: BiometricAuthRequestedCallback): void;
offEvent(eventType: "biometricTokenUpdated", eventHandler: BiometricTokenUpdatedCallback): void;

/**
* A method used to send data to the bot. When this method is called, a
Expand Down Expand Up @@ -269,6 +245,7 @@ interface WebApp {
* The Web App will receive the event qrTextReceived every time the scanner catches a code with text data.
* If an optional callback parameter was passed, the callback function will be called and the text from the QR
* code will be passed as the first argument. Returning true inside this callback function causes the popup to be closed.
* Starting from **Bot API 7.7**, the Mini App will receive the scanQrPopupClosed event if the user closes the native popup for scanning a QR code.
*/
showScanQrPopup(params: ScanQrPopupParams, callback?: (data: string) => void): void;
/**
Expand Down Expand Up @@ -325,8 +302,40 @@ interface WebApp {
expand(): void;
/** A method that closes the Web App. */
close(): void;
/**
* `True`, if vertical swipes to close or minimize the Mini App are enabled.
* `False`, if vertical swipes to close or minimize the Mini App are disabled.
* In any case, the user will still be able to minimize and close the Mini App by swiping the Mini App's header.
*/
isVerticalSwipesEnabled: boolean;
/**
* **Bot API 7.7+** A method that enables vertical swipes to close or minimize the Mini App.
* For user convenience, it is recommended to always enable swipes unless they conflict with the Mini App's own gestures.
*/
enableVerticalSwipes(): void;
/**
* **Bot API 7.7+** A method that disables vertical swipes to close or minimize the Mini App.
* This method is useful if your Mini App uses swipe gestures that may conflict with the gestures for minimizing and closing the app.
*/
disableVerticalSwipes(): void;
}

type ThemeChangedCallback = () => void;
type ViewportChangedCallback = (eventData: { isStateStable: boolean }) => void;
type MainButtonClickedCallback = () => void;
type BackButtonClickedCallback = () => void;
type SettingsButtonClickedCallback = () => void;
type InvoiceClosedCallback = (eventData: { url: string; status: "paid" | "cancelled" | "failed" | "pending" }) => void;
type PopupClosedCallback = (eventData: { button_id: string | null }) => void;
type QrTextReceivedCallback = (eventData: { data: string }) => void;
type ScanQrPopupClosedCallback = () => void;
type ClipboardTextReceivedCallback = (eventData: { data: string | null }) => void;
type WriteAccessRequestedCallback = (eventData: { status: "allowed" | "cancelled" }) => void;
type ContactRequestedCallback = (eventData: RequestContactResponse) => void;
type BiometricManagerUpdatedCallback = () => void;
type BiometricAuthRequestedCallback = (eventData: { isAuthenticated: boolean; biometricToken?: string }) => void;
type BiometricTokenUpdatedCallback = (eventData: { isUpdated: boolean }) => void;

/**
* Web Apps can adjust the appearance of the interface to match the Telegram
* user's app in real time. This object contains the user's current theme
Expand Down Expand Up @@ -389,6 +398,11 @@ interface ThemeParams {
* Also available as the CSS variable `var(--tg-theme-section-header-text-color)`.
*/
section_header_text_color?: `#${string}`;
/**
* **Bot API 7.6+** Section separator color in the `#RRGGBB` format.
* Also available as the CSS variable `var(--tg-theme-section-separator-color)`.
*/
section_separator_color?: string;
/**
* **Bot API 7.0+** Subtitle text color in the `#RRGGBB` format.
* Also available as the CSS variable `var(--tg-theme-subtitle-text-color)`.
Expand Down Expand Up @@ -640,7 +654,7 @@ interface CloudStorage {
* null and the second argument will be a boolean indicating whether the
* value was stored.
*/
setItem(key: string, value: string, callback?: (error: string | null, success: null | true) => void): CloudStorage;
setItem(key: string, value: string, callback?: CloudStorageSetItemCallback): CloudStorage;
/**
* A method that receives a value from the cloud storage using
* the specified key.
Expand All @@ -652,7 +666,7 @@ interface CloudStorage {
* success, the first argument will be null and the value will be passed
* as the second argument.
*/
getItem(key: string, callback?: (error: string | null, value: null | string) => void): CloudStorage;
getItem(key: string, callback?: CloudStorageGetItemCallback): CloudStorage;
/**
* A method that receives values from the cloud storage using the specified
* keys.
Expand All @@ -664,10 +678,7 @@ interface CloudStorage {
* success, the first argument will be null and the values will be passed
* as the second argument.
*/
getItems(
keys: string[],
callback?: (error: string | null, values: null | Record<string, string>) => void,
): CloudStorage;
getItems(keys: string[], callback?: CloudStorageGetItemsCallback): CloudStorage;
/**
* A method that removes a value from the cloud storage using the specified
* key.
Expand All @@ -680,7 +691,7 @@ interface CloudStorage {
* argument will be null and the second argument will be a boolean
* indicating whether the value was removed.
*/
removeItem(key: string, callback?: (error: string | null, success: null | true) => void): CloudStorage;
removeItem(key: string, callback?: CloudStorageRemoveItemCallback): CloudStorage;
/**
* A method that removes values from the cloud storage using the specified
* keys.
Expand All @@ -693,7 +704,7 @@ interface CloudStorage {
* argument will be null and the second argument will be a boolean
* indicating whether the values were removed.
*/
removeItems(keys: string[], callback?: (error: string | null, success: null | true) => void): CloudStorage;
removeItems(keys: string[], callback?: CloudStorageRemoveItemsCallback): CloudStorage;
/**
* A method that receives the list of all keys stored in the cloud storage.
*
Expand All @@ -702,9 +713,16 @@ interface CloudStorage {
* first argument will be null and the list of keys will be passed as the
* second argument.
*/
getKeys(callback?: (error: string | null, keys: null | string[]) => void): CloudStorage;
getKeys(callback?: CloudStorageGetKeysCallback): CloudStorage;
}

type CloudStorageSetItemCallback = (error: string | null, success: null | true) => void;
type CloudStorageGetItemCallback = (error: string | null, value: null | string) => void;
type CloudStorageGetItemsCallback = (error: string | null, values: null | Record<string, string>) => void;
type CloudStorageRemoveItemCallback = (error: string | null, success: null | true) => void;
type CloudStorageRemoveItemsCallback = (error: string | null, success: null | true) => void;
type CloudStorageGetKeysCallback = (error: string | null, keys: null | string[]) => void;

/**
* This object controls biometrics on the device. Before the first use
* of this object, it needs to be initialized using the init method.
Expand Down Expand Up @@ -755,7 +773,7 @@ interface BiometricManager {
*/
requestAccess: (
params: BiometricRequestAccessParams,
callback?: (isAccessGranted: boolean) => void,
callback?: BiometricRequestAccessCallback,
) => BiometricManager;
/**
* A method that authenticates the user using biometrics according to the params
Expand All @@ -767,15 +785,18 @@ interface BiometricManager {
*/
authenticate: (
params: BiometricAuthenticateParams,
callback?: (isAuthenticated: boolean, biometricToken?: string) => void,
callback?: BiometricAuthenticateCallback,
) => BiometricManager;
/**
* A method that updates the biometric token in secure storage on the device.
* To remove the token, pass an empty string. If an optional callback parameter
* was passed, the callback function will be called and the first argument will be
* a boolean indicating whether the token was updated.
*/
updateBiometricToken: (token: string, callback?: (applied: boolean) => void) => BiometricManager;
updateBiometricToken: (
token: string,
callback?: BiometricUpdateBiometricTokenCallback,
) => BiometricManager;
/**
* A method that opens the biometric access settings for bots. Useful when you
* need to request biometrics access to users who haven't granted it yet.
Expand All @@ -786,6 +807,10 @@ interface BiometricManager {
openSettings: () => BiometricManager;
}

type BiometricRequestAccessCallback = (isAccessGranted: boolean) => void;
type BiometricAuthenticateCallback = (isAuthenticated: boolean, biometricToken?: string) => void;
type BiometricUpdateBiometricTokenCallback = (applied: boolean) => void;

/**
* This object describes the native popup for requesting permission to use biometrics.
*/
Expand Down
2 changes: 1 addition & 1 deletion types/telegram-web-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"private": true,
"name": "@types/telegram-web-app",
"version": "7.2.9999",
"version": "7.3.9999",
"nonNpm": "conflict",
"nonNpmDescription": "telegram-web-app",
"projects": [
Expand Down
4 changes: 4 additions & 0 deletions types/telegram-web-app/telegram-web-app-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,7 @@ app.onEvent("contactRequested", (req) => {

app.BiometricManager.init(() => console.log("init"));
app.BiometricManager.openSettings();

app.isVerticalSwipesEnabled; // $ExpectType boolean
app.enableVerticalSwipes();
app.disableVerticalSwipes();