Feature calendar

README.md

@@ -1,69 +1 @@
-# Make TON Telegram Mini App 3: Referral System, Invite Friend Button, Invite Link
 
-Welcome to the third guide in the **Make TON Telegram Mini App** series! This project demonstrates how to implement a referral system, an invite friend button, and an invite link in a Telegram Mini App using Next.js 14.
-
-## Project Overview
-
-This Telegram Mini App showcases:
-- Setting up a Next.js 14 project with TypeScript and Tailwind CSS
-- Implementing a simple referral system using file-based storage
-- Creating an invite friend button that opens the Telegram share dialog
-- Generating and copying invite links
-- Displaying referral information and referred users
-- Basic TypeScript usage for type safety
-
-## Prerequisites
-
-- Node.js (version 14 or higher)
-- npm (comes with Node.js)
-- A Telegram account
-- A Telegram Bot Token
-- GitHub account
-- Vercel account
-
-## Getting Started
-
-1. Clone the repository:
-   ```
-   git clone https://github.com/your-username/Make-TON-Telegram-Mini-App-3.git
-   cd Make-TON-Telegram-Mini-App-3
-   ```
-
-2. Install dependencies:
-   ```
-   npm install
-   ```
-
-## Deployment and Usage
-
-As this is a Telegram Mini App, you can't see the result directly in development mode. Follow these steps to deploy and use the app:
-
-1. Push your code to a GitHub repository.
-2. Sign up for a Vercel account if you haven't already.
-3. Connect your GitHub repository to Vercel and deploy the app.
-4. Once deployed, Vercel will provide you with a URL for your app.
-5. Use this URL to set up your Telegram Mini App:
-   - Go to [@BotFather](https://t.me/BotFather) on Telegram
-   - Send the command `/newapp` or choose to edit an existing bot
-   - Follow the prompts to set up your Mini App, using the Vercel URL as the Web App URL
-6. Once set up, you can access your Mini App through Telegram on mobile devices or in the Web version of Telegram.
-
-## Project Structure
-
-- `app/page.tsx`: Main page component
-- `components/ReferralSystem.tsx`: Referral system component
-- `app/api/referrals/route.ts`: API route for handling referrals
-- `lib/storage.ts`: In-memory storage utility functions
-
-## Note on Data Storage
-
-This demo uses an in-memory storage solution for simplicity and to avoid file system permission issues in serverless environments. In a production application, you should use a database or other persistent storage solution to maintain referral data across server restarts and multiple instances.
-
-## YouTube Channel
-
-For video tutorials and more in-depth explanations, check out my YouTube channel:
-[Nikandr Surkov](https://www.youtube.com/@NikandrSurkov)
-
-## Next Steps
-
-Stay tuned for the next guide in the **Make TON Telegram Mini App** series, where we'll explore more advanced features and TON integration!

app/ClientLayout.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Bell, Users, CheckSquare } from 'lucide-react';
+
+const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+  return (
+    <Link href={href} className={`flex items-center space-x-2 ${isActive ? 'text-yellow-400' : 'text-white hover:text-yellow-200'}`}>
+      {children}
+    </Link>
+  );
+};
+
+const ClientLayout = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const isMainPage = pathname === '/';
+
+  // Track loading state to avoid showing access denied prematurely
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAllowed, setIsAllowed] = useState(false);
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent || navigator.vendor;
+
+    // Check if the user is on a mobile device
+    const isMobile = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+
+    // Set access permission based on mobile detection
+    setIsAllowed(isMobile);
+
+    // Once the check is done, stop loading
+    setIsLoading(false);
+  }, []);
+
+  // While checking, show a loading screen to avoid flashing Access Denied
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100">
+        <div className="text-2xl font-bold">Loading...</div>
+      </div>
+    );
+  }
+
+  // If the user is not allowed (not on mobile), show Access Denied
+  if (!isAllowed) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 text-center">
+        <div className="p-4 bg-red-800 text-white rounded-lg">
+          <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
+          <p>This web app can only be accessed on a mobile device.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // If the user is on mobile, render the app
+  return (
+    <div className="flex flex-col min-h-screen">
+      <main className={`flex-grow ${isMainPage ? '' : 'overflow-auto pb-20'}`}>
+        {children}
+      </main>
+      <footer className="bg-red-900 text-white py-4 px-6 flex justify-between items-center fixed bottom-0 left-0 right-0 z-30">
+  <div className="flex items-center space-x-4">
+    <NavLink href="/dailychest">
+    <img src="telemas-treasure-chest.png" alt="Quest Chest" className="w-8 h-8" />
+      </NavLink>
+    <Link href="/">
+      <span className="font-bold text-4xl cursor-pointer">🎅</span>
+    </Link>
+  </div>
+  <nav className="flex space-x-8">
+    <NavLink href="/friends">
+      <Users size={24} />
+      <span className="text-lg">Friends</span>
+    </NavLink>
+    <NavLink href="/tasks">
+      <CheckSquare size={24} />
+      <span className="text-lg">Tasks</span>
+    </NavLink>
+  </nav>
+</footer>
+
+    </div>
+  );
+};
+
+export default ClientLayout;

app/adsButton.tsx

@@ -0,0 +1 @@
+

app/api/tasks/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+
+const tasks = [
+  {
+    id: 0,
+    title: "Play Dapp Farm",
+    description: "Play, learn and earn with our partners",
+    link: "https://t.me/DappFarmBot/earn",
+    reward: 1500,
+    emoji: "🎮"
+  },
+  {
+    id: 7,
+    title: "Join our Telegram Channel",
+    description: "Join our Telegram channel for the latest updates!",
+    link: "https://t.me/telemasgold",
+    reward: 1000,
+    emoji: "📢"
+  },
+  {
+    id: 8,
+    title: "Follow us on Twitter",
+    description: "Follow us on Twitter for quick updates and news!",
+    link: "https://twitter.com/@TelemasGold",
+    reward: 1500,
+    emoji: "🐦"
+  },
+  {
+    id: 9,
+    title: "Subscribe to our YouTube",
+    description: "Subscribe to our YouTube channel for exciting videos!",
+    link: "https://www.youtube.com/@telemasgold",
+    reward: 1500,
+    emoji: "🎥"
+  },
+  ];
+
+export async function GET() {
+  return NextResponse.json(tasks);
+}

app/api/user/route.ts

@@ -0,0 +1,72 @@
+import { NextResponse } from 'next/server';
+import { sql } from '@vercel/postgres';
+import fetch from 'node-fetch';
+
+async function getCountryFromIP(ip: string): Promise<string> {
+  try {
+    const response = await fetch(`https://ipapi.co/${ip}/country_name/`);
+    return await response.text() || 'Unknown';
+  } catch (error) {
+    console.error('Error fetching country:', error);
+    return 'Unknown';
+  }
+}
+
+export async function POST(request: Request) {
+  const { telegram_id, telegram_username, referrer_id, coin_balance } = await request.json();
+  const ip = request.headers.get('x-forwarded-for')?.split(',')[0] || '0.0.0.0';
+  const country = await getCountryFromIP(ip);
+
+  try {
+    await sql`
+      INSERT INTO users (telegram_id, telegram_username, country, referrer_id, coin_balance)
+      VALUES (${telegram_id}, ${telegram_username}, ${country}, ${referrer_id}, ${coin_balance})
+      ON CONFLICT (telegram_id) 
+      DO UPDATE SET 
+        telegram_username = EXCLUDED.telegram_username,
+        country = EXCLUDED.country,
+        coin_balance = EXCLUDED.coin_balance,
+        last_update = CURRENT_TIMESTAMP
+    `;
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json({ success: false, error: (error as Error).message });
+  }
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const telegram_id = searchParams.get('telegram_id');
+  const rewardEvent = searchParams.get('reward');
+
+  if (rewardEvent && rewardEvent === 'true' && telegram_id) {
+    // Handle the reward event
+    try {
+      // Simulate reward logic (update coin balance for example)
+      await sql`
+        UPDATE users 
+        SET coin_balance = coin_balance + 500
+        WHERE telegram_id = ${telegram_id}
+      `;
+
+      return NextResponse.json({ success: true, message: `Reward applied to user ${telegram_id}` });
+    } catch (error) {
+      return NextResponse.json({ success: false, error: (error as Error).message });
+    }
+  }
+
+  if (!telegram_id) {
+    return NextResponse.json({ success: false, error: 'Telegram ID is required' });
+  }
+
+  try {
+    const referralCount = await sql`
+      SELECT COUNT(*) FROM users WHERE referrer_id = ${telegram_id}
+    `;
+
+    return NextResponse.json({ success: true, referralCount: referralCount.rows[0].count });
+  } catch (error) {
+    return NextResponse.json({ success: false, error: (error as Error).message });
+  }
+}