From dae6e2d64fb0f671c835384dc524c0f315fc0d77 Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 17:59:02 +0100 Subject: [PATCH 1/9] Fix Share Link and Icon Names --- packages/client/components/ui/ShareMenu.tsx | 8 ++------ .../public/static/images/social/linkedin.webp | Bin 0 -> 790 bytes .../public/static/images/social/telegram.webp | Bin 0 -> 916 bytes .../public/static/images/social/twitter.webp | Bin 0 -> 868 bytes 4 files changed, 2 insertions(+), 6 deletions(-) create mode 100644 packages/client/public/static/images/social/linkedin.webp create mode 100644 packages/client/public/static/images/social/telegram.webp create mode 100644 packages/client/public/static/images/social/twitter.webp diff --git a/packages/client/components/ui/ShareMenu.tsx b/packages/client/components/ui/ShareMenu.tsx index 930b7779..943fe58a 100644 --- a/packages/client/components/ui/ShareMenu.tsx +++ b/packages/client/components/ui/ShareMenu.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import Image from 'next/image'; -import { useRouter } from 'next/router'; // Components import TooltipContainer from './TooltipContainer'; @@ -33,14 +32,11 @@ type Props = { }; const ShareMenu = ({ type }: Props) => { - // Router - const router = useRouter(); - // States const [copied, setCopied] = useState(false); const getShareUrl = (shareLink: string) => { - const encodedUrl = `${process.env.NEXT_PUBLIC_URL_API}${router.asPath}`; + const encodedUrl = window.location.href; const encodedTitle = `Check out this ${type} on Ethseer!`; const url = shareLink.replace('${encodedUrl}', encodedUrl).replace('${encodedTitle}', encodedTitle); @@ -49,7 +45,7 @@ const ShareMenu = ({ type }: Props) => { }; const handleCopyClick = async () => { - const encodedUrl = `${process.env.NEXT_PUBLIC_URL_API}${router.asPath}`; + const encodedUrl = window.location.href; await navigator.clipboard.writeText(encodedUrl); setCopied(true); diff --git a/packages/client/public/static/images/social/linkedin.webp b/packages/client/public/static/images/social/linkedin.webp new file mode 100644 index 0000000000000000000000000000000000000000..59c40d64a101d630e6d962729a17d702827d15bb GIT binary patch literal 790 zcmV+x1L^!yNk&Ev0{{S5MM6+kP&iBh0{{RoTL2djH^R7W8%dm*-To`RUgOuU+d$B^ zZ9M)Y&)^w?Ic(d=kvMbxcbon)nd%pCb(& z(%>+WKXgdLZXm|7_ir~5X()&^5owV71;03*sIC&11x(c$Do#T#EE+-_KkyF@1w*MA zL{Jrjs-9)4h2kgTw$}+qQw?>>ck(Rm$>EGnJwiB6|D(pDaowfdeA? zKLOxv9_!*bRv@T~7vD(bvt6Pi3G(rdY-6GoD>dGcX1XcBVTbG`WAkZ z(xXXH7C{`~nNhGSn|Gh&IM4{A$X=g;oKA7VUq6(X@7y9tq)Z(W2)?6>wpBmpP3 zLL?E#mVQXcy_GRZIS(ypk`q;>5Cx%0rG!L{D`=7xE1)p6EHx%+=c+`A;?T0hnB<)+ z6ADC2gC^_4+w+r)Hj}w3O0D&3!Qm|rdMWrN>&HQHo5!vovDOTX7d%KEptU>GDU%lf z_$BLg(;1T;04(ecYlb?LxdM2zN8MV%9dV5TG6&SZIyt#$5!)sFlH8y0BpAYy#jsVc z*W2z$ty~-%J4DnuHWCf5Yr$ddV&E!za}gNZMAQ$A)T;&NqlTl$)Vo0~DBW_?flO=(QFQQ;x1>PjlP&v=! zNWkKg7&x*4OCc}^yK5ODu>B^12J0&2r@^60xoL2_W|e7hy<~(DxYrq%j~sl=k;evn zT{6HJ{LNF(vgHW8*634`gZCPJ`G|p~e)k|-=D;?eqLb`HkAQcyc+c$opXw2a7(GqD U(#-Tfoh_b5Anhp6^BlYe0K7MJ-T(jq literal 0 HcmV?d00001 diff --git a/packages/client/public/static/images/social/telegram.webp b/packages/client/public/static/images/social/telegram.webp new file mode 100644 index 0000000000000000000000000000000000000000..e66137286e7a71b35100e16a54cf99e10fe5a8e2 GIT binary patch literal 916 zcmV;F18e+JNk&GD0{{S5MM6+kP&iD00{{RoTL2djFXE_?Bu9$%XZh2-_tfna4Tf#o zIMVgoe^ux1`wliBd>pM3}!)kch%0 zG9po;L>ZAN5Ch3T%mPpm1FZm4W+yZmp1&kvTX8VhH3@CgK3|L9VsitI1tWv_nQ8we z37?rJJO_BVk;&uK55CO9O{GVO*xQmRQXFUzC#M|C0-d z=>G(e*zM-u{hLio0c|(`{V8Ey)aT862)6e%Tvz8!>s5PSgZcc;o6UIvfmNe@*wm0( z-D_$3A4skmS@#8mS6a^389cm~@>IafN=s;G@U?j5(`WGbo=aEo`kqHu@cf)ZSMdJa zovskT2Uog65bqtGA&@Ul9udkyJ7^Hjs6ik7IBH9n1$?GJZY6BUxuSUDUq+|n1s=1HWS zrVQ8gCM7+Mlwq6>4RVHxZe@&OWf~2DqMRJsC?4dRYC!`?*M51FP60J7m> zzZVa&KT!@-p5}tb@>sdddDd5Q2Fhgw-jAi6BPTHvy~!CmIpz6H-*PZ;@r&o0sFZ`O zXP5GxI%^;J=UwXnm1J0lXKu0%PD#dfXy#_R z2+NEt7eOht4b>r;leI3wF(Zes!6;i7bQg$HliSNMe39!q1kdFBd+OgaF@8^ddnVpX zuO`pLedkg6Mf~%^ms*oVUHWlDQtvz{*Cba@g-z~S5^%`}Ohms09Ac{#5IOzt#! qt8Yq{Nj-1L@6Sa&aZ}#RTMFXm>&>6(q^q3%zj$pawC#4g-I8cjeYw;C literal 0 HcmV?d00001 diff --git a/packages/client/public/static/images/social/twitter.webp b/packages/client/public/static/images/social/twitter.webp new file mode 100644 index 0000000000000000000000000000000000000000..1fa82616306eed2a8fbeab4d7c81736509930aef GIT binary patch literal 868 zcmV-q1DpI(Nk&Fo0{{S5MM6+kP&iCb0{{RoTfi0&PhpU4q&~r)zwZ4z5M*-lsqUWvA4^xx5ZJ{$I7VU+cU z#%Gl@3iKrX1IuJm|XK2G~Yo(C6od>Xi?1l?~nJf=1nJ*TsX%+YHH{UDhNF) z@HHxu>yNTwrGm|8q}hB&38jTbXYt=f89UZ|Q4MX6a?%-li_THQ6g5Z`Nusiu0+F%f z%4Q4Wj3p|YG2lJ=EXtZ`P<)9#3sKoDVKYkCFQHkh1oEmDeHKkkz0^7T9gik72aQ@Y z)rt_sBC4g9#x)8cmx?#7`G_?=6l(T6(hJmHMdJZ_COG#%RJFVli;4W^#VaM$CA~ns z6f`x!ROf<^0;Qp82h24Rin~C)gf}ro^pvHL zP`m}|cDX!$B25PoJ8?ouo@7LtCdO2nP`rFdJm1OoZ(J`-D20bdo@N0ca+mwS3nH`K zNnW^W!sR8`6D~8j-maSh$rjP_rjWOVCb&XwWOrwBX$P$BS{DpOw7cs$2PR7s z0agHZTjxO1ESTB0av)<7az~T4E+1OpGk>8E73i=ISz{=uminVLBxvbk{nUXn8^z9| ufDCNBlA?f2ES6%qZyn@hB^mI4`ur@LWjc?0Kd&9wVOcfpG-A_~YFYq4TAFhJ literal 0 HcmV?d00001 From 41b6c2650bea5645e96667c88dd90a77cd5f8b89 Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 19:13:06 +0100 Subject: [PATCH 2/9] Add Server Side Props to Dynamic Route Pages --- packages/client/pages/block/[id].tsx | 44 +++++++++------ packages/client/pages/entity/[name].tsx | 44 +++++++++------ packages/client/pages/epoch/[id].tsx | 53 ++++++++++-------- packages/client/pages/slot/[id].tsx | 54 +++++++++++-------- .../client/pages/slot/graffiti/[graffiti].tsx | 36 +++++++++---- packages/client/pages/transaction/[hash].tsx | 32 ++++++++--- packages/client/pages/validator/[id].tsx | 44 +++++++++------ 7 files changed, 198 insertions(+), 109 deletions(-) diff --git a/packages/client/pages/block/[id].tsx b/packages/client/pages/block/[id].tsx index c07431b0..77ac1933 100644 --- a/packages/client/pages/block/[id].tsx +++ b/packages/client/pages/block/[id].tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useRef, useContext } from 'react'; -import { useRouter } from 'next/router'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; // Axios @@ -23,11 +23,27 @@ import ShareMenu from '../../components/ui/ShareMenu'; // Types import { BlockEL, Transaction } from '../../types'; -const BlockPage = () => { - // Next router - const router = useRouter(); - const { network, id } = router.query; +// Props +interface Props { + id: number; + network: string; +} +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const id = context.params?.id; + const network = context.query?.network; + + if (isNaN(Number(id)) || !network) { + return { + notFound: true, + }; + } + + return { props: { id: Number(id), network } }; +}; + +const BlockPage = ({ id, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; @@ -44,17 +60,15 @@ const BlockPage = () => { // UseEffect useEffect(() => { - if (id) { - blockRef.current = Number(id); - } + blockRef.current = Number(id); - if (network && ((id && !block) || (block && block.f_el_block_number !== Number(id)))) { + if (!block || block.f_el_block_number !== id) { getBlock(); getTransactions(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, id]); + }, [id]); // Get blocks const getBlock = async () => { @@ -78,7 +92,7 @@ const BlockPage = () => { if (blockResponse.data.block) { setInfoBoxText(''); - } else if (Number(id) < latestBlockResponse.data.block.f_el_block_number) { + } else if (id < latestBlockResponse.data.block.f_el_block_number) { setInfoBoxText('Block not saved yet'); } else { setInfoBoxText("We're not there yet"); @@ -180,16 +194,14 @@ const BlockPage = () => { //OVERVIEW BLOCK PAGE return ( - + {loadingBlock && (
diff --git a/packages/client/pages/entity/[name].tsx b/packages/client/pages/entity/[name].tsx index d37f16f2..6fe6449d 100644 --- a/packages/client/pages/entity/[name].tsx +++ b/packages/client/pages/entity/[name].tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect, useState } from 'react'; -import { useRouter } from 'next/router'; +import { GetServerSideProps } from 'next'; // Axios import axiosClient from '../../config/axios'; @@ -20,11 +20,27 @@ import ShareMenu from '../../components/ui/ShareMenu'; // Types import { Entity } from '../../types'; -const EntityComponent = () => { - // Next router - const router = useRouter(); - const { network, name } = router.query; +// Props +interface Props { + name: string; + network: string; +} +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const name = context.params?.name; + const network = context.query?.network; + + if (!name || !network) { + return { + notFound: true, + }; + } + + return { props: { name, network } }; +}; + +const EntityComponent = ({ name, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; @@ -38,12 +54,12 @@ const EntityComponent = () => { // UseEffect useEffect(() => { - if (name && !entityHour && !entityDay && !entityWeek) { + if (!entityHour && !entityDay && !entityWeek) { getEntity(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [name]); + }, []); //Entity const getEntity = async () => { @@ -55,19 +71,19 @@ const EntityComponent = () => { const week = 1575; const [responseHour, responseDay, responseWeek] = await Promise.all([ - axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, { + axiosClient.get(`/api/entities/${name.toLowerCase()}`, { params: { network, numberEpochs: hour, }, }), - axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, { + axiosClient.get(`/api/entities/${name.toLowerCase()}`, { params: { network, numberEpochs: day, }, }), - axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`, { + axiosClient.get(`/api/entities/${name.toLowerCase()}`, { params: { network, numberEpochs: week, @@ -79,8 +95,6 @@ const EntityComponent = () => { setEntityDay(responseDay.data.entity); setEntityWeek(responseWeek.data.entity); - // const response = await axiosClient.get(`/api/entities/${(name as string).toLowerCase()}`); - if (responseHour.data.entity.aggregate_balance !== null) { setShowInfoBox(false); } else { @@ -223,10 +237,8 @@ const EntityComponent = () => { //OVERVIEW PAGE return ( {name} diff --git a/packages/client/pages/epoch/[id].tsx b/packages/client/pages/epoch/[id].tsx index 66c638ec..f03b5da1 100644 --- a/packages/client/pages/epoch/[id].tsx +++ b/packages/client/pages/epoch/[id].tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { useRouter } from 'next/router'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; // Axios @@ -21,14 +21,30 @@ import ShareMenu from '../../components/ui/ShareMenu'; // Types import { Epoch, Slot } from '../../types'; -const EpochComponent = () => { +// Props +interface Props { + id: number; + network: string; +} + +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const id = context.params?.id; + const network = context.query?.network; + + if (isNaN(Number(id)) || !network) { + return { + notFound: true, + }; + } + + return { props: { id: Number(id), network } }; +}; + +const EpochComponent = ({ id, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; - // Next router - const router = useRouter(); - const { network, id } = router.query; - // Refs const epochRef = useRef(0); const existsEpochRef = useRef(true); @@ -44,17 +60,15 @@ const EpochComponent = () => { // UseEffect useEffect(() => { - if (id) { - epochRef.current = Number(id); - } + epochRef.current = id; - if (network && ((id && !epoch) || (epoch && epoch.f_epoch !== Number(id)))) { + if (!epoch || epoch.f_epoch !== id) { getEpoch(); getSlots(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, id]); + }, [id]); const shuffle = useCallback(() => { setCalculatingText(prevState => { @@ -95,8 +109,7 @@ const EpochComponent = () => { if (Number(response.data.epoch.proposed_blocks) === 0) { setInfoBoxText("We're not there yet"); - const expectedTimestamp = - (genesisBlock.data.block_genesis + Number(id) * 12000 * 32 + 12000 * 64) / 1000; + const expectedTimestamp = (genesisBlock.data.block_genesis + id * 12000 * 32 + 12000 * 64) / 1000; existsEpochRef.current = false; @@ -106,13 +119,13 @@ const EpochComponent = () => { return; } else if (timeDifference > 0) { setTimeout(() => { - if (Number(id) === epochRef.current) { + if (id === epochRef.current) { getEpoch(); } }, timeDifference + 2000); } else if (timeDifference > -30000) { setTimeout(() => { - if (Number(id) === epochRef.current) { + if (id === epochRef.current) { getEpoch(); } }, 1000); @@ -160,7 +173,7 @@ const EpochComponent = () => {

Time (Local):

- {new Date(blockGenesis + Number(id) * 32 * 12000).toLocaleString('ja-JP')} + {new Date(blockGenesis + id * 32 * 12000).toLocaleString('ja-JP')}

@@ -279,16 +292,14 @@ const EpochComponent = () => { return ( - + {loadingEpoch && (
diff --git a/packages/client/pages/slot/[id].tsx b/packages/client/pages/slot/[id].tsx index 1bb15af3..692a8a89 100644 --- a/packages/client/pages/slot/[id].tsx +++ b/packages/client/pages/slot/[id].tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useRef, useContext } from 'react'; -import { useRouter } from 'next/router'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; // Axios @@ -29,11 +29,27 @@ import ShareMenu from '../../components/ui/ShareMenu'; // Types import { Block, Withdrawal } from '../../types'; -const Slot = () => { - // Next router - const router = useRouter(); - const { network, id } = router.query; +// Props +interface Props { + id: number; + network: string; +} +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const id = context.params?.id; + const network = context.query?.network; + + if (isNaN(Number(id)) || !network) { + return { + notFound: true, + }; + } + + return { props: { id: Number(id), network } }; +}; + +const Slot = ({ id, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; @@ -56,17 +72,15 @@ const Slot = () => { const countdownText = useCountdownText((!block?.f_el_block_number && block?.f_timestamp) || undefined); useEffect(() => { - if (id) { - slotRef.current = Number(id); - } + slotRef.current = id; - if (network && ((id && !block) || (block && block.f_slot !== Number(id)))) { + if (!block || block.f_slot !== id) { getBlock(); getWithdrawals(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, id]); + }, [id]); // Get blocks const getBlock = async () => { @@ -91,11 +105,11 @@ const Slot = () => { setBlockGenesis(genesisBlock.data.block_genesis); if (!blockResponse) { - const expectedTimestamp = (genesisBlock.data.block_genesis + Number(id) * 12000) / 1000; + const expectedTimestamp = (genesisBlock.data.block_genesis + id * 12000) / 1000; setBlock({ - f_epoch: Math.floor(Number(id) / 32), - f_slot: Number(id), + f_epoch: Math.floor(id / 32), + f_slot: id, f_timestamp: expectedTimestamp, }); @@ -107,13 +121,13 @@ const Slot = () => { return; } else if (timeDifference > 0) { setTimeout(() => { - if (Number(id) === slotRef.current) { + if (id === slotRef.current) { getBlock(); } }, timeDifference + 3000); } else if (timeDifference > -10000) { setTimeout(() => { - if (Number(id) === slotRef.current) { + if (id === slotRef.current) { getBlock(); } }, 1000); @@ -155,7 +169,7 @@ const Slot = () => { 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'); + text = new Date(blockGenesis + id * 12000).toLocaleString('ja-JP'); } } @@ -335,16 +349,14 @@ const Slot = () => { //OVERVIEW SLOT PAGE return ( - + {loadingBlock && (
diff --git a/packages/client/pages/slot/graffiti/[graffiti].tsx b/packages/client/pages/slot/graffiti/[graffiti].tsx index bf16e3ee..5f855508 100644 --- a/packages/client/pages/slot/graffiti/[graffiti].tsx +++ b/packages/client/pages/slot/graffiti/[graffiti].tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; -import { useRouter } from 'next/router'; // Axios import axiosClient from '../../../config/axios'; @@ -21,11 +21,27 @@ import { LargeTable, LargeTableHeader, LargeTableRow, SmallTable, SmallTableCard // Types import { Block } from '../../../types'; -const GraffitiSearch = () => { - // Router - const router = useRouter(); - const { network, graffiti } = router.query; +// Props +interface Props { + graffiti: string; + network: string; +} +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const graffiti = context.params?.graffiti; + const network = context.query?.network; + + if (!graffiti || !network) { + return { + notFound: true, + }; + } + + return { props: { graffiti, network } }; +}; + +const GraffitiSearch = ({ graffiti, network }: Props) => { // Large View Hook const isLargeView = useLargeView(); @@ -38,12 +54,12 @@ const GraffitiSearch = () => { const [blockGenesis, setBlockGenesis] = useState(0); useEffect(() => { - if (network && graffiti && blocks.length === 0) { + if (blocks.length === 0) { getGraffities(0); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, graffiti]); + }, []); const getGraffities = async (page: number, limit: number = 10) => { try { @@ -178,10 +194,8 @@ const GraffitiSearch = () => { return ( diff --git a/packages/client/pages/transaction/[hash].tsx b/packages/client/pages/transaction/[hash].tsx index eb9c6640..027364a7 100644 --- a/packages/client/pages/transaction/[hash].tsx +++ b/packages/client/pages/transaction/[hash].tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useContext } from 'react'; -import { useRouter } from 'next/router'; +import { GetServerSideProps } from 'next'; import Head from 'next/head'; // Axios @@ -22,11 +22,27 @@ import ShareMenu from '../../components/ui/ShareMenu'; // Types import { Transaction } from '../../types'; -const TransactionPage = () => { - // Next router - const router = useRouter(); - const { network, hash } = router.query; +// Props +interface Props { + hash: string; + network: string; +} +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const hash = context.params?.hash; + const network = context.query?.network; + + if (!hash || !network) { + return { + notFound: true, + }; + } + + return { props: { hash, network } }; +}; + +const TransactionPage = ({ hash, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; @@ -37,12 +53,12 @@ const TransactionPage = () => { // UseEffect useEffect(() => { - if (network && hash && !transaction) { + if (!transaction) { getTransaction(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, hash]); + }, []); // Get Transaction const getTransaction = async () => { @@ -83,7 +99,7 @@ const TransactionPage = () => { }} >
- } /> + } /> } /> { +// Props +interface Props { + id: number; + network: string; +} + +// Server Side Props +export const getServerSideProps: GetServerSideProps = async context => { + const id = context.params?.id; + const network = context.query?.network; + + if (isNaN(Number(id)) || !network) { + return { + notFound: true, + }; + } + + return { props: { id: Number(id), network } }; +}; + +const ValidatorComponent = ({ id, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; - // Next router - const router = useRouter(); - const { network, id } = router.query; - // Refs const validatorRef = useRef(0); @@ -60,18 +76,16 @@ const ValidatorComponent = () => { // UseEffect useEffect(() => { - if (id) { - validatorRef.current = Number(id); - } + validatorRef.current = id; - if (network && ((id && !validatorHour) || (validatorHour && validatorHour.f_val_idx !== Number(id)))) { + if (!validatorHour || validatorHour.f_val_idx !== id) { getValidator(); getProposedBlocks(); getWithdrawals(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [network, id]); + }, [id]); const getValidator = async () => { try { @@ -549,16 +563,14 @@ const ValidatorComponent = () => { //Overview validator page return ( - + {loadingValidator && (
From 82ac538e932e7c93178103a3236c94afa24f5ab6 Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 19:19:12 +0100 Subject: [PATCH 3/9] Fix Docker Compose File --- docker-compose.yaml | 46 +++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index 58f9338e..6d5754c2 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -1,26 +1,28 @@ version: '3.7' services: - ethseer-client: - image: ethseer-client-image:1.0.0 - build: - context: ./ - dockerfile: Dockerfile-client - container_name: ethseer-client-container - init: true - network_mode: 'host' - restart: unless-stopped - volumes: - - ${MYFOLDER}/packages/client/.env:/app/.env + ethseer-client: + image: ethseer-client-image:1.0.0 + build: + context: ./ + dockerfile: Dockerfile-client + container_name: ethseer-client-container + init: true + restart: unless-stopped + volumes: + - ${MYFOLDER}/packages/client/.env:/app/.env + ports: + - "127.0.0.1:3000:3000" - ethseer-server: - image: ethseer-server-image:1.0.0 - build: - context: ./ - dockerfile: Dockerfile-server - container_name: ethseer-server-container - init: true - network_mode: 'host' - restart: unless-stopped - volumes: - - ${MYFOLDER}/packages/server/.env:/app/.env \ No newline at end of file + ethseer-server: + image: ethseer-server-image:1.0.0 + build: + context: ./ + dockerfile: Dockerfile-server + container_name: ethseer-server-container + init: true + restart: unless-stopped + volumes: + - ${MYFOLDER}/packages/server/.env:/app/.env + ports: + - "127.0.0.1:3020:3020" \ No newline at end of file From 17fcac3b316e045055270ab5aade540e579a04d1 Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 19:23:03 +0100 Subject: [PATCH 4/9] Fix Docker Compose File --- docker-compose.yaml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index 6d5754c2..e175e981 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -2,27 +2,27 @@ version: '3.7' services: ethseer-client: - image: ethseer-client-image:1.0.0 - build: - context: ./ - dockerfile: Dockerfile-client + image: ethseer-client-image:1.0.0 + build: + context: ./ + dockerfile: Dockerfile-client container_name: ethseer-client-container init: true restart: unless-stopped volumes: - ${MYFOLDER}/packages/client/.env:/app/.env - ports: - - "127.0.0.1:3000:3000" + ports: + - "127.0.0.1:3000:3000" ethseer-server: image: ethseer-server-image:1.0.0 build: - context: ./ - dockerfile: Dockerfile-server + context: ./ + dockerfile: Dockerfile-server container_name: ethseer-server-container init: true restart: unless-stopped volumes: - ${MYFOLDER}/packages/server/.env:/app/.env - ports: - - "127.0.0.1:3020:3020" \ No newline at end of file + ports: + - "127.0.0.1:3020:3020" \ No newline at end of file From 24b950dce6c747bc6af2a5fafa0b109b0ca00f75 Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 19:25:36 +0100 Subject: [PATCH 5/9] Fix Docker Compose File --- docker-compose.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-compose.yaml b/docker-compose.yaml index e175e981..5b287156 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -4,8 +4,8 @@ services: ethseer-client: image: ethseer-client-image:1.0.0 build: - context: ./ - dockerfile: Dockerfile-client + context: ./ + dockerfile: Dockerfile-client container_name: ethseer-client-container init: true restart: unless-stopped From bf56292195c4daa938c1d17dd02294fc4c72401b Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 19:51:29 +0100 Subject: [PATCH 6/9] Fix Graffiti Search Refresh Issue --- .../client/pages/slot/graffiti/[graffiti].tsx | 36 ++++++++++++------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/client/pages/slot/graffiti/[graffiti].tsx b/packages/client/pages/slot/graffiti/[graffiti].tsx index 5f855508..ac100a89 100644 --- a/packages/client/pages/slot/graffiti/[graffiti].tsx +++ b/packages/client/pages/slot/graffiti/[graffiti].tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { GetServerSideProps } from 'next'; import Head from 'next/head'; @@ -42,9 +42,15 @@ export const getServerSideProps: GetServerSideProps = async context => { }; const GraffitiSearch = ({ graffiti, network }: Props) => { + // Constants + const LIMIT = 20; + // Large View Hook const isLargeView = useLargeView(); + // Refs + const graffitiRef = useRef(''); + // States const [currentPage, setCurrentPage] = useState(0); const [disableViewMore, setDisableViewMore] = useState(true); @@ -54,14 +60,15 @@ const GraffitiSearch = ({ graffiti, network }: Props) => { const [blockGenesis, setBlockGenesis] = useState(0); useEffect(() => { - if (blocks.length === 0) { + if (blocks.length === 0 || graffitiRef.current !== graffiti) { + graffitiRef.current = graffiti; getGraffities(0); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [graffiti]); - const getGraffities = async (page: number, limit: number = 10) => { + const getGraffities = async (page: number, keepRows: boolean = false) => { try { setLoading(true); setCurrentPage(page); @@ -70,7 +77,7 @@ const GraffitiSearch = ({ graffiti, network }: Props) => { axiosClient.get(`/api/slots/graffiti/${graffiti}`, { params: { network, - limit, + limit: LIMIT, page, }, }), @@ -81,15 +88,18 @@ const GraffitiSearch = ({ graffiti, network }: Props) => { }), ]); - setBlocks([...blocks, ...response.data.blocks]); + if (keepRows) { + setBlocks([...blocks, ...response.data.blocks]); + } else { + setBlocks(response.data.blocks); + } + setBlockGenesis(genesisBlock.data.block_genesis); - if (response.data.blocks.length === 0) { - setShowInfoBox(true); - } else if (response.data.blocks.length < limit) { - setDisableViewMore(true); - } else { - setDisableViewMore(false); + setShowInfoBox(response.data.blocks.length === 0 && page === 0); + + if (response.data.blocks.length > 0) { + setDisableViewMore(response.data.blocks.length < LIMIT); } } catch (error) { console.log(error); @@ -207,7 +217,7 @@ const GraffitiSearch = ({ graffiti, network }: Props) => { {!disableViewMore && (
- getGraffities(currentPage + 1)} /> + getGraffities(currentPage + 1, true)} />
)} From 9d0bbe2cfe55fdc0ef93239873679a949faadbfd Mon Sep 17 00:00:00 2001 From: Iuri Date: Fri, 1 Mar 2024 20:25:37 +0100 Subject: [PATCH 7/9] Update useRef and useEffect for improved state synchronization --- packages/client/pages/block/[id].tsx | 7 +++---- packages/client/pages/entity/[name].tsx | 10 +++++++--- packages/client/pages/epoch/[id].tsx | 11 +++++------ packages/client/pages/slot/[id].tsx | 11 +++++------ packages/client/pages/transaction/[hash].tsx | 10 +++++++--- packages/client/pages/validator/[id].tsx | 7 +++---- 6 files changed, 30 insertions(+), 26 deletions(-) diff --git a/packages/client/pages/block/[id].tsx b/packages/client/pages/block/[id].tsx index 77ac1933..8eec0c02 100644 --- a/packages/client/pages/block/[id].tsx +++ b/packages/client/pages/block/[id].tsx @@ -48,7 +48,7 @@ const BlockPage = ({ id, network }: Props) => { const { themeMode } = useContext(ThemeModeContext) ?? {}; // Refs - const blockRef = useRef(0); + const idRef = useRef(0); // States const [block, setBlock] = useState(null); @@ -60,9 +60,8 @@ const BlockPage = ({ id, network }: Props) => { // UseEffect useEffect(() => { - blockRef.current = Number(id); - - if (!block || block.f_el_block_number !== id) { + if (!block || idRef.current !== id) { + idRef.current = id; getBlock(); getTransactions(); } diff --git a/packages/client/pages/entity/[name].tsx b/packages/client/pages/entity/[name].tsx index 6fe6449d..d03313b1 100644 --- a/packages/client/pages/entity/[name].tsx +++ b/packages/client/pages/entity/[name].tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState, useRef } from 'react'; import { GetServerSideProps } from 'next'; // Axios @@ -44,6 +44,9 @@ const EntityComponent = ({ name, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; + // Refs + const entityRef = useRef(''); + // States const [entityHour, setEntityHour] = useState(null); const [entityDay, setEntityDay] = useState(null); @@ -54,12 +57,13 @@ const EntityComponent = ({ name, network }: Props) => { // UseEffect useEffect(() => { - if (!entityHour && !entityDay && !entityWeek) { + if ((!entityHour && !entityDay && !entityWeek) || entityRef.current !== name) { + entityRef.current = name; getEntity(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [name]); //Entity const getEntity = async () => { diff --git a/packages/client/pages/epoch/[id].tsx b/packages/client/pages/epoch/[id].tsx index f03b5da1..5523e4a0 100644 --- a/packages/client/pages/epoch/[id].tsx +++ b/packages/client/pages/epoch/[id].tsx @@ -46,7 +46,7 @@ const EpochComponent = ({ id, network }: Props) => { const { themeMode } = useContext(ThemeModeContext) ?? {}; // Refs - const epochRef = useRef(0); + const idRef = useRef(0); const existsEpochRef = useRef(true); // States @@ -60,9 +60,8 @@ const EpochComponent = ({ id, network }: Props) => { // UseEffect useEffect(() => { - epochRef.current = id; - - if (!epoch || epoch.f_epoch !== id) { + if (!epoch || idRef.current !== id) { + idRef.current = id; getEpoch(); getSlots(); } @@ -119,13 +118,13 @@ const EpochComponent = ({ id, network }: Props) => { return; } else if (timeDifference > 0) { setTimeout(() => { - if (id === epochRef.current) { + if (id === idRef.current) { getEpoch(); } }, timeDifference + 2000); } else if (timeDifference > -30000) { setTimeout(() => { - if (id === epochRef.current) { + if (id === idRef.current) { getEpoch(); } }, 1000); diff --git a/packages/client/pages/slot/[id].tsx b/packages/client/pages/slot/[id].tsx index 692a8a89..56e1a1b8 100644 --- a/packages/client/pages/slot/[id].tsx +++ b/packages/client/pages/slot/[id].tsx @@ -54,7 +54,7 @@ const Slot = ({ id, network }: Props) => { const { themeMode } = useContext(ThemeModeContext) ?? {}; // Refs - const slotRef = useRef(0); + const idRef = useRef(0); // Large View Hook const isLargeView = useLargeView(); @@ -72,9 +72,8 @@ const Slot = ({ id, network }: Props) => { const countdownText = useCountdownText((!block?.f_el_block_number && block?.f_timestamp) || undefined); useEffect(() => { - slotRef.current = id; - - if (!block || block.f_slot !== id) { + if (!block || idRef.current !== id) { + idRef.current = id; getBlock(); getWithdrawals(); } @@ -121,13 +120,13 @@ const Slot = ({ id, network }: Props) => { return; } else if (timeDifference > 0) { setTimeout(() => { - if (id === slotRef.current) { + if (id === idRef.current) { getBlock(); } }, timeDifference + 3000); } else if (timeDifference > -10000) { setTimeout(() => { - if (id === slotRef.current) { + if (id === idRef.current) { getBlock(); } }, 1000); diff --git a/packages/client/pages/transaction/[hash].tsx b/packages/client/pages/transaction/[hash].tsx index 027364a7..d2e1c921 100644 --- a/packages/client/pages/transaction/[hash].tsx +++ b/packages/client/pages/transaction/[hash].tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useContext } from 'react'; +import React, { useEffect, useState, useContext, useRef } from 'react'; import { GetServerSideProps } from 'next'; import Head from 'next/head'; @@ -46,6 +46,9 @@ const TransactionPage = ({ hash, network }: Props) => { // Theme Mode Context const { themeMode } = useContext(ThemeModeContext) ?? {}; + // Refs + const hashRef = useRef(''); + // States const [transaction, setTransaction] = useState(null); const [tabPageIndex, setTabPageIndex] = useState(0); @@ -53,12 +56,13 @@ const TransactionPage = ({ hash, network }: Props) => { // UseEffect useEffect(() => { - if (!transaction) { + if (!transaction || hashRef.current !== hash) { + hashRef.current = hash; getTransaction(); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [hash]); // Get Transaction const getTransaction = async () => { diff --git a/packages/client/pages/validator/[id].tsx b/packages/client/pages/validator/[id].tsx index f240e6c8..8b937ecd 100644 --- a/packages/client/pages/validator/[id].tsx +++ b/packages/client/pages/validator/[id].tsx @@ -55,7 +55,7 @@ const ValidatorComponent = ({ id, network }: Props) => { const { themeMode } = useContext(ThemeModeContext) ?? {}; // Refs - const validatorRef = useRef(0); + const idRef = useRef(0); // Large View Hook const isLargeView = useLargeView(); @@ -76,9 +76,8 @@ const ValidatorComponent = ({ id, network }: Props) => { // UseEffect useEffect(() => { - validatorRef.current = id; - - if (!validatorHour || validatorHour.f_val_idx !== id) { + if (!validatorHour || idRef.current !== id) { + idRef.current = id; getValidator(); getProposedBlocks(); getWithdrawals(); From efa841191e760e68d201b02ed9b1f04d42840dc7 Mon Sep 17 00:00:00 2001 From: Iuri Date: Sat, 2 Mar 2024 11:33:18 +0100 Subject: [PATCH 8/9] Remove Copy Icon from Transaction Link --- packages/client/components/ui/LinkTransaction.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/client/components/ui/LinkTransaction.tsx b/packages/client/components/ui/LinkTransaction.tsx index 8eba4b53..f6df2999 100644 --- a/packages/client/components/ui/LinkTransaction.tsx +++ b/packages/client/components/ui/LinkTransaction.tsx @@ -3,7 +3,9 @@ import React from 'react'; // Components import LinkIcon from './LinkIcon'; import NetworkLink from './NetworkLink'; -import AddressCopy from './AddressCopy'; + +// Helpers +import { getShortAddress } from '../../helpers/addressHelper'; // Props type Props = { @@ -17,13 +19,13 @@ const LinkTransaction = ({ hash, children, mxAuto }: Props) => { {children ?? ( <> - + {getShortAddress(hash ?? '')} )} From c15b2e6c954a3df0777a4c202da663295d64a4b3 Mon Sep 17 00:00:00 2001 From: Iuri Date: Sat, 2 Mar 2024 11:44:15 +0100 Subject: [PATCH 9/9] Remove Scrollbar from Large Table --- packages/client/components/ui/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/components/ui/Table.tsx b/packages/client/components/ui/Table.tsx index cf4d90a3..88906d03 100644 --- a/packages/client/components/ui/Table.tsx +++ b/packages/client/components/ui/Table.tsx @@ -104,7 +104,7 @@ export const LargeTable = ({ >