chore: fix dapp

push-protocol · Jul 5, 2024 · ed87273 · ed87273
1 parent 412fcd1
commit ed87273
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 24 deletions.
diff --git a/packages/examples/dnode-dapp/package-lock.json b/packages/examples/dnode-dapp/package-lock.json
diff --git 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.3",
+    "@pushprotocol/dnode": "^0.0.4",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.28.4",

diff --git a/packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx b/packages/examples/dnode-dapp/src/pages/pushscan/[address].tsx
@@ -1,32 +1,69 @@
-// pages/pushscan/[term].tsx
-
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
+import { getAddressTrx } from '../../utils/push';
+import SearchBar from '../../components/SearchBar';
+
+// Component to display the result data
+const NodeResult: React.FC<{ result: any }> = ({ result }) => (
+  <div className="border p-4 mb-4">
+    <h2 className="text-xl font-semibold mb-2">Node Result</h2>
+    <p>Transaction Count: {result.itemCount}</p>
+    <p>Node Quorum Result: {result.quorumResult}</p>
+    <p>Last Timestamp: {result.lastTs}</p>
+    <p>Transactions Without Quorum Count: {result.keysWithoutQuorumCount}</p>
+  </div>
+);
+
+// Component to display individual items (transactions)
+const ParsedTransactionData: React.FC<{ item: any }> = ({ item }) => (
+  <div className="border p-4 mb-4 bg-gray-100">
+    <pre className="bg-gray-800 text-white p-4 rounded whitespace-pre-wrap break-words overflow-x-auto">
+      {JSON.stringify(item, null, 2)}
+    </pre>
+  </div>
+);
 
 const PushScan: React.FC = () => {
   const router = useRouter();
-  const { address } = router.query; // Extract the dynamic term from the URL
+  const { address } = router.query; // Extract the dynamic address 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);
-  //       };
+  useEffect(() => {
+    if (address) {
+      // Fetch data or perform actions based on the dynamic address
+      const fetchData = async () => {
+        try {
+          const response = await getAddressTrx(address as string);
+          setData(response);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+        }
+      };
 
-  //       fetchData();
-  //     }
-  //   }, [term]);
+      fetchData();
+    }
+  }, [address]);
 
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">
-        PushScan Results for: {address}
+    <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>
+      <h1 className="text-lg mb-4 pt-10 pb-5">
+        PushScan Results for: <span className="font-bold">{address}</span>
       </h1>
+      {data && (
+        <div>
+          <NodeResult result={data.result} />
+          {data.items.length > 0 ? (
+            <h3 className="text-lg mb-4 pt-10 pb-0">Parsed Transaction Data</h3>
+          ) : null}
+          {data.items.map((item: any, index: number) => (
+            <ParsedTransactionData key={index} item={item} />
+          ))}
+        </div>
+      )}
     </div>
   );
 };

diff --git a/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx b/packages/examples/dnode-dapp/src/pages/pushscan/index.tsx
@@ -11,7 +11,7 @@ export default function Explorer() {
     { address: string }[]
   >([
     // generate 10 dummy data
-    { address: '0x1234567890123456789012345678901234567890' },
+    { address: '0x5ac9E6205eACA2bBbA6eF716FD9AabD76326EEee' },
     { address: '0x1234567890123456789012345678901234567891' },
     { address: '0x1234567890123456789012345678901234567892' },
     { address: '0x1234567890123456789012345678901234567893' },

diff --git a/packages/examples/dnode-dapp/src/utils/push.ts b/packages/examples/dnode-dapp/src/utils/push.ts
@@ -23,3 +23,8 @@ export const getChannelInfo = async (signer: any) => {
   const userAlice = await PushAPI.initialize(signer, { env });
   return await userAlice.channel.info();
 };
+
+export const getAddressTrx = async (address: string) => {
+  const userAlice = await PushAPI.initialize(null, { env, account: address });
+  return await userAlice.notification.list('INBOX');
+};