Rayan

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+# npx lint-staged

package.json

@@ -13,9 +13,11 @@
   },
   "dependencies": {
     "@mui/x-data-grid": "^5.0.1",
+    "antd": "^4.17.2",
     "apexcharts": "^3.30.0",
     "axios": "^0.24.0",
     "next": "12.0.2",
+    "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "17.0.2"

src/components/Chart/ChartsApex.jsx

@@ -65,7 +65,7 @@ function ChartsApex() {
         text: 'Transaction History - 24H',
         align: 'left',
         style: {
-          fontFamily: 'Lato',
+          fontFamily: 'inherit',
           fontWeight: 'normal',
         },
       },

src/components/Footer/Footer.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   margin: 0 auto;
   width: 100%;
-  background: var(--theme-page-background);
+  background: var(--theme-footer-bg);
   box-shadow: 0 -0.25rem 0.25rem #0003;
 }
 

src/components/Layout/Layout.module.css

@@ -1,5 +1,4 @@
 .Main {
-  min-height: 100vh;
   width: 100%;
   height: 100%;
   position: relative;
@@ -9,5 +8,6 @@
 .container {
   max-width: var(--screen-lg);
   margin: 0 auto;
+  min-height: 100vh;
   padding: 0 var(--space-xs);
 }

src/components/Navbar/Navbar.module.css

@@ -5,12 +5,11 @@
   flex-direction: column;
   margin: 0 auto;
   width: 100%;
-  background: var(--theme-layout-background);
   padding-bottom: var(--space-xxs);
   margin-bottom: var(--space-xs);
-  box-shadow: 0 0.25rem 0.25rem #0003;
+  box-shadow: 0 0.25rem 0.25rem #0002;
   color: var(--theme-page-text);
-  background: var(--theme-page-background);
+  background: var(--theme-nav-bg);
 }
 .container .header {
   width: 100%;

src/components/atoms/DetailCard/index.jsx

@@ -4,6 +4,22 @@ import Typeone from './TypeOne';
 import TypeTwo from './TypeTwo';
 import Image from 'next/image';
 
+import PropTypes from 'prop-types';
+
+DetailCard.propTypes = {
+  type: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  label: PropTypes.string,
+  sublabel: PropTypes.string,
+  delayTime: PropTypes.string,
+  text: PropTypes.string,
+  reserve: PropTypes.string,
+  reserveLabel: PropTypes.string,
+  reward: PropTypes.string,
+  rewardLabel: PropTypes.string,
+  footerLabel: PropTypes.string,
+  footerValue: PropTypes.string,
+};
+
 export default function DetailCard(props) {
   return (
     <div className={styles.detailcard}>

src/components/atoms/RTTable/RTTRow.jsx

@@ -1,5 +1,19 @@
 import styles from './RTTRow.module.css';
 
+import PropTypes from 'prop-types';
+
+RTTRow.propTypes = {
+  fromId: PropTypes.string,
+  toId: PropTypes.string,
+  txnId: PropTypes.string,
+  operation: PropTypes.string,
+  txType: PropTypes.string,
+  amount: PropTypes.number,
+  amountUnit: PropTypes.string,
+  confirmations: PropTypes.number,
+  contracts: PropTypes.number,
+};
+
 function RTTRow(props) {
   const {
     fromId = '',

src/components/atoms/RTTable/RTTRowBlock.jsx

@@ -1,5 +1,22 @@
 import styles from './RTTRowBlock.module.css';
 
+import PropTypes from 'prop-types';
+
+RTTRowBlock.propTypes = {
+  block: PropTypes.string,
+  channel: PropTypes.string,
+  utc: PropTypes.string,
+  date: PropTypes.string,
+  mint: PropTypes.string,
+  mintUnit: PropTypes.string,
+  size: PropTypes.string,
+  sizeUnit: PropTypes.string,
+  txns: PropTypes.string,
+  txnsUnit: PropTypes.string,
+  type: PropTypes.string,
+  timeUnit: PropTypes.string,
+};
+
 function RTTRowBlock(props) {
   const {
     block = '00',

src/components/atoms/RTTable/RTTable.jsx

@@ -1,5 +1,14 @@
 import styles from './RTTable.module.css';
 
+import PropTypes from 'prop-types';
+
+RTTable.propTypes = {
+  onClick: PropTypes.func,
+  children: PropTypes.any,
+  label: PropTypes.string,
+  buttonLabel: PropTypes.string,
+};
+
 function RTTable(props) {
   const { label = 'Latest Blocks', buttonLabel: btnTxt = 'View All' } = props;
   return (

src/components/atoms/Rail/index.jsx

@@ -1,28 +1,41 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react';
 import styles from './rail.module.css';
+import PropTypes from 'prop-types';
 
 const Rail = (props) => {
   const railRef = useRef(null);
-  const scrollSpeed = typeof props.scrollSpeed === 'number' ? props.scrollSpeed : 1;
+  const scrollSpeed =
+    typeof props.scrollSpeed === 'number' ? props.scrollSpeed : 1;
 
   useEffect(() => {
     const el = railRef.current;
-    const onWheel = e => {
+    const onWheel = (e) => {
       if (e.deltaY == 0) return;
       e.preventDefault();
       el.scrollTo({
-        left: el.scrollLeft + (e.deltaY * scrollSpeed),
-        behavior: "smooth" // "smooth" or "auto"
+        left: el.scrollLeft + e.deltaY * scrollSpeed,
+        behavior: 'smooth', // "smooth" or "auto"
       });
     };
     if (el) {
-      el.addEventListener("wheel", onWheel);
+      el.addEventListener('wheel', onWheel);
     }
-    return () => el && el.removeEventListener("wheel", onWheel);
+    return () => el && el.removeEventListener('wheel', onWheel);
   }, []);
 
-  return (<main className={[props.className, styles.railContainer].join(' ')} ref={railRef}>
-    {props.children}
-  </main>);
-}
-export default Rail;
+  return (
+    <main
+      className={[props.className, styles.railContainer].join(' ')}
+      ref={railRef}>
+      {props.children}
+    </main>
+  );
+};
+
+Rail.propTypes = {
+  scrollSpeed: PropTypes.number,
+  className: PropTypes.string,
+  children: PropTypes.any,
+};
+
+export default Rail;

src/components/atoms/SearchBar/SearchBar.module.css

@@ -17,7 +17,7 @@
   color: var(--midnight-blue);
   border: none;
   border-radius: 0.125rem 0 0 0.125rem;
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--card-shadow-subtle);
   box-sizing: border-box;
   outline: none;
   font-size: var(--font-normal);
@@ -45,7 +45,7 @@
 .searchBar button {
   height: 2.125rem;
   background: var(--theme-search);
-  box-shadow: 0 0 0.25rem #0003;
+  box-shadow: var(--card-shadow-subtle);
   border-radius: 0 0.25rem 0.25rem 0;
   border: none;
   /* position: relative; */
@@ -69,7 +69,7 @@
 }
 
 .searchBarLong {
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--card-shadow-subtle);
   max-height: 3.25rem;
 }
 .searchBarLong:focus-within {
@@ -81,9 +81,10 @@
   color: var(--midnight-blue);
   border-radius: 0.125rem;
   font-size: var(--font-normal);
+  font-family: inherit;
   font-weight: normal;
   width: 100%;
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  box-shadow: var(--card-shadow-subtle);
 }
 .searchBarLong input[type='search']:focus {
   outline: solid 0.125rem var(--nexus-blue);
@@ -95,7 +96,7 @@
   margin-left: 0.25rem;
   border-radius: 0.125rem;
   width: 2.625rem;
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  box-shadow: var(--card-shadow-subtle);
 }
 .searchBarLong .searchLongBtn:focus {
   outline: solid 0.125rem var(--nexus-blue);

src/components/atoms/SearchBar/index.jsx

@@ -1,6 +1,17 @@
 import SearchBar from './SearchBar';
 import SearchBarLong from './SearchBarLong';
 
+import PropTypes from 'prop-types';
+
+SearchBar.propTypes = {
+  type: PropTypes.oneOf(['long']),
+  long: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+};
+
 export default function Search(props) {
   function handleOnKeyDown(e) {
     if (e.key === 'Enter') {

src/components/atoms/SmallCard/index.jsx

@@ -2,6 +2,14 @@ import styles from './SmallCard.module.css';
 // import svgLogo from "assets/icons/icon.svg"
 import pngLogo from 'assets/icons/nexusblue.png';
 import Image from 'next/dist/client/image';
+import PropTypes from 'prop-types';
+
+SmallCard.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  sublabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  ticker: PropTypes.any,
+};
 
 export default function SmallCard(props) {
   return (

src/components/atoms/ThemeMode/index.jsx

@@ -3,6 +3,12 @@ import lightBtn from 'assets/icons/light_mode_black_24dp.svg';
 import darkBtn from 'assets/icons/dark_mode_black_24dp.svg';
 import Image from 'next/image';
 import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+ThemeMode.propTypes = {
+  isDark: PropTypes.bool,
+  onClick: PropTypes.func,
+};
 
 export default function ThemeMode(props) {
   const [toggle, setToggle] = useState(() => {

src/pages/_app.js

@@ -1,5 +1,6 @@
 import Layout from 'components/Layout/Layout';
 import 'styles/globals.css';
+import 'styles/antdCustom.css';
 import { ContextWrapper } from 'contexts/AppContext';
 
 function MyApp({ Component, pageProps }) {

src/pages/blocks.js

@@ -1,5 +1,53 @@
-function blocks() {
-  return <div>All blocks page</div>;
+import { Table } from 'antd';
+
+export default function Blocks(props) {
+  const { data } = props;
+
+  const columns = [
+    {
+      title: 'Block',
+      dataIndex: 'height',
+      key: 'height',
+    },
+    {
+      title: 'Date',
+      dataIndex: 'date',
+      key: 'date',
+      // render: (val) => new Date(val).toDateString,
+    },
+    {
+      title: 'Mint',
+      dataIndex: 'mint',
+      key: 'mint',
+    },
+    {
+      title: 'TXNs',
+      dataIndex: 'tx',
+      render: (tx) => tx.length,
+    },
+    {
+      title: 'Channel',
+      dataIndex: 'channel',
+      key: 'channel',
+    },
+  ];
+
+  return (
+    <div>
+      <Table columns={columns} dataSource={data} />
+    </div>
+  );
 }
 
-export default blocks;
+export async function getServerSideProps() {
+  const resp = await fetch(
+    `${process.env.NEXT_PUBLIC_NEXUS_BASE_URL}/ledger/list/blocks?limit=50`
+  );
+  const data = await resp.json();
+
+  return {
+    props: {
+      data: data.result,
+    },
+  };
+}

src/pages/richlist.js

@@ -1,7 +1,32 @@
-import React from 'react';
+// import Table from 'components/atoms/Table';
+import { Table, Tag, Space } from 'antd';
+import data from 'assets/data/richlist.json';
 
 function richlist() {
-  return <h1>richlist tab</h1>;
+  const columns = [
+    {
+      title: 'Address',
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: 'Balance',
+      dataIndex: 'balance',
+      key: 'balance',
+    },
+  ];
+  const newData = data.map((item, index) => ({
+    key: index,
+    address: item[0],
+    balance: `${parseInt(item[1]).toFixed(2)} NXS`,
+  }));
+
+  return (
+    <div style={{ overflow: 'scroll' }}>
+      {/* <pre className="themeText">{JSON.stringify(data.result, null, 2)}</pre> */}
+      <Table columns={columns} dataSource={newData} />
+    </div>
+  );
 }
 
 export default richlist;