From fd20483d05a21c48b3f924b003ae6704e453ad4a Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 16:41:41 +0530
Subject: [PATCH 01/12] feat: add global payment switch

---
 src/_locales/en/messages.json                |  3 ++
 src/background/services/background.ts        |  6 +++
 src/background/services/monetization.ts      | 47 +++++++++++++++++---
 src/background/services/storage.ts           |  8 ----
 src/background/services/tabEvents.ts         |  8 +++-
 src/pages/popup/components/layout/Header.tsx | 30 ++++++++++++-
 src/pages/popup/lib/store.ts                 |  5 +++
 src/pages/popup/pages/Home.tsx               |  6 ++-
 src/pages/shared/components/ui/Switch.tsx    | 12 ++++-
 src/shared/messages.ts                       |  4 ++
 10 files changed, 108 insertions(+), 21 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 6fac4329..109e6ce1 100755
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -30,6 +30,9 @@
   "notMonetized_text_unsupportedScheme": {
     "message": "Web Monetization only works with websites using https://."
   },
+  "app_text_disabled": {
+    "message": "It looks like payments are disabled. Use the toggle to continue making payments."
+  },
   "keyRevoked_error_title": {
     "message": "Unauthorized access to the wallet."
   },
diff --git a/src/background/services/background.ts b/src/background/services/background.ts
index 5082a95f..7e0e4e39 100644
--- a/src/background/services/background.ts
+++ b/src/background/services/background.ts
@@ -234,6 +234,12 @@ export class Background {
               return;
             }
 
+            case 'TOGGLE_PAYMENTS': {
+              await this.monetizationService.togglePayments();
+              await this.updateVisualIndicatorsForCurrentTab();
+              return;
+            }
+
             case 'UPDATE_RATE_OF_PAY':
               return success(
                 await this.storage.updateRate(message.payload.rateOfPay),
diff --git a/src/background/services/monetization.ts b/src/background/services/monetization.ts
index 19cc562b..956e056b 100644
--- a/src/background/services/monetization.ts
+++ b/src/background/services/monetization.ts
@@ -72,12 +72,14 @@ export class MonetizationService {
     const {
       state,
       continuousPaymentsEnabled,
+      enabled,
       rateOfPay,
       connected,
       walletAddress: connectedWallet,
     } = await this.storage.get([
       'state',
       'continuousPaymentsEnabled',
+      'enabled',
       'connected',
       'rateOfPay',
       'walletAddress',
@@ -133,7 +135,11 @@ export class MonetizationService {
     const isAdjusted = await this.adjustSessionsAmount(sessionsArr, rate);
     if (!isAdjusted) return;
 
-    if (continuousPaymentsEnabled && this.canTryPayment(connected, state)) {
+    if (
+      enabled &&
+      continuousPaymentsEnabled &&
+      this.canTryPayment(connected, state)
+    ) {
       sessionsArr.forEach((session) => {
         if (!sessions.get(session.id)) return;
         const source = replacedSessions.has(session.id)
@@ -213,14 +219,20 @@ export class MonetizationService {
       return;
     }
 
-    const { state, connected, continuousPaymentsEnabled } =
+    const { state, connected, continuousPaymentsEnabled, enabled } =
       await this.storage.get([
         'state',
         'connected',
         'continuousPaymentsEnabled',
+        'enabled',
       ]);
-    if (!continuousPaymentsEnabled || !this.canTryPayment(connected, state))
+    if (
+      !enabled ||
+      !continuousPaymentsEnabled ||
+      !this.canTryPayment(connected, state)
+    ) {
       return;
+    }
 
     payload.forEach((p) => {
       const { requestId } = p;
@@ -236,14 +248,20 @@ export class MonetizationService {
       return;
     }
 
-    const { state, connected, continuousPaymentsEnabled } =
+    const { state, connected, continuousPaymentsEnabled, enabled } =
       await this.storage.get([
         'state',
         'connected',
         'continuousPaymentsEnabled',
+        'enabled',
       ]);
-    if (!continuousPaymentsEnabled || !this.canTryPayment(connected, state))
+    if (
+      !enabled ||
+      !continuousPaymentsEnabled ||
+      !this.canTryPayment(connected, state)
+    ) {
       return;
+    }
 
     for (const session of sessions.values()) {
       session.resume();
@@ -257,12 +275,27 @@ export class MonetizationService {
   }
 
   async toggleWM() {
-    const { continuousPaymentsEnabled } = await this.storage.get([
+    const { continuousPaymentsEnabled, enabled } = await this.storage.get([
       'continuousPaymentsEnabled',
+      'enabled',
     ]);
     const nowEnabled = !continuousPaymentsEnabled;
     await this.storage.set({ continuousPaymentsEnabled: nowEnabled });
-    if (nowEnabled) {
+    if (nowEnabled && enabled) {
+      await this.resumePaymentSessionActiveTab();
+    } else {
+      this.stopAllSessions();
+    }
+  }
+
+  async togglePayments() {
+    const { continuousPaymentsEnabled, enabled } = await this.storage.get([
+      'continuousPaymentsEnabled',
+      'enabled',
+    ]);
+    const nowEnabled = !enabled;
+    await this.storage.set({ enabled: nowEnabled });
+    if (nowEnabled && continuousPaymentsEnabled) {
       await this.resumePaymentSessionActiveTab();
     } else {
       this.stopAllSessions();
diff --git a/src/background/services/storage.ts b/src/background/services/storage.ts
index 41178718..4a91b53e 100644
--- a/src/background/services/storage.ts
+++ b/src/background/services/storage.ts
@@ -116,14 +116,6 @@ export class StorageService {
     return data as unknown as Storage;
   }
 
-  async getWMState(): Promise<boolean> {
-    const { continuousPaymentsEnabled } = await this.get([
-      'continuousPaymentsEnabled',
-    ]);
-
-    return continuousPaymentsEnabled;
-  }
-
   async keyPairExists(): Promise<boolean> {
     const keys = await this.get(['privateKey', 'publicKey', 'keyId']);
     if (
diff --git a/src/background/services/tabEvents.ts b/src/background/services/tabEvents.ts
index df60d447..b3b80da3 100644
--- a/src/background/services/tabEvents.ts
+++ b/src/background/services/tabEvents.ts
@@ -131,14 +131,16 @@ export class TabEvents {
   updateVisualIndicators = async (tab: Tabs.Tab) => {
     const tabInfo = this.tabState.getPopupTabData(tab);
     this.sendToPopup.send('SET_TAB_DATA', tabInfo);
-    const { continuousPaymentsEnabled, connected, state } =
+    const { continuousPaymentsEnabled, enabled, connected, state } =
       await this.storage.get([
         'continuousPaymentsEnabled',
+        'enabled',
         'connected',
         'state',
       ]);
     const { path, title } = this.getIconAndTooltip({
       continuousPaymentsEnabled,
+      enabled,
       connected,
       state,
       tabInfo,
@@ -173,11 +175,13 @@ export class TabEvents {
 
   private getIconAndTooltip({
     continuousPaymentsEnabled,
+    enabled,
     connected,
     state,
     tabInfo,
   }: {
     continuousPaymentsEnabled: Storage['continuousPaymentsEnabled'];
+    enabled: Storage['enabled'];
     connected: Storage['connected'];
     state: Storage['state'];
     tabInfo: PopupTabInfo;
@@ -186,6 +190,8 @@ export class TabEvents {
     let iconData = ICONS.default;
     if (!connected) {
       // use defaults
+    } else if (!enabled) {
+      iconData = ICONS.default_gray;
     } else if (!isOkState(state) || tabInfo.status === 'all_sessions_invalid') {
       iconData = continuousPaymentsEnabled
         ? ICONS.enabled_warn
diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index 4c785769..f61e3506 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ArrowBack, Settings } from '@/pages/shared/components/Icons';
+import { Switch } from '@/pages/shared/components/ui/Switch';
 import { HeaderEmpty } from './HeaderEmpty';
+import { isOkState } from '@/shared/helpers';
 import { ROUTES_PATH } from '@/popup/Popup';
-import { useBrowser } from '@/popup/lib/context';
-import { usePopupState } from '@/popup/lib/store';
+import { useBrowser, useMessage } from '@/popup/lib/context';
+import { usePopupState, dispatch } from '@/popup/lib/store';
 
 const NavigationButton = () => {
   const location = useLocation();
@@ -33,12 +35,36 @@ const NavigationButton = () => {
   }, [location, connected]);
 };
 
+const TogglePaymentsButton = ({ toggle }: { toggle: () => void }) => {
+  const { enabled, connected, state } = usePopupState();
+
+  if (!connected) return null;
+  if (!isOkState(state)) return null;
+
+  return (
+    <Switch
+      checked={enabled}
+      onChange={toggle}
+      size="small"
+      title="Enable/Disable Payments"
+      aria-label="Toggle payments"
+    />
+  );
+};
+
 export const Header = () => {
   const browser = useBrowser();
+  const message = useMessage();
   const Logo = browser.runtime.getURL('assets/images/logo.svg');
 
   return (
     <HeaderEmpty logo={Logo}>
+      <TogglePaymentsButton
+        toggle={() => {
+          message.send('TOGGLE_PAYMENTS');
+          dispatch({ type: 'TOGGLE_PAYMENTS' });
+        }}
+      />
       <NavigationButton />
     </HeaderEmpty>
   );
diff --git a/src/pages/popup/lib/store.ts b/src/pages/popup/lib/store.ts
index ceef243d..5f49603d 100644
--- a/src/pages/popup/lib/store.ts
+++ b/src/pages/popup/lib/store.ts
@@ -26,6 +26,10 @@ export const dispatch = ({ type, data }: Actions) => {
       store.continuousPaymentsEnabled = !store.continuousPaymentsEnabled;
       return;
     }
+    case 'TOGGLE_PAYMENTS': {
+      store.enabled = !store.enabled;
+      return;
+    }
     case 'SET_CONNECTED':
       store.connected = data.connected;
       break;
@@ -52,6 +56,7 @@ export const dispatch = ({ type, data }: Actions) => {
 type Actions =
   | { type: 'SET_DATA'; data: PopupState }
   | { type: 'TOGGLE_WM'; data?: never }
+  | { type: 'TOGGLE_PAYMENTS'; data?: never }
   | { type: 'SET_CONNECTED'; data: { connected: boolean } }
   | { type: 'UPDATE_RATE_OF_PAY'; data: { rateOfPay: string } }
   | BackgroundToPopupMessage;
diff --git a/src/pages/popup/pages/Home.tsx b/src/pages/popup/pages/Home.tsx
index be2694d0..3236da6b 100644
--- a/src/pages/popup/pages/Home.tsx
+++ b/src/pages/popup/pages/Home.tsx
@@ -9,7 +9,11 @@ import { usePopupState } from '@/popup/lib/store';
 
 export const Component = () => {
   const t = useTranslation();
-  const { tab } = usePopupState();
+  const { tab, enabled } = usePopupState();
+
+  if (!enabled) {
+    return <NotMonetized text={t('app_text_disabled')} />;
+  }
 
   if (tab.status !== 'monetized') {
     switch (tab.status) {
diff --git a/src/pages/shared/components/ui/Switch.tsx b/src/pages/shared/components/ui/Switch.tsx
index 054d86cd..ad2d1779 100644
--- a/src/pages/shared/components/ui/Switch.tsx
+++ b/src/pages/shared/components/ui/Switch.tsx
@@ -42,11 +42,19 @@ export interface SwitchProps
 }
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  { size, label, className, disabled = false, onChange = () => {}, ...props },
+  {
+    size,
+    label,
+    className,
+    title,
+    disabled = false,
+    onChange = () => {},
+    ...props
+  },
   ref,
 ) {
   return (
-    <label className="flex items-center gap-x-4">
+    <label className="flex items-center gap-x-4" title={title}>
       <input
         role="switch"
         ref={ref}
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index 89774c0f..5a1a4d34 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -155,6 +155,10 @@ export type PopupToBackgroundMessage = {
     input: never;
     output: never;
   };
+  TOGGLE_PAYMENTS: {
+    input: never;
+    output: never;
+  };
   PAY_WEBSITE: {
     input: PayWebsitePayload;
     output: PayWebsiteResponse;

From 89d4c73d54f8a69d0f2fb2671df749f95440b3d8 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:31:36 +0530
Subject: [PATCH 02/12] use power icon for toggle

---
 src/pages/popup/components/PowerSwitch.tsx   | 43 ++++++++++++++++++++
 src/pages/popup/components/layout/Header.tsx |  8 ++--
 src/pages/shared/components/ui/Switch.tsx    | 12 +-----
 3 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/popup/components/PowerSwitch.tsx

diff --git a/src/pages/popup/components/PowerSwitch.tsx b/src/pages/popup/components/PowerSwitch.tsx
new file mode 100644
index 00000000..60184924
--- /dev/null
+++ b/src/pages/popup/components/PowerSwitch.tsx
@@ -0,0 +1,43 @@
+import { cn } from '@/shared/helpers';
+import React from 'react';
+
+export const PowerSwitch = ({
+  enabled,
+  onChange,
+  title,
+}: {
+  enabled: boolean;
+  onChange: () => void;
+  title: string;
+}) => {
+  return (
+    <label
+      className={cn(
+        'my-0 cursor-pointer rounded-full p-0.5 outline-gray-200 focus-within:outline',
+        enabled
+          ? 'text-green-500 focus-within:text-green-600 hover:text-green-600'
+          : 'text-red-500 focus-within:text-red-600 hover:text-red-600',
+      )}
+      title={title}
+    >
+      <input
+        type="checkbox"
+        checked={enabled}
+        onChange={onChange}
+        aria-label={title}
+        className="sr-only"
+      />
+      <svg
+        className="size-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={3}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+      </svg>
+    </label>
+  );
+};
diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index f61e3506..5626b73f 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ArrowBack, Settings } from '@/pages/shared/components/Icons';
-import { Switch } from '@/pages/shared/components/ui/Switch';
 import { HeaderEmpty } from './HeaderEmpty';
+import { PowerSwitch } from '@/popup/components/PowerSwitch';
 import { isOkState } from '@/shared/helpers';
 import { ROUTES_PATH } from '@/popup/Popup';
 import { useBrowser, useMessage } from '@/popup/lib/context';
@@ -42,12 +42,10 @@ const TogglePaymentsButton = ({ toggle }: { toggle: () => void }) => {
   if (!isOkState(state)) return null;
 
   return (
-    <Switch
-      checked={enabled}
+    <PowerSwitch
+      enabled={enabled}
       onChange={toggle}
-      size="small"
       title="Enable/Disable Payments"
-      aria-label="Toggle payments"
     />
   );
 };
diff --git a/src/pages/shared/components/ui/Switch.tsx b/src/pages/shared/components/ui/Switch.tsx
index ad2d1779..054d86cd 100644
--- a/src/pages/shared/components/ui/Switch.tsx
+++ b/src/pages/shared/components/ui/Switch.tsx
@@ -42,19 +42,11 @@ export interface SwitchProps
 }
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  {
-    size,
-    label,
-    className,
-    title,
-    disabled = false,
-    onChange = () => {},
-    ...props
-  },
+  { size, label, className, disabled = false, onChange = () => {}, ...props },
   ref,
 ) {
   return (
-    <label className="flex items-center gap-x-4" title={title}>
+    <label className="flex items-center gap-x-4">
       <input
         role="switch"
         ref={ref}

From b3815062893f66673368bc977fe2a4433ec88e6a Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 19:25:31 +0530
Subject: [PATCH 03/12] update message

---
 src/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 109e6ce1..088d01ff 100755
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -31,7 +31,7 @@
     "message": "Web Monetization only works with websites using https://."
   },
   "app_text_disabled": {
-    "message": "It looks like payments are disabled. Use the toggle to continue making payments."
+    "message": "The extension is disabled. Click the power icon to enable the extension and continue making payments."
   },
   "keyRevoked_error_title": {
     "message": "Unauthorized access to the wallet."

From d8bd86c47dfcf8748fa868c886b31b7902eacef8 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 19:25:42 +0530
Subject: [PATCH 04/12] more UI effort/attempts: show large power button when
 disabled

---
 src/pages/popup/components/PowerSwitch.tsx   | 26 +++++++----------
 src/pages/popup/components/layout/Header.tsx | 30 +++++++++++---------
 src/pages/popup/pages/Home.tsx               |  8 +++++-
 src/pages/shared/components/Icons.tsx        | 16 +++++++++++
 4 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/pages/popup/components/PowerSwitch.tsx b/src/pages/popup/components/PowerSwitch.tsx
index 60184924..f545c39e 100644
--- a/src/pages/popup/components/PowerSwitch.tsx
+++ b/src/pages/popup/components/PowerSwitch.tsx
@@ -1,22 +1,26 @@
-import { cn } from '@/shared/helpers';
 import React from 'react';
+import { Power } from '@/pages/shared/components/Icons';
+import { cn } from '@/shared/helpers';
 
 export const PowerSwitch = ({
   enabled,
   onChange,
   title,
+  className,
+  iconClassName = 'size-6',
 }: {
   enabled: boolean;
   onChange: () => void;
   title: string;
+  className?: string;
+  iconClassName?: string;
 }) => {
   return (
     <label
       className={cn(
-        'my-0 cursor-pointer rounded-full p-0.5 outline-gray-200 focus-within:outline',
-        enabled
-          ? 'text-green-500 focus-within:text-green-600 hover:text-green-600'
-          : 'text-red-500 focus-within:text-red-600 hover:text-red-600',
+        'my-0 cursor-pointer rounded-full p-0.5 text-slate-300 transition-colors focus-within:text-slate-600 focus-within:outline hover:text-slate-600',
+        className,
+        enabled && 'text-slate-500',
       )}
       title={title}
     >
@@ -27,17 +31,7 @@ export const PowerSwitch = ({
         aria-label={title}
         className="sr-only"
       />
-      <svg
-        className="size-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={3}
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
-      </svg>
+      <Power className={iconClassName} />
     </label>
   );
 };
diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index 5626b73f..a92a8b79 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -35,34 +35,36 @@ const NavigationButton = () => {
   }, [location, connected]);
 };
 
-const TogglePaymentsButton = ({ toggle }: { toggle: () => void }) => {
-  const { enabled, connected, state } = usePopupState();
-
-  if (!connected) return null;
-  if (!isOkState(state)) return null;
+export const TogglePaymentsButton = ({
+  large = false,
+  enabled = false,
+}: {
+  large?: boolean;
+  enabled?: boolean;
+}) => {
+  const message = useMessage();
 
   return (
     <PowerSwitch
       enabled={enabled}
-      onChange={toggle}
-      title="Enable/Disable Payments"
+      onChange={() => {
+        message.send('TOGGLE_PAYMENTS');
+        dispatch({ type: 'TOGGLE_PAYMENTS' });
+      }}
+      title="Toggle extension"
+      iconClassName={large ? 'w-32' : 'w-6'}
     />
   );
 };
 
 export const Header = () => {
   const browser = useBrowser();
-  const message = useMessage();
+  const { enabled } = usePopupState();
   const Logo = browser.runtime.getURL('assets/images/logo.svg');
 
   return (
     <HeaderEmpty logo={Logo}>
-      <TogglePaymentsButton
-        toggle={() => {
-          message.send('TOGGLE_PAYMENTS');
-          dispatch({ type: 'TOGGLE_PAYMENTS' });
-        }}
-      />
+      {enabled && <TogglePaymentsButton enabled={enabled} />}
       <NavigationButton />
     </HeaderEmpty>
   );
diff --git a/src/pages/popup/pages/Home.tsx b/src/pages/popup/pages/Home.tsx
index 3236da6b..d9c49632 100644
--- a/src/pages/popup/pages/Home.tsx
+++ b/src/pages/popup/pages/Home.tsx
@@ -4,6 +4,7 @@ import { Settings } from '@/pages/shared/components/Icons';
 import { formatNumber, roundWithPrecision } from '@/pages/shared/lib/utils';
 import { PayWebsiteForm } from '@/popup/components/PayWebsiteForm';
 import { NotMonetized } from '@/popup/components/NotMonetized';
+import { TogglePaymentsButton } from '@/popup/components/layout/Header';
 import { useTranslation } from '@/popup/lib/context';
 import { usePopupState } from '@/popup/lib/store';
 
@@ -12,7 +13,12 @@ export const Component = () => {
   const { tab, enabled } = usePopupState();
 
   if (!enabled) {
-    return <NotMonetized text={t('app_text_disabled')} />;
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4 text-center">
+        <TogglePaymentsButton large={true} />
+        <p>{t('app_text_disabled')}</p>
+      </div>
+    );
   }
 
   if (tab.status !== 'monetized') {
diff --git a/src/pages/shared/components/Icons.tsx b/src/pages/shared/components/Icons.tsx
index 6c327633..85ea272e 100644
--- a/src/pages/shared/components/Icons.tsx
+++ b/src/pages/shared/components/Icons.tsx
@@ -79,6 +79,22 @@ export const Settings = (props: React.SVGProps<SVGSVGElement>) => {
   );
 };
 
+export const Power = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+    </svg>
+  );
+};
+
 export const DollarSign = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg

From e8e5fef1d644a964f666cf24e5dbf346f8452db8 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:37:41 +0530
Subject: [PATCH 05/12] update message

---
 src/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 250716fd..8b146ae4 100755
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -37,7 +37,7 @@
     "message": "Web Monetization only works with websites using https://."
   },
   "app_text_disabled": {
-    "message": "The extension is disabled. Click the power icon to enable the extension and continue making payments."
+    "message": "The extension is disabled. Click the power icon above to enable the extension and continue making payments."
   },
   "keyRevoked_error_title": {
     "message": "Unauthorized access to the wallet."

From da7ec1994faf67f1d7c27a50f47d4804f69ba64e Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:37:59 +0530
Subject: [PATCH 06/12] style improvements

---
 src/pages/popup/components/PowerSwitch.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/popup/components/PowerSwitch.tsx b/src/pages/popup/components/PowerSwitch.tsx
index f545c39e..a05c24a3 100644
--- a/src/pages/popup/components/PowerSwitch.tsx
+++ b/src/pages/popup/components/PowerSwitch.tsx
@@ -18,9 +18,11 @@ export const PowerSwitch = ({
   return (
     <label
       className={cn(
-        'my-0 cursor-pointer rounded-full p-0.5 text-slate-300 transition-colors focus-within:text-slate-600 focus-within:outline hover:text-slate-600',
+        'group my-0 cursor-pointer rounded-full p-0.5 transition-colors focus-within:shadow',
         className,
-        enabled && 'text-slate-500',
+        enabled
+          ? 'text-gray-500 focus-within:text-error hover:text-error'
+          : 'text-gray-300 focus-within:text-secondary-dark hover:text-secondary-dark',
       )}
       title={title}
     >

From 67bfb999fad75672abdbbc2d4ce5a0dc9b6720ba Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:38:14 +0530
Subject: [PATCH 07/12] extract TogglePaymentsButton; design improvements

---
 .../popup/components/TogglePaymentsButton.tsx | 26 ++++++++++++++++
 src/pages/popup/components/layout/Header.tsx  | 31 +++----------------
 src/pages/popup/pages/Home.tsx                |  8 +++--
 3 files changed, 35 insertions(+), 30 deletions(-)
 create mode 100644 src/pages/popup/components/TogglePaymentsButton.tsx

diff --git a/src/pages/popup/components/TogglePaymentsButton.tsx b/src/pages/popup/components/TogglePaymentsButton.tsx
new file mode 100644
index 00000000..82744b8d
--- /dev/null
+++ b/src/pages/popup/components/TogglePaymentsButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { PowerSwitch } from '@/popup/components/PowerSwitch';
+import { useMessage } from '@/popup/lib/context';
+import { dispatch } from '@/popup/lib/store';
+
+export const TogglePaymentsButton = ({
+  large = false,
+  enabled = false,
+}: {
+  large?: boolean;
+  enabled?: boolean;
+}) => {
+  const message = useMessage();
+
+  return (
+    <PowerSwitch
+      enabled={enabled}
+      onChange={() => {
+        message.send('TOGGLE_PAYMENTS');
+        dispatch({ type: 'TOGGLE_PAYMENTS' });
+      }}
+      title={enabled ? 'Disable extension' : 'Enable extension'}
+      iconClassName={large ? 'w-32' : 'w-6'}
+    />
+  );
+};
diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index a92a8b79..f3a81b4e 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -2,11 +2,10 @@ import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ArrowBack, Settings } from '@/pages/shared/components/Icons';
 import { HeaderEmpty } from './HeaderEmpty';
-import { PowerSwitch } from '@/popup/components/PowerSwitch';
-import { isOkState } from '@/shared/helpers';
+import { TogglePaymentsButton } from '@/popup/components/TogglePaymentsButton';
 import { ROUTES_PATH } from '@/popup/Popup';
-import { useBrowser, useMessage } from '@/popup/lib/context';
-import { usePopupState, dispatch } from '@/popup/lib/store';
+import { useBrowser } from '@/popup/lib/context';
+import { usePopupState } from '@/popup/lib/store';
 
 const NavigationButton = () => {
   const location = useLocation();
@@ -35,28 +34,6 @@ const NavigationButton = () => {
   }, [location, connected]);
 };
 
-export const TogglePaymentsButton = ({
-  large = false,
-  enabled = false,
-}: {
-  large?: boolean;
-  enabled?: boolean;
-}) => {
-  const message = useMessage();
-
-  return (
-    <PowerSwitch
-      enabled={enabled}
-      onChange={() => {
-        message.send('TOGGLE_PAYMENTS');
-        dispatch({ type: 'TOGGLE_PAYMENTS' });
-      }}
-      title="Toggle extension"
-      iconClassName={large ? 'w-32' : 'w-6'}
-    />
-  );
-};
-
 export const Header = () => {
   const browser = useBrowser();
   const { enabled } = usePopupState();
@@ -64,7 +41,7 @@ export const Header = () => {
 
   return (
     <HeaderEmpty logo={Logo}>
-      {enabled && <TogglePaymentsButton enabled={enabled} />}
+      {enabled && <TogglePaymentsButton enabled={true} />}
       <NavigationButton />
     </HeaderEmpty>
   );
diff --git a/src/pages/popup/pages/Home.tsx b/src/pages/popup/pages/Home.tsx
index d9c49632..e72f7978 100644
--- a/src/pages/popup/pages/Home.tsx
+++ b/src/pages/popup/pages/Home.tsx
@@ -4,7 +4,7 @@ import { Settings } from '@/pages/shared/components/Icons';
 import { formatNumber, roundWithPrecision } from '@/pages/shared/lib/utils';
 import { PayWebsiteForm } from '@/popup/components/PayWebsiteForm';
 import { NotMonetized } from '@/popup/components/NotMonetized';
-import { TogglePaymentsButton } from '@/popup/components/layout/Header';
+import { TogglePaymentsButton } from '@/popup/components/TogglePaymentsButton';
 import { useTranslation } from '@/popup/lib/context';
 import { usePopupState } from '@/popup/lib/store';
 
@@ -15,8 +15,10 @@ export const Component = () => {
   if (!enabled) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-4 text-center">
-        <TogglePaymentsButton large={true} />
-        <p>{t('app_text_disabled')}</p>
+        <TogglePaymentsButton enabled={false} large={true} />
+        <p className="text-center text-lg leading-tight text-medium">
+          {t('app_text_disabled')}
+        </p>
       </div>
     );
   }

From 73090c75d5a9f5f3ff2dad8b35dd9abc11b2693e Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:42:09 +0530
Subject: [PATCH 08/12] feedback: rename toggleWM to toggleContinuousPayments

---
 src/background/services/background.ts         |  4 ++--
 src/background/services/monetization.ts       |  2 +-
 .../popup/components/Settings/RateOfPay.tsx   | 19 ++++++++++++-------
 src/pages/popup/lib/store.ts                  |  4 ++--
 src/shared/messages.ts                        |  2 +-
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/background/services/background.ts b/src/background/services/background.ts
index c8111b7b..c150a743 100644
--- a/src/background/services/background.ts
+++ b/src/background/services/background.ts
@@ -229,8 +229,8 @@ export class Background {
               this.sendToPopup.send('SET_STATE', { state: {}, prevState: {} });
               return;
 
-            case 'TOGGLE_WM': {
-              await this.monetizationService.toggleWM();
+            case 'TOGGLE_CONTINUOUS_PAYMENTS': {
+              await this.monetizationService.toggleContinuousPayments();
               await this.updateVisualIndicatorsForCurrentTab();
               return;
             }
diff --git a/src/background/services/monetization.ts b/src/background/services/monetization.ts
index 956e056b..92013ec4 100644
--- a/src/background/services/monetization.ts
+++ b/src/background/services/monetization.ts
@@ -274,7 +274,7 @@ export class MonetizationService {
     await this.resumePaymentSessionsByTabId(currentTab.id);
   }
 
-  async toggleWM() {
+  async toggleContinuousPayments() {
     const { continuousPaymentsEnabled, enabled } = await this.storage.get([
       'continuousPaymentsEnabled',
       'enabled',
diff --git a/src/pages/popup/components/Settings/RateOfPay.tsx b/src/pages/popup/components/Settings/RateOfPay.tsx
index 096ed5f5..3c666334 100644
--- a/src/pages/popup/components/Settings/RateOfPay.tsx
+++ b/src/pages/popup/components/Settings/RateOfPay.tsx
@@ -24,20 +24,25 @@ export const RateOfPayScreen = () => {
     void updateRateOfPay.current(rateOfPay);
   };
 
-  const toggleWM = () => {
-    message.send('TOGGLE_WM');
-    dispatch({ type: 'TOGGLE_WM' });
+  const toggleContinuousPayments = () => {
+    message.send('TOGGLE_CONTINUOUS_PAYMENTS');
+    dispatch({ type: 'TOGGLE_CONTINUOUS_PAYMENTS' });
   };
 
-  return <RateOfPayComponent onRateChange={onRateChange} toggleWM={toggleWM} />;
+  return (
+    <RateOfPayComponent
+      onRateChange={onRateChange}
+      toggle={toggleContinuousPayments}
+    />
+  );
 };
 
 interface Props {
   onRateChange: (rate: string) => Promise<void>;
-  toggleWM: () => void | Promise<void>;
+  toggle: () => void | Promise<void>;
 }
 
-export const RateOfPayComponent = ({ onRateChange, toggleWM }: Props) => {
+export const RateOfPayComponent = ({ onRateChange, toggle }: Props) => {
   const {
     continuousPaymentsEnabled,
     rateOfPay,
@@ -59,7 +64,7 @@ export const RateOfPayComponent = ({ onRateChange, toggleWM }: Props) => {
       <div className="space-y-2">
         <Switch
           checked={continuousPaymentsEnabled}
-          onChange={toggleWM}
+          onChange={toggle}
           label="Continuous payment"
         />
 
diff --git a/src/pages/popup/lib/store.ts b/src/pages/popup/lib/store.ts
index 5f49603d..e26f3341 100644
--- a/src/pages/popup/lib/store.ts
+++ b/src/pages/popup/lib/store.ts
@@ -22,7 +22,7 @@ export const dispatch = ({ type, data }: Actions) => {
       }
       break;
     }
-    case 'TOGGLE_WM': {
+    case 'TOGGLE_CONTINUOUS_PAYMENTS': {
       store.continuousPaymentsEnabled = !store.continuousPaymentsEnabled;
       return;
     }
@@ -55,7 +55,7 @@ export const dispatch = ({ type, data }: Actions) => {
 
 type Actions =
   | { type: 'SET_DATA'; data: PopupState }
-  | { type: 'TOGGLE_WM'; data?: never }
+  | { type: 'TOGGLE_CONTINUOUS_PAYMENTS'; data?: never }
   | { type: 'TOGGLE_PAYMENTS'; data?: never }
   | { type: 'SET_CONNECTED'; data: { connected: boolean } }
   | { type: 'UPDATE_RATE_OF_PAY'; data: { rateOfPay: string } }
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index 5a1a4d34..242703f5 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -151,7 +151,7 @@ export type PopupToBackgroundMessage = {
     input: never;
     output: never;
   };
-  TOGGLE_WM: {
+  TOGGLE_CONTINUOUS_PAYMENTS: {
     input: never;
     output: never;
   };

From 91d1cf0df534e869a41c0b275e96433693658052 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:45:45 +0530
Subject: [PATCH 09/12] feedback: merge PowerSwitch into TogglePaymentsButton

---
 src/pages/popup/components/PowerSwitch.tsx    | 39 -------------------
 .../popup/components/TogglePaymentsButton.tsx | 34 +++++++++++-----
 2 files changed, 24 insertions(+), 49 deletions(-)
 delete mode 100644 src/pages/popup/components/PowerSwitch.tsx

diff --git a/src/pages/popup/components/PowerSwitch.tsx b/src/pages/popup/components/PowerSwitch.tsx
deleted file mode 100644
index a05c24a3..00000000
--- a/src/pages/popup/components/PowerSwitch.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Power } from '@/pages/shared/components/Icons';
-import { cn } from '@/shared/helpers';
-
-export const PowerSwitch = ({
-  enabled,
-  onChange,
-  title,
-  className,
-  iconClassName = 'size-6',
-}: {
-  enabled: boolean;
-  onChange: () => void;
-  title: string;
-  className?: string;
-  iconClassName?: string;
-}) => {
-  return (
-    <label
-      className={cn(
-        'group my-0 cursor-pointer rounded-full p-0.5 transition-colors focus-within:shadow',
-        className,
-        enabled
-          ? 'text-gray-500 focus-within:text-error hover:text-error'
-          : 'text-gray-300 focus-within:text-secondary-dark hover:text-secondary-dark',
-      )}
-      title={title}
-    >
-      <input
-        type="checkbox"
-        checked={enabled}
-        onChange={onChange}
-        aria-label={title}
-        className="sr-only"
-      />
-      <Power className={iconClassName} />
-    </label>
-  );
-};
diff --git a/src/pages/popup/components/TogglePaymentsButton.tsx b/src/pages/popup/components/TogglePaymentsButton.tsx
index 82744b8d..6deff6b4 100644
--- a/src/pages/popup/components/TogglePaymentsButton.tsx
+++ b/src/pages/popup/components/TogglePaymentsButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { PowerSwitch } from '@/popup/components/PowerSwitch';
+import { Power } from '@/pages/shared/components/Icons';
+import { cn } from '@/shared/helpers';
 import { useMessage } from '@/popup/lib/context';
 import { dispatch } from '@/popup/lib/store';
 
@@ -11,16 +12,29 @@ export const TogglePaymentsButton = ({
   enabled?: boolean;
 }) => {
   const message = useMessage();
+  const title = enabled ? 'Disable extension' : 'Enable extension';
 
   return (
-    <PowerSwitch
-      enabled={enabled}
-      onChange={() => {
-        message.send('TOGGLE_PAYMENTS');
-        dispatch({ type: 'TOGGLE_PAYMENTS' });
-      }}
-      title={enabled ? 'Disable extension' : 'Enable extension'}
-      iconClassName={large ? 'w-32' : 'w-6'}
-    />
+    <label
+      className={cn(
+        'group my-0 cursor-pointer rounded-full p-0.5 transition-colors focus-within:shadow',
+        enabled
+          ? 'text-gray-500 focus-within:text-error hover:text-error'
+          : 'text-gray-300 focus-within:text-secondary-dark hover:text-secondary-dark',
+      )}
+      title={title}
+    >
+      <input
+        type="checkbox"
+        checked={enabled}
+        onChange={() => {
+          message.send('TOGGLE_PAYMENTS');
+          dispatch({ type: 'TOGGLE_PAYMENTS' });
+        }}
+        aria-label={title}
+        className="sr-only"
+      />
+      <Power className={large ? 'w-32' : 'w-6'} />
+    </label>
   );
 };

From cb633753f9fbcaa83546bc67b653827870f34ef1 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:46:57 +0530
Subject: [PATCH 10/12] feedback: add sanity check for `enabled` in
 Monetization.pay()

---
 src/background/services/monetization.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/background/services/monetization.ts b/src/background/services/monetization.ts
index 92013ec4..958db6f3 100644
--- a/src/background/services/monetization.ts
+++ b/src/background/services/monetization.ts
@@ -316,7 +316,13 @@ export class MonetizationService {
       throw new Error(this.t('pay_error_notMonetized'));
     }
 
-    const { walletAddress } = await this.storage.get(['walletAddress']);
+    const { enabled, walletAddress } = await this.storage.get([
+      'enabled',
+      'walletAddress',
+    ]);
+    if (!enabled) {
+      throw new Error('Unexpected: payments are not enabled');
+    }
     if (!walletAddress) {
       throw new Error('Unexpected: wallet address not found.');
     }

From b43086b1a4c61c5e7e14ddeac38271c60cce5bf7 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:50:40 +0530
Subject: [PATCH 11/12] don't show on connect screen

---
 src/pages/popup/components/layout/Header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index f3a81b4e..a99c354a 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -36,12 +36,12 @@ const NavigationButton = () => {
 
 export const Header = () => {
   const browser = useBrowser();
-  const { enabled } = usePopupState();
+  const { enabled, connected } = usePopupState();
   const Logo = browser.runtime.getURL('assets/images/logo.svg');
 
   return (
     <HeaderEmpty logo={Logo}>
-      {enabled && <TogglePaymentsButton enabled={true} />}
+      {enabled && connected && <TogglePaymentsButton enabled={true} />}
       <NavigationButton />
     </HeaderEmpty>
   );

From 5c33838bf64a0be94ffd95ed5652fe4299d20e69 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:53:10 +0530
Subject: [PATCH 12/12] show only only home screen, along with settings icon

If we show on settings screen, the button on-click disappears with no
visual change, which is confusing (change is shown only on home screen).
So, show the toggle button only when the "settings" icon is shown.
---
 src/pages/popup/components/layout/Header.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/popup/components/layout/Header.tsx b/src/pages/popup/components/layout/Header.tsx
index a99c354a..be18c64d 100644
--- a/src/pages/popup/components/layout/Header.tsx
+++ b/src/pages/popup/components/layout/Header.tsx
@@ -9,7 +9,7 @@ import { usePopupState } from '@/popup/lib/store';
 
 const NavigationButton = () => {
   const location = useLocation();
-  const { connected } = usePopupState();
+  const { connected, enabled } = usePopupState();
 
   return React.useMemo(() => {
     if (!connected) return null;
@@ -27,21 +27,22 @@ const NavigationButton = () => {
         <ArrowBack className="h-6" />
       </Link>
     ) : (
-      <Link to={ROUTES_PATH.SETTINGS}>
-        <Settings className="h-6" />
-      </Link>
+      <React.Fragment>
+        {enabled && connected && <TogglePaymentsButton enabled={true} />}
+        <Link to={ROUTES_PATH.SETTINGS}>
+          <Settings className="h-6" />
+        </Link>
+      </React.Fragment>
     );
-  }, [location, connected]);
+  }, [location, connected, enabled]);
 };
 
 export const Header = () => {
   const browser = useBrowser();
-  const { enabled, connected } = usePopupState();
   const Logo = browser.runtime.getURL('assets/images/logo.svg');
 
   return (
     <HeaderEmpty logo={Logo}>
-      {enabled && connected && <TogglePaymentsButton enabled={true} />}
       <NavigationButton />
     </HeaderEmpty>
   );