Implement dynamic coinbase endpoint

components/job-form.js

@@ -9,7 +9,7 @@ import styles from '../styles/post.module.css'
 import { useLazyQuery, gql, useMutation } from '@apollo/client'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { usePrice } from './price'
+import { CURRENCY_SYMBOLS, usePrice } from './price'
 import Avatar from './avatar'
 
 Yup.addMethod(Yup.string, 'or', function (schemas, msg) {
@@ -34,13 +34,16 @@ function satsMin2Mo (minute) {
 
 function PriceHint ({ monthly }) {
   const price = usePrice()
+  const { fiatCurrency } = useMe();
+  const fiatSymbol = CURRENCY_SYMBOLS[fiatCurrency]
+
   if (!price) {
     return null
   }
   const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
   const fiat = fixed((price / 100000000) * monthly, 0)
 
-  return <span className='text-muted'>{monthly} sats/mo which is ${fiat}/mo</span>
+  return <span className='text-muted'>{monthly} sats/mo which is {fiatSymbol}{fiat}/mo</span>
 }
 
 // need to recent list items

components/price.js

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { Button } from 'react-bootstrap'
 import useSWR from 'swr'
 import { fixedDecimal } from '../lib/format'
+import { useMe } from './me'
 
 const fetcher = url => fetch(url).then(res => res.json()).catch()
 
@@ -9,16 +10,22 @@ export const PriceContext = React.createContext({
   price: null
 })
 
-const ENDPOINT = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'
+export const CURRENCY_SYMBOLS = {
+  'USD': '$',
+  'EUR': '€'
+}
 
-export async function getPrice () {
-  const data = await fetcher(ENDPOINT)
+const endpoint = (fiat) => `https://api.coinbase.com/v2/prices/BTC-${fiat}/spot`
+
+export async function getPrice (fiat) {
+  const data = await fetcher(endpoint(fiat))
   return data?.data?.amount
 }
 
 export function PriceProvider ({ price, children }) {
+  const { fiatCurrency } = useMe()
   const { data } = useSWR(
-    ENDPOINT,
+    endpoint(fiatCurrency),
     fetcher,
     {
       refreshInterval: 30000
@@ -45,8 +52,9 @@ export default function Price () {
   useEffect(() => {
     setAsSats(localStorage.getItem('asSats'))
   }, [])
-
   const price = usePrice()
+  const { fiatCurrency } = useMe()
+  const fiatSymbol = CURRENCY_SYMBOLS[fiatCurrency];
 
   if (!price) return null
 
@@ -66,7 +74,7 @@ export default function Price () {
   if (asSats === 'yep') {
     return (
       <Button className='text-reset p-0' onClick={handleClick} variant='link'>
-        {fixedDecimal(100000000 / price, 0) + ' sats/$'}
+        {fixedDecimal(100000000 / price, 0) + ` sats/${fiatSymbol}`}
       </Button>
     )
   }
@@ -81,7 +89,7 @@ export default function Price () {
 
   return (
     <Button className='text-reset p-0' onClick={handleClick} variant='link'>
-      {'$' + fixedDecimal(price, 0)}
+      {fiatSymbol + fixedDecimal(price, 0)}
     </Button>
   )
 }