Nikolay Tatarinov
fa22976e75
- Updated Mini App design guidelines to include detailed instructions on UI changes, accessibility rules, and verification processes. - Refactored multiple components to utilize `MiniAppScreen` and `MiniAppScreenContent` for consistent layout structure across the application. - Improved error handling in `GlobalError` and `NotFound` components by integrating new layout components for better user experience. - Introduced new hooks for admin functionality, streamlining access checks and data loading processes. - Enhanced documentation to reflect changes in design policies and component usage, ensuring clarity for future development.
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
/**
|
|
* Telegram interaction policy hooks.
|
|
* Policy defaults: keep vertical swipes enabled; enable closing confirmation only
|
|
* for stateful flows where user input can be lost.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
function getTelegramWebApp(): {
|
|
enableVerticalSwipes?: () => void;
|
|
disableVerticalSwipes?: () => void;
|
|
enableClosingConfirmation?: () => void;
|
|
disableClosingConfirmation?: () => void;
|
|
} | null {
|
|
if (typeof window === "undefined") return null;
|
|
return (window as unknown as { Telegram?: { WebApp?: unknown } }).Telegram
|
|
?.WebApp as {
|
|
enableVerticalSwipes?: () => void;
|
|
disableVerticalSwipes?: () => void;
|
|
enableClosingConfirmation?: () => void;
|
|
disableClosingConfirmation?: () => void;
|
|
} | null;
|
|
}
|
|
|
|
/**
|
|
* Keep Telegram vertical swipes enabled by default.
|
|
* Disable only for screens with conflicting in-app gestures.
|
|
*/
|
|
export function useTelegramVerticalSwipePolicy(disableVerticalSwipes: boolean) {
|
|
useEffect(() => {
|
|
const webApp = getTelegramWebApp();
|
|
if (!webApp) return;
|
|
try {
|
|
if (disableVerticalSwipes) {
|
|
webApp.disableVerticalSwipes?.();
|
|
} else {
|
|
webApp.enableVerticalSwipes?.();
|
|
}
|
|
} catch {
|
|
// Ignore unsupported clients.
|
|
}
|
|
return () => {
|
|
if (!disableVerticalSwipes) return;
|
|
try {
|
|
webApp.enableVerticalSwipes?.();
|
|
} catch {
|
|
// Ignore unsupported clients.
|
|
}
|
|
};
|
|
}, [disableVerticalSwipes]);
|
|
}
|
|
|
|
/**
|
|
* Enable confirmation before closing Mini App for stateful flows.
|
|
*/
|
|
export function useTelegramClosingConfirmation(enabled: boolean) {
|
|
useEffect(() => {
|
|
const webApp = getTelegramWebApp();
|
|
if (!webApp) return;
|
|
try {
|
|
if (enabled) {
|
|
webApp.enableClosingConfirmation?.();
|
|
} else {
|
|
webApp.disableClosingConfirmation?.();
|
|
}
|
|
} catch {
|
|
// Ignore unsupported clients.
|
|
}
|
|
return () => {
|
|
if (!enabled) return;
|
|
try {
|
|
webApp.disableClosingConfirmation?.();
|
|
} catch {
|
|
// Ignore unsupported clients.
|
|
}
|
|
};
|
|
}, [enabled]);
|
|
}
|