2019-02-26 15:22:12 +01:00
|
|
|
import React from 'react'
|
|
|
|
import cx from 'classnames'
|
2019-07-11 15:45:49 +02:00
|
|
|
import { User, Market } from '../../../context'
|
2019-02-26 15:22:12 +01:00
|
|
|
import styles from './Indicator.module.scss'
|
|
|
|
|
|
|
|
const Indicator = ({
|
|
|
|
className,
|
2019-03-01 19:43:50 +01:00
|
|
|
togglePopover,
|
|
|
|
forwardedRef
|
2019-02-26 15:22:12 +01:00
|
|
|
}: {
|
|
|
|
className?: string
|
2019-02-28 17:12:48 +01:00
|
|
|
togglePopover: () => void
|
2019-03-01 20:21:00 +01:00
|
|
|
forwardedRef: (ref: HTMLElement | null) => void
|
2019-02-26 15:22:12 +01:00
|
|
|
}) => (
|
|
|
|
<div
|
|
|
|
className={cx(styles.status, className)}
|
2019-02-27 00:26:53 +01:00
|
|
|
onMouseOver={togglePopover}
|
|
|
|
onMouseOut={togglePopover}
|
2019-03-01 19:43:50 +01:00
|
|
|
ref={forwardedRef}
|
2019-02-26 15:22:12 +01:00
|
|
|
>
|
|
|
|
<User.Consumer>
|
2020-05-19 10:36:18 +02:00
|
|
|
{(user) => (
|
2019-07-11 15:45:49 +02:00
|
|
|
<Market.Consumer>
|
2020-05-19 10:36:18 +02:00
|
|
|
{(market) =>
|
2019-07-11 15:45:49 +02:00
|
|
|
!user.isLogged || !market.networkMatch ? (
|
|
|
|
<span
|
|
|
|
className={styles.statusIndicatorCloseEnough}
|
|
|
|
/>
|
|
|
|
) : user.isLogged ? (
|
|
|
|
<span className={styles.statusIndicatorActive} />
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</Market.Consumer>
|
|
|
|
)}
|
2019-02-26 15:22:12 +01:00
|
|
|
</User.Consumer>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
|
|
|
|
export default Indicator
|