Skip to content

Commit

Permalink
Merge pull request #167 from migalabs/dev
Browse files Browse the repository at this point in the history 
Release 2.3.0
  • Loading branch information
@IuriPons
IuriPons authored Jan 21, 2024
2 parents b15ed12 + a434bb2 commit a82c46a
Show file tree
Hide file tree
Showing 77 changed files with 2,516 additions and 3,881 deletions.
34 changes: 0 additions & 34 deletions packages/client/components/layouts/Animation.tsx
View file

This file was deleted.

39 changes: 2 additions & 37 deletions packages/client/components/layouts/Background.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,9 @@
import React, { useContext } from 'react';

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

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 className='h-screen bg-[var(--backgroundLight)] dark:bg-[var(--backgroundDark)]'></div>
</div>
);
};
Expand Down
247 changes: 62 additions & 185 deletions packages/client/components/layouts/Blocks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,45 @@
import React, { useState, useRef, useContext, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

// Axios
import axiosClient from '../../config/axios';

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

// Components
import LinkBlock from '../ui/LinkBlock';
import LinkSlot from '../ui/LinkSlot';
import { LargeTable, LargeTableHeader, LargeTableRow, SmallTable, SmallTableCard } from '../ui/Table';

// Types
import { BlockEL } from '../../types';

// Props
type Props = {
blocks: BlockEL[];
fetchingBlocks?: boolean;
};

const Blocks = ({ blocks }: Props) => {
// Theme Mode Context
const { themeMode } = useContext(ThemeModeContext) ?? {};

const Blocks = ({ blocks, fetchingBlocks }: Props) => {
// Router
const router = useRouter();
const { network } = router.query;

// Refs
const containerRef = useRef<HTMLInputElement>(null);
// Large View Hook
const isLargeView = useLargeView();

// States
const [desktopView, setDesktopView] = useState(true);
const [blockGenesis, setBlockGenesis] = useState(0);

useEffect(() => {
setDesktopView(window !== undefined && window.innerWidth > 768);

if (network && blockGenesis == 0) {
getBlockGenesis(network as string);
}

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

const handleMouseMove = (e: any) => {
if (containerRef.current) {
const x = e.pageX;
const limit = 0.15;

if (x < containerRef.current.clientWidth * limit) {
containerRef.current.scrollLeft -= 10;
} else if (x > containerRef.current.clientWidth * (1 - limit)) {
containerRef.current.scrollLeft += 10;
}
}
};

const getBlockGenesis = async (network: string) => {
try {
const genesisBlock = await axiosClient.get(`/api/networks/block/genesis`, {
Expand All @@ -72,174 +55,68 @@ const Blocks = ({ blocks }: Props) => {
};

//View blocks table desktop
const getContentBlocksDesktop = () => {
const titles = ['Block Number', 'Slot', 'Datetime', 'Transactions'];
return (
<div
ref={containerRef}
className='flex flex-col overflow-x-scroll overflow-y-hidden scrollbar-thin my-4'
onMouseMove={handleMouseMove}
>
<div>
<div
className='font-semibold flex gap-4 py-3 text-center items-center flex-row justify-around text-[16px]'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
}}
>
{titles.map((title, index) => (
<p key={index} className='w-[20%]'>
{title}
</p>
))}
const getContentBlocksDesktop = () => (
<LargeTable minWidth={600} noRowsText='No Blocks' fetchingRows={fetchingBlocks}>
<LargeTableHeader text='Block' />
<LargeTableHeader text='Slot' />
<LargeTableHeader text='Time' />
<LargeTableHeader text='Transactions' />

{blocks.map(block => (
<LargeTableRow key={block.f_el_block_number}>
<div className='w-[25%]'>
<LinkBlock block={block.f_el_block_number} mxAuto />
</div>

{blocks.map(element => (
<div
className='flex gap-4 py-3 text-center font-medium items-center flex-row justify-around text-[16px] rounded-md border-2 border-white my-2'
style={{
backgroundColor: themeMode?.darkMode
? 'var(--bgFairDarkMode)'
: 'var(--bgMainLightMode)',
boxShadow: themeMode?.darkMode
? 'var(--boxShadowCardDark)'
: 'var(--boxShadowCardLight)',
color: themeMode?.darkMode ? 'var(--white)' : 'var(--black)',
}}
key={element.f_slot}
>
<div
className='w-[20%] md:hover:underline underline-offset-4 decoration-2'
style={{ color: themeMode?.darkMode ? 'var(--purple)' : 'var(--darkPurple)' }}
>
<LinkBlock block={element.f_el_block_number} mxAuto />
</div>

<div
className='w-[20%] md:hover:underline underline-offset-4 decoration-2'
style={{ color: themeMode?.darkMode ? 'var(--purple)' : 'var(--darkPurple)' }}
>
<LinkSlot slot={element.f_slot} mxAuto />
</div>

<p className='w-[20%]'>
{new Date(blockGenesis + Number(element.f_slot) * 12000).toLocaleString('ja-JP')}
</p>

<p className='w-[20%]'>{(element.f_el_transactions ?? 0).toLocaleString()}</p>
</div>
))}
</div>
</div>
);
};
<div className='w-[25%]'>
<LinkSlot slot={block.f_slot} mxAuto />
</div>

<div className='w-[25%] flex flex-col'>
<span>{new Date(block.f_timestamp * 1000).toLocaleDateString('ja-JP')}</span>
<span>{new Date(block.f_timestamp * 1000).toLocaleTimeString('ja-JP')}</span>
</div>

<p className='w-[25%]'>{(block.f_el_transactions ?? 0).toLocaleString()}</p>
</LargeTableRow>
))}
</LargeTable>
);

//View blocks table mobile
const getContentBlocksMobile = () => {
return (
<div
className='flex flex-col gap-2 font-medium text-[14px] my-4'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--black)',
}}
>
{blocks.map(block => (
<div
className='flex flex-row py-2 px-2 border-2 border-white rounded-md'
style={{
backgroundColor: themeMode?.darkMode ? 'var(--bgFairDarkMode)' : 'var(--bgMainLightMode)',
boxShadow: themeMode?.darkMode ? 'var(--boxShadowCardDark)' : 'var(--boxShadowCardLight)',
color: themeMode?.darkMode ? 'var(--white)' : 'var(--black)',
}}
key={block.f_slot}
>
<div className='flex flex-col mx-auto w-10/12'>
<div className='flex flex-row items-center justify-between py-1'>
<p
className='font-semibold'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
}}
>
Block number:
</p>
<LinkBlock block={block.f_el_block_number} />
</div>

<div className='flex flex-row items-center justify-between py-1'>
<p
className='font-semibold'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
}}
>
Slot:
</p>
<LinkSlot slot={block.f_slot} />
</div>

<div className='flex flex-row items-center justify-between py-1'>
<p
className='font-semibold'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
}}
>
Datetime:
</p>
<div className='flex flex-row gap-2 py-1'>
<p>
{new Date(blockGenesis + Number(block.f_slot) * 12000).toLocaleDateString(
'ja-JP',
{
year: 'numeric',
month: 'numeric',
day: 'numeric',
}
)}
</p>
<p>
{new Date(blockGenesis + Number(block.f_slot) * 12000).toLocaleTimeString(
'ja-JP',
{
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
}
)}
</p>
</div>
</div>

<div className='flex flex-row items-center justify-between'>
<p
className='font-semibold'
style={{
color: themeMode?.darkMode ? 'var(--white)' : 'var(--darkGray)',
}}
>
Transactions:
</p>
<p>{(block.f_el_transactions ?? 0).toLocaleString()}</p>
</div>
const getContentBlocksMobile = () => (
<SmallTable noRowsText='No Blocks' fetchingRows={fetchingBlocks}>
{blocks.map(block => (
<SmallTableCard key={block.f_slot}>
<div className='flex w-full items-center justify-between'>
<p className='font-semibold text-[var(--darkGray)] dark:text-[var(--white)]'>Block:</p>
<LinkBlock block={block.f_el_block_number} />
</div>

<div className='flex w-full items-center justify-between'>
<p className='font-semibold text-[var(--darkGray)] dark:text-[var(--white)]'>Slot:</p>
<LinkSlot slot={block.f_slot} />
</div>

<div className='flex w-full items-center justify-between'>
<p className='font-semibold text-[var(--darkGray)] dark:text-[var(--white)]'>Time</p>

<div className='flex flex-col text-end'>
<span>{new Date(block.f_timestamp * 1000).toLocaleDateString('ja-JP')}</span>
<span>{new Date(block.f_timestamp * 1000).toLocaleTimeString('ja-JP')}</span>
</div>
</div>
))}
</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>
<div className='flex w-full items-center justify-between'>
<p className='font-semibold text-[var(--darkGray)] dark:text-[var(--white)]'>Transactions:</p>
<p>{(block.f_el_transactions ?? 0).toLocaleString()}</p>
</div>
</SmallTableCard>
))}
</SmallTable>
);

return <>{isLargeView ? getContentBlocksDesktop() : getContentBlocksMobile()}</>;
};

export default Blocks;
Loading

0 comments on commit a82c46a

Please sign in to comment.