mirror of
https://github.com/oceanprotocol/market.git
synced 2024-09-28 03:58:59 +02:00
refactor conversion to use PricesProvider
This commit is contained in:
parent
47bd08e7a9
commit
8fb4f258db
@ -1,11 +1,9 @@
|
|||||||
import React, { useEffect, useState, ReactElement } from 'react'
|
import React, { useEffect, useState, ReactElement } from 'react'
|
||||||
import useSWR from 'swr'
|
|
||||||
import { fetchData, isBrowser } from '../../../utils'
|
|
||||||
import styles from './Conversion.module.css'
|
import styles from './Conversion.module.css'
|
||||||
import classNames from 'classnames/bind'
|
import classNames from 'classnames/bind'
|
||||||
import { formatCurrency } from '@coingecko/cryptoformat'
|
import { formatCurrency } from '@coingecko/cryptoformat'
|
||||||
import { useUserPreferences } from '../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../providers/UserPreferences'
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
import { usePrices } from '../../../providers/Prices'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
@ -16,10 +14,7 @@ export default function Conversion({
|
|||||||
price: string // expects price in OCEAN, not wei
|
price: string // expects price in OCEAN, not wei
|
||||||
className?: string
|
className?: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { appConfig } = useSiteMetadata()
|
const { prices } = usePrices()
|
||||||
const tokenId = 'ocean-protocol'
|
|
||||||
const currencies = appConfig.currencies.join(',') // comma-separated list
|
|
||||||
const url = `https://api.coingecko.com/api/v3/simple/price?ids=${tokenId}&vs_currencies=${currencies}&include_24hr_change=true`
|
|
||||||
const { currency, locale } = useUserPreferences()
|
const { currency, locale } = useUserPreferences()
|
||||||
|
|
||||||
const [priceConverted, setPriceConverted] = useState('0.00')
|
const [priceConverted, setPriceConverted] = useState('0.00')
|
||||||
@ -29,15 +24,13 @@ export default function Conversion({
|
|||||||
[className]: className
|
[className]: className
|
||||||
})
|
})
|
||||||
|
|
||||||
const onSuccess = async (data: { [tokenId]: { [key: string]: number } }) => {
|
useEffect(() => {
|
||||||
if (!data) return
|
if (!prices || !price || price === '0') {
|
||||||
if (!price || price === '' || price === '0') {
|
|
||||||
setPriceConverted('0.00')
|
setPriceConverted('0.00')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const values = data[tokenId]
|
const fiatValue = (prices as any)[currency.toLowerCase()]
|
||||||
const fiatValue = values[currency.toLowerCase()]
|
|
||||||
const converted = fiatValue * Number(price)
|
const converted = fiatValue * Number(price)
|
||||||
const convertedFormatted = formatCurrency(
|
const convertedFormatted = formatCurrency(
|
||||||
converted,
|
converted,
|
||||||
@ -47,23 +40,7 @@ export default function Conversion({
|
|||||||
{ decimalPlaces: 2 }
|
{ decimalPlaces: 2 }
|
||||||
)
|
)
|
||||||
setPriceConverted(convertedFormatted)
|
setPriceConverted(convertedFormatted)
|
||||||
}
|
}, [price, prices, currency, locale])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
async function getData() {
|
|
||||||
const data = await fetchData(url)
|
|
||||||
await onSuccess(data)
|
|
||||||
}
|
|
||||||
if (isBrowser && price !== '0') {
|
|
||||||
getData()
|
|
||||||
}
|
|
||||||
}, [price, currency, url])
|
|
||||||
|
|
||||||
// Fetch new prices periodically with swr
|
|
||||||
useSWR(url, fetchData, {
|
|
||||||
refreshInterval: 30000, // 30 sec.
|
|
||||||
onSuccess
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import React, {
|
import React, {
|
||||||
useState,
|
useState,
|
||||||
useEffect,
|
|
||||||
ReactElement,
|
ReactElement,
|
||||||
createContext,
|
createContext,
|
||||||
useContext,
|
useContext,
|
||||||
@ -12,18 +11,14 @@ import { useSiteMetadata } from '../hooks/useSiteMetadata'
|
|||||||
import { Logger } from '@oceanprotocol/lib'
|
import { Logger } from '@oceanprotocol/lib'
|
||||||
|
|
||||||
interface PricesValue {
|
interface PricesValue {
|
||||||
prices: {
|
|
||||||
[key: string]: number
|
[key: string]: number
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialData: PricesValue = {
|
const initialData: PricesValue = {
|
||||||
prices: {
|
|
||||||
eur: 0.0,
|
eur: 0.0,
|
||||||
usd: 0.0,
|
usd: 0.0,
|
||||||
eth: 0.0,
|
eth: 0.0,
|
||||||
btc: 0.0
|
btc: 0.0
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const PricesContext = createContext(null)
|
const PricesContext = createContext(null)
|
||||||
@ -36,26 +31,21 @@ export default function PricesProvider({
|
|||||||
const { appConfig } = useSiteMetadata()
|
const { appConfig } = useSiteMetadata()
|
||||||
const tokenId = 'ocean-protocol'
|
const tokenId = 'ocean-protocol'
|
||||||
const currencies = appConfig.currencies.join(',') // comma-separated list
|
const currencies = appConfig.currencies.join(',') // comma-separated list
|
||||||
const url = `https://api.coingecko.com/api/v3/simple/price?ids=${tokenId}&vs_currencies=${currencies}&include_24hr_change=true`
|
const url = `https://api.coingecko.com/api/v3/simple/price?ids=${tokenId}&vs_currencies=${currencies}`
|
||||||
|
|
||||||
const [prices, setPrices] = useState(initialData)
|
const [prices, setPrices] = useState(initialData)
|
||||||
|
|
||||||
const { data } = useSWR(url, fetchData, {
|
const onSuccess = async (data: { [tokenId]: { [key: string]: number } }) => {
|
||||||
initialData,
|
|
||||||
refreshInterval: 30000, // 30 sec.
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
||||||
onSuccess
|
|
||||||
})
|
|
||||||
|
|
||||||
async function onSuccess() {
|
|
||||||
if (!data) return
|
if (!data) return
|
||||||
Logger.log(`Got new prices. ${JSON.stringify(data)}`)
|
Logger.log(`Got new prices. ${JSON.stringify(data[tokenId])}`)
|
||||||
setPrices(data)
|
setPrices(data[tokenId])
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
// Fetch new prices periodically with swr
|
||||||
onSuccess()
|
useSWR(url, fetchData, {
|
||||||
}, [data])
|
refreshInterval: 30000, // 30 sec.
|
||||||
|
onSuccess
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PricesContext.Provider value={{ prices }}>
|
<PricesContext.Provider value={{ prices }}>
|
||||||
|
Loading…
Reference in New Issue
Block a user