diff --git a/app.config.js b/app.config.js index d6e6864ee..19724cd17 100644 --- a/app.config.js +++ b/app.config.js @@ -4,5 +4,8 @@ module.exports = { marketFeeAddress: process.env.GATSBY_MARKET_FEE_ADDRESS || '0x903322C7E45A60d7c8C3EA236c5beA9Af86310c7', - marketFeeAmount: process.env.GATSBY_MARKET_FEE_AMOUNT || '0.1' // in % + marketFeeAmount: process.env.GATSBY_MARKET_FEE_AMOUNT || '0.1', // in % + // Used for conversion display, can be whatever coingecko API supports + // see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies + currencies: ['EUR', 'USD', 'ETH', 'BTC'] } diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 832956155..98456c7cd 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -5,12 +5,10 @@ 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' const cx = classNames.bind(styles) -const currencies = 'EUR,USD' // comma-separated list -const url = `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true` - export default function Conversion({ price, update = true, @@ -20,27 +18,30 @@ export default function Conversion({ update?: boolean className?: string }): ReactElement { - const [priceFiat, setPriceFiat] = useState('0.00') + 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 { currency } = useUserPreferences() + const [priceConverted, setPriceConverted] = useState('0.00') + const styleClasses = cx({ conversion: true, [className]: className }) - const onSuccess = async (data: { - 'ocean-protocol': { eur: number; usd: number } - }) => { + const onSuccess = async (data: { [tokenId]: { [key: string]: number } }) => { if (!data) return if (!price || price === '' || price === '0') { - setPriceFiat('0.00') + setPriceConverted('0.00') return } - const { eur, usd } = data['ocean-protocol'] - const fiatValue = currency === 'EUR' ? eur : usd + const values = data[tokenId] + const fiatValue = values[currency.toLowerCase()] const converted = fiatValue * Number(price) - setPriceFiat(`${formatCurrency(converted, currency, undefined, true)}`) + setPriceConverted(`${formatCurrency(converted, currency, undefined, true)}`) } useEffect(() => { @@ -66,7 +67,7 @@ export default function Conversion({ className={styleClasses} title="Approximation based on current spot price on Coingecko" > - ≈ {priceFiat} {currency} + ≈ {priceConverted} {currency} ) } diff --git a/src/components/molecules/UserPreferences/Currency.tsx b/src/components/molecules/UserPreferences/Currency.tsx index aa83f3c04..3878345c6 100644 --- a/src/components/molecules/UserPreferences/Currency.tsx +++ b/src/components/molecules/UserPreferences/Currency.tsx @@ -1,9 +1,11 @@ import React, { ReactElement, ChangeEvent } from 'react' +import { useSiteMetadata } from '../../../hooks/useSiteMetadata' import { useUserPreferences } from '../../../providers/UserPreferences' import Input from '../../atoms/Input' export default function Currency(): ReactElement { const { currency, setCurrency } = useUserPreferences() + const { appConfig } = useSiteMetadata() return (