first take on adding auto open again, WIP

2 files changed, 34 insertions, 3 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index da4a20437..c18c0d9bb 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -43,12 +43,14 @@ const version = {
     version: "0.9.0.13",
     hash: "d439c3e1bc743f2aa47de4457953dba6ecb0e20f",
   },
+
 };
 
 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,
@@ -58,6 +60,7 @@ 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,
@@ -67,6 +70,7 @@ 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: [
@@ -91,6 +95,7 @@ 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 45a6db5df..2319fe30a 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -73,6 +73,14 @@ export function SettingsPage(): VNode {
       deviceName={name}
       setDeviceName={update}
       autoOpenToggle={{
+        value: settings.autoOpenByHeader,
+        button: {
+          onClick: safely("update support injection", async () => {
+            updateSettings("autoOpenByHeader", !settings.autoOpenByHeader);
+          }),
+        },
+      }}
+      injectTalerToggle={{
         value: settings.injectTalerSupport,
         button: {
           onClick: safely("update support injection", async () => {
@@ -109,6 +117,7 @@ export interface ViewProps {
   deviceName: string;
   setDeviceName: (s: string) => Promise<void>;
   autoOpenToggle: ToggleHandler;
+  injectTalerToggle: ToggleHandler;
   advanceToggle: ToggleHandler;
   langToggle: ToggleHandler;
   knownExchanges: Array<ExchangeListItem>;
@@ -122,6 +131,7 @@ export interface ViewProps {
 export function SettingsView({
   knownExchanges,
   autoOpenToggle,
+  injectTalerToggle,
   advanceToggle,
   langToggle,
   coreVersion,
@@ -207,7 +217,23 @@ export function SettingsView({
             <i18n.Translate>Add an exchange</i18n.Translate>
           </LinkPrimary>
         </div>
-
+        <EnabledBySettings name="advanceMode">
+          <SubTitle>
+            <i18n.Translate>Navigator</i18n.Translate>
+          </SubTitle>
+          <Checkbox
+            label={i18n.str`Automatically open wallet based on page content`}
+            name="autoOpen"
+            description={
+              <i18n.Translate>
+                Enabling this option below will make using the wallet faster,
+                but requires more permissions from your browser.
+              </i18n.Translate>
+            }
+            enabled={autoOpenToggle.value!}
+            onToggle={autoOpenToggle.button.onClick!}
+          />
+        </EnabledBySettings>
 
         {coreVersion && (<Fragment>
           {LibtoolVersion.compare(coreVersion.version, WALLET_CORE_SUPPORTED_VERSION)?.compatible ? undefined :
@@ -276,8 +302,8 @@ export function SettingsView({
               open the wallet using the keyboard shortcut
             </i18n.Translate>
           }
-          enabled={autoOpenToggle.value!}
-          onToggle={autoOpenToggle.button.onClick!}
+          enabled={injectTalerToggle.value!}
+          onToggle={injectTalerToggle.button.onClick!}
         />
         <SubTitle>
           <i18n.Translate>Version</i18n.Translate>