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 (
  • @@ -12,7 +14,7 @@ export default function Currency(): ReactElement { label="Currency" help="Select your preferred currency." type="select" - options={['EUR', 'USD']} + options={appConfig.currencies} value={currency} onChange={(e: ChangeEvent) => setCurrency(e.target.value) diff --git a/src/hooks/useSiteMetadata.ts b/src/hooks/useSiteMetadata.ts index a0f6da708..10b599516 100644 --- a/src/hooks/useSiteMetadata.ts +++ b/src/hooks/useSiteMetadata.ts @@ -18,6 +18,7 @@ const query = graphql` network marketFeeAddress marketFeeAmount + currencies } } } diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx index ef5b9267a..0bb7fe5ff 100644 --- a/src/providers/UserPreferences.tsx +++ b/src/providers/UserPreferences.tsx @@ -7,11 +7,9 @@ import React, { useEffect } from 'react' -declare type Currency = 'EUR' | 'USD' - interface UserPreferencesValue { debug: boolean - currency: Currency + currency: string setDebug?: (value: boolean) => void setCurrency?: (value: string) => void } @@ -45,7 +43,7 @@ function UserPreferencesProvider({ const [debug, setDebug] = useState( (localStorage && localStorage.debug) || false ) - const [currency, setCurrency] = useState( + const [currency, setCurrency] = useState( (localStorage && localStorage.currency) || 'EUR' )