fix(Popup): update global payment toggle UI (#792)

.eslintrc.json

@@ -24,6 +24,7 @@
     "no-extra-semi": "off",
     "maxWarnings": "off",
     "no-constant-condition": "off",
+    "no-duplicate-imports": "error",
     "block-scoped-var": "error",
     "consistent-return": "off",
     "no-console": "warn",

src/background/services/tabEvents.ts

@@ -191,7 +191,7 @@ export class TabEvents {
     if (!connected) {
       // use defaults
     } else if (!enabled) {
-      iconData = ICONS.default_gray;
+      iconData = ICONS.default;
     } else if (!isOkState(state) || tabInfo.status === 'all_sessions_invalid') {
       iconData = continuousPaymentsEnabled
         ? ICONS.enabled_warn

src/pages/popup/components/TogglePaymentsButton.tsx

@@ -2,15 +2,10 @@ import React from 'react';
 import { Power } from '@/pages/shared/components/Icons';
 import { cn } from '@/shared/helpers';
 import { useMessage } from '@/popup/lib/context';
-import { dispatch } from '@/popup/lib/store';
+import { dispatch, usePopupState } from '@/popup/lib/store';
 
-export const TogglePaymentsButton = ({
-  large = false,
-  enabled = false,
-}: {
-  large?: boolean;
-  enabled?: boolean;
-}) => {
+export const TogglePaymentsButton = () => {
+  const { enabled } = usePopupState();
   const message = useMessage();
   const title = enabled ? 'Disable extension' : 'Enable extension';
 
@@ -31,10 +26,11 @@ export const TogglePaymentsButton = ({
           message.send('TOGGLE_PAYMENTS');
           dispatch({ type: 'TOGGLE_PAYMENTS' });
         }}
+        onClick={(ev) => ev.currentTarget.blur()}
         aria-label={title}
         className="sr-only"
       />
-      <Power className={large ? 'w-32' : 'w-6'} />
+      <Power className={'w-6'} />
     </label>
   );
 };

src/pages/popup/components/layout/Header.tsx

@@ -9,7 +9,7 @@ import { usePopupState } from '@/popup/lib/store';
 
 const NavigationButton = () => {
   const location = useLocation();
-  const { connected, enabled } = usePopupState();
+  const { connected } = usePopupState();
 
   return React.useMemo(() => {
     if (!connected) return null;
@@ -28,13 +28,13 @@ const NavigationButton = () => {
       </Link>
     ) : (
       <React.Fragment>
-        {enabled && connected && <TogglePaymentsButton enabled={true} />}
+        {connected && <TogglePaymentsButton />}
         <Link to={ROUTES_PATH.SETTINGS}>
           <Settings className="h-6" />
         </Link>
       </React.Fragment>
     );
-  }, [location, connected, enabled]);
+  }, [location, connected]);
 };
 
 export const Header = () => {

src/pages/popup/pages/Home.tsx

@@ -4,7 +4,6 @@ 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/TogglePaymentsButton';
 import { useTranslation } from '@/popup/lib/context';
 import { usePopupState } from '@/popup/lib/store';
 
@@ -13,14 +12,7 @@ export const Component = () => {
   const { tab, enabled } = usePopupState();
 
   if (!enabled) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 text-center">
-        <TogglePaymentsButton enabled={false} large={true} />
-        <p className="text-center text-lg leading-tight text-medium">
-          {t('app_text_disabled')}
-        </p>
-      </div>
-    );
+    return <NotMonetized text={t('app_text_disabled')} />;
   }
 
   if (tab.status !== 'monetized') {