diff --git a/server/utils/methods.ts b/server/utils/methods.ts index 67e3487..57fdeab 100644 --- a/server/utils/methods.ts +++ b/server/utils/methods.ts @@ -160,7 +160,7 @@ export async function getTxPoolDetails(count: number) { // When count is 0, retrieve all records ordered by timestamp DESC if (count === 0) { const result = await Pool.findAll({ - attributes: ['blob_size', 'fee', 'id', 'timestamp'], + attributes: ['blob_size', 'fee', 'id', 'timestamp', 'tx_id'], order: [['timestamp', 'DESC']] }); return result.length > 0 ? result : []; @@ -173,6 +173,7 @@ export async function getTxPoolDetails(count: number) { 'fee', 'id', 'timestamp', + 'tx_id', [literal('false'), 'isNew'] // Adding a literal false as "isNew" ], order: [['timestamp', 'DESC']], diff --git a/src/App.tsx b/src/App.tsx index 11554ee..24b6c60 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,8 +25,8 @@ function App() { } /> } /> } /> - } /> - } /> + {/* } /> + } /> */} {/* {NET_MODE === "TEST" && } /> } */} diff --git a/src/components/default/AliasText/AliasText.tsx b/src/components/default/AliasText/AliasText.tsx index 594153b..63626cb 100644 --- a/src/components/default/AliasText/AliasText.tsx +++ b/src/components/default/AliasText/AliasText.tsx @@ -1,6 +1,7 @@ +import { Link, LinkProps } from "react-router-dom"; import "./AliasText.scss"; -interface AliasTextProps extends React.HTMLProps { +interface AliasTextProps extends LinkProps { children: React.ReactNode } @@ -9,9 +10,9 @@ function AliasText(props: AliasTextProps) { return ( - + {children} - + ) } diff --git a/src/components/default/Header/Header.tsx b/src/components/default/Header/Header.tsx index 712e368..f6cba04 100644 --- a/src/components/default/Header/Header.tsx +++ b/src/components/default/Header/Header.tsx @@ -4,6 +4,7 @@ import { ReactComponent as BurgerImg } from "../../../assets/images/UI/burger.sv import HeaderProps from "./Header.props"; import Button from "../../UI/Button/Button"; import { NET_MODE } from "../../../config/config"; +import { Link } from "react-router-dom"; function Header(props: HeaderProps) { const { page, burgerOpened, setBurgerOpened } = props; @@ -11,53 +12,53 @@ function Header(props: HeaderProps) { function Nav({ className }: { className?: string }) { return ( - Blockchain - - + Alt-blocks - - + Aliases - + {/* {NET_MODE === "TEST" ? - Assets - : + : Assets } */} - Assets - - + {/* Charts - - */} + API - + {NET_MODE === "MAIN" && Governance @@ -71,25 +72,25 @@ function Header(props: HeaderProps) { - + ZANO - + - Switch to {NET_MODE === "TEST" ? "Main Net" : "Test Net"} - + setBurgerOpened(!burgerOpened)} className="header__burger__button" diff --git a/src/components/default/InfoTopPanel/InfoTopPanel.tsx b/src/components/default/InfoTopPanel/InfoTopPanel.tsx index 114b363..172507c 100644 --- a/src/components/default/InfoTopPanel/InfoTopPanel.tsx +++ b/src/components/default/InfoTopPanel/InfoTopPanel.tsx @@ -5,7 +5,7 @@ import { ReactComponent as SearchImg } from "../../../assets/images/UI/search.sv import { ReactComponent as BackImg } from "../../../assets/images/UI/back.svg"; import { useState } from "react"; import Fetch from "../../../utils/methods"; -import { useNavigate } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import InfoTopPanelProps from "./InfoTopPanel.props"; function InfoTopPanel(props: InfoTopPanelProps) { @@ -74,12 +74,12 @@ function InfoTopPanel(props: InfoTopPanelProps) { > {back && - + Back - + } {title} diff --git a/src/pages/AltBlocks/AltBlocks.tsx b/src/pages/AltBlocks/AltBlocks.tsx index 12b6491..111a0e9 100644 --- a/src/pages/AltBlocks/AltBlocks.tsx +++ b/src/pages/AltBlocks/AltBlocks.tsx @@ -7,6 +7,7 @@ import AliasText from "../../components/default/AliasText/AliasText"; import Block from "../../interfaces/state/Block"; import Fetch from "../../utils/methods"; import Utils from "../../utils/utils"; +import { Link } from "react-router-dom"; function AltBlocks() { @@ -45,14 +46,14 @@ function AltBlocks() { return [ - {e.height} + {e.height} {` (${e.type})`} , Utils.formatTimestampUTC(e.timestamp), Utils.formatTimestampUTC(e.timestamp), `${e.size} bytes`, e.transactions?.toString() || "0", - {e.hash} + {e.hash} ] }); diff --git a/src/pages/Assets/Assets.tsx b/src/pages/Assets/Assets.tsx index 404e3ba..e03076e 100644 --- a/src/pages/Assets/Assets.tsx +++ b/src/pages/Assets/Assets.tsx @@ -1,5 +1,5 @@ import "../../styles/Assets.scss"; -import { useState, useEffect, useRef, memo } from "react"; +import { useState, useEffect, useRef, memo, useCallback } from "react"; import Header from "../../components/default/Header/Header"; import InfoTopPanel from "../../components/default/InfoTopPanel/InfoTopPanel"; import Table from "../../components/default/Table/Table"; @@ -85,6 +85,18 @@ function Assets() { return price; } + const fetchZanoPrice = useCallback(async () => { + const zanoPrice = await getZanoPrice(); + setAssets(prev => { + const newAssets = [...prev]; + const zanoAsset = newAssets.find(e => e.asset_id === ZANO_ID); + if (zanoAsset) { + zanoAsset.price = zanoPrice; + } + return newAssets; + }); + }, []); + useEffect(() => { async function fetchAssetsStats() { const result = await Fetch.getAssetsCount(); @@ -131,21 +143,15 @@ function Assets() { }, [searchParams, initFetched]); useEffect(() => { - async function fetchZanoPrice() { - const zanoPrice = await getZanoPrice(); - setAssets(prev => { - const newAssets = [...prev]; - const zanoAsset = newAssets.find(e => e.asset_id === ZANO_ID); - if (zanoAsset) { - zanoAsset.price = zanoPrice; - } - return newAssets; - }); - } + fetchZanoPrice(); - setInterval(() => { + const intervalId = setInterval(() => { fetchZanoPrice(); }, 10e3); + + return () => { + clearInterval(intervalId); + } }, []); useEffect(() => { @@ -173,6 +179,7 @@ function Assets() { if (!resultAssets || !(resultAssets instanceof Array)) return; setAssets(resultAssets); + fetchZanoPrice(); } fetchAssets(); @@ -191,7 +198,7 @@ function Assets() { e?.ticker || "", - onAssetClick(event, e)}> + onAssetClick(event, e)}> {e?.asset_id || ""} diff --git a/src/pages/Block/Block.tsx b/src/pages/Block/Block.tsx index d329cb7..e1eb3ff 100644 --- a/src/pages/Block/Block.tsx +++ b/src/pages/Block/Block.tsx @@ -7,7 +7,7 @@ import Table from "../../components/default/Table/Table"; import { ReactComponent as ArrowImg } from "../../assets/images/UI/arrow.svg"; import BlockInfo from "../../interfaces/common/BlockInfo"; import Utils from "../../utils/utils"; -import { useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import Fetch from "../../utils/methods"; import Popup from "../../components/default/Popup/Popup"; @@ -37,9 +37,9 @@ function Block(props: { alt?: boolean }) { !alt ? ( - + {e.hash} - + ) : ( @@ -165,15 +165,15 @@ function Block(props: { alt?: boolean }) { Zano Block {!alt && prevHash !== "" && - + - + } {height} {!alt && nextHash !== "" && - + - + } {hash?.toUpperCase() || ""} @@ -197,7 +197,7 @@ function Block(props: { alt?: boolean }) { ID - {Utils.shortenAddress(blockInfo?.tx_id ?? "-")} + {Utils.shortenAddress(blockInfo?.tx_id ?? "-")} Actual Timestamp (UTC): @@ -249,7 +249,7 @@ function Block(props: { alt?: boolean }) { Previous ID: - {Utils.shortenAddress(blockInfo?.prev_id ?? "-")} + {Utils.shortenAddress(blockInfo?.prev_id ?? "-")} Total block size, bytes: @@ -286,15 +286,15 @@ function Block(props: { alt?: boolean }) { JSON data: - { e.preventDefault(); setJsonPopupOpened(true); }} > [ view ] - + diff --git a/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx b/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx index 94ebd3a..8cfc95a 100644 --- a/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx +++ b/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx @@ -7,6 +7,7 @@ import Utils from "../../../../utils/utils"; import "./LatestBlocks.scss"; import { useState, useEffect } from "react"; import { socket } from "../../../../utils/socket"; +import { Link } from "react-router-dom"; function LatestBlocks() { @@ -82,14 +83,14 @@ function LatestBlocks() { const hashLink = hash ? "/block/" + hash : "/"; return [ - {e.height} + {e.height} {` (${e.type})`} , Utils.formatTimestampUTC(e.timestamp), Utils.timeElapsedString(e.timestamp), `${e.size} bytes`, e.transactions?.toString() || "0", - {hash} + {hash} ] }); diff --git a/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx b/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx index 2d1620c..7e7e936 100644 --- a/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx +++ b/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx @@ -12,6 +12,7 @@ function TransactionPool() { fee: string, id: string, timestamp: string, + tx_id: string, } const [turnedOn, setTurnedOn] = useState(true); @@ -77,7 +78,7 @@ function TransactionPool() { timeAgo(parseInt(element.timestamp, 10)*1000), element.blob_size + " bytes", parseInt(element.fee, 10)/10**12, - {element.id} + {element.tx_id} ])); return ( diff --git a/src/pages/Charts/Charts.tsx b/src/pages/Charts/Charts.tsx index da2d577..da803c5 100644 --- a/src/pages/Charts/Charts.tsx +++ b/src/pages/Charts/Charts.tsx @@ -8,6 +8,7 @@ import { chartOptions } from "../../utils/constants"; import Utils from "../../utils/utils"; import ChartSeriesElem from "../../interfaces/common/ChartSeriesElem"; import Preloader from "../../components/UI/Preloader/Preloader"; +import { Link } from "react-router-dom"; function Charts() { const [burgerOpened, setBurgerOpened] = useState(false); @@ -65,7 +66,7 @@ function Charts() { } = props; return ( - + {title} @@ -117,7 +118,7 @@ function Charts() { } }} /> - + ) } diff --git a/src/pages/Transaction/Transaction.tsx b/src/pages/Transaction/Transaction.tsx index 0acae68..0f3a849 100644 --- a/src/pages/Transaction/Transaction.tsx +++ b/src/pages/Transaction/Transaction.tsx @@ -6,7 +6,7 @@ import StatsPanel from "../../components/default/StatsPanel/StatsPanel"; import Table from "../../components/default/Table/Table"; import TransactionInfo, { Input } from "../../interfaces/common/TransactionInfo"; import Fetch from "../../utils/methods"; -import { useNavigate, useParams } from "react-router-dom"; +import { Link, useNavigate, useParams } from "react-router-dom"; import Utils from "../../utils/utils"; import { nanoid } from "nanoid"; import Popup from "../../components/default/Popup/Popup"; @@ -141,16 +141,16 @@ function Transaction() { e.globalIndexes.length, e.globalIndexes.length > 1 ? ( - showIndexesClick(event, e)}>Show all... + showIndexesClick(event, e)}>Show all... ) : ( - onIndexClick(event, e.amount, e.globalIndexes[0])} > {e.globalIndexes[0] ?? ""} - + ) ]) ) : []; @@ -177,13 +177,13 @@ function Transaction() { {popupIndexes.map(e => ( - onIndexClick(event, amount, e)} > {e} - + ) )} @@ -269,12 +269,12 @@ function Transaction() { className="custom-scroll" headers={[ "HASH", "HEIGHT", "TIMESTAMP (UTC)" ]} elements={[[ - {blockOrigin?.hash} - , + , blockOrigin?.height || "", blockOrigin?.timestamp ? Utils.formatTimestampUTC(parseInt(blockOrigin.timestamp, 10)) : "" ]]}
Assets
Governance @@ -71,25 +72,25 @@ function Header(props: HeaderProps) { - + ZANO - + - Switch to {NET_MODE === "TEST" ? "Main Net" : "Test Net"} - + setBurgerOpened(!burgerOpened)} className="header__burger__button" diff --git a/src/components/default/InfoTopPanel/InfoTopPanel.tsx b/src/components/default/InfoTopPanel/InfoTopPanel.tsx index 114b363..172507c 100644 --- a/src/components/default/InfoTopPanel/InfoTopPanel.tsx +++ b/src/components/default/InfoTopPanel/InfoTopPanel.tsx @@ -5,7 +5,7 @@ import { ReactComponent as SearchImg } from "../../../assets/images/UI/search.sv import { ReactComponent as BackImg } from "../../../assets/images/UI/back.svg"; import { useState } from "react"; import Fetch from "../../../utils/methods"; -import { useNavigate } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import InfoTopPanelProps from "./InfoTopPanel.props"; function InfoTopPanel(props: InfoTopPanelProps) { @@ -74,12 +74,12 @@ function InfoTopPanel(props: InfoTopPanelProps) { > {back && - + Back - + } {title} diff --git a/src/pages/AltBlocks/AltBlocks.tsx b/src/pages/AltBlocks/AltBlocks.tsx index 12b6491..111a0e9 100644 --- a/src/pages/AltBlocks/AltBlocks.tsx +++ b/src/pages/AltBlocks/AltBlocks.tsx @@ -7,6 +7,7 @@ import AliasText from "../../components/default/AliasText/AliasText"; import Block from "../../interfaces/state/Block"; import Fetch from "../../utils/methods"; import Utils from "../../utils/utils"; +import { Link } from "react-router-dom"; function AltBlocks() { @@ -45,14 +46,14 @@ function AltBlocks() { return [ - {e.height} + {e.height} {` (${e.type})`} , Utils.formatTimestampUTC(e.timestamp), Utils.formatTimestampUTC(e.timestamp), `${e.size} bytes`, e.transactions?.toString() || "0", - {e.hash} + {e.hash} ] }); diff --git a/src/pages/Assets/Assets.tsx b/src/pages/Assets/Assets.tsx index 404e3ba..e03076e 100644 --- a/src/pages/Assets/Assets.tsx +++ b/src/pages/Assets/Assets.tsx @@ -1,5 +1,5 @@ import "../../styles/Assets.scss"; -import { useState, useEffect, useRef, memo } from "react"; +import { useState, useEffect, useRef, memo, useCallback } from "react"; import Header from "../../components/default/Header/Header"; import InfoTopPanel from "../../components/default/InfoTopPanel/InfoTopPanel"; import Table from "../../components/default/Table/Table"; @@ -85,6 +85,18 @@ function Assets() { return price; } + const fetchZanoPrice = useCallback(async () => { + const zanoPrice = await getZanoPrice(); + setAssets(prev => { + const newAssets = [...prev]; + const zanoAsset = newAssets.find(e => e.asset_id === ZANO_ID); + if (zanoAsset) { + zanoAsset.price = zanoPrice; + } + return newAssets; + }); + }, []); + useEffect(() => { async function fetchAssetsStats() { const result = await Fetch.getAssetsCount(); @@ -131,21 +143,15 @@ function Assets() { }, [searchParams, initFetched]); useEffect(() => { - async function fetchZanoPrice() { - const zanoPrice = await getZanoPrice(); - setAssets(prev => { - const newAssets = [...prev]; - const zanoAsset = newAssets.find(e => e.asset_id === ZANO_ID); - if (zanoAsset) { - zanoAsset.price = zanoPrice; - } - return newAssets; - }); - } + fetchZanoPrice(); - setInterval(() => { + const intervalId = setInterval(() => { fetchZanoPrice(); }, 10e3); + + return () => { + clearInterval(intervalId); + } }, []); useEffect(() => { @@ -173,6 +179,7 @@ function Assets() { if (!resultAssets || !(resultAssets instanceof Array)) return; setAssets(resultAssets); + fetchZanoPrice(); } fetchAssets(); @@ -191,7 +198,7 @@ function Assets() { e?.ticker || "", - onAssetClick(event, e)}> + onAssetClick(event, e)}> {e?.asset_id || ""} diff --git a/src/pages/Block/Block.tsx b/src/pages/Block/Block.tsx index d329cb7..e1eb3ff 100644 --- a/src/pages/Block/Block.tsx +++ b/src/pages/Block/Block.tsx @@ -7,7 +7,7 @@ import Table from "../../components/default/Table/Table"; import { ReactComponent as ArrowImg } from "../../assets/images/UI/arrow.svg"; import BlockInfo from "../../interfaces/common/BlockInfo"; import Utils from "../../utils/utils"; -import { useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import Fetch from "../../utils/methods"; import Popup from "../../components/default/Popup/Popup"; @@ -37,9 +37,9 @@ function Block(props: { alt?: boolean }) { !alt ? ( - + {e.hash} - + ) : ( @@ -165,15 +165,15 @@ function Block(props: { alt?: boolean }) { Zano Block {!alt && prevHash !== "" && - + - + } {height} {!alt && nextHash !== "" && - + - + } {hash?.toUpperCase() || ""} @@ -197,7 +197,7 @@ function Block(props: { alt?: boolean }) { ID - {Utils.shortenAddress(blockInfo?.tx_id ?? "-")} + {Utils.shortenAddress(blockInfo?.tx_id ?? "-")} Actual Timestamp (UTC): @@ -249,7 +249,7 @@ function Block(props: { alt?: boolean }) { Previous ID: - {Utils.shortenAddress(blockInfo?.prev_id ?? "-")} + {Utils.shortenAddress(blockInfo?.prev_id ?? "-")} Total block size, bytes: @@ -286,15 +286,15 @@ function Block(props: { alt?: boolean }) { JSON data: - { e.preventDefault(); setJsonPopupOpened(true); }} > [ view ] - + diff --git a/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx b/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx index 94ebd3a..8cfc95a 100644 --- a/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx +++ b/src/pages/Blockchain/components/LatestBlocks/LatestBlocks.tsx @@ -7,6 +7,7 @@ import Utils from "../../../../utils/utils"; import "./LatestBlocks.scss"; import { useState, useEffect } from "react"; import { socket } from "../../../../utils/socket"; +import { Link } from "react-router-dom"; function LatestBlocks() { @@ -82,14 +83,14 @@ function LatestBlocks() { const hashLink = hash ? "/block/" + hash : "/"; return [ - {e.height} + {e.height} {` (${e.type})`} , Utils.formatTimestampUTC(e.timestamp), Utils.timeElapsedString(e.timestamp), `${e.size} bytes`, e.transactions?.toString() || "0", - {hash} + {hash} ] }); diff --git a/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx b/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx index 2d1620c..7e7e936 100644 --- a/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx +++ b/src/pages/Blockchain/components/TransactionPool/TransactionPool.tsx @@ -12,6 +12,7 @@ function TransactionPool() { fee: string, id: string, timestamp: string, + tx_id: string, } const [turnedOn, setTurnedOn] = useState(true); @@ -77,7 +78,7 @@ function TransactionPool() { timeAgo(parseInt(element.timestamp, 10)*1000), element.blob_size + " bytes", parseInt(element.fee, 10)/10**12, - {element.id} + {element.tx_id} ])); return ( diff --git a/src/pages/Charts/Charts.tsx b/src/pages/Charts/Charts.tsx index da2d577..da803c5 100644 --- a/src/pages/Charts/Charts.tsx +++ b/src/pages/Charts/Charts.tsx @@ -8,6 +8,7 @@ import { chartOptions } from "../../utils/constants"; import Utils from "../../utils/utils"; import ChartSeriesElem from "../../interfaces/common/ChartSeriesElem"; import Preloader from "../../components/UI/Preloader/Preloader"; +import { Link } from "react-router-dom"; function Charts() { const [burgerOpened, setBurgerOpened] = useState(false); @@ -65,7 +66,7 @@ function Charts() { } = props; return ( - + {title} @@ -117,7 +118,7 @@ function Charts() { } }} /> - + ) } diff --git a/src/pages/Transaction/Transaction.tsx b/src/pages/Transaction/Transaction.tsx index 0acae68..0f3a849 100644 --- a/src/pages/Transaction/Transaction.tsx +++ b/src/pages/Transaction/Transaction.tsx @@ -6,7 +6,7 @@ import StatsPanel from "../../components/default/StatsPanel/StatsPanel"; import Table from "../../components/default/Table/Table"; import TransactionInfo, { Input } from "../../interfaces/common/TransactionInfo"; import Fetch from "../../utils/methods"; -import { useNavigate, useParams } from "react-router-dom"; +import { Link, useNavigate, useParams } from "react-router-dom"; import Utils from "../../utils/utils"; import { nanoid } from "nanoid"; import Popup from "../../components/default/Popup/Popup"; @@ -141,16 +141,16 @@ function Transaction() { e.globalIndexes.length, e.globalIndexes.length > 1 ? ( - showIndexesClick(event, e)}>Show all... + showIndexesClick(event, e)}>Show all... ) : ( - onIndexClick(event, e.amount, e.globalIndexes[0])} > {e.globalIndexes[0] ?? ""} - + ) ]) ) : []; @@ -177,13 +177,13 @@ function Transaction() { {popupIndexes.map(e => ( - onIndexClick(event, amount, e)} > {e} - + ) )} @@ -269,12 +269,12 @@ function Transaction() { className="custom-scroll" headers={[ "HASH", "HEIGHT", "TIMESTAMP (UTC)" ]} elements={[[ - {blockOrigin?.hash} - , + , blockOrigin?.height || "", blockOrigin?.timestamp ? Utils.formatTimestampUTC(parseInt(blockOrigin.timestamp, 10)) : "" ]]}
ZANO
Switch to {NET_MODE === "TEST" ? "Main Net" : "Test Net"}
Back
- {e.height} + {e.height} {` (${e.type})`}
{hash?.toUpperCase() || ""}
{title}