diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
4 files changed, 94 insertions, 34 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 609c82e10..3a15cf1fb 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -54,7 +54,9 @@ export function BankDetailsByPaytoType({ borderRadius: 4, }} > - <p style={{ marginTop: 0 }}>Bitcoin transfer details</p> + <p style={{ marginTop: 0 }}> + <i18n.Translate>Bitcoin transfer details</i18n.Translate> + </p> <p> <i18n.Translate> The exchange need a transaction with 3 output, one output is the @@ -140,7 +142,9 @@ export function BankDetailsByPaytoType({ borderRadius: 4, }} > - <p style={{ marginTop: 0 }}>Bank transfer details</p> + <p style={{ marginTop: 0 }}> + <i18n.Translate>Bank transfer details</i18n.Translate> + </p> <table> {accountPart} <Row diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 8d4121277..f95647d42 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -22,7 +22,7 @@ import { Grid } from "../mui/Grid.js"; import { Paper } from "../mui/Paper.js"; interface Props extends JSX.HTMLAttributes<HTMLDivElement> { - title?: string; + titleHead?: VNode; elements: { icon?: VNode; description: VNode; @@ -34,15 +34,18 @@ interface Props extends JSX.HTMLAttributes<HTMLDivElement> { }; } -export function Banner({ title, elements, confirm, ...rest }: Props): VNode { +export function Banner({ + titleHead, + elements, + confirm, + ...rest +}: Props): VNode { return ( <Fragment> <Paper elevation={0} {...rest}> - {title && ( + {titleHead && ( <Grid container> - <Grid item> - <Typography>{title}</Typography> - </Grid> + <Grid item>{titleHead}</Grid> </Grid> )} <Grid container columns={1}> diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index 05995395b..e9688da21 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx @@ -21,6 +21,7 @@ import { } from "@gnu-taler/taler-util"; import { Fragment, h, JSX, VNode } from "preact"; import { useEffect } from "preact/hooks"; +import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; import { Avatar } from "../mui/Avatar.js"; import { Typography } from "../mui/Typography.js"; @@ -67,9 +68,10 @@ export function PendingTransactionsView({ goToTransaction: (id: string) => Promise<void>; transactions: Transaction[]; }): VNode { + const { i18n } = useTranslationContext(); return ( <Banner - title="PENDING OPERATIONS" + titleHead={<i18n.Translate>PENDING OPERATIONS</i18n.Translate>} style={{ backgroundColor: "lightcyan", maxHeight: 150, diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx index b7d8376bd..7c1d2c6fc 100644 --- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx +++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx @@ -172,39 +172,54 @@ export function HiddenView({ showHandler }: States.Hidden): VNode { export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { const createdAt = AbsoluteTime.fromTimestamp(contractTerms.timestamp); + const { i18n } = useTranslationContext(); return ( <Modal title="Full detail" onClose={hideHandler}> <div style={{ overflowY: "auto", height: "95%", padding: 5 }}> <ContractTermsTable> <tr> - <td>Order Id</td> + <td> + <i18n.Translate>Order Id</i18n.Translate> + </td> <td>{contractTerms.orderId}</td> </tr> <tr> - <td>Summary</td> + <td> + <i18n.Translate>Summary</i18n.Translate> + </td> <td>{contractTerms.summary}</td> </tr> <tr> - <td>Amount</td> + <td> + <i18n.Translate>Amount</i18n.Translate> + </td> <td> <Amount value={contractTerms.amount} /> </td> </tr> <tr> - <td>Merchant name</td> + <td> + <i18n.Translate>Merchant name</i18n.Translate> + </td> <td>{contractTerms.merchant.name}</td> </tr> <tr> - <td>Merchant jurisdiction</td> + <td> + <i18n.Translate>Merchant jurisdiction</i18n.Translate> + </td> <td>{locationAsText(contractTerms.merchant.jurisdiction)}</td> </tr> <tr> - <td>Merchant address</td> + <td> + <i18n.Translate>Merchant address</i18n.Translate> + </td> <td>{locationAsText(contractTerms.merchant.address)}</td> </tr> <tr> - <td>Merchant logo</td> + <td> + <i18n.Translate>Merchant logo</i18n.Translate> + </td> <td> <div> <img @@ -215,15 +230,21 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Merchant website</td> + <td> + <i18n.Translate>Merchant website</i18n.Translate> + </td> <td>{contractTerms.merchant.website}</td> </tr> <tr> - <td>Merchant email</td> + <td> + <i18n.Translate>Merchant email</i18n.Translate> + </td> <td>{contractTerms.merchant.email}</td> </tr> <tr> - <td>Merchant public key</td> + <td> + <i18n.Translate>Merchant public key</i18n.Translate> + </td> <td> <span title={contractTerms.merchantPub}> {contractTerms.merchantPub.substring(0, 6)}... @@ -231,7 +252,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Delivery date</td> + <td> + <i18n.Translate>Delivery date</i18n.Translate> + </td> <td> {contractTerms.deliveryDate && ( <Time @@ -244,11 +267,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Delivery location</td> + <td> + <i18n.Translate>Delivery location</i18n.Translate> + </td> <td>{locationAsText(contractTerms.deliveryLocation)}</td> </tr> <tr> - <td>Products</td> + <td> + <i18n.Translate>Products</i18n.Translate> + </td> <td> {!contractTerms.products || contractTerms.products.length === 0 ? "none" @@ -258,7 +285,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Created at</td> + <td> + <i18n.Translate>Created at</i18n.Translate> + </td> <td> {contractTerms.timestamp && ( <Time @@ -271,7 +300,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Refund deadline</td> + <td> + <i18n.Translate>Refund deadline</i18n.Translate> + </td> <td> { <Time @@ -284,7 +315,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Auto refund</td> + <td> + <i18n.Translate>Auto refund</i18n.Translate> + </td> <td> { <Time @@ -302,7 +335,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Pay deadline</td> + <td> + <i18n.Translate>Pay deadline</i18n.Translate> + </td> <td> { <Time @@ -315,11 +350,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Fulfillment URL</td> + <td> + <i18n.Translate>Fulfillment URL</i18n.Translate> + </td> <td>{contractTerms.fulfillmentUrl}</td> </tr> <tr> - <td>Fulfillment message</td> + <td> + <i18n.Translate>Fulfillment message</i18n.Translate> + </td> <td>{contractTerms.fulfillmentMessage}</td> </tr> {/* <tr> @@ -327,19 +366,25 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { <td>{contractTerms.public_reorder_url}</td> </tr> */} <tr> - <td>Max deposit fee</td> + <td> + <i18n.Translate>Max deposit fee</i18n.Translate> + </td> <td> <Amount value={contractTerms.maxDepositFee} /> </td> </tr> <tr> - <td>Max fee</td> + <td> + <i18n.Translate>Max fee</i18n.Translate> + </td> <td> <Amount value={contractTerms.maxWireFee} /> </td> </tr> <tr> - <td>Minimum age</td> + <td> + <i18n.Translate>Minimum age</i18n.Translate> + </td> <td>{contractTerms.minimumAge}</td> </tr> {/* <tr> @@ -349,11 +394,15 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> */} <tr> - <td>Wire fee amortization</td> + <td> + <i18n.Translate>Wire fee amortization</i18n.Translate> + </td> <td>{contractTerms.wireFeeAmortization}</td> </tr> <tr> - <td>Auditors</td> + <td> + <i18n.Translate>Auditors</i18n.Translate> + </td> <td> {(contractTerms.allowedAuditors || []).map((e) => ( <Fragment key={e.auditorPub}> @@ -366,7 +415,9 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { </td> </tr> <tr> - <td>Exchanges</td> + <td> + <i18n.Translate>Exchanges</i18n.Translate> + </td> <td> {(contractTerms.allowedExchanges || []).map((e) => ( <Fragment key={e.exchangePub}> |