diff --git a/app/components/MainApp.tsx b/app/components/MainApp.tsx index 14aaff8..304bc8e 100644 --- a/app/components/MainApp.tsx +++ b/app/components/MainApp.tsx @@ -1,96 +1,18 @@ 'use client'; -import dynamic from 'next/dynamic'; -import React, { useState, useEffect } from 'react'; -import { Box, VStack, Spinner, Center, useToast } from '@chakra-ui/react'; -import { auth, getProfile, getShopItems, purchaseItem, transferBalance } from '../utils/api'; -import { IUser } from '../../backend/models/User'; -import { IShopItem } from '../../backend/models/ShopItem'; +import { useEffect, useState } from 'react'; +import { Center, Spinner, Text, VStack } from '@chakra-ui/react'; import { useTelegramWebApp } from '../hooks/useTelegramWebApp'; -// Динамический импорт компонентов для клиентской стороны -const UserProfile = dynamic(() => import('./UserProfile'), { - loading: () => , - ssr: false -}); - -const Shop = dynamic(() => import('./Shop'), { - loading: () => , - ssr: false -}); - -const TransferBalance = dynamic(() => import('./TransferBalance'), { - loading: () => , - ssr: false -}); - -type SafeUser = Omit; - export default function MainApp() { - const [isLoading, setIsLoading] = useState(true); - const [user, setUser] = useState(null); - const [shopItems, setShopItems] = useState([]); - const toast = useToast(); - const { webApp, error: webAppError, isInitialized } = useTelegramWebApp(); + const [isMounted, setIsMounted] = useState(false); + const { webApp, error, isLoading } = useTelegramWebApp(); useEffect(() => { - if (webApp && isInitialized) { - initApp(); - } - }, [webApp, isInitialized]); + setIsMounted(true); + }, []); - const initApp = async () => { - try { - setIsLoading(true); - - if (!webApp) { - throw new Error('Telegram Web App не инициализирован'); - } - - // Авторизация пользователя - const telegramUser = webApp.initDataUnsafe?.user; - if (!telegramUser) { - throw new Error('Пользователь не найден'); - } - - const authResponse = await auth(telegramUser.id.toString(), telegramUser.username || 'anonymous'); - - // Получение данных пользователя и магазина - const [profileData, shopData] = await Promise.all([ - getProfile(), - getShopItems() - ]); - - setUser(profileData as SafeUser); - setShopItems(shopData); - - // Сообщаем Telegram, что приложение готово - webApp.ready?.(); - } catch (error: any) { - console.error('Initialization error:', error); - toast({ - title: 'Ошибка инициализации', - description: error.message || 'Произошла ошибка при загрузке приложения', - status: 'error', - duration: 5000, - isClosable: true, - }); - } finally { - setIsLoading(false); - } - }; - - if (webAppError) { - return ( -
- - {webAppError} - -
- ); - } - - if (isLoading || !webApp || !isInitialized) { + if (!isMounted || isLoading) { return (
@@ -98,74 +20,28 @@ export default function MainApp() { ); } - if (!user) { + if (error) { return (
- - Пожалуйста, авторизуйтесь через Telegram или используйте демо-режим - + + Ошибка инициализации + {error.message} + +
+ ); + } + + if (!webApp) { + return ( +
+ WebApp не инициализирован
); } return ( - - - { - try { - const response = await purchaseItem(item._id.toString()); - setUser(response.user as SafeUser); - toast({ - title: 'Успешная покупка', - description: `Вы приобрели ${item.name}`, - status: 'success', - duration: 3000, - isClosable: true, - }); - } catch (error: any) { - toast({ - title: 'Ошибка покупки', - description: error.message || 'Произошла ошибка при покупке', - status: 'error', - duration: 3000, - isClosable: true, - }); - } - }} - /> - { - try { - const response = await transferBalance(username, amount); - setUser(prev => ({ ...prev!, balance: response.balance } as SafeUser)); - toast({ - title: 'Успешный перевод', - description: `Вы перевели ${amount} монет пользователю ${username}`, - status: 'success', - duration: 3000, - isClosable: true, - }); - } catch (error: any) { - toast({ - title: 'Ошибка перевода', - description: error.message || 'Произошла ошибка при переводе', - status: 'error', - duration: 3000, - isClosable: true, - }); - } - }} - /> - +
+ Добро пожаловать, {webApp.initDataUnsafe.user?.first_name}! +
); } \ No newline at end of file diff --git a/app/components/MainAppWrapper.tsx b/app/components/MainAppWrapper.tsx deleted file mode 100644 index 822bb2f..0000000 --- a/app/components/MainAppWrapper.tsx +++ /dev/null @@ -1,31 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; -import dynamic from 'next/dynamic'; -import { Center, Spinner } from '@chakra-ui/react'; - -const MainApp = dynamic(() => import('./MainApp'), { - loading: () => ( -
- -
- ), -}); - -export default function MainAppWrapper() { - const [isMounted, setIsMounted] = useState(false); - - useEffect(() => { - setIsMounted(true); - }, []); - - if (!isMounted) { - return ( -
- -
- ); - } - - return ; -} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 7af3037..f36a27c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,9 @@ import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; import { Providers } from './providers'; -const inter = Inter({ subsets: ['latin', 'cyrillic'] }); - export const metadata: Metadata = { - title: 'Campfire ID', - description: 'Ваш цифровой профиль в Telegram', + title: 'CampFire ID', + description: 'Telegram Mini App for user achievements and virtual economy', }; export default function RootLayout({ @@ -16,7 +13,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/app/page.tsx b/app/page.tsx index d8eeb6b..4ede470 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,17 +1,9 @@ -import { Suspense } from 'react'; -import { Center, Spinner } from '@chakra-ui/react'; -import MainAppWrapper from './components/MainAppWrapper'; +import dynamic from 'next/dynamic'; + +const MainAppWithNoSSR = dynamic(() => import('./components/MainApp'), { + ssr: false, +}); export default function Home() { - return ( - - -
- } - > - - - ); + return ; } \ No newline at end of file diff --git a/app/providers.tsx b/app/providers.tsx index ac2ddd5..b673506 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -1,5 +1,6 @@ 'use client'; +import { CacheProvider } from '@chakra-ui/next-js'; import { ChakraProvider, extendTheme } from '@chakra-ui/react'; const theme = extendTheme({ @@ -15,8 +16,10 @@ const theme = extendTheme({ export function Providers({ children }: { children: React.ReactNode }) { return ( - - {children} - + + + {children} + + ); } \ No newline at end of file