From e38be8d8ec1bdf1c854a2391ae9f4641cb69a249 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 20 Jan 2022 13:12:28 -0300 Subject: [PATCH] using loadingerror --- .../src/NavigationBar.tsx | 31 +++--- .../src/components/ErrorTalerOperation.tsx | 21 ++-- .../src/components/LoadingError.tsx | 30 ++++++ .../src/components/TransactionItem.tsx | 2 +- .../src/cta/Deposit.tsx | 4 - .../taler-wallet-webextension/src/cta/Pay.tsx | 98 +++++-------------- .../src/cta/Withdraw.tsx | 33 +++---- 7 files changed, 95 insertions(+), 124 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/LoadingError.tsx diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index a25790852..e507bf45b 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -30,28 +30,29 @@ import { PopupNavigation } from "./components/styled"; export enum Pages { welcome = "/welcome", + balance = "/balance", balance_history = "/balance/history/:currency", - manual_withdraw = "/balance/manual-withdraw/:currency?", - deposit = "/balance/deposit/:currency", - transaction = "/balance/transaction/:tid", - settings = "/settings", + balance_manual_withdraw = "/balance/manual-withdraw/:currency?", + balance_deposit = "/balance/deposit/:currency", + balance_transaction = "/balance/transaction/:tid", + dev = "/dev", - cta = "/cta/:action", + backup = "/backup", + backup_provider_detail = "/backup/provider/:pid", + backup_provider_add = "/backup/provider/add", + last_activity = "/last-activity", - provider_detail = "/provider/:pid", - provider_add = "/provider/add", - exchange_add = "/exchange/add", - reset_required = "/reset-required", - payback = "/payback", - return_coins = "/return-coins", + settings = "/settings", + settings_exchange_add = "/settings/exchange/add", - pay = "/pay", - refund = "/refund", - tips = "/tip", - withdraw = "/withdraw", + cta = "/cta/:action", + cta_pay = "/cta/pay", + cta_refund = "/cta/refund", + cta_tips = "/cta/tip", + cta_withdraw = "/cta/withdraw", } interface TabProps { diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx index 8f61c7133..a7b66ea3d 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx @@ -13,8 +13,8 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see */ -import { TalerErrorCode, TalerErrorDetails } from "@gnu-taler/taler-util"; -import { VNode, h, Fragment } from "preact"; +import { TalerErrorDetails } from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import arrowDown from "../../static/img/chevron-down.svg"; import { useDevContext } from "../context/devContext"; @@ -45,20 +45,23 @@ export function ErrorTalerOperation({ setShowErrorDetail((v) => !v); }} > - + )} {showErrorDetail && (
-
{error.message}
-
- {errorHint && ( -
-
{errorHint}
+
+ {error.message} {!errorHint ? "" : `: ${errorHint}`}{" "}
- )} +
{devMode && ( 
{JSON.stringify(error, undefined, 2)}
diff --git a/packages/taler-wallet-webextension/src/components/LoadingError.tsx b/packages/taler-wallet-webextension/src/components/LoadingError.tsx new file mode 100644 index 000000000..6f572b882 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/LoadingError.tsx @@ -0,0 +1,30 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ +import { h, VNode } from "preact"; +import { HookError } from "../hooks/useAsyncAsHook"; +import { ErrorMessage } from "./ErrorMessage"; +import { ErrorTalerOperation } from "./ErrorTalerOperation"; + +export interface Props { + title: string; + error: HookError; +} +export function LoadingError({ title, error }: Props): VNode { + if (error.operational) { + return ; + } + return ; +} diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx index 68a4f8fad..206dcb0c5 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx @@ -127,7 +127,7 @@ export function TransactionItem(props: { function TransactionLayout(props: TransactionLayoutProps): VNode { return ( - + diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx index 3696b0c2d..39ccdbac0 100644 --- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx +++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx @@ -29,7 +29,6 @@ import { Amounts, amountToPretty, ConfirmPayResult, - ConfirmPayResultDone, ConfirmPayResultType, ContractTerms, i18n, @@ -174,11 +173,8 @@ export interface PaymentRequestViewProps { balance: AmountJson | undefined; } export function PaymentRequestView({ - uri, payStatus, payResult, - onClick, - balance, }: PaymentRequestViewProps): VNode { let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw); const contractTerms: ContractTerms = payStatus.contractTerms; diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 6e73b5566..c0fcca169 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx @@ -40,14 +40,14 @@ import { } from "@gnu-taler/taler-util"; import { OperationFailedError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; -import { ErrorTalerOperation } from "../components/ErrorTalerOperation"; +import { useState } from "preact/hooks"; +import { Loading } from "../components/Loading"; +import { LoadingError } from "../components/LoadingError"; import { LogoHeader } from "../components/LogoHeader"; import { Part } from "../components/Part"; import { QR } from "../components/QR"; import { ButtonSuccess, - ErrorBox, LinkSuccess, SmallLightText, SuccessBox, @@ -84,10 +84,8 @@ const doPayment = async ( export function PayPage({ talerPayUri, goToWalletManualWithdraw, + goBack, }: Props): VNode { - const [payStatus, setPayStatus] = useState( - undefined, - ); const [payResult, setPayResult] = useState( undefined, ); @@ -95,83 +93,33 @@ export function PayPage({ OperationFailedError | string | undefined >(undefined); - const balance = useAsyncAsHook(wxApi.getBalance, [ - NotificationType.CoinWithdrawn, - ]); - const balanceWithoutError = balance?.hasError - ? [] - : balance?.response.balances || []; + const hook = useAsyncAsHook(async () => { + if (!talerPayUri) throw Error("Missing pay uri"); + const payStatus = await wxApi.preparePay(talerPayUri); + const balance = await wxApi.getBalance(); + return { payStatus, balance }; + }, [NotificationType.CoinWithdrawn]); - const foundBalance = balanceWithoutError.find( + if (!hook) { + return ; + } + + if (hook.hasError) { + return ; + } + + const foundBalance = hook.response.balance.balances.find( (b) => - payStatus && Amounts.parseOrThrow(b.available).currency === - Amounts.parseOrThrow(payStatus?.amountRaw).currency, + Amounts.parseOrThrow(hook.response.payStatus.amountRaw).currency, ); const foundAmount = foundBalance ? Amounts.parseOrThrow(foundBalance.available) : undefined; - // We use a string here so that dependency tracking for useEffect works properly - const foundAmountStr = foundAmount - ? Amounts.stringify(foundAmount) - : undefined; - - useEffect(() => { - if (!talerPayUri) return; - const doFetch = async (): Promise => { - try { - const p = await wxApi.preparePay(talerPayUri); - setPayStatus(p); - } catch (e) { - console.log("Got error while trying to pay", e); - if (e instanceof OperationFailedError) { - setPayErrMsg(e); - } - if (e instanceof Error) { - setPayErrMsg(e.message); - } - } - }; - doFetch(); - }, [talerPayUri, foundAmountStr]); - - if (!talerPayUri) { - return missing pay uri; - } - - if (!payStatus) { - if (payErrMsg instanceof OperationFailedError) { - return ( - - -

{i18n.str`Digital cash payment`}

-
- -
- - ); - } - if (payErrMsg) { - return ( - - -

{i18n.str`Digital cash payment`}

-
-

Could not get the payment information for this order

- {payErrMsg} -
- - ); - } - return Loading payment information ...; - } const onClick = async (): Promise => { try { - const res = await doPayment(payStatus); + const res = await doPayment(hook.response.payStatus); setPayResult(res); } catch (e) { console.error(e); @@ -183,8 +131,8 @@ export function PayPage({ return ( - Getting withdrawal details. - - ); + return ; } if (detailsHook.hasError) { return ( - - - Problems getting details: {detailsHook.message} - - + ); } @@ -315,21 +312,17 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode { ); } if (!uriInfoHook) { - return ( - - Loading... - - ); + return ; } if (uriInfoHook.hasError) { return ( - - - This URI is not valid anymore: {uriInfoHook.message} - - + ); } + return (