From e39d5c488e2e425bd7febf694caadc17d5126401 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 20 Sep 2023 15:18:36 -0300 Subject: more ui --- packages/demobank-ui/src/pages/QrCodeSection.tsx | 126 +++++++++++++++-------- 1 file changed, 84 insertions(+), 42 deletions(-) (limited to 'packages/demobank-ui/src/pages/QrCodeSection.tsx') diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index c27984569..7c1b3bdc5 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -17,17 +17,19 @@ import { HttpStatusCode, stringifyWithdrawUri, + TranslatedString, WithdrawUriResult, } from "@gnu-taler/taler-util"; import { + notify, + notifyError, RequestError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { useEffect } from "preact/hooks"; import { QR } from "../components/QR.js"; import { useAccessAnonAPI } from "../hooks/access.js"; -import { notifyError } from "../hooks/notification.js"; import { buildRequestErrorMessage } from "../utils.js"; export function QrCodeSection({ @@ -49,47 +51,87 @@ export function QrCodeSection({ const talerWithdrawUri = stringifyWithdrawUri(withdrawUri); const { abortWithdrawal } = useAccessAnonAPI(); + + async function doAbort() { + try { + await abortWithdrawal(withdrawUri.withdrawalOperationId); + onAborted(); + } catch (error) { + if (error instanceof RequestError) { + notify( + buildRequestErrorMessage(i18n, error.cause, { + onClientError: (status) => + status === HttpStatusCode.Conflict + ? i18n.str`The reserve operation has been confirmed previously and can't be aborted` + : undefined, + }), + ); + } else { + notifyError( + i18n.str`Operation failed, please report`, + (error instanceof Error + ? error.message + : JSON.stringify(error)) as TranslatedString + ) + } + } + } + return ( -
-

{i18n.str`Charge your GNU Taler wallet`}

-
-
- - Continue with GNU Taler - -

{i18n.str`Or scan this QR code with your mobile to receive the coin in another device:`}

- - { - e.preventDefault(); - try { - await abortWithdrawal(withdrawUri.withdrawalOperationId); - onAborted(); - } catch (error) { - if (error instanceof RequestError) { - notifyError( - buildRequestErrorMessage(i18n, error.cause, { - onClientError: (status) => - status === HttpStatusCode.Conflict - ? i18n.str`The reserve operation has been confirmed previously and can't be aborted` - : undefined, - }), - ); - } else { - notifyError({ - title: i18n.str`Operation failed, please report`, - description: - error instanceof Error - ? error.message - : JSON.stringify(error), - }); - } - } - }} - >{i18n.str`Cancel`} + +
+
+

+ If you have a Taler wallet installed in this device +

+
+ + Click here to start + +
+
+

+ You will see the details of the operation in your wallet including the fees (if applies). + If you still one you can install it from here. +

+
+
+
+ +
+
+
+ +
+
+

+ Or if you have the wallet in another device +

+
+ Scan the QR below to start the withdrawal +
+
+ +
+
+
+
-
-
+ + + ); } -- cgit v1.2.3 From 56a6f47c7daae088c2017c0d9781ddcf7cee175b Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 21 Sep 2023 15:44:17 -0300 Subject: more ui --- packages/demobank-ui/src/components/Routing.tsx | 12 +- packages/demobank-ui/src/hooks/settings.ts | 8 +- .../demobank-ui/src/pages/AccountPage/views.tsx | 50 ++++++ packages/demobank-ui/src/pages/BankFrame.tsx | 133 ++++++++------- packages/demobank-ui/src/pages/HomePage.tsx | 20 +-- packages/demobank-ui/src/pages/PaymentOptions.tsx | 137 +++++++-------- packages/demobank-ui/src/pages/QrCodeSection.tsx | 106 ++++++++++++ .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 183 +++++++++++---------- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 159 +++++++++++++++--- .../demobank-ui/src/pages/admin/RemoveAccount.tsx | 2 +- 10 files changed, 553 insertions(+), 257 deletions(-) (limited to 'packages/demobank-ui/src/pages/QrCodeSection.tsx') diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx index b8e39948b..e1fd93737 100644 --- a/packages/demobank-ui/src/components/Routing.tsx +++ b/packages/demobank-ui/src/components/Routing.tsx @@ -76,9 +76,9 @@ export function Routing(): VNode { onContinue={() => { route("/account"); }} - onLoadNotOk={() => { - route("/account"); - }} + // onLoadNotOk={() => { + // route("/account"); + // }} /> )} /> @@ -108,9 +108,9 @@ export function Routing(): VNode { } else { return { - route(`/operation/${wopid}`); - }} + // onPendingOperationFound={(wopid) => { + // route(`/operation/${wopid}`); + // }} goToBusinessAccount={() => { route("/business"); }} diff --git a/packages/demobank-ui/src/hooks/settings.ts b/packages/demobank-ui/src/hooks/settings.ts index 43e803726..c2fd93a0c 100644 --- a/packages/demobank-ui/src/hooks/settings.ts +++ b/packages/demobank-ui/src/hooks/settings.ts @@ -29,20 +29,26 @@ import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser"; interface Settings { currentWithdrawalOperationId: string | undefined; showWithdrawalSuccess: boolean; + showDemoDescription: boolean; maxWithdrawalAmount: number; + fastWithdrawal: boolean; } export const codecForSettings = (): Codec => buildCodecForObject() .property("currentWithdrawalOperationId", codecOptional(codecForString())) .property("showWithdrawalSuccess", (codecForBoolean())) + .property("showDemoDescription", (codecForBoolean())) + .property("fastWithdrawal", (codecForBoolean())) .property("maxWithdrawalAmount", codecForNumber()) .build("Settings"); const defaultSettings: Settings = { currentWithdrawalOperationId: undefined, showWithdrawalSuccess: true, - maxWithdrawalAmount: 25 + showDemoDescription: true, + maxWithdrawalAmount: 25, + fastWithdrawal: false, }; const DEMOBANK_SETTINGS_KEY = buildStorageKey( diff --git a/packages/demobank-ui/src/pages/AccountPage/views.tsx b/packages/demobank-ui/src/pages/AccountPage/views.tsx index abd14848f..0187989af 100644 --- a/packages/demobank-ui/src/pages/AccountPage/views.tsx +++ b/packages/demobank-ui/src/pages/AccountPage/views.tsx @@ -23,6 +23,7 @@ import { State } from "./index.js"; import { CopyButton } from "../../components/CopyButton.js"; import { bankUiSettings } from "../../settings.js"; import { useBusinessAccountDetails } from "../../hooks/circuit.js"; +import { useSettings } from "../../hooks/settings.js"; export function InvalidIbanView({ error }: State.InvalidIban) { return ( @@ -78,9 +79,58 @@ function ImportantMessage(): VNode { } +function ShowDemoInfo():VNode { + const { i18n } = useTranslationContext(); + const [settings, updateSettings] = useSettings(); + if (!settings.showDemoDescription) return + return
+
+
+ +
+
+

+ This is a demo bank! +

+
+

+ + 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{" "} + Public Accounts. + +

+

+ +

+ +
+
+
+
+} + export function ReadyView({ account, limit, goToBusinessAccount }: State.Ready): VNode<{}> { + const { i18n } = useTranslationContext(); + return + + + ; diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index 4b23686d6..d1c94135b 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -27,7 +27,6 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import logo from "../assets/logo-2021.svg"; import { useAccountDetails } from "../hooks/access.js"; -const IS_PUBLIC_ACCOUNT_ENABLED = false; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined; @@ -142,24 +141,40 @@ export function BankFrame({