forked from LN-Zap/zap-desktop
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(wallet): system settings screen
fix LN-Zap#1535
- Loading branch information
Showing
16 changed files
with
413 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,254 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { FormattedMessage, injectIntl, intlShape } from 'react-intl' | ||
| import { Box, Flex } from 'rebass' | ||
| import { | ||
| Bar, | ||
| Button, | ||
| DataRow, | ||
| Form, | ||
| Header, | ||
| Input, | ||
| Label, | ||
| Toggle, | ||
| Select, | ||
| Text, | ||
| } from 'components/UI' | ||
| import ArrowLeft from 'components/Icon/ArrowLeft' | ||
| import { currencies, locales, getLanguageName } from '@zap/i18n' | ||
| import messages from './messages' | ||
|
|
||
| const localeItems = locales.map(lang => ({ | ||
| key: lang, | ||
| value: getLanguageName(lang), | ||
| })) | ||
|
|
||
| const currencyItems = currencies.map(currency => ({ | ||
| key: currency, | ||
| value: currency, | ||
| })) | ||
|
|
||
| const themeItems = [{ key: 'dark' }, { key: 'light' }] | ||
| const themeMessageMapper = key => { | ||
| const filters = { | ||
| dark: messages.theme_option_dark, | ||
| light: messages.theme_option_light, | ||
| } | ||
| return filters[key] | ||
| } | ||
|
|
||
| const addressItems = [{ key: 'p2wkh' }, { key: 'np2wkh' }] | ||
| const addressMessageMapper = key => { | ||
| const filters = { | ||
| p2wkh: messages.address_option_p2wkh, | ||
| np2wkh: messages.address_option_np2wkh, | ||
| } | ||
| return filters[key] | ||
| } | ||
|
|
||
| const FieldLabel = ({ itemKey, ...rest }) => { | ||
| const messageKey = itemKey.replace('.', '_') | ||
| return ( | ||
| <Box {...rest}> | ||
| <Label htmlFor={itemKey} mb={2}> | ||
| <FormattedMessage {...messages[`${messageKey}_label`]} /> | ||
| </Label> | ||
| <Text color="gray" fontWeight="light"> | ||
| <FormattedMessage {...messages[`${messageKey}_description`]} /> | ||
| </Text> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| FieldLabel.propTypes = { | ||
| itemKey: PropTypes.string.isRequired, | ||
| } | ||
|
|
||
| const NumberField = props => ( | ||
| <Input | ||
| css={{ 'text-align': 'right' }} | ||
| highlightOnValid={false} | ||
| isRequired | ||
| min="1" | ||
| step="1" | ||
| type="number" | ||
| width={100} | ||
| {...props} | ||
| /> | ||
| ) | ||
|
|
||
| const FormButtons = ({ onCancel, ...rest }) => ( | ||
| <Flex {...rest} alignItems="center" justifyContent="space-between"> | ||
| <Box width={1 / 5}> | ||
| <Button onClick={onCancel} px={0} type="button" variant="secondary"> | ||
| <Flex> | ||
| <Text> | ||
| <ArrowLeft /> | ||
| </Text> | ||
| <Text ml={1}> | ||
| <FormattedMessage {...messages.cancel} /> | ||
| </Text> | ||
| </Flex> | ||
| </Button> | ||
| </Box> | ||
| <Button mx="auto" type="submit"> | ||
| <FormattedMessage {...messages.save} /> | ||
| </Button> | ||
| <Box width={1 / 5} /> | ||
| </Flex> | ||
| ) | ||
|
|
||
| FormButtons.propTypes = { | ||
| onCancel: PropTypes.func, | ||
| } | ||
|
|
||
| const Settings = ({ | ||
| intl, | ||
| currentConfig, | ||
| onCancel, | ||
| onSubmit, | ||
| setLocale, | ||
| saveConfigOverrides, | ||
| showNotification, | ||
| }) => { | ||
| const handleSubmit = async values => { | ||
| // Save the updated settings. | ||
| await saveConfigOverrides(values) | ||
|
|
||
| // Special handling. | ||
| if (values.locale) { | ||
| await setLocale(values.locale) | ||
| } | ||
|
|
||
| // Show a notification. | ||
| const message = intl.formatMessage({ ...messages.submit_success }) | ||
| showNotification(message) | ||
|
|
||
| // Finally, run any user supplied submit handler. | ||
| if (onSubmit) { | ||
| onSubmit(values) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Form mx="auto" onSubmit={handleSubmit} width={9 / 16}> | ||
| <Header | ||
| subtitle={<FormattedMessage {...messages.settings_subtitle} />} | ||
| title={<FormattedMessage {...messages.settings_title} />} | ||
| /> | ||
| <Bar my={1} /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="locale" />} | ||
| right={ | ||
| <Select | ||
| field="locale" | ||
| highlightOnValid={false} | ||
| initialSelectedItem={currentConfig.locale} | ||
| items={localeItems} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="currency" />} | ||
| right={ | ||
| <Select | ||
| field="currency" | ||
| highlightOnValid={false} | ||
| initialSelectedItem={currentConfig.currency} | ||
| items={currencyItems} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="theme" />} | ||
| right={ | ||
| <Select | ||
| field="theme" | ||
| highlightOnValid={false} | ||
| initialSelectedItem={currentConfig.theme} | ||
| items={themeItems} | ||
| messageMapper={themeMessageMapper} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="address" />} | ||
| right={ | ||
| <Select | ||
| field="address" | ||
| highlightOnValid={false} | ||
| initialSelectedItem={currentConfig.address} | ||
| items={addressItems} | ||
| messageMapper={addressMessageMapper} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="lndTargetConfirmations.fastestConfCount" />} | ||
| right={ | ||
| <NumberField | ||
| field="lndTargetConfirmations.fastestConfCount" | ||
| initialValue={currentConfig.lndTargetConfirmations.fastestConfCount} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="lndTargetConfirmations.halfHourConfCount" />} | ||
| right={ | ||
| <NumberField | ||
| field="lndTargetConfirmations.halfHourConfCount" | ||
| initialValue={currentConfig.lndTargetConfirmations.halfHourConfCount} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="lndTargetConfirmations.hourConfCount" />} | ||
| right={ | ||
| <NumberField | ||
| field="lndTargetConfirmations.hourConfCount" | ||
| initialValue={currentConfig.lndTargetConfirmations.hourConfCount} | ||
| /> | ||
| } | ||
| /> | ||
|
|
||
| <Bar variant="light" /> | ||
|
|
||
| <DataRow | ||
| left={<FieldLabel itemKey="autoupdate.active" />} | ||
| right={<Toggle field="autoupdate.active" initialValue={currentConfig.autoupdate.active} />} | ||
| /> | ||
|
|
||
| <FormButtons onCancel={onCancel} /> | ||
| </Form> | ||
| ) | ||
| } | ||
|
|
||
| Settings.propTypes = { | ||
| currentConfig: PropTypes.object.isRequired, | ||
| intl: intlShape.isRequired, | ||
| onCancel: PropTypes.func, | ||
| onSubmit: PropTypes.func, | ||
| saveConfigOverrides: PropTypes.func.isRequired, | ||
| setLocale: PropTypes.func.isRequired, | ||
| showNotification: PropTypes.func.isRequired, | ||
| } | ||
| export default injectIntl(Settings) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,5 @@ export default defineMessages({ | |
| locale: 'Language', | ||
| theme: 'Theme', | ||
| logout: 'Logout', | ||
| settings: 'Settings', | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,4 @@ | ||
| import Settings from './Settings' | ||
|
|
||
| export default Settings | ||
| export SettingsMenu from './SettingsMenu' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.