Add telegram loading wrapper

dappforce · Jun 12, 2024 · e03b44c · e03b44c
1 parent 28081ea
commit e03b44c
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 43 deletions.
diff --git a/src/components/HeadConfig.tsx b/src/components/HeadConfig.tsx
@@ -1,5 +1,4 @@
 import Head from 'next/head'
-import Script from 'next/script'
 
 export type HeadConfigProps = {
   title?: string | null
@@ -38,7 +37,6 @@ export default function HeadConfig({
 
   return (
     <>
-      <Script src='https://telegram.org/js/telegram-web-app.js' />
       <Head>
         <title>{usedTitle}</title>
         <meta name='description' content={usedDesc} />

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,13 +1,12 @@
 import ErrorBoundary from '@/components/ErrorBoundary'
 import HeadConfig, { HeadConfigProps } from '@/components/HeadConfig'
+import Spinner from '@/components/Spinner'
 import OauthLoadingModal from '@/components/auth/OauthLoadingModal'
 import GlobalModals from '@/components/modals/GlobalModals'
 import { ReferralUrlChanger } from '@/components/referral/ReferralUrlChanger'
 import { env } from '@/env.mjs'
 import useIsInIframe from '@/hooks/useIsInIframe'
 import { ConfigProvider } from '@/providers/config/ConfigProvider'
-import NeynarLoginProvider from '@/providers/config/NeynarLoginProvider'
-import TelegramLoginProvider from '@/providers/config/TelegramLoginProvider'
 import EvmProvider from '@/providers/evm/EvmProvider'
 import { getLinkedIdentityQuery } from '@/services/datahub/identity/query'
 import { useDatahubSubscription } from '@/services/datahub/subscription-aggregator'
@@ -26,7 +25,7 @@ import { SessionProvider } from 'next-auth/react'
 import { ThemeProvider } from 'next-themes'
 import type { AppProps } from 'next/app'
 import Script from 'next/script'
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Toaster } from 'sonner'
 import urlJoin from 'url-join'
 
@@ -51,12 +50,28 @@ export default function App(props: AppProps<AppCommonProps>) {
       }
       session={props.pageProps.session}
     >
+      <Script id='gtm' strategy='afterInteractive'>
+        {`
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','GTM-MQZ9PG2W');
+    `}
+      </Script>
       <ConfigProvider>
         <Styles
           alwaysShowScrollbarOffset={props.pageProps.alwaysShowScrollbarOffset}
         />
         <SDKProvider>
-          <AppContent {...props} />
+          <ThemeProvider
+            attribute='class'
+            defaultTheme='dark'
+            forcedTheme='dark'
+          >
+            <HeadConfig {...props.pageProps.head} />
+            <AppContent {...props} />
+          </ThemeProvider>
         </SDKProvider>
       </ConfigProvider>
     </SessionProvider>
@@ -121,51 +136,64 @@ function AppContent({ Component, pageProps }: AppProps<AppCommonProps>) {
     initAllStores()
   }, [])
 
-  useEffect(() => {
-    const telegram = window.Telegram as any
+  return (
+    <TelegramScriptWrapper>
+      <QueryProvider dehydratedState={dehydratedState}>
+        <DatahubSubscriber />
+        <ToasterConfig />
+        <ReferralUrlChanger />
+
+        <GlobalModals />
+        <SessionAccountChecker />
+        <OauthLoadingModal />
+        <div className={cx('font-sans')}>
+          <ErrorBoundary>
+            <EvmProvider>
+              <Component {...props} />
+            </EvmProvider>
+          </ErrorBoundary>
+        </div>
+      </QueryProvider>
+    </TelegramScriptWrapper>
+  )
+}
 
-    const webApp = telegram?.WebApp
+function TelegramScriptWrapper({ children }: { children: React.ReactNode }) {
+  const [isExpanded, setIsExpanded] = useState(false)
 
+  const onLoad = () => {
+    const telegram = window.Telegram as any
+    const webApp = telegram?.WebApp
     if (webApp) {
       webApp.ready()
-
       webApp.expand()
+      webApp.onEvent('viewportChanged', () => {
+        if (webApp.isExpanded) {
+          setIsExpanded(true)
+        }
+      })
     }
-  })
+  }
+
+  if (!isExpanded) {
+    children = (
+      <div className='flex h-screen w-full flex-col items-center justify-center'>
+        <div className='flex items-center gap-2 text-text-muted'>
+          <Spinner />
+          <span>Loading...</span>
+        </div>
+      </div>
+    )
+  }
 
   return (
-    <ThemeProvider attribute='class' defaultTheme='dark' forcedTheme='dark'>
-      <QueryProvider dehydratedState={dehydratedState}>
-        <TelegramLoginProvider>
-          <NeynarLoginProvider>
-            <DatahubSubscriber />
-            <ToasterConfig />
-            <ReferralUrlChanger />
-            <HeadConfig {...head} />
-            <Script id='gtm' strategy='afterInteractive'>
-              {`
-                  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-                  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-                  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-                  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-                  })(window,document,'script','dataLayer','GTM-MQZ9PG2W');
-                `}
-            </Script>
-
-            <GlobalModals />
-            <SessionAccountChecker />
-            <OauthLoadingModal />
-            <div className={cx('font-sans')}>
-              <ErrorBoundary>
-                <EvmProvider>
-                  <Component {...props} />
-                </EvmProvider>
-              </ErrorBoundary>
-            </div>
-          </NeynarLoginProvider>
-        </TelegramLoginProvider>
-      </QueryProvider>
-    </ThemeProvider>
+    <>
+      <Script
+        onLoad={onLoad}
+        src='https://telegram.org/js/telegram-web-app.js'
+      />
+      {children}
+    </>
   )
 }