Fixed telegram login issue (#5142)

* Fixed telegram login issue * better tg login button
charmverse · Dec 19, 2024 · 3ca4fa7 · 3ca4fa7
1 parent e151aba
commit 3ca4fa7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 50 deletions.
diff --git a/components/_app/components/ConnectedAccounts.tsx b/components/_app/components/ConnectedAccounts.tsx
@@ -137,27 +137,25 @@ function TelegramAccountConnect({
   const { connectTelegram, isConnectingToTelegram } = useTelegramConnect();
 
   return (
-    <>
-      <ConnectedAccount
-        label='Telegram'
-        icon={<IdentityIcon type='Telegram' size='small' />}
-        required={isTelegramRequired}
-        disabled={!!connectedTelegramAccount || isConnectingToTelegram}
-        onClick={() => {
-          setIsOnboardingModalOpen(true);
-          connectTelegram();
-        }}
-      >
-        {!connectedTelegramAccount ? (
-          <Typography variant='subtitle1'>Connect with Telegram</Typography>
-        ) : (
-          <Typography variant='subtitle1'>
-            Connected as {(connectedTelegramAccount.account as unknown as Partial<TelegramAccount>)?.username}
-          </Typography>
-        )}
-      </ConnectedAccount>
+    <ConnectedAccount
+      label='Telegram'
+      icon={<IdentityIcon type='Telegram' size='small' />}
+      required={isTelegramRequired}
+      disabled={!!connectedTelegramAccount || isConnectingToTelegram}
+      onClick={() => {
+        setIsOnboardingModalOpen(true);
+        connectTelegram();
+      }}
+    >
+      {!connectedTelegramAccount ? (
+        <Typography variant='subtitle1'>Connect with Telegram</Typography>
+      ) : (
+        <Typography variant='subtitle1'>
+          Connected as {(connectedTelegramAccount.account as unknown as Partial<TelegramAccount>)?.username}
+        </Typography>
+      )}
       <TelegramLoginIframe />
-    </>
+    </ConnectedAccount>
   );
 }
 

diff --git a/components/settings/account/components/NewIdentityModal.tsx b/components/settings/account/components/NewIdentityModal.tsx
@@ -23,7 +23,7 @@ import type { TelegramAccount } from 'lib/telegram/interfaces';
 import { lowerCaseEqual } from 'lib/utils/strings';
 
 import IdentityProviderItem from './IdentityProviderItem';
-import { TELEGRAM_BOT_ID } from './TelegramLoginIframe';
+import { TELEGRAM_BOT_ID, TelegramLoginIframe } from './TelegramLoginIframe';
 
 const WarpcastLogin = dynamic(
   () => import('components/login/components/WarpcastLogin').then((module) => module.WarpcastLogin),
@@ -168,6 +168,7 @@ export function NewIdentityModal({ isOpen, onClose }: Props) {
                 }}
               >
                 Connect
+                <TelegramLoginIframe />
               </Button>
             </IdentityProviderItem>
           )}

diff --git a/components/settings/account/components/TelegramLoginIframe.tsx b/components/settings/account/components/TelegramLoginIframe.tsx
@@ -10,36 +10,14 @@ export function loginWithTelegram(callback: (user: TelegramAccount) => void) {
   window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID, request_access: true }, callback);
 }
 
-export class TelegramLoginIframe extends React.Component<{
-  widgetVersion?: string;
-  children?: React.ReactNode;
-}> {
-  instance: HTMLDivElement | null = null;
-
-  componentDidMount() {
+export function TelegramLoginIframe() {
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
     const script = document.createElement('script');
-    script.src = `https://telegram.org/js/telegram-widget.js?${this.props.widgetVersion || ''}`;
+    script.src = 'https://telegram.org/js/telegram-widget.js?22';
     script.async = true;
-    this.instance?.appendChild(script);
-  }
+    ref.current?.appendChild(script);
+  }, []);
 
-  render() {
-    return (
-      <div
-        style={{
-          cursor: 'pointer',
-          opacity: 0,
-          pointerEvents: 'none',
-          position: 'absolute',
-          width: 0,
-          height: 0
-        }}
-        ref={(component) => {
-          this.instance = component;
-        }}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
+  return <div ref={ref} />;
 }