Skip to content

Commit

Permalink
Add a tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh committed Sep 26, 2024
1 parent 9d2fd04 commit b10d2ce
Showing 1 changed file with 13 additions and 8 deletions.
21 changes: 13 additions & 8 deletions src/components/sidebar/IndexingStatus/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Stack, Box, Typography } from '@mui/material'
import { Stack, Box, Typography, Tooltip } from '@mui/material'
import { formatDistanceToNow } from 'date-fns'
import { getIndexingStatus } from '@safe-global/safe-gateway-typescript-sdk'
import useAsync from '@/hooks/useAsync'
import useChainId from '@/hooks/useChainId'
Expand Down Expand Up @@ -43,16 +44,20 @@ const IndexingStatus = () => {
? STATUSES.slow
: STATUSES.outOfSync

const time = formatDistanceToNow(data.lastSync, { addSuffix: true })

return (
<Stack direction="row" spacing={2} alignItems="center" px={3} py={1.5}>
<Box width={10} height={10} borderRadius="50%" border={`2px solid var(--color-${status.color}-main)`} />
<Tooltip title={`Last synced with the blockchain ${time}`} placement="right" arrow>
<Stack direction="row" spacing={2} alignItems="center" px={3} py={1.5}>
<Box width={10} height={10} borderRadius="50%" border={`2px solid var(--color-${status.color}-main)`} />

<ExternalLink href={STATUS_PAGE} noIcon flex={1}>
<Typography variant="body2">{status.text}</Typography>
</ExternalLink>
<ExternalLink href={STATUS_PAGE} noIcon flex={1}>
<Typography variant="body2">{status.text}</Typography>
</ExternalLink>

<ExternalLink href={STATUS_PAGE} sx={{ color: 'text.secondary', transform: 'translateY(2px)' }} />
</Stack>
<ExternalLink href={STATUS_PAGE} sx={{ color: 'text.secondary', transform: 'translateY(3px)' }} />
</Stack>
</Tooltip>
)
}

Expand Down

0 comments on commit b10d2ce

Please sign in to comment.