pretty and suspend/resume option

author: Sebastian <sebasjm@gmail.com> 2023-06-02 14:32:52 -0300
committer: Sebastian <sebasjm@gmail.com> 2023-06-02 14:32:52 -0300
commit: 81dd559c77908b7805690aa7fa1de54ce3a45580 (patch)
tree: 84d66deec9cca79e3f44d5b68219f4e928dc5a2a
parent: 1961f4744ca0db4666a2df4335c768ed86fc4e2f (diff)
9 files changed, 82 insertions, 74 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
index 7711498e1..fb9acbe83 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
@@ -86,7 +86,9 @@ export function useComponentState({
       onClick: pushAlertOnError(accept),
     },
     summary,
-    expiration: expiration ? AbsoluteTime.fromProtocolTimestamp(expiration) : undefined,
+    expiration: expiration
+      ? AbsoluteTime.fromProtocolTimestamp(expiration)
+      : undefined,
     cancel: {
       onClick: pushAlertOnError(onClose),
     },
diff --git a/packages/taler-wallet-webextension/src/hooks/useSettings.ts b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
index 7e7b26a39..5c1ed7924 100644
--- a/packages/taler-wallet-webextension/src/hooks/useSettings.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
@@ -41,7 +41,7 @@ export const codecForSettings = (): Codec<Settings> =>
     .property("langSelector", codecForBoolean())
     .property("showJsonOnError", codecForBoolean())
     .property("extendedAccountTypes", codecForBoolean())
-    .property("deleteActiveTransactions", codecForBoolean())
+    .property("suspendIndividualTransaction", codecForBoolean())
     .build("Settings");
 
 const SETTINGS_KEY = buildStorageKey("wallet-settings", codecForSettings());
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index e3e97264d..49108fa63 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -108,10 +108,7 @@ export interface Settings extends WebexWalletConfig {
   langSelector: boolean;
   showJsonOnError: boolean;
   extendedAccountTypes: boolean;
-  //WORKAROUND
-  //Able to delete tx in dev mode
-  //FIXME: remove this when DD37 is implemented
-  deleteActiveTransactions: boolean;
+  suspendIndividualTransaction: boolean;
 }
 
 export const defaultSettings: Settings = {
@@ -119,7 +116,7 @@ export const defaultSettings: Settings = {
   advanceMode: false,
   backup: false,
   langSelector: false,
-  deleteActiveTransactions: false,
+  suspendIndividualTransaction: false,
   showJsonOnError: false,
   extendedAccountTypes: false,
   walletAllowHttp: false,
diff --git a/packages/taler-wallet-webextension/src/pwa/index.html b/packages/taler-wallet-webextension/src/pwa/index.html
index abc6f97ba..4ffbe5205 100644
--- a/packages/taler-wallet-webextension/src/pwa/index.html
+++ b/packages/taler-wallet-webextension/src/pwa/index.html
@@ -7,11 +7,11 @@
         position: absolute;
         top: 0px;
         display: none;
-width: 100%;
-height: 100%;
-background-color: rgba(0,0,0,0.5);
-color:white;
-justify-content: center;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        justify-content: center;
       }
       .overlay > iframe {
         margin: auto;
@@ -21,21 +21,21 @@ justify-content: center;
   <body>
     <script>
       function openPopup() {
-        document.getElementById("popup-overlay").style.display = "flex"
+        document.getElementById("popup-overlay").style.display = "flex";
         window.frames["popup"].location = "popup.html";
-        window.frames["popup"]
+        window.frames["popup"];
       }
       function closePopup() {
-        document.getElementById("popup-overlay").style.display = "none"
+        document.getElementById("popup-overlay").style.display = "none";
       }
       function redirectWallet(url) {
-        window.frames["wallet"].location = url
+        window.frames["wallet"].location = url;
       }
       function openWallet() {
-        redirectWallet("wallet.html")
+        redirectWallet("wallet.html");
       }
       function closeWallet() {
-        redirectWallet("about:blank")
+        redirectWallet("about:blank");
       }
       function openPage() {
         window.frames["other"].location =
@@ -46,7 +46,7 @@ justify-content: center;
     <button value="asd" onclick="closeWallet();openWallet()">
       reload wallet page
     </button>
-<br />
+    <br />
     <iframe
       id="wallet-window"
       name="wallet"
@@ -54,7 +54,7 @@ justify-content: center;
       width="1000"
       height="100%"
     >
-     </iframe>
+    </iframe>
     <!-- <input id="page-url" type="text" />
     <button onclick="openPage()">open</button> -->
     <!-- <a
@@ -73,11 +73,11 @@ justify-content: center;
     <hr />
     <div class="overlay" id="popup-overlay">
       <iframe
-      id="popup-window"
-      name="popup"
-      src="about:blank"
-      width="500"
-      height="325"
+        id="popup-window"
+        name="popup"
+        src="about:blank"
+        width="500"
+        height="325"
       >
       </iframe>
     </div>
@@ -85,25 +85,24 @@ justify-content: center;
     <iframe src="tests.html" name="wallet" width="800" height="100%"> </iframe> -->
     <!-- <hr />
     <iframe src="stories.html" name="wallet" width="800" height="100%"> -->
-      <script type="module" src="background.dev.js"></script>
-      <script type="module">
-          if ("serviceWorker" in navigator) {
-            try {
-              const registration = await navigator.serviceWorker.register("sw.js", {
-                scope: "/app/",
-              });
-              if (registration.installing) {
-                console.log("Service worker installing");
-              } else if (registration.waiting) {
-                console.log("Service worker installed");
-              } else if (registration.active) {
-                console.log("Service worker active");
-              }
-            } catch (error) {
-              console.error(`Registration failed with ${error}`);
-            }
+    <script type="module" src="background.dev.js"></script>
+    <script type="module">
+      if ("serviceWorker" in navigator) {
+        try {
+          const registration = await navigator.serviceWorker.register("sw.js", {
+            scope: "/app/",
+          });
+          if (registration.installing) {
+            console.log("Service worker installing");
+          } else if (registration.waiting) {
+            console.log("Service worker installed");
+          } else if (registration.active) {
+            console.log("Service worker active");
           }
-
-      </script>
-    </body>
+        } catch (error) {
+          console.error(`Registration failed with ${error}`);
+        }
+      }
+    </script>
+  </body>
 </html>
diff --git a/packages/taler-wallet-webextension/src/pwa/manifest.json b/packages/taler-wallet-webextension/src/pwa/manifest.json
index 6823483bf..adf27e43f 100644
--- a/packages/taler-wallet-webextension/src/pwa/manifest.json
+++ b/packages/taler-wallet-webextension/src/pwa/manifest.json
@@ -9,19 +9,23 @@
   "start_url": "./",
   "manifest_version": 3,
   "minimum_chrome_version": "88",
-  "icons": [{
-    "src": "./static/img/taler-logo-48.png",
-    "type": "image/png",
-    "sizes": "48x48"
-  },{
-    "src": "./static/img/taler-logo-128.png",
-    "type": "image/png",
-    "sizes": "128x128"
-  },{
-    "src": "./static/img/taler-logo-512.png",
-    "type": "image/png",
-    "sizes": "512x512"
-  }],
+  "icons": [
+    {
+      "src": "./static/img/taler-logo-48.png",
+      "type": "image/png",
+      "sizes": "48x48"
+    },
+    {
+      "src": "./static/img/taler-logo-128.png",
+      "type": "image/png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "./static/img/taler-logo-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
   "protocol_handlers": [
     {
       "protocol": "web+taler",
diff --git a/packages/taler-wallet-webextension/src/pwa/static/font/import.css b/packages/taler-wallet-webextension/src/pwa/static/font/import.css
index 05edddb51..d726ebc5a 100644
--- a/packages/taler-wallet-webextension/src/pwa/static/font/import.css
+++ b/packages/taler-wallet-webextension/src/pwa/static/font/import.css
@@ -1,35 +1,35 @@
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url(/static/font/roboto-italic-400.ttf) format('truetype');
+  src: url(/static/font/roboto-italic-400.ttf) format("truetype");
 }
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/static/font/roboto-normal-300.ttf) format('truetype');
+  src: url(/static/font/roboto-normal-300.ttf) format("truetype");
 }
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/static/font/roboto-normal-400.ttf) format('truetype');
+  src: url(/static/font/roboto-normal-400.ttf) format("truetype");
 }
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(/static/font/roboto-normal-500.ttf) format('truetype');
+  src: url(/static/font/roboto-normal-500.ttf) format("truetype");
 }
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/static/font/roboto-normal-700.ttf) format('truetype');
+  src: url(/static/font/roboto-normal-700.ttf) format("truetype");
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
index cd6af6214..fbaa0b0ea 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
@@ -19,7 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AbsoluteTime, TalerPreciseTimestamp, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
+import {
+  AbsoluteTime,
+  TalerPreciseTimestamp,
+  TalerProtocolTimestamp,
+} from "@gnu-taler/taler-util";
 import { ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
 import * as tests from "@gnu-taler/web-util/testing";
 import { ProviderView as TestedComponent } from "./ProviderDetailPage.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index e6c95182c..6ca443d10 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -320,9 +320,9 @@ function AdvanceSettings(): VNode {
       label: i18n.str`Show backup feature`,
       description: i18n.str`Backup integration still in beta.`,
     },
-    deleteActiveTransactions: {
-      label: i18n.str`Show delete active transaction`,
-      description: i18n.str`Deleting active transaction is not safe and you may loose your coins.`,
+    suspendIndividualTransaction: {
+      label: i18n.str`Show suspend/resume transaction`,
+      description: i18n.str`Prevent transaction from doing network request.`,
     },
     extendedAccountTypes: {
       label: i18n.str`Show more account types on deposit`,
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 7b4cf964f..d198893cd 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -71,6 +71,7 @@ import { SafeHandler } from "../mui/handlers.js";
 import { Pages } from "../NavigationBar.js";
 import { assertUnreachable } from "../utils/index.js";
 import { EnabledBySettings } from "../components/EnabledBySettings.js";
+import { useSettings } from "../hooks/useSettings.js";
 
 interface Props {
   tid: string;
@@ -203,6 +204,7 @@ function TransactionTemplate({
   const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
   const [confirmBeforeCancel, setConfirmBeforeCancel] = useState(false);
   const { safely } = useAlertContext();
+  const [settings] = useSettings();
 
   async function doCheckBeforeForget(): Promise<void> {
     if (
@@ -393,7 +395,7 @@ function TransactionTemplate({
               <i18n.Translate>Abort</i18n.Translate>
             </Button>
           )}
-          {showResume && (
+          {showResume && settings.suspendIndividualTransaction && (
             <Button
               variant="contained"
               onClick={safely("resume transaction", onResume)}
@@ -401,7 +403,7 @@ function TransactionTemplate({
               <i18n.Translate>Resume</i18n.Translate>
             </Button>
           )}
-          {showSuspend && (
+          {showSuspend && settings.suspendIndividualTransaction && (
             <Button
               variant="contained"
               onClick={safely("suspend transaction", onSuspend)}
author	Sebastian <sebasjm@gmail.com>	2023-06-02 14:32:52 -0300
committer	Sebastian <sebasjm@gmail.com>	2023-06-02 14:32:52 -0300
commit	81dd559c77908b7805690aa7fa1de54ce3a45580 (patch)
tree	84d66deec9cca79e3f44d5b68219f4e928dc5a2a
parent	1961f4744ca0db4666a2df4335c768ed86fc4e2f (diff)