Merge pull request #71 from TTMordred/hungphanne

Add DappRadar API routes and TrendingNFTs component for NFT data fetching and display

Author: TTMordred

app/api/dappradar-trending-nft/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+
+  export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const chain = searchParams.get('chain') || 'ethereum';
+    const API_KEY = process.env.REACT_APP_DAPPRADAR_API_KEY;
+  
+    try {
+      const nftResponse = await fetch(`https://apis.dappradar.com/v2/nfts/collections?range=24h&sort=sales&order=desc&chain=${chain}&resultsPerPage=10`, {
+          headers: {
+            accept: 'application/json',
+            'x-api-key': API_KEY || '',
+          },
+        }
+    );
+
+  
+      // Check if any request failed.
+      if (!nftResponse.ok) {
+        return NextResponse.json(
+          {
+            error: `Returned an error: dapps(${nftResponse.status}))`,
+          },
+          { status: 404 }
+        );
+      }
+  
+      const nftData = await nftResponse.json();
+  
+      return NextResponse.json({
+        nfts: nftData,
+      });
+    } catch (error: any) {
+      return NextResponse.json(
+        { error: error.message || 'Internal server error' },
+        { status: 500 }
+      );
+    }
+  }

app/api/dappradar-trending-project/route.ts

@@ -0,0 +1,56 @@
+// api/dappradar/route.ts
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const chain = searchParams.get('chain') || 'ethereum';
+  const API_KEY = process.env.REACT_APP_DAPPRADAR_API_KEY;
+
+  try {
+    const [dappsResponse, gamesResponse, marketplaceResponse] = await Promise.all([
+      fetch(`https://apis.dappradar.com/v2/dapps/top/uaw?chain=${chain}&range=7d&top=10`, {
+        headers: {
+          accept: 'application/json',
+          'x-api-key': API_KEY || '',
+        },
+      }),
+      fetch(`https://apis.dappradar.com/v2/dapps/top/balance?chain=${chain}&category=games&range=24h&top=10`, {
+        headers: {
+          accept: 'application/json',
+          'x-api-key': API_KEY || '',
+        },
+      }),
+      fetch(`https://apis.dappradar.com/v2/dapps/top/transactions?chain=${chain}&category=marketplaces&range=24h&top=10`, {
+        headers: {
+          accept: 'application/json',
+          'x-api-key': API_KEY || '',
+        },
+      }),
+    ]);
+
+    // Check if any request failed.
+    if (!dappsResponse.ok || !gamesResponse.ok || !marketplaceResponse.ok) {
+      return NextResponse.json(
+        {
+          error: `One or more endpoints returned an error: dapps(${dappsResponse.status}), game(${gamesResponse.status}), arketplace(${marketplaceResponse.status})`,
+        },
+        { status: 404 }
+      );
+    }
+
+    const dappsData = await dappsResponse.json();
+    const gamesData = await gamesResponse.json();
+    const marketplacesData = await marketplaceResponse.json();
+
+    return NextResponse.json({
+      dapps: dappsData,
+      games: gamesData,
+      marketplaces: marketplacesData,
+    });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -224,13 +224,7 @@
     animation: appear 2s forwards;
   }
 
-  nav a::after {
-    @apply content-[""] h-[3px] w-0 bg-white absolute left-0 bottom-0 transition-all duration-500;
-  }
-  
-  nav a:hover::after {
-    @apply w-full;
-  }
+
 
   /* ======================================
    * Mobile Menu

app/page.tsx

@@ -4,7 +4,10 @@ import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { FaFacebookF, FaGithub, FaLinkedinIn } from 'react-icons/fa';
 import ParticlesBackground from '@/components/ParticlesBackground';
-import EthPriceLine from '@/components/EthPriceLine';
+import EthPriceLine from '@/components/home/EthPriceLine';
+import CryptoPathExplorer from '@/components/home/CryptoExplorer';
+import TrendingProjects from '@/components/home/TrendingProjects';
+import TrendingNFTCollections from '@/components/home/TrendingNFTs';
 import FAQ from './FAQ';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
@@ -19,94 +22,94 @@ type Language = 'en' | 'vi';
 // Translation object
 const translations = {
   en: {
-    vietnamPremierCrypto: "Vietnam's Premier Crypto Platform",
-    joinAllInOne: "Join the all-in-one crypto ",
-    appInVietnam: "app in Vietnam",
+    vietnamPremierCrypto: "Vietnam's Premier Blockchain Explorer",
+    joinAllInOne: "Your all-in-one crypto ",
+    appInVietnam: "transaction explorer",
     emailPlaceholder: "Your Email Address...",
     signUpSuccess: "Sign Up Successfully!",
     processing: "Processing...",
     tryCryptoPath: "Try CryptoPath",
-    tradeLikePro: "Trade like ",
-    aPro: "a pro",
-    getLowestFees: "Get the lowest fees, fastest transactions, powerful APIs, and more",
-    oneApplication: "One Application. ",
-    infinitePotential: "Infinite Potential",
-    exploreNFTMarketplace: "Explore the world's best NFT marketplace, DEX, and wallets supporting all your favorite chains.",
-    exploreDecentralized: "Explore decentralized applications and experience cutting-edge blockchain technology.",
-    exchange: "Exchange",
-    web3: "Web3",
-    accompanyingYou: "Accompanying You ",
-    everyStep: "Every Step of the Way",
-    fromCryptoTransactions: "From cryptocurrency transactions to your first NFT purchase, CryptoPath will guide you through the entire process.",
-    believeInYourself: "Believe in yourself and never stop learning.",
+    tradeLikePro: "Track transactions ",
+    aPro: "like never before",
+    getLowestFees: "Real-time transaction monitoring, comprehensive analytics, and powerful visualization tools",
+    oneApplication: "One Platform. ",
+    infinitePotential: "Complete Insights",
+    exploreNFTMarketplace: "Track real-time cryptocurrency transactions, monitor market trends, and analyze blockchain metrics with our comprehensive dashboard.",
+    exploreDecentralized: "Explore detailed transaction histories, wallet analytics, and network statistics with our powerful blockchain explorer.",
+    exchange: "Analytics",
+    web3: "Explorer",
+    accompanyingYou: "Your Gateway to ",
+    everyStep: "Blockchain Data",
+    fromCryptoTransactions: "From real-time transaction tracking to comprehensive market analysis, CryptoPath provides you with all the tools you need to understand blockchain activity.",
+    believeInYourself: "Make informed decisions with data-driven insights.",
     meetTheTeam: "Meet the ",
     team: "Team",
-    willingToListen: "We are always willing to listen to everyone!",
-    whatIsCryptoPath: "What is ",
+    willingToListen: "Dedicated to building the best blockchain explorer!",
+    whatIsCryptoPath: "Why ",
     cryptoPath: "CryptoPath?",
-    hearFromTopIndustry: "Hear from top industry leaders to understand",
-    whyCryptoPathIsFavorite: "why CryptoPath is everyone's favorite application.",
+    hearFromTopIndustry: "A powerful blockchain explorer that helps you",
+    whyCryptoPathIsFavorite: "track, analyze, and understand cryptocurrency transactions.",
     learnMore: "Learn More",
-    whatIsCryptocurrency: "What is Cryptocurrency?",
-    explainingNewCurrency: "Explaining the \"new currency of the world\"",
-    redefiningSystem: "Redefining the system",
-    welcomeToWeb3: "Welcome to Web3",
-    whatIsBlockchain: "What is Blockchain?",
-    understandBlockchain: "Understand how Blockchain works",
+    whatIsCryptocurrency: "Real-Time Analytics",
+    explainingNewCurrency: "Track market trends and transaction flows",
+    redefiningSystem: "Transaction Explorer",
+    welcomeToWeb3: "Monitor blockchain activity in real-time",
+    whatIsBlockchain: "Network Statistics",
+    understandBlockchain: "Comprehensive blockchain metrics and insights",
     trustedBy: "Trusted",
-    industryLeaders: "by industry leaders",
-    testimonialText: "\"CryptoPath is an amazing platform for tracking transactions. I can't even picture what the world would be like without it\"",
+    industryLeaders: "by crypto enthusiasts",
+    testimonialText: "\"CryptoPath provides the most comprehensive and user-friendly blockchain explorer I've ever used. The real-time analytics and transaction tracking are invaluable.\"",
     founderOf: "Founder of CryptoPath",
-    readyToStart: "Ready to start your crypto journey?",
-    joinThousands: "Join thousands of Vietnamese users who are already trading, investing, and earning with CryptoPath.",
-    downloadNow: "Download Now",
+    readyToStart: "Ready to explore the blockchain?",
+    joinThousands: "Join thousands of users who are already using CryptoPath to track and analyze cryptocurrency transactions.",
+    downloadNow: "Start Exploring",
     pleaseEnterEmail: "Please enter your email address",
     pleaseEnterValidEmail: "Please enter a valid email address",
     errorOccurred: "An error occurred while registering!",
     registrationSuccessful: "Registration successful! Please check your email."
   },
   vi: {
-    vietnamPremierCrypto: "Nền tảng Crypto hàng đầu Việt Nam",
-    joinAllInOne: "Tham gia ứng dụng crypto ",
-    appInVietnam: "tất cả trong một ở Việt Nam",
+    vietnamPremierCrypto: "Nền Tảng Khám Phá Blockchain Hàng Đầu Việt Nam",
+    joinAllInOne: "Nền tảng theo dõi giao dịch ",
+    appInVietnam: "tiền điện tử toàn diện",
     emailPlaceholder: "Địa chỉ Email của bạn...",
     signUpSuccess: "Đăng ký thành công!",
     processing: "Đang xử lý...",
     tryCryptoPath: "Dùng thử CryptoPath",
-    tradeLikePro: "Giao dịch như ",
-    aPro: "chuyên gia",
-    getLowestFees: "Nhận phí thấp nhất, giao dịch nhanh nhất, API mạnh mẽ và nhiều hơn nữa",
-    oneApplication: "Một ứng dụng. ",
-    infinitePotential: "Tiềm năng vô hạn",
-    exploreNFTMarketplace: "Khám phá thị trường NFT, DEX tốt nhất thế giới và ví hỗ trợ tất cả các chuỗi yêu thích của bạn.",
-    exploreDecentralized: "Khám phá các ứng dụng phi tập trung và trải nghiệm công nghệ blockchain tiên tiến.",
-    exchange: "Sàn giao dịch",
-    web3: "Web3",
-    accompanyingYou: "Đồng hành cùng bạn ",
-    everyStep: "trong từng bước đi",
-    fromCryptoTransactions: "Từ giao dịch tiền điện tử đến việc mua NFT đầu tiên, CryptoPath sẽ hướng dẫn bạn qua toàn bộ quá trình.",
-    believeInYourself: "Hãy tin vào chính mình và không ngừng học hỏi.",
+    tradeLikePro: "Theo dõi giao dịch ",
+    aPro: "theo cách mới",
+    getLowestFees: "Giám sát giao dịch thời gian thực, phân tích toàn diện và công cụ trực quan mạnh mẽ",
+    oneApplication: "Một nền tảng. ",
+    infinitePotential: "Thông tin đầy đủ",
+    exploreNFTMarketplace: "Theo dõi giao dịch tiền điện tử thời gian thực, giám sát xu hướng thị trường và phân tích các chỉ số blockchain với bảng điều khiển toàn diện của chúng tôi.",
+    exploreDecentralized: "Khám phá lịch sử giao dịch chi tiết, phân tích ví và thống kê mạng lưới với công cụ khám phá blockchain mạnh mẽ của chúng tôi.",
+    exchange: "Phân tích",
+    web3: "Khám phá",
+    accompanyingYou: "Cổng thông tin ",
+    everyStep: "Blockchain của bạn",
+    fromCryptoTransactions: "Từ theo dõi giao dịch thời gian thực đến phân tích thị trường toàn diện, CryptoPath cung cấp cho bạn tất cả các công cụ cần thiết để hiểu hoạt động blockchain.",
+    believeInYourself: "Đưa ra quyết định dựa trên dữ liệu thực tế.",
     meetTheTeam: "Gặp gỡ ",
     team: "Đội ngũ",
-    willingToListen: "Chúng tôi luôn sẵn sàng lắng nghe mọi người!",
-    whatIsCryptoPath: "CryptoPath ",
-    cryptoPath: "là gì?",
-    hearFromTopIndustry: "Lắng nghe từ các nhà lãnh đạo hàng đầu trong ngành để hiểu",
-    whyCryptoPathIsFavorite: "tại sao CryptoPath là ứng dụng yêu thích của mọi người.",
+    willingToListen: "Luôn nỗ lực xây dựng nền tảng khám phá blockchain tốt nhất!",
+    whatIsCryptoPath: "Tại sao chọn ",
+    cryptoPath: "CryptoPath?",
+    hearFromTopIndustry: "Một công cụ khám phá blockchain mạnh mẽ giúp bạn",
+    whyCryptoPathIsFavorite: "theo dõi, phân tích và hiểu các giao dịch tiền điện tử.",
     learnMore: "Tìm hiểu thêm",
-    whatIsCryptocurrency: "Tiền điện tử là gì?",
-    explainingNewCurrency: "Giải thích về \"đồng tiền mới của thế giới\"",
-    redefiningSystem: "Định nghĩa lại hệ thống",
-    welcomeToWeb3: "Chào mừng đến với Web3",
-    whatIsBlockchain: "Blockchain là gì?",
-    understandBlockchain: "Hiểu cách Blockchain hoạt động",
+    whatIsCryptocurrency: "Phân tích thời gian thực",
+    explainingNewCurrency: "Theo dõi xu hướng thị trường và luồng giao dịch",
+    redefiningSystem: "Khám phá giao dịch",
+    welcomeToWeb3: "Giám sát hoạt động blockchain theo thời gian thực",
+    whatIsBlockchain: "Thống kê mạng lưới",
+    understandBlockchain: "Số liệu và thông tin blockchain toàn diện",
     trustedBy: "Được tin dùng",
-    industryLeaders: "bởi các nhà lãnh đạo ngành",
-    testimonialText: "\"CryptoPath là một nền tảng tuyệt vời để theo dõi giao dịch. Tôi thậm chí không thể tưởng tượng thế giới sẽ như thế nào nếu không có nó\"",
+    industryLeaders: "bởi cộng đồng crypto",
+    testimonialText: "\"CryptoPath cung cấp công cụ khám phá blockchain toàn diện và thân thiện nhất mà tôi từng sử dụng. Phân tích thời gian thực và theo dõi giao dịch là vô giá.\"",
     founderOf: "Nhà sáng lập CryptoPath",
-    readyToStart: "Sẵn sàng bắt đầu hành trình tiền điện tử của bạn?",
-    joinThousands: "Tham gia cùng hàng nghìn người dùng Việt Nam đang giao dịch, đầu tư và kiếm tiền với CryptoPath.",
-    downloadNow: "Tải xuống ngay",
+    readyToStart: "Sẵn sàng khám phá blockchain?",
+    joinThousands: "Tham gia cùng hàng nghìn người dùng đang sử dụng CryptoPath để theo dõi và phân tích giao dịch tiền điện tử.",
+    downloadNow: "Bắt đầu khám phá",
     pleaseEnterEmail: "Vui lòng nhập địa chỉ email của bạn",
     pleaseEnterValidEmail: "Vui lòng nhập địa chỉ email hợp lệ",
     errorOccurred: "Đã xảy ra lỗi khi đăng ký!",
@@ -238,6 +241,7 @@ const HomePage = () => {
     <div className="relative font-sans">
       <ParticlesBackground />
       <EthPriceLine/>
+      <CryptoPathExplorer language={language}/>
       <div className="relative z-10 bg-transparent">
         {/* Description Section */}
         <div className="min-h-screen w-full flex items-center" data-aos="fade-up">
@@ -288,7 +292,7 @@ const HomePage = () => {
         </div>
 
         <PartnerBar />
-
+        <TrendingProjects />
         {/* Trade Like a Pro Section */}
         <div className="min-h-screen w-full flex items-center" data-aos="fade-up">
           <div className="container mx-auto px-4 py-12 text-center" data-aos="fade-up">
@@ -352,7 +356,7 @@ const HomePage = () => {
             </div>
           </div>
         </div>
-
+        <TrendingNFTCollections />
         {/* Evolution Illustration Section */}
         <div className="container mx-auto px-4 py-12 text-center" data-aos="fade-up">
           <h1 className="text-4xl font-bold mb-4">{t.accompanyingYou}<span className="text-[#F5B056]">{t.everyStep}</span></h1>