diff --git a/api/ssrApollo.js b/api/ssrApollo.js
index 3335cde1..3c3097c6 100644
--- a/api/ssrApollo.js
+++ b/api/ssrApollo.js
@@ -43,7 +43,7 @@ export function getGetServerSideProps (query, variables = null, notFoundFunc, re
query: ME_SSR
})
- const price = await getPrice()
+ const price = await getPrice(me?.fiatCurrency)
// we want to use client-side cache
if (nodata && query) {
diff --git a/api/typeDefs/user.js b/api/typeDefs/user.js
index 8e580219..b62a8cf1 100644
--- a/api/typeDefs/user.js
+++ b/api/typeDefs/user.js
@@ -29,7 +29,7 @@ export default gql`
extend type Mutation {
setName(name: String!): Boolean
- setSettings(tipDefault: Int!, noteItemSats: Boolean!, noteEarning: Boolean!,
+ setSettings(tipDefault: Int!, fiatCurrency: String!, noteItemSats: Boolean!, noteEarning: Boolean!,
noteAllDescendants: Boolean!, noteMentions: Boolean!, noteDeposits: Boolean!,
noteInvites: Boolean!, noteJobIndicator: Boolean!, hideInvoiceDesc: Boolean!,
wildWestMode: Boolean!, greeterMode: Boolean!): User
@@ -59,6 +59,7 @@ export default gql`
hasNewNotes: Boolean!
hasInvites: Boolean!
tipDefault: Int!
+ fiatCurrency: String!
bio: Item
bioId: Int
photoId: Int
diff --git a/components/form.js b/components/form.js
index e2a2a322..233c28ad 100644
--- a/components/form.js
+++ b/components/form.js
@@ -6,7 +6,7 @@ import { Formik, Form as FormikForm, useFormikContext, useField, FieldArray } fr
import React, { useEffect, useRef, useState } from 'react'
import copy from 'clipboard-copy'
import Thumb from '../svgs/thumb-up-fill.svg'
-import { Col, Dropdown, Nav } from 'react-bootstrap'
+import { Col, Dropdown as BootstrapDropdown, Nav } from 'react-bootstrap'
import Markdown from '../svgs/markdown-line.svg'
import styles from './form.module.css'
import Text from '../components/text'
@@ -269,10 +269,10 @@ export function InputUserSuggest ({ label, groupClassName, ...props }) {
}
}}
/>
- 0}>
-
+ 0}>
+
{suggestions.array.map((v, i) =>
- {
@@ -281,9 +281,9 @@ export function InputUserSuggest ({ label, groupClassName, ...props }) {
}}
>
{v.name}
- )}
-
-
+ )}
+
+
)
}
@@ -429,3 +429,21 @@ export function SyncForm ({
)
}
+
+export function Dropdown ({ label, items, groupClassName, ...props }) {
+ const [field, _, helper] = useField({ ...props, type: 'input' })
+ return (
+
+
+
+ {field.value}
+
+
+ {items.map(item => (
+ helper.setValue(item)}>{item}
+ ))}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/job-form.js b/components/job-form.js
index 46ae30be..bc277a83 100644
--- a/components/job-form.js
+++ b/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'
import BootstrapForm from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert'
@@ -36,13 +36,16 @@ function satsMin2Mo (minute) {
function PriceHint ({ monthly }) {
const price = usePrice()
+ const { fiatCurrency } = useMe();
+ const fiatSymbol = CURRENCY_SYMBOLS[fiatCurrency]
+
if (!price || !monthly) {
return null
}
const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
const fiat = fixed((price / 100000000) * monthly, 0)
- return {monthly} sats/mo which is ${fiat}/mo
+ return {monthly} sats/mo which is {fiatSymbol}{fiat}/mo
}
// need to recent list items
diff --git a/components/price.js b/components/price.js
index 34350d64..4e4fb383 100644
--- a/components/price.js
+++ b/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,26 @@ export const PriceContext = React.createContext({
price: null
})
-const ENDPOINT = 'https://api.coinbase.com/v2/prices/BTC-USD/spot'
+export const CURRENCY_SYMBOLS = {
+ 'AUD': '$',
+ 'CAD': '$',
+ 'EUR': '€',
+ 'GBP': '£',
+ 'USD': '$',
+ 'NZD': '$'
+}
-export async function getPrice () {
- const data = await fetcher(ENDPOINT)
+const endpoint = (fiat) => `https://api.coinbase.com/v2/prices/BTC-${fiat ?? 'USD'}/spot`
+
+export async function getPrice (fiat) {
+ const data = await fetcher(endpoint(fiat))
return data?.data?.amount
}
export function PriceProvider ({ price, children }) {
+ const me = useMe()
const { data } = useSWR(
- ENDPOINT,
+ endpoint(me?.fiatCurrency),
fetcher,
{
refreshInterval: 30000
@@ -45,8 +56,9 @@ export default function Price () {
useEffect(() => {
setAsSats(localStorage.getItem('asSats'))
}, [])
-
const price = usePrice()
+ const me = useMe()
+ const fiatSymbol = CURRENCY_SYMBOLS[me?.fiatCurrency || 'USD'];
if (!price) return null
@@ -66,7 +78,7 @@ export default function Price () {
if (asSats === 'yep') {
return (
)
}
@@ -81,7 +93,7 @@ export default function Price () {
return (
)
}
diff --git a/fragments/users.js b/fragments/users.js
index 7cd460ad..aa63ab81 100644
--- a/fragments/users.js
+++ b/fragments/users.js
@@ -13,6 +13,7 @@ export const ME = gql`
freeComments
hasNewNotes
tipDefault
+ fiatCurrency
bioId
hasInvites
upvotePopover
@@ -41,6 +42,7 @@ export const ME_SSR = gql`
freePosts
freeComments
tipDefault
+ fiatCurrency
bioId
upvotePopover
tipPopover
@@ -61,6 +63,7 @@ export const ME_SSR = gql`
export const SETTINGS_FIELDS = gql`
fragment SettingsFields on User {
tipDefault
+ fiatCurrency
noteItemSats
noteEarning
noteAllDescendants
@@ -90,11 +93,11 @@ ${SETTINGS_FIELDS}
export const SET_SETTINGS =
gql`
${SETTINGS_FIELDS}
-mutation setSettings($tipDefault: Int!, $noteItemSats: Boolean!, $noteEarning: Boolean!,
+mutation setSettings($tipDefault: Int!, $fiatCurrency: String!, $noteItemSats: Boolean!, $noteEarning: Boolean!,
$noteAllDescendants: Boolean!, $noteMentions: Boolean!, $noteDeposits: Boolean!,
$noteInvites: Boolean!, $noteJobIndicator: Boolean!, $hideInvoiceDesc: Boolean!,
$wildWestMode: Boolean!, $greeterMode: Boolean!) {
- setSettings(tipDefault: $tipDefault, noteItemSats: $noteItemSats,
+ setSettings(tipDefault: $tipDefault, fiatCurrency: $fiatCurrency, noteItemSats: $noteItemSats,
noteEarning: $noteEarning, noteAllDescendants: $noteAllDescendants,
noteMentions: $noteMentions, noteDeposits: $noteDeposits, noteInvites: $noteInvites,
noteJobIndicator: $noteJobIndicator, hideInvoiceDesc: $hideInvoiceDesc, wildWestMode: $wildWestMode,
diff --git a/pages/settings.js b/pages/settings.js
index 51673427..61fed3d2 100644
--- a/pages/settings.js
+++ b/pages/settings.js
@@ -1,4 +1,4 @@
-import { Checkbox, Form, Input, SubmitButton } from '../components/form'
+import { Checkbox, Form, Input, SubmitButton, Dropdown } from '../components/form'
import * as Yup from 'yup'
import { Alert, Button, InputGroup, Modal } from 'react-bootstrap'
import LayoutCenter from '../components/layout-center'
@@ -12,12 +12,16 @@ import { LightningAuth } from '../components/lightning-auth'
import { SETTINGS, SET_SETTINGS } from '../fragments/users'
import { useRouter } from 'next/router'
import Info from '../components/info'
+import { CURRENCY_SYMBOLS } from '../components/price'
export const getServerSideProps = getGetServerSideProps(SETTINGS)
+const supportedCurrencies = Object.keys(CURRENCY_SYMBOLS)
+
export const SettingsSchema = Yup.object({
tipDefault: Yup.number().typeError('must be a number').required('required')
- .positive('must be positive').integer('must be whole')
+ .positive('must be positive').integer('must be whole'),
+ fiatCurrency: Yup.string().required('required').oneOf(supportedCurrencies)
})
const warningMessage = 'If I logout, even accidentally, I will never be able to access my account again'
@@ -54,6 +58,7 @@ export default function Settings ({ data: { settings } }) {