From 8e3c49bd365a4d7412ed41fc8bcf35eaba6fca42 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Mon, 11 Mar 2024 22:48:59 +0700 Subject: [PATCH 01/31] Initial move to Next.js --- packages/frontend/.env | 3 +- packages/frontend/.gitignore | 21 ++- packages/frontend/README.md | 36 ++++- packages/frontend/package.json | 23 +-- .../block/[hash]/Block.js} | 46 ++++-- .../frontend/src/app/block/[hash]/page.js | 19 +++ .../blocks.route.js => app/blocks/Blocks.js} | 70 +++++--- .../src/{routes => app}/blocks/Blocks.scss | 0 packages/frontend/src/app/blocks/page.js | 15 ++ .../[identifier]/DataContract.js} | 75 ++++++--- .../[identifier]}/DataContract.scss | 0 .../src/app/dataContract/[identifier]/page.js | 19 +++ .../dataContracts/DataContracts.js} | 43 ++--- .../frontend/src/app/dataContracts/page.js | 17 ++ .../document/[identifier]/Document.js} | 42 +++-- .../document/[identifier]/Document.scss} | 0 .../src/app/document/[identifier]/page.js | 19 +++ .../enums/state.transition.type.js | 0 .../src/{routes => app}/error/error.route.js | 0 packages/frontend/src/app/home/Home.js | 152 ++++++++++++++++++ .../frontend/src/app/identities/Identities.js | 58 +++++++ packages/frontend/src/app/identities/page.js | 15 ++ .../identity/[identifier]/Identity.js} | 71 +++++--- .../identity/[identifier]/Identity.scss} | 0 .../src/app/identity/[identifier]/page.js | 19 +++ packages/frontend/src/app/layout.js | 16 ++ packages/frontend/src/app/page.js | 15 ++ packages/frontend/src/app/slug/client.js | 10 ++ packages/frontend/src/app/slug/page.js | 9 ++ .../transaction/[hash]/Transaction.js} | 88 +++++----- .../src/app/transaction/[hash]/page.js | 19 +++ .../transaction/[hash]}/transaction.scss | 0 .../frontend/src/components/RootComponent.js | 23 ++- .../src/components/blocks/BlocksList.js | 1 - .../src/components/blocks/BlocksListItem.js | 4 +- .../dataContracts/DataContractsListItem.js | 4 +- .../components/documents/DocumentsListItem.js | 4 +- .../identities/IdentitiesListItem.js | 4 +- .../components/modalWindow/ModalWindow.scss | 39 +++++ .../{ModalWindow.js => modalWindow/index.js} | 3 +- packages/frontend/src/components/root.css | 68 -------- .../components/search/GlobalSearchInput.js | 17 +- .../transactions/TransactionsList.js | 5 +- .../transactions/TransactionsListItem.js | 10 +- packages/frontend/src/index.css | 146 ----------------- packages/frontend/src/routes/home/home.css | 19 --- .../frontend/src/routes/home/home.route.js | 142 ---------------- .../src/routes/identities/identities.route.js | 41 ----- .../src/routes/identities/identities.scss | 3 - packages/frontend/src/styles/pagination.scss | 65 ++++++++ packages/frontend/src/styles/theme.js | 8 +- packages/frontend/src/styles/theme.scss | 15 ++ packages/frontend/src/util/Api.js | 4 +- packages/frontend/src/util/index.js | 2 +- 54 files changed, 908 insertions(+), 639 deletions(-) rename packages/frontend/src/{routes/block/block.route.js => app/block/[hash]/Block.js} (78%) create mode 100644 packages/frontend/src/app/block/[hash]/page.js rename packages/frontend/src/{routes/blocks/blocks.route.js => app/blocks/Blocks.js} (78%) rename packages/frontend/src/{routes => app}/blocks/Blocks.scss (100%) create mode 100644 packages/frontend/src/app/blocks/page.js rename packages/frontend/src/{routes/dataContract/data.contract.route.js => app/dataContract/[identifier]/DataContract.js} (76%) rename packages/frontend/src/{routes/dataContract => app/dataContract/[identifier]}/DataContract.scss (100%) create mode 100644 packages/frontend/src/app/dataContract/[identifier]/page.js rename packages/frontend/src/{routes/dataContracts/data.contracts.route.js => app/dataContracts/DataContracts.js} (58%) create mode 100644 packages/frontend/src/app/dataContracts/page.js rename packages/frontend/src/{routes/document/document.route.js => app/document/[identifier]/Document.js} (77%) rename packages/frontend/src/{routes/document/document.scss => app/document/[identifier]/Document.scss} (100%) create mode 100644 packages/frontend/src/app/document/[identifier]/page.js rename packages/frontend/src/{routes => app}/enums/state.transition.type.js (100%) rename packages/frontend/src/{routes => app}/error/error.route.js (100%) create mode 100644 packages/frontend/src/app/home/Home.js create mode 100644 packages/frontend/src/app/identities/Identities.js create mode 100644 packages/frontend/src/app/identities/page.js rename packages/frontend/src/{routes/identity/identity.route.js => app/identity/[identifier]/Identity.js} (78%) rename packages/frontend/src/{routes/identity/identity.scss => app/identity/[identifier]/Identity.scss} (100%) create mode 100644 packages/frontend/src/app/identity/[identifier]/page.js create mode 100644 packages/frontend/src/app/layout.js create mode 100644 packages/frontend/src/app/page.js create mode 100644 packages/frontend/src/app/slug/client.js create mode 100644 packages/frontend/src/app/slug/page.js rename packages/frontend/src/{routes/transaction/transaction.route.js => app/transaction/[hash]/Transaction.js} (74%) create mode 100644 packages/frontend/src/app/transaction/[hash]/page.js rename packages/frontend/src/{routes/transaction => app/transaction/[hash]}/transaction.scss (100%) create mode 100644 packages/frontend/src/components/modalWindow/ModalWindow.scss rename packages/frontend/src/components/{ModalWindow.js => modalWindow/index.js} (88%) delete mode 100644 packages/frontend/src/components/root.css delete mode 100644 packages/frontend/src/index.css delete mode 100644 packages/frontend/src/routes/home/home.css delete mode 100644 packages/frontend/src/routes/home/home.route.js delete mode 100644 packages/frontend/src/routes/identities/identities.route.js delete mode 100644 packages/frontend/src/routes/identities/identities.scss create mode 100644 packages/frontend/src/styles/pagination.scss diff --git a/packages/frontend/.env b/packages/frontend/.env index bd557b412..6f3af3265 100644 --- a/packages/frontend/.env +++ b/packages/frontend/.env @@ -1 +1,2 @@ -REACT_APP_API_BASE_URL=http://127.0.0.1:3005 \ No newline at end of file +REACT_APP_API_BASE_URL=https://platform-explorer.pshenmic.dev +NEXT_PUBLIC_API_BASE_URL=https://platform-explorer.pshenmic.dev \ No newline at end of file diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore index 4d29575de..fd3dbb571 100644 --- a/packages/frontend/.gitignore +++ b/packages/frontend/.gitignore @@ -4,20 +4,33 @@ /node_modules /.pnp .pnp.js +.yarn/install-state.gz # testing /coverage +# next.js +/.next/ +/out/ + # production /build # misc .DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +*.pem +# debug npm-debug.log* yarn-debug.log* yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/packages/frontend/README.md b/packages/frontend/README.md index 1d803e4a9..0dc9ea2bc 100644 --- a/packages/frontend/README.md +++ b/packages/frontend/README.md @@ -1,10 +1,36 @@ -# Platform Explorer / Frontend +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +## Getting Started -This packages handles frontend of the applicaiton. +First, run the development server: -## Build, Run +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` -Just: +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -`$ yarn start` +You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 9df77f787..9a2305f0a 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -3,29 +3,32 @@ "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", + "@chakra-ui/next-js": "^2.2.0", + "next": "14.1.0", + "react": "^18", + "react-dom": "^18", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "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", "sass": "^1.69.2", "web-vitals": "^2.1.4" + }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "devDependencies": { + "eslint": "^8", + "eslint-config-next": "14.1.0" }, "eslintConfig": { "extends": [ diff --git a/packages/frontend/src/routes/block/block.route.js b/packages/frontend/src/app/block/[hash]/Block.js similarity index 78% rename from packages/frontend/src/routes/block/block.route.js rename to packages/frontend/src/app/block/[hash]/Block.js index b036d3e05..a6878441c 100644 --- a/packages/frontend/src/routes/block/block.route.js +++ b/packages/frontend/src/app/block/[hash]/Block.js @@ -1,7 +1,8 @@ -import React from 'react' -import { useLoaderData} from 'react-router-dom' -import * as Api from '../../util/Api' -import TransactionsList from '../../components/transactions/TransactionsList' +'use client' + +import { useState, useEffect } from 'react' +import * as Api from '../../../util/Api' +import TransactionsList from '../../../components/transactions/TransactionsList' import { Container, @@ -10,18 +11,33 @@ import { } from '@chakra-ui/react' -export async function loader({params}) { - const {hash} = params - const block = await Api.getBlockByHash(hash); - return {block}; -} +function Block({ hash }) { + const [block, setBlock] = useState({}) + const [loading, setLoading] = useState(true) + + + const fetchData = () => { + setLoading(true) + + try { + Api.getBlockByHash(hash).then((res) => { + + setBlock(res) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } -function BlockRoute() { - const {block} = useLoaderData(); + useEffect(fetchData, [hash]) - const txHashes = block?.txs || []; + const txHashes = block?.txs || [] + - return ( + if (!loading) return ( - ); + ) } -export default BlockRoute; +export default Block diff --git a/packages/frontend/src/app/block/[hash]/page.js b/packages/frontend/src/app/block/[hash]/page.js new file mode 100644 index 000000000..16e24e03a --- /dev/null +++ b/packages/frontend/src/app/block/[hash]/page.js @@ -0,0 +1,19 @@ +import Block from './Block' + + +export async function generateMetadata({ params }) { + return { + title: 'Block #' + params.hash + ' — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'block'], + applicationName: 'Dash Platform Explorer' + } +} + +async function BlockRoute({ params }) { + + return + +} + +export default BlockRoute diff --git a/packages/frontend/src/routes/blocks/blocks.route.js b/packages/frontend/src/app/blocks/Blocks.js similarity index 78% rename from packages/frontend/src/routes/blocks/blocks.route.js rename to packages/frontend/src/app/blocks/Blocks.js index 8c5b0babc..0e741e89a 100644 --- a/packages/frontend/src/routes/blocks/blocks.route.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -1,19 +1,20 @@ -import React, {useState, useEffect} from 'react' -import {Link, useLoaderData} from 'react-router-dom' +'use client' + +import { useState, useEffect } from 'react' import * as Api from '../../util/Api' import ReactPaginate from 'react-paginate' -import GoToHeightForm from './../../components/goToHeightForm/GoToHeightForm' -import PageSizeSelector from './../../components/pageSizeSelector/PageSizeSelector' +import GoToHeightForm from '../../components/goToHeightForm/GoToHeightForm' +import PageSizeSelector from '../../components/pageSizeSelector/PageSizeSelector' import BlocksList from '../../components/blocks/BlocksList' import './Blocks.scss' -import { +import { Container, Heading, } from '@chakra-ui/react' -const paginateConfig = { +const paginateConfig = { pageSize: { default: 25, values: [10, 25, 50, 75, 100], @@ -29,39 +30,64 @@ export async function loader() { return {blocks: resultSet, total: pagination.total}; } -function BlocksRoute() { - const {blocks: defaultBlocks, total} = useLoaderData() - const [blocks, setBlocks] = useState(defaultBlocks) +function Blocks() { + const [loading, setLoading] = useState(true) + const [blocks, setBlocks] = useState([]) + const [total, setTotal] = useState(1) const [pageSize, setPageSize] = useState(paginateConfig.pageSize.default) const [currentPage, setCurrentPage] = useState(0) const [blockHeightToSearch, setBlockHeightToSearch] = useState(0) const pageCount = Math.ceil(total / pageSize) + + const fetchData = () => { + setLoading(true) + try { + loader().then((res) => { + + setBlocks(res.blocks) + setTotal(res.total) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } + + useEffect(fetchData, []) + + const handlePageClick = async ({selected}) => { + const {resultSet} = await Api.getBlocks(selected+1, pageSize, 'desc') - setCurrentPage(selected) - setBlocks(resultSet) + } - const goToHeight = async (e) => { - e.preventDefault(); - const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1; + const goToHeight = async (e) => { - setCurrentPage(page); + e.preventDefault() - handlePageClick({selected: page}); + const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1 + setCurrentPage(page) + handlePageClick({selected: page}) + } + useEffect(() => { - setCurrentPage(0); - handlePageClick({selected: 0}); - }, [pageSize]); + setCurrentPage(0) + handlePageClick({selected: 0}) + + }, [pageSize]) + - return ( + if (!loading) return ( - ); + ) } -export default BlocksRoute; +export default Blocks diff --git a/packages/frontend/src/routes/blocks/Blocks.scss b/packages/frontend/src/app/blocks/Blocks.scss similarity index 100% rename from packages/frontend/src/routes/blocks/Blocks.scss rename to packages/frontend/src/app/blocks/Blocks.scss diff --git a/packages/frontend/src/app/blocks/page.js b/packages/frontend/src/app/blocks/page.js new file mode 100644 index 000000000..8c8e6ac9f --- /dev/null +++ b/packages/frontend/src/app/blocks/page.js @@ -0,0 +1,15 @@ +import Blocks from './Blocks' + + +export const metadata = { + title: 'Blocks — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'blocks'], + applicationName: 'Dash Platform Explorer' +} + +async function BlocksRoute() { + return +} + +export default BlocksRoute; diff --git a/packages/frontend/src/routes/dataContract/data.contract.route.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js similarity index 76% rename from packages/frontend/src/routes/dataContract/data.contract.route.js rename to packages/frontend/src/app/dataContract/[identifier]/DataContract.js index efa781f70..d80250623 100644 --- a/packages/frontend/src/routes/dataContract/data.contract.route.js +++ b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js @@ -1,18 +1,19 @@ -import React, {useState} from 'react' -import {Link} from 'react-router-dom' -import {useLoaderData} from 'react-router-dom' -import * as Api from '../../util/Api' +'use client' + +import { useState, useEffect } from 'react' +import Link from 'next/link' +import * as Api from '../../../util/Api' import ReactPaginate from 'react-paginate' -import DocumentsList from '../../components/documents/DocumentsList' +import DocumentsList from '../../../components/documents/DocumentsList' import './DataContract.scss' -import { +import { Box, Container, TableContainer, Table, Thead, Tbody, Tfoot, Tr, Th, Td, Tabs, TabList, TabPanels, Tab, TabPanel, Code -} from '@chakra-ui/react'; +} from '@chakra-ui/react' const pagintationConfig = { @@ -23,9 +24,7 @@ const pagintationConfig = { defaultPage: 1 } -export async function loader({params}) { - const {identifier} = params - +export async function loader(identifier) { const [dataContract, documents] = await Promise.all([ Api.getDataContractByIdentifier(identifier), Api.getDocumentsByDataContract(identifier, @@ -36,28 +35,56 @@ export async function loader({params}) { return { dataContract, documents - }; + } } -function DataContractRoute() { - const {dataContract, documents: defaultDocuments} = useLoaderData(); - const [documents, setDocuments] = useState(defaultDocuments.resultSet) - const pageCount = Math.ceil(defaultDocuments.pagination.total / pagintationConfig.itemsOnPage.default); +function DataContract({identifier}) { + const [dataContract, setDataContract] = useState({}) + const [documents, setDocuments] = useState([]) + const [pageCount, setPageCount] = useState(0) + const [loading, setLoading] = useState(true) + + const fetchData = () => { + setLoading(true) + + try { + loader(identifier).then((res) => { + + setDataContract(res.dataContract) + setDocuments(res.documents.resultSet) + setPageCount(Math.ceil(res.documents.pagination.total / pagintationConfig.itemsOnPage.default)) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } + + useEffect(fetchData, [identifier]) + const handlePageClick = async ({selected}) => { - const {resultSet} = await Api.getDocumentsByDataContract(dataContract.identifier, - selected + 1, - pagintationConfig.itemsOnPage.default + 1) - setDocuments(resultSet); + + Api.getDocumentsByDataContract(dataContract.identifier, + selected + 1, + pagintationConfig.itemsOnPage.default + 1) + .then((res) => { + setDocuments(res.resultSet) + }) + } - return ( + + if (!loading) return ( + Transaction - {dataContract.txHash} + {dataContract.txHash} @@ -156,9 +183,7 @@ function DataContractRoute() { - - - ); + ) } -export default DataContractRoute; +export default DataContract; diff --git a/packages/frontend/src/routes/dataContract/DataContract.scss b/packages/frontend/src/app/dataContract/[identifier]/DataContract.scss similarity index 100% rename from packages/frontend/src/routes/dataContract/DataContract.scss rename to packages/frontend/src/app/dataContract/[identifier]/DataContract.scss diff --git a/packages/frontend/src/app/dataContract/[identifier]/page.js b/packages/frontend/src/app/dataContract/[identifier]/page.js new file mode 100644 index 000000000..9bb8202bb --- /dev/null +++ b/packages/frontend/src/app/dataContract/[identifier]/page.js @@ -0,0 +1,19 @@ +import DataContract from './DataContract' + + +export async function generateMetadata({ params }) { + return { + title: 'Data Contract #' + params.identifier + ' — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contract'], + applicationName: 'Dash Platform Explorer' + } +} + +function DataContractRoute({params}) { + + return + +} + +export default DataContractRoute diff --git a/packages/frontend/src/routes/dataContracts/data.contracts.route.js b/packages/frontend/src/app/dataContracts/DataContracts.js similarity index 58% rename from packages/frontend/src/routes/dataContracts/data.contracts.route.js rename to packages/frontend/src/app/dataContracts/DataContracts.js index 7965066e1..a61b2a283 100644 --- a/packages/frontend/src/routes/dataContracts/data.contracts.route.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -1,4 +1,6 @@ -import React, {useEffect, useState} from 'react' +'use client' + +import { useEffect, useState } from 'react' import * as Api from '../../util/Api' import DataContractsList from '../../components/dataContracts/DataContractsList' @@ -7,25 +9,30 @@ import { Heading, } from '@chakra-ui/react' -function DataContractsRoute() { + +function DataContractsLayout() { const [dataContracts, setDataContracts] = useState(null) - const [loading, setLoading] = useState(null) - const [error, setError] = useState(null) - - useEffect(() => { - Api.getDataContracts(1, 30) - .then((dataContracts) => setDataContracts(dataContracts.resultSet)) - .catch((err) => { - setError(err) + const [loading, setLoading] = useState(true) + + const fetchData = () => { + setLoading(true) + + try { + Api.getDataContracts(1, 30).then((res) => { + + setDataContracts(res.resultSet) + setLoading(false) + }) - .finally(() => setLoading(false)) - }, []) + } catch(error) { + console.log(error) + } + } - return ( -
- {error &&
Error {error}
} - {loading &&
Loading data contracts from API
} + useEffect(fetchData, []) + if (!loading) return ( +
{dataContracts && - ); + ) } -export default DataContractsRoute; +export default DataContractsLayout \ No newline at end of file diff --git a/packages/frontend/src/app/dataContracts/page.js b/packages/frontend/src/app/dataContracts/page.js new file mode 100644 index 000000000..b5de9d401 --- /dev/null +++ b/packages/frontend/src/app/dataContracts/page.js @@ -0,0 +1,17 @@ +import DataContracts from './DataContracts' + + +export const metadata = { + title: 'Data Contracts — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contrancts'], + applicationName: 'Dash Platform Explorer' +} + +function DataContractsRoute() { + + return + +} + +export default DataContractsRoute; diff --git a/packages/frontend/src/routes/document/document.route.js b/packages/frontend/src/app/document/[identifier]/Document.js similarity index 77% rename from packages/frontend/src/routes/document/document.route.js rename to packages/frontend/src/app/document/[identifier]/Document.js index 00f4ebf51..4f5ac8123 100644 --- a/packages/frontend/src/routes/document/document.route.js +++ b/packages/frontend/src/app/document/[identifier]/Document.js @@ -1,6 +1,7 @@ -import React from 'react'; -import {useLoaderData} from "react-router-dom"; -import * as Api from "../../util/Api"; +'use client' + +import { useState, useEffect } from 'react' +import * as Api from "../../../util/Api" import './document.scss' import { @@ -10,18 +11,33 @@ import { Heading, Flex, Code -} from "@chakra-ui/react"; +} from "@chakra-ui/react" -export async function loader({params}) { - const {identifier} = params - return await Api.getDocumentByIdentifier(identifier); -} +function Document({identifier}) { + const [document, setDocument] = useState({}) + const [loading, setLoading] = useState(true) + + const fetchData = () => { + setLoading(true) + + try { + Api.getDocumentByIdentifier(identifier).then((res) => { + + setDocument(res) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } -function DocumentRoute() { - const document = useLoaderData() + useEffect(fetchData, [identifier]) + - return ( + if (!loading) return ( - ); + ) } -export default DocumentRoute; +export default Document diff --git a/packages/frontend/src/routes/document/document.scss b/packages/frontend/src/app/document/[identifier]/Document.scss similarity index 100% rename from packages/frontend/src/routes/document/document.scss rename to packages/frontend/src/app/document/[identifier]/Document.scss diff --git a/packages/frontend/src/app/document/[identifier]/page.js b/packages/frontend/src/app/document/[identifier]/page.js new file mode 100644 index 000000000..3cf75b28c --- /dev/null +++ b/packages/frontend/src/app/document/[identifier]/page.js @@ -0,0 +1,19 @@ +import Document from './Document' + + +export async function generateMetadata({ params }) { + return { + title: 'Document #' + params.identifier + ' — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'document'], + applicationName: 'Dash Platform Explorer' + } +} + +function DocumentRoute({ params }) { + + return + +} + +export default DocumentRoute diff --git a/packages/frontend/src/routes/enums/state.transition.type.js b/packages/frontend/src/app/enums/state.transition.type.js similarity index 100% rename from packages/frontend/src/routes/enums/state.transition.type.js rename to packages/frontend/src/app/enums/state.transition.type.js diff --git a/packages/frontend/src/routes/error/error.route.js b/packages/frontend/src/app/error/error.route.js similarity index 100% rename from packages/frontend/src/routes/error/error.route.js rename to packages/frontend/src/app/error/error.route.js diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js new file mode 100644 index 000000000..9af58c86b --- /dev/null +++ b/packages/frontend/src/app/home/Home.js @@ -0,0 +1,152 @@ +'use client' + +import { useState, useEffect } from 'react' +import * as Api from '../../util/Api' +import TransactionsList from '../../components/transactions/TransactionsList' + +import { + Box, + Text, + Container, + Heading, + Flex, + Stack, + StackDivider +} from '@chakra-ui/react' + + +export async function loader() { + const [status, paginatedTransactions] = await Promise.all([ + Api.getStatus(), + Api.getTransactions(1, 25, 'desc') + ]) + + const transactions = paginatedTransactions.resultSet + + return {status, transactions} +} + +function Home() { + const [loading, setLoading] = useState(true) + const [status, setStatus] = useState(true) + const [transactions, setTransactions] = useState([]) + + const fetchData = () => { + setLoading(true) + + try { + loader().then((res) => { + + setStatus(res.status) + setTransactions(res.transactions) + setLoading(false) + + }) + } catch(error) { + console.log(error) + } + + } + + useEffect(fetchData, []) + + if (!loading) return ( + + + } + > + + + + Network: + {status.network} + + + + Tenderdash Version: + {status.tenderdashVersion} + + + + App Version: + {status.appVersion} + + + + + + + + Average block time: + {Math.ceil(status.blockTimeAverage)} sec. + + + + Blocks: + {status.blocksCount} + + + + Transactions: + {status.txCount} + + + + + + + + Data contracts: + {status.dataContractsCount} + + + + Documents: + {status.documentsCount} + + + + Transfers: + {status.transfersCount} + + + + + + + + + Last transaction + + + + + + + + ); +} + +export default Home; diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js new file mode 100644 index 000000000..6b6569367 --- /dev/null +++ b/packages/frontend/src/app/identities/Identities.js @@ -0,0 +1,58 @@ +'use client' + +import {useEffect, useState} from 'react' +import * as Api from '../../util/Api' +import IdentitiesList from '../../components/identities/IdentitiesList' + +import { + Container, + Heading, +} from '@chakra-ui/react' + + +function Identities() { + const [identities, setIdentities] = useState([]) + const [loading, setLoading] = useState(true) + + + const fetchData = () => { + setLoading(true) + + try { + Api.getIdentities().then((identities) => { + + setIdentities(identities.resultSet) + setLoading(false) + + }) + } catch(error) { + console.log(error) + } + + } + + useEffect(fetchData, []) + + return ( + + + Identities + + {!loading && + + } + + + + ) +} + +export default Identities diff --git a/packages/frontend/src/app/identities/page.js b/packages/frontend/src/app/identities/page.js new file mode 100644 index 000000000..3eccd01d7 --- /dev/null +++ b/packages/frontend/src/app/identities/page.js @@ -0,0 +1,15 @@ +import Identities from './Identities' + + +export const metadata = { + title: 'Identities — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Identities'], + applicationName: 'Dash Platform Explorer' +} + +function IdentitiesRoute() { + return +} + +export default IdentitiesRoute; diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/app/identity/[identifier]/Identity.js similarity index 78% rename from packages/frontend/src/routes/identity/identity.route.js rename to packages/frontend/src/app/identity/[identifier]/Identity.js index 26f17c265..98b8ffd83 100644 --- a/packages/frontend/src/routes/identity/identity.route.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -1,11 +1,13 @@ -import {useLoaderData} from "react-router-dom"; -import * as Api from "../../util/Api"; -import {Link} from "react-router-dom"; -import TransactionsList from "../../components/transactions/TransactionsList"; -import DocumentsList from "../../components/documents/DocumentsList"; -import DataContractsList from "../../components/dataContracts/DataContractsList"; -import TransfersList from "../../components/transfers/TransfersList"; -import './identity.scss' +'use client' + +import { useState, useEffect } from 'react' +import * as Api from "../../../util/Api"; +import Link from 'next/link' +import TransactionsList from "../../../components/transactions/TransactionsList"; +import DocumentsList from "../../../components/documents/DocumentsList"; +import DataContractsList from "../../../components/dataContracts/DataContractsList"; +import TransfersList from "../../../components/transfers/TransfersList"; +import './Identity.scss' import { Box, @@ -16,9 +18,7 @@ import { } from "@chakra-ui/react" -export async function loader({params}) { - const {identifier} = params - +export async function loader(identifier) { const [identity, dataContracts, documents, transactions, transfers] = await Promise.all([ Api.getIdentity(identifier), Api.getDataContractsByIdentity(identifier), @@ -33,19 +33,42 @@ export async function loader({params}) { documents, transactions, transfers - }; + } } -function IdentityRoute() { - const { - identity, - dataContracts, - documents, - transactions, - transfers - } = useLoaderData(); +function Identity({identifier}) { + const [identity, setIdentity] = useState({}) + const [dataContracts, setDataContracts] = useState([]) + const [documents, setDocuments] = useState([]) + const [transactions, setTransactions] = useState([]) + const [transfers, setTransfers] = useState([]) + const [loading, setLoading] = useState(true) + + + const fetchData = () => { + setLoading(true) + + try { + loader(identifier).then((res) => { + + setIdentity(res.identity) + setDataContracts(res.dataContracts) + setDocuments(res.documents) + setTransactions(res.transactions) + setTransfers(res.transfers) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } + + useEffect(fetchData, [identifier]) + - return ( + if (!loading) return (
Created - + {new Date(identity.timestamp).toLocaleString()} @@ -161,7 +184,7 @@ function IdentityRoute() {
- ); + ) } -export default IdentityRoute; +export default Identity diff --git a/packages/frontend/src/routes/identity/identity.scss b/packages/frontend/src/app/identity/[identifier]/Identity.scss similarity index 100% rename from packages/frontend/src/routes/identity/identity.scss rename to packages/frontend/src/app/identity/[identifier]/Identity.scss diff --git a/packages/frontend/src/app/identity/[identifier]/page.js b/packages/frontend/src/app/identity/[identifier]/page.js new file mode 100644 index 000000000..fd28afa49 --- /dev/null +++ b/packages/frontend/src/app/identity/[identifier]/page.js @@ -0,0 +1,19 @@ +import Identity from "./Identity" + + +export async function generateMetadata({ params }) { + return { + title: 'Identity #' + params.identifier + ' — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Identity'], + applicationName: 'Dash Platform Explorer' + } +} + +function IdentityRoute({ params }) { + + return + +} + +export default IdentityRoute; diff --git a/packages/frontend/src/app/layout.js b/packages/frontend/src/app/layout.js new file mode 100644 index 000000000..48ec47bc1 --- /dev/null +++ b/packages/frontend/src/app/layout.js @@ -0,0 +1,16 @@ +import RootComponent from '../components/RootComponent' + + +export default function RootLayout({ children }) { + return ( + + + + + { children } + + + + + ) +} \ No newline at end of file diff --git a/packages/frontend/src/app/page.js b/packages/frontend/src/app/page.js new file mode 100644 index 000000000..28f094ea5 --- /dev/null +++ b/packages/frontend/src/app/page.js @@ -0,0 +1,15 @@ +import Home from './home/Home' + + +export const metadata = { + title: 'Dashboard — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain'], + applicationName: 'Dash Platform Explorer' +} + +async function HomeRoute() { + return +} + +export default HomeRoute diff --git a/packages/frontend/src/app/slug/client.js b/packages/frontend/src/app/slug/client.js new file mode 100644 index 000000000..7644921dc --- /dev/null +++ b/packages/frontend/src/app/slug/client.js @@ -0,0 +1,10 @@ +'use client' + +import React from 'react' +import dynamic from 'next/dynamic' + +const App = dynamic(() => import('../../src/App'), { ssr: false }) + +export function ClientOnly() { + return +} \ No newline at end of file diff --git a/packages/frontend/src/app/slug/page.js b/packages/frontend/src/app/slug/page.js new file mode 100644 index 000000000..491f2eecb --- /dev/null +++ b/packages/frontend/src/app/slug/page.js @@ -0,0 +1,9 @@ +import { ClientOnly } from './client' + +export function generateStaticParams() { + return [{ slug: [''] }] +} + +export default function Page() { + return +} \ No newline at end of file diff --git a/packages/frontend/src/routes/transaction/transaction.route.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js similarity index 74% rename from packages/frontend/src/routes/transaction/transaction.route.js rename to packages/frontend/src/app/transaction/[hash]/Transaction.js index 60aef6a45..15b9667bf 100644 --- a/packages/frontend/src/routes/transaction/transaction.route.js +++ b/packages/frontend/src/app/transaction/[hash]/Transaction.js @@ -1,9 +1,11 @@ -import * as Api from '../../util/Api' -import {Link, useLoaderData} from 'react-router-dom' +'use client' + +import * as Api from '../../../util/Api' +import Link from 'next/link' import {useState, useEffect} from 'react' -import {getTransitionTypeString} from '../../util' -import {StateTransitionEnum} from "../enums/state.transition.type" -import './transaction.scss' +import {getTransitionTypeString} from '../../../util' +import {StateTransitionEnum} from "../../enums/state.transition.type" +import './Transaction.scss' import { Container, @@ -12,10 +14,8 @@ import { } from '@chakra-ui/react' -export async function loader({params}) { - const { txHash } = params - - const transaction = await Api.getTransaction(txHash) +export async function loader(hash) { + const transaction = await Api.getTransaction(hash) return { transaction } } @@ -35,11 +35,11 @@ function TransactionData({data}) { Data contract - {data.dataContractId} + {data.dataContractId} Owner - {data.identityId} + {data.identityId} ) @@ -58,11 +58,11 @@ function TransactionData({data}) { Data contract - {transition.dataContractId} + {transition.dataContractId} Document - {transition.id} + {transition.id} )} @@ -81,7 +81,7 @@ function TransactionData({data}) { Identity - {data.identityId} + {data.identityId} ) @@ -121,11 +121,11 @@ function TransactionData({data}) { Data contract - {data.dataContractId} + {data.dataContractId} Owner - {data.identityId} + {data.identityId} Version @@ -147,7 +147,7 @@ function TransactionData({data}) { Identity - {data.identityId} + {data.identityId} Revision @@ -173,7 +173,7 @@ function TransactionData({data}) { Identity - {data.identityId} + {data.identityId} ) @@ -195,21 +195,23 @@ function TransactionData({data}) { Sender - {data.senderId} + {data.senderId} Recipient - {data.recipientId} + {data.recipientId} ) } } -function TransactionRoute() { - const { transaction } = useLoaderData() - - const { hash, blockHeight, index, type, timestamp, data } = transaction +function Transaction({hash}) { + const [transaction, setTransaction] = useState({}) + const [loading, setLoading] = useState(true) + const [decoding, setDecoding] = useState(false) + const [decodingError, setDecodingError] = useState(null) + const [decodedST, setDecodedST] = useState(null) const decodeTx = (tx) => { if (decodedST || decoding) { @@ -231,15 +233,27 @@ function TransactionRoute() { .finally(() => setDecoding(false)) } - const [decoding, setDecoding] = useState(false) - const [decodingError, setDecodingError] = useState(null) - const [decodedST, setDecodedST] = useState(null) + const fetchData = () => { + setLoading(true) + + try { + loader(hash).then((res) => { + + setTransaction(res.transaction) + decodeTx(res.transaction.data) + setLoading(false) + + }) + } catch (error) { + console.log(error) + } + + } + + useEffect(fetchData, [hash]) - useEffect(() => { - decodeTx(data) - }, []) - return ( + if (!loading) return ( Hash - {hash} + {transaction.hash} Height - {blockHeight} + {transaction.blockHeight} Index - {index} + {transaction.index} Type - {getTransitionTypeString(type)} + {getTransitionTypeString(transaction.type)} Timestamp - {new Date(timestamp).toLocaleString()} + {new Date(transaction.timestamp).toLocaleString()} @@ -301,4 +315,4 @@ function TransactionRoute() { ) } -export default TransactionRoute +export default Transaction diff --git a/packages/frontend/src/app/transaction/[hash]/page.js b/packages/frontend/src/app/transaction/[hash]/page.js new file mode 100644 index 000000000..7f472fb10 --- /dev/null +++ b/packages/frontend/src/app/transaction/[hash]/page.js @@ -0,0 +1,19 @@ +import Transaction from'./Transaction' + + +export async function generateMetadata({ params }) { + return { + title: 'Transaction #' + params.hash + ' — Dash Platform Explorer', + description: '', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Transaction'], + applicationName: 'Dash Platform Explorer' + } +} + +async function TransactionRoute({params}) { + + return + +} + +export default TransactionRoute diff --git a/packages/frontend/src/routes/transaction/transaction.scss b/packages/frontend/src/app/transaction/[hash]/transaction.scss similarity index 100% rename from packages/frontend/src/routes/transaction/transaction.scss rename to packages/frontend/src/app/transaction/[hash]/transaction.scss diff --git a/packages/frontend/src/components/RootComponent.js b/packages/frontend/src/components/RootComponent.js index 42cdccd2f..472a1532a 100644 --- a/packages/frontend/src/components/RootComponent.js +++ b/packages/frontend/src/components/RootComponent.js @@ -1,21 +1,18 @@ -import {Outlet, Link} from "react-router-dom"; -import "./root.css"; -import React, {useState} from 'react'; -import Navbar from "../components/navbar/Navbar"; -import theme from "../styles/theme"; -import "../styles/theme.scss"; -import { ChakraProvider} from '@chakra-ui/react' +'use client' +import Navbar from '../components/navbar/Navbar' +import { ChakraProvider } from '@chakra-ui/react' +import theme from '../styles/theme' +import '../styles/theme.scss' -export default function RootComponent() { - +export default function RootComponent({ children }) { return ( - + - + { children } - ); -} + ) +} \ No newline at end of file diff --git a/packages/frontend/src/components/blocks/BlocksList.js b/packages/frontend/src/components/blocks/BlocksList.js index 0e3eb2ebb..9e8b1d70b 100644 --- a/packages/frontend/src/components/blocks/BlocksList.js +++ b/packages/frontend/src/components/blocks/BlocksList.js @@ -1,4 +1,3 @@ -import {Link} from "react-router-dom"; import BlocksListItem from './BlocksListItem' import './BlocksList.scss' diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js index d17b887c0..1759e29b3 100644 --- a/packages/frontend/src/components/blocks/BlocksListItem.js +++ b/packages/frontend/src/components/blocks/BlocksListItem.js @@ -1,4 +1,4 @@ -import {Link} from 'react-router-dom' +import Link from 'next/link' import './BlocksListItem.scss' @@ -8,7 +8,7 @@ function BlocksListItem ({ block }) { return( {(typeof height === 'number' && diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js index b90c8d333..25a2df0cf 100644 --- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js +++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js @@ -1,4 +1,4 @@ -import {Link} from 'react-router-dom'; +import Link from 'next/link' import './DataContractsListItem.scss' @@ -7,7 +7,7 @@ function DataContractsListItem ({ dataContract }) { return (
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js index caa673e47..fa9cacc57 100644 --- a/packages/frontend/src/components/documents/DocumentsListItem.js +++ b/packages/frontend/src/components/documents/DocumentsListItem.js @@ -1,4 +1,4 @@ -import {Link} from 'react-router-dom'; +import Link from 'next/link' import './DocumentsListItem.scss' @@ -7,7 +7,7 @@ export default function DocumentsListItem({document}) { return ( diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js index 806b7c6ff..c711bc456 100644 --- a/packages/frontend/src/components/identities/IdentitiesListItem.js +++ b/packages/frontend/src/components/identities/IdentitiesListItem.js @@ -1,4 +1,4 @@ -import {Link} from "react-router-dom"; +import Link from 'next/link' import './IdentitiesListItem.scss' @@ -7,7 +7,7 @@ function IdentitiesListItem ({identity}) { return (
diff --git a/packages/frontend/src/components/modalWindow/ModalWindow.scss b/packages/frontend/src/components/modalWindow/ModalWindow.scss new file mode 100644 index 000000000..57f6790e7 --- /dev/null +++ b/packages/frontend/src/components/modalWindow/ModalWindow.scss @@ -0,0 +1,39 @@ +.modal { + position: fixed; + bottom: 0; + right: 0; + top: 0; + left: 0; + z-index: 9999; + } + + .modal_container { + display: flex; + justify-content: center; + align-items:center; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + } + + .modal_message { + display: flex; + position: relative; + justify-content: center; + align-items: center; + height: 30%; + min-width: 300px; + color: black; + background-color: rgb(101, 80, 11); + } + + .modal_close { + position: absolute; + top: 0; + right: 0; + font-size: 20pt; + padding: 10px; + } + + .modal_close:hover { + cursor: pointer; + } \ No newline at end of file diff --git a/packages/frontend/src/components/ModalWindow.js b/packages/frontend/src/components/modalWindow/index.js similarity index 88% rename from packages/frontend/src/components/ModalWindow.js rename to packages/frontend/src/components/modalWindow/index.js index 51e378259..adf527929 100644 --- a/packages/frontend/src/components/ModalWindow.js +++ b/packages/frontend/src/components/modalWindow/index.js @@ -1,5 +1,4 @@ -import "./root.css"; -import React, {useState} from 'react'; +import "./ModalWindow.scss" export default function ModalWindow({open, text, setShowModal}) { diff --git a/packages/frontend/src/components/root.css b/packages/frontend/src/components/root.css deleted file mode 100644 index 5a841f420..000000000 --- a/packages/frontend/src/components/root.css +++ /dev/null @@ -1,68 +0,0 @@ -/* Add a black background color to the top navigation bar */ -.topnav { - overflow: hidden; - background-color: black; -} - -/* Style the links inside the navigation bar */ -.topnav a { - float: left; - display: block; - color: white; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; -} - -/* Change the color of links on hover */ -.topnav a:hover { - background-color: #1a491c; - color: black; -} - -/* Style the "active" element to highlight the current page */ -.topnav a.active { - background-color: #2196F3; - color: white; -} - -/* Style the search box inside the navigation bar */ -.topnav input[type=text] { - float: right; - padding: 6px; - border: none; - min-width: 400px; - border-radius: 5px; - margin-top: 8px; - margin-right: 16px; - font-size: 20px; - background-color: #1a491c; - color: black; -} - -.topnav input[type=text]:focus { - outline: none; -} - -::placeholder { - color: black; - opacity: 0.5 -} - -/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */ -@media screen and (max-width: 600px) { - .topnav a, .topnav input[type=text] { - float: none; - display: block; - text-align: left; - width: 100%; - margin: 0; - padding: 14px; - min-width: auto; - box-sizing: border-box; - } - .topnav input[type=text] { - border: 1px solid #ccc; - } -} diff --git a/packages/frontend/src/components/search/GlobalSearchInput.js b/packages/frontend/src/components/search/GlobalSearchInput.js index efe35d765..111e729c4 100644 --- a/packages/frontend/src/components/search/GlobalSearchInput.js +++ b/packages/frontend/src/components/search/GlobalSearchInput.js @@ -1,14 +1,11 @@ -import React, {useState} from 'react'; -import {useNavigate} from "react-router-dom"; -import ModalWindow from "../ModalWindow"; +import { useState } from 'react' +import ModalWindow from "../modalWindow" import * as Api from '../../util/Api' import { Input, InputGroup, InputRightElement, Button } from '@chakra-ui/react' import { SearchIcon } from '@chakra-ui/icons' - +import { redirect } from 'next/navigation' function GlobalSearchInput () { - let navigate = useNavigate(); - const [showModal, setShowModal] = useState(false) const [modalText, setModalText] = useState("false") @@ -33,22 +30,22 @@ function GlobalSearchInput () { if (searchResult?.block) { // redirect to blocks setSearchQuery("") - return navigate(`/block/${searchResult?.block.header.hash}`) + redirect(`/block/${searchResult?.block.header.hash}`) } if (searchResult?.transaction) { setSearchQuery("") - return navigate(`/transaction/${searchResult?.transaction.hash}`) + redirect(`/transaction/${searchResult?.transaction.hash}`) } if (searchResult?.dataContract) { setSearchQuery("") - return navigate(`/dataContract/${searchResult?.dataContract.identifier}`) + redirect(`/dataContract/${searchResult?.dataContract.identifier}`) } if (searchResult?.document) { setSearchQuery("") - return navigate(`/document/${searchResult?.document.identifier}`) + redirect(`/document/${searchResult?.document.identifier}`) } showModalWindow('Not found', 6000) diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js index b0590211b..a14f18066 100644 --- a/packages/frontend/src/components/transactions/TransactionsList.js +++ b/packages/frontend/src/components/transactions/TransactionsList.js @@ -1,7 +1,8 @@ +'use client' + import TransactionsListItem from './TransactionsListItem' import './TransactionsList.scss' - export default function TransactionsList({transactions = [], size='l'}) { return ( @@ -22,5 +23,5 @@ export default function TransactionsList({transactions = [], size='l'}) {
- ); + ) } diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js index 0025bfb59..868d37b1b 100644 --- a/packages/frontend/src/components/transactions/TransactionsListItem.js +++ b/packages/frontend/src/components/transactions/TransactionsListItem.js @@ -1,15 +1,17 @@ -import {Link} from 'react-router-dom' +'use client' + +import Link from 'next/link' import {getTransitionTypeString} from '../../util/index' import './TransactionsListItem.scss' function TransactionsListItem({ transaction }) { - const hash = typeof transaction === 'object' ? transaction.hash : transaction; + const hash = typeof transaction === 'object' ? transaction.hash : transaction const {timestamp, type} = transaction return ( @@ -35,4 +37,4 @@ function TransactionsListItem({ transaction }) { ) } -export default TransactionsListItem; \ No newline at end of file +export default TransactionsListItem \ No newline at end of file diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css deleted file mode 100644 index 5221317ce..000000000 --- a/packages/frontend/src/index.css +++ /dev/null @@ -1,146 +0,0 @@ -body { - margin: 0; - background-color: black; - color: white; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -.container { - display: flex; - justify-content: center; - align-content: center; - height: 100%; - margin: 0; - align-items: center; - flex-flow: column; - padding: 10px; -} - -.modal { - position: fixed; - bottom: 0; - right: 0; - top: 0; - left: 0; - z-index: 9999; -} - -.modal_container { - display: flex; - justify-content: center; - align-items:center; - height: 100%; - background-color: rgba(0, 0, 0, 0.8); -} - -.modal_message { - display: flex; - position: relative; - justify-content: center; - align-items: center; - height: 30%; - min-width: 300px; - color: black; - background-color: rgb(101, 80, 11); -} - -.modal_close { - position: absolute; - top: 0; - right: 0; - font-size: 20pt; - padding: 10px; -} - -.modal_close:hover { - cursor: pointer; -} - -.pagination { - display: flex; - justify-content: center; - list-style: none; - padding: 0; -} - -.page-item { - padding: 1px 4px 2px; - margin: 0 2px; - cursor: pointer; - font-size: 14pt; - -webkit-user-select: none; - -ms-user-select: none; - text-align: center; - border-radius: 5px; -} - -.page-item:hover:not(.disabled) { - background-color: #ffffff10; -} - -.page-item--next, -.page-item--previous { - display: inline-block; - width: 22px; - padding: 0px 2px 2px; - border: 1px solid #ffffff75; - border-radius: 5px; - user-select: none; -} - -.page-item--next:hover:not(.disabled), -.page-item--previous:hover:not(.disabled) { - border: 1px solid #ffffff; - background-color: #ffffff15; -} - -.page-link { - position: relative; -} - -.page-item.disabled { - cursor: default; - opacity: .3; -} - -.active, .active:hover { - background-color: var(--chakra-colors-gray-800); -} - -.page-item.active:hover { - cursor: default; -} - -.page-item--break-link { - padding: 1px 2px 2px; - margin: 0; -} - -.disabled { - display: none; -} - -.noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@media screen and (max-width: 440px) { - .page-item:not(.active):not(.page-item--previous):not(.page-item--next) { - display: none; - } - -} diff --git a/packages/frontend/src/routes/home/home.css b/packages/frontend/src/routes/home/home.css deleted file mode 100644 index 8822fc30c..000000000 --- a/packages/frontend/src/routes/home/home.css +++ /dev/null @@ -1,19 +0,0 @@ -.status { - display: flex; - flex-flow: column; - background-color: #491a1a; - padding: 10px; - min-width: 300px; -} - -.status_item { - display: flex; - justify-content: space-between; -} - -@media screen and (max-width: 350px) { - .status { - width: calc(100% - 20px); - min-width: auto; - } -} diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js deleted file mode 100644 index c426fae6a..000000000 --- a/packages/frontend/src/routes/home/home.route.js +++ /dev/null @@ -1,142 +0,0 @@ -import React from 'react' -import * as Api from '../../util/Api' -import './home.css' -import {useLoaderData} from 'react-router-dom' -import TransactionsList from '../../components/transactions/TransactionsList' - -import { - Box, - Text, - Container, - Heading, - Flex, - Stack, - StackDivider -} from '@chakra-ui/react' - - -export async function loader({}) { - const [status, paginatedTransactions] = await Promise.all([ - Api.getStatus(), - Api.getTransactions(1, 25, 'desc') - ]) - - const transactions = paginatedTransactions.resultSet - - return {status, transactions} -} - -function HomeRoute() { - const {status, transactions} = useLoaderData(); - - const { - tenderdashVersion, - network, - appVersion, - blocksCount, - blockTimeAverage, - dataContractsCount, - documentsCount, - transfersCount, - txCount - } = status - - return ( - - - } - > - - - - Network: - {network} - - - - Tenderdash Version: - {tenderdashVersion} - - - - App Version: - {appVersion} - - - - - - - - Average block time: - {Math.ceil(blockTimeAverage)} sec. - - - - Blocks: - {blocksCount} - - - - Transactions: - {txCount} - - - - - - - - Data contracts: - {dataContractsCount} - - - - Documents: - {documentsCount} - - - - Transfers: - {transfersCount} - - - - - - - - - Last transaction - - - - - - ); -} - -export default HomeRoute; diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js deleted file mode 100644 index 7ad0cdbd3..000000000 --- a/packages/frontend/src/routes/identities/identities.route.js +++ /dev/null @@ -1,41 +0,0 @@ -import {useLoaderData} from 'react-router-dom' -import * as Api from '../../util/Api' -import './identities.scss' -import IdentitiesList from '../../components/identities/IdentitiesList' - -import { - Container, - Heading, -} from '@chakra-ui/react' - - -export async function loader({params}) { - const {identifier} = params - - return await Api.getIdentities(identifier); -} - -function IdentitiesRoute() { - const identities = useLoaderData().resultSet; - - return ( - - - Identities - - - - - - ); -} - -export default IdentitiesRoute; diff --git a/packages/frontend/src/routes/identities/identities.scss b/packages/frontend/src/routes/identities/identities.scss deleted file mode 100644 index 8c6dfbeaf..000000000 --- a/packages/frontend/src/routes/identities/identities.scss +++ /dev/null @@ -1,3 +0,0 @@ -.identity { - -} \ No newline at end of file diff --git a/packages/frontend/src/styles/pagination.scss b/packages/frontend/src/styles/pagination.scss new file mode 100644 index 000000000..04e7b1778 --- /dev/null +++ b/packages/frontend/src/styles/pagination.scss @@ -0,0 +1,65 @@ +.pagination { + display: flex; + justify-content: center; + list-style: none; + padding: 0; +} + +.page-item { + padding: 1px 4px 2px; + margin: 0 2px; + cursor: pointer; + font-size: 14pt; + -webkit-user-select: none; + -ms-user-select: none; + text-align: center; + border-radius: 5px; +} + +.page-item:hover:not(.disabled) { + background-color: #ffffff10; +} + +.page-item--next, +.page-item--previous { + display: inline-block; + width: 22px; + padding: 0px 2px 2px; + border: 1px solid #ffffff75; + border-radius: 5px; + user-select: none; +} + +.page-item--next:hover:not(.disabled), +.page-item--previous:hover:not(.disabled) { + border: 1px solid #ffffff; + background-color: #ffffff15; +} + +.page-link { + position: relative; +} + +.page-item.disabled { + cursor: default; + opacity: .3; +} + +.active, .active:hover { + background-color: var(--chakra-colors-gray-800); +} + +.page-item.active:hover { + cursor: default; +} + +.page-item--break-link { + padding: 1px 2px 2px; + margin: 0; +} + +@media screen and (max-width: 440px) { + .page-item:not(.active):not(.page-item--previous):not(.page-item--next) { + display: none; + } +} \ No newline at end of file diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index c3b8f025f..8ca065208 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -1,7 +1,7 @@ import { extendTheme } from '@chakra-ui/react' export const theme = extendTheme( { - initialColorMode: 'light', + initialColorMode: 'dark', useSystemColorMode: false, colors: { brand: { @@ -42,8 +42,8 @@ export const theme = extendTheme( { } } } -}); +}) -localStorage.setItem('chakra-ui-color-mode', 'dark'); + // localStorage.setItem('chakra-ui-color-mode', 'dark') -export default theme; \ No newline at end of file +export default theme \ No newline at end of file diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss index 8ba74539b..d3b8af3f7 100644 --- a/packages/frontend/src/styles/theme.scss +++ b/packages/frontend/src/styles/theme.scss @@ -1,3 +1,5 @@ +@import './pagination.scss'; + .InfoBlock { position: relative; padding: var(--chakra-space-3); @@ -37,4 +39,17 @@ } } } +} + +.disabled { + display: none; +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } \ No newline at end of file diff --git a/packages/frontend/src/util/Api.js b/packages/frontend/src/util/Api.js index eb79fdc33..af3a4f855 100644 --- a/packages/frontend/src/util/Api.js +++ b/packages/frontend/src/util/Api.js @@ -1,4 +1,4 @@ -const BASE_URL = process.env.REACT_APP_API_BASE_URL +const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL const fetchWrapper = (url, options) => { return new Promise((resolve, reject) => { @@ -41,6 +41,8 @@ const call = async (path, method, body) => { throw new Error('Request to Tenderdash RPC is timed out') } + console.log(`${BASE_URL}/${path}`) + console.error(e) throw new Error(e) } diff --git a/packages/frontend/src/util/index.js b/packages/frontend/src/util/index.js index 03a3d24c4..37cec2e61 100644 --- a/packages/frontend/src/util/index.js +++ b/packages/frontend/src/util/index.js @@ -1,4 +1,4 @@ -import {StateTransitionEnum} from "../routes/enums/state.transition.type"; +import {StateTransitionEnum} from "../app/enums/state.transition.type"; const getTransitionTypeString = (id) => { const [stateTransitionType] = Object.entries(StateTransitionEnum) From 633046be3c957584598727ec97097aa54b5c376e Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Mon, 11 Mar 2024 22:52:45 +0700 Subject: [PATCH 02/31] Rename transaction.scss --- .../app/transaction/[hash]/{transaction.scss => Transaction.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/frontend/src/app/transaction/[hash]/{transaction.scss => Transaction.scss} (100%) diff --git a/packages/frontend/src/app/transaction/[hash]/transaction.scss b/packages/frontend/src/app/transaction/[hash]/Transaction.scss similarity index 100% rename from packages/frontend/src/app/transaction/[hash]/transaction.scss rename to packages/frontend/src/app/transaction/[hash]/Transaction.scss From 7b8e0b461633c731229fb87dda897057712b0899 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Tue, 12 Mar 2024 00:55:58 +0700 Subject: [PATCH 03/31] Upload config files --- packages/frontend/.eslintrc.json | 3 +++ packages/frontend/jsconfig.json | 7 +++++++ packages/frontend/next.config.mjs | 4 ++++ 3 files changed, 14 insertions(+) create mode 100644 packages/frontend/.eslintrc.json create mode 100644 packages/frontend/jsconfig.json create mode 100644 packages/frontend/next.config.mjs diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json new file mode 100644 index 000000000..bffb357a7 --- /dev/null +++ b/packages/frontend/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/packages/frontend/jsconfig.json b/packages/frontend/jsconfig.json new file mode 100644 index 000000000..b8d6842d7 --- /dev/null +++ b/packages/frontend/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/packages/frontend/next.config.mjs b/packages/frontend/next.config.mjs new file mode 100644 index 000000000..4678774e6 --- /dev/null +++ b/packages/frontend/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; From 6bfe2c5c5be5a024f9be4ec74d69540216352a1c Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Tue, 12 Mar 2024 01:13:45 +0700 Subject: [PATCH 04/31] Upd package.json --- packages/frontend/package.json | 29 +++++------------------------ 1 file changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 9a2305f0a..8a1362656 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -3,10 +3,14 @@ "version": "0.1.0", "private": true, "dependencies": { + "@chakra-ui/icons": "^2.1.1", + "@chakra-ui/react": "^2.8.1", "@chakra-ui/next-js": "^2.2.0", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "next": "14.1.0", "react": "^18", - "react-dom": "^18", + "react-dom": "^18.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -26,28 +30,5 @@ "start": "next start", "lint": "next lint" }, - "devDependencies": { - "eslint": "^8", - "eslint-config-next": "14.1.0" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "main": "index.js", "license": "MIT" } From 53208b79002f11268610218b10cd4ddd094c30ae Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Tue, 12 Mar 2024 01:56:11 +0700 Subject: [PATCH 05/31] Include eslint-config-next package --- packages/frontend/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 8a1362656..a6acd760b 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -4,25 +4,25 @@ "private": true, "dependencies": { "@chakra-ui/icons": "^2.1.1", - "@chakra-ui/react": "^2.8.1", "@chakra-ui/next-js": "^2.2.0", + "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "next": "14.1.0", - "react": "^18", - "react-dom": "^18.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "eslint-config-next": "^14.1.3", "express": "^4.18.2", "framer-motion": "^10.16.4", + "next": "14.1.0", "node-fetch": "^3.3.1", + "react": "^18", + "react-dom": "^18.2.0", "react-paginate": "^8.2.0", "react-router-dom": "^6.12.1", "react-scripts": "5.0.1", "sass": "^1.69.2", "web-vitals": "^2.1.4" - }, "scripts": { "dev": "next dev", From 563831f6499b155ec7af01f3efeb47e979ae4f06 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Tue, 12 Mar 2024 02:18:05 +0700 Subject: [PATCH 06/31] Fix css rule in Block.scss --- packages/frontend/src/app/blocks/Blocks.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/blocks/Blocks.scss b/packages/frontend/src/app/blocks/Blocks.scss index e8661ec16..74450627a 100644 --- a/packages/frontend/src/app/blocks/Blocks.scss +++ b/packages/frontend/src/app/blocks/Blocks.scss @@ -2,7 +2,7 @@ .ListNavigation { display: flex; justify-content: space-between; - align-items: end; + align-items: flex-end; margin-top: 10px; flex-wrap: wrap; } From d6e099afeec466e9bcdfd50c0e5007122d4e215b Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Tue, 12 Mar 2024 21:07:55 +0700 Subject: [PATCH 07/31] Remove unused folder --- packages/frontend/src/app/slug/client.js | 10 ---------- packages/frontend/src/app/slug/page.js | 9 --------- 2 files changed, 19 deletions(-) delete mode 100644 packages/frontend/src/app/slug/client.js delete mode 100644 packages/frontend/src/app/slug/page.js diff --git a/packages/frontend/src/app/slug/client.js b/packages/frontend/src/app/slug/client.js deleted file mode 100644 index 7644921dc..000000000 --- a/packages/frontend/src/app/slug/client.js +++ /dev/null @@ -1,10 +0,0 @@ -'use client' - -import React from 'react' -import dynamic from 'next/dynamic' - -const App = dynamic(() => import('../../src/App'), { ssr: false }) - -export function ClientOnly() { - return -} \ No newline at end of file diff --git a/packages/frontend/src/app/slug/page.js b/packages/frontend/src/app/slug/page.js deleted file mode 100644 index 491f2eecb..000000000 --- a/packages/frontend/src/app/slug/page.js +++ /dev/null @@ -1,9 +0,0 @@ -import { ClientOnly } from './client' - -export function generateStaticParams() { - return [{ slug: [''] }] -} - -export default function Page() { - return -} \ No newline at end of file From 9fef9f8ce065d87beb574a4f20a953f5fc0108ef Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Wed, 13 Mar 2024 14:10:47 +0700 Subject: [PATCH 08/31] Fix import in Document.js --- packages/frontend/src/app/document/[identifier]/Document.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/document/[identifier]/Document.js b/packages/frontend/src/app/document/[identifier]/Document.js index 4f5ac8123..10fc323bc 100644 --- a/packages/frontend/src/app/document/[identifier]/Document.js +++ b/packages/frontend/src/app/document/[identifier]/Document.js @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react' import * as Api from "../../../util/Api" -import './document.scss' +import './Document.scss' import { Box, From a7c55f5f38a14958093acd10bcb24fab9c0ebca3 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Wed, 13 Mar 2024 14:21:01 +0700 Subject: [PATCH 09/31] Remove unused import in TransfersListItem.js --- packages/frontend/src/components/transfers/TransfersListItem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend/src/components/transfers/TransfersListItem.js b/packages/frontend/src/components/transfers/TransfersListItem.js index 5e3756f67..f07181578 100644 --- a/packages/frontend/src/components/transfers/TransfersListItem.js +++ b/packages/frontend/src/components/transfers/TransfersListItem.js @@ -1,4 +1,3 @@ -import {Link} from 'react-router-dom' import { Box, Tag } from '@chakra-ui/react' import { ArrowForwardIcon, ArrowBackIcon } from '@chakra-ui/icons' import './TransfersListItem.scss' From 8388973191e27f86812449b7fa552339b499532d Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 20:10:50 +0700 Subject: [PATCH 10/31] Update packages list in package.json --- packages/frontend/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index a6acd760b..55b59aeb5 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -11,12 +11,11 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "eslint-config-next": "^14.1.3", "express": "^4.18.2", "framer-motion": "^10.16.4", "next": "14.1.0", "node-fetch": "^3.3.1", - "react": "^18", + "react": "^18.2.0", "react-dom": "^18.2.0", "react-paginate": "^8.2.0", "react-router-dom": "^6.12.1", From 147e728845c0193b64f5fbed5534823392037ba4 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 20:19:05 +0700 Subject: [PATCH 11/31] Fix css rule in Blocks.scss --- packages/frontend/src/app/blocks/Blocks.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/blocks/Blocks.scss b/packages/frontend/src/app/blocks/Blocks.scss index e8661ec16..74450627a 100644 --- a/packages/frontend/src/app/blocks/Blocks.scss +++ b/packages/frontend/src/app/blocks/Blocks.scss @@ -2,7 +2,7 @@ .ListNavigation { display: flex; justify-content: space-between; - align-items: end; + align-items: flex-end; margin-top: 10px; flex-wrap: wrap; } From 3cf6ed20c66b19ed2be728982a5fa183e8951fa6 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 20:26:08 +0700 Subject: [PATCH 12/31] Remove comment and debug message --- packages/frontend/src/styles/theme.js | 2 -- packages/frontend/src/util/Api.js | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index 8ca065208..670bf6e0c 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -44,6 +44,4 @@ export const theme = extendTheme( { } }) - // localStorage.setItem('chakra-ui-color-mode', 'dark') - export default theme \ No newline at end of file diff --git a/packages/frontend/src/util/Api.js b/packages/frontend/src/util/Api.js index af3a4f855..40f0a450d 100644 --- a/packages/frontend/src/util/Api.js +++ b/packages/frontend/src/util/Api.js @@ -41,8 +41,6 @@ const call = async (path, method, body) => { throw new Error('Request to Tenderdash RPC is timed out') } - console.log(`${BASE_URL}/${path}`) - console.error(e) throw new Error(e) } From 53cab558b66f8ca296bcfa239e083a0531f4ad53 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 20:35:52 +0700 Subject: [PATCH 13/31] Remove async function from react component --- packages/frontend/src/app/blocks/Blocks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index 0e741e89a..d7f7c6eda 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -68,7 +68,7 @@ function Blocks() { } - const goToHeight = async (e) => { + const goToHeight = (e) => { e.preventDefault() From 83603bdf0925cf3283503c2b2d004fef37a1a66f Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 20:58:36 +0700 Subject: [PATCH 14/31] Convert try/catch to then/catch --- .../frontend/src/app/block/[hash]/Block.js | 16 ++++++----- packages/frontend/src/app/blocks/Blocks.js | 21 ++++++++------ .../dataContract/[identifier]/DataContract.js | 20 +++++++------ .../src/app/dataContracts/DataContracts.js | 17 ++++++----- .../src/app/document/[identifier]/Document.js | 18 ++++++------ packages/frontend/src/app/home/Home.js | 20 +++++++------ .../frontend/src/app/identities/Identities.js | 16 ++++++----- .../src/app/identity/[identifier]/Identity.js | 28 ++++++++++--------- .../src/app/transaction/[hash]/Transaction.js | 20 +++++++------ 9 files changed, 98 insertions(+), 78 deletions(-) diff --git a/packages/frontend/src/app/block/[hash]/Block.js b/packages/frontend/src/app/block/[hash]/Block.js index a6878441c..654ffdbab 100644 --- a/packages/frontend/src/app/block/[hash]/Block.js +++ b/packages/frontend/src/app/block/[hash]/Block.js @@ -19,17 +19,19 @@ function Block({ hash }) { const fetchData = () => { setLoading(true) - try { - Api.getBlockByHash(hash).then((res) => { + Api.getBlockByHash(hash).then((res) => { - setBlock(res) - setLoading(false) + setBlock(res) + + }).catch((error)=>{ - }) - } catch (error) { console.log(error) - } + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, [hash]) diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index d7f7c6eda..05e841590 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -42,18 +42,21 @@ function Blocks() { const fetchData = () => { setLoading(true) - try { - loader().then((res) => { + + loader().then((res) => { + + setBlocks(res.blocks) + setTotal(res.total) - setBlocks(res.blocks) - setTotal(res.total) - setLoading(false) + }).catch((error)=>{ - }) - } catch (error) { console.log(error) - } - + + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, []) diff --git a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js index d80250623..30e51d519 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js +++ b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js @@ -47,19 +47,21 @@ function DataContract({identifier}) { const fetchData = () => { setLoading(true) - try { - loader(identifier).then((res) => { + loader(identifier).then((res) => { - setDataContract(res.dataContract) - setDocuments(res.documents.resultSet) - setPageCount(Math.ceil(res.documents.pagination.total / pagintationConfig.itemsOnPage.default)) - setLoading(false) + setDataContract(res.dataContract) + setDocuments(res.documents.resultSet) + setPageCount(Math.ceil(res.documents.pagination.total / pagintationConfig.itemsOnPage.default)) + + }).catch((error) => { - }) - } catch (error) { console.log(error) - } + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, [identifier]) diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js index a61b2a283..ac93f64d7 100644 --- a/packages/frontend/src/app/dataContracts/DataContracts.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -17,16 +17,19 @@ function DataContractsLayout() { const fetchData = () => { setLoading(true) - try { - Api.getDataContracts(1, 30).then((res) => { + Api.getDataContracts(1, 30).then((res) => { - setDataContracts(res.resultSet) - setLoading(false) + setDataContracts(res.resultSet) + + }).catch((error) => { - }) - } catch(error) { console.log(error) - } + + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, []) diff --git a/packages/frontend/src/app/document/[identifier]/Document.js b/packages/frontend/src/app/document/[identifier]/Document.js index 10fc323bc..2ea6bdc37 100644 --- a/packages/frontend/src/app/document/[identifier]/Document.js +++ b/packages/frontend/src/app/document/[identifier]/Document.js @@ -21,17 +21,19 @@ function Document({identifier}) { const fetchData = () => { setLoading(true) - try { - Api.getDocumentByIdentifier(identifier).then((res) => { + Api.getDocumentByIdentifier(identifier).then((res) => { - setDocument(res) - setLoading(false) + setDocument(res) - }) - } catch (error) { + }).catch ((error) => { + console.log(error) - } - + + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, [identifier]) diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js index 9af58c86b..045608f81 100644 --- a/packages/frontend/src/app/home/Home.js +++ b/packages/frontend/src/app/home/Home.js @@ -34,18 +34,20 @@ function Home() { const fetchData = () => { setLoading(true) - try { - loader().then((res) => { + loader().then((res) => { - setStatus(res.status) - setTransactions(res.transactions) - setLoading(false) + setStatus(res.status) + setTransactions(res.transactions) + + }).catch((error) => { - }) - } catch(error) { console.log(error) - } - + + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, []) diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js index 6b6569367..f25f3787a 100644 --- a/packages/frontend/src/app/identities/Identities.js +++ b/packages/frontend/src/app/identities/Identities.js @@ -18,17 +18,19 @@ function Identities() { const fetchData = () => { setLoading(true) - try { - Api.getIdentities().then((identities) => { + Api.getIdentities().then((identities) => { - setIdentities(identities.resultSet) - setLoading(false) + setIdentities(identities.resultSet) + + }).catch((error) => { - }) - } catch(error) { console.log(error) - } + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, []) diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 98b8ffd83..0c6082867 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -48,21 +48,23 @@ function Identity({identifier}) { const fetchData = () => { setLoading(true) - try { - loader(identifier).then((res) => { - - setIdentity(res.identity) - setDataContracts(res.dataContracts) - setDocuments(res.documents) - setTransactions(res.transactions) - setTransfers(res.transfers) - setLoading(false) - - }) - } catch (error) { + loader(identifier).then((res) => { + + setIdentity(res.identity) + setDataContracts(res.dataContracts) + setDocuments(res.documents) + setTransactions(res.transactions) + setTransfers(res.transfers) + + }).catch((error) => { + console.log(error) - } + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, [identifier]) diff --git a/packages/frontend/src/app/transaction/[hash]/Transaction.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js index 15b9667bf..c1f958099 100644 --- a/packages/frontend/src/app/transaction/[hash]/Transaction.js +++ b/packages/frontend/src/app/transaction/[hash]/Transaction.js @@ -236,18 +236,20 @@ function Transaction({hash}) { const fetchData = () => { setLoading(true) - try { - loader(hash).then((res) => { + loader(hash).then((res) => { - setTransaction(res.transaction) - decodeTx(res.transaction.data) - setLoading(false) + setTransaction(res.transaction) + decodeTx(res.transaction.data) + + }).catch((error) => { - }) - } catch (error) { console.log(error) - } - + + }).finally(() => { + + setLoading(false) + + }) } useEffect(fetchData, [hash]) From c9afdd9372f629848a805a0ef456f193613ea18a Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 21:07:52 +0700 Subject: [PATCH 15/31] Convert loader function to fetch api in Blocks.js --- packages/frontend/src/app/blocks/Blocks.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index 05e841590..1fdc7b27d 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -23,13 +23,6 @@ const paginateConfig = { } -export async function loader() { - const paginatedBlocks = await Api.getBlocks(paginateConfig.defaultPage, paginateConfig.pageSize.default, 'desc') - const {resultSet, pagination} = paginatedBlocks - - return {blocks: resultSet, total: pagination.total}; -} - function Blocks() { const [loading, setLoading] = useState(true) const [blocks, setBlocks] = useState([]) @@ -42,11 +35,15 @@ function Blocks() { const fetchData = () => { setLoading(true) - - loader().then((res) => { - setBlocks(res.blocks) - setTotal(res.total) + Api.getBlocks( + paginateConfig.defaultPage, + paginateConfig.pageSize.default, + 'desc' + ).then((res) => { + + setBlocks(res.resultSet) + setTotal(res.pagination.total) }).catch((error)=>{ From 33d786dd2b9afd8d5f42bf5eea5888ef65582c01 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 21:24:13 +0700 Subject: [PATCH 16/31] Replace async function with .then method in Blocks.js --- packages/frontend/src/app/blocks/Blocks.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index 1fdc7b27d..59681223a 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -59,12 +59,14 @@ function Blocks() { useEffect(fetchData, []) - const handlePageClick = async ({selected}) => { + const handlePageClick = ({selected}) => { - const {resultSet} = await Api.getBlocks(selected+1, pageSize, 'desc') - setCurrentPage(selected) - setBlocks(resultSet) + Api.getBlocks(selected+1, pageSize, 'desc').then((res) => { + setCurrentPage(selected) + setBlocks(res.resultSet) + + }) } From ae5e51e1e06da5d482ff1e29082c399246f7af95 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 21:40:46 +0700 Subject: [PATCH 17/31] Add pagination for data contracts list --- .../src/app/dataContracts/DataContracts.js | 47 ++++++++++++++++++- .../src/components/blocks/BlocksListItem.scss | 4 -- packages/frontend/src/styles/mixins.scss | 4 ++ packages/frontend/src/styles/theme.scss | 4 ++ 4 files changed, 53 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js index ac93f64d7..c53ee3abe 100644 --- a/packages/frontend/src/app/dataContracts/DataContracts.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react' import * as Api from '../../util/Api' import DataContractsList from '../../components/dataContracts/DataContractsList' +import ReactPaginate from 'react-paginate' import { Container, @@ -11,15 +12,21 @@ import { function DataContractsLayout() { - const [dataContracts, setDataContracts] = useState(null) const [loading, setLoading] = useState(true) + const [dataContracts, setDataContracts] = useState(null) + const [total, setTotal] = useState(1) + const pageSize = 25 + const [currentPage, setCurrentPage] = useState(0) + const pageCount = Math.ceil(total / pageSize) + const fetchData = () => { setLoading(true) - Api.getDataContracts(1, 30).then((res) => { + Api.getDataContracts(1, pageSize).then((res) => { setDataContracts(res.resultSet) + setTotal(res.pagination.total) }).catch((error) => { @@ -34,6 +41,16 @@ function DataContractsLayout() { useEffect(fetchData, []) + + const handlePageClick = async ({selected}) => { + + const {resultSet} = await Api.getDataContracts(selected+1, pageSize, 'desc') + setCurrentPage(selected) + setDataContracts(resultSet) + + } + + if (!loading) return (
{dataContracts && @@ -50,6 +67,32 @@ function DataContractsLayout() { + {pageCount > 1 && +
+ +
+ } + + } diff --git a/packages/frontend/src/components/blocks/BlocksListItem.scss b/packages/frontend/src/components/blocks/BlocksListItem.scss index 740908073..7f047946d 100644 --- a/packages/frontend/src/components/blocks/BlocksListItem.scss +++ b/packages/frontend/src/components/blocks/BlocksListItem.scss @@ -3,10 +3,6 @@ .BlocksListItem { @include mixins.def_list_item; - &:last-child { - border-bottom: none; - } - &__Hash { color: var(--chakra-colors-gray-200); flex-grow: 1; diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 9d6ae9ff0..c58136913 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -16,4 +16,8 @@ text-decoration: none; cursor: pointer; } + + &:last-child { + border-bottom: none; + } } \ No newline at end of file diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss index d3b8af3f7..a34ee3287 100644 --- a/packages/frontend/src/styles/theme.scss +++ b/packages/frontend/src/styles/theme.scss @@ -41,6 +41,10 @@ } } +.ListNavigation { + margin-top: 10px; +} + .disabled { display: none; } From 5da0dafdd3c6196d17477bae5053bb8e087d90b1 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 22:04:38 +0700 Subject: [PATCH 18/31] Add pagination for Identities list --- .../frontend/src/app/identities/Identities.js | 48 +++++++++++++++++-- packages/frontend/src/util/Api.js | 4 +- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js index f25f3787a..9262e36e8 100644 --- a/packages/frontend/src/app/identities/Identities.js +++ b/packages/frontend/src/app/identities/Identities.js @@ -3,6 +3,7 @@ import {useEffect, useState} from 'react' import * as Api from '../../util/Api' import IdentitiesList from '../../components/identities/IdentitiesList' +import ReactPaginate from 'react-paginate' import { Container, @@ -11,16 +12,21 @@ import { function Identities() { - const [identities, setIdentities] = useState([]) const [loading, setLoading] = useState(true) + const [identities, setIdentities] = useState([]) + const [total, setTotal] = useState(1) + const pageSize = 25 + const [currentPage, setCurrentPage] = useState(0) + const pageCount = Math.ceil(total / pageSize) const fetchData = () => { setLoading(true) - Api.getIdentities().then((identities) => { + Api.getIdentities(1, pageSize).then((identities) => { setIdentities(identities.resultSet) + setTotal(identities.pagination.total) }).catch((error) => { @@ -35,6 +41,15 @@ function Identities() { useEffect(fetchData, []) + + const handlePageClick = async ({selected}) => { + + const {resultSet} = await Api.getDataContracts(selected+1, pageSize, 'desc') + setCurrentPage(selected) + setDataContracts(resultSet) + + } + return ( Identities - {!loading && + {!loading && <> - } + + {pageCount > 1 && +
+ +
+ } + } diff --git a/packages/frontend/src/util/Api.js b/packages/frontend/src/util/Api.js index 40f0a450d..3f3c972f2 100644 --- a/packages/frontend/src/util/Api.js +++ b/packages/frontend/src/util/Api.js @@ -98,8 +98,8 @@ const getIdentity = (identifier) => { return call(`identity/${identifier}`, 'GET') } -const getIdentities = () => { - return call(`identities`, 'GET') +const getIdentities = (page = 1, limit = 30, order = 'asc') => { + return call(`identities?page=${page}&limit=${limit}&order=${order}`, 'GET') } const getStatus = () => { From 129ccafa978e092283590ac144d653ab50feb814 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Thu, 14 Mar 2024 23:08:47 +0700 Subject: [PATCH 19/31] Create custom paginate component --- packages/frontend/src/app/blocks/Blocks.js | 19 +-------- .../dataContract/[identifier]/DataContract.js | 41 ++++++++----------- .../src/app/dataContracts/DataContracts.js | 19 +-------- .../frontend/src/app/identities/Identities.js | 21 ++-------- .../src/components/pagination/index.js | 32 +++++++++++++++ .../pagination}/pagination.scss | 0 packages/frontend/src/styles/theme.scss | 2 - 7 files changed, 57 insertions(+), 77 deletions(-) create mode 100644 packages/frontend/src/components/pagination/index.js rename packages/frontend/src/{styles => components/pagination}/pagination.scss (100%) diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index 59681223a..44a585f6f 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react' import * as Api from '../../util/Api' -import ReactPaginate from 'react-paginate' +import Pagination from '../../components/pagination' import GoToHeightForm from '../../components/goToHeightForm/GoToHeightForm' import PageSizeSelector from '../../components/pageSizeSelector/PageSizeSelector' import BlocksList from '../../components/blocks/BlocksList' @@ -120,24 +120,9 @@ function Blocks() { } /> - diff --git a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js index 30e51d519..f80ca10fe 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js +++ b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js @@ -3,7 +3,7 @@ import { useState, useEffect } from 'react' import Link from 'next/link' import * as Api from '../../../util/Api' -import ReactPaginate from 'react-paginate' +import Pagination from '../../../components/pagination' import DocumentsList from '../../../components/documents/DocumentsList' import './DataContract.scss' @@ -41,9 +41,13 @@ export async function loader(identifier) { function DataContract({identifier}) { const [dataContract, setDataContract] = useState({}) const [documents, setDocuments] = useState([]) - const [pageCount, setPageCount] = useState(0) + const pageSize = pagintationConfig.itemsOnPage.default + const [total, setTotal] = useState(1) + const [currentPage, setCurrentPage] = useState(0) + const pageCount = Math.ceil(total / pageSize) const [loading, setLoading] = useState(true) + const fetchData = () => { setLoading(true) @@ -51,7 +55,7 @@ function DataContract({identifier}) { setDataContract(res.dataContract) setDocuments(res.documents.resultSet) - setPageCount(Math.ceil(res.documents.pagination.total / pagintationConfig.itemsOnPage.default)) + setTotal(res.documents.pagination.total) }).catch((error) => { @@ -67,7 +71,7 @@ function DataContract({identifier}) { useEffect(fetchData, [identifier]) - const handlePageClick = async ({selected}) => { + const handlePageClick = ({selected}) => { Api.getDocumentsByDataContract(dataContract.identifier, selected + 1, @@ -75,6 +79,8 @@ function DataContract({identifier}) { .then((res) => { setDocuments(res.resultSet) }) + + setCurrentPage(selected) } @@ -144,25 +150,14 @@ function DataContract({identifier}) { columnsCount={2} /> - + + {pageCount > 1 && + + } diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js index c53ee3abe..0d790fb78 100644 --- a/packages/frontend/src/app/dataContracts/DataContracts.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react' import * as Api from '../../util/Api' import DataContractsList from '../../components/dataContracts/DataContractsList' -import ReactPaginate from 'react-paginate' +import Pagination from '../../components/pagination' import { Container, @@ -69,24 +69,9 @@ function DataContractsLayout() { {pageCount > 1 &&
-
diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js index 9262e36e8..a9fd81429 100644 --- a/packages/frontend/src/app/identities/Identities.js +++ b/packages/frontend/src/app/identities/Identities.js @@ -3,7 +3,7 @@ import {useEffect, useState} from 'react' import * as Api from '../../util/Api' import IdentitiesList from '../../components/identities/IdentitiesList' -import ReactPaginate from 'react-paginate' +import Pagination from '../../components/pagination' import { Container, @@ -46,7 +46,7 @@ function Identities() { const {resultSet} = await Api.getDataContracts(selected+1, pageSize, 'desc') setCurrentPage(selected) - setDataContracts(resultSet) + setIdentities(resultSet) } @@ -68,24 +68,9 @@ function Identities() { {pageCount > 1 &&
-
diff --git a/packages/frontend/src/components/pagination/index.js b/packages/frontend/src/components/pagination/index.js new file mode 100644 index 000000000..ca20c2125 --- /dev/null +++ b/packages/frontend/src/components/pagination/index.js @@ -0,0 +1,32 @@ +import './pagination.scss' + +import ReactPaginate from 'react-paginate' + +function Pagination ({onPageChange, pageCount, forcePage}) { + const forcePageProp = forcePage ? { forcePage: forcePage } : {} + + return ( + + ) +} + +export default Pagination \ No newline at end of file diff --git a/packages/frontend/src/styles/pagination.scss b/packages/frontend/src/components/pagination/pagination.scss similarity index 100% rename from packages/frontend/src/styles/pagination.scss rename to packages/frontend/src/components/pagination/pagination.scss diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss index a34ee3287..6e995abbf 100644 --- a/packages/frontend/src/styles/theme.scss +++ b/packages/frontend/src/styles/theme.scss @@ -1,5 +1,3 @@ -@import './pagination.scss'; - .InfoBlock { position: relative; padding: var(--chakra-space-3); From 95b970608959eca815ee315ffa029034016ae50a Mon Sep 17 00:00:00 2001 From: Alex <143793672+alexeyandreevsky@users.noreply.github.com> Date: Thu, 14 Mar 2024 23:43:42 +0700 Subject: [PATCH 20/31] Update README.md --- packages/frontend/README.md | 42 ++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/frontend/README.md b/packages/frontend/README.md index 0dc9ea2bc..4e0d41712 100644 --- a/packages/frontend/README.md +++ b/packages/frontend/README.md @@ -1,36 +1,36 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Platform Explorer / Frontend -## Getting Started -First, run the development server: +This packages handles frontend of the applicaiton. + + +## Install dependencies: ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +npm install ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Verify your packages/frontend/.env is matching your backend API URL -You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. +## Run the app -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. +Development server: -## Learn More +```bash +npm run dev +``` -To learn more about Next.js, take a look at the following resources: +Build: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +```bash +npm run build +``` -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +Start: -## Deploy on Vercel +```bash +npm run start +``` -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. From 051710706c645833cd52af9342d2a0ced445d756 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Fri, 15 Mar 2024 20:23:46 +0700 Subject: [PATCH 21/31] Setting initial color mode from theme config --- packages/frontend/src/components/RootComponent.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/RootComponent.js b/packages/frontend/src/components/RootComponent.js index 472a1532a..842b90f1d 100644 --- a/packages/frontend/src/components/RootComponent.js +++ b/packages/frontend/src/components/RootComponent.js @@ -1,13 +1,20 @@ 'use client' import Navbar from '../components/navbar/Navbar' -import { ChakraProvider } from '@chakra-ui/react' +import { ChakraProvider, localStorageManager } from '@chakra-ui/react' +import { useEffect } from "react"; import theme from '../styles/theme' import '../styles/theme.scss' + + export default function RootComponent({ children }) { + useEffect(() => { + localStorage.setItem('chakra-ui-color-mode', theme.initialColorMode) + }, []) + return ( - + From 569e93cc221be8a099fab25e582e0712ccdde302 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Fri, 15 Mar 2024 23:29:14 +0700 Subject: [PATCH 22/31] Fix code style --- .../frontend/src/app/block/[hash]/Block.js | 22 ++----- .../frontend/src/app/block/[hash]/page.js | 2 - packages/frontend/src/app/blocks/Blocks.js | 47 ++++----------- .../dataContract/[identifier]/DataContract.js | 52 +++++------------ .../src/app/dataContract/[identifier]/page.js | 2 - .../src/app/dataContracts/DataContracts.js | 38 +++++-------- .../frontend/src/app/dataContracts/page.js | 2 - .../src/app/document/[identifier]/Document.js | 20 ++----- .../src/app/document/[identifier]/page.js | 2 - packages/frontend/src/app/home/Home.js | 33 +++-------- .../frontend/src/app/identities/Identities.js | 35 +++++------- .../src/app/identity/[identifier]/Identity.js | 57 +++++++------------ .../src/app/identity/[identifier]/page.js | 2 - .../src/app/transaction/[hash]/Transaction.js | 28 +++------ .../src/app/transaction/[hash]/page.js | 6 +- 15 files changed, 104 insertions(+), 244 deletions(-) diff --git a/packages/frontend/src/app/block/[hash]/Block.js b/packages/frontend/src/app/block/[hash]/Block.js index 654ffdbab..fbd1d22a6 100644 --- a/packages/frontend/src/app/block/[hash]/Block.js +++ b/packages/frontend/src/app/block/[hash]/Block.js @@ -15,29 +15,18 @@ function Block({ hash }) { const [block, setBlock] = useState({}) const [loading, setLoading] = useState(true) - const fetchData = () => { setLoading(true) - Api.getBlockByHash(hash).then((res) => { - - setBlock(res) - - }).catch((error)=>{ - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getBlockByHash(hash) + .then(setBlock) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, [hash]) const txHashes = block?.txs || [] - if (!loading) return ( - - {txHashes.length ? : null} - ) } diff --git a/packages/frontend/src/app/block/[hash]/page.js b/packages/frontend/src/app/block/[hash]/page.js index 16e24e03a..3d41f2662 100644 --- a/packages/frontend/src/app/block/[hash]/page.js +++ b/packages/frontend/src/app/block/[hash]/page.js @@ -11,9 +11,7 @@ export async function generateMetadata({ params }) { } async function BlockRoute({ params }) { - return - } export default BlockRoute diff --git a/packages/frontend/src/app/blocks/Blocks.js b/packages/frontend/src/app/blocks/Blocks.js index 44a585f6f..4cc79a449 100644 --- a/packages/frontend/src/app/blocks/Blocks.js +++ b/packages/frontend/src/app/blocks/Blocks.js @@ -31,64 +31,42 @@ function Blocks() { const [currentPage, setCurrentPage] = useState(0) const [blockHeightToSearch, setBlockHeightToSearch] = useState(0) const pageCount = Math.ceil(total / pageSize) - const fetchData = () => { setLoading(true) - Api.getBlocks( - paginateConfig.defaultPage, - paginateConfig.pageSize.default, - 'desc' - ).then((res) => { - - setBlocks(res.resultSet) - setTotal(res.pagination.total) - - }).catch((error)=>{ - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getBlocks(paginateConfig.defaultPage, paginateConfig.pageSize.default, 'desc') + .then((res) => { + setBlocks(res.resultSet) + setTotal(res.pagination.total) + }) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, []) - const handlePageClick = ({selected}) => { - - Api.getBlocks(selected+1, pageSize, 'desc').then((res) => { - - setCurrentPage(selected) - setBlocks(res.resultSet) - - }) + Api.getBlocks(selected+1, pageSize, 'desc') + .then((res) => { + setCurrentPage(selected) + setBlocks(res.resultSet) + }) } - const goToHeight = (e) => { - e.preventDefault() const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1 setCurrentPage(page) handlePageClick({selected: page}) - } - useEffect(() => { - setCurrentPage(0) handlePageClick({selected: 0}) - }, [pageSize]) - if (!loading) return ( Blocks -
{ setLoading(true) - loader(identifier).then((res) => { - - setDataContract(res.dataContract) - setDocuments(res.documents.resultSet) - setTotal(res.documents.pagination.total) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - + Promise.all([ + Api.getDataContractByIdentifier(identifier), + Api.getDocumentsByDataContract(identifier, + pagintationConfig.defaultPage, + pagintationConfig.itemsOnPage.default + 1) + ]) + .then(([defaultDataContract, defaultDocuments]) => { + setDataContract(defaultDataContract) + setDocuments(defaultDocuments.resultSet) + setTotal(defaultDocuments.pagination.total) + }) + .catch(console.log) + .finally(() => { setLoading(false) - }) } useEffect(fetchData, [identifier]) - const handlePageClick = ({selected}) => { - Api.getDocumentsByDataContract(dataContract.identifier, selected + 1, pagintationConfig.itemsOnPage.default + 1) - .then((res) => { - setDocuments(res.resultSet) - }) + .then((res) => setDocuments(res.resultSet)) - setCurrentPage(selected) - + setCurrentPage(selected) } - if (!loading) return ( - - ) } diff --git a/packages/frontend/src/app/dataContract/[identifier]/page.js b/packages/frontend/src/app/dataContract/[identifier]/page.js index 9bb8202bb..e554715ec 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/page.js +++ b/packages/frontend/src/app/dataContract/[identifier]/page.js @@ -11,9 +11,7 @@ export async function generateMetadata({ params }) { } function DataContractRoute({params}) { - return - } export default DataContractRoute diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js index 0d790fb78..e9d57b30a 100644 --- a/packages/frontend/src/app/dataContracts/DataContracts.js +++ b/packages/frontend/src/app/dataContracts/DataContracts.js @@ -18,39 +18,31 @@ function DataContractsLayout() { const pageSize = 25 const [currentPage, setCurrentPage] = useState(0) const pageCount = Math.ceil(total / pageSize) - const fetchData = () => { setLoading(true) - Api.getDataContracts(1, pageSize).then((res) => { - - setDataContracts(res.resultSet) - setTotal(res.pagination.total) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getDataContracts(1, pageSize) + .then((res) => { + setDataContracts(res.resultSet) + setTotal(res.pagination.total) + }) + .catch(console.log) + .finally(() => { + setLoading(false) + }) } useEffect(fetchData, []) - - const handlePageClick = async ({selected}) => { - - const {resultSet} = await Api.getDataContracts(selected+1, pageSize, 'desc') - setCurrentPage(selected) - setDataContracts(resultSet) - + const handlePageClick = ({selected}) => { + Api.getDataContracts(selected+1, pageSize, 'desc') + .then((res) => { + setCurrentPage(selected) + setDataContracts(res.resultSet) + }) } - if (!loading) return (
{dataContracts && diff --git a/packages/frontend/src/app/dataContracts/page.js b/packages/frontend/src/app/dataContracts/page.js index b5de9d401..e091da48d 100644 --- a/packages/frontend/src/app/dataContracts/page.js +++ b/packages/frontend/src/app/dataContracts/page.js @@ -9,9 +9,7 @@ export const metadata = { } function DataContractsRoute() { - return - } export default DataContractsRoute; diff --git a/packages/frontend/src/app/document/[identifier]/Document.js b/packages/frontend/src/app/document/[identifier]/Document.js index 2ea6bdc37..476449d1d 100644 --- a/packages/frontend/src/app/document/[identifier]/Document.js +++ b/packages/frontend/src/app/document/[identifier]/Document.js @@ -21,23 +21,15 @@ function Document({identifier}) { const fetchData = () => { setLoading(true) - Api.getDocumentByIdentifier(identifier).then((res) => { - - setDocument(res) - - }).catch ((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getDocumentByIdentifier(identifier) + .then(setDocument) + .catch(console.log) + .finally(() => { + setLoading(false) + }) } useEffect(fetchData, [identifier]) - if (!loading) return ( - } export default DocumentRoute diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js index 045608f81..e8a40896c 100644 --- a/packages/frontend/src/app/home/Home.js +++ b/packages/frontend/src/app/home/Home.js @@ -15,17 +15,6 @@ import { } from '@chakra-ui/react' -export async function loader() { - const [status, paginatedTransactions] = await Promise.all([ - Api.getStatus(), - Api.getTransactions(1, 25, 'desc') - ]) - - const transactions = paginatedTransactions.resultSet - - return {status, transactions} -} - function Home() { const [loading, setLoading] = useState(true) const [status, setStatus] = useState(true) @@ -34,20 +23,16 @@ function Home() { const fetchData = () => { setLoading(true) - loader().then((res) => { - - setStatus(res.status) - setTransactions(res.transactions) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - + Promise.all([ + Api.getStatus(), + Api.getTransactions(1, 25, 'desc') + ]) + .then(([status, paginatedTransactions]) => { + setStatus(status) + setTransactions(paginatedTransactions.resultSet) }) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, []) diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js index a9fd81429..0c16194a9 100644 --- a/packages/frontend/src/app/identities/Identities.js +++ b/packages/frontend/src/app/identities/Identities.js @@ -19,35 +19,26 @@ function Identities() { const [currentPage, setCurrentPage] = useState(0) const pageCount = Math.ceil(total / pageSize) - const fetchData = () => { setLoading(true) - Api.getIdentities(1, pageSize).then((identities) => { - - setIdentities(identities.resultSet) - setTotal(identities.pagination.total) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getIdentities(1, pageSize) + .then((identities) => { + setIdentities(identities.resultSet) + setTotal(identities.pagination.total) + }) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, []) - - const handlePageClick = async ({selected}) => { - - const {resultSet} = await Api.getDataContracts(selected+1, pageSize, 'desc') - setCurrentPage(selected) - setIdentities(resultSet) - + const handlePageClick = ({selected}) => { + Api.getDataContracts(selected+1, pageSize, 'desc') + .then((res) => { + setCurrentPage(selected) + setIdentities(res.resultSet) + }) } return ( diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js index 0c6082867..19741bfee 100644 --- a/packages/frontend/src/app/identity/[identifier]/Identity.js +++ b/packages/frontend/src/app/identity/[identifier]/Identity.js @@ -18,24 +18,6 @@ import { } from "@chakra-ui/react" -export async function loader(identifier) { - const [identity, dataContracts, documents, transactions, transfers] = await Promise.all([ - Api.getIdentity(identifier), - Api.getDataContractsByIdentity(identifier), - Api.getDocumentsByIdentity(identifier), - Api.getTransactionsByIdentity(identifier), - Api.getTransfersByIdentity(identifier), - ]) - - return { - identity, - dataContracts, - documents, - transactions, - transfers - } -} - function Identity({identifier}) { const [identity, setIdentity] = useState({}) const [dataContracts, setDataContracts] = useState([]) @@ -44,32 +26,35 @@ function Identity({identifier}) { const [transfers, setTransfers] = useState([]) const [loading, setLoading] = useState(true) - const fetchData = () => { setLoading(true) - loader(identifier).then((res) => { - - setIdentity(res.identity) - setDataContracts(res.dataContracts) - setDocuments(res.documents) - setTransactions(res.transactions) - setTransfers(res.transfers) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - + Promise.all([ + Api.getIdentity(identifier), + Api.getDataContractsByIdentity(identifier), + Api.getDocumentsByIdentity(identifier), + Api.getTransactionsByIdentity(identifier), + Api.getTransfersByIdentity(identifier), + ]) + .then(([ + defaultIdentity, + defaultDataContracts, + defaultDocuments, + defaultTransactions, + defaultTransfers + ]) => { + setIdentity(defaultIdentity) + setDataContracts(defaultDataContracts) + setDocuments(defaultDocuments) + setTransactions(defaultTransactions) + setTransfers(defaultTransfers) }) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, [identifier]) - if (!loading) return (
- } export default IdentityRoute; diff --git a/packages/frontend/src/app/transaction/[hash]/Transaction.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js index c1f958099..d3e25475b 100644 --- a/packages/frontend/src/app/transaction/[hash]/Transaction.js +++ b/packages/frontend/src/app/transaction/[hash]/Transaction.js @@ -14,12 +14,6 @@ import { } from '@chakra-ui/react' -export async function loader(hash) { - const transaction = await Api.getTransaction(hash) - - return { transaction } -} - function TransactionData({data}) { if (data === null) return <> @@ -236,25 +230,17 @@ function Transaction({hash}) { const fetchData = () => { setLoading(true) - loader(hash).then((res) => { - - setTransaction(res.transaction) - decodeTx(res.transaction.data) - - }).catch((error) => { - - console.log(error) - - }).finally(() => { - - setLoading(false) - - }) + Api.getTransaction(hash) + .then((res) => { + setTransaction(res) + decodeTx(res.data) + }) + .catch(console.log) + .finally(() => setLoading(false)) } useEffect(fetchData, [hash]) - if (!loading) return ( - } export default TransactionRoute From 4078eda0cc7a8d309c4d13804a9eff1083d96d2f Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Fri, 15 Mar 2024 23:51:14 +0700 Subject: [PATCH 23/31] Remove unused file (old index.js) --- packages/frontend/src/index.js | 90 ---------------------------------- 1 file changed, 90 deletions(-) delete mode 100644 packages/frontend/src/index.js diff --git a/packages/frontend/src/index.js b/packages/frontend/src/index.js deleted file mode 100644 index d4c711f6d..000000000 --- a/packages/frontend/src/index.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { - createBrowserRouter, - RouterProvider, -} from "react-router-dom"; -import reportWebVitals from './reportWebVitals'; -import HomeRoute, {loader as homeLoader} from "./routes/home/home.route"; -import BlockRoute, { - loader as blockLoader, -} from "./routes/block/block.route"; -import ErrorPage from "./routes/error/error.route"; -import RootComponent from "./components/RootComponent"; -import BlocksRoute, {loader as blocksLoader} from "./routes/blocks/blocks.route"; -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"; -import DocumentRoute, {loader as documentLoader} from "./routes/document/document.route"; -import IdentityRoute, {loader as identityLoader} from "./routes/identity/identity.route"; -import IdentitiesRoute, {loader as identitiesLoader} from "./routes/identities/identities.route"; - - -const router = createBrowserRouter([ - { - path: "/", - element: , - errorElement: , - children: [ - { - index: true, - element: , - loader: homeLoader, - }, - { - path: "blocks", - element: , - loader: blocksLoader, - }, - { - path: "block/:hash", - element: , - loader: blockLoader, - }, - { - path: "transaction/:txHash", - element: , - loader: transactionLoader, - }, - { - path: "dataContract/:identifier", - element: , - loader: dataContractLoader, - }, - { - path: "dataContracts", - element: , - }, - { - path: "document/:identifier", - element: , - loader: documentLoader, - }, - { - path: "identities", - element: , - loader: identitiesLoader, - }, - { - path: "identity/:identifier", - element: , - loader: identityLoader, - }, - ] - } -]); - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); From cfe7e7c78b574a7ed873f7f5fe5c56d530560bc8 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sat, 16 Mar 2024 00:44:58 +0700 Subject: [PATCH 24/31] Update metadata description for pages --- packages/frontend/src/app/block/[hash]/page.js | 2 +- packages/frontend/src/app/blocks/page.js | 2 +- packages/frontend/src/app/dataContract/[identifier]/page.js | 2 +- packages/frontend/src/app/dataContracts/page.js | 2 +- packages/frontend/src/app/document/[identifier]/page.js | 2 +- packages/frontend/src/app/identities/page.js | 2 +- packages/frontend/src/app/identity/[identifier]/page.js | 4 ++-- packages/frontend/src/app/page.js | 2 +- packages/frontend/src/app/transaction/[hash]/page.js | 4 ++-- 9 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/app/block/[hash]/page.js b/packages/frontend/src/app/block/[hash]/page.js index 3d41f2662..e84f8befb 100644 --- a/packages/frontend/src/app/block/[hash]/page.js +++ b/packages/frontend/src/app/block/[hash]/page.js @@ -4,7 +4,7 @@ import Block from './Block' export async function generateMetadata({ params }) { return { title: 'Block #' + params.hash + ' — Dash Platform Explorer', - description: '', + description: 'Dash Platform Block Hash ' + params.hash + '. The Timestamp, Transactions count, Block Version.', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'block'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/blocks/page.js b/packages/frontend/src/app/blocks/page.js index 8c8e6ac9f..03a5c9426 100644 --- a/packages/frontend/src/app/blocks/page.js +++ b/packages/frontend/src/app/blocks/page.js @@ -3,7 +3,7 @@ import Blocks from './Blocks' export const metadata = { title: 'Blocks — Dash Platform Explorer', - description: '', + description: 'Blocks that are included in the Dash Platform blockchain. The Timestamp, Hash, Transactions count.', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'blocks'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/dataContract/[identifier]/page.js b/packages/frontend/src/app/dataContract/[identifier]/page.js index e554715ec..b0da57a54 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/page.js +++ b/packages/frontend/src/app/dataContract/[identifier]/page.js @@ -4,7 +4,7 @@ import DataContract from './DataContract' export async function generateMetadata({ params }) { return { title: 'Data Contract #' + params.identifier + ' — Dash Platform Explorer', - description: '', + description: 'Data Contract ' + params.identifier + 'on Dash Platform. The Schema, Documents, Date of Creation, Revision, Transaction.', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contract'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/dataContracts/page.js b/packages/frontend/src/app/dataContracts/page.js index e091da48d..d8cce8ba1 100644 --- a/packages/frontend/src/app/dataContracts/page.js +++ b/packages/frontend/src/app/dataContracts/page.js @@ -3,7 +3,7 @@ import DataContracts from './DataContracts' export const metadata = { title: 'Data Contracts — Dash Platform Explorer', - description: '', + description: 'Data Contracts on Dash Platform. The Identifier, Date of Creation.', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contrancts'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/document/[identifier]/page.js b/packages/frontend/src/app/document/[identifier]/page.js index dee0406b7..e4279bb71 100644 --- a/packages/frontend/src/app/document/[identifier]/page.js +++ b/packages/frontend/src/app/document/[identifier]/page.js @@ -4,7 +4,7 @@ import Document from './Document' export async function generateMetadata({ params }) { return { title: 'Document #' + params.identifier + ' — Dash Platform Explorer', - description: '', + description: 'Document ' + params.identifier + ' on Dash Platform. The Data, Identifier, Revision.', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'document'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/identities/page.js b/packages/frontend/src/app/identities/page.js index 3eccd01d7..61c407130 100644 --- a/packages/frontend/src/app/identities/page.js +++ b/packages/frontend/src/app/identities/page.js @@ -3,7 +3,7 @@ import Identities from './Identities' export const metadata = { title: 'Identities — Dash Platform Explorer', - description: '', + description: 'Identities on Dash Platform. The Identifier, Date of Creation', keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Identities'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/identity/[identifier]/page.js b/packages/frontend/src/app/identity/[identifier]/page.js index d5d77fff9..fa7eca7a7 100644 --- a/packages/frontend/src/app/identity/[identifier]/page.js +++ b/packages/frontend/src/app/identity/[identifier]/page.js @@ -4,8 +4,8 @@ import Identity from "./Identity" export async function generateMetadata({ params }) { return { title: 'Identity #' + params.identifier + ' — Dash Platform Explorer', - description: '', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Identity'], + description: 'Identity #' + params.identifier + ' on Dash Platform. The Identifier, Balance, Transactions, Transfers, Documents, Data contracts', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Identity', 'Identifier', 'Balance', 'Transactions', 'Transfers', 'Documents', 'Data contracts'], applicationName: 'Dash Platform Explorer' } } diff --git a/packages/frontend/src/app/page.js b/packages/frontend/src/app/page.js index 28f094ea5..922ba84df 100644 --- a/packages/frontend/src/app/page.js +++ b/packages/frontend/src/app/page.js @@ -3,7 +3,7 @@ import Home from './home/Home' export const metadata = { title: 'Dashboard — Dash Platform Explorer', - description: '', + description: 'Dashboard of Dash Platform. The Last Transactions, Blocks, Transactions, Data contracts, Documents, Transfers, Average block time.', keywords: ['Dash', 'platform', 'explorer', 'blockchain'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/transaction/[hash]/page.js b/packages/frontend/src/app/transaction/[hash]/page.js index d6928e4f4..2ac83923c 100644 --- a/packages/frontend/src/app/transaction/[hash]/page.js +++ b/packages/frontend/src/app/transaction/[hash]/page.js @@ -4,8 +4,8 @@ import Transaction from'./Transaction' export function generateMetadata({ params }) { return { title: 'Transaction #' + params.hash + ' — Dash Platform Explorer', - description: '', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Transaction'], + description: 'Transaction #' + params.hash + ' on dash platform. The Hash, Height, Type, Timestamp, Transaction data.', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Transaction', 'Hash', 'Height', 'Type', 'Timestamp', 'Data'], applicationName: 'Dash Platform Explorer' } } From 69c6a0da2d9e37755476f636bdf24fa716345132 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sat, 16 Mar 2024 00:50:20 +0700 Subject: [PATCH 25/31] Update metadata for seo --- packages/frontend/src/app/block/[hash]/page.js | 2 +- packages/frontend/src/app/blocks/page.js | 2 +- packages/frontend/src/app/dataContract/[identifier]/page.js | 2 +- packages/frontend/src/app/dataContracts/page.js | 2 +- packages/frontend/src/app/document/[identifier]/page.js | 2 +- packages/frontend/src/app/page.js | 4 ++-- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/app/block/[hash]/page.js b/packages/frontend/src/app/block/[hash]/page.js index e84f8befb..1078285fc 100644 --- a/packages/frontend/src/app/block/[hash]/page.js +++ b/packages/frontend/src/app/block/[hash]/page.js @@ -5,7 +5,7 @@ export async function generateMetadata({ params }) { return { title: 'Block #' + params.hash + ' — Dash Platform Explorer', description: 'Dash Platform Block Hash ' + params.hash + '. The Timestamp, Transactions count, Block Version.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'block'], + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'block', 'Timestamp', 'Transactions', 'Block'], applicationName: 'Dash Platform Explorer' } } diff --git a/packages/frontend/src/app/blocks/page.js b/packages/frontend/src/app/blocks/page.js index 03a5c9426..ed19c941b 100644 --- a/packages/frontend/src/app/blocks/page.js +++ b/packages/frontend/src/app/blocks/page.js @@ -4,7 +4,7 @@ import Blocks from './Blocks' export const metadata = { title: 'Blocks — Dash Platform Explorer', description: 'Blocks that are included in the Dash Platform blockchain. The Timestamp, Hash, Transactions count.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'blocks'], + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'blocks', 'Timestamp', 'Hash', 'Transactions'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/dataContract/[identifier]/page.js b/packages/frontend/src/app/dataContract/[identifier]/page.js index b0da57a54..8d7ed096d 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/page.js +++ b/packages/frontend/src/app/dataContract/[identifier]/page.js @@ -5,7 +5,7 @@ export async function generateMetadata({ params }) { return { title: 'Data Contract #' + params.identifier + ' — Dash Platform Explorer', description: 'Data Contract ' + params.identifier + 'on Dash Platform. The Schema, Documents, Date of Creation, Revision, Transaction.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contract'], + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contract', 'datacontract', 'Schema', 'Documents', 'Date of Creation', 'Revision', 'Transaction'], applicationName: 'Dash Platform Explorer' } } diff --git a/packages/frontend/src/app/dataContracts/page.js b/packages/frontend/src/app/dataContracts/page.js index d8cce8ba1..dc61837c4 100644 --- a/packages/frontend/src/app/dataContracts/page.js +++ b/packages/frontend/src/app/dataContracts/page.js @@ -4,7 +4,7 @@ import DataContracts from './DataContracts' export const metadata = { title: 'Data Contracts — Dash Platform Explorer', description: 'Data Contracts on Dash Platform. The Identifier, Date of Creation.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contrancts'], + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'data contrancts', 'Datacontract', 'Identifier', 'Date of Creation'], applicationName: 'Dash Platform Explorer' } diff --git a/packages/frontend/src/app/document/[identifier]/page.js b/packages/frontend/src/app/document/[identifier]/page.js index e4279bb71..a17178fd0 100644 --- a/packages/frontend/src/app/document/[identifier]/page.js +++ b/packages/frontend/src/app/document/[identifier]/page.js @@ -5,7 +5,7 @@ export async function generateMetadata({ params }) { return { title: 'Document #' + params.identifier + ' — Dash Platform Explorer', description: 'Document ' + params.identifier + ' on Dash Platform. The Data, Identifier, Revision.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'document'], + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'document', 'Data', 'Identifier', 'Revision'], applicationName: 'Dash Platform Explorer' } } diff --git a/packages/frontend/src/app/page.js b/packages/frontend/src/app/page.js index 922ba84df..481a81690 100644 --- a/packages/frontend/src/app/page.js +++ b/packages/frontend/src/app/page.js @@ -3,8 +3,8 @@ import Home from './home/Home' export const metadata = { title: 'Dashboard — Dash Platform Explorer', - description: 'Dashboard of Dash Platform. The Last Transactions, Blocks, Transactions, Data contracts, Documents, Transfers, Average block time.', - keywords: ['Dash', 'platform', 'explorer', 'blockchain'], + description: 'Dashboard of Dash Platform. The Last Transactions, Blocks, Data contracts, Documents, Transfers, Average block time.', + keywords: ['Dash', 'platform', 'explorer', 'blockchain', 'Transactions', 'Blocks', ' Data contracts', 'Documents', 'Transfers', 'platform dash money'], applicationName: 'Dash Platform Explorer' } From afbfbc7ae99089165b918aa3a321798cd1f9f6d0 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sun, 17 Mar 2024 01:28:28 +0700 Subject: [PATCH 26/31] Fix colors on first load --- packages/frontend/src/components/navbar/Navbar.js | 1 + .../src/components/search/GlobalSearchInput.js | 10 ++++++++-- packages/frontend/src/styles/theme.scss | 4 ++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/navbar/Navbar.js b/packages/frontend/src/components/navbar/Navbar.js index 9d968b3b2..90df30d6f 100644 --- a/packages/frontend/src/components/navbar/Navbar.js +++ b/packages/frontend/src/components/navbar/Navbar.js @@ -35,6 +35,7 @@ const NavLink = (props) => { textDecoration: 'none', bg: useColorModeValue('brand.deep', 'brand.deep'), }} + color={'white'} href={to}> {children} diff --git a/packages/frontend/src/components/search/GlobalSearchInput.js b/packages/frontend/src/components/search/GlobalSearchInput.js index 111e729c4..8493eca88 100644 --- a/packages/frontend/src/components/search/GlobalSearchInput.js +++ b/packages/frontend/src/components/search/GlobalSearchInput.js @@ -78,8 +78,14 @@ function GlobalSearchInput () { bg='gray.900' /> - diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss index 6e995abbf..5a30d1226 100644 --- a/packages/frontend/src/styles/theme.scss +++ b/packages/frontend/src/styles/theme.scss @@ -1,3 +1,7 @@ +* { + border-color: var(--chakra-colors-gray-800); +} + .InfoBlock { position: relative; padding: var(--chakra-space-3); From b47d4aedf754c6fb44f44aeac25bc5072e5eadef Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sun, 17 Mar 2024 01:38:50 +0700 Subject: [PATCH 27/31] Update border color --- packages/frontend/src/styles/theme.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index 670bf6e0c..969968307 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -23,9 +23,12 @@ export const theme = extendTheme( { }, styles: { global: { + '*' : { + borderColor: 'gray.800' + }, 'html, body': { background: '#181d20', - }, + } }, }, components: { From 417ed51c4e08f4808331b941ed4fac0df5c74eb0 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sun, 17 Mar 2024 01:46:02 +0700 Subject: [PATCH 28/31] Fix list item border color --- packages/frontend/src/styles/mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index c58136913..b5e0f9ea3 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -6,7 +6,7 @@ padding: 6px 8px; margin-bottom: 1px; line-height: 24px; - border-bottom: 1px solid var(--chakra-colors-chakra-border-color); + border-bottom: 1px solid var(--chakra-colors-gray-800); color: var(--chakra-colors-gray-100); font-family: monospace; font-size: 12pt; From c5f57cfef7c6431f31d1081a3c39712522ffdd57 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sun, 17 Mar 2024 02:54:21 +0700 Subject: [PATCH 29/31] Update theme config --- packages/frontend/src/styles/theme.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index 969968307..3cb31694e 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -1,6 +1,10 @@ import { extendTheme } from '@chakra-ui/react' export const theme = extendTheme( { + config: { + useSystemColorMode: false, + initialColorMode: 'dark', + }, initialColorMode: 'dark', useSystemColorMode: false, colors: { @@ -28,6 +32,7 @@ export const theme = extendTheme( { }, 'html, body': { background: '#181d20', + color: 'white' } }, }, From 030902899e925cbddd83d518818d7538bf429adf Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Sun, 17 Mar 2024 16:50:05 +0700 Subject: [PATCH 30/31] Correction of the data contract schema output --- .../frontend/src/app/dataContract/[identifier]/DataContract.js | 2 +- packages/frontend/src/app/document/[identifier]/Document.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js index c43d1029c..69553961e 100644 --- a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js +++ b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js @@ -149,7 +149,7 @@ function DataContract({identifier}) { p={4} w='100%' > - {JSON.stringify(dataContract.schema, null, 2)} + {JSON.stringify(JSON.parse(dataContract.schema), null, 2)}
diff --git a/packages/frontend/src/app/document/[identifier]/Document.js b/packages/frontend/src/app/document/[identifier]/Document.js index 476449d1d..e0c510f25 100644 --- a/packages/frontend/src/app/document/[identifier]/Document.js +++ b/packages/frontend/src/app/document/[identifier]/Document.js @@ -88,7 +88,7 @@ function Document({identifier}) { className={'DocumentPage__Code'} w='100%' > - {JSON.stringify(document.data, null, 2)} + {JSON.stringify(JSON.parse(document.data), null, 2)} From c62765867b7fd59708e0f388b6f09760fa236335 Mon Sep 17 00:00:00 2001 From: alexeyandreevsky Date: Mon, 18 Mar 2024 16:41:35 +0700 Subject: [PATCH 31/31] Remove framer-motion from package.json and delete jsconfig.json. --- packages/frontend/jsconfig.json | 7 ------- packages/frontend/package.json | 1 - 2 files changed, 8 deletions(-) delete mode 100644 packages/frontend/jsconfig.json diff --git a/packages/frontend/jsconfig.json b/packages/frontend/jsconfig.json deleted file mode 100644 index b8d6842d7..000000000 --- a/packages/frontend/jsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "compilerOptions": { - "paths": { - "@/*": ["./src/*"] - } - } -} diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 55b59aeb5..f5d5a129c 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -12,7 +12,6 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "express": "^4.18.2", - "framer-motion": "^10.16.4", "next": "14.1.0", "node-fetch": "^3.3.1", "react": "^18.2.0",