select instead of dropdown for currency

components/footer.js

@@ -136,7 +136,7 @@ export default function Footer ({ noLinks }) {
                   ? <Sun onClick={() => darkMode.toggle()} className='fill-grey theme' />
                   : <Moon onClick={() => darkMode.toggle()} className='fill-grey theme' />}
               </div>}
-            <div className='mb-2' style={{ fontWeight: 500 }}>
+            <div className='mb-0' style={{ fontWeight: 500 }}>
               <OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>
                 <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
                   analytics

components/form.js

@@ -430,20 +430,14 @@ export function SyncForm ({
   )
 }
 
-export function Dropdown ({ label, items, groupClassName, ...props }) {
-  const [field, _, helper] = useField({ ...props, type: 'input' })
+export function Select ({ label, items, groupClassName, ...props }) {
+  const [field] = useField(props)
+
   return (
     <FormGroup label={label} className={groupClassName}>
-      <BootstrapDropdown>
-        <BootstrapDropdown.Toggle>
-          {field.value}
-        </BootstrapDropdown.Toggle>
-        <BootstrapDropdown.Menu>
-          {items.map(item => (
-            <BootstrapDropdown.Item onSelect={() => helper.setValue(item)}>{item}</BootstrapDropdown.Item>
-          ))}
-        </BootstrapDropdown.Menu>
-      </BootstrapDropdown>
+      <BootstrapForm.Control as='select' custom {...field} {...props}>
+        {items.map(item => <option key={item}>{item}</option>)}
+      </BootstrapForm.Control>
     </FormGroup>
   )
-}
+}

components/price.js

@@ -11,12 +11,12 @@ export const PriceContext = React.createContext({
 })
 
 export const CURRENCY_SYMBOLS = {
-  'AUD': '$',
-  'CAD': '$',
-  'EUR': '€',
-  'GBP': '£',
-  'USD': '$',
-  'NZD': '$'
+  AUD: '$',
+  CAD: '$',
+  EUR: '€',
+  GBP: '£',
+  USD: '$',
+  NZD: '$'
 }
 
 const endpoint = (fiat) => `https://api.coinbase.com/v2/prices/BTC-${fiat ?? 'USD'}/spot`
@@ -58,7 +58,7 @@ export default function Price () {
   }, [])
   const price = usePrice()
   const me = useMe()
-  const fiatSymbol = CURRENCY_SYMBOLS[me?.fiatCurrency || 'USD'];
+  const fiatSymbol = CURRENCY_SYMBOLS[me?.fiatCurrency || 'USD']
 
   if (!price) return null
 

pages/settings.js

@@ -1,4 +1,4 @@
-import { Checkbox, Form, Input, SubmitButton, Dropdown } from '../components/form'
+import { Checkbox, Form, Input, SubmitButton, Select } from '../components/form'
 import * as Yup from 'yup'
 import { Alert, Button, InputGroup, Modal } from 'react-bootstrap'
 import LayoutCenter from '../components/layout-center'
@@ -71,8 +71,8 @@ export default function Settings ({ data: { settings } }) {
             greeterMode: settings?.greeterMode
           }}
           schema={SettingsSchema}
-          onSubmit={async ({ tipDefault, fiatCurrency, ...values }) => {
-            await setSettings({ variables: { tipDefault: Number(tipDefault), fiatCurrency, ...values } })
+          onSubmit={async ({ tipDefault, ...values }) => {
+            await setSettings({ variables: { tipDefault: Number(tipDefault), ...values } })
             setSuccess('settings saved')
           }}
         >
@@ -84,9 +84,10 @@ export default function Settings ({ data: { settings } }) {
             autoFocus
             append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
           />
-          <Dropdown
+          <Select
             label='fiat currency'
             name='fiatCurrency'
+            size='sm'
             items={supportedCurrencies}
             required
           />