Skip to content

Commit

Permalink
Merge pull request #112 from migalabs/dev
Browse files Browse the repository at this point in the history 
Release 1.3.0
  • Loading branch information
@IuriPons
IuriPons authored Sep 19, 2023
2 parents 8e27423 + 68f2002 commit b0a04eb
Show file tree
Hide file tree
Showing 40 changed files with 923 additions and 477 deletions.
46 changes: 46 additions & 0 deletions packages/client/components/layouts/Background.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React, { useContext } from 'react';

// Contexts
import ThemeModeContext from '../../contexts/theme-mode/ThemeModeContext';

const Background = () => {
// Theme Mode Context
const { themeMode } = useContext(ThemeModeContext) ?? {};

// Constants
// const rows = 16;
// const bricksPerRow = 9;

// return (
// <div className='fixed w-full -z-10'>
// {Array.from(Array(rows).keys()).map(row => (
// <div key={row} className='flex bg-gradient-radial from-violet-900 via-violet-700 to-violet-200'>
// {Array.from(Array(bricksPerRow).keys()).map(brick => (
// <div
// key={brick}
// className='w-[15%] h-[3vw] rounded-[2px] m-0.5'
// style={{
// backgroundColor: themeMode?.darkMode ? '#392370' : '#ab6003',
// boxShadow: `5px 5px 5px 1px darken(${
// themeMode?.darkMode ? '#20124d' : '#783f04'
// }, 20%) inset`,
// }}
// ></div>
// ))}
// </div>
// ))}
// </div>
// );
return (
<div className='fixed w-[100%] -z-10 '>
<div
className='h-screen'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--background-dark)' : 'var(--background-light)',
}}
></div>
</div>
);
};

export default Background;
18 changes: 3 additions & 15 deletions packages/client/components/layouts/Consent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ type Props = {

const Screen = styled.div<Props>`
display: ${props => (props.consent ? 'none' : 'block')};
position: absolute;
position: fixed;
top: 0;
left: 0;
width: calc(100vw - 17px);
height: 100vh;
z-index: 40;
`;

const Container = styled.div<Props>`
Expand Down Expand Up @@ -103,8 +104,6 @@ const Container = styled.div<Props>`
`;

const Consent = () => {
const screenRef = useRef(null);

const [consent, setConsent] = useState(true);
const [generalVisisble, setGeneralVisible] = useState(true);
const [necessaryVisible, setNecessaryVisible] = useState(false);
Expand All @@ -123,17 +122,6 @@ const Consent = () => {
});
};

const handleScreenClient = (e: any) => {
if (e.target === screenRef.current) {
closeP();
}
};

const closeP = () => {
setConsent(true);
setCookie('localConsent', 'false', { maxAge: 60 * 60 });
};

const handleMouseEnterNecessary = () => {
setGeneralVisible(false);
setNecessaryVisible(true);
Expand All @@ -157,7 +145,7 @@ const Consent = () => {
}

return (
<Screen ref={screenRef} consent={consent} onClick={handleScreenClient}>
<Screen consent={consent}>
<Container consent={consent}>
<div className='flex flex-col justify-between h-full'>
<div>
Expand Down
13 changes: 10 additions & 3 deletions packages/client/components/layouts/EpochOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,27 @@ const EpochOverview = ({ epoch, blocks, lastEpoch }: Props) => {

return (
<div className='flex flex-col'>
<span className='uppercase text-white text-center text-xs'>Epoch {epoch?.toLocaleString()}</span>
<span
className='uppercase text-center text-xs'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--newOrange)',
}}
>
Epoch {epoch?.toLocaleString()}
</span>
<div
className={`flex items-center my-2 p-2 h-full border-[4px] ${lastEpoch && 'rounded-3xl'}`}
style={{
borderColor: lastEpoch
? `${themeMode?.darkMode ? 'var(--yellow4)' : 'var(--blue2)'}`
? `${themeMode?.darkMode ? 'var(--yellow4)' : 'var(--blue1)'}`
: 'transparent',
}}
>
<div
className='grid grid-cols-4 md:grid-cols-8 w-fit md:max-h-full mx-auto gap-2 rounded-2xl bg-[var(--yellow2)] p-4'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--yellow2)' : 'var(--blue1)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowYellow1)' : 'var(--boxShadowBlue1)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowYellow1)' : 'var(--boxShadowBlue5)',
}}
>
{blocks.map(block => (
Expand Down
22 changes: 20 additions & 2 deletions packages/client/components/layouts/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,33 @@ import CustomImage from '../ui/CustomImage';
import Menu from '../ui/Menu';
import SearchEngine from '../ui/SearchEngine';

// Contexts
import ThemeModeContext from '../../contexts/theme-mode/ThemeModeContext';

const Header = () => {
// Theme Mode Context
const { themeMode } = React.useContext(ThemeModeContext) ?? {};

return (
<div className='flex justify-between'>
<div className='w-fit'>
<Link href='/' passHref>
<div className='flex flex-row justify-start items-center p-2'>
<CustomImage src='/static/images/icons/ethseer_logo.webp' alt='Logo' width={50} height={50} />
<CustomImage
src={`/static/images/icons/ethseer_logo_${themeMode?.darkMode ? 'dark' : 'light'}.webp`}
alt='Logo'
width={50}
height={50}
/>

<p className='uppercase text-white text-2xs md:text-xs mt-1 ml-2'>Ethseer.io</p>
<p
className='uppercase text-2xs md:text-xs mt-1 ml-2'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--newOrange)',
}}
>
Ethseer.io
</p>
</div>
</Link>
</div>
Expand Down
29 changes: 26 additions & 3 deletions packages/client/components/layouts/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,51 @@ import Image from 'next/image';
// Components
import Header from './Header';
import Consent from './Consent';
import Background from './Background';

// Contexts
import ThemeModeContext from '../../contexts/theme-mode/ThemeModeContext';

// Images
import FooterHeartImage from '../../public/static/images/footer/footer_heart.svg';

type PropsWithChildren = {
children?: React.ReactNode;
hideMetaDescription?: boolean;
};

const Layout = ({ children }: PropsWithChildren) => {
const Layout = ({ hideMetaDescription, children }: PropsWithChildren) => {
// Theme Mode Context
const { themeMode } = React.useContext(ThemeModeContext) ?? {};

return (
<div className='flex flex-col min-h-screen'>
<Head>
<title>Ethereum Blockchain Explorer - EthSeer.io</title>

{!hideMetaDescription && (
<meta
name='description'
content="Ethseer is an Ethereum Blockchain Explorer. It provides real-time data and statistics on Ethereum's latest epochs and blocks."
/>
)}

<link rel='canonical' href='https://ethseer.io' />
</Head>

<Header />

<Background />

<main className='my-6 flex-1'>{children}</main>

<footer className='text-center text-[7.5px] md:text-sm p-2 bg-[#D9D9D94D]'>
<div className='flex flex-row justify-center items-center text-white'>
<footer className='text-center text-[7.5px] md:text-sm p-2 bg-[#ffffff7a]'>
<div
className='flex flex-row justify-center items-center text-white'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--newOrange)',
}}
>
<p>Powered with</p>
<Image src={FooterHeartImage} alt='Heart illustration' className='mx-1' />
<p>
Expand Down
2 changes: 1 addition & 1 deletion packages/client/components/layouts/Slots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const Slots = ({ slots }: Props) => {
</div>
<div className='flex flex-col items-start '>
<div className='flex flex-row items-center gap-x-8'>
<p className='w-24'>Validator:</p>
<p className='w-24'>Proposer:</p>
<LinkValidator validator={slot.f_val_idx} />
</div>

Expand Down
45 changes: 25 additions & 20 deletions packages/client/components/layouts/Statitstics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,10 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {

return (
<div
className='flex gap-x-1 justify-around items-center text-[9px] text-black rounded-[22px] px-2 xl:px-8 py-3'
className='flex gap-x-1 justify-around items-center text-[10px] text-black rounded-[22px] px-2 xl:px-8 py-3'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--brown1)' : 'var(--blue3)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowOrange1)' : 'var(--boxShadowBlue2)',
backgroundColor: themeMode?.darkMode ? 'var(--brown1)' : 'var(--blue4)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowOrange1)' : 'var(--boxShadowBlue5)',
}}
>
<div className='flex flex-col w-[10%] pt-2.5 pb-2.5'>
Expand Down Expand Up @@ -171,7 +171,7 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
className='flex flex-col gap-y-4 justify-around items-center text-[10px] text-black rounded-[22px] px-3 py-4'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--brown1)' : 'var(--blue3)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowOrange1)' : 'var(--boxShadowBlue2)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowOrange1)' : 'var(--boxShadowBlue4)',
}}
>
<div className='flex gap-x-1 justify-center'>
Expand Down Expand Up @@ -339,7 +339,12 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
className='flex flex-col px-2 xl:px-20 overflow-x-scroll overflow-y-hidden scrollbar-thin'
onMouseMove={handleMouseMove}
>
<div className='flex gap-x-1 justify-around px-2 xl:px-8 pb-3 uppercase text-sm min-w-[1150px]'>
<div
className='flex gap-x-1 justify-around px-2 xl:px-8 pb-3 uppercase text-sm min-w-[1150px]'
style={{
color: themeMode?.darkMode ? 'var(--white)' : '',
}}
>
<div className='flex w-[10%] items-center gap-x-1 justify-center'>
<p className='mt-0.5 text-xs'>Time</p>
<TooltipContainer>
Expand Down Expand Up @@ -485,7 +490,7 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
epochs.epochs.map((epoch: Epoch) => (
<div
key={epoch.f_epoch}
className='flex gap-x-1 justify-around items-center text-[9px] text-black rounded-[22px] px-2 xl:px-8 py-3'
className='flex gap-x-1 justify-around items-center text-[10px] text-black rounded-[22px] px-2 xl:px-8 py-3'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--yellow2)' : 'var(--blue1)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowYellow1)' : 'var(--boxShadowBlue1)',
Expand Down Expand Up @@ -518,8 +523,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
<div className='flex-1'>
<ProgressSmoothBar
title='Target'
color='#E86506'
backgroundColor='#FFC163'
color='#B14E2A'
backgroundColor='#FFE8C6'
percent={1 - epoch.f_missing_target / epoch.f_num_vals}
tooltipColor='orange'
tooltipContent={
Expand All @@ -536,8 +541,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
<div className='flex-1'>
<ProgressSmoothBar
title='Source'
color='#14946e'
backgroundColor='#BDFFEB'
color='#117658'
backgroundColor='#E2F3EE'
percent={1 - epoch.f_missing_source / epoch.f_num_vals}
tooltipColor='blue'
tooltipContent={
Expand All @@ -554,8 +559,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
<div className='flex-1'>
<ProgressSmoothBar
title='Head'
color='#532BC5'
backgroundColor='#E6DDFF'
color='#813F93'
backgroundColor='#F0ECFD'
percent={1 - epoch.f_missing_head / epoch.f_num_vals}
tooltipColor='purple'
tooltipContent={
Expand All @@ -573,8 +578,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
<div className='mb-2 w-[32%]'>
<ProgressSmoothBar
title='Attesting/total active'
color='#0016D8'
backgroundColor='#BDC4FF'
color='#0011A7'
backgroundColor='#E9EBFF'
percent={epoch.f_att_effective_balance_eth / epoch.f_total_effective_balance_eth}
tooltipColor='bluedark'
tooltipContent={
Expand Down Expand Up @@ -739,8 +744,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {
</div>
<ProgressSmoothBar
title='Target'
color='#E86506'
backgroundColor='#FFC163'
color='#B14E2A'
backgroundColor='#FFE8C6'
percent={1 - epoch.f_missing_target / epoch.f_num_vals}
tooltipColor='orange'
tooltipContent={
Expand All @@ -754,8 +759,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {

<ProgressSmoothBar
title='Source'
color='#14946e'
backgroundColor='#BDFFEB'
color='#117658'
backgroundColor='#E2F3EE'
percent={1 - epoch.f_missing_source / epoch.f_num_vals}
tooltipColor='blue'
tooltipContent={
Expand All @@ -769,8 +774,8 @@ const Statitstics = ({ showCalculatingEpochs }: Props) => {

<ProgressSmoothBar
title='Head'
color='#532BC5'
backgroundColor='#E6DDFF'
color='#813F93'
backgroundColor='#F0ECFD'
percent={1 - epoch.f_missing_head / epoch.f_num_vals}
tooltipColor='purple'
tooltipContent={
Expand Down
4 changes: 2 additions & 2 deletions packages/client/components/ui/Arrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ const Arrow = ({ direction, height = 30, width = 30, className, onClick }: Props
viewBox='0 0 16 16'
className={`stroke-1 dark-mode-class cursor-pointer ${className ?? ''}`}
style={{
stroke: themeMode?.darkMode ? 'var(--yellow1)' : 'var(--blue2)',
fill: themeMode?.darkMode ? 'var(--yellow1)' : 'var(--blue2)',
stroke: themeMode?.darkMode ? 'var(--yellow1)' : 'var(--white)',
fill: themeMode?.darkMode ? 'var(--yellow1)' : 'var(--white)',
}}
onClick={onClick}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/client/components/ui/BlockImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ const BlockImage = ({ poolName, proposed = true, width, height, showCheck }: Pro
const getUrl = () => {
if (poolName && POOLS.includes(poolName.toUpperCase())) {
return `/static/images/blocks/cubes/${poolName.toLowerCase()}.webp`;
} else if (poolName && poolName.includes('lido')) {
} else if (poolName && poolName.toLowerCase().includes('lido')) {
return `/static/images/blocks/cubes/lido.webp`;
} else if (poolName && poolName.includes('whale')) {
} else if (poolName && poolName.toLowerCase().includes('whale')) {
return `/static/images/blocks/cubes/whale-ethereum-entity.webp`;
} else {
return `/static/images/blocks/cubes/unknown-ethereum-entity.webp`;
Expand Down
Loading

0 comments on commit b0a04eb

Please sign in to comment.