links

components/GetContractDetails.js

@@ -0,0 +1,75 @@
+// components/GetContractDetails.jsx
+import React, { useEffect, useState } from 'react';
+import { useContractRead } from 'wagmi';
+
+function GetContractDetails({ contractAddress, aggregatorContractAddress, aggregatorContractABI }) {
+  const [contractDetails, setProspectusDetails] = useState(null);
+  const [error, setError] = useState('');
+
+  const { data, isLoading, isError } = useContractRead({
+    address: aggregatorContractAddress,
+    abi: aggregatorContractABI,
+    functionName: 'getContractAndProspectus',
+    args: [contractAddress], // args must be an array, even with a single value
+  });
+
+  useEffect(() => {
+    if (data) {
+      // Assuming the smart contract returns an array of values corresponding to the return parameters
+      const details = {
+        contractId: data[0],
+        prospectusCid: data[1],
+        imageCid: data[2],
+        proposer: data[3],
+      };
+      setProspectusDetails(details);
+    }
+    if (isError) {
+      setError('Failed to load prospectus details.');
+    }
+  }, [data, isError]);
+
+  if (isLoading) return <p>Loading prospectus details...</p>;
+  if (error) return <p>Error: {error}</p>;
+ console.log("pro ", contractDetails );
+  // No need to output contractDetails directly, the detailed fields are displayed below
+return (
+    <div>
+      {contractDetails ? (
+        <>
+          <div>
+            <p>Contract ID: {contractDetails.contractId}</p>
+            <p>Prospectus CID: {contractDetails.prospectusCid}</p>
+
+            {contractDetails.imageCid ?(
+        <div className="border rounded p-3">
+          <img
+                src={`https://ipfs.io/ipfs/${contractDetails.imageCid}`} 
+            alt="IPFS Image"
+		          style={{ maxWidth: '400px' }} // Inline style for max-width
+
+            className="img-fluid "
+          />
+        </div>
+      ) : (
+        <div className="border rounded p-3 text-center">
+          <p>Image Placeholder</p>
+        </div>
+      )}
+
+            <p>Image CID: {contractDetails.imageCid}</p>
+            <p>Proposer: {contractDetails.proposer}</p>
+            <a href={`https://ipfs.io/ipfs/${contractDetails.prospectusCid}`} target="_blank" rel="noopener noreferrer">
+              View Prospectus PDF
+            </a>
+          </div>
+        </>
+      ) : (
+        <p>No prospectus details to display. Make sure the contract address is correct.</p>
+      )}
+    </div>
+  );
+}
+
+export default GetContractDetails;
+

components/ShowAllContractsList.js

@@ -1,4 +1,5 @@
 // ...other imports
+import Link from 'next/link';
 import React, { useEffect, useState, useContext } from "react";
 import { Table } from "react-bootstrap";
 import { useContractRead } from "wagmi";
@@ -28,17 +29,20 @@ function ShowAllContractsList({ listContractAddress, listContractABI, onSelectCo
     return <div>Loading...</div>;
   }
 
-  return (
-    <div className="container mt-4">
-      <ListGroup>
-        {assetsData.map((asset, index) => (
-          <ListGroup.Item key={index} onClick={() => onSelectContract(asset.contractAddress)}>
-            {asset.contractAddress}
-          </ListGroup.Item>
-        ))}
-      </ListGroup>
-    </div>
-  );
+// Inside your .jsx file where you map over your assetsData
+return (
+  <div className="container mt-4">
+    <ListGroup>
+      {assetsData.map((asset, index) => (
+        <ListGroup.Item key={index}>
+	      {asset.contractAddress}
+        </ListGroup.Item>
+      ))}
+    </ListGroup>
+  </div>
+);
+
+
 }
 
 export default ShowAllContractsList;

lib/aggregatorContractABI.json

@@ -0,0 +1,52 @@
+[
+	{
+		"inputs": [
+			{
+				"internalType": "address",
+				"name": "_contractListAddress",
+				"type": "address"
+			},
+			{
+				"internalType": "address",
+				"name": "_prospectusRegistryAddress",
+				"type": "address"
+			}
+		],
+		"stateMutability": "nonpayable",
+		"type": "constructor"
+	},
+	{
+		"inputs": [
+			{
+				"internalType": "address",
+				"name": "contractAddress",
+				"type": "address"
+			}
+		],
+		"name": "getContractAndProspectus",
+		"outputs": [
+			{
+				"internalType": "uint256",
+				"name": "contractId",
+				"type": "uint256"
+			},
+			{
+				"internalType": "string",
+				"name": "prospectusCid",
+				"type": "string"
+			},
+			{
+				"internalType": "string",
+				"name": "imageCid",
+				"type": "string"
+			},
+			{
+				"internalType": "address",
+				"name": "proposer",
+				"type": "address"
+			}
+		],
+		"stateMutability": "view",
+		"type": "function"
+	}
+]

lib/aggregatorContractAddress.json

@@ -0,0 +1,4 @@
+{
+
+	"address": "0x1725cbC659348b73d09dAc488138454Ac05Bc798"
+}

lib/deployContractAddress.json

@@ -1,4 +1,4 @@
 {
-  "address": "0x1676372Eee8456837a72675E6Ab159563E82DB83"
+  "address": "0x03e6E9C2296b758e091022EC405BCC5a8618cb88"
 }
 

lib/prospectusesContractABI.json

@@ -47,6 +47,42 @@
 		"stateMutability": "view",
 		"type": "function"
 	},
+	{
+		"inputs": [
+			{
+				"internalType": "string",
+				"name": "_prospectusCid",
+				"type": "string"
+			}
+		],
+		"name": "getProspectusRecord",
+		"outputs": [
+			{
+				"components": [
+					{
+						"internalType": "string",
+						"name": "prospectusCid",
+						"type": "string"
+					},
+					{
+						"internalType": "string",
+						"name": "imageCid",
+						"type": "string"
+					},
+					{
+						"internalType": "address",
+						"name": "proposer",
+						"type": "address"
+					}
+				],
+				"internalType": "struct ProspectusRegistry.ProspectusRecord",
+				"name": "",
+				"type": "tuple"
+			}
+		],
+		"stateMutability": "view",
+		"type": "function"
+	},
 	{
 		"inputs": [
 			{

lib/prospectusesContractAddress.json

@@ -1,4 +1,4 @@
 {
-  "address": "0x8011cffc9b90AD70acD3a778738738E355a724a1"
+  "address": "0x368463A102661BF7c0788549264102075F5d997e"
 }
 

pages/ContractPage.js

@@ -0,0 +1,31 @@
+// pages/contract.js
+
+import { useRouter } from 'next/router';
+import React from 'react';
+import GetContractDetails from '../components/GetContractDetails'; // make sure to use the correct path to your component
+import aggregatorContractABI from '../lib/aggregatorContractABI.json';
+import aggregatorContractAddress from '../lib/aggregatorContractAddress.json';
+
+export default function ContractPage() {
+  const router = useRouter();
+  const { q } = router.query; // 'q' is the query parameter name
+
+  return (
+    <div>
+      <h2>Contract Details</h2>
+      {q ? (
+        <>
+          <p>Contract Address: {q}</p>
+          <GetContractDetails
+            contractAddress={q}
+            aggregatorContractAddress={aggregatorContractAddress.address}
+            aggregatorContractABI={aggregatorContractABI}
+          />
+        </>
+      ) : (
+        <p>Please provide a contract query parameter.</p>
+      )}
+    </div>
+  );
+}
+