configurable currencies

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']
 }

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}
     </span>
   )
 }

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 (
     <li>
@@ -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<HTMLSelectElement>) =>
           setCurrency(e.target.value)

src/hooks/useSiteMetadata.ts

@@ -18,6 +18,7 @@ const query = graphql`
           network
           marketFeeAddress
           marketFeeAmount
+          currencies
         }
       }
     }

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<boolean>(
     (localStorage && localStorage.debug) || false
   )
-  const [currency, setCurrency] = useState<Currency>(
+  const [currency, setCurrency] = useState<string>(
     (localStorage && localStorage.currency) || 'EUR'
   )