diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Settings.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Settings.tsx | 93 |
1 files changed, 72 insertions, 21 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index ff47620eb..8456ca550 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -14,16 +14,19 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { ExchangeListItem, i18n } from "@gnu-taler/taler-util"; +import { ExchangeListItem, i18n, Translate } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; +import { SelectList } from "../components/SelectList"; import { DestructiveText, + Input, LinkPrimary, SuccessText, WarningText, } from "../components/styled"; import { useDevContext } from "../context/devContext"; +import { useTranslationContext } from "../context/translation"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; @@ -36,13 +39,13 @@ export function SettingsPage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); const { devMode, toggleDevMode } = useDevContext(); const { name, update } = useBackupDeviceName(); - const [lang, changeLang] = useLang(); + // const [lang, changeLang] = useLang(); const exchangesHook = useAsyncAsHook(wxApi.listExchanges); return ( <SettingsView - lang={lang} - changeLang={changeLang} + // lang={lang} + // changeLang={changeLang} knownExchanges={ !exchangesHook || exchangesHook.hasError ? [] @@ -59,8 +62,8 @@ export function SettingsPage(): VNode { } export interface ViewProps { - lang: string; - changeLang: (s: string) => void; + // lang: string; + // changeLang: (s: string) => void; deviceName: string; setDeviceName: (s: string) => Promise<void>; permissionsEnabled: boolean; @@ -77,33 +80,65 @@ export function SettingsView({ developerMode, toggleDeveloperMode, }: ViewProps): VNode { + const { lang, supportedLang, changeLanguage } = useTranslationContext(); + return ( <Fragment> <section> <h2> - <i18n.Translate>Permissions</i18n.Translate> + <i18n.Translate>Display</i18n.Translate> + </h2> + <Input> + <SelectList + label={<i18n.Translate>Current Language</i18n.Translate>} + list={supportedLang} + name="lang" + value={lang} + onChange={(v) => changeLanguage(v)} + /> + </Input> + + <h2> + <i18n.Translate>Navigator</i18n.Translate> </h2> <Checkbox - label="Automatically open wallet based on page content" + label={ + <i18n.Translate> + Automatically open wallet based on page content + </i18n.Translate> + } name="perm" - description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" + description={ + <i18n.Translate> + Enabling this option below will make using the wallet faster, but + requires more permissions from your browser. + </i18n.Translate> + } enabled={permissionsEnabled} onToggle={togglePermissions} /> <h2> - <i18n.Translate>Known exchanges</i18n.Translate> + <i18n.Translate>Trust</i18n.Translate> </h2> {!knownExchanges || !knownExchanges.length ? ( - <div>No exchange yet!</div> + <div> + <i18n.Translate>No exchange yet</i18n.Translate> + </div> ) : ( <Fragment> <table> <thead> <tr> - <th>currency</th> - <th>url</th> - <th>term of service</th> + <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> @@ -116,12 +151,24 @@ export function SettingsView({ ); switch (status) { case "accepted": - return <SuccessText>ok</SuccessText>; + return ( + <SuccessText> + <i18n.Translate>ok</i18n.Translate> + </SuccessText> + ); case "changed": - return <WarningText>changed!</WarningText>; + return ( + <WarningText> + <i18n.Translate>changed</i18n.Translate> + </WarningText> + ); case "new": case "notfound": - return <DestructiveText>not accepted</DestructiveText>; + return ( + <DestructiveText> + <i18n.Translate>not accepted</i18n.Translate> + </DestructiveText> + ); } } return ( @@ -143,15 +190,19 @@ export function SettingsView({ <div style={{ display: "flex", justifyContent: "space-between" }}> <div /> <LinkPrimary href={Pages.settings_exchange_add}> - Add an exchange + <i18n.Translate>Add an exchange</i18n.Translate> </LinkPrimary> </div> - <h2>Config</h2> + <h2>Troubleshooting</h2> <Checkbox - label="Developer mode" + label={<i18n.Translate>Developer mode</i18n.Translate>} name="devMode" - description="(More options and information useful for debugging)" + description={ + <i18n.Translate> + (More options and information useful for debugging) + </i18n.Translate> + } enabled={developerMode} onToggle={toggleDeveloperMode} /> |