show error details in devmode

2 files changed, 47 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 656c57324..6f57df315 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -31,7 +31,12 @@ import {
   TransactionWithdrawal,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { ComponentChildren, h } from "preact";
+import { DevContextProviderForTesting } from "../context/devContext";
+import {
+  createExample,
+  createExampleWithCustomContext as createExampleInCustomContext,
+} from "../test-utils";
 import { TransactionView as TestedComponent } from "./Transaction";
 
 export default {
@@ -128,6 +133,25 @@ export const Withdraw = createExample(TestedComponent, {
   transaction: exampleData.withdraw,
 });
 
+export const WithdrawOneMinuteAgo = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    timestamp: {
+      t_ms: new Date().getTime() - 60 * 1000,
+    },
+  },
+});
+
+export const WithdrawOneMinuteAgoAndPending = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    timestamp: {
+      t_ms: new Date().getTime() - 60 * 1000,
+    },
+    pending: true,
+  },
+});
+
 export const WithdrawError = createExample(TestedComponent, {
   transaction: {
     ...exampleData.withdraw,
@@ -135,6 +159,18 @@ export const WithdrawError = createExample(TestedComponent, {
   },
 });
 
+export const WithdrawErrorInDevMode = createExampleInCustomContext(
+  TestedComponent,
+  {
+    transaction: {
+      ...exampleData.withdraw,
+      error: transactionError,
+    },
+  },
+  DevContextProviderForTesting,
+  { value: true },
+);
+
 export const WithdrawPendingManual = createExample(TestedComponent, {
   transaction: {
     ...exampleData.withdraw,
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 6cc836f60..22947d0c4 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -24,6 +24,7 @@ import {
   TransactionType,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
+import { differenceInSeconds } from "date-fns";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
 import { useState } from "preact/hooks";
@@ -110,6 +111,7 @@ export function TransactionView({
   onBack,
 }: WalletTransactionProps): VNode {
   const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
+
   function doCheckBeforeForget(): void {
     if (
       transaction.pending &&
@@ -120,11 +122,18 @@ export function TransactionView({
       onDelete();
     }
   }
+
   function TransactionTemplate({
     children,
   }: {
     children: ComponentChildren;
   }): VNode {
+    const showRetry =
+      transaction.error !== undefined ||
+      transaction.timestamp.t_ms === "never" ||
+      (transaction.pending &&
+        differenceInSeconds(new Date(), transaction.timestamp.t_ms) > 10);
+
     return (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
@@ -144,7 +153,7 @@ export function TransactionView({
             <i18n.Translate> &lt; Back </i18n.Translate>
           </Button>
           <div>
-            {transaction?.error ? (
+            {showRetry ? (
               <ButtonPrimary onClick={onRetry}>
                 <i18n.Translate>retry</i18n.Translate>
               </ButtonPrimary>