Move to Next.js

packages/frontend/.env

@@ -1 +1,2 @@
-REACT_APP_API_BASE_URL=http://127.0.0.1:3005
+REACT_APP_API_BASE_URL=https://platform-explorer.pshenmic.dev
+NEXT_PUBLIC_API_BASE_URL=https://platform-explorer.pshenmic.dev

packages/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

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

packages/frontend/README.md

@@ -3,8 +3,34 @@
 
 This packages handles frontend of the applicaiton.
 
-## Build, Run
 
-Just:
+## Install dependencies:
 
-`$ yarn start`
+```bash
+npm install
+```
+
+Verify your packages/frontend/.env is matching your backend API URL
+
+## Run the app
+
+Development server:
+
+```bash
+npm run dev
+```
+
+Build:
+
+```bash
+npm run build
+```
+
+Start:
+
+```bash
+npm run start
+```
+
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/frontend/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

packages/frontend/package.json

@@ -4,14 +4,15 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "express": "^4.18.2",
-    "framer-motion": "^10.16.4",
+    "next": "14.1.0",
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -22,29 +23,10 @@
     "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"
   },
-  "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"
 }

packages/frontend/src/routes/block/block.route.js → 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,26 +11,31 @@ 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)
+
+        Api.getBlockByHash(hash)
+        .then(setBlock)
+        .catch(console.log)
+        .finally(() => setLoading(false))
+    }
 
-function BlockRoute() {
-    const {block} = useLoaderData();
+    useEffect(fetchData, [hash])
 
-    const txHashes = block?.txs || [];
+    const txHashes = block?.txs || []
 
-    return (
+    if (!loading) return (
         <Container 
             maxW='container.xl' 
             bg='gray.600' 
             color='white'
             _dark={{ bg: "gray.900" }}
             mt={8}
         >
-
             <TableContainer 
                 maxW='none'
                 borderWidth='1px' borderRadius='lg'
@@ -75,7 +81,6 @@ function BlockRoute() {
                 </Table>
             </TableContainer>
 
-
             {txHashes.length ?  
                 <Container 
                     width='100%'
@@ -94,9 +99,8 @@ function BlockRoute() {
                     </div> 
                 </Container>
            : null}
-
         </Container>
-    );
+    )
 }
 
-export default BlockRoute;
+export default Block

packages/frontend/src/app/block/[hash]/page.js

@@ -0,0 +1,17 @@
+import Block from './Block'
+
+
+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', 'Timestamp', 'Transactions', 'Block'],
+        applicationName: 'Dash Platform Explorer'
+    }
+}
+
+async function BlockRoute({ params }) {
+    return <Block hash={params.hash}/>
+}
+
+export default BlockRoute

packages/frontend/src/routes/blocks/blocks.route.js → 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 Pagination from '../../components/pagination'
+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],
@@ -22,46 +23,51 @@ 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 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 handlePageClick = async ({selected}) => {
-        const {resultSet} = await Api.getBlocks(selected+1, pageSize, 'desc')
-
-        setCurrentPage(selected)
-
-        setBlocks(resultSet)
+
+    const fetchData = () => {
+        setLoading(true)
+
+        Api.getBlocks(paginateConfig.defaultPage, paginateConfig.pageSize.default, 'desc')
+            .then((res) => {
+                setBlocks(res.resultSet)
+                setTotal(res.pagination.total)
+            })
+            .catch(console.log)
+            .finally(() => setLoading(false))
     }
 
-    const goToHeight = async (e) => {
-        e.preventDefault();
+    useEffect(fetchData, [])
 
-        const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1;
+    const handlePageClick = ({selected}) => {
+        Api.getBlocks(selected+1, pageSize, 'desc')
+            .then((res) => {
+                setCurrentPage(selected)
+                setBlocks(res.resultSet)
+            })
+    }
 
-        setCurrentPage(page);
+    const goToHeight = (e) => {
+        e.preventDefault()
 
-        handlePageClick({selected: page});
+        const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1
+        setCurrentPage(page)
+        handlePageClick({selected: page})
     }
 
     useEffect(() => {
-        setCurrentPage(0);
+        setCurrentPage(0)
+        handlePageClick({selected: 0})
+    }, [pageSize])
 
-        handlePageClick({selected: 0});
-    }, [pageSize]);
-
-    return (
+    if (!loading) return (
         <Container 
             maxW='container.lg' 
             color='white'
@@ -78,7 +84,6 @@ function BlocksRoute() {
                 <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Blocks</Heading>
                 <BlocksList blocks={blocks}/>
 
-
                 <div className={'ListNavigation'}>
                     <GoToHeightForm
                         goToHeightHandler={goToHeight}
@@ -92,24 +97,9 @@ function BlocksRoute() {
                         }
                     />
 
-                    <ReactPaginate 
-                        breakLabel="..."
-                        nextLabel=">"
+                    <Pagination 
                         onPageChange={handlePageClick}
-                        pageRangeDisplayed={2}
-                        marginPagesDisplayed={1}
                         pageCount={pageCount}
-                        previousLabel="<"
-                        pageClassName="page-item"
-                        pageLinkClassName="page-link"
-                        previousClassName="page-item page-item--previous"
-                        previousLinkClassName="page-link"
-                        nextClassName="page-item page-item--next"
-                        nextLinkClassName="page-link"
-                        breakClassName="page-item  page-item--break-link"
-                        containerClassName="pagination"
-                        activeClassName="active"
-                        renderOnZeroPageCount={true}
                         forcePage={currentPage} 
                     />
 
@@ -122,7 +112,7 @@ function BlocksRoute() {
 
             </Container>
         </Container>
-    );
+    )
 }
 
-export default BlocksRoute;
+export default Blocks

packages/frontend/src/routes/blocks/Blocks.scss → 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;
     }