diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
14 files changed, 98 insertions, 41 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 71365e089..e9a32ebf7 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { PaytoUri } from "@gnu-taler/taler-util"; +import { PaytoUri, i18n } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; import { CopiedIcon, CopyIcon } from "../svg"; @@ -34,23 +34,42 @@ export function BankDetailsByPaytoType({ amount, }: BankDetailsProps): VNode { const firstPart = !payto ? undefined : !payto.isKnown ? ( - <Row name="Account" value={payto.targetPath} /> + <Row + name={<i18n.Translate>Account</i18n.Translate>} + value={payto.targetPath} + /> ) : payto.targetType === "x-taler-bank" ? ( <Fragment> - <Row name="Bank host" value={payto.host} /> - <Row name="Bank account" value={payto.account} /> + <Row + name={<i18n.Translate>Bank host</i18n.Translate>} + value={payto.host} + /> + <Row + name={<i18n.Translate>Bank account</i18n.Translate>} + value={payto.account} + /> </Fragment> ) : payto.targetType === "iban" ? ( - <Row name="IBAN" value={payto.iban} /> + <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} /> ) : undefined; return ( <div style={{ textAlign: "left" }}> <p>Bank transfer details</p> <table> {firstPart} - <Row name="Exchange" value={exchangeBaseUrl} /> - <Row name="Chosen amount" value={amount} /> - <Row name="Subject" value={subject} literal /> + <Row + name={<i18n.Translate>Exchange</i18n.Translate>} + value={exchangeBaseUrl} + /> + <Row + name={<i18n.Translate>Chosen amount</i18n.Translate>} + value={amount} + /> + <Row + name={<i18n.Translate>Subject</i18n.Translate>} + value={subject} + literal + /> </table> </div> ); @@ -61,7 +80,7 @@ function Row({ value, literal, }: { - name: string; + name: VNode; value: string; literal?: boolean; }): VNode { diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx index 59e84f4b0..0eb087b07 100644 --- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx +++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx @@ -19,9 +19,9 @@ import { h, VNode } from "preact"; interface Props { enabled: boolean; onToggle: () => void; - label: string; + label: VNode; name: string; - description?: string; + description?: VNode; } export function Checkbox({ name, diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx index 16909d29a..de7fb5e6c 100644 --- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx +++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx @@ -20,7 +20,7 @@ import { h, VNode } from "preact"; interface Props { enabled: boolean; onToggle: () => void; - label: string; + label: VNode; name: string; } diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx index b57075805..b5ad7cda7 100644 --- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -14,6 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { i18n } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; export function DebugCheckbox({ @@ -36,7 +37,9 @@ export function DebugCheckbox({ htmlFor="checkbox-perm" style={{ marginLeft: "0.5em", fontWeight: "bold" }} > - Automatically open wallet based on page content + <i18n.Translate> + Automatically open wallet based on page content + </i18n.Translate> </label> <span style={{ @@ -46,8 +49,12 @@ export function DebugCheckbox({ marginLeft: "2em", }} > - (Enabling this option below will make using the wallet faster, but - requires more permissions from your browser.) + ( + <i18n.Translate> + Enabling this option below will make using the wallet faster, but + requires more permissions from your browser. + </i18n.Translate> + ) </span> </div> ); diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx index d368a10bf..b136ebc24 100644 --- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx +++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { WalletDiagnostics } from "@gnu-taler/taler-util"; +import { i18n, WalletDiagnostics } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { PageLink } from "../renderHtml"; @@ -25,7 +25,13 @@ interface Props { export function Diagnostics({ timedOut, diagnostics }: Props): VNode { if (timedOut) { - return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>; + return ( + <p> + <i18n.Translate> + Diagnostics timed out. Could not talk to the wallet backend. + </i18n.Translate> + </p> + ); } if (diagnostics) { @@ -41,7 +47,9 @@ export function Diagnostics({ timedOut, diagnostics }: Props): VNode { paddingBottom: "0.2em", }} > - <p>Problems detected:</p> + <p> + <i18n.Translate>Problems detected:</i18n.Translate> + </p> <ol> {diagnostics.errors.map((errMsg) => ( <li key={errMsg}>{errMsg}</li> @@ -49,22 +57,32 @@ export function Diagnostics({ timedOut, diagnostics }: Props): VNode { </ol> {diagnostics.firefoxIdbProblem ? ( <p> - Please check in your <code>about:config</code> settings that you - have IndexedDB enabled (check the preference name{" "} - <code>dom.indexedDB.enabled</code>). + <i18n.Translate> + Please check in your <code>about:config</code> settings that you + have IndexedDB enabled (check the preference name{" "} + <code>dom.indexedDB.enabled</code>). + </i18n.Translate> </p> ) : null} {diagnostics.dbOutdated ? ( <p> - Your wallet database is outdated. Currently automatic migration is - not supported. Please go{" "} - <PageLink pageName="/reset-required">here</PageLink> to reset the - wallet database. + <i18n.Translate> + Your wallet database is outdated. Currently automatic migration is + not supported. Please go{" "} + <PageLink pageName="/reset-required"> + <i18n.Translate>here</i18n.Translate> + </PageLink>{" "} + to reset the wallet database. + </i18n.Translate> </p> ) : null} </div> ); } - return <p>Running diagnostics ...</p>; + return ( + <p> + <i18n.Translate>Running diagnostics</i18n.Translate> ... + </p> + ); } diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 72bfbe809..8d45cae90 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -14,6 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { i18n } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; @@ -39,7 +40,9 @@ export function EditableText({ return ( <div style={{ display: "flex", justifyContent: "space-between" }}> <p>{value}</p> - <button onClick={() => setEditing(true)}>edit</button> + <button onClick={() => setEditing(true)}> + <i18n.Translate>Edit</i18n.Translate> + </button> </div> ); }; @@ -54,7 +57,7 @@ export function EditableText({ onChange(ref.current.value).then(() => setEditing(false)); }} > - confirm + <i18n.Translate>Confirm</i18n.Translate> </button> </div> ); diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index 21f10eeef..085bf0b82 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { VNode, h } from "preact"; +import { VNode, h, ComponentChildren } from "preact"; import { useState } from "preact/hooks"; import arrowDown from "../../static/img/chevron-down.svg"; import { ErrorBox } from "./styled"; @@ -22,11 +22,10 @@ export function ErrorMessage({ title, description, }: { - title?: string | VNode; + title: VNode; description?: string; }): VNode | null { const [showErrorDetail, setShowErrorDetail] = useState(false); - if (!title) return null; return ( <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}> <div> diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index a7b66ea3d..4852a71b1 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -24,7 +24,7 @@ export function ErrorTalerOperation({ title, error, }: { - title?: string; + title?: VNode; error?: TalerErrorDetails; }): VNode | null { const { devMode } = useDevContext(); diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx index 34edac551..7504034a0 100644 --- a/packages/taler-wallet-webextension/src/components/Loading.tsx +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -13,8 +13,13 @@ You should have received a copy of the GNU General Public License along with TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { i18n } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; export function Loading(): VNode { - return <div>Loading...</div>; + return ( + <div> + <i18n.Translate>Loading</i18n.Translate>... + </div> + ); } diff --git a/packages/taler-wallet-webextension/src/components/LoadingError.tsx b/packages/taler-wallet-webextension/src/components/LoadingError.tsx index 6f572b882..ea0ff40d6 100644 --- a/packages/taler-wallet-webextension/src/components/LoadingError.tsx +++ b/packages/taler-wallet-webextension/src/components/LoadingError.tsx @@ -19,7 +19,7 @@ import { ErrorMessage } from "./ErrorMessage"; import { ErrorTalerOperation } from "./ErrorTalerOperation"; export interface Props { - title: string; + title: VNode; error: HookError; } export function LoadingError({ title, error }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index 977ac557d..1f46cf82c 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -4,7 +4,7 @@ import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled"; import { useState } from "preact/hooks"; export interface Props { - label: (s: string) => string; + label: (s: string) => VNode; actions: string[]; onClick: (s: string) => void; } diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index c8ecb46d2..05da90b2d 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -15,11 +15,11 @@ */ import { AmountLike } from "@gnu-taler/taler-util"; import { ExtraLargeText, LargeText, SmallLightText } from "./styled"; -import { h } from "preact"; +import { h, VNode } from "preact"; export type Kind = "positive" | "negative" | "neutral"; interface Props { - title: string; + title: VNode; text: AmountLike; kind: Kind; big?: boolean; diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx index c17b87339..676fd672f 100644 --- a/packages/taler-wallet-webextension/src/components/SelectList.tsx +++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx @@ -14,13 +14,14 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { i18n } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { NiceSelect } from "./styled"; interface Props { value?: string; onChange: (s: string) => void; - label: string; + label: VNode; list: { [label: string]: string; }; @@ -58,7 +59,7 @@ export function SelectList({ {value === undefined || (canBeNull && ( <option selected disabled> - Select one option + <i18n.Translate>Select one option</i18n.Translate> </option> // ) : ( // <option selected>{list[value]}</option> diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index 89d6235aa..abcca9c26 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -21,6 +21,7 @@ import { Timestamp, Transaction, TransactionType, + i18n, } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import imageBank from "../../static/img/ri-bank-line.svg"; @@ -133,7 +134,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { </LargeText> {props.pending && ( <LightText style={{ marginTop: 5, marginBottom: 5 }}> - Waiting for confirmation + <i18n.Translate>Waiting for confirmation</i18n.Translate> </LightText> )} <SmallLightText style={{ marginTop: 5 }}> @@ -195,7 +196,11 @@ function TransactionAmount(props: TransactionAmountProps): VNode { {sign} {Amounts.stringifyValue(props.amount)} </ExtraLargeText> - {props.pending && <div>PENDING</div>} + {props.pending && ( + <div> + <i18n.Translate>PENDING</i18n.Translate> + </div> + )} </Column> ); } |