using loadingerror

3 files changed, 43 insertions, 10 deletions

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>