refactor conversion to use PricesProvider

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 (
     <span

src/providers/Prices.tsx

@@ -1,6 +1,5 @@
 import React, {
   useState,
-  useEffect,
   ReactElement,
   createContext,
   useContext,
@@ -12,18 +11,14 @@ import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import { Logger } from '@oceanprotocol/lib'
 
 interface PricesValue {
-  prices: {
-    [key: string]: number
-  }
+  [key: string]: number
 }
 
 const initialData: PricesValue = {
-  prices: {
-    eur: 0.0,
-    usd: 0.0,
-    eth: 0.0,
-    btc: 0.0
-  }
+  eur: 0.0,
+  usd: 0.0,
+  eth: 0.0,
+  btc: 0.0
 }
 
 const PricesContext = createContext(null)
@@ -36,26 +31,21 @@ export default function PricesProvider({
   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 url = `https://api.coingecko.com/api/v3/simple/price?ids=${tokenId}&vs_currencies=${currencies}`
 
   const [prices, setPrices] = useState(initialData)
 
-  const { data } = useSWR(url, fetchData, {
-    initialData,
-    refreshInterval: 30000, // 30 sec.
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    onSuccess
-  })
-
-  async function onSuccess() {
+  const onSuccess = async (data: { [tokenId]: { [key: string]: number } }) => {
     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 (
     <PricesContext.Provider value={{ prices }}>