diff --git a/public/splash.gif b/public/splash.gif index b1e68c1..accc125 100644 Binary files a/public/splash.gif and b/public/splash.gif differ diff --git a/public/splash_old.gif b/public/splash_old.gif new file mode 100644 index 0000000..b1e68c1 Binary files /dev/null and b/public/splash_old.gif differ diff --git a/src/app/router/index.tsx b/src/app/router/index.tsx index c73e3b2..b70c13e 100644 --- a/src/app/router/index.tsx +++ b/src/app/router/index.tsx @@ -3,21 +3,32 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { Routes } from "~/app/router/constants"; import { RootPage } from "~/pages/root"; import { ViewContentPage } from "~/pages/view-content"; +import { ProtectedLayout } from "./protected-layout"; const router = createBrowserRouter([ - { path: Routes.Root, element: }, - { path: Routes.ViewContent, element: }, - { path: Routes.SentryCheck, element:
- -
}, + { + element: , + children: [ + { path: Routes.Root, element: }, + { path: Routes.ViewContent, element: }, + { + path: Routes.SentryCheck, + element: ( +
+ +
+ ), + }, + ], + }, ]); export const AppRouter = () => { diff --git a/src/app/router/protected-layout/index.tsx b/src/app/router/protected-layout/index.tsx new file mode 100644 index 0000000..468fcb7 --- /dev/null +++ b/src/app/router/protected-layout/index.tsx @@ -0,0 +1,20 @@ +import { useEffect, useState } from 'react'; +import { Outlet } from 'react-router-dom'; +import { useAuthTwa } from '~/shared/services/authTwa'; + +export const ProtectedLayout = () => { + const auth = useAuthTwa(); + const [isInitialLoad, setIsInitialLoad] = useState(true); + + useEffect(() => { + void auth.mutateAsync().finally(() => { + setIsInitialLoad(false); + }); + }, []); + + if (isInitialLoad || auth.isLoading) { + return null; + } + + return ; +}; \ No newline at end of file diff --git a/src/pages/root/steps/welcome-step/index.tsx b/src/pages/root/steps/welcome-step/index.tsx index fe6459c..6d421ee 100644 --- a/src/pages/root/steps/welcome-step/index.tsx +++ b/src/pages/root/steps/welcome-step/index.tsx @@ -102,7 +102,7 @@ export const WelcomeStep = ({ nextStep }: WelcomeStepProps) => {
- {"splash"} + {"splash"}
); } @@ -112,7 +112,7 @@ export const WelcomeStep = ({ nextStep }: WelcomeStepProps) => {
{"splash"}
diff --git a/src/shared/services/authTwa/index.ts b/src/shared/services/authTwa/index.ts new file mode 100644 index 0000000..8ee1379 --- /dev/null +++ b/src/shared/services/authTwa/index.ts @@ -0,0 +1,26 @@ +import { useMutation } from "react-query"; +import { request } from "~/shared/libs"; +import { useWebApp } from "@vkruglikov/react-telegram-web-app"; + +const sessionStorageKey = "auth_v1_token"; + +export const useAuthTwa = () => { + const WebApp = useWebApp(); + + const makeAuthRequest = async () => { + const res = await request.post<{ + auth_v1_token: string; + }>("/auth.twa", { + twa_data: WebApp.initData, + }); + + if (res?.data?.auth_v1_token) { + localStorage.setItem(sessionStorageKey, res.data.auth_v1_token); + } else { + throw new Error("Failed to get auth token"); + } + return res; + }; + + return useMutation(["auth"], makeAuthRequest); +}; \ No newline at end of file