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 cecaa0fa..1cf7bdba 100644 --- a/src/components/TelegramLoginButton/TelegramLoginButton.tsx +++ b/src/components/TelegramLoginButton/TelegramLoginButton.tsx @@ -21,6 +21,7 @@ interface Props { dataOnauth?: (x: any) => void; buttonSize?: 'large' | 'medium' | 'small'; wrapperProps?: React.HTMLProps; + onTelegramLogin?: (val: boolean) => void; } export interface Options { @@ -49,6 +50,7 @@ export const TelegramLoginButton: React.FC = ({ dataOnauth, cornerRadius, requestAccess = true, + onTelegramLogin, }) => { const ref = useRef(null); @@ -103,7 +105,14 @@ export const TelegramLoginButton: React.FC = ({ variant="outlined" onClick={() => { window.Telegram.Login.auth({ bot_id: TELEGRAM_BOT_ID }, dataOnauth); + if (onTelegramLogin) { + onTelegramLogin(true); + } }} + sx={{ + position: 'relative', + }} + type="submit" >