stacker.news/components/price.js

88 lines
1.9 KiB
JavaScript
Raw Normal View History

2021-11-28 17:29:17 +00:00
import React, { useContext, useEffect, useState } from 'react'
2021-04-29 15:56:28 +00:00
import { Button } from 'react-bootstrap'
2021-04-12 18:05:09 +00:00
import useSWR from 'swr'
2022-07-12 16:40:44 +00:00
const fetcher = url => fetch(url).then(res => res.json()).catch()
2021-04-12 18:05:09 +00:00
2021-11-28 17:29:17 +00:00
export const PriceContext = React.createContext({
price: null
})
const ENDPOINT = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'
2021-04-29 15:56:28 +00:00
2021-11-28 17:29:17 +00:00
export async function getPrice () {
const data = await fetcher(ENDPOINT)
return data?.data?.amount
}
export function PriceProvider ({ price, children }) {
2021-04-28 19:30:14 +00:00
const { data } = useSWR(
2021-11-28 17:29:17 +00:00
ENDPOINT,
2021-04-28 19:30:14 +00:00
fetcher,
{
refreshInterval: 30000
})
2021-04-12 18:05:09 +00:00
2021-11-28 17:29:17 +00:00
const contextValue = {
price: data?.data?.amount || price
}
return (
<PriceContext.Provider value={contextValue}>
{children}
</PriceContext.Provider>
)
}
export function usePrice () {
const { price } = useContext(PriceContext)
return price
}
export default function Price () {
const [asSats, setAsSats] = useState(undefined)
useEffect(() => {
2021-11-28 17:29:17 +00:00
setAsSats(localStorage.getItem('asSats'))
}, [])
const price = usePrice()
2021-11-28 17:29:17 +00:00
if (!price) return null
2021-04-12 18:05:09 +00:00
2021-04-29 18:43:17 +00:00
const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
const handleClick = () => {
2021-12-05 17:37:55 +00:00
if (asSats === 'yep') {
localStorage.setItem('asSats', '1btc')
setAsSats('1btc')
} else if (asSats === '1btc') {
2021-04-29 18:43:17 +00:00
localStorage.removeItem('asSats')
setAsSats(undefined)
} else {
localStorage.setItem('asSats', 'yep')
setAsSats('yep')
}
}
2021-12-05 17:37:55 +00:00
if (asSats === 'yep') {
2021-04-29 15:56:28 +00:00
return (
2022-03-08 20:51:06 +00:00
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
2021-11-28 17:29:17 +00:00
{fixed(100000000 / price, 0) + ' sats/$'}
2021-04-29 15:56:28 +00:00
</Button>
)
}
2021-12-05 17:37:55 +00:00
if (asSats === '1btc') {
return (
2022-03-08 20:51:06 +00:00
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
2021-12-05 17:37:55 +00:00
1sat=1sat
</Button>
)
}
2021-04-29 15:56:28 +00:00
return (
2022-03-08 20:51:06 +00:00
<Button className='text-reset p-0' onClick={handleClick} variant='link'>
2021-12-05 17:37:55 +00:00
{'$' + fixed(price, 0)}
2021-04-29 15:56:28 +00:00
</Button>
)
2021-04-12 18:05:09 +00:00
}