From 578031cc103efcbcd34be1bf7efd91facfa8b87c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 21 Jun 2024 16:04:23 -0300 Subject: addressing marc comments --- packages/bank-ui/src/pages/OperationState/index.ts | 2 + packages/bank-ui/src/pages/OperationState/state.ts | 2 + .../bank-ui/src/pages/OperationState/views.tsx | 104 +++++++++++++-------- packages/bank-ui/src/pages/QrCodeSection.tsx | 15 +-- packages/bank-ui/src/pages/WalletWithdrawForm.tsx | 3 +- 5 files changed, 78 insertions(+), 48 deletions(-) (limited to 'packages/bank-ui') diff --git a/packages/bank-ui/src/pages/OperationState/index.ts b/packages/bank-ui/src/pages/OperationState/index.ts index 38f698a04..2dce76a62 100644 --- a/packages/bank-ui/src/pages/OperationState/index.ts +++ b/packages/bank-ui/src/pages/OperationState/index.ts @@ -41,6 +41,7 @@ export interface Props { onAuthorizationRequired: () => void; routeClose: RouteDefinition; onAbort: () => void; + focus?: boolean; routeHere: RouteDefinition<{ wopid: string }>; } @@ -79,6 +80,7 @@ export namespace State { status: "ready"; error: undefined; uri: WithdrawUriResult; + focus?: boolean; onAbort: () => Promise< TalerCoreBankErrorsByMethod<"abortWithdrawalById"> | undefined >; diff --git a/packages/bank-ui/src/pages/OperationState/state.ts b/packages/bank-ui/src/pages/OperationState/state.ts index 540856ec8..6856f5f59 100644 --- a/packages/bank-ui/src/pages/OperationState/state.ts +++ b/packages/bank-ui/src/pages/OperationState/state.ts @@ -40,6 +40,7 @@ export function useComponentState({ currency, routeClose, onAbort, + focus, routeHere, onAuthorizationRequired, }: Props): utils.RecursiveState { @@ -201,6 +202,7 @@ export function useComponentState({ error: undefined, uri: parsedUri, routeClose, + focus, onAbort: !creds ? async () => { onAbort(); diff --git a/packages/bank-ui/src/pages/OperationState/views.tsx b/packages/bank-ui/src/pages/OperationState/views.tsx index 62308eca6..88f34ae26 100644 --- a/packages/bank-ui/src/pages/OperationState/views.tsx +++ b/packages/bank-ui/src/pages/OperationState/views.tsx @@ -37,6 +37,7 @@ import { useBankState } from "../../hooks/bank-state.js"; import { usePreferences } from "../../hooks/preferences.js"; import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js"; import { State } from "./index.js"; +import { doAutoFocus } from "../PaytoWireTransferForm.js"; export function InvalidPaytoView({ payto }: State.InvalidPayto) { return
Payto from server is not valid "{payto}"
; @@ -338,7 +339,11 @@ export function ConfirmedView({ routeClose }: State.Confirmed) { ); } -export function ReadyView({ uri, onAbort: doAbort }: State.Ready): VNode { +export function ReadyView({ + uri, + focus, + onAbort: doAbort, +}: State.Ready): VNode { const { i18n } = useTranslationContext(); const walletInegrationApi = useTalerWalletIntegrationAPI(); const [notification, notify, errorHandler] = useLocalNotification(); @@ -387,60 +392,79 @@ export function ReadyView({ uri, onAbort: doAbort }: State.Ready): VNode { -
- -
- -
-
+
+

- On this device + + If you have a Taler wallet installed on this device +

-
-
-

- - If you are using a web browser on desktop you can also - -

-
-
+
+

+ + Your wallet will display the details of the transaction + including the fees (if applicable). If you do not yet have a + wallet, please follow the instructions + {" "} - Start + on this page -

+ . +

+
+
+ + + + Withdraw +
-
-
+ +
+

- On a mobile phone + + Or if you have the Taler wallet on another device +

-
-
-

- - Scan the QR code with your mobile device. - -

-
+
+ + Scan the QR below to start the withdrawal. +
+
+ +
); diff --git a/packages/bank-ui/src/pages/QrCodeSection.tsx b/packages/bank-ui/src/pages/QrCodeSection.tsx index 2a21295c7..0d14f52d8 100644 --- a/packages/bank-ui/src/pages/QrCodeSection.tsx +++ b/packages/bank-ui/src/pages/QrCodeSection.tsx @@ -76,11 +76,12 @@ export function QrCodeSection({ return ( +

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

@@ -88,19 +89,19 @@ export function QrCodeSection({ Your wallet will display the details of the transaction including the fees (if applicable). If you do not yet have a - wallet, please follow the instructions on - + wallet, please follow the instructions + {" "} - this page + on this page .

-
+