diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Settings.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Settings.tsx | 183 |
1 files changed, 129 insertions, 54 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index ae3a6e688..62a6c55ff 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -17,12 +17,15 @@ import { ExchangeListItem, ExchangeTosStatus, + TranslatedString, WalletCoreVersion, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; -import { Fragment, h, VNode } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; +import { Fragment, VNode, h } from "preact"; +import { Pages } from "../NavigationBar.js"; import { Checkbox } from "../components/Checkbox.js"; -import { JustInDevMode } from "../components/JustInDevMode.js"; +import { EnabledBySettings } from "../components/EnabledBySettings.js"; import { Part } from "../components/Part.js"; import { SelectList } from "../components/SelectList.js"; import { @@ -35,25 +38,20 @@ import { } from "../components/styled/index.js"; import { useAlertContext } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; -import { useDevContext } from "../context/devContext.js"; -import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; -import { useSettings } from "../hooks/useSettings.js"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js"; import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js"; +import { useSettings } from "../hooks/useSettings.js"; import { ToggleHandler } from "../mui/handlers.js"; -import { Pages } from "../NavigationBar.js"; import { platform } from "../platform/foreground.js"; +import { Settings } from "../platform/api.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; export function SettingsPage(): VNode { const [settings, updateSettings] = useSettings(); - const clipboardToggle = useClipboardPermissions(); - const { devMode, toggle } = useDevContext(); const { safely } = useAlertContext(); const { name, update } = useBackupDeviceName(); - const { pushAlertOnError } = useAlertContext(); const webex = platform.getWalletWebExVersion(); const api = useBackendContext(); @@ -76,16 +74,24 @@ export function SettingsPage(): VNode { value: settings.injectTalerSupport, button: { onClick: safely("update support injection", async () => { - console.log("click", settings.injectTalerSupport); updateSettings("injectTalerSupport", !settings.injectTalerSupport); }), }, }} - clipboardToggle={clipboardToggle} - devModeToggle={{ - value: devMode, + advanceToggle={{ + value: settings.advanceMode, button: { - onClick: pushAlertOnError(toggle), + onClick: safely("update advance mode", async () => { + updateSettings("advanceMode", !settings.advanceMode); + }), + }, + }} + langToggle={{ + value: settings.langSelector, + button: { + onClick: safely("update lang selector", async () => { + updateSettings("langSelector", !settings.langSelector); + }), }, }} webexVersion={{ @@ -101,8 +107,8 @@ export interface ViewProps { deviceName: string; setDeviceName: (s: string) => Promise<void>; autoOpenToggle: ToggleHandler; - clipboardToggle: ToggleHandler; - devModeToggle: ToggleHandler; + advanceToggle: ToggleHandler; + langToggle: ToggleHandler; knownExchanges: Array<ExchangeListItem>; coreVersion: WalletCoreVersion | undefined; webexVersion: { @@ -114,8 +120,8 @@ export interface ViewProps { export function SettingsView({ knownExchanges, autoOpenToggle, - clipboardToggle, - devModeToggle, + advanceToggle, + langToggle, coreVersion, webexVersion, }: ViewProps): VNode { @@ -204,45 +210,19 @@ export function SettingsView({ </LinkPrimary> </div> - <JustInDevMode> - <SubTitle> - <i18n.Translate>Display</i18n.Translate> - </SubTitle> - <Input> - <SelectList - label={<i18n.Translate>Current Language</i18n.Translate>} - list={supportedLang} - name="lang" - value={lang} - onChange={(v) => changeLanguage(v)} - /> - </Input> - </JustInDevMode> - <SubTitle> - <i18n.Translate>Version</i18n.Translate> - </SubTitle> - {coreVersion && ( - <Part - title={i18n.str`Wallet Core`} - text={ - <span> - {coreVersion.version}{" "} - <JustInDevMode>{coreVersion.hash}</JustInDevMode> - </span> - } - /> - )} <Part title={i18n.str`Web Extension`} text={ <span> {webexVersion.version}{" "} - <JustInDevMode>{webexVersion.hash}</JustInDevMode> + <EnabledBySettings name="advanceMode"> + {webexVersion.hash} + </EnabledBySettings> </span> } /> {coreVersion && ( - <JustInDevMode> + <EnabledBySettings name="advanceMode"> <Part title={i18n.str`Exchange compatibility`} text={<span>{coreVersion.exchange}</span>} @@ -255,18 +235,42 @@ export function SettingsView({ title={i18n.str`Bank compatibility`} text={<span>{coreVersion.bank}</span>} /> - </JustInDevMode> + </EnabledBySettings> )} <SubTitle> - <i18n.Translate>Troubleshooting</i18n.Translate> + <i18n.Translate>Advance mode</i18n.Translate> </SubTitle> <Checkbox - label={i18n.str`Developer mode`} + label={i18n.str`Enable advance mode`} name="devMode" - description={i18n.str`More options and information useful for debugging`} - enabled={devModeToggle.value!} - onToggle={devModeToggle.button.onClick!} + description={i18n.str`Show more information and options in the UI`} + enabled={advanceToggle.value!} + onToggle={advanceToggle.button.onClick!} + /> + <EnabledBySettings name="advanceMode"> + <AdvanceSettings /> + </EnabledBySettings> + <Checkbox + label={i18n.str`Lang selector`} + name="langSelector" + description={i18n.str`Allows to manually change the language of the UI. Otherwise it will be automatically selected by your browser configuration.`} + enabled={langToggle.value!} + onToggle={langToggle.button.onClick!} /> + <EnabledBySettings name="langSelector"> + <SubTitle> + <i18n.Translate>Display</i18n.Translate> + </SubTitle> + <Input> + <SelectList + label={<i18n.Translate>Current Language</i18n.Translate>} + list={supportedLang} + name="lang" + value={lang} + onChange={(v) => changeLanguage(v)} + /> + </Input> + </EnabledBySettings> <SubTitle> <i18n.Translate>Navigator</i18n.Translate> </SubTitle> @@ -283,6 +287,77 @@ export function SettingsView({ enabled={autoOpenToggle.value!} onToggle={autoOpenToggle.button.onClick!} /> + <SubTitle> + <i18n.Translate>Version</i18n.Translate> + </SubTitle> + {coreVersion && ( + <Part + title={i18n.str`Wallet Core`} + text={ + <span> + {coreVersion.version}{" "} + <EnabledBySettings name="advanceMode"> + {coreVersion.hash} + </EnabledBySettings> + </span> + } + /> + )} + </section> + </Fragment> + ); +} + +type Info = { label: TranslatedString; description: TranslatedString }; +type Options = { + [k in keyof Settings]?: Info; +}; +function AdvanceSettings(): VNode { + const [settings, updateSettings] = useSettings(); + const { i18n } = useTranslationContext(); + const o: Options = { + backup: { + label: i18n.str`Show backup feature`, + description: i18n.str`Backup integration still in beta.`, + }, + deleteActiveTransactions: { + label: i18n.str`Show delete active transaction`, + description: i18n.str`Deleting active transaction is not safe and you may loose your coins.`, + }, + extendedAccountTypes: { + label: i18n.str`Show more account types on deposit`, + description: i18n.str`Extends the UI to more payment target types.`, + }, + showJsonOnError: { + label: i18n.str`Show JSON on error`, + description: i18n.str`Print more information about the error. Useful for debugging.`, + }, + walletAllowHttp: { + label: i18n.str`Allow HTTP connections`, + description: i18n.str`Using HTTP connection may be faster but unsafe (wallet restart required)`, + }, + walletBatchWithdrawal: { + label: i18n.str`Allow batch withdrawals`, + description: i18n.str`Using the batch withdrawal API allows faster withdrawals (wallet restart required)`, + }, + }; + return ( + <Fragment> + <section> + {Object.entries(o).map(([name, { label, description }]) => { + const settingsName = name as keyof Settings; + return ( + <Checkbox + label={label} + name={name} + description={description} + enabled={settings[settingsName]} + onToggle={async () => { + updateSettings(settingsName, !settings[settingsName]); + }} + /> + ); + })} </section> </Fragment> ); |