From 1b0ff541f486aaf5dbcffde8596c48aac409a53f Mon Sep 17 00:00:00 2001 From: antonmazhuto Date: Mon, 13 Jan 2025 17:57:12 +0300 Subject: [PATCH 1/5] Add loading button after telegram social login --- src/components/Login/LoginPage.tsx | 29 ++++++++++++------- .../TelegramLoginButton.tsx | 29 ++++++++++++++++++- 2 files changed, 46 insertions(+), 12 deletions(-) diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index 22c14245..c72b6143 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { LoadingButton, Stack, @@ -60,6 +60,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log const { isGame } = useTheme(); const contextStore = useAppContextStore(); const store = useOutletContext(); + const [loadingTelegram, setLoadingTelegram] = useState(false); const emailHint = loginHint || searchParams.get('emailHint') || ''; const skipLoginIntro = Boolean(contextStore.whiteLabel?.skipLoginIntro); @@ -149,17 +150,23 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log }; const onTelegramAuth = async (authData: any) => { - console.log('Telegram login!'); - console.log(authData); - const token = await AuthApiService.getTokenByTelegramLoginWidget(authData); - console.log('ID token!'); - console.log(token); - if (token) { - onRequestLogin(token); - } else { - console.error('Telegram authorization error'); + setLoadingTelegram(true); + try { + console.log('Telegram login!', authData); + const token = await AuthApiService.getTokenByTelegramLoginWidget(authData); + console.log('ID token!', token); + if (token) { + onRequestLogin(token); + } else { + console.error('Telegram authorization error'); + } + } catch (error) { + console.error('Error during Telegram login', error); + } finally { + setTimeout(() => setLoadingTelegram(false), 10000); } }; + return ( - + )} diff --git a/src/components/TelegramLoginButton/TelegramLoginButton.tsx b/src/components/TelegramLoginButton/TelegramLoginButton.tsx index cecaa0fa..fe5463b2 100644 --- a/src/components/TelegramLoginButton/TelegramLoginButton.tsx +++ b/src/components/TelegramLoginButton/TelegramLoginButton.tsx @@ -2,6 +2,8 @@ import PropTypes from 'prop-types'; import React, { useRef, useEffect } from 'react'; import { IconButton, TelegramIcon } from '@cere/ui'; import { TELEGRAM_BOT_ID, TELEGRAM_BOT_USERNAME } from '~/constants'; +import CircularProgress from '@mui/material/CircularProgress'; +import { Box } from '@mui/material'; export interface TelegramUser { id: number; @@ -21,6 +23,7 @@ interface Props { dataOnauth?: (x: any) => void; buttonSize?: 'large' | 'medium' | 'small'; wrapperProps?: React.HTMLProps; + loading?: boolean; } export interface Options { @@ -49,6 +52,7 @@ export const TelegramLoginButton: React.FC = ({ dataOnauth, cornerRadius, requestAccess = true, + loading, }) => { const ref = useRef(null); @@ -97,15 +101,37 @@ export const TelegramLoginButton: React.FC = ({
-
+
{ window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth); }} + sx={{ + position: 'relative', + }} + type="submit" > + {loading && ( + + + + )}
@@ -122,4 +148,5 @@ TelegramLoginButton.propTypes = { dataOnauth: PropTypes.func, dataAuthUrl: PropTypes.string, buttonSize: PropTypes.oneOf(['large', 'medium', 'small']), + loading: PropTypes.bool, }; From f5f9fba4e75dd73764fec26e1e650aadbe7c9bae Mon Sep 17 00:00:00 2001 From: antonmazhuto Date: Mon, 13 Jan 2025 18:12:21 +0300 Subject: [PATCH 2/5] Changed logic of loading state --- src/components/Login/LoginPage.tsx | 26 +++++++------------ .../TelegramLoginButton.tsx | 7 +++-- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index c72b6143..0da8147b 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -60,7 +60,6 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log const { isGame } = useTheme(); const contextStore = useAppContextStore(); const store = useOutletContext(); - const [loadingTelegram, setLoadingTelegram] = useState(false); const emailHint = loginHint || searchParams.get('emailHint') || ''; const skipLoginIntro = Boolean(contextStore.whiteLabel?.skipLoginIntro); @@ -150,20 +149,15 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log }; const onTelegramAuth = async (authData: any) => { - setLoadingTelegram(true); - try { - console.log('Telegram login!', authData); - const token = await AuthApiService.getTokenByTelegramLoginWidget(authData); - console.log('ID token!', token); - if (token) { - onRequestLogin(token); - } else { - console.error('Telegram authorization error'); - } - } catch (error) { - console.error('Error during Telegram login', error); - } finally { - setTimeout(() => setLoadingTelegram(false), 10000); + console.log('Telegram login!'); + console.log(authData); + const token = await AuthApiService.getTokenByTelegramLoginWidget(authData); + console.log('ID token!'); + console.log(token); + if (token) { + onRequestLogin(token); + } else { + console.error('Telegram authorization error'); } }; @@ -241,7 +235,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log {SUPPORTED_SOCIAL_LOGINS.includes('telegram') && (
- +
)} diff --git a/src/components/TelegramLoginButton/TelegramLoginButton.tsx b/src/components/TelegramLoginButton/TelegramLoginButton.tsx index fe5463b2..e1c59342 100644 --- a/src/components/TelegramLoginButton/TelegramLoginButton.tsx +++ b/src/components/TelegramLoginButton/TelegramLoginButton.tsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { useRef, useEffect } from 'react'; +import React, { useRef, useEffect, useState } from 'react'; import { IconButton, TelegramIcon } from '@cere/ui'; import { TELEGRAM_BOT_ID, TELEGRAM_BOT_USERNAME } from '~/constants'; import CircularProgress from '@mui/material/CircularProgress'; @@ -23,7 +23,6 @@ interface Props { dataOnauth?: (x: any) => void; buttonSize?: 'large' | 'medium' | 'small'; wrapperProps?: React.HTMLProps; - loading?: boolean; } export interface Options { @@ -52,8 +51,8 @@ export const TelegramLoginButton: React.FC = ({ dataOnauth, cornerRadius, requestAccess = true, - loading, }) => { + const [loading, setLoading] = useState(false); const ref = useRef(null); useEffect(() => { @@ -107,6 +106,7 @@ export const TelegramLoginButton: React.FC = ({ variant="outlined" onClick={() => { window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth); + setLoading(true); }} sx={{ position: 'relative', @@ -148,5 +148,4 @@ TelegramLoginButton.propTypes = { dataOnauth: PropTypes.func, dataAuthUrl: PropTypes.string, buttonSize: PropTypes.oneOf(['large', 'medium', 'small']), - loading: PropTypes.bool, }; From 173d0f9b7501aee65b2ab0c148093a90213d427a Mon Sep 17 00:00:00 2001 From: antonmazhuto Date: Mon, 13 Jan 2025 18:15:46 +0300 Subject: [PATCH 3/5] Changed logic of loading state --- src/components/Login/LoginPage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index 0da8147b..22c14245 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo } from 'react'; import { LoadingButton, Stack, @@ -160,7 +160,6 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log console.error('Telegram authorization error'); } }; - return ( Date: Mon, 13 Jan 2025 18:20:48 +0300 Subject: [PATCH 4/5] Disable button --- src/components/TelegramLoginButton/TelegramLoginButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TelegramLoginButton/TelegramLoginButton.tsx b/src/components/TelegramLoginButton/TelegramLoginButton.tsx index e1c59342..002e782e 100644 --- a/src/components/TelegramLoginButton/TelegramLoginButton.tsx +++ b/src/components/TelegramLoginButton/TelegramLoginButton.tsx @@ -108,6 +108,7 @@ export const TelegramLoginButton: React.FC = ({ window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth); setLoading(true); }} + disabled={loading} sx={{ position: 'relative', }} From 8e43cc7324b9e6c99153e006a881a7d787ffc5a3 Mon Sep 17 00:00:00 2001 From: antonmazhuto Date: Mon, 13 Jan 2025 18:58:59 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D1=87=D0=B8?= =?UTF-8?q?=D0=BA=20=D0=BD=D0=B0=20=D0=B2=D1=81=D0=B5=D0=BC=20=D1=8D=D0=BA?= =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B5=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Login/LoginPage.tsx | 33 +++++++++++++++++-- .../TelegramLoginButton.tsx | 32 ++++-------------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index 22c14245..450d354a 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { LoadingButton, Stack, @@ -14,6 +14,8 @@ import { Divider, styled, useTheme, + Loading, + Logo, } from '@cere-wallet/ui'; import { getGlobalStorage } from '@cere-wallet/storage'; import * as yup from 'yup'; @@ -30,6 +32,7 @@ import { getTokenWithFacebook, getTokenWithGoogle } from './auth.service'; import { AppContextBanner } from '../AppContextBanner'; import { PoweredBy } from './PoweredBy'; import { TelegramLoginButton } from '~/components'; +import { Box } from '@mui/material'; interface LogInProps { variant?: 'signin' | 'signup'; @@ -60,6 +63,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log const { isGame } = useTheme(); const contextStore = useAppContextStore(); const store = useOutletContext(); + const [loadingTelegram, setLoadingTelegram] = useState(false); const emailHint = loginHint || searchParams.get('emailHint') || ''; const skipLoginIntro = Boolean(contextStore.whiteLabel?.skipLoginIntro); @@ -160,6 +164,11 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log console.error('Telegram authorization error'); } }; + + const handleOnTelegramLogin = useCallback((val: boolean) => { + setLoadingTelegram(val); + }, []); + return ( + {loadingTelegram && ( + + + + + + )} {connectScreenMainTitle} @@ -234,7 +263,7 @@ export const LoginPage = ({ variant = 'signin', loginHint, onRequestLogin }: Log {SUPPORTED_SOCIAL_LOGINS.includes('telegram') && (
- +
)} diff --git a/src/components/TelegramLoginButton/TelegramLoginButton.tsx b/src/components/TelegramLoginButton/TelegramLoginButton.tsx index 002e782e..1cf7bdba 100644 --- a/src/components/TelegramLoginButton/TelegramLoginButton.tsx +++ b/src/components/TelegramLoginButton/TelegramLoginButton.tsx @@ -1,9 +1,7 @@ import PropTypes from 'prop-types'; -import React, { useRef, useEffect, useState } from 'react'; +import React, { useRef, useEffect } from 'react'; import { IconButton, TelegramIcon } from '@cere/ui'; import { TELEGRAM_BOT_ID, TELEGRAM_BOT_USERNAME } from '~/constants'; -import CircularProgress from '@mui/material/CircularProgress'; -import { Box } from '@mui/material'; export interface TelegramUser { id: number; @@ -23,6 +21,7 @@ interface Props { dataOnauth?: (x: any) => void; buttonSize?: 'large' | 'medium' | 'small'; wrapperProps?: React.HTMLProps; + onTelegramLogin?: (val: boolean) => void; } export interface Options { @@ -51,8 +50,8 @@ export const TelegramLoginButton: React.FC = ({ dataOnauth, cornerRadius, requestAccess = true, + onTelegramLogin, }) => { - const [loading, setLoading] = useState(false); const ref = useRef(null); useEffect(() => { @@ -100,39 +99,22 @@ export const TelegramLoginButton: React.FC = ({
-
+
{ window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth); - setLoading(true); + if (onTelegramLogin) { + onTelegramLogin(true); + } }} - disabled={loading} sx={{ position: 'relative', }} type="submit" > - {loading && ( - - - - )}