Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
@DimitarTAtanasov
DimitarTAtanasov committed Nov 7, 2024
2 parents 45c93a3 + 75c2dd0 commit 998a5a1
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 46 deletions.
3 changes: 3 additions & 0 deletions src/assets/svgs/icon/expand.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 10 additions & 5 deletions src/components/copyToClipboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import type {
interface ICopyToClipboardProps {
text: string;
toastMessage?: string;
children: (props: { ClipboardIcon: ReactNode; onClick: (e: React.MouseEvent) => void }) => ReactElement;
children: (props: { ClipboardIcon: ReactNode; onClick: (e: React.MouseEvent) => void; text: string }) => ReactElement;
onCopy?: (success: boolean, text: string) => void;
showToast?: boolean;
className?: string;
Expand Down Expand Up @@ -122,8 +122,13 @@ export const CopyToClipboard = memo((props: ICopyToClipboardProps) => {
isCopied,
]);

return children({
ClipboardIcon,
onClick: copyToClipboard,
});
return (
<>
{children({
ClipboardIcon,
onClick: copyToClipboard,
text,
})}
</>
);
});
29 changes: 19 additions & 10 deletions src/views/blockDetails/blockBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
import { Icon } from '@components/icon';
import { ModalJSONViewer } from '@components/modals/modalJSONViewer';
import { Tabs } from '@components/tabs';
import { ToolTip } from '@components/tooltTip';
import { cn } from '@utils/helpers';

import type {
Expand Down Expand Up @@ -157,11 +158,15 @@ export const BlockBody = (props: BlockBodyProps) => {
)
</td>
<td>
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-dropdownArrow"
size={[18]}
/>
<ToolTip text="Expand the view">
<span className="inline-flex">
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-expand"
size={[18]}
/>
</span>
</ToolTip>
</td>
</tr>
);
Expand Down Expand Up @@ -232,11 +237,15 @@ export const BlockBody = (props: BlockBodyProps) => {
</td>
<td>{event.phase.type}</td>
<td>
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-dropdownArrow"
size={[18]}
/>
<ToolTip text="Expand the view">
<span className="inline-flex">
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-expand"
size={[18]}
/>
</span>
</ToolTip>
</td>
</tr>
))
Expand Down
67 changes: 44 additions & 23 deletions src/views/blockDetails/blockHeader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { CopyToClipboard } from '@components/copyToClipboard';
import { Icon } from '@components/icon';
import { ToggleButton } from '@components/toggleButton';
import { useStoreChain } from '@stores';
import { cn } from '@utils/helpers';

import styles from '../styles.module.css';

Expand All @@ -22,22 +23,43 @@ interface DetailRowProps {
label: string;
value: string | undefined;
isCopyable?: boolean;
iconComponent?: React.ReactNode;
}

const DetailRow = (props: DetailRowProps) => {
const { label, value } = props;
const { label, value, iconComponent } = props;

return (
<div className={styles['pd-block-details']}>
<div className={cn(styles['pd-block-details'], 'group')}>
<p>{label}</p>
<div className="flex items-center gap-x-1">
<p>{value}</p>
{iconComponent && <span className="mr-2">{iconComponent}</span>}

{value && (
<CopyToClipboard
className="relative flex items-center"
text={value}
toastMessage={label}
>
{({ ClipboardIcon }) => <>{ClipboardIcon}</>}
{({ ClipboardIcon, text, onClick }) => (
<div className="flex items-center gap-x-2">
<p
className="peer cursor-pointer"
onClick={onClick}
>
{text}
</p>
<div
className={cn(
'transition-opacity duration-200 ease-in-out',
'opacity-100 md:opacity-0',
'group-hover:opacity-100 peer-hover:text-dev-pink-400 md:group-hover:opacity-100',
)}
>
{ClipboardIcon}
</div>
</div>
)}
</CopyToClipboard>
)}
</div>
Expand Down Expand Up @@ -67,12 +89,22 @@ export const BlockHeader = (props: BlockHeaderProps) => {
<div className={styles['pd-block-details']}>
<p>Time stamp</p>
<div className="flex items-center gap-x-2">
<span>{formattedTimestamp}</span>
<button
className="cursor-pointer"
onClick={handleSetCheck}
>
{formattedTimestamp}
</button>
<ToggleButton
handleSetCheck={handleSetCheck}
isChecked={isUTC}
/>
<span>UTC</span>
<button
className="cursor-pointer"
onClick={handleSetCheck}
>
UTC
</button>
</div>
</div>
<div className={styles['pd-block-details']}>
Expand Down Expand Up @@ -103,28 +135,17 @@ export const BlockHeader = (props: BlockHeaderProps) => {
value={headerData.extrinsicRoot}
/>
{headerData.identity && (
<div className={styles['pd-block-details']}>
<p>Validator</p>
<div className={styles['validator']}>
<DetailRow
label="Validator"
value={headerData.identity.address}
iconComponent={(
<Identicon
size={32}
theme="polkadot"
value={headerData.identity.address}
/>
<span>
{headerData.identity.name}
<div className="flex items-center gap-x-2">
<span>{headerData.identity.address}</span>
<CopyToClipboard
text={headerData.identity.address || ''}
toastMessage="Validator Address"
>
{({ ClipboardIcon }) => <>{ClipboardIcon}</>}
</CopyToClipboard>
</div>
</span>
</div>
</div>
)}
/>
)}
<DetailRow
label="Spec Version"
Expand Down
18 changes: 10 additions & 8 deletions src/views/forks/virtualizedList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,26 +214,28 @@ export const VirtualizedList = (props: IVirtualizedListProps) => {
/>
)
}
<div className="truncate">
{item.blockHash}
</div>

<CopyToClipboard
className="hover:text-dev-dev-purple-50"
text={item.blockHash}
toastMessage="Block Hash"
>
{
({ ClipboardIcon }) => (
{({ ClipboardIcon, text, onClick }) => (
<div className="flex items-center gap-x-2 overflow-hidden">
<p
className="cursor-pointer truncate"
onClick={onClick}
>
{text}
</p>
<div
className={cn(
'ml-auto flex items-center justify-center rounded-full dark:bg-dev-green-600/30',
)}
>
{ClipboardIcon}
</div>
)
}
</div>
)}
</CopyToClipboard>
</div>
</Fragment>
Expand Down

0 comments on commit 998a5a1

Please sign in to comment.