mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
24 lines
723 B
TypeScript
24 lines
723 B
TypeScript
import React, { ReactElement } from 'react'
|
|
import Tooltip from '@shared/atoms/Tooltip'
|
|
import Status from '@shared/atoms/Status'
|
|
import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
|
|
import styles from './SyncStatus.module.css'
|
|
|
|
export default function SyncStatus(): ReactElement {
|
|
const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
|
|
|
|
return (
|
|
<div className={styles.sync}>
|
|
<Tooltip
|
|
content={`Synced to Ethereum block ${blockGraph} (out of ${blockHead})`}
|
|
>
|
|
<Status
|
|
className={styles.status}
|
|
state={isGraphSynced ? 'success' : 'error'}
|
|
/>
|
|
<span className={styles.text}>{blockGraph}</span>
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
}
|