Redesign + Identities

packages/frontend/package.json

@@ -3,18 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "dash": "^3.24.15",
     "express": "^4.18.2",
+    "framer-motion": "^10.16.4",
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
-    "react-tabs": "^6.0.2",
     "sass": "^1.69.2",
     "web-vitals": "^2.1.4"
   },

packages/frontend/src/components/Identifier.js

@@ -0,0 +1,19 @@
+
+function Identifier ({value, maxSymbols = -1}) {
+
+    if (maxSymbols > 0 && maxSymbols < value.length) {
+        return (
+            <>
+                {value.slice(0, maxSymbols)}...{value.slice(value.length - maxSymbols, value.length)}
+            </>
+        );
+    } else {
+        return (
+            <>
+                {value}
+            </>
+        );
+    }
+}
+
+export default Identifier;

packages/frontend/src/components/RootComponent.js

@@ -1,79 +1,21 @@
 import {Outlet, Link} from "react-router-dom";
 import "./root.css";
 import React, {useState} from 'react';
-import * as Api from '../util/Api'
-import {useNavigate} from "react-router-dom";
-import ModalWindow from "./ModalWindow";
+import Navbar from "../components/navbar/Navbar";
+import theme from "../styles/theme";
+import "../styles/theme.scss";
+import { ChakraProvider} from '@chakra-ui/react'
 
-export default function RootComponent() {
-    let navigate = useNavigate();
 
-    const [showModal, setShowModal] = useState(false)
-    const [modalText, setModalText] = useState("false")
-
-    const showModalWindow = (text, timeout) => {
-        setShowModal(true)
-        setModalText(text)
-
-        if (timeout) {
-            setTimeout(() => {
-                setShowModal(false)
-                setModalText("")
-            }, timeout)
-        }
-    }
-
-    const handleKeyPress = async (event) => {
-        if (event.key === 'Enter') {
-            try {
-                const searchResult = await Api.search(searchQuery)
-
-                if (searchResult?.block) {
-                    // redirect to blocks
-                    console.log(searchResult?.block.header.hash)
-                    setSearchQuery("")
-                    return navigate(`/block/${searchResult?.block.header.hash}`)
-                }
-
-                if (searchResult?.transaction) {
-                    setSearchQuery("")
-                    return navigate(`/transaction/${searchResult?.transaction.hash}`)
-                }
-
-                if (searchResult?.dataContract) {
-                    setSearchQuery("")
-                    return navigate(`/dataContract/${searchResult?.dataContract.identifier}`)
-                }
-
-                if (searchResult?.document) {
-                    setSearchQuery("")
-                    return navigate(`/document/${searchResult?.document.identifier}`)
-                }
-
-                showModalWindow('Not found', 6000)
-            } catch (e) {
-                showModalWindow('Not found', 6000)
-            }
-        }
-    }
-
-    const handleSearchInput = (event) => {
-        setSearchQuery(event.target.value)
-    }
-
-    const [searchQuery, setSearchQuery] = useState("");
+export default function RootComponent({cookies}) {
 
     return (
-        <div>
-            <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}/>
-            </div>
+        <ChakraProvider theme={theme}>
+
+            <Navbar/>
+
             <Outlet/>
-        </div>
+
+        </ChakraProvider>
     );
 }

packages/frontend/src/components/blocks/BlocksList.js

@@ -0,0 +1,32 @@
+import {Link} from "react-router-dom";
+import BlocksListItem from './BlocksListItem'
+import './BlocksList.scss'
+
+
+function BlocksList ({items = [], columnsCount = -1, size = 'l'}) {
+    return( 
+        <div 
+            className='BlocksList'
+            style={{
+                columnCount: items.length > 1 ? columnsCount : 1,
+            }}
+        >
+            {items.map((block) =>
+                <BlocksListItem
+                    key={block.hash}
+                    hash={block.header.hash}
+                    height={block.header.height}
+                    timestamp={block.header.timestamp}
+                    txsLength={block.txs.length}
+                    size={size}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='documents_list__empty_message'>There are no documents created yet.</div>
+            }
+        </div>
+    )
+}
+
+export default BlocksList;

packages/frontend/src/components/blocks/BlocksList.scss

@@ -0,0 +1,3 @@
+.BlocksList {
+
+}

packages/frontend/src/components/blocks/BlocksListItem.js

@@ -0,0 +1,47 @@
+import {Link} from "react-router-dom";
+import './BlocksListItem.scss'
+import Identifier from '../Identifier'
+
+
+function BlocksListItem ({ hash, height = '', timestamp, txsLength, size = 'l' }) {
+    let hashMaxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            hashMaxSymbols = 6;
+            break;
+        case 's':
+            hashMaxSymbols = 6;
+            break;
+    }
+
+    return(
+        <Link to={`/block/${hash}`} className={"BlocksListItem"}>
+            {(size === 'l' && 
+                <span className={"BlocksListItem__Height"}>{height}</span>
+            )}
+
+            {typeof timestamp === 'string' &&
+                <span className={"BlocksListItem__Timestamp"}>
+                    {new Date(timestamp).toLocaleString()}
+                </span>
+            }
+
+
+            {typeof hash === 'string' &&
+                <span className={"BlocksListItem__Hash"}>
+                    <Identifier value={hash} maxSymbols={hashMaxSymbols}/>
+                </span>
+            }
+
+            {(typeof txsLength === 'number' || typeof txsLength === 'string') &&
+                <span className={"BlocksListItem__Txs"}>
+                    ({txsLength} txs)
+                </span>
+            }
+
+        </Link>
+    )
+}
+
+export default BlocksListItem;

packages/frontend/src/components/blocks/BlocksListItem.scss

@@ -0,0 +1,68 @@
+@use '../../styles/mixins.scss';
+
+.BlocksListItem {
+    @include mixins.def_list_item;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &__Hash {
+        color: var(--chakra-colors-gray-200);
+        flex-grow: 1;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+        line-height: 24px;
+        white-space: nowrap;
+    }
+
+    &__Height {
+        font-weight: bold;
+        margin-right: 8px;
+        word-break: keep-all;
+    }
+
+    &__Timestamp {
+        margin-right: 16px;
+        text-wrap: nowrap;
+    }
+
+    &__Txs {
+        margin-left: 12px;
+        text-wrap: nowrap;
+    } 
+
+
+    @media screen and (max-width: 620px) {
+        flex-wrap: wrap;
+
+        &__Height {
+            order: 1;
+            margin-right: 4px;
+        }
+
+        &__Txs {
+            order: 2;
+            margin-left: 0;
+            margin-right: 6px;
+        }
+
+        &__Timestamp {
+            order: 3;
+        }
+
+        &__Hash {
+            order: 4;
+            flex-grow: unset;
+            margin-top: 2px;
+        }
+    }
+
+    @media screen and (max-width: 400px) {
+        &__Timestamp {
+            text-wrap: wrap;
+        }
+    }
+
+}

packages/frontend/src/components/dataContracts/DataContractsList.js

@@ -0,0 +1,26 @@
+import DataContractsListItem from './DataContractsListItem'
+
+
+function DataContractsList ({items = [], size = 'l'}) {
+    return (
+
+        <div className='DataContractsList'>
+
+            {items.map((dataContract, key) =>
+                <DataContractsListItem
+                    key={key}
+                    identifier={dataContract.identifier}
+                    size={size}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
+            }
+
+        </div>
+
+    );
+}
+
+export default DataContractsList;

packages/frontend/src/components/dataContracts/DataContractsListItem.js

@@ -0,0 +1,31 @@
+import {Link} from "react-router-dom";
+import Identifier from '../Identifier'
+import './DataContractsListItem.scss'
+
+
+function DataContractsListItem ({identifier, size = 'l'}) {
+    let maxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            maxSymbols = 6;
+        break;
+        case 's':
+            maxSymbols = 3;
+        break;
+    }
+
+    return (
+        <>
+            {typeof identifier === 'string' &&
+                <Link to={`/dataContract/${identifier}`} className="DataContractsListItem">
+                <div className="DataContractsListItem__Identifier">
+                    <Identifier value={identifier} maxSymbols={maxSymbols}/>
+                </div>
+            </Link>
+            }
+        </>
+    );
+}
+
+export default DataContractsListItem;

packages/frontend/src/components/dataContracts/DataContractsListItem.scss

@@ -0,0 +1,13 @@
+@use '../../styles/mixins.scss';
+
+.DataContractsListItem {
+
+    @include mixins.def_list_item;
+
+    &__Identifier {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        line-height: 24px;
+        white-space: nowrap;
+    }
+}

packages/frontend/src/components/documents/DocumentsList.js

@@ -0,0 +1,24 @@
+import DocumentsListItem from "./DocumentsListItem";
+import './DocumentsList.scss'
+
+export default function DocumentsList({items = [], columnsCount = 1}) {
+    return (
+        <div 
+            className='DocumentsList'
+            style={{
+                columnCount: items.length > 1 ? columnsCount : 1,
+            }}
+        >
+            {items.map((document, key) =>
+                <DocumentsListItem
+                    key={key}
+                    identifier={document.identifier}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='DocumentsList__EmptyMessage'>There are no documents created yet.</div>
+            }
+        </div>
+    );
+}