structure fix

This commit is contained in:
jejolare 2024-09-23 00:26:46 +07:00
parent 63612d6cae
commit d20b331242
7 changed files with 74 additions and 106 deletions

View file

@ -1,87 +0,0 @@
import styles from "@/styles/Blockchain.module.scss";
import Header from "@/components/default/Header/Header";
import StatsPanel from "@/components/default/StatsPanel/StatsPanel";
import InfoTopPanel from "@/components/default/InfoTopPanel/InfoTopPanel";
import LatestBlocks from "./components/LatestBlocks/LatestBlocks";
import TransactionPool, { PoolElement } from "./components/TransactionPool/TransactionPool";
import { useEffect, useState } from "react";
import Fetch from "@/utils/methods";
import VisibilityInfo from "@/interfaces/state/VisibilityInfo";
import Info from "@/interfaces/state/Info";
import Block from "@/interfaces/state/Block";
function Blockchain({
fetchedVisibilityInfo,
fetchedIsOnline,
fetchedInfo,
fetchedLatestBlocks,
fetchedTxPoolElements,
}: {
fetchedVisibilityInfo: VisibilityInfo | null,
fetchedInfo: Info | null,
fetchedIsOnline: boolean,
fetchedLatestBlocks: Block[],
fetchedTxPoolElements: PoolElement[],
}) {
const [burgerOpened, setBurgerOpened] = useState(false);
const [visibilityInfo, setVisibilityInfo] = useState<VisibilityInfo | null>(fetchedVisibilityInfo);
const [isOnline, setIsOnline] = useState(fetchedIsOnline);
useEffect(() => {
async function fetchVisibilityInfo() {
const result = await Fetch.getVisibilityInfo();
if (result.success === false) return;
setVisibilityInfo(result);
}
async function checkOnline() {
try {
const result = await Fetch.getInfo();
if (result.status === "OK") {
setIsOnline(true);
} else {
setIsOnline(false);
}
} catch (error) {
console.log(error);
setIsOnline(false);
}
}
fetchVisibilityInfo();
const interval = setInterval(checkOnline, 5000);
return () => clearInterval(interval);
}, []);
return (
<div className={styles["blockchain"]}>
<Header
page="Blockchain"
burgerOpened={burgerOpened}
setBurgerOpened={setBurgerOpened}
/>
<InfoTopPanel
burgerOpened={burgerOpened}
title="Blockchain"
content={
<div className={styles["info__top__daemon"]}>
<p>Daemon state: {isOnline ? 'Online' : 'Offline'}</p>
<p>Default network fee: 0,01</p>
<p>Minimum network fee: 0,01</p>
</div>
}
/>
<StatsPanel visibilityInfo={visibilityInfo} fetchedInfo={fetchedInfo} />
<LatestBlocks
fetchedLatestBlocks={fetchedLatestBlocks}
fetchedInfo={fetchedInfo}
/>
<TransactionPool
fetchedTxPoolElements={fetchedTxPoolElements}
/>
</div>
)
}
export default Blockchain;

View file

@ -1,11 +1,16 @@
import Blockchain from './Blockchain/index';
import { GetServerSideProps } from 'next'
import VisibilityInfo from '@/interfaces/state/VisibilityInfo';
import Info from '@/interfaces/state/Info';
import Block from '@/interfaces/state/Block';
import { PoolElement } from './Blockchain/components/TransactionPool/TransactionPool';
import { getMainPageProps } from '@/utils/ssr';
import styles from "@/styles/Blockchain.module.scss";
import Header from "@/components/default/Header/Header";
import StatsPanel from "@/components/default/StatsPanel/StatsPanel";
import InfoTopPanel from "@/components/default/InfoTopPanel/InfoTopPanel";
import LatestBlocks from "@/components/default/LatestBlocks/LatestBlocks";
import TransactionPool, { PoolElement } from "@/components/default/TransactionPool/TransactionPool";
import { useEffect, useState } from "react";
import Fetch from "@/utils/methods";
import VisibilityInfo from "@/interfaces/state/VisibilityInfo";
import Info from "@/interfaces/state/Info";
import Block from "@/interfaces/state/Block";
import { GetServerSideProps } from "next";
import { getMainPageProps } from "@/utils/ssr";
export interface MainPageProps {
visibilityInfo: VisibilityInfo | null;
isOnline: boolean;
@ -14,16 +19,66 @@ export interface MainPageProps {
txPoolElements: PoolElement[]
}
function MainPage({ visibilityInfo, isOnline, info, latestBlocks, txPoolElements }: MainPageProps) {
function MainPage({ visibilityInfo: fetchedVisibilityInfo, isOnline: fetchedIsOnline, info, latestBlocks, txPoolElements }: MainPageProps) {
const [burgerOpened, setBurgerOpened] = useState(false);
const [visibilityInfo, setVisibilityInfo] = useState<VisibilityInfo | null>(fetchedVisibilityInfo);
const [isOnline, setIsOnline] = useState(fetchedIsOnline);
useEffect(() => {
async function fetchVisibilityInfo() {
const result = await Fetch.getVisibilityInfo();
if (result.success === false) return;
setVisibilityInfo(result);
}
async function checkOnline() {
try {
const result = await Fetch.getInfo();
if (result.status === "OK") {
setIsOnline(true);
} else {
setIsOnline(false);
}
} catch (error) {
console.log(error);
setIsOnline(false);
}
}
fetchVisibilityInfo();
const interval = setInterval(checkOnline, 5000);
return () => clearInterval(interval);
}, []);
return (
<Blockchain
fetchedVisibilityInfo={visibilityInfo}
fetchedIsOnline={isOnline}
fetchedInfo={info}
fetchedLatestBlocks={latestBlocks}
fetchedTxPoolElements={txPoolElements}
/>
);
<div className={styles["blockchain"]}>
<Header
page="Blockchain"
burgerOpened={burgerOpened}
setBurgerOpened={setBurgerOpened}
/>
<InfoTopPanel
burgerOpened={burgerOpened}
title="Blockchain"
content={
<div className={styles["info__top__daemon"]}>
<p>Daemon state: {isOnline ? 'Online' : 'Offline'}</p>
<p>Default network fee: 0,01</p>
<p>Minimum network fee: 0,01</p>
</div>
}
/>
<StatsPanel visibilityInfo={visibilityInfo} fetchedInfo={info} />
<LatestBlocks
fetchedLatestBlocks={latestBlocks}
fetchedInfo={info}
/>
<TransactionPool
fetchedTxPoolElements={txPoolElements}
/>
</div>
)
}
const getServerSideProps: GetServerSideProps = getMainPageProps;

View file

@ -1,9 +1,9 @@
import VisibilityInfo from "@/interfaces/state/VisibilityInfo";
import Fetch from "./methods";
import Block from "@/interfaces/state/Block";
import { PoolElement } from "@/pages/Blockchain/components/TransactionPool/TransactionPool";
import { PoolElement } from "@/components/default/TransactionPool/TransactionPool";
import Info from "@/interfaces/state/Info";
import { latestBlocksInitState } from "@/pages/Blockchain/components/LatestBlocks/LatestBlocks";
import { latestBlocksInitState } from "@/components/default/LatestBlocks/LatestBlocks";
import Utils from "./utils";
import { DEFAULT_ITEMS_ON_PAGE } from "@/pages/aliases";
import { DEFAULT_ASSETS_ON_PAGE } from "@/pages/assets";