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 } }) {
{ - await setSettings({ variables: { tipDefault: Number(tipDefault), ...values } }) + onSubmit={async ({ tipDefault, fiatCurrency, ...values }) => { + await setSettings({ variables: { tipDefault: Number(tipDefault), fiatCurrency, ...values } }) setSuccess('settings saved') }} > @@ -79,6 +84,12 @@ export default function Settings ({ data: { settings } }) { autoFocus append={sats} /> +
notify me when ...