Skip to content

Commit

Permalink
Merge pull request #155 from migalabs/dev
Browse files Browse the repository at this point in the history 
Release 2.2.0
  • Loading branch information
@IuriPons
IuriPons authored Dec 22, 2023
2 parents 52d23c6 + 6afb7c0 commit 72247df
Show file tree
Hide file tree
Showing 46 changed files with 1,413 additions and 781 deletions.
25 changes: 12 additions & 13 deletions packages/client/components/layouts/Blocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,16 +129,11 @@ const Blocks = ({ blocks }: Props) => {
<p className='w-[20%]'>{(element.f_el_transactions ?? 0).toLocaleString()}</p>
</div>
))}

{blocks.length === 0 && (
<div className='flex justify-center p-2'>
<p className='uppercase text-[16px]'>No blocks</p>
</div>
)}
</div>
</div>
);
};

//View blocks table mobile
const getContentBlocksMobile = () => {
return (
Expand Down Expand Up @@ -230,17 +225,21 @@ const Blocks = ({ blocks }: Props) => {
</div>
</div>
))}

{blocks.length === 0 && (
<div className='flex justify-center p-2'>
<p className='uppercase text-[14px]'>No blocks</p>
</div>
)}
</div>
);
};

return <div>{desktopView ? getContentBlocksDesktop() : getContentBlocksMobile()}</div>;
return (
<div className='mx-auto w-11/12 md:w-10/12'>
{blocks.length > 0 ? (
<>{desktopView ? getContentBlocksDesktop() : getContentBlocksMobile()}</>
) : (
<div className='flex justify-center p-2'>
<p className='uppercase text-[14px] md:text-[16px]'>No blocks</p>
</div>
)}
</div>
);
};

export default Blocks;
48 changes: 32 additions & 16 deletions packages/client/components/layouts/ChainOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import BlocksContext from '../../contexts/blocks/BlocksContext';
// Components
import EpochOverview from './EpochOverview';
import Arrow from '../ui/Arrow';
import Toggle from '../ui/Toggle';

const ChainOverview = () => {
// Router
Expand All @@ -23,6 +24,7 @@ const ChainOverview = () => {
const [arrowLeftHidden, setArrowLeftHidden] = useState(false);
const [currentPage, setCurrentPage] = useState(0);
const [numberEpochsViewed, setNumberEpochsViewed] = useState(1);
const [showClient, setShowClient] = useState(false);

useEffect(() => {
if (network && blocks && !blocks.epochs) {
Expand Down Expand Up @@ -70,7 +72,7 @@ const ChainOverview = () => {
};

return (
<div className='flex flex-row justify-center space-x-4 md:space-x-5 px-7'>
<div className='flex justify-center space-x-4 md:space-x-5'>
<div className='flex items-center mt-8'>
<Arrow
direction='left'
Expand All @@ -81,21 +83,35 @@ const ChainOverview = () => {
/>
</div>

{blocks &&
blocks.epochs &&
Object.entries(blocks.epochs)
.slice(
Object.entries(blocks.epochs).length - numberEpochsViewed - count,
Object.entries(blocks.epochs).length - count
)
.map(([epoch, blocksEpoch]) => (
<EpochOverview
key={epoch}
epoch={Number(epoch)}
blocks={blocksEpoch.sort((a, b) => a.f_slot - b.f_slot)}
lastEpoch={epoch === lastEpoch.toString()}
/>
))}
<div className='flex flex-col gap-y-4'>
<div className='flex justify-center md:justify-start pl-2'>
<Toggle
value={showClient}
labelLeft='CL Clients'
labelRight='Entities'
onToggle={() => setShowClient(!showClient)}
/>
</div>

<div className='flex justify-center space-x-4 md:space-x-5'>
{blocks &&
blocks.epochs &&
Object.entries(blocks.epochs)
.slice(
Object.entries(blocks.epochs).length - numberEpochsViewed - count,
Object.entries(blocks.epochs).length - count
)
.map(([epoch, blocksEpoch]) => (
<EpochOverview
key={epoch}
epoch={Number(epoch)}
blocks={[...blocksEpoch].sort((a, b) => a.f_slot - b.f_slot)}
lastEpoch={epoch === lastEpoch.toString()}
showClient={showClient}
/>
))}
</div>
</div>

<div className='flex items-center mt-8'>
<Arrow
Expand Down
41 changes: 33 additions & 8 deletions packages/client/components/layouts/EpochOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@ type Props = {
epoch: number;
blocks: Block[];
lastEpoch: boolean;
showClient: boolean;
};

const EpochOverview = ({ epoch, blocks, lastEpoch }: Props) => {
const EpochOverview = ({ epoch, blocks, lastEpoch, showClient }: Props) => {
// Theme Mode Context
const { themeMode } = React.useContext(ThemeModeContext) ?? {};

Expand All @@ -35,27 +36,47 @@ const EpochOverview = ({ epoch, blocks, lastEpoch }: Props) => {
}
};

const getClientName = (f_client_name: string) => {
if (f_client_name) {
if (f_client_name.length > 18) {
return `${f_client_name.substring(0, 15)}...`;
} else {
return f_client_name;
}
} else {
return 'others';
}
};

const getEntityText = (f_pool_name: string) => {
return `Entity: ${getEntityName(f_pool_name)}`;
};

const getClientText = (f_client_name: string) => {
return `Client: ${getClientName(f_client_name)}`;
};

return (
<div className='flex flex-col'>
<span
className='capitalize text-center text-[14px]'
className='capitalize text-center text-[16px] md:text-[18px]'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--newOrange)',
}}
>
Epoch {epoch?.toLocaleString()}
</span>

<div
className={`flex items-center my-2 p-2 h-full border-2 ${lastEpoch && 'rounded-md'}`}
style={{
borderColor: lastEpoch ? `${themeMode?.darkMode ? 'var(--white)' : 'var(--white)'}` : 'transparent',
borderColor: lastEpoch ? 'var(--white)' : 'transparent',
}}
>
<div
className='grid grid-cols-4 md:grid-cols-8 w-fit md:max-h-full border-2 mx-auto gap-2 rounded-md p-6'
className='grid grid-cols-4 md:grid-cols-8 w-fit md:max-h-full border-2 border-[var(--white)] mx-auto gap-2 rounded-md p-6'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--bgFairDarkMode)' : 'var(--bgMainLightMode)',
borderColor: themeMode?.darkMode ? 'var(--white)' : 'var(--white)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowCardDark)' : 'var(--boxShadowCardLight)',
}}
>
Expand All @@ -65,18 +86,22 @@ const EpochOverview = ({ epoch, blocks, lastEpoch }: Props) => {
<TooltipContainer>
<BlockImage
poolName={block.f_pool_name ?? 'others'}
clientName={block.f_cl_client?.toLowerCase() ?? 'others'}
proposed={block.f_proposed}
height={55}
width={55}
showClient={showClient}
/>

<TooltipResponsive
width={225}
colorLetter='black'
backgroundColor='white'
content={
<div className='flex flex-col gap-y-1 items-center'>
<span>Entity: {getEntityName(block.f_pool_name as string)}</span>
<span>
{showClient
? getClientText(block.f_cl_client as string)
: getEntityText(block.f_pool_name as string)}
</span>
<span>
Proposer: {Number(block.f_proposer_index)?.toLocaleString()}
</span>
Expand Down
Loading

0 comments on commit 72247df

Please sign in to comment.