mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
0c4673e5d0
* blob page placeholder * txs with blobs list view * tx additional info popup * blob gas info for tx and block * update hints * tx blobs tab * blob details page * add ENV to hide blob txs tab * tx blob fees and adj for tx burnt fees * preliminary tests * blob data convertion * display blob data type in lists * download asset * blob txs in block * tests for blob data preview * fixes * fix tests * support blobs in search * update blob icon * more fixes
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import {
|
|
useColorModeValue,
|
|
chakra,
|
|
Button,
|
|
Skeleton,
|
|
} from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
interface Props {
|
|
isOpen?: boolean;
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
|
|
|
|
const infoBgColor = useColorModeValue('blue.50', 'gray.600');
|
|
|
|
if (isLoading) {
|
|
return <Skeleton boxSize={ 6 } borderRadius="sm" flexShrink={ 0 }/>;
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="unstyled"
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
className={ className }
|
|
ref={ ref }
|
|
background={ isOpen ? infoBgColor : 'unset' }
|
|
borderRadius="8px"
|
|
w="24px"
|
|
h="24px"
|
|
onClick={ onClick }
|
|
cursor="pointer"
|
|
flexShrink={ 0 }
|
|
aria-label="Transaction info"
|
|
>
|
|
<IconSvg
|
|
name="info"
|
|
boxSize={ 5 }
|
|
color="link"
|
|
_hover={{ color: 'link_hovered' }}
|
|
/>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default chakra(React.forwardRef(AdditionalInfoButton));
|