using loadingerror

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}