Add data contracts page

packages/frontend/src/components/RootComponent.js

@@ -64,6 +64,7 @@ export default function RootComponent() {
             <div className="topnav">
                 <Link to="/">Home</Link>
                 <Link to="/blocks">Blocks</Link>
+                <Link to="/dataContracts">Data Contracts</Link>
                 <input value={searchQuery} type="text" placeholder="Search..." onChange={handleSearchInput}
                        onKeyPress={handleKeyPress}/>
                 <ModalWindow open={showModal} text={modalText} setShowModal={setShowModal}/>

packages/frontend/src/index.js

@@ -17,6 +17,7 @@ import TransactionRoute, {
     loader as transactionLoader,
 } from "./routes/transaction/transaction.route";
 import DataContractRoute, {loader as dataContractLoader} from "./routes/dataContract/data.contract.route";
+import DataContractsRoute from "./routes/dataContracts/data.contracts.route";
 
 const router = createBrowserRouter([
     {
@@ -49,6 +50,10 @@ const router = createBrowserRouter([
                 element: <DataContractRoute/>,
                 loader: dataContractLoader,
             },
+            {
+                path: "dataContracts",
+                element: <DataContractsRoute/>,
+            },
         ]
     }
 ]);

packages/frontend/src/routes/dataContracts/data.contracts.route.js

@@ -0,0 +1,45 @@
+import React, {useEffect, useState} from 'react';
+import './data_contracts.css'
+import * as Api from '../../util/Api'
+import {Link} from "react-router-dom";
+
+function DataContracts({dataContracts}) {
+    return <div className={"data_contracts_list"}>
+        {
+            dataContracts.map((dataContract) =>
+                <DataContract
+                    key={dataContract.identifier}
+                    dataContract={dataContract}/>)
+        }
+    </div>
+}
+
+function DataContract({dataContract}) {
+    return <div className={"data_contracts_item"}>
+        <Link to={`/dataContracts/${dataContract.identifier}`}>{dataContract.identifier}</Link>
+    </div>
+}
+
+function DataContractsRoute() {
+    const [dataContracts, setDataContracts] = useState(null)
+    const [loading, setLoading] = useState(null)
+    const [error, setError] = useState(null)
+
+
+    useEffect(() => {
+        Api.getDataContracts()
+            .then((dataContracts) => setDataContracts(dataContracts))
+            .catch((err) => {
+                setError(err)
+            })
+            .finally(() => setLoading(false))
+    }, [])
+
+    return (<div className="container">
+        {error && <div>Error {error}</div>}
+        {loading && <div>Loading data contracts from API</div>}
+        {dataContracts && <DataContracts dataContracts={dataContracts}/>}
+    </div>);
+}
+
+export default DataContractsRoute;

packages/frontend/src/routes/dataContracts/data_contracts.css

@@ -0,0 +1,23 @@
+.data_contracts_list {
+    color: white;
+    text-decoration: none;
+    background-color: #1a491c;
+}
+
+.data_contracts_item {
+    text-decoration: none;
+    padding: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+    background-color: #1a491c;
+}
+
+.data_contracts_item a {
+    text-decoration: none;
+    color: white;
+}
+
+.data_contracts_item a:hover {
+    text-decoration: underline;
+    color: #76b2d2;
+}

packages/frontend/src/util/Api.js

@@ -66,6 +66,10 @@ const getDataContractByIdentifier = (identifier) => {
     return call(`dataContract/${identifier}`, 'GET')
 }
 
+const getDataContracts = () => {
+    return call(`dataContracts`, 'GET')
+}
+
 const getStatus = () => {
     return call(`status`, 'GET')
 }
@@ -78,4 +82,4 @@ const decodeTx = (base64) => {
     return call(`transaction/decode`, 'POST', {base64})
 }
 
-export {getStatus, getBlocks, getBlockByHash, getTransactions, getTransaction, search, decodeTx, getDataContractByIdentifier}
+export {getStatus, getBlocks, getBlockByHash, getTransactions, getTransaction, search, decodeTx, getDataContractByIdentifier, getDataContracts}