From 5e5f913f2a310322d33b51159ae0706e4f87864e Mon Sep 17 00:00:00 2001
From: HungPhan-0612 <163500971+HungPhan-0612@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:15:15 +0700
Subject: [PATCH 1/4] Add loading screen and enhance search functionality in
 CryptoPathExplorer component

---
 components/home/CryptoExplorer.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/components/home/CryptoExplorer.tsx b/components/home/CryptoExplorer.tsx
index 8fce486..3fbdd5a 100644
--- a/components/home/CryptoExplorer.tsx
+++ b/components/home/CryptoExplorer.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
+import { LoadingScreen } from "@/components/loading-screen";
 
 const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
   const [searchValue, setSearchValue] = useState('');
@@ -10,7 +11,7 @@ const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState('All Filters');
   const router = useRouter()
-
+  const [isLoading, setIsLoading] = useState(false);
   const filters = ['All Filters', 'On-Chain', 'Off-Chain', 'Tokens', 'NFTs', 'Addresses'];
 
   const translations = {
@@ -69,7 +70,21 @@ const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
 
   const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-// Nho minh duy phan nay
+    if (!searchValue.trim()) return;
+
+    setIsLoading(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 2500)); // Simulated delay
+      if (selectedFilter === "On-Chain") {
+        router.push(`/search/?address=${encodeURIComponent(searchValue)}&network=mainnet`);
+      } else if (selectedFilter === "Off-Chain") {
+        router.push(`/search-offchain/?address=${encodeURIComponent(searchValue)}`);
+      }
+    } catch (error) {
+      console.error("Search error:", error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const toggleFilterDropdown = () => {
@@ -82,6 +97,7 @@ const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
   };
 
   return (
+    <>
     <div className="w-full mb-16 mt-16">
       {/* Explorer Title */}
       <div className="mb-6 text-center">
@@ -241,6 +257,8 @@ const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
         </div>
       </div>
     </div>
+    <LoadingScreen isLoading={isLoading} />
+    </>
   );
 };
 

From 32ec7352a5d2c6f0301e913e25f4d0da5f6ed6fd Mon Sep 17 00:00:00 2001
From: HungPhan-0612 <163500971+HungPhan-0612@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:20:06 +0700
Subject: [PATCH 2/4] Add 'use client' directive to CryptoExplorer component
 for client-side rendering

---
 components/home/CryptoExplorer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/home/CryptoExplorer.tsx b/components/home/CryptoExplorer.tsx
index 3fbdd5a..c3a00f8 100644
--- a/components/home/CryptoExplorer.tsx
+++ b/components/home/CryptoExplorer.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React, { useState, useEffect } from 'react';
 import { useRouter } from "next/navigation";
 import { LoadingScreen } from "@/components/loading-screen";

From d5453600344b76f9c0eb6f0126fdb83db0cad4ba Mon Sep 17 00:00:00 2001
From: HungPhan-0612 <163500971+HungPhan-0612@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:23:43 +0700
Subject: [PATCH 3/4] Add pathname check to SearchOnTop component to prevent
 rendering on the home page

---
 components/SearchOnTop.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/SearchOnTop.tsx b/components/SearchOnTop.tsx
index 1206150..cc270a1 100644
--- a/components/SearchOnTop.tsx
+++ b/components/SearchOnTop.tsx
@@ -1,15 +1,20 @@
 'use client';
 import React, { useState } from 'react';
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname  } from "next/navigation";
 import { FaSearch, FaMapPin, FaSun, FaEthereum } from 'react-icons/fa';
 import { LoadingScreen } from "@/components/loading-screen";
 
 const SearchOnTop = () => {
+  const pathname = usePathname();
   const [searchQuery, setSearchQuery] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [searchType, setSearchType] = useState<"onchain" | "offchain">("onchain");
   const router = useRouter();
 
+  if (pathname === "/") {
+    return null;
+  }
+  
   const handleSearch = async (event: React.FormEvent) => {
     event.preventDefault();
     if (!searchQuery.trim()) return;

From a2037564fbce8e9d2de691c14614f861b1966457 Mon Sep 17 00:00:00 2001
From: HungPhan-0612 <163500971+HungPhan-0612@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:27:49 +0700
Subject: [PATCH 4/4] Make handleSearch function asynchronous to support future
 enhancements

---
 components/home/CryptoExplorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/home/CryptoExplorer.tsx b/components/home/CryptoExplorer.tsx
index c3a00f8..77a51bf 100644
--- a/components/home/CryptoExplorer.tsx
+++ b/components/home/CryptoExplorer.tsx
@@ -69,7 +69,7 @@ const CryptoPathExplorer = ({ language = 'en' as 'en' | 'vi' }) => {
     fetchData();
   }, []);
 
-  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSearch = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!searchValue.trim()) return;