fix: #7875 - show retry on pending state

packages/taler-wallet-webextension/src/platform/chrome.ts

@@ -774,6 +774,7 @@ function listenNetworkConnectionState(
   function notifyOnline() {
     notify("on");
   }
+  notify(window.navigator.onLine ? "on" : "off");
   window.addEventListener("offline", notifyOffline);
   window.addEventListener("online", notifyOnline);
   return () => {

packages/taler-wallet-webextension/src/svg/refresh_24px.inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>

packages/taler-wallet-webextension/src/svg/refresh_outlined_24px.inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>

packages/taler-wallet-webextension/src/svg/refresh_rounded_24px.inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35c-1.63-1.63-3.94-2.57-6.48-2.31-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20c3.19 0 5.93-1.87 7.21-4.56.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53-1.13 2.43-3.84 3.97-6.8 3.31-2.22-.49-4.01-2.3-4.48-4.52C5.31 9.44 8.26 6 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71l-.64.65z"/></svg>

packages/taler-wallet-webextension/src/svg/refresh_sharp_24px.inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>

packages/taler-wallet-webextension/src/svg/refresh_two_tone_24px.inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -43,14 +43,14 @@ import {
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { styled } from "@linaria/react";
-import { differenceInSeconds, isPast } from "date-fns";
+import { isPast } from "date-fns";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import emptyImg from "../../static/img/empty.png";
 import { Amount } from "../components/Amount.js";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
-import { CopyButton } from "../components/CopyButton.js";
 import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js";
+import { EnabledBySettings } from "../components/EnabledBySettings.js";
 import { Loading } from "../components/Loading.js";
 import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js";
 import { QR } from "../components/QR.js";
@@ -59,24 +59,29 @@ import {
   CenteredDialog,
   ErrorBox,
   InfoBox,
+  Link,
   ListOfProducts,
   Overlay,
   Row,
   SmallLightText,
   SubTitle,
-  SuccessBox,
+  SvgIcon,
   WarningBox,
 } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
 import { alertFromError, useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { useSettings } from "../hooks/useSettings.js";
 import { Button } from "../mui/Button.js";
 import { SafeHandler } from "../mui/handlers.js";
 import { Pages } from "../NavigationBar.js";
 import { assertUnreachable } from "../utils/index.js";
-import { EnabledBySettings } from "../components/EnabledBySettings.js";
+import refreshIcon from "../svg/refresh_24px.inline.svg";
-import { useSettings } from "../hooks/useSettings.js";
+import refreshIcon1 from "../svg/refresh_outlined_24px.inline.svg";
+import refreshIcon2 from "../svg/refresh_rounded_24px.inline.svg";
+import refreshIcon3 from "../svg/refresh_sharp_24px.inline.svg";
+import refreshIcon4 from "../svg/refresh_two_tone_24px.inline.svg";
 
 interface Props {
   tid: string;
@@ -271,7 +276,16 @@ function TransactionTemplate({
         )}
         {transaction.txState.major === TransactionMajorState.Pending && (
           <WarningBox>
-            <i18n.Translate>This transaction is not completed</i18n.Translate>
+            <div style={{ justifyContent: "center", lineHeight: "25px" }}>
+              <i18n.Translate>This transaction is not completed</i18n.Translate>
+              <Link onClick={onRetry}>
+                <SvgIcon
+                  title={i18n.str`Retry`}
+                  dangerouslySetInnerHTML={{ __html: refreshIcon }}
+                  color="black"
+                />
+              </Link>
+            </div>
           </WarningBox>
         )}
         {transaction.txState.major === TransactionMajorState.Aborted && (
@@ -360,14 +374,6 @@ function TransactionTemplate({
       <footer>
         <div />
         <div>
-          {showButton.retry && (
-            <Button
-              variant="contained"
-              onClick={safely("retry transaction", onRetry)}
-            >
-              <i18n.Translate>Retry</i18n.Translate>
-            </Button>
-          )}
           {showButton.abort && (
             <Button
               variant="contained"
@@ -1937,7 +1943,6 @@ function getShowButtonStates(transaction: Transaction) {
   let abort = false;
   let fail = false;
   let resume = false;
-  let retry = false;
   let remove = false;
   let suspend = false;
 
@@ -1959,14 +1964,13 @@ function getShowButtonStates(transaction: Transaction) {
         fail = true;
         break;
       case TransactionAction.Retry:
-        retry = true;
         break;
       default:
         assertUnreachable(a);
         break;
     }
   });
-  return { abort, fail, resume, retry, remove, suspend };
+  return { abort, fail, resume, remove, suspend };
 }
 
 function ShowWithdrawalDetailForBankIntegrated({