show better info on transaction error

2 files changed, 6 insertions, 3 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index a25e2ca80..656c57324 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -121,7 +121,7 @@ const transactionError = {
   code: 2000,
   details: "details",
   hint: "this is a hint for the error",
-  message: "message",
+  message: "this is the error message with get from the app",
 };
 
 export const Withdraw = createExample(TestedComponent, {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 02c78320a..6cc836f60 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -29,7 +29,7 @@ import { route } from "preact-router";
 import { useState } from "preact/hooks";
 import emptyImg from "../../static/img/empty.png";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
-import { ErrorMessage } from "../components/ErrorMessage";
+import { ErrorTalerOperation } from "../components/ErrorTalerOperation";
 import { Part } from "../components/Part";
 import {
   Button,
@@ -128,7 +128,10 @@ export function TransactionView({
     return (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
-          <ErrorMessage title={transaction?.error?.hint} />
+          <ErrorTalerOperation
+            title="There was an error trying to complete the transaction"
+            error={transaction?.error}
+          />
           {transaction.pending && (
             <WarningBox>This transaction is not completed</WarningBox>
           )}