aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-01-20 13:12:28 -0300
committerSebastian <sebasjm@gmail.com>2022-01-24 09:46:20 -0300
commite38be8d8ec1bdf1c854a2391ae9f4641cb69a249 (patch)
treec814b2945fb6f5aebb60419c680ab12c8a3309f2
parente263907017958585c1eaf3c3284314fab5d36c85 (diff)
using loadingerror
-rw-r--r--packages/taler-wallet-webextension/src/NavigationBar.tsx31
-rw-r--r--packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx21
-rw-r--r--packages/taler-wallet-webextension/src/components/LoadingError.tsx30
-rw-r--r--packages/taler-wallet-webextension/src/components/TransactionItem.tsx2
-rw-r--r--packages/taler-wallet-webextension/src/cta/Deposit.tsx4
-rw-r--r--packages/taler-wallet-webextension/src/cta/Pay.tsx98
-rw-r--r--packages/taler-wallet-webextension/src/cta/Withdraw.tsx33
7 files changed, 95 insertions, 124 deletions
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 <http://www.gnu.org/licenses/>
*/
-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);
}}
>
- <img style={{ height: "1.5em" }} src={arrowDown} />
+ <img
+ style={{
+ transform: !showErrorDetail ? undefined : "scaleY(-1)",
+ height: "1.5em",
+ }}
+ src={arrowDown}
+ />
</button>
)}
</div>
{showErrorDetail && (
<Fragment>
<div style={{ padding: 5, textAlign: "left" }}>
- <div>{error.message}</div>
- </div>
- {errorHint && (
- <div style={{ padding: 5, textAlign: "left" }}>
- <div>{errorHint}</div>
+ <div>
+ <b>{error.message}</b> {!errorHint ? "" : `: ${errorHint}`}{" "}
</div>
- )}
+ </div>
{devMode && (
<div style={{ textAlign: "left", overflowX: "auto" }}>
<pre>{JSON.stringify(error, undefined, 2)}</pre>
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 <http://www.gnu.org/licenses/>
+ */
+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 <ErrorTalerOperation title={title} error={error.details} />;
+ }
+ return <ErrorMessage title={title} description={error.message} />;
+}
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 (
- <HistoryRow href={Pages.transaction.replace(":tid", props.id)}>
+ <HistoryRow href={Pages.balance_transaction.replace(":tid", props.id)}>
<img src={props.iconPath} />
<Column>
<LargeText>
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<PreparePayResult | undefined>(
- undefined,
- );
const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
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]);
+
+ if (!hook) {
+ return <Loading />;
+ }
+
+ if (hook.hasError) {
+ return <LoadingError title="Could not load pay status" error={hook} />;
+ }
- const foundBalance = balanceWithoutError.find(
+ 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<void> => {
- 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 <span>missing pay uri</span>;
- }
-
- if (!payStatus) {
- if (payErrMsg instanceof OperationFailedError) {
- return (
- <WalletAction>
- <LogoHeader />
- <h2>{i18n.str`Digital cash payment`}</h2>
- <section>
- <ErrorTalerOperation
- title="Could not get the payment information for this order"
- error={payErrMsg?.operationError}
- />
- </section>
- </WalletAction>
- );
- }
- if (payErrMsg) {
- return (
- <WalletAction>
- <LogoHeader />
- <h2>{i18n.str`Digital cash payment`}</h2>
- <section>
- <p>Could not get the payment information for this order</p>
- <ErrorBox>{payErrMsg}</ErrorBox>
- </section>
- </WalletAction>
- );
- }
- return <span>Loading payment information ...</span>;
- }
const onClick = async (): Promise<void> => {
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 (
<PaymentRequestView
- uri={talerPayUri}
- payStatus={payStatus}
+ uri={talerPayUri!}
+ payStatus={hook.response.payStatus}
payResult={payResult}
onClick={onClick}
goToWalletManualWithdraw={goToWalletManualWithdraw}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 0a06bd577..a4ee640ca 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -30,6 +30,8 @@ import {
} from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
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 { SelectList } from "../components/SelectList";
@@ -237,19 +239,14 @@ export function WithdrawPageWithParsedURI({
});
if (!detailsHook) {
- return (
- <span>
- <i18n.Translate>Getting withdrawal details.</i18n.Translate>
- </span>
- );
+ return <Loading />;
}
if (detailsHook.hasError) {
return (
- <span>
- <i18n.Translate>
- Problems getting details: {detailsHook.message}
- </i18n.Translate>
- </span>
+ <LoadingError
+ title="Could not load the withdrawal details"
+ error={detailsHook}
+ />
);
}
@@ -315,21 +312,17 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
);
}
if (!uriInfoHook) {
- return (
- <span>
- <i18n.Translate>Loading...</i18n.Translate>
- </span>
- );
+ return <Loading />;
}
if (uriInfoHook.hasError) {
return (
- <span>
- <i18n.Translate>
- This URI is not valid anymore: {uriInfoHook.message}
- </i18n.Translate>
- </span>
+ <LoadingError
+ title="Could not get the info from the URI"
+ error={uriInfoHook}
+ />
);
}
+
return (
<WithdrawPageWithParsedURI
uri={talerWithdrawUri}