fix(popup): improve warning message for non-monetized tabs

src/_locales/en/messages.json

@@ -17,8 +17,21 @@
   "missingHostPermission_state_text": {
     "message": "Permission to access your data for all websites is required to use Web Monetization."
   },
-  "siteNotMonetized_state_text": {
-    "message": "This website is not monetized."
+  "notMonetized_text_allInvalid": {
+    "message": "At the moment, you cannot pay this website",
+    "description": "We cannot send money (probable cause: un-peered wallets)"
+  },
+  "notMonetized_text_noLinks": {
+    "message": "This website is not monetized"
+  },
+  "notMonetized_text_newTab": {
+    "message": "You cannot monetize empty tabs"
+  },
+  "notMonetized_text_internalPage": {
+    "message": "The extension can't access browser's internal pages"
+  },
+  "notMonetized_text_unsupportedScheme": {
+    "message": "Web Monetization only works with https:// websites"
   },
   "keyRevoked_error_title": {
     "message": "Unauthorized access to wallet"
@@ -90,8 +103,5 @@
   },
   "connectWallet_error_invalidClient": {
     "message": "Failed to connect. Please make sure you have added the public key to the correct wallet address."
-  },
-  "allInvalidLinks_state_text": {
-    "message": "At the moment, you can not pay this website."
   }
 }

src/popup/components/AllSessionsInvalid.tsx → src/popup/components/NotMonetized.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { WarningSign } from '@/popup/components/Icons';
-import { useTranslation } from '@/popup/lib/context';
 
-export const AllSessionsInvalid = () => {
-  const t = useTranslation();
+export const NotMonetized = ({ text }: { text: string }) => {
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-1 p-1 text-lg">
+    <div className="flex h-full flex-col items-center justify-center gap-1 p-1">
       <div className="flex-shrink-0">
         <WarningSign className="size-10 text-medium" />
       </div>
-      <h3 className="text-medium">{t('allInvalidLinks_state_text')}</h3>
+      <h3 className="text-center text-lg leading-tight text-medium">{text}</h3>
     </div>
   );
 };

src/popup/pages/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { usePopupState, useMessage } from '@/popup/lib/context';
+import { usePopupState, useMessage, useTranslation } from '@/popup/lib/context';
 import { WarningSign } from '@/popup/components/Icons';
 import { Slider } from '../components/ui/Slider';
 import { Label } from '../components/ui/Label';
@@ -9,12 +9,12 @@ import {
   roundWithPrecision,
 } from '../lib/utils';
 import { PayWebsiteForm } from '../components/PayWebsiteForm';
-import { SiteNotMonetized } from '@/popup/components/SiteNotMonetized';
+import { NotMonetized } from '@/popup/components/NotMonetized';
 import { debounceAsync } from '@/shared/helpers';
 import { Switch } from '../components/ui/Switch';
-import { AllSessionsInvalid } from '@/popup/components/AllSessionsInvalid';
 
 export const Component = () => {
+  const t = useTranslation();
   const message = useMessage();
   const {
     state: {
@@ -64,10 +64,18 @@ export const Component = () => {
   };
 
   if (tab.status !== 'monetized') {
-    if (tab.status === 'all_sessions_invalid') {
-      return <AllSessionsInvalid />;
-    } else {
-      return <SiteNotMonetized />;
+    switch (tab.status) {
+      case 'all_sessions_invalid':
+        return <NotMonetized text={t('notMonetized_text_allInvalid')} />;
+      case 'internal_page':
+        return <NotMonetized text={t('notMonetized_text_internalPage')} />;
+      case 'new_tab':
+        return <NotMonetized text={t('notMonetized_text_newTab')} />;
+      case 'unsupported_scheme':
+        return <NotMonetized text={t('notMonetized_text_unsupportedScheme')} />;
+      case 'no_monetization_links':
+      default:
+        return <NotMonetized text={t('notMonetized_text_noLinks')} />;
     }
   }
 

tests/e2e/connect.spec.ts

@@ -11,6 +11,7 @@ test('connects with correct details provided', async ({
   background,
   popup,
   i18n,
+  page,
 }) => {
   const {
     CONNECT_KEY_ID,
@@ -44,10 +45,6 @@ test('connects with correct details provided', async ({
   const settingsLink = popup.locator(`[href="/settings"]`).first();
   await expect(settingsLink).toBeVisible();
 
-  await expect(popup.locator('h3')).toHaveText(
-    i18n.getMessage('siteNotMonetized_state_text'),
-  );
-
   const storage = await background.evaluate(() => {
     return chrome.storage.local.get([
       'connected',
@@ -66,6 +63,11 @@ test('connects with correct details provided', async ({
     },
   });
 
+  await page.goto('https://webmonetization.org/play/');
+  await expect(popup.locator('h3')).toHaveText(
+    i18n.getMessage('notMonetized_text_noLinks'),
+  );
+
   await disconnectWallet(popup);
   expect(
     await background.evaluate(() => {