wip DD39: removed webRequest permission and changes made into demobank

3 files changed, 106 insertions, 126 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index faa64e07d..d12ae864b 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
@@ -40,6 +40,9 @@ import { Button } from "../mui/Button.js";
 import { Grid } from "../mui/Grid.js";
 import { Paper } from "../mui/Paper.js";
 import { TextField } from "../mui/TextField.js";
+import { Checkbox } from "../components/Checkbox.js";
+import { useSettings } from "../hooks/useSettings.js";
+import { useAlertContext } from "../context/alert.js";
 
 export function DeveloperPage(): VNode {
   const listenAllEvents = Array.from<NotificationType>({ length: 1 });
@@ -132,6 +135,8 @@ export function View({ operations, coins, onDownloadDatabase }: Props): VNode {
       dump: JSON.parse(str),
     });
   }
+  const [settings, updateSettings] = useSettings();
+  const { safely } = useAlertContext();
 
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListExchanges, {}),
@@ -256,26 +261,6 @@ export function View({ operations, coins, onDownloadDatabase }: Props): VNode {
           <Button
             variant="contained"
             onClick={async () => {
-              api.background.call("toggleHeaderListener", true);
-            }}
-          >
-            <i18n.Translate>enable header listener</i18n.Translate>
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            onClick={async () => {
-              api.background.call("toggleHeaderListener", false);
-            }}
-          >
-            <i18n.Translate>disable header listener</i18n.Translate>
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            onClick={async () => {
               navigator.registerProtocolHandler(
                 "taler",
                 `${window.location.origin}/static/wallet.html#/cta/withdraw?talerWithdrawUri=%s`,
@@ -360,6 +345,22 @@ export function View({ operations, coins, onDownloadDatabase }: Props): VNode {
           </Button>
         </Grid>{" "}
       </Grid>
+      <Checkbox
+        label={i18n.str`Inject Taler support in all pages`}
+        name="inject"
+        description={
+          <i18n.Translate>
+            Enabling this option will make `window.taler` be available
+            in all sites
+          </i18n.Translate>
+        }
+        enabled={settings.injectTalerSupport!}
+        onToggle={safely("update support injection", async () => {
+          updateSettings("injectTalerSupport", !settings.injectTalerSupport);
+        })}
+      />
+
+
       <Paper style={{ padding: 10, margin: 10 }}>
         <h3>Logging</h3>
         <div>
@@ -396,92 +397,98 @@ export function View({ operations, coins, onDownloadDatabase }: Props): VNode {
           Set log level
         </Button>
       </Paper>
-      {downloadedDatabase && (
-        <div>
-          <i18n.Translate>
-            Database exported at{" "}
-            <Time
-              timestamp={AbsoluteTime.fromMilliseconds(
-                downloadedDatabase.time.getTime(),
-              )}
-              format="yyyy/MM/dd HH:mm:ss"
-            />{" "}
-            <a
-              href={`data:text/plain;charset=utf-8;base64,${toBase64(
-                downloadedDatabase.content,
-              )}`}
-              download={`taler-wallet-database-${format(
-                downloadedDatabase.time,
-                "yyyy/MM/dd_HH:mm",
-              )}.json`}
-            >
-              <i18n.Translate>click here</i18n.Translate>
-            </a>{" "}
-            to download
-          </i18n.Translate>
-        </div>
-      )}
+      {
+        downloadedDatabase && (
+          <div>
+            <i18n.Translate>
+              Database exported at{" "}
+              <Time
+                timestamp={AbsoluteTime.fromMilliseconds(
+                  downloadedDatabase.time.getTime(),
+                )}
+                format="yyyy/MM/dd HH:mm:ss"
+              />{" "}
+              <a
+                href={`data:text/plain;charset=utf-8;base64,${toBase64(
+                  downloadedDatabase.content,
+                )}`}
+                download={`taler-wallet-database-${format(
+                  downloadedDatabase.time,
+                  "yyyy/MM/dd_HH:mm",
+                )}.json`}
+              >
+                <i18n.Translate>click here</i18n.Translate>
+              </a>{" "}
+              to download
+            </i18n.Translate>
+          </div>
+        )
+      }
       <br />
       <p>
         <i18n.Translate>Coins</i18n.Translate>:
       </p>
-      {Object.keys(money_by_exchange).map((ex, idx) => {
-        const allcoins = money_by_exchange[ex];
-        allcoins.sort((a, b) => {
-          if (b.denom_value !== a.denom_value) {
-            return b.denom_value - a.denom_value;
-          }
-          return b.denom_fraction - a.denom_fraction;
-        });
+      {
+        Object.keys(money_by_exchange).map((ex, idx) => {
+          const allcoins = money_by_exchange[ex];
+          allcoins.sort((a, b) => {
+            if (b.denom_value !== a.denom_value) {
+              return b.denom_value - a.denom_value;
+            }
+            return b.denom_fraction - a.denom_fraction;
+          });
 
-        const coins = allcoins.reduce(
-          (prev, cur) => {
-            if (cur.status === CoinStatus.Fresh) prev.usable.push(cur);
-            if (cur.status === CoinStatus.Dormant) prev.spent.push(cur);
-            return prev;
-          },
-          {
-            spent: [],
-            usable: [],
-          } as SplitedCoinInfo,
-        );
+          const coins = allcoins.reduce(
+            (prev, cur) => {
+              if (cur.status === CoinStatus.Fresh) prev.usable.push(cur);
+              if (cur.status === CoinStatus.Dormant) prev.spent.push(cur);
+              return prev;
+            },
+            {
+              spent: [],
+              usable: [],
+            } as SplitedCoinInfo,
+          );
 
-        return (
-          <ShowAllCoins
-            key={idx}
-            coins={coins}
-            ex={ex}
-            currencies={currencies}
-          />
-        );
-      })}
+          return (
+            <ShowAllCoins
+              key={idx}
+              coins={coins}
+              ex={ex}
+              currencies={currencies}
+            />
+          );
+        })
+      }
       <br />
-      {operations && operations.length > 0 && (
-        <Fragment>
-          <p>
-            <i18n.Translate>Pending operations</i18n.Translate>
-          </p>
-          <dl>
-            {operations.reverse().map((o) => {
-              return (
-                <NotifyUpdateFadeOut key={hashObjectId(o)}>
-                  <dt>
-                    {o.type}{" "}
-                    <Time
-                      timestamp={o.timestampDue}
-                      format="yy/MM/dd HH:mm:ss"
-                    />
-                  </dt>
-                  <dd>
-                    <pre>{JSON.stringify(o, undefined, 2)}</pre>
-                  </dd>
-                </NotifyUpdateFadeOut>
-              );
-            })}
-          </dl>
-        </Fragment>
-      )}
-    </div>
+      {
+        operations && operations.length > 0 && (
+          <Fragment>
+            <p>
+              <i18n.Translate>Pending operations</i18n.Translate>
+            </p>
+            <dl>
+              {operations.reverse().map((o) => {
+                return (
+                  <NotifyUpdateFadeOut key={hashObjectId(o)}>
+                    <dt>
+                      {o.type}{" "}
+                      <Time
+                        timestamp={o.timestampDue}
+                        format="yy/MM/dd HH:mm:ss"
+                      />
+                    </dt>
+                    <dd>
+                      <pre>{JSON.stringify(o, undefined, 2)}</pre>
+                    </dd>
+                  </NotifyUpdateFadeOut>
+                );
+              })}
+            </dl>
+          </Fragment>
+        )
+      }
+    </div >
   );
 }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index 86c420b91..a5d6972de 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -55,7 +55,6 @@ export const AllOff = tests.createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
   advanceToggle: { value: false, button: {} },
   autoOpenToggle: { value: false, button: {} },
-  injectTalerToggle: { value: false, button: {} },
   langToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
   ...version,
@@ -65,7 +64,6 @@ export const OneChecked = tests.createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
   advanceToggle: { value: false, button: {} },
   autoOpenToggle: { value: false, button: {} },
-  injectTalerToggle: { value: false, button: {} },
   langToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
   ...version,
@@ -75,7 +73,6 @@ export const WithOneExchange = tests.createExample(TestedComponent, {
   deviceName: "this-is-the-device-name",
   advanceToggle: { value: false, button: {} },
   autoOpenToggle: { value: false, button: {} },
-  injectTalerToggle: { value: false, button: {} },
   langToggle: { value: false, button: {} },
   setDeviceName: () => Promise.resolve(),
   knownExchanges: [
@@ -100,7 +97,6 @@ export const WithExchangeInDifferentState = tests.createExample(
     deviceName: "this-is-the-device-name",
     advanceToggle: { value: false, button: {} },
     autoOpenToggle: { value: false, button: {} },
-    injectTalerToggle: { value: false, button: {} },
     langToggle: { value: false, button: {} },
     setDeviceName: () => Promise.resolve(),
     knownExchanges: [
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index b27413a96..e25629148 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -80,14 +80,6 @@ export function SettingsPage(): VNode {
           }),
         },
       }}
-      injectTalerToggle={{
-        value: settings.injectTalerSupport,
-        button: {
-          onClick: safely("update support injection", async () => {
-            updateSettings("injectTalerSupport", !settings.injectTalerSupport);
-          }),
-        },
-      }}
       advanceToggle={{
         value: settings.advanceMode,
         button: {
@@ -117,7 +109,6 @@ export interface ViewProps {
   deviceName: string;
   setDeviceName: (s: string) => Promise<void>;
   autoOpenToggle: ToggleHandler;
-  injectTalerToggle: ToggleHandler;
   advanceToggle: ToggleHandler;
   langToggle: ToggleHandler;
   knownExchanges: Array<ExchangeListItem>;
@@ -131,7 +122,6 @@ export interface ViewProps {
 export function SettingsView({
   knownExchanges,
   autoOpenToggle,
-  injectTalerToggle,
   advanceToggle,
   langToggle,
   coreVersion,
@@ -276,19 +266,6 @@ export function SettingsView({
           <i18n.Translate>Navigator</i18n.Translate>
         </SubTitle>
         <Checkbox
-          label={i18n.str`Inject Taler support in all pages`}
-          name="inject"
-          description={
-            <i18n.Translate>
-              Disabling this option will make some web application not able to
-              trigger the wallet when clicking links but you will be able to
-              open the wallet using the keyboard shortcut
-            </i18n.Translate>
-          }
-          enabled={injectTalerToggle.value!}
-          onToggle={injectTalerToggle.button.onClick!}
-        />
-        <Checkbox
           label={i18n.str`Automatically open wallet`}
           name="autoOpen"
           description={