chore: fix dapp issues

packages/examples/dnode-dapp/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@headlessui/react": "^2.1.1",
     "@heroicons/react": "^2.1.4",
-    "@pushprotocol/dnode": "^0.0.2",
+    "@pushprotocol/dnode": "^0.0.3",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.28.4",

packages/examples/dnode-dapp/src/components/SearchBar.tsx

@@ -1,18 +1,15 @@
-// components/SearchBar.tsx
-
 import React, { useState } from 'react';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; // Import MagnifyingGlassIcon from Heroicons v2
-
-interface SearchBarProps {
-  onSearch: (searchTerm: string) => void; // Callback function to handle search
-}
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useRouter } from 'next/router';
 
-const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
+const SearchBar: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
+  const router = useRouter();
 
   const handleSearch = () => {
     if (searchTerm.trim()) {
-      onSearch(searchTerm);
+      // Navigate to the search results page
+      router.push(`/pushscan/${encodeURIComponent(searchTerm.trim())}`);
     }
   };
 
@@ -24,15 +21,13 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
 
   return (
     <div className="relative w-full max-w-lg mx-auto">
-      {' '}
-      {/* max-w-lg to reduce width */}
       <input
         type="text"
         placeholder="Search by Address"
         className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
-        onKeyDown={handleKeyDown} // Use onKeyDown instead of onKeyPress
+        onKeyDown={handleKeyDown}
       />
       <button
         className="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-2 rounded-md hover:bg-blue-600 focus:outline-none"

packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx

@@ -0,0 +1,34 @@
+// pages/pushscan/[term].tsx
+
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+
+const PushScan: React.FC = () => {
+  const router = useRouter();
+  const { address } = router.query; // Extract the dynamic term from the URL
+  const [data, setData] = useState<any>(null); // State to store fetched data or results
+
+  //   useEffect(() => {
+  //     if (term) {
+  //       // Fetch data or perform actions based on the dynamic term
+  //       const fetchData = async () => {
+  //         // Replace this with your actual data fetching logic
+  //         const response = await fetch(`/api/pushscan/${term}`);
+  //         const result = await response.json();
+  //         setData(result);
+  //       };
+
+  //       fetchData();
+  //     }
+  //   }, [term]);
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">
+        PushScan Results for: {address}
+      </h1>
+    </div>
+  );
+};
+
+export default PushScan;

packages/examples/dnode-dapp/src/pages/pushscan/index.tsx

@@ -2,37 +2,107 @@
 
 import { useState, useEffect } from 'react';
 import SearchBar from '../../components/SearchBar';
-import StatsComponent from '../../components/Stats';
-import LatestBlocksComponent from '../../components/LatestBlock';
-import { fetchNetworkStats, fetchLatestBlocks } from '../../utils'; // Example function to fetch data
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 export default function Explorer() {
-  const [stats, setStats] = useState({});
-  const [latestBlocks, setLatestBlocks] = useState([]);
+  const [page, setPage] = useState(1);
+  const [latestNotifications, setLatestNotifications] = useState<
+    { address: string }[]
+  >([
+    // generate 10 dummy data
+    { address: '0x1234567890123456789012345678901234567890' },
+    { address: '0x1234567890123456789012345678901234567891' },
+    { address: '0x1234567890123456789012345678901234567892' },
+    { address: '0x1234567890123456789012345678901234567893' },
+    { address: '0x1234567890123456789012345678901234567894' },
+    { address: '0x1234567890123456789012345678901234567895' },
+    { address: '0x1234567890123456789012345678901234567896' },
+    { address: '0x1234567890123456789012345678901234567897' },
+    { address: '0x1234567890123456789012345678901234567898' },
+    { address: '0x1234567890123456789012345678901234567899' },
+  ]);
+  const [total, setTotal] = useState(20);
+  const size = 10; // Hardcoded in api
+
+  const handleNextPage = () => {
+    setPage((prevPage) => prevPage + 1);
+  };
+
+  const router = useRouter();
+
+  const handleClick = (address: string) => {
+    router.push(`/pushscan/${address}`);
+  };
 
   useEffect(() => {
     // Fetch initial stats and latest blocks
     const fetchData = async () => {
-      const statsData = await fetchNetworkStats();
-      const latestBlocksData = await fetchLatestBlocks(30);
+      // TODO: Fetch all address notif
+      // const statsData = await fetchNetworkStats();
+      // const latestBlocksData = await fetchLatestBlocks(30);
       //   setStats(statsData);
       //   setLatestBlocks(latestBlocksData);
     };
     fetchData();
   }, []);
 
   return (
-    <div className="p-4">
+    <div className="p-4 mx-20 mb-10">
       {/* Header with Search Bar */}
       <header className="flex justify-center items-center text-center mb-4">
         <SearchBar />
       </header>
 
-      {/* Stats Component */}
-      {/* <StatsComponent totalBlocks={stats.totalBlocks} tps={stats.tps} /> */}
+      <h3 className="text-lg font-semibold text-gray-900 my-10">
+        Latest Transaction Recipients
+      </h3>
+
+      <ul role="list" className="divide-y divide-gray-100">
+        {latestNotifications.map((notification, index) => (
+          <Link href={`/pushscan/${notification.address}`} key={index}>
+            <li className="flex justify-between gap-x-6 py-5 px-4 border border-gray-200 rounded-lg hover:scale-105 transition-transform duration-150 hover:cursor-pointer">
+              <div className="flex min-w-0 gap-x-4">
+                <img
+                  className="h-12 w-12 flex-none rounded-md bg-gray-50"
+                  src="/user.png"
+                  alt={`${notification.address} img`}
+                />
+                <div className="min-w-0 flex-auto">
+                  <p className="text-sm font-semibold leading-6 text-gray-900">
+                    {notification.address}
+                  </p>
+                </div>
+              </div>
+              <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+                <p className="text-sm leading-6 text-gray-900">
+                  {/* {protocol.category} */}
+                  Maybe A TimeStamp
+                </p>
+              </div>
+            </li>
+          </Link>
+        ))}
+      </ul>
 
-      {/* Latest Blocks Section */}
-      {/* <LatestBlocksComponent blocks={latestBlocks} /> */}
+      <div className="mt-6 flex justify-end space-x-4">
+        {page > 1 && (
+          <button
+            onClick={() => setPage(page - 1)}
+            className="rounded-md bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-300"
+          >
+            Previous Page
+          </button>
+        )}
+        {page * size < total && (
+          <button
+            onClick={handleNextPage}
+            className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
+          >
+            Next Page
+          </button>
+        )}
+      </div>
     </div>
   );
 }