diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
7 files changed, 39 insertions, 19 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 48360f7c7..f55f5c846 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -17,7 +17,7 @@ import { PaytoUri } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; -import { useTranslationContext } from "../context/translation.js"; +import { useTranslationContext } from "../context/translation"; import { CopiedIcon, CopyIcon } from "../svg"; import { ButtonBox, TooltipRight } from "./styled"; diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx index b5ad7cda7..dc42b9ef7 100644 --- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -14,8 +14,8 @@ 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 { useTranslationContext } from "../context/translation"; export function DebugCheckbox({ enabled, @@ -24,6 +24,8 @@ export function DebugCheckbox({ enabled: boolean; onToggle: () => void; }): VNode { + const { i18n } = useTranslationContext(); + return ( <div> <input diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx index b136ebc24..0998cab7b 100644 --- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx +++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx @@ -14,8 +14,9 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { i18n, WalletDiagnostics } from "@gnu-taler/taler-util"; +import { WalletDiagnostics } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; +import { useTranslationContext } from "../context/translation"; import { PageLink } from "../renderHtml"; interface Props { @@ -24,6 +25,7 @@ interface Props { } export function Diagnostics({ timedOut, diagnostics }: Props): VNode { + const { i18n } = useTranslationContext(); if (timedOut) { return ( <p> diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx index 8d45cae90..8f342ef28 100644 --- a/packages/taler-wallet-webextension/src/components/EditableText.tsx +++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx @@ -14,9 +14,9 @@ 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"; +import { useTranslationContext } from "../context/translation"; interface Props { value: string; @@ -32,6 +32,7 @@ export function EditableText({ label, description, }: Props): VNode { + const { i18n } = useTranslationContext(); const [editing, setEditing] = useState(false); const ref = useRef<HTMLInputElement>(null); let InputText; diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx index 7504034a0..d28953a10 100644 --- a/packages/taler-wallet-webextension/src/components/Loading.tsx +++ b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -13,13 +13,30 @@ 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"; +import { Fragment, h, VNode } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import { useTranslationContext } from "../context/translation"; +import { CenteredText } from "./styled"; export function Loading(): VNode { - return ( - <div> - <i18n.Translate>Loading</i18n.Translate>... - </div> - ); + const { i18n } = useTranslationContext(); + const [tooLong, setTooLong] = useState(false); + useEffect(() => { + const id = setTimeout(() => { + setTooLong(true); + }, 500); + return () => { + clearTimeout(id); + }; + }); + if (tooLong) { + return ( + <section style={{ margin: "auto" }}> + <CenteredText> + <i18n.Translate>Loading</i18n.Translate>... + </CenteredText> + </section> + ); + } + return <Fragment />; } diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx index 676fd672f..122b473b1 100644 --- a/packages/taler-wallet-webextension/src/components/SelectList.tsx +++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx @@ -14,8 +14,8 @@ 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 { useTranslationContext } from "../context/translation"; import { NiceSelect } from "./styled"; interface Props { @@ -39,6 +39,7 @@ export function SelectList({ description, canBeNull, }: Props): VNode { + const { i18n } = useTranslationContext(); return ( <Fragment> <label diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index b17dfce88..42afe5eaf 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -21,23 +21,18 @@ import { Timestamp, Transaction, TransactionType, - i18n, } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import imageBank from "../../static/img/ri-bank-line.svg"; -import imageHandHeart from "../../static/img/ri-hand-heart-line.svg"; -import imageRefresh from "../../static/img/ri-refresh-line.svg"; -import imageRefund from "../../static/img/ri-refund-2-line.svg"; -import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg"; +import { useTranslationContext } from "../context/translation"; import { Avatar } from "../mui/Avatar"; import { Pages } from "../NavigationBar"; import { Column, ExtraLargeText, HistoryRow, - SmallLightText, LargeText, LightText, + SmallLightText, } from "./styled"; import { Time } from "./Time"; @@ -121,6 +116,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode { } function TransactionLayout(props: TransactionLayoutProps): VNode { + const { i18n } = useTranslationContext(); return ( <HistoryRow href={Pages.balance_transaction.replace(":tid", props.id)} @@ -183,6 +179,7 @@ interface TransactionAmountProps { } function TransactionAmount(props: TransactionAmountProps): VNode { + const { i18n } = useTranslationContext(); let sign: string; switch (props.debitCreditIndicator) { case "credit": |