Skip to content

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

average -> normal

parent 1bc0b94f
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 40 deletions
ui/shared/GasInfoTooltipContent/GasInfoRow.tsx
View file @ 18b7f4b7
import { GridItem, chakra, useColorModeValue } from '@chakra-ui/react'; import { GridItem, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { GasPriceInfo } from 'types/api/stats'; import type { GasPriceInfo } from 'types/api/stats';
...@@ -11,8 +11,6 @@ interface Props { ...@@ -11,8 +11,6 @@ interface Props {
} }
const GasInfoRow = ({ name, info }: Props) => { const GasInfoRow = ({ name, info }: Props) => {
const labelColor = useColorModeValue('blue.100', 'blue.600');
const content = (() => { const content = (() => {
if (!info || info.price === null) { if (!info || info.price === null) {
return 'N/A'; return 'N/A';
...@@ -32,8 +30,8 @@ const GasInfoRow = ({ name, info }: Props) => { ...@@ -32,8 +30,8 @@ const GasInfoRow = ({ name, info }: Props) => {
return ( return (
<> <>
<GridItem color={ labelColor }>{ name }</GridItem> <GridItem color="blue.100">{ name }</GridItem>
<GridItem textAlign="right">{ content }</GridItem> <GridItem color="text" textAlign="right">{ content }</GridItem>
</> </>
); );
}; };
......
ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx
View file @ 18b7f4b7
import { Grid, GridItem } from '@chakra-ui/react'; import { DarkMode, Grid, GridItem } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { HomeStats } from 'types/api/stats'; import type { HomeStats } from 'types/api/stats';
...@@ -20,21 +20,23 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => { ...@@ -20,21 +20,23 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
} }
return ( return (
<Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }> <DarkMode>
{ data.gas_price_updated_at && ( <Grid templateColumns="repeat(2, max-content)" rowGap={ 2 } columnGap={ 4 } padding={ 4 } fontSize="xs" lineHeight={ 4 }>
<> { data.gas_price_updated_at && (
<GridItem color="text_secondary">Last update</GridItem> <>
<GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }> <GridItem color="text_secondary">Last update</GridItem>
{ dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') } <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
{ data.gas_prices_update_in !== 0 && { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
{ data.gas_prices_update_in !== 0 &&
<GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> } <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
</GridItem> </GridItem>
</> </>
) } ) }
<GasInfoRow name="Slow" info={ data.gas_prices.slow }/> <GasInfoRow name="Slow" info={ data.gas_prices.slow }/>
<GasInfoRow name="Average" info={ data.gas_prices.average }/> <GasInfoRow name="Normal" info={ data.gas_prices.average }/>
<GasInfoRow name="Fast" info={ data.gas_prices.fast }/> <GasInfoRow name="Fast" info={ data.gas_prices.fast }/>
</Grid> </Grid>
</DarkMode>
); );
}; };
......
ui/snippets/topBar/TopBarStats.tsx
View file @ 18b7f4b7
import { Flex, LightMode, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react'; import { Flex, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
...@@ -79,26 +79,24 @@ const TopBarStats = () => { ...@@ -79,26 +79,24 @@ const TopBarStats = () => {
{ data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && ( { data?.gas_prices && data.gas_prices.average !== null && config.UI.homepage.showGasTracker && (
<Skeleton isLoaded={ !isPlaceholderData }> <Skeleton isLoaded={ !isPlaceholderData }>
<chakra.span color="text_secondary">Gas </chakra.span> <chakra.span color="text_secondary">Gas </chakra.span>
<LightMode> <Tooltip
<Tooltip label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> }
label={ <GasInfoTooltipContent data={ data } dataUpdatedAt={ dataUpdatedAt }/> } hasArrow={ false }
hasArrow={ false } borderRadius="md"
borderRadius="md" offset={ [ 0, 16 ] }
offset={ [ 0, 16 ] } bgColor="blackAlpha.900"
bgColor="blackAlpha.900" p={ 0 }
p={ 0 } isOpen={ isOpen }
isOpen={ isOpen } >
<Link
_hover={{ textDecoration: 'none', color: 'link_hovered' }}
onClick={ handleClick }
onMouseEnter={ onOpen }
onMouseLeave={ onClose }
> >
<Link { data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
_hover={{ textDecoration: 'none', color: 'link_hovered' }} </Link>
onClick={ handleClick } </Tooltip>
onMouseEnter={ onOpen }
onMouseLeave={ onClose }
>
{ data.gas_prices.average.fiat_price ? `$${ data.gas_prices.average.fiat_price }` : `${ data.gas_prices.average.price } Gwei` }
</Link>
</Tooltip>
</LightMode>
</Skeleton> </Skeleton>
) } ) }
</Flex> </Flex>
......
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