feat: optimized bot adding

Author: Exerbaind

frontend/src/Routes.tsx

@@ -1,7 +1,6 @@
 import {
   AddBotToChatPage,
   ChatPage,
-  CheckingBotAddedPage,
   MainPage,
   ConditionPage,
   GrantPermissionsPage,
@@ -21,7 +20,6 @@ export const ROUTES_NAME = {
   CHAT_CONDITION: '/admin/chat/:chatSlug/condition/:conditionId/:conditionType',
   CHAT_NEW_CONDITION: '/admin/chat/:chatSlug/new-condition/:conditionType',
   GRANT_PERMISSIONS: '/admin/grant-permissions/:chatSlug',
-  CHECKING_BOT_ADDED: '/admin/checking-bot-added/:chatSlug',
   BOT_ADDED_SUCCESS: '/admin/bot-added-success/:chatSlug',
   CLIENT_TASKS: '/client/:clientChatSlug',
   CLIENT_CONNECTED_WALLET: '/client/:clientChatSlug/connected-wallet',
@@ -44,10 +42,6 @@ export default (
       path={ROUTES_NAME.GRANT_PERMISSIONS}
       element={<GrantPermissionsPage />}
     />
-    <Route
-      path={ROUTES_NAME.CHECKING_BOT_ADDED}
-      element={<CheckingBotAddedPage />}
-    />
     <Route
       path={ROUTES_NAME.BOT_ADDED_SUCCESS}
       element={<BotAddedSuccessPage />}

frontend/src/pages/admin/AddBotToChatPage/AddBotToChatPage.tsx

@@ -1,10 +1,13 @@
+import sandwatchLottie from '@assets/sandwatch.json'
 import {
   Block,
   Icon,
   PageLayout,
+  StickerPlayer,
   TelegramBackButton,
   TelegramMainButton,
   Text,
+  useToast,
 } from '@components'
 import { useAppNavigation, useInterval } from '@hooks'
 import { ROUTES_NAME } from '@routes'
@@ -20,10 +23,16 @@ const webApp = window.Telegram.WebApp
 export const AddBotToChatPage = () => {
   const { appNavigate } = useAppNavigation()
 
-  const { fetchAdminUserChatsAction } = useChatActions()
+  const { fetchAdminUserChatsAction, fetchChatAction } = useChatActions()
+  const [checkingTries, setCheckingTries] = useState(0)
 
   const [currentChats, setCurrentChats] = useState<AdminChat[]>([])
-  const [isCheckingChats, setIsCheckingChats] = useState(false)
+  const [isCheckingNewChat, setIsCheckingNewChat] = useState(false)
+  const [isCheckingChatPermissions, setIsCheckingChatPermissions] =
+    useState(false)
+  const [newChat, setNewChat] = useState<AdminChat | null>(null)
+
+  const { showToast } = useToast()
 
   const navigateToMainPage = useCallback(() => {
     appNavigate({ path: ROUTES_NAME.MAIN })
@@ -33,69 +42,160 @@ export const AddBotToChatPage = () => {
     webApp.openTelegramLink(
       `${config.botLink}?startgroup=&admin=restrict_members+invite_users`
     )
-    setIsCheckingChats(true)
+    setIsCheckingNewChat(true)
   }, [])
 
-  const poollingChats = async () => {
+  const fetchAdminUserChats = async () => {
     try {
       const data = await fetchAdminUserChatsAction()
+      setCurrentChats(data)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const poollingNewChat = async () => {
+    try {
+      const data = await fetchAdminUserChatsAction()
+
       const noNewChats = data?.length === currentChats?.length
+      setCheckingTries(checkingTries + 1)
       if (noNewChats) return
 
       const newChat = findNewChat(data, currentChats, 'slug')
 
       if (newChat.length) {
-        setIsCheckingChats(false)
-        appNavigate({
-          path: ROUTES_NAME.CHECKING_BOT_ADDED,
-          params: { chatSlug: newChat[0].slug },
-        })
+        setNewChat(newChat[0])
+        setIsCheckingNewChat(false)
+        setIsCheckingChatPermissions(true)
       }
     } catch (error) {
       console.error(error)
     }
   }
 
-  const fetchAdminUserChats = async () => {
+  const poollingChatPermissions = async (chatSlug: string) => {
+    if (!chatSlug) return
     try {
-      const data = await fetchAdminUserChatsAction()
-      setCurrentChats(data)
+      const { chat } = await fetchChatAction(chatSlug)
+
+      if (!chat?.insufficientPrivileges) {
+        appNavigate({
+          path: ROUTES_NAME.BOT_ADDED_SUCCESS,
+          params: { chatSlug },
+        })
+        setIsCheckingChatPermissions(false)
+      }
     } catch (error) {
       console.error(error)
     }
   }
 
   useInterval(
     () => {
-      poollingChats()
+      poollingNewChat()
+    },
+    1500,
+    {
+      enabled: isCheckingNewChat,
+      immediate: false,
+    }
+  )
+
+  useInterval(
+    () => {
+      if (!newChat) return
+      poollingChatPermissions(newChat?.slug)
     },
     1500,
     {
-      enabled: isCheckingChats,
+      enabled: isCheckingChatPermissions,
       immediate: false,
     }
   )
 
+  useEffect(() => {
+    if (checkingTries > 10) {
+      resetPolling()
+      setCheckingTries(0)
+      showToast({
+        message: 'Please check if the bot was added to the group or channel',
+        type: 'error',
+      })
+    }
+  }, [checkingTries])
+
   useEffect(() => {
     fetchAdminUserChats()
   }, [])
 
+  let Component = null
+
+  if (isCheckingNewChat || isCheckingChatPermissions) {
+    const title =
+      (isCheckingNewChat &&
+        'Checking If the Bot Was Added to Your Group or Channel') ||
+      (isCheckingChatPermissions && 'Checking Bot Permissions')
+    Component = (
+      <>
+        <StickerPlayer lottie={sandwatchLottie} />
+        <Block margin="top" marginValue={16}>
+          <Text type="title" align="center" weight="bold">
+            {title}
+          </Text>
+        </Block>
+        <Block margin="top" marginValue={12}>
+          <Text type="text" align="center">
+            This may take a moment — the check usually doesn't take long
+          </Text>
+        </Block>
+      </>
+    )
+  } else {
+    Component = (
+      <>
+        <Icon name="gatewayBot" size={112} />
+        <Block margin="top" marginValue={16}>
+          <Text type="title" align="center" weight="bold">
+            Add Gateway Bot to The Group or Channel
+          </Text>
+        </Block>
+        <Block margin="top" marginValue={12}>
+          <Text align="center" type="text">
+            Gateway bot require admin access to control who can join the group
+            or channel.Telegram bots can’t read messages inside the group chat.
+          </Text>
+        </Block>
+      </>
+    )
+  }
+
+  const resetPolling = () => {
+    setIsCheckingNewChat(false)
+    setIsCheckingChatPermissions(false)
+    setNewChat(null)
+  }
+
+  const handleClick = () => {
+    if (isCheckingNewChat || isCheckingChatPermissions) {
+      resetPolling()
+    } else {
+      addGatewayBot()
+    }
+  }
+
   return (
     <PageLayout center>
       <TelegramBackButton onClick={navigateToMainPage} />
-      <TelegramMainButton text="Add Group or Channel" onClick={addGatewayBot} />
-      <Icon name="gatewayBot" size={112} />
-      <Block margin="top" marginValue={16}>
-        <Text type="title" align="center" weight="bold">
-          Add Gateway Bot to The Group or Channel
-        </Text>
-      </Block>
-      <Block margin="top" marginValue={12}>
-        <Text align="center" type="text">
-          Gateway bot require admin access to control who can join the group or
-          channel.Telegram bots can’t read messages inside the group chat.
-        </Text>
-      </Block>
+      <TelegramMainButton
+        text={
+          isCheckingNewChat || isCheckingChatPermissions
+            ? 'Cancel'
+            : 'Add Group or Channel'
+        }
+        onClick={handleClick}
+      />
+      {Component}
     </PageLayout>
   )
 }