diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Settings.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Settings.tsx | 376 |
1 files changed, 178 insertions, 198 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index c0268a1ae..0d0a31a2d 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -15,63 +15,76 @@ */ import { - ExchangeListItem, - ExchangeTosStatus, - WalletCoreVersion, + LibtoolVersion, + 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/browser"; +import { Fragment, VNode, h } from "preact"; import { Checkbox } from "../components/Checkbox.js"; -import { ErrorTalerOperation } from "../components/ErrorTalerOperation.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 { - DestructiveText, Input, - LinkPrimary, SubTitle, - SuccessText, - WarningText, + WarningBox } from "../components/styled/index.js"; -import { useDevContext } from "../context/devContext.js"; -import { useTranslationContext } from "../context/translation.js"; +import { useAlertContext } from "../context/alert.js"; +import { useBackendContext } from "../context/backend.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; -import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.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/api.js"; -import { wxApi } from "../wxApi.js"; +import { Settings } from "../platform/api.js"; +import { platform } from "../platform/foreground.js"; +import { WALLET_CORE_SUPPORTED_VERSION } from "../wxApi.js"; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; export function SettingsPage(): VNode { - const autoOpenToggle = useAutoOpenPermissions(); - const clipboardToggle = useClipboardPermissions(); - const { devModeToggle } = useDevContext(); + const [settings, updateSettings] = useSettings(); + const { safely } = useAlertContext(); const { name, update } = useBackupDeviceName(); const webex = platform.getWalletWebExVersion(); + const api = useBackendContext(); - const exchangesHook = useAsyncAsHook(async () => { - const list = await wxApi.wallet.call(WalletApiOperation.ListExchanges, {}); - const version = await wxApi.wallet.call(WalletApiOperation.GetVersion, {}); - return { exchanges: list.exchanges, version }; + const hook = useAsyncAsHook(async () => { + const version = await api.wallet.call(WalletApiOperation.GetVersion, {}); + return { version }; }); - const { exchanges, version } = - !exchangesHook || exchangesHook.hasError - ? { exchanges: [], version: undefined } - : exchangesHook.response; + + const version = hook && !hook.hasError ? hook.response.version : undefined return ( <SettingsView - knownExchanges={exchanges} deviceName={name} setDeviceName={update} - autoOpenToggle={autoOpenToggle} - clipboardToggle={clipboardToggle} - devModeToggle={devModeToggle} + autoOpenToggle={{ + value: settings.autoOpen, + button: { + onClick: safely("update support injection", async () => { + updateSettings("autoOpen", !settings.autoOpen); + }), + }, + }} + advanceToggle={{ + value: settings.advancedMode, + button: { + onClick: safely("update advance mode", async () => { + updateSettings("advancedMode", !settings.advancedMode); + }), + }, + }} + langToggle={{ + value: settings.langSelector, + button: { + onClick: safely("update lang selector", async () => { + updateSettings("langSelector", !settings.langSelector); + }), + }, + }} webexVersion={{ version: webex.version, hash: GIT_HASH, @@ -85,9 +98,8 @@ export interface ViewProps { deviceName: string; setDeviceName: (s: string) => Promise<void>; autoOpenToggle: ToggleHandler; - clipboardToggle: ToggleHandler; - devModeToggle: ToggleHandler; - knownExchanges: Array<ExchangeListItem>; + advanceToggle: ToggleHandler; + langToggle: ToggleHandler; coreVersion: WalletCoreVersion | undefined; webexVersion: { version: string; @@ -96,162 +108,95 @@ export interface ViewProps { } export function SettingsView({ - knownExchanges, autoOpenToggle, - clipboardToggle, - devModeToggle, + advanceToggle, + langToggle, coreVersion, webexVersion, }: ViewProps): VNode { const { i18n, lang, supportedLang, changeLanguage } = useTranslationContext(); + const api = useBackendContext(); + return ( <Fragment> <section> - {autoOpenToggle.button.error && ( - <ErrorTalerOperation - title={<i18n.Translate>Could not toggle auto-open</i18n.Translate>} - error={autoOpenToggle.button.error.errorDetail} - /> - )} - {clipboardToggle.button.error && ( - <ErrorTalerOperation - title={<i18n.Translate>Could not toggle clipboard</i18n.Translate>} - error={clipboardToggle.button.error.errorDetail} - /> - )} <SubTitle> <i18n.Translate>Navigator</i18n.Translate> </SubTitle> <Checkbox - label={ - <i18n.Translate> - Automatically open wallet based on page content - </i18n.Translate> - } + label={i18n.str`Automatically open wallet`} name="autoOpen" description={ <i18n.Translate> - Enabling this option below will make using the wallet faster, but - requires more permissions from your browser. + Open the wallet when a payment action is found. </i18n.Translate> } enabled={autoOpenToggle.value!} onToggle={autoOpenToggle.button.onClick!} /> - <Checkbox - label={ - <i18n.Translate> - Automatically check clipboard for Taler URI - </i18n.Translate> - } - name="clipboard" - description={ - <i18n.Translate> - Enabling this option below will make using the wallet faster, but - requires more permissions from your browser. - </i18n.Translate> - } - enabled={clipboardToggle.value!} - onToggle={clipboardToggle.button.onClick!} - /> <SubTitle> - <i18n.Translate>Trust</i18n.Translate> + <i18n.Translate>Version Info</i18n.Translate> </SubTitle> - {!knownExchanges || !knownExchanges.length ? ( - <div> - <i18n.Translate>No exchange yet</i18n.Translate> - </div> - ) : ( + <Part + title={i18n.str`Web Extension`} + text={ + <span> + {webexVersion.version}{" "} + <EnabledBySettings name="advancedMode"> + {webexVersion.hash} + </EnabledBySettings> + </span> + } + /> + {coreVersion && ( <Fragment> - <table> - <thead> - <tr> - <th> - <i18n.Translate>Currency</i18n.Translate> - </th> - <th> - <i18n.Translate>URL</i18n.Translate> - </th> - <th> - <i18n.Translate>Term of Service</i18n.Translate> - </th> - </tr> - </thead> - <tbody> - {knownExchanges.map((e, idx) => { - function Status(): VNode { - switch (e.tosStatus) { - case ExchangeTosStatus.Accepted: - return ( - <SuccessText> - <i18n.Translate>ok</i18n.Translate> - </SuccessText> - ); - case ExchangeTosStatus.Changed: - return ( - <WarningText> - <i18n.Translate>changed</i18n.Translate> - </WarningText> - ); - case ExchangeTosStatus.New: - case ExchangeTosStatus.NotFound: - return ( - <DestructiveText> - <i18n.Translate>not accepted</i18n.Translate> - </DestructiveText> - ); - case ExchangeTosStatus.Unknown: - default: - return ( - <DestructiveText> - <i18n.Translate> - unknown (exchange status should be updated) - </i18n.Translate> - </DestructiveText> - ); - } - } - return ( - <tr key={idx}> - <td>{e.currency}</td> - <td> - <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a> - </td> - <td> - <Status /> - </td> - </tr> - ); - })} - </tbody> - </table> + {LibtoolVersion.compare( + coreVersion.version, + WALLET_CORE_SUPPORTED_VERSION, + )?.compatible ? undefined : ( + <WarningBox> + <i18n.Translate> + The version of wallet core is not supported. (supported + version: {WALLET_CORE_SUPPORTED_VERSION}, wallet version: {coreVersion.version}) + </i18n.Translate> + </WarningBox> + )} + <EnabledBySettings name="advancedMode"> + <Part + title={i18n.str`Exchange compatibility`} + text={<span>{coreVersion.exchange}</span>} + /> + <Part + title={i18n.str`Merchant compatibility`} + text={<span>{coreVersion.merchant}</span>} + /> + <Part + title={i18n.str`Bank compatibility`} + text={<span>{coreVersion.bank}</span>} + /> + <Part + title={i18n.str`Wallet Core compatibility`} + text={<span>{coreVersion.version}</span>} + /> + </EnabledBySettings> </Fragment> )} - <div style={{ display: "flex", justifyContent: "space-between" }}> - <div /> - <LinkPrimary href={Pages.settingsExchangeAdd({})}> - <i18n.Translate>Add an exchange</i18n.Translate> - </LinkPrimary> - </div> - <SubTitle> - <i18n.Translate>Troubleshooting</i18n.Translate> + <i18n.Translate>Settings</i18n.Translate> </SubTitle> <Checkbox - label={<i18n.Translate>Developer mode</i18n.Translate>} + label={i18n.str`Enable developer mode`} name="devMode" - description={ - <i18n.Translate> - More options and information useful for debugging - </i18n.Translate> - } - 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!} /> - - <JustInDevMode> + <EnabledBySettings name="advancedMode"> + <AdvanceSettings /> + </EnabledBySettings> + <EnabledBySettings name="langSelector"> <SubTitle> <i18n.Translate>Display</i18n.Translate> </SubTitle> @@ -264,46 +209,81 @@ export function SettingsView({ onChange={(v) => changeLanguage(v)} /> </Input> - </JustInDevMode> - <SubTitle> - <i18n.Translate>Version</i18n.Translate> - </SubTitle> - {coreVersion && ( - <Part - title={<i18n.Translate>Wallet Core</i18n.Translate>} - text={ - <span> - {coreVersion.version}{" "} - <JustInDevMode>{coreVersion.hash}</JustInDevMode> - </span> - } - /> - )} - <Part - title={<i18n.Translate>Web Extension</i18n.Translate>} - text={ - <span> - {webexVersion.version}{" "} - <JustInDevMode>{webexVersion.hash}</JustInDevMode> - </span> - } - /> - {coreVersion && ( - <JustInDevMode> - <Part - title={<i18n.Translate>Exchange compatibility</i18n.Translate>} - text={<span>{coreVersion.exchange}</span>} - /> - <Part - title={<i18n.Translate>Merchant compatibility</i18n.Translate>} - text={<span>{coreVersion.merchant}</span>} - /> - <Part - title={<i18n.Translate>Bank compatibility</i18n.Translate>} - text={<span>{coreVersion.bank}</span>} + </EnabledBySettings> + </section> + </Fragment> + ); +} + +type Info = { label: TranslatedString; description: TranslatedString }; +type Options = { + [k in keyof Settings]?: Info; +}; +function AdvanceSettings(): VNode { + const [settings, updateSettings] = useSettings(); + const api = useBackendContext(); + const { i18n } = useTranslationContext(); + const o: Options = { + backup: { + label: i18n.str`Show backup feature`, + description: i18n.str`Backup integration still in beta.`, + }, + suspendIndividualTransaction: { + label: i18n.str`Show suspend/resume transaction`, + description: i18n.str`Prevent transaction from doing network request.`, + }, + showRefeshTransactions: { + label: i18n.str`Show refresh transaction type in the transaction list`, + description: i18n.str`Refresh transaction will be hidden by default if the refresh operation doesn't have fee.`, + }, + 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)`, + }, + langSelector: { + label: i18n.str`Lang selector`, + description: i18n.str`Allows to manually change the language of the UI. Otherwise it will be automatically selected by your browser configuration.`, + }, + showExchangeManagement: { + label: i18n.str`Edit exchange management`, + description: i18n.str`Allows to see the list of exchange, remove, add and switch before withdrawal.`, + }, + selectTosFormat: { + label: i18n.str`Select terms of service format`, + description: i18n.str`Allows to render the terms of service on different format selected by the user.`, + }, + showWalletActivity: { + label: i18n.str`Show wallet activity`, + description: i18n.str`Show the wallet notification and observability event in the UI.`, + }, + }; + return ( + <Fragment> + <section> + {Object.entries(o).map(([name, { label, description }]) => { + const settingsName = name as keyof Settings; + return ( + <Checkbox + label={label} + name={name} + key={name} + description={description} + enabled={settings[settingsName]} + onToggle={async () => { + updateSettings(settingsName, !settings[settingsName]); + await api.background.call("reinitWallet", undefined); + }} /> - </JustInDevMode> - )} + ); + })} </section> </Fragment> ); |