Skip to content

F
frontend
Commit f0fd62a0 authored by tom's avatar tom
Browse files
Options

tooltip fixes

parent 730d6ddb
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 56 deletions
toolkit/chakra/tooltip.tsx
View file @ f0fd62a0
......@@ -20,7 +20,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
const {
showArrow: showArrowProp,
onOpenChange,
visual,
variant,
selected,
children,
disabled,
......@@ -38,7 +38,6 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
const [ open, setOpen ] = React.useState(defaultOpen);
const isMobile = useIsMobile();
// TODO @tom2drum merge refs
const triggerRef = useClickAway<HTMLButtonElement>(() => setOpen(false));
const handleOpenChange = React.useCallback((details: { open: boolean }) => {
......@@ -52,7 +51,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
if (disabled || (disableOnMobile && isMobile)) return children;
const defaultShowArrow = visual === 'popover' ? false : true;
const defaultShowArrow = variant === 'popover' ? false : true;
const showArrow = showArrowProp !== undefined ? showArrowProp : defaultShowArrow;
const positioning = {
......@@ -70,7 +69,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
open={ open }
onOpenChange={ isMobile ? undefined : handleOpenChange }
closeOnClick={ false }
visual={ visual }
variant={ variant }
lazyMount={ lazyMount }
unmountOnExit={ unmountOnExit }
{ ...rest }
......
toolkit/theme/recipes/tooltip.recipe.ts
View file @ f0fd62a0
......@@ -34,7 +34,7 @@ export const recipe = defineSlotRecipe({
},
},
variants: {
visual: {
variant: {
regular: {
content: {
'--tooltip-bg': 'colors.tooltip.bg',
......@@ -79,6 +79,6 @@ export const recipe = defineSlotRecipe({
},
},
defaultVariants: {
visual: 'regular',
variant: 'regular',
},
});
ui/block/BlockDetails.tsx
View file @ f0fd62a0
......@@ -517,13 +517,11 @@ const BlockDetails = ({ query }: Props) => {
</Skeleton>
{ !txFees.isEqualTo(ZERO) && (
<Tooltip content="Burnt fees / Txn fees * 100%">
<Box>
<Utilization
ml={ 4 }
value={ burntFees.dividedBy(txFees).toNumber() }
isLoading={ isPlaceholderData }
/>
</Box>
</Tooltip>
) }
</DetailsInfoItem.Value>
......
ui/block/details/BlockDetailsBlobInfo.tsx
View file @ f0fd62a0
......@@ -73,9 +73,7 @@ const BlockDetailsBlobInfo = ({ data }: Props) => {
{ burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
{ !blobFees.isEqualTo(ZERO) && (
<Tooltip content="Blob burnt fees / Txn fees * 100%">
<div>
<Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
</div>
</Tooltip>
) }
</DetailsInfoItem.Value>
......
ui/blocks/BlocksTableItem.tsx
View file @ f0fd62a0
import { Flex, Box } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -121,9 +121,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
</Skeleton>
</Flex>
<Tooltip content="Burnt fees / Txn fees * 100%" disabled={ isLoading }>
<Box w="min-content">
<Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() } isLoading={ isLoading }/>
</Box>
<Utilization mt={ 2 } w="min-content" value={ burntFees.div(txFees).toNumber() } isLoading={ isLoading }/>
</Tooltip>
</TableCell>
) }
......
ui/pages/Chakra.tsx
View file @ f0fd62a0
......@@ -28,6 +28,7 @@ import ButtonShowcase from 'ui/showcases/Button';
import LinksShowcase from 'ui/showcases/Links';
import PaginationShowcase from 'ui/showcases/Pagination';
import TabsShowcase from 'ui/showcases/Tabs';
import TooltipsShowcase from 'ui/showcases/Tooltip';
const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
......@@ -58,6 +59,7 @@ const ChakraShowcases = () => {
<TabsTrigger value="links">Links</TabsTrigger>
<TabsTrigger value="pagination">Pagination</TabsTrigger>
<TabsTrigger value="tabs">Tabs</TabsTrigger>
<TabsTrigger value="tooltips">Tooltips</TabsTrigger>
<TabsTrigger value="unsorted">Unsorted</TabsTrigger>
</TabsList>
<AlertsShowcase/>
......@@ -66,6 +68,7 @@ const ChakraShowcases = () => {
<LinksShowcase/>
<TabsShowcase/>
<PaginationShowcase/>
<TooltipsShowcase/>
<TabsContent value="unsorted">
<VStack align="flex-start" gap={ 6 }>
......@@ -153,18 +156,6 @@ const ChakraShowcases = () => {
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Tooltips</Heading>
<HStack gap={ 4 }>
<Tooltip content="Tooltip content">
<span>Default</span>
</Tooltip>
<Tooltip content="Tooltip content" visual="navigation">
<span>Navigation</span>
</Tooltip>
</HStack>
</section>
<section>
<Heading textStyle="heading.md" mb={ 2 }>Progress Circle</Heading>
<HStack gap={ 4 }>
......
ui/shared/GasUsedToTargetRatio.tsx
View file @ f0fd62a0
......@@ -11,7 +11,7 @@ type Props = {
const GasUsedToTargetRatio = ({ value, isLoading }: Props) => {
return (
<Tooltip content="% of Gas Target">
<Skeleton color="text_secondary" loading={ isLoading }>
<Skeleton color="text.secondary" loading={ isLoading }>
<span>{ (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }%</span>
</Skeleton>
</Tooltip>
......
ui/shared/SocketNewItemsNotice.tsx
View file @ f0fd62a0
import { Link, Text, chakra, Table } from '@chakra-ui/react';
import { Text, chakra } from '@chakra-ui/react';
import React from 'react';
import { Alert } from 'toolkit/chakra/alert';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
interface InjectedProps {
content: React.ReactNode;
......@@ -56,7 +58,7 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ
const content = !isLoading ? (
<Alert
className={ className }
visual="warning_table"
status="warning_table"
px={ 4 }
py="6px"
fontSize="sm"
......@@ -82,7 +84,7 @@ export const Desktop = ({ ...props }: Props) => {
my={ props.isLoading ? '6px' : 0 }
{ ...props }
>
{ ({ content }) => <Table.Row><Table.Cell colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</Table.Cell></Table.Row> }
{ ({ content }) => <TableRow><TableCell colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</TableCell></TableRow> }
</SocketNewItemsNotice>
);
};
......
ui/shared/Utilization/Utilization.tsx
View file @ f0fd62a0
import { Box, Flex, chakra } from '@chakra-ui/react';
import type { HTMLChakraProps } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { clamp } from 'es-toolkit';
import React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton';
interface Props {
className?: string;
interface Props extends Omit<HTMLChakraProps<'div'>, 'direction'> {
value: number;
colorScheme?: 'green' | 'gray';
isLoading?: boolean;
......@@ -13,13 +13,13 @@ interface Props {
const WIDTH = 50;
const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Props) => {
const Utilization = ({ value, colorScheme = 'green', isLoading, ...rest }: Props) => {
const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString(undefined, { maximumFractionDigits: 2 }) + '%';
const colorGrayScheme = { _light: 'gray.500', _dark: 'gray.400' };
const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
return (
<Flex className={ className } alignItems="center" columnGap={ 2 }>
<Flex alignItems="center" columnGap={ 2 } { ...rest }>
<Skeleton loading={ isLoading } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
<Box bg={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} h="100%">
<Box bg={ color } w={ valueString } h="100%"/>
......@@ -34,4 +34,4 @@ const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Pro
);
};
export default React.memo(chakra(Utilization));
export default React.memo(Utilization);
ui/shared/block/BlockGasUsed.tsx
View file @ f0fd62a0
import { chakra, Box } from '@chakra-ui/react';
import { chakra } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -31,14 +31,12 @@ const BlockGasUsed = ({ className, gasUsed, gasLimit, gasTarget, isLoading }: Pr
return (
<>
<Tooltip content="Gas Used %" disabled={ isLoading }>
<Box>
<Utilization
colorScheme="gray"
value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
isLoading={ isLoading }
className={ className }
/>
</Box>
</Tooltip>
{ gasTarget && (
<>
......
ui/shared/entities/ens/EnsEntity.tsx
View file @ f0fd62a0
......@@ -78,7 +78,7 @@ const Icon = (props: IconProps) => {
return (
<Tooltip
content={ content }
visual="popover"
variant="popover"
positioning={{
placement: 'bottom-start',
}}
......
ui/showcases/Tooltip.tsx 0 → 100644
View file @ f0fd62a0
import React from 'react';
import { Tooltip } from 'toolkit/chakra/tooltip';
import Utilization from 'ui/shared/Utilization/Utilization';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const TooltipsShowcase = () => {
return (
<Container value="tooltips">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack>
<Sample label="variant: regular">
<Tooltip content="Tooltip content">
<span>Default</span>
</Tooltip>
<Tooltip content="Tooltip content">
<Utilization value={ 0.5 }/>
</Tooltip>
</Sample>
<Sample label="variant: navigation">
<Tooltip content="Tooltip content" variant="navigation">
<span>Default</span>
</Tooltip>
</Sample>
<Sample label="variant: popover">
<Tooltip content="Tooltip content" variant="popover">
<span>Default</span>
</Tooltip>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(TooltipsShowcase);
ui/snippets/header/alerts/MaintenanceAlert.tsx
View file @ f0fd62a0
......@@ -10,7 +10,7 @@ const MaintenanceAlert = () => {
}
return (
<Alert visual="neutral">
<Alert status="neutral">
<Box
dangerouslySetInnerHTML={{ __html: config.UI.maintenanceAlert.message }}
css={{
......
ui/snippets/navigation/horizontal/NavLinkGroup.tsx
View file @ f0fd62a0
......@@ -48,7 +48,7 @@ const NavLinkGroup = ({ item }: Props) => {
return (
<Tooltip
visual="popover"
variant="popover"
content={ content }
onOpenChange={ onOpenChange }
lazyMount={ false }
......
ui/snippets/navigation/vertical/NavLink.tsx
View file @ f0fd62a0
......@@ -59,7 +59,7 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
showArrow={ false }
disabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
positioning={{ placement: 'right', offset: { crossAxis: 0, mainAxis: 20 } }}
visual="navigation"
variant="navigation"
contentProps={{
color: isInternalLink && item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg.hover',
}}
......
ui/snippets/navigation/vertical/NavLinkGroup.tsx
View file @ f0fd62a0
......@@ -58,7 +58,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
// should not be lazy to help google indexing pages
lazyMount={ false }
visual="popover"
variant="popover"
interactive
>
<Box
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment