From 2b636c5f6d003c0584261db2f0b4cb5d62478f1a Mon Sep 17 00:00:00 2001
From: aman035 <guptaaman200115@gmail.com>
Date: Fri, 5 Jul 2024 13:42:38 +0530
Subject: [PATCH] chore: fix dapp issues

---
 .../examples/dnode-dapp/package-lock.json     |   8 +-
 packages/examples/dnode-dapp/package.json     |   2 +-
 packages/examples/dnode-dapp/public/user.png  | Bin 0 -> 2331 bytes
 .../dnode-dapp/src/components/SearchBar.tsx   |  19 ++--
 .../src/pages/pushscan/[address].tsx          |  34 +++++++
 .../dnode-dapp/src/pages/pushscan/index.tsx   |  94 +++++++++++++++---
 6 files changed, 128 insertions(+), 29 deletions(-)
 create mode 100644 packages/examples/dnode-dapp/public/user.png
 create mode 100644 packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx

diff --git a/packages/examples/dnode-dapp/package-lock.json b/packages/examples/dnode-dapp/package-lock.json
index 1ad0b56ff..006de4114 100644
--- a/packages/examples/dnode-dapp/package-lock.json
+++ b/packages/examples/dnode-dapp/package-lock.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",
@@ -3719,9 +3719,9 @@
       }
     },
     "node_modules/@pushprotocol/dnode": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@pushprotocol/dnode/-/dnode-0.0.2.tgz",
-      "integrity": "sha512-ok+W/RBobXCT1giFkpowwW8Jt2w8x2RWx4f0t5Xw6BbMB545ria/+jPagH5DG7SZN7vAn/VbCo2PkrKecesfIQ==",
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@pushprotocol/dnode/-/dnode-0.0.3.tgz",
+      "integrity": "sha512-rsE1Czeb/+3lmlPIAlTw/bcM7gxZfWHcRuJQQao4YU6FbzZwD1bXY0bukgt08V73Pvp40heFCnHC7UUeaWmozg==",
       "dependencies": {
         "@metamask/eth-sig-util": "^5.0.2",
         "buffer": "^6.0.3",
diff --git a/packages/examples/dnode-dapp/package.json b/packages/examples/dnode-dapp/package.json
index 39f9fec23..f96927e72 100644
--- a/packages/examples/dnode-dapp/package.json
+++ b/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",
diff --git a/packages/examples/dnode-dapp/public/user.png b/packages/examples/dnode-dapp/public/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee78302d079b6fb088d7fba59432280a0e882184
GIT binary patch
literal 2331
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
BQN#cM

literal 0
HcmV?d00001

diff --git a/packages/examples/dnode-dapp/src/components/SearchBar.tsx b/packages/examples/dnode-dapp/src/components/SearchBar.tsx
index 8f8ab9520..936a1530d 100644
--- a/packages/examples/dnode-dapp/src/components/SearchBar.tsx
+++ b/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"
diff --git a/packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx b/packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx
new file mode 100644
index 000000000..000fb65a6
--- /dev/null
+++ b/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;
diff --git a/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx b/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx
index 3f607c71a..7b834f3f1 100644
--- a/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx
+++ b/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx
@@ -2,19 +2,45 @@
 
 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);
     };
@@ -22,17 +48,61 @@ export default function Explorer() {
   }, []);
 
   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>
   );
 }