diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 4f308c9db..57d20b131 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -1,11 +1,9 @@ import React, { useEffect, useState, ReactElement } from 'react' -import useSWR from 'swr' -import { fetchData, isBrowser } from '../../../utils' import styles from './Conversion.module.css' import classNames from 'classnames/bind' import { formatCurrency } from '@coingecko/cryptoformat' import { useUserPreferences } from '../../../providers/UserPreferences' -import { useSiteMetadata } from '../../../hooks/useSiteMetadata' +import { usePrices } from '../../../providers/Prices' const cx = classNames.bind(styles) @@ -16,10 +14,7 @@ export default function Conversion({ price: string // expects price in OCEAN, not wei className?: string }): ReactElement { - const { appConfig } = useSiteMetadata() - 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 { prices } = usePrices() const { currency, locale } = useUserPreferences() const [priceConverted, setPriceConverted] = useState('0.00') @@ -29,15 +24,13 @@ export default function Conversion({ [className]: className }) - const onSuccess = async (data: { [tokenId]: { [key: string]: number } }) => { - if (!data) return - if (!price || price === '' || price === '0') { + useEffect(() => { + if (!prices || !price || price === '0') { setPriceConverted('0.00') return } - const values = data[tokenId] - const fiatValue = values[currency.toLowerCase()] + const fiatValue = (prices as any)[currency.toLowerCase()] const converted = fiatValue * Number(price) const convertedFormatted = formatCurrency( converted, @@ -47,23 +40,7 @@ export default function Conversion({ { decimalPlaces: 2 } ) setPriceConverted(convertedFormatted) - } - - 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 - }) + }, [price, prices, currency, locale]) return ( { if (!data) return - Logger.log(`Got new prices. ${JSON.stringify(data)}`) - setPrices(data) + Logger.log(`Got new prices. ${JSON.stringify(data[tokenId])}`) + setPrices(data[tokenId]) } - useEffect(() => { - onSuccess() - }, [data]) + // Fetch new prices periodically with swr + useSWR(url, fetchData, { + refreshInterval: 30000, // 30 sec. + onSuccess + }) return (