some fixes

how the id is shown
refactoring some settings to use hooks

packages/taler-wallet-webextension/src/pages/popup.stories.tsx

@@ -72,7 +72,7 @@ const exampleData = {
       summary: 'the summary',
       fulfillmentMessage: '',
     },
-    proposalId: '#proposalId',
+    proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
     status: PaymentStatus.Accepted,
   } as TransactionPayment,
   deposit: {
@@ -94,7 +94,7 @@ const exampleData = {
   refund: {
     ...commonTransaction,
     type: TransactionType.Refund,
-    refundedTransactionId: '#refundId',
+    refundedTransactionId: 'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
     info: {
       contractTermsHash: 'ASDZXCASD',
       merchant: {

packages/taler-wallet-webextension/src/pages/popup.tsx

@@ -46,7 +46,7 @@ import { useEffect, useState } from "preact/hooks";
 import * as i18n from "../i18n";
 import { PageLink, renderAmount } from "../renderHtml";
 import * as wxApi from "../wxApi";
-import { PermissionsCheckbox } from "./welcome";
+import { PermissionsCheckbox, useExtendedPermissions, Diagnostics } from "./welcome";
 
 interface TabProps {
   target: string;
@@ -452,7 +452,7 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
 
   function Pending() {
     if (!transaction?.pending) return null
-    return <span style={{fontWeight:'normal', fontSize:16, color: 'gray'}}>(pending...)</span>
+    return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span>
   }
 
   function CommonFields() {
@@ -503,7 +503,7 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
     return (
       <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} >
         <section>
-          <h1>Payment ({transaction.proposalId}) <Pending /></h1>
+          <h1>Payment ({transaction.proposalId.substring(0, 10)}...) <Pending /></h1>
           <p>
             To <b>{transaction.info.merchant.name}</b>
           </p>
@@ -519,7 +519,7 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
             {transaction.info.products && transaction.info.products.length > 0 &&
               <tr>
                 <td>Products</td>
-                <td><ol style={{margin:0, textAlign:'left'}}>
+                <td><ol style={{ margin: 0, textAlign: 'left' }}>
                   {transaction.info.products.map(p =>
                     <li>{p.description}</li>
                   )}</ol></td>
@@ -584,11 +584,12 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
     );
   }
 
+  const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/
   if (transaction.type === TransactionType.Refund) {
     return (
       <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} >
         <section>
-          <h1>Refund ({transaction.refundedTransactionId}) <Pending /></h1>
+          <h1>Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...) <Pending /></h1>
           <p>
             From <b>{transaction.info.merchant.name}</b>
           </p>
@@ -633,6 +634,8 @@ function WalletTransaction({ tid }: { tid: string }): JSX.Element {
       const ts = res.transactions.filter(t => t.transactionId === tid)
       if (ts.length === 1) {
         setTransaction(ts[0]);
+      } else {
+        route(Pages.history)
       }
     };
     fetchData();
@@ -640,20 +643,55 @@ function WalletTransaction({ tid }: { tid: string }): JSX.Element {
 
   return <WalletTransactionView
     transaction={transaction}
-    onDelete={() => wxApi.deleteTransaction(tid)}
+    onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))}
     onBack={() => { history.go(-1) }}
   />
 }
 
-class WalletSettings extends Component<any, any> {
-  render(): JSX.Element {
-    return (
-      <div>
-        <h2>Permissions</h2>
-        <PermissionsCheckbox />
-      </div>
-    );
-  }
+function WalletSettings() {
+  const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
+  return (
+    <div>
+      <h2>Permissions</h2>
+      <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} />
+      {/* 
+      <h2>Developer mode</h2>
+      <DebugCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> 
+      */}
+    </div>
+  );
+}
+
+
+export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean, onToggle: () => void }): JSX.Element {
+  return (
+    <div>
+      <input
+        checked={enabled}
+        onClick={onToggle}
+        type="checkbox"
+        id="checkbox-perm"
+        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
+      />
+      <label
+        htmlFor="checkbox-perm"
+        style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+      >
+        Automatically open wallet based on page content
+      </label>
+      <span
+        style={{
+          color: "#383838",
+          fontSize: "smaller",
+          display: "block",
+          marginLeft: "2em",
+        }}
+      >
+        (Enabling this option below will make using the wallet faster, but
+        requires more permissions from your browser.)
+      </span>
+    </div>
+  );
 }
 
 function reload(): void {
@@ -685,6 +723,7 @@ function WalletDebug(props: any): JSX.Element {
       <br />
       <button onClick={confirmReset}>reset</button>
       <button onClick={reload}>reload chrome extension</button>
+      <Diagnostics />
     </div>
   );
 }

packages/taler-wallet-webextension/src/pages/welcome.tsx

@@ -29,7 +29,7 @@ import { extendedPermissions } from "../permissions";
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, JSX } from "preact/jsx-runtime";
 
-function Diagnostics(): JSX.Element | null {
+export function Diagnostics(): JSX.Element | null {
   const [timedOut, setTimedOut] = useState(false);
   const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
     undefined,
@@ -128,29 +128,32 @@ async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> {
   return nextVal ?? false
 }
 
-export function PermissionsCheckbox(): JSX.Element {
-  const [extendedPermissionsEnabled, setExtendedPermissionsEnabled] = useState(false);
+export function useExtendedPermissions(): [boolean, () => void] {
+  const [enabled, setEnabled] = useState(false);
 
-  const togglePermission = () => {
-    setExtendedPermissionsEnabled(v => !v)
-    handleExtendedPerm(extendedPermissionsEnabled).then( result => {
-      setExtendedPermissionsEnabled(result)
+  const toggle = () => {
+    setEnabled(v => !v)
+    handleExtendedPerm(enabled).then( result => {
+      setEnabled(result)
     } )
   }
 
   useEffect(() => {
     async function getExtendedPermValue(): Promise<void> {
       const res = await wxApi.getExtendedPermissions();
-      setExtendedPermissionsEnabled(res.newValue);
+      setEnabled(res.newValue);
     }
     getExtendedPermValue();
   },[]);
+  return [enabled, toggle]
+}
 
+export function PermissionsCheckbox({enabled, onToggle}: {enabled:boolean, onToggle: () => void}): JSX.Element {
   return (
     <div>
       <input
-        checked={extendedPermissionsEnabled}
-        onClick={togglePermission}
+        checked={enabled}
+        onClick={onToggle}
         type="checkbox"
         id="checkbox-perm"
         style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
@@ -177,12 +180,13 @@ export function PermissionsCheckbox(): JSX.Element {
 }
 
 export function Welcome(): JSX.Element {
+  const [permissionsEnabled, togglePermissions] = useExtendedPermissions()
   return (
     <>
       <p>Thank you for installing the wallet.</p>
       <Diagnostics />
       <h2>Permissions</h2>
-      <PermissionsCheckbox />
+      <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions}/>
       <h2>Next Steps</h2>
       <a href="https://demo.taler.net/" style={{ display: "block" }}>
         Try the demo »