Skip to content

Commit

Permalink
Merge pull request #160 from migalabs/dev
Browse files Browse the repository at this point in the history 
Release 2.2.2
  • Loading branch information
@IuriPons
IuriPons authored Jan 11, 2024
2 parents 27e1424 + 42e0230 commit b15ed12
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 144 deletions.
7 changes: 5 additions & 2 deletions packages/client/components/layouts/EpochAnimation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import ThemeModeContext from '../../contexts/theme-mode/ThemeModeContext';
type Props = {
notEpoch?: boolean;
notSlot?: boolean;
notBlock?: boolean;
};

const EpochAnimation = ({ notEpoch, notSlot }: Props) => {
const EpochAnimation = ({ notEpoch, notSlot, notBlock }: Props) => {
// Theme Mode Context
const { themeMode } = useContext(ThemeModeContext) ?? {};

Expand All @@ -17,14 +18,16 @@ const EpochAnimation = ({ notEpoch, notSlot }: Props) => {
return 'Epoch not saved yet';
} else if (notSlot) {
return 'Slot not saved yet';
} else if (notBlock) {
return 'Block not saved yet';
} else {
return "We're not there yet";
}
};

return (
<div
className='flex items-center justify-center flex-col h-screen gap-y-5 rounded-md mx-auto w-11/12 md:w-10/12'
className='flex flex-col items-center justify-center gap-y-5 h-[65vh] xl:h-[70vh] rounded-md mx-auto w-11/12 md:w-10/12'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
backgroundColor: themeMode?.darkMode ? 'var(--bgFairDarkMode)' : 'var(--bgMainLightMode)',
Expand Down
149 changes: 25 additions & 124 deletions packages/client/pages/block/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef, useCallback, useContext } from 'react';
import React, { useEffect, useState, useRef, useContext } from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

Expand All @@ -16,6 +16,7 @@ import LinkSlot from '../../components/ui/LinkSlot';
import Arrow from '../../components/ui/Arrow';
import LinkBlock from '../../components/ui/LinkBlock';
import Transactions from '../../components/layouts/Transactions';
import EpochAnimation from '../../components/layouts/EpochAnimation';

// Types
import { BlockEL, Transaction } from '../../types';
Expand Down Expand Up @@ -67,100 +68,50 @@ const BlockPage = () => {
const { network, id } = router.query;

// Refs
const slotRef = useRef(0);
const existsBlockRef = useRef(true);
const blockRef = useRef(0);

// States
const [block, setBlock] = useState<BlockEL | null>(null);
const [transactions, setTransactions] = useState<Array<Transaction>>([]);
const [existsBlock, setExistsBlock] = useState<boolean>(true);
const [countdownText, setCountdownText] = useState<string>('');
const [tabPageIndex, setTabPageIndex] = useState<number>(0);
const [loadingBlock, setLoadingBlock] = useState<boolean>(true);
const [loadingTransactions, setLoadingTransactions] = useState<boolean>(true);
const [blockGenesis, setBlockGenesis] = useState(0);
const [tabPageIndex, setTabPageIndex] = useState(0);
const [loadingBlock, setLoadingBlock] = useState(true);
const [loadingTransactions, setLoadingTransactions] = useState(true);
const [notBlock, setNotBlock] = useState(false);

// UseEffect
useEffect(() => {
if (id) {
slotRef.current = Number(id);
blockRef.current = Number(id);
}

if (network && ((id && !block) || (block && block.f_slot !== Number(id)))) {
if (network && ((id && !block) || (block && block.f_el_block_number !== Number(id)))) {
getBlock();
getTransactions();
}

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [network, id]);

const shuffle = useCallback(() => {
const text: string = getCountdownText();
setCountdownText(text);

// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
const intervalID = setInterval(shuffle, 1000);
return () => clearInterval(intervalID);

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shuffle, slotRef.current]);

// Get blocks
const getBlock = async () => {
try {
setLoadingBlock(true);

const [response, genesisBlock] = await Promise.all([
const [blockResponse, latestBlockResponse] = await Promise.all([
axiosClient.get(`/api/blocks/${id}`, {
params: {
network,
},
}),
axiosClient.get(`/api/networks/block/genesis`, {
axiosClient.get('/api/blocks/latest', {
params: {
network,
},
}),
]);

const blockResponse: BlockEL = response.data.block;
setBlock(blockResponse);
setBlockGenesis(genesisBlock.data.block_genesis);

if (!blockResponse) {
const expectedTimestamp = (genesisBlock.data.block_genesis + Number(id) * 12000) / 1000;

setBlock({
f_epoch: Math.floor(Number(id) / 32),
f_slot: Number(id),
f_timestamp: expectedTimestamp,
});

setExistsBlock(false);
existsBlockRef.current = false;

const timeDifference = new Date(expectedTimestamp * 1000).getTime() - new Date().getTime();

if (timeDifference > 0) {
setTimeout(() => {
if (Number(id) === slotRef.current) {
getBlock();
}
}, timeDifference + 2000);
} else if (timeDifference > -10000) {
setTimeout(() => {
if (Number(id) === slotRef.current) {
getBlock();
}
}, 1000);
}
} else {
setExistsBlock(true);
existsBlockRef.current = true;
}
setBlock(blockResponse.data.block);
setNotBlock(Number(id) < latestBlockResponse.data.block.f_el_block_number);
} catch (error) {
console.log(error);
} finally {
Expand Down Expand Up @@ -196,59 +147,6 @@ const BlockPage = () => {
}
};

// Get Time Block
const getTimeBlock = () => {
let text;

if (block) {
if (block.f_timestamp) {
text = new Date(block.f_timestamp * 1000).toLocaleString('ja-JP');
} else {
text = new Date(blockGenesis + Number(id) * 12000).toLocaleString('ja-JP');
}
}

return text + countdownText;
};

// Get Countdown Text
const getCountdownText = () => {
let text = '';

if (!existsBlockRef.current) {
const expectedTimestamp = (blockGenesis + slotRef.current * 12000) / 1000;
const timeDifference = new Date(expectedTimestamp * 1000).getTime() - new Date().getTime();

const minutesMiliseconds = 1000 * 60;
const hoursMiliseconds = minutesMiliseconds * 60;
const daysMiliseconds = hoursMiliseconds * 24;
const yearsMiliseconds = daysMiliseconds * 365;

if (timeDifference > yearsMiliseconds) {
const years = Math.floor(timeDifference / yearsMiliseconds);
text = ` (in ${years} ${years > 1 ? 'years' : 'year'})`;
} else if (timeDifference > daysMiliseconds) {
const days = Math.floor(timeDifference / daysMiliseconds);
text = ` (in ${days} ${days > 1 ? 'days' : 'day'})`;
} else if (timeDifference > hoursMiliseconds) {
const hours = Math.floor(timeDifference / hoursMiliseconds);
text = ` (in ${hours} ${hours > 1 ? 'hours' : 'hour'})`;
} else if (timeDifference > minutesMiliseconds) {
const minutes = Math.floor(timeDifference / minutesMiliseconds);
text = ` (in ${minutes} ${minutes > 1 ? 'minutes' : 'minute'})`;
} else if (timeDifference > 1000) {
const seconds = Math.floor(timeDifference / 1000);
text = ` (in ${seconds} ${seconds > 1 ? 'seconds' : 'second'})`;
} else if (timeDifference < -10000) {
text = ' (data not saved)';
} else {
text = ' (updating...)';
}
}

return text;
};

//TABLE
//TABS
const getSelectedTab = () => {
Expand All @@ -266,14 +164,13 @@ const BlockPage = () => {
<div className='flex flex-col mx-auto'>
<div className='flex flex-col sm:flex-row gap-4 w-1/2 mx-auto'>
<TabHeader header='Overview' isSelected={tabPageIndex === 0} onClick={() => setTabPageIndex(0)} />
{existsBlock && (
<TabHeader
header='Transactions'
isSelected={tabPageIndex === 1}
onClick={() => setTabPageIndex(1)}
/>
)}
<TabHeader
header='Transactions'
isSelected={tabPageIndex === 1}
onClick={() => setTabPageIndex(1)}
/>
</div>

{getSelectedTab()}
</div>
);
Expand All @@ -299,7 +196,10 @@ const BlockPage = () => {
<div className='flex flex-col mx-auto gap-y-5 md:gap-y-8 '>
<Card title='Block hash' text={getShortAddress(block?.f_el_block_hash)} />
<Card title='Slot' content={<LinkSlot slot={block?.f_slot} />} />
<Card title='Datetime (Local)' text={getTimeBlock()} />
<Card
title='Datetime (Local)'
text={new Date((block?.f_timestamp ?? 0) * 1000).toLocaleString('ja-JP')}
/>
<Card title='Transactions' text={String(block?.f_el_transactions)} />
<Card title='Fee recipient' text={getShortAddress(block?.f_el_fee_recp)} />
<Card title='Size' text={`${Number(block?.f_payload_size_bytes)?.toLocaleString()} bytes`} />
Expand Down Expand Up @@ -349,7 +249,8 @@ const BlockPage = () => {
</div>
)}

{block?.f_slot && !loadingBlock && getInformationView()}
{block && !loadingBlock && getInformationView()}
{!block && !loadingBlock && <EpochAnimation notBlock={notBlock} />}
</Layout>
);
};
Expand Down
54 changes: 38 additions & 16 deletions packages/server/controllers/blocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,45 @@ export const getBlockById = async (req: Request, res: Response) => {

const pgPool = pgPools[network as string];

const [ block ] =
await Promise.all([
pgPool.query(`
SELECT f_timestamp, f_slot, f_epoch,
f_el_fee_recp, f_el_gas_limit, f_el_gas_used,
f_el_transactions, f_el_block_hash, f_payload_size_bytes
FROM t_block_metrics
WHERE f_el_block_number = '${id}'
`)
]);
// 18022299


const block = await pgPool.query(`
SELECT f_el_block_number, f_timestamp, f_slot, f_epoch,
f_el_fee_recp, f_el_gas_limit, f_el_gas_used,
f_el_transactions, f_el_block_hash, f_payload_size_bytes
FROM t_block_metrics
WHERE f_el_block_number = '${id}'
`);

res.json({
block: block.rows[0],
});

} catch (error) {
console.log(error);
return res.status(500).json({
msg: 'An error occurred on the server'
});
}
};

export const getLatestBlock = async (req: Request, res: Response) => {

try {

const { network } = req.query;

const pgPool = pgPools[network as string];

const block = await pgPool.query(`
SELECT f_el_block_number, f_timestamp, f_slot, f_epoch,
f_el_fee_recp, f_el_gas_limit, f_el_gas_used,
f_el_transactions, f_el_block_hash, f_payload_size_bytes
FROM t_block_metrics
ORDER BY f_el_block_number DESC
LIMIT 1
`);

res.json({
block: {
...block.rows[0],
},
block: block.rows[0],
});

} catch (error) {
Expand Down
13 changes: 11 additions & 2 deletions packages/server/routes/blocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,37 @@ import { Router } from 'express';
import { check, query } from 'express-validator';

import {
getBlockById, getTransactionsByBlock, getBlocks
getLatestBlock,
getBlockById,
getTransactionsByBlock,
getBlocks,
} from '../controllers/blocks';

import { checkFields } from '../middlewares/check-fields';
import { existsNetwork } from '../helpers/network-validator';


const router = Router();

router.get('/latest', [
query('network').not().isEmpty(),
query('network').custom(existsNetwork),
checkFields,
], getLatestBlock);

router.get('/:id', [
check('id').isInt({ min: 0, max: 2147483647 }),
query('network').not().isEmpty(),
query('network').custom(existsNetwork),
checkFields,
], getBlockById);

router.get('/:id/transactions', [
check('id').isInt({ min: 0, max: 2147483647 }),
query('network').not().isEmpty(),
query('network').custom(existsNetwork),
checkFields,
], getTransactionsByBlock);

router.get('/', [
query('network').not().isEmpty(),
query('network').custom(existsNetwork),
Expand Down

0 comments on commit b15ed12

Please sign in to comment.