Merge pull request #259 from pshenmic/feat/redesign

Implement a new design for the validators page on the frontend
pshenmic · Sep 22, 2024 · f8bfe28 · f8bfe28
2 parents f51048f + 376013e
commit f8bfe28
Show file tree

Hide file tree

Showing 79 changed files with 1,548 additions and 844 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "d3": "^7.9.0",
     "express": "^4.18.2",
+    "keen-slider": "^6.8.6",
     "minidenticons": "^4.2.1",
     "next": "14.1.0",
     "node-fetch": "^3.3.1",
@@ -22,6 +23,7 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
+    "rehype-raw": "^7.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.69.2",
     "web-vitals": "^2.1.4"

diff --git a/packages/frontend/src/app/blocks/Blocks.scss b/packages/frontend/src/app/blocks/Blocks.scss
@@ -1,65 +1,36 @@
 .Blocks {
-    .pagination {
-        margin-top: 0;
-        margin-bottom: 0;
+  .PageSizeSelector, .GoToHeightForm {
+    width: 210px;
+  }
+
+  @media screen and (max-width: 1268px) {
+    .GoToHeightForm {
+      order: 2;
     }
-
-    .PageSizeSelector {
-        text-align: right;
-        width: 115px;
+
+    .Pagination {
+      flex-grow: 1;
+      width: 100%;
+      display: flex;
+      align-items: center;
     }
-
-    @media screen and (max-width: 720px) {
-        .GoToHeightForm {
-            margin-right: 14px;
-        }
-
-        .pagination {
-            order: 3;
-            flex-grow: 1;
-            justify-content: flex-end;
-        }
-
-        .PageSizeSelector {
-            text-align: left;
-        }
+
+    .PageSizeSelector {
+      order: 3;
+      text-align: left;
     }
+  }
 
-    @media screen and (max-width: 680px) {
-        .list-navigation {
-            justify-content: center;
-            margin-top: 14px;
-        }
-
-        .PageSizeSelector {
-            width: auto;
-        }
-
-        .pagination {
-            order: -1;
-            width: 100%;
-            justify-content: center;
-            margin-bottom: 8px;
-        }
+  @media screen and (max-width: 680px) {
+    .PageSizeSelector {
+      width: auto;
     }
-
-
-    @media screen and (max-width: 310px) {
-        .GoToHeightForm {
-            margin: 0;
-            width: 100%;
-        }
-
-        .PageSizeSelector {
-            width: 100%;
-            text-align: center;
-            margin: 0 auto;
-        }
-
-        .GoToHeightForm {
-            text-align: center;
-            margin-bottom: 4px;
-        }
+
+    .Pagination {
+      order: -1;
+      width: 100%;
+      justify-content: center;
+      margin-bottom: 8px;
     }
-    
+  }
 }
diff --git a/packages/frontend/src/app/blocks/page.js b/packages/frontend/src/app/blocks/page.js
@@ -1,7 +1,7 @@
 import Markdown from '../../components/markdown'
 import Intro from '../../components/intro/index.js'
 import introContent from './intro.md'
-import { Container, Flex, Box } from '@chakra-ui/react'
+import { Container } from '@chakra-ui/react'
 import Blocks from './Blocks'
 import { BlocksTotal } from '../../components/blocks'
 
@@ -23,24 +23,11 @@ async function BlocksRoute ({ searchParams }) {
       mt={8}
       mb={0}
     >
-      <Flex
-          justifyContent={'space-between'}
-          alignItems={'center'}
-          wrap={['wrap', 'wrap', 'wrap', 'nowrap']}
-      >
-          <Container maxW={['100%', '100%', '100%', 'calc(50% - 20px)']}>
-            <Intro
-                title={'Blocks'}
-                contentSource={<Markdown>{introContent}</Markdown>}
-            />
-          </Container>
-
-          <Box flexShrink={'0'} w={10} h={10} />
-
-          <Container maxW={'none'} p={0}>
-              <BlocksTotal/>
-          </Container>
-      </Flex>
+      <Intro
+        title={'Blocks'}
+        description={<Markdown>{introContent}</Markdown>}
+        block={<BlocksTotal/>}
+      />
     </Container>
 
     <Blocks defaultPage={page} defaultPageSize={pageSize}/>

diff --git a/packages/frontend/src/app/dataContracts/Cards.js b/packages/frontend/src/app/dataContracts/Cards.js
@@ -1,6 +1,5 @@
 'use client'
 
-import { SideBlock } from '../../components/containers'
 import { DataContractCards } from '../../components/dataContracts'
 
 export default function Cards () {
@@ -38,8 +37,6 @@ export default function Cards () {
   }
 
   return (
-    <SideBlock>
-      <DataContractCards items={dataContracts}/>
-    </SideBlock>
+    <DataContractCards items={dataContracts}/>
   )
 }
diff --git a/packages/frontend/src/app/dataContracts/DataContracts.js b/packages/frontend/src/app/dataContracts/DataContracts.js
@@ -93,7 +93,7 @@ function DataContractsLayout ({ defaultPage = 1, defaultPageSize }) {
 
             {dataContracts.data?.resultSet?.length > 0 &&
               <div className={'ListNavigation'}>
-                  <Box display={['none', 'none', 'block']} width={'100px'}/>
+                  <Box display={['none', 'none', 'block']} width={'155px'}/>
                   <Pagination
                       onPageChange={({ selected }) => setCurrentPage(selected)}
                       pageCount={pageCount}

diff --git a/packages/frontend/src/app/dataContracts/page.js b/packages/frontend/src/app/dataContracts/page.js
@@ -2,7 +2,7 @@ import DataContracts from './DataContracts'
 import Intro from '../../components/intro'
 import Markdown from '../../components/markdown'
 import introContent from './intro.md'
-import { Container, Flex, Box } from '@chakra-ui/react'
+import { Container } from '@chakra-ui/react'
 import Cards from './Cards'
 
 export const metadata = {
@@ -24,24 +24,11 @@ function DataContractsRoute ({ searchParams }) {
       mt={8}
       mb={0}
     >
-      <Flex
-          justifyContent={'space-between'}
-          alignItems={'center'}
-          wrap={['wrap', 'wrap', 'wrap', 'nowrap']}
-      >
-          <Container flexShrink={0} maxW={['100%', '100%', '100%', 'calc(50% - 20px)']}>
-            <Intro
-              title={'Data contracts'}
-              contentSource={<Markdown>{introContent}</Markdown>}
-            />
-          </Container>
-
-          <Box flexShrink={'0'} w={10} h={[5, 5, 5, 10]} />
-
-          <Container flexShrink={0} maxW={['100%', '100%', '100%', 'calc(50% - 20px)']}>
-            <Cards/>
-          </Container>
-      </Flex>
+      <Intro
+        title={'Data contracts'}
+        description={<Markdown>{introContent}</Markdown>}
+        block={<Cards/>}
+      />
     </Container>
     <DataContracts defaultPage={page} defaultPageSize={pageSize}/>
   </>

diff --git a/packages/frontend/src/app/home/Home.js b/packages/frontend/src/app/home/Home.js
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import * as Api from '../../util/Api'
 import TransactionsHistory from '../../components/charts/TransactionsHistory'
-import { SimpleList } from '../../components/lists'
+import { SimpleList } from '../../components/ui/lists'
 import TotalInfo from '../../components/total/TotalInfo'
 import { fetchHandlerSuccess, fetchHandlerError } from '../../util'
 import TransactionsList from '../../components/transactions/TransactionsList'

diff --git a/packages/frontend/src/app/home/HomeIntro.js b/packages/frontend/src/app/home/HomeIntro.js
@@ -5,22 +5,22 @@ import './HomeIntro.scss'
 export default function HomeIntro () {
   return (
     <Box className={'InfoBlock HomeIntro'}>
-        <div className={'HomeIntro__About'}>
-          <Text size={'sm'} mt={0} mb={2} className={'HomeIntro__Welcome'}>
-            WELCOME TO
-          </Text>
-          <Heading as={'h1'} className={'HomeIntro__Title'}>
-            Platform Explorer
-          </Heading>
-          <Heading as={'h2'} className={'HomeIntro__Subtitle'}>
-            The information resource about Dash Platform!
-          </Heading>
-          <Text className={'HomeIntro__Description'}>
-            Dive into the world of Dash Platform with Platform Explorer, your trusted portal for real-time and historical data across the blockchain ecosystem. Our platform offers a view of blockchain&apos;s continuous evolution, enabling you to track and verify transactions with confidence and precision.
-          </Text>
-        </div>
+      <div className={'HomeIntro__About'}>
+        <Text size={'sm'} mt={0} mb={2} className={'HomeIntro__Welcome'}>
+          WELCOME TO
+        </Text>
+        <Heading as={'h1'} className={'HomeIntro__Title'}>
+          Platform Explorer
+        </Heading>
+        <Heading as={'h2'} className={'HomeIntro__Subtitle'}>
+          The information resource about Dash Platform!
+        </Heading>
+        <Text className={'HomeIntro__Description'}>
+          Dive into the world of Dash Platform with Platform Explorer, your trusted portal for real-time and historical data across the blockchain ecosystem. Our platform offers a view of blockchain&apos;s continuous evolution, enabling you to track and verify transactions with confidence and precision.
+        </Text>
+      </div>
 
-        <NetworkStatus className={'HomeIntro__NetworkStatus'}/>
+      <NetworkStatus className={'HomeIntro__NetworkStatus'}/>
     </Box>
   )
 }
diff --git a/packages/frontend/src/app/home/HomeIntro.scss b/packages/frontend/src/app/home/HomeIntro.scss
@@ -2,16 +2,15 @@
 @import '../../styles/variables.scss';
 
 .HomeIntro {
-  padding: 65px 0 !important;
+  padding: 64px 0 !important;
   display: grid;
   grid-template-columns: 2fr 3fr;
   gap: 1.25rem;
   width: 100%;
-  margin: 0 auto;
 
   &__About {
     max-width: 500px;
-    padding-left: 65px;
+    padding-left: 64px;
   }
 
   &__Welcome {

diff --git a/packages/frontend/src/app/identities/Cards.js b/packages/frontend/src/app/identities/Cards.js
diff --git a/packages/frontend/src/app/identities/Identities.js b/packages/frontend/src/app/identities/Identities.js
@@ -91,7 +91,7 @@ function Identities ({ defaultPage = 1, defaultPageSize }) {
 
               {identities.data?.resultSet?.length > 0 &&
                 <div className={'ListNavigation'}>
-                    <Box display={['none', 'none', 'block']} width={'100px'}/>
+                    <Box display={['none', 'none', 'block']} width={'155px'}/>
                     <Pagination
                         onPageChange={({ selected }) => setCurrentPage(selected)}
                         pageCount={pageCount}

diff --git a/packages/frontend/src/app/identities/page.js b/packages/frontend/src/app/identities/page.js
@@ -2,8 +2,8 @@ import Identities from './Identities'
 import Intro from '../../components/intro'
 import Markdown from '../../components/markdown'
 import introContent from './intro.md'
-import Cards from './Cards'
-import { Container, Flex, Box } from '@chakra-ui/react'
+import { Container } from '@chakra-ui/react'
+import { TopIdentities } from '../../components/identities'
 
 export const metadata = {
   title: 'Identities — Dash Platform Explorer',
@@ -23,24 +23,11 @@ function IdentitiesRoute ({ searchParams }) {
       mt={8}
       mb={0}
     >
-      <Flex
-          justifyContent={'space-between'}
-          alignItems={'center'}
-          wrap={['wrap', 'wrap', 'wrap', 'nowrap']}
-      >
-          <Container maxW={['100%', '100%', '100%', 'calc(50% - 20px)']}>
-            <Intro
-              title={'Identities'}
-              contentSource={<Markdown>{introContent}</Markdown>}
-            />
-          </Container>
-
-          <Box flexShrink={'0'} w={10} h={[5, 5, 5, 10]}/>
-
-          <Container maxW={'none'} p={0}>
-            <Cards/>
-          </Container>
-      </Flex>
+      <Intro
+        title={'Identities'}
+        description={<Markdown>{introContent}</Markdown>}
+        block={<TopIdentities/>}
+      />
     </Container>
     <Identities defaultPage={page} defaultPageSize={pageSize}/>
   </>

diff --git a/packages/frontend/src/app/transactions/Transactions.js b/packages/frontend/src/app/transactions/Transactions.js
@@ -83,7 +83,7 @@ function Transactions ({ defaultPage = 1, defaultPageSize }) {
 
             {transactions.data?.resultSet?.length > 0 &&
               <div className={'ListNavigation'}>
-                <Box display={['none', 'none', 'block']} width={'100px'}/>
+                <Box display={['none', 'none', 'block']} width={'155px'}/>
                 <Pagination
                     onPageChange={({ selected }) => setCurrentPage(selected)}
                     pageCount={pageCount}