connect wallet Button added

dash.board/.env.example

@@ -1 +1,5 @@
-TELEGRAM_BOT_TOKEN=your_actual_telegram_bot_token_here
+TELEGRAM_BOT_TOKEN=your_actual_telegram_bot_token_here
+TON_CONNECT_PROJECT_ID=cto-dashboard-project-id
+NEXT_PUBLIC_TON_CONNECT_PROJECT_ID=cto-dashboard-project-id
+TONCENTER_API_KEY=6b428c719e25b6cffee5b759d8b4798237493498
+TON_CONSOLE_API_KEY=AE6T5FKHQAAAALWSO7A6TO2K3YM53774934987A3TJHFJJ6USNTORFAPQGR62BJZQEXCI

dash.board/next.config.mjs

@@ -1,12 +1,16 @@
 import createNextIntlPlugin from 'next-intl/plugin';
- 
+
 const withNextIntl = createNextIntlPlugin("./src/core/i18n/i18n.ts");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     experimental: {
         serverComponentsExternalPackages: ['grammy'],
-      },
+    },
+    env: {
+        TON_CONNECT_PROJECT_ID: process.env.NEXT_PUBLIC_TON_CONNECT_PROJECT_ID,
+        TONCENTER_API_KEY: process.env.TONCENTER_API_KEY,
+    },
 };
 
-export default withNextIntl(nextConfig);
+export default withNextIntl(nextConfig);

dash.board/package.json

@@ -30,7 +30,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tonweb": "^0.0.66"
   },
   "devDependencies": {
     "@types/node": "^20",

dash.board/public/tonconnect-manifest.json

@@ -1,5 +1,11 @@
 {
   "url": "https://ton.vote",
-  "name": "TON Vote",
-  "iconUrl": "https://ton.vote/logo.png"
+  "name": "CTO Dashboard",
+  "iconUrl": "https://ton.vote/logo.png",
+  "projectId": "cto-dash-board-project-id", // Add this line
+  "redirectURL": "https://dashbooard-nine.vercel.app", // Replace with your actual redirect URL
+  "network": {
+    "chainId": 1, // Replace with the appropriate chain ID
+    "network": "mainnet" // Replace with "testnet" if applicable
+  }
 }

dash.board/src/components/Root/Root.tsx

@@ -20,6 +20,9 @@ import { init } from '@/core/init';
 
 import './styles.css';
 
+// Define your TONConnect project ID and other configurations
+const TON_CONNECT_PROJECT_ID = process.env.TON_CONNECT_PROJECT_ID || 'cto-dashboard-project-id'; // Use environment variable
+
 function RootInner({ children }: PropsWithChildren) {
   const isDev = process.env.NODE_ENV === 'development';
 
@@ -51,7 +54,10 @@ function RootInner({ children }: PropsWithChildren) {
   }, [debug]);
 
   return (
-    <TonConnectUIProvider manifestUrl="/tonconnect-manifest.json">
+    <TonConnectUIProvider
+      projectId={TON_CONNECT_PROJECT_ID}
+      manifestUrl="/tonconnect-manifest.json"
+    >
       <AppRoot
         appearance={isDark ? 'dark' : 'light'}
         platform={['macos', 'ios'].includes(lp.platform) ? 'ios' : 'base'}
@@ -73,4 +79,4 @@ export function Root(props: PropsWithChildren) {
       <RootInner {...props}/>
     </ErrorBoundary>
   ) : <div className="root__loading">Loading</div>;
-}
+}

dash.board/src/components/dashboard.tsx

@@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Progress } from "@/components/ui/progress"
 import { Globe, Plus, Heart } from "lucide-react"
+import { useTonWallet, TonConnectButton } from '@tonconnect/ui-react'
+import { getTokenBalance } from '@/lib/tonUtils' // Import the utility function
 
 // Define the type for the dashboard data
 type DashboardData = {
@@ -15,27 +17,11 @@ type DashboardData = {
   topIdeas: { id: number; name: string; completionRate: number }[];
 };
 
-// Mock function to simulate data fetching
-const fetchDashboardData = () => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        totalIdeas: 83,
-        avgImplementationRate: 94,
-        globalReach: 42,
-        topIdeas: [
-          { id: 1, name: "Idea 1", completionRate: 75 },
-          { id: 2, name: "Idea 2", completionRate: 50 },
-          { id: 3, name: "Idea 3", completionRate: 25 },
-        ]
-      })
-    }, 1000)
-  })
-}
-
 export function DashboardComponent() {
   const [dashboardData, setDashboardData] = useState<DashboardData | null>(null)
   const [loading, setLoading] = useState(true)
+  const [tokenBalance, setTokenBalance] = useState<string | null>(null)
+  const wallet = useTonWallet()
 
   useEffect(() => {
     fetchDashboardData().then((data: any) => {
@@ -44,6 +30,22 @@ export function DashboardComponent() {
     })
   }, [])
 
+  useEffect(() => {
+    if (wallet && wallet.account.address) {
+      fetchTokenBalance(wallet.account.address)
+    }
+  }, [wallet])
+
+  const fetchTokenBalance = async (address: string) => {
+    try {
+      const balance = await getTokenBalance(address)
+      setTokenBalance(balance)
+    } catch (error) {
+      console.error('Error fetching token balance:', error)
+      setTokenBalance('Error')
+    }
+  }
+
   if (loading) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>
   }
@@ -52,13 +54,20 @@ export function DashboardComponent() {
     <div className="min-h-screen bg-background p-8">
       <div className="flex justify-between items-center mb-8">
         <h1 className="text-3xl font-bold">Dash Board Dashboard</h1>
-        <Avatar>
-          <AvatarImage src="/placeholder-avatar.jpg" alt="User" />
-          <AvatarFallback>JD</AvatarFallback>
-        </Avatar>
+        {wallet ? (
+          <div className="flex items-center space-x-2">
+            <Avatar>
+              <AvatarImage src="/placeholder-avatar.jpg" alt="User" />
+              <AvatarFallback>JD</AvatarFallback>
+            </Avatar>
+            <span className="text-sm">{wallet.account.address}</span>
+          </div>
+        ) : (
+          <TonConnectButton />
+        )}
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Total Ideas</CardTitle>
@@ -86,6 +95,21 @@ export function DashboardComponent() {
             <span className="absolute text-2xl font-bold">{dashboardData?.globalReach}</span>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">TON Token Balance</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {tokenBalance !== null
+                ? tokenBalance === 'Error'
+                  ? 'Error fetching balance'
+                  : `${tokenBalance} TON`
+                : 'Fetching...'}
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
       <Card className="mt-6">
@@ -119,3 +143,21 @@ export function DashboardComponent() {
     </div>
   )
 }
+
+// Mock function to simulate fetching dashboard data
+const fetchDashboardData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        totalIdeas: 83,
+        avgImplementationRate: 94,
+        globalReach: 42,
+        topIdeas: [
+          { id: 1, name: "Idea 1", completionRate: 75 },
+          { id: 2, name: "Idea 2", completionRate: 50 },
+          { id: 3, name: "Idea 3", completionRate: 25 },
+        ]
+      })
+    }, 1000)
+  })
+}

dash.board/src/lib/tonUtils.ts

@@ -0,0 +1,17 @@
+import TonWeb from 'tonweb'
+
+// Initialize TonWeb with a public endpoint
+const tonweb = new TonWeb(new TonWeb.HttpProvider('https://toncenter.com/api/v2/jsonRPC'))
+
+/**
+ * Fetches the token balance for a given TON address.
+ * @param address - The TON wallet address.
+ * @returns The balance in TON.
+ */
+export async function getTokenBalance(address: string): Promise<string> {
+  const addressObj = tonweb.address(address)
+  const balance = await tonweb.getBalance(addressObj)
+  // Convert from nanotons to tons
+  const balanceInTons = TonWeb.utils.fromNano(balance)
+  return balanceInTons.toString()
+}