From 5969a44391f32d931d0b26416fb3e1528f4a32a2 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 6 Dec 2022 11:25:05 -0300 Subject: using web-utils in demobank --- packages/demobank-ui/src/pages/home/index.tsx | 234 +++++++++++--------------- 1 file changed, 102 insertions(+), 132 deletions(-) (limited to 'packages/demobank-ui/src/pages/home/index.tsx') diff --git a/packages/demobank-ui/src/pages/home/index.tsx b/packages/demobank-ui/src/pages/home/index.tsx index 8f522c07c..8b2ffefac 100644 --- a/packages/demobank-ui/src/pages/home/index.tsx +++ b/packages/demobank-ui/src/pages/home/index.tsx @@ -27,13 +27,16 @@ import { } from "preact/hooks"; import talerLogo from "../../assets/logo-white.svg"; import { LangSelectorLikePy as LangSelector } from "../../components/menu/LangSelector.js"; -import { QR } from "../../components/QR.js"; -import { useLocalStorage, useNotNullLocalStorage } from "../../hooks/index.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; -import "../../scss/main.scss"; +import { + useLocalStorage, + useNotNullLocalStorage, +} from "../../hooks/useLocalStorage.js"; +// import { Translate, useTranslator } from "../../i18n/index.js"; +import { useTranslationContext } from "../../context/translation.js"; import { Amounts, HttpStatusCode, parsePaytoUri } from "@gnu-taler/taler-util"; import { createHashHistory } from "history"; import Router, { Route, route } from "preact-router"; +import { QrCodeSection } from "./QrCodeSection.js"; interface BankUiSettings { allowRegistrations: boolean; @@ -987,7 +990,7 @@ async function registrationCall( function ErrorBanner(Props: any): VNode | null { const [pageState, pageStateSetter] = Props.pageState; - // const i18n = useTranslator(); + // const { i18n } = useTranslationContext(); if (!pageState.error) return null; const rval = ( @@ -1041,7 +1044,7 @@ function StatusBanner(Props: any): VNode | null { } function BankFrame(Props: any): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [pageState, pageStateSetter] = useContext(PageContext); console.log("BankFrame state", pageState); const logOut = ( @@ -1062,7 +1065,7 @@ function BankFrame(Props: any): VNode { }; }); }} - >{i18n`Logout`} + >{i18n.str`Logout`} ); @@ -1080,7 +1083,7 @@ function BankFrame(Props: any): VNode { class="demobar" style="display: flex; flex-direction: row; justify-content: space-between;" > - +

@@ -1089,7 +1092,7 @@ function BankFrame(Props: any): VNode {

{maybeDemoContent(

- + This part of the demo shows how a bank that supports Taler directly would work. In addition to using your own bank account, you can also see the transaction history of some{" "} @@ -1100,14 +1103,14 @@ function BankFrame(Props: any): VNode { Public Accounts . - +

, )}
{i18n`Taler( undefined, ); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { focus, backendState } = Props; const amountRegex = "^[0-9]+(.[0-9]+)?$"; const ibanRegex = "^[A-Z][A-Z][0-9]+$"; @@ -1193,17 +1196,17 @@ function PaytoWireTransfer(Props: any): VNode { ? undefined : undefinedIfEmpty({ iban: !submitData.iban - ? i18n`Missing IBAN` + ? i18n.str`Missing IBAN` : !/^[A-Z0-9]*$/.test(submitData.iban) - ? i18n`IBAN should have just uppercased letters and numbers` + ? i18n.str`IBAN should have just uppercased letters and numbers` : undefined, - subject: !submitData.subject ? i18n`Missing subject` : undefined, + subject: !submitData.subject ? i18n.str`Missing subject` : undefined, amount: !submitData.amount - ? i18n`Missing amount` + ? i18n.str`Missing amount` : !(parsedAmount = Amounts.parse(`${currency}:${submitData.amount}`)) - ? i18n`Amount is not valid` + ? i18n.str`Amount is not valid` : Amounts.isZero(parsedAmount) - ? i18n`Should be greater than 0` + ? i18n.str`Should be greater than 0` : undefined, }); @@ -1212,7 +1215,7 @@ function PaytoWireTransfer(Props: any): VNode {

-   +  
-   +  
-   +   - {i18n`Want to try the raw payto://-format?`} + {i18n.str`Want to try the raw payto://-format?`}

@@ -1366,18 +1369,18 @@ function PaytoWireTransfer(Props: any): VNode { const errorsPayto = undefinedIfEmpty({ rawPaytoInput: !rawPaytoInput - ? i18n`Missing payto address` + ? i18n.str`Missing payto address` : !parsePaytoUri(rawPaytoInput) - ? i18n`Payto does not follow the pattern` + ? i18n.str`Payto does not follow the pattern` : undefined, }); return (
-

{i18n`Transfer money to account identified by payto:// URI:`}

+

{i18n.str`Transfer money to account identified by payto:// URI:`}

-   +   { rawPaytoInputSetter(e.currentTarget.value); @@ -1410,7 +1413,7 @@ function PaytoWireTransfer(Props: any): VNode { class="pure-button pure-button-primary" type="submit" disabled={!!errorsPayto} - value={i18n`Send`} + value={i18n.str`Send`} onClick={async () => { // empty string evaluates to false. if (!rawPaytoInput) { @@ -1444,7 +1447,7 @@ function PaytoWireTransfer(Props: any): VNode { })); }} > - {i18n`Use wire-transfer form?`} + {i18n.str`Use wire-transfer form?`}

@@ -1459,7 +1462,7 @@ function PaytoWireTransfer(Props: any): VNode { function TalerWithdrawalConfirmationQuestion(Props: any): VNode { const [pageState, pageStateSetter] = useContext(PageContext); const { backendState } = Props; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const captchaNumbers = { a: Math.floor(Math.random() * 10), b: Math.floor(Math.random() * 10), @@ -1468,15 +1471,15 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode { return ( -

{i18n`Confirm Withdrawal`}

+

{i18n.str`Confirm Withdrawal`}

-

{i18n`Authorize withdrawal by solving challenge`}

+

{i18n.str`Authorize withdrawal by solving challenge`}

- + A this point, a real bank would ask for an additional authentication proof (PIN/TAN, one time password, ..), instead of a simple calculation. - +

@@ -1552,40 +1555,6 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode { ); } -function QrCodeSection({ - talerWithdrawUri, - abortButton, -}: { - talerWithdrawUri: string; - abortButton: h.JSX.Element; -}): VNode { - const i18n = useTranslator(); - useEffect(() => { - //Taler Wallet WebExtension is listening to headers response and tab updates. - //In the SPA there is no header response with the Taler URI so - //this hack manually triggers the tab update after the QR is in the DOM. - window.location.hash = `/account/${new Date().getTime()}`; - }, []); - - return ( -
-

{i18n`Transfer to Taler Wallet`}

-
-
-

{i18n`Use this QR code to withdraw to your mobile wallet:`}

- {QR({ text: talerWithdrawUri })} -

- Click {i18n`this link`}{" "} - to open your Taler wallet! -

-
- {abortButton} -
-
-
- ); -} - /** * Offer the QR code (and a clickable taler://-link) to * permit the passing of exchange and reserve details to @@ -1595,7 +1564,7 @@ function TalerWithdrawalQRCode(Props: any): VNode { // turns true when the wallet POSTed the reserve details: const [pageState, pageStateSetter] = useContext(PageContext); const { withdrawalId, talerWithdrawUri, accountLabel, backendState } = Props; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const abortButton = ( {i18n`Abort`} + >{i18n.str`Abort`} ); console.log(`Showing withdraw URI: ${talerWithdrawUri}`); @@ -1629,7 +1598,7 @@ function TalerWithdrawalQRCode(Props: any): VNode { ...prevState, error: { - title: i18n`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, + title: i18n.str`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, }, })); return ( @@ -1643,7 +1612,7 @@ function TalerWithdrawalQRCode(Props: any): VNode { // data didn't arrive yet and wallet didn't communicate: if (typeof data === "undefined") - return

{i18n`Waiting the bank to create the operation...`}

; + return

{i18n.str`Waiting the bank to create the operation...`}

; /** * Wallet didn't communicate withdrawal details yet: @@ -1657,7 +1626,7 @@ function TalerWithdrawalQRCode(Props: any): VNode { withdrawalInProgress: false, error: { - title: i18n`This withdrawal was aborted!`, + title: i18n.str`This withdrawal was aborted!`, }, }; }); @@ -1680,7 +1649,7 @@ function TalerWithdrawalQRCode(Props: any): VNode { function WalletWithdraw(Props: any): VNode { const { backendState, pageStateSetter, focus } = Props; const currency = useContext(CurrencyContext); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); let submitAmount = "5.00"; const amountRegex = "^[0-9]+(.[0-9]+)?$"; @@ -1691,7 +1660,8 @@ function WalletWithdraw(Props: any): VNode { return (

-   + +   { submitAmount = validateAmount(submitAmount); /** @@ -1753,7 +1723,7 @@ function WalletWithdraw(Props: any): VNode { function PaymentOptions(Props: any): VNode { const { backendState, pageStateSetter, focus } = Props; const currency = useContext(CurrencyContext); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">( "charge-wallet", @@ -1769,7 +1739,7 @@ function PaymentOptions(Props: any): VNode { setTab("charge-wallet"); }} > - {i18n`Obtain digital cash`} + {i18n.str`Obtain digital cash`}

{tab === "charge-wallet" && (
-

{i18n`Obtain digital cash`}

+

{i18n.str`Obtain digital cash`}

-

{i18n`Transfer to bank account`}

+

{i18n.str`Transfer to bank account`}

- {i18n`Register`} + {i18n.str`Register`} ); @@ -1834,7 +1804,7 @@ function undefinedIfEmpty(obj: T): T | undefined { function LoginForm(Props: any): VNode { const { backendStateSetter, pageStateSetter } = Props; const [submitData, submitDataSetter] = useCredentialsRequestType(); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const ref = useRef(null); useEffect(() => { ref.current?.focus(); @@ -1843,17 +1813,17 @@ function LoginForm(Props: any): VNode { const errors = !submitData ? undefined : undefinedIfEmpty({ - username: !submitData.username ? i18n`Missing username` : undefined, - password: !submitData.password ? i18n`Missing password` : undefined, + username: !submitData.username ? i18n.str`Missing username` : undefined, + password: !submitData.password ? i18n.str`Missing password` : undefined, }); return (