stacker.news/components/hidden-wallet-summary.js

25 lines
874 B
JavaScript

import { useState, useRef, useEffect } from 'react'
import { abbrNum, numWithUnits } from '@/lib/format'
import { useMe } from './me'
export default function HiddenWalletSummary ({ abbreviate, fixedWidth }) {
const me = useMe()
const [hover, setHover] = useState(false)
// prevent layout shifts when hovering by fixing width to initial rendered width
const ref = useRef()
const [width, setWidth] = useState(undefined)
useEffect(() => {
setWidth(ref.current?.offsetWidth)
}, [])
return (
<span
ref={ref} style={{ width: fixedWidth ? width : undefined }}
className='text-monospace' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
>
{hover ? (abbreviate ? abbrNum(me.privates?.sats) : numWithUnits(me.privates?.sats, { abbreviate: false, format: true })) : '******'}
</span>
)
}