feat: Connect KharCoin to Ton network And Save Wallet to backend data…

…base
KharCoinBot · Jun 30, 2024 · 318a7a4 · 318a7a4
1 parent e47f967
commit 318a7a4
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 219 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@mantine/core": "7.10.1",
     "@mantine/hooks": "7.10.1",
     "@tabler/icons-react": "^3.5.0",
+    "@tonconnect/ui-react": "^2.0.5",
     "@twa-dev/sdk": "^7.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,13 +5,16 @@ import { theme } from './theme';
 import React from 'react';
 import FooterMenu from './components/FooterMenu/FooterMenu';
 import HeaderMenu from './components/HeaderMenu/HeaderMenu';
+import { TonConnectUIProvider } from '@tonconnect/ui-react';
+
 
 
 export default function App() {
   // const user = WebApp.initDataUnsafe.user;
   // const usertgid = user?.id;
   return (
     <React.StrictMode>
+     <TonConnectUIProvider manifestUrl="https://kc.rahomaskan.com/tonconnect-manifest.json">
       <DirectionProvider initialDirection="rtl">
         <MantineProvider 
         theme={theme} 
@@ -38,6 +41,7 @@ export default function App() {
           <Router />
         </MantineProvider>
       </DirectionProvider>
+      </TonConnectUIProvider>
     </React.StrictMode>
   );
 }
diff --git a/src/components/HeaderMenu/HeaderMenu.tsx b/src/components/HeaderMenu/HeaderMenu.tsx
@@ -1,5 +1,6 @@
 import { Avatar, Container, Flex, UnstyledButton, rem } from '@mantine/core';
 import { IconAt, IconUserShare, IconWallet } from '@tabler/icons-react';
+import { TonConnectButton } from '@tonconnect/ui-react';
 
 function HeaderMenu({ username, photoUrl }: { username: string; photoUrl: string }) {
   return (
@@ -34,6 +35,7 @@ function HeaderMenu({ username, photoUrl }: { username: string; photoUrl: string
           style={{ textAlign: 'center', color: 'white' }}
         >
           <IconWallet style={{ width: rem(24), height: rem(24) }} />
+          <TonConnectButton />
         </UnstyledButton>
       </Flex>
     </Container>

diff --git a/src/pages/Boosts.page.tsx b/src/pages/Boosts.page.tsx
@@ -3,9 +3,37 @@ import HeaderMenu from '../components/HeaderMenu/HeaderMenu';
 import { Welcome } from '../components/Welcome/Welcome';
 import { AppShell, Container, SimpleGrid, Title, Text, Box, Button } from '@mantine/core';
 import WebApp from '@twa-dev/sdk';
+import { useTonAddress } from '@tonconnect/ui-react';
+import { useEffect } from 'react';
+
 export function BoostsPage() {
   const user = WebApp.initDataUnsafe.user;
   const usertgid = user?.id;
+  const userFriendlyAddress = useTonAddress();
+
+  useEffect(() => {
+    if (userFriendlyAddress) {
+      fetch('https://kharcoin.com/api/savewallet', {
+        method: 'POST',
+         headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          usertgid,
+          userFriendlyAddress,
+        }),
+      })
+     .then(response => response.json())
+     .then(data => {
+        console.log('Success:', data);
+        // Handle success, e.g., show a message to the user
+      })
+     .catch((error) => {
+        console.error('Error:', error);
+        // Handle errors, e.g., show an error message to the user
+      });
+    }
+  }, [usertgid]);
   return (
     <Container size={'xs'}>
       <AppShell
@@ -19,13 +47,22 @@ export function BoostsPage() {
         <AppShell.Main>
           <Container>
             <Title order={1}>تقویت</Title>
+            {userFriendlyAddress && (
+              <>
+                {userFriendlyAddress}             
+                <div>
+                  <span>کیف پول شما برای بازی <br /> {userFriendlyAddress} <br /> است</span>
+                </div>
+              </>
+            )}
+
             <Box pt={'lg'} mt={'lg'} ta={'center'}>
-            <Button variant="filled" color="yellow" size="xl" radius="md" ta={'center'}>
-              خر کوین
-            </Button>
-            </Box>            
+              <Button variant="filled" color="yellow" size="xl" radius="md" ta={'center'}>
+                خر کوین
+              </Button>
+            </Box>
             <SimpleGrid cols={2} spacing="xl" verticalSpacing="xl" pt={'lg'} mt={'lg'}>
-            <Box p={'lg'} bg={'gray'}>
+              <Box p={'lg'} bg={'gray'}>
                 <Text
                   ta={'center'}
                   size="xl"
@@ -35,8 +72,8 @@ export function BoostsPage() {
                 >
                   شــیــر خـــــر
                 </Text>
-                </Box> 
-                <Box p={'lg'} bg={'gray'}>
+              </Box>
+              <Box p={'lg'} bg={'gray'}>
                 <Text
                   ta={'center'}
                   size="xl"
@@ -78,4 +115,4 @@ export function BoostsPage() {
       </AppShell>
     </Container>
   );
-}
+}