From 5b2900850938b62d565fbd6dcb14274eb595d5eb Mon Sep 17 00:00:00 2001
From: Razzwan <razvanlomov@gmail.com>
Date: Mon, 13 Nov 2023 14:16:33 +0300
Subject: [PATCH] feat(useIsVersionAtLeast): improved to useMemo

---
 package.json               |  2 +-
 src/TwaLoader.tsx          | 20 ++++++++++++++++++++
 src/useIsVersionAtLeast.ts | 10 +++++++---
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 20ed927..9d6e6a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@altiore/twa",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "React components for Telegram WebApp",
   "source": "./src/index.ts",
   "type": "module",
diff --git a/src/TwaLoader.tsx b/src/TwaLoader.tsx
index 89b91ab..e4b8758 100644
--- a/src/TwaLoader.tsx
+++ b/src/TwaLoader.tsx
@@ -3,6 +3,8 @@ import React, { FC, useEffect } from 'react';
 import { useTwa } from './useTwa';
 import { useVersionAtLeast } from './useVersionAtLeast';
 import useWebApp from './useWebApp';
+import { useIsVersionAtLeast } from './useIsVersionAtLeast';
+import useShowPopup from './useShowPopup';
 
 interface IProps {
 	loading?: React.JSX.Element;
@@ -30,6 +32,24 @@ export const TwaLoader: FC<IProps> = ({
 
 	const isCorrectVersion = useVersionAtLeast(minVersion ?? '6.2');
 
+	const isVersionAtLeast = useIsVersionAtLeast();
+
+	const showPopup = useShowPopup();
+
+	useEffect(() => {
+		if (
+			isVersionAtLeast('6.2') &&
+			minVersion &&
+			parseFloat(minVersion.toString()) > 6.2
+		) {
+			showPopup({
+				message: `Please update your Telegram app to the latest version to use this app. Minimum supported version is "${minVersion}"`,
+			})
+				.then()
+				.catch(console.error);
+		}
+	}, [minVersion, isVersionAtLeast, showPopup]);
+
 	const webApp = useWebApp();
 
 	if (isLoading) {
diff --git a/src/useIsVersionAtLeast.ts b/src/useIsVersionAtLeast.ts
index 9835480..cafc093 100644
--- a/src/useIsVersionAtLeast.ts
+++ b/src/useIsVersionAtLeast.ts
@@ -1,5 +1,5 @@
 import { useWebApp } from './core';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 /**
  * A hook that shows version minimum check
@@ -13,8 +13,12 @@ export type VersionAtLeastFunction = (version: string | number) => boolean;
 export const useIsVersionAtLeast = (): VersionAtLeastFunction => {
 	const WebApp = useWebApp();
 
+	const _isVersionAtLeast = useMemo(() => {
+		return WebApp?.isVersionAtLeast;
+	}, [WebApp]);
+
 	return useCallback(
-		(version: string | number) => WebApp?.isVersionAtLeast?.(version) ?? false,
-		[WebApp],
+		(version: string | number) => _isVersionAtLeast?.(version) ?? false,
+		[_isVersionAtLeast],
 	);
 };