use payto builder and prevent showing cancel for non-payment

packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts

@@ -60,8 +60,8 @@ export function useComponentState({
     parsed !== undefined
       ? parsed
       : currency !== undefined
-        ? Amounts.zeroOfCurrency(currency)
+      ? Amounts.zeroOfCurrency(currency)
-        : undefined;
+      : undefined;
   // const [accountIdx, setAccountIdx] = useState<number>(0);
   const [selectedAccount, setSelectedAccount] = useState<PaytoUri>();
 
@@ -147,7 +147,7 @@ export function useComponentState({
       initialValue ?? ({} as any),
     );
     const amountStr = Amounts.stringify(amount);
-    const depositPaytoUri = `payto://${currentAccount.targetType}/${currentAccount.targetPath}`;
+    const depositPaytoUri = stringifyPaytoUri(currentAccount);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const hook = useAsyncAsHook(async () => {
@@ -193,8 +193,8 @@ export function useComponentState({
     const amountError = !isDirty
       ? undefined
       : Amounts.cmp(balance, amount) === -1
-        ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}`
+      ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}`
-        : undefined;
+      : undefined;
 
     const unableToDeposit =
       Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee

packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts

@@ -128,7 +128,7 @@ export function useComponentState({
       }),
     },
     accountByType,
-    deleteAccount,
+    deleteAccount: pushAlertOnError(deleteAccount),
     onAccountAdded: {
       onClick: unableToAdd ? undefined : pushAlertOnError(addAccount),
     },

packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx

@@ -15,10 +15,12 @@
  */
 
 import {
+  buildPayto,
   KnownBankAccountsInfo,
   PaytoUriBitcoin,
   PaytoUriIBAN,
   PaytoUriTalerBank,
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
@@ -411,7 +413,8 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
         onChange={(v) => {
           setValue(v);
           if (!errors && field.onInput) {
-            field.onInput(`payto://bitcoin/${v}`);
+            const p = buildPayto("bitcoin", v, undefined);
+            field.onInput(stringifyPaytoUri(p));
           }
         }}
       />
@@ -448,8 +451,9 @@ function TalerBankAddressAccount({
         disabled={!field.onInput}
         onChange={(v) => {
           setHost(v);
-          if (!errors && field.onInput) {
+          if (!errors && field.onInput && account) {
-            field.onInput(`payto://x-taler-bank/${v}/${account}`);
+            const p = buildPayto("x-taler-bank", v, account);
+            field.onInput(stringifyPaytoUri(p));
           }
         }}
       />
@@ -462,8 +466,9 @@ function TalerBankAddressAccount({
         error={account !== undefined ? errors?.account : undefined}
         onChange={(v) => {
           setAccount(v || "");
-          if (!errors && field.onInput) {
+          if (!errors && field.onInput && host) {
-            field.onInput(`payto://x-taler-bank/${host}/${v}`);
+            const p = buildPayto("x-taler-bank", host, v);
+            field.onInput(stringifyPaytoUri(p));
           }
         }}
       />
@@ -500,10 +505,9 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
     name: string,
   ): void {
     if (!errors && field.onInput) {
-      const path = bic === undefined ? iban : `${bic}/${iban}`;
+      const p = buildPayto("iban", iban, bic);
-      field.onInput(
+      p.params["receiver-name"] = name;
-        `payto://iban/${path}?receiver-name=${encodeURIComponent(name)}`,
+      field.onInput(stringifyPaytoUri(p));
-      );
     }
   }
   return (

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

@@ -202,20 +202,24 @@ function TransactionTemplate({
   const SHOWING_RETRY_THRESHOLD_SECS = 30;
 
   const showSend = false;
-  // (transaction.type === TransactionType.PeerPullCredit ||
+  const hasCancelTransactionImplemented =
-  //   transaction.type === TransactionType.PeerPushDebit) &&
+    transaction.type === TransactionType.Payment;
-  //   !transaction.info.completed;
-  const showRetry =
-    transaction.error !== undefined ||
-    transaction.timestamp.t_s === "never" ||
-    (transaction.extendedStatus === ExtendedStatus.Pending &&
-      differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) >
-        SHOWING_RETRY_THRESHOLD_SECS);
 
   const transactionStillActive =
     transaction.extendedStatus !== ExtendedStatus.Aborted &&
     transaction.extendedStatus !== ExtendedStatus.Done &&
     transaction.extendedStatus !== ExtendedStatus.Failed;
+
+  // show retry if there is an error in an active state, or after some time
+  // if it is not aborting
+  const showRetry =
+    transactionStillActive &&
+    (transaction.error !== undefined ||
+      (transaction.extendedStatus !== ExtendedStatus.Aborting &&
+        (transaction.timestamp.t_s === "never" ||
+          differenceInSeconds(new Date(), transaction.timestamp.t_s * 1000) >
+            SHOWING_RETRY_THRESHOLD_SECS)));
+
   return (
     <Fragment>
       <section style={{ padding: 8, textAlign: "center" }}>
@@ -353,13 +357,15 @@ function TransactionTemplate({
             </Button>
           ) : null}
           {transactionStillActive ? (
-            <Button
+            hasCancelTransactionImplemented ? (
-              variant="contained"
+              <Button
-              color="error"
+                variant="contained"
-              onClick={doCheckBeforeCancel as SafeHandler<void>}
+                color="error"
-            >
+                onClick={doCheckBeforeCancel as SafeHandler<void>}
-              <i18n.Translate>Cancel</i18n.Translate>
+              >
-            </Button>
+                <i18n.Translate>Cancel</i18n.Translate>
+              </Button>
+            ) : undefined
           ) : (
             <Button
               variant="contained"