Adjust manifest permissions

CHANGELOG.md

@@ -1,7 +1,11 @@
+## 3.1.51
+* Improved onboarding UX
+
 ## 3.1.50
 * Automatically update balance changes
 * Add share wallet button
-* Move optional permissions CTAs into settings panel
+* Reduce permissions required to install extension
+* Use dynamic optional permission request CTAs
 
 ## 3.1.49
 * Introduce session lock feature to enhance security

manifest-template.json

@@ -60,6 +60,7 @@
       "resources": ["./scripts/contentIsolated.ts", "index.html", "icon/*", "icon/udme/*", "icon/upio/*"]
     }
   ],
+  "host_permissions": ["<all_urls>"],
   "permissions": [
     "alarms",
     "sidePanel",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ud-extension",
-  "version": "3.1.50",
+  "version": "3.1.51",
   "license": "MIT",
   "author": {
     "email": "[email protected]",
@@ -53,7 +53,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@unstoppabledomains/config": "0.0.25",
-    "@unstoppabledomains/ui-components": "0.0.53-browser-extension.12",
+    "@unstoppabledomains/ui-components": "0.0.53-browser-extension.14",
     "@unstoppabledomains/ui-kit": "0.3.24",
     "abitype": "^1.0.6",
     "async-mutex": "^0.5.0",

src/lib/chromeStorage.ts

@@ -13,6 +13,9 @@ export enum StorageSyncKey {
   XmtpKey = "XmtpKey",
   XmtpNotifications = "XmtpNotifications",
   FireblocksState = "fireblocks-state",
+  BannerAppPermissions = "banner-app-permissions",
+  BannerDecentralizedBrowsing = "banner-decentralized-browsing",
+  BannerNotifications = "banner-notifications",
 }
 
 type StorageType = "local" | "session" | "sync";

src/lib/resolver/resolver.ts

@@ -17,6 +17,7 @@ const resolverCache = new LRUCache<string, any>({
 // getSupportedTlds retrieves all non-ICANN domains supported by Unstoppable Domains
 export const getSupportedTlds = async (): Promise<string[]> => {
   // retrieve from cache if available
+  Logger.log("Checking supported TLDs...");
   const cachedValue = resolverCache.get(tldCacheKey);
   if (cachedValue && Array.isArray(cachedValue)) {
     return cachedValue;

src/lib/runtime.ts

@@ -64,6 +64,15 @@ export const getManifestVersion = () => {
   return undefined;
 };
 
+export const getWindow = async (windowId: number) => {
+  try {
+    return await chrome.windows.get(windowId);
+  } catch (e) {
+    // ignore error
+  }
+  return undefined;
+};
+
 export const setIcon = async (
   variant: "default" | "connected",
   tabId?: number,

src/lib/wallet/preferences.ts

@@ -6,6 +6,7 @@ import {
   chromeStorageSet,
 } from "../chromeStorage";
 import {Logger} from "../logger";
+import {PermissionType, hasOptionalPermissions} from "../runtime";
 
 export const getWalletPreferences = async (): Promise<WalletPreferences> => {
   const defaultPreferences = getDefaultPreferences();
@@ -18,6 +19,11 @@ export const getWalletPreferences = async (): Promise<WalletPreferences> => {
       // base preferences stored in browser config
       const basePreferences: WalletPreferences = JSON.parse(preferences);
 
+      // permission based preferences
+      basePreferences.AppConnectionsEnabled = await hasOptionalPermissions([
+        PermissionType.Tabs,
+      ]);
+
       // normalize preferences before returning
       if (basePreferences.MessagingEnabled === undefined) {
         basePreferences.MessagingEnabled = defaultPreferences.MessagingEnabled;
@@ -51,6 +57,7 @@ export const getDefaultPreferences = (): WalletPreferences => {
     DefaultView: "wallet",
     VersionInfo: config.VERSION_DESCRIPTION,
     MessagingEnabled: true,
+    AppConnectionsEnabled: false,
     Scanning: {
       Enabled: true,
       AllowOrigins: [

src/pages/Wallet/Preferences.tsx

@@ -59,6 +59,7 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
   const [isNotificationEnabled, setIsNotificationEnabled] = useState(false);
   const [isContextMenuEnabled, setIsContextMenuEnabled] = useState(false);
   const [isBrowsingEnabled, setIsBrowsingEnabled] = useState(false);
+  const [isAppConnectionEnabled, setIsAppConnectionEnabled] = useState(false);
   const theme = useCustomTheme();
 
   useAsyncEffect(async () => {
@@ -67,16 +68,13 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
       await hasOptionalPermissions([PermissionType.Notifications]),
     );
     setIsContextMenuEnabled(
-      await hasOptionalPermissions([
-        PermissionType.ContextMenus,
-        PermissionType.Tabs,
-      ]),
+      await hasOptionalPermissions([PermissionType.ContextMenus]),
     );
     setIsBrowsingEnabled(
-      await hasOptionalPermissions([
-        PermissionType.DeclarativeNetRequest,
-        PermissionType.Tabs,
-      ]),
+      await hasOptionalPermissions([PermissionType.DeclarativeNetRequest]),
+    );
+    setIsAppConnectionEnabled(
+      await hasOptionalPermissions([PermissionType.Tabs]),
     );
   }, []);
 
@@ -168,10 +166,7 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
         setIsContextMenuEnabled(true);
       }
     } else {
-      await removeOptionalPermissions([
-        PermissionType.ContextMenus,
-        PermissionType.Tabs,
-      ]);
+      await removeOptionalPermissions([PermissionType.ContextMenus]);
       setIsContextMenuEnabled(false);
     }
   };
@@ -189,14 +184,25 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
         setIsBrowsingEnabled(true);
       }
     } else {
-      await removeOptionalPermissions([
-        PermissionType.DeclarativeNetRequest,
-        PermissionType.Tabs,
-      ]);
+      await removeOptionalPermissions([PermissionType.DeclarativeNetRequest]);
       setIsBrowsingEnabled(false);
     }
   };
 
+  const handleAppConnections = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    if (event.target.checked) {
+      if (await requestOptionalPermissions([PermissionType.Tabs])) {
+        setIsAppConnectionEnabled(true);
+      }
+    } else {
+      await removeOptionalPermissions([PermissionType.Tabs]);
+      await handleDisconnectAll();
+      setIsAppConnectionEnabled(false);
+    }
+  };
+
   const handleDisconnectAll = async () => {
     // handle disconnect internally
     await clearAllConnectedSites();
@@ -254,71 +260,93 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
               </Typography>
               <Box>
                 <WalletPreference
-                  title={t("extension.sherlockAssistant")}
-                  description={t("extension.sherlockAssistantDescription")}
+                  title={t("extension.appConnections")}
+                  description={t("extension.appConnectionsDescription")}
                   statusElement={renderStatus(
-                    preferences?.Scanning?.Enabled
-                      ? t("common.on")
-                      : t("common.off"),
+                    isAppConnectionEnabled ? t("common.on") : t("common.off"),
                   )}
                 >
                   <FormControlLabel
-                    label={`${t("manage.enable")} ${t("extension.sherlockAssistant")}`}
+                    label={`${t("manage.enable")} ${t("extension.appConnections")}`}
                     control={
                       <Checkbox
                         color={
                           theme.palette.mode === "light"
                             ? "primary"
                             : "secondary"
                         }
-                        checked={preferences?.Scanning?.Enabled}
-                        onChange={handleSherlockAssistant}
+                        checked={isAppConnectionEnabled}
+                        onChange={handleAppConnections}
                       />
                     }
                   />
                 </WalletPreference>
                 <WalletPreference
-                  title={t("push.messages")}
-                  description={t("push.description")}
+                  title={t("extension.decentralizedBrowsing")}
+                  description={`${t("extension.decentralizedBrowsingDescription")}${!isBrowsingEnabled ? " This **extension will be automatically restarted** when you enable decentralized browsing." : ""}`}
                   statusElement={renderStatus(
-                    preferences?.MessagingEnabled
+                    isBrowsingEnabled ? t("common.on") : t("common.off"),
+                  )}
+                >
+                  <FormControlLabel
+                    label={`${t("manage.enable")} ${t("extension.decentralizedBrowsing")}`}
+                    control={
+                      <Checkbox
+                        color={
+                          theme.palette.mode === "light"
+                            ? "primary"
+                            : "secondary"
+                        }
+                        checked={isBrowsingEnabled}
+                        onChange={handleDecentralizedBrowsing}
+                      />
+                    }
+                  />
+                </WalletPreference>
+                <WalletPreference
+                  title={t("extension.sherlockAssistant")}
+                  description={t("extension.sherlockAssistantDescription")}
+                  statusElement={renderStatus(
+                    preferences?.Scanning?.Enabled
                       ? t("common.on")
                       : t("common.off"),
                   )}
                 >
                   <FormControlLabel
-                    label={`${t("manage.enable")} ${t("push.messages")}`}
+                    label={`${t("manage.enable")} ${t("extension.sherlockAssistant")}`}
                     control={
                       <Checkbox
                         color={
                           theme.palette.mode === "light"
                             ? "primary"
                             : "secondary"
                         }
-                        checked={preferences?.MessagingEnabled}
-                        onChange={handleMessaging}
+                        checked={preferences?.Scanning?.Enabled}
+                        onChange={handleSherlockAssistant}
                       />
                     }
                   />
                 </WalletPreference>
                 <WalletPreference
-                  title={t("extension.decentralizedBrowsing")}
-                  description={t("extension.decentralizedBrowsingDescription")}
+                  title={t("push.messages")}
+                  description={t("push.description")}
                   statusElement={renderStatus(
-                    isBrowsingEnabled ? t("common.on") : t("common.off"),
+                    preferences?.MessagingEnabled
+                      ? t("common.on")
+                      : t("common.off"),
                   )}
                 >
                   <FormControlLabel
-                    label={`${t("manage.enable")} ${t("extension.decentralizedBrowsing")}`}
+                    label={`${t("manage.enable")} ${t("push.messages")}`}
                     control={
                       <Checkbox
                         color={
                           theme.palette.mode === "light"
                             ? "primary"
                             : "secondary"
                         }
-                        checked={isBrowsingEnabled}
-                        onChange={handleDecentralizedBrowsing}
+                        checked={preferences?.MessagingEnabled}
+                        onChange={handleMessaging}
                       />
                     }
                   />
@@ -428,50 +456,52 @@ export const Preferences: React.FC<PreferencesProps> = ({onClose}) => {
                     </Box>
                   )}
                 </WalletPreference>
-                <WalletPreference
-                  title={t("extension.walletConnections")}
-                  description={
-                    connections && Object.keys(connections).length > 0
-                      ? t("extension.walletConnectionsDescription")
-                      : t("extension.noWalletConnections")
-                  }
-                  statusElement={renderStatus(
-                    connections && Object.keys(connections).length > 0
-                      ? String(Object.keys(connections).length)
-                      : t("common.none"),
-                  )}
-                >
-                  {connections &&
-                    Object.keys(connections)
-                      .sort((a, b) => a.localeCompare(b))
-                      .map(site => (
-                        <Link
-                          className={classes.link}
-                          href={`https://${site}`}
-                          target="_blank"
+                {isAppConnectionEnabled && (
+                  <WalletPreference
+                    title={t("extension.walletConnections")}
+                    description={
+                      connections && Object.keys(connections).length > 0
+                        ? t("extension.walletConnectionsDescription")
+                        : t("extension.noWalletConnections")
+                    }
+                    statusElement={renderStatus(
+                      connections && Object.keys(connections).length > 0
+                        ? String(Object.keys(connections).length)
+                        : t("common.none"),
+                    )}
+                  >
+                    {connections &&
+                      Object.keys(connections)
+                        .sort((a, b) => a.localeCompare(b))
+                        .map(site => (
+                          <Link
+                            className={classes.link}
+                            href={`https://${site}`}
+                            target="_blank"
+                          >
+                            <Typography variant="caption">{site}</Typography>
+                          </Link>
+                        ))}
+                    {connections && Object.keys(connections).length > 0 && (
+                      <Box display="flex" width="100%" mt={1} mb={2}>
+                        <Button
+                          color={
+                            theme.palette.mode === "light"
+                              ? "primary"
+                              : "secondary"
+                          }
+                          variant="outlined"
+                          onClick={handleDisconnectAll}
+                          className={classes.button}
+                          fullWidth
+                          size="small"
                         >
-                          <Typography variant="caption">{site}</Typography>
-                        </Link>
-                      ))}
-                  {connections && Object.keys(connections).length > 0 && (
-                    <Box display="flex" width="100%" mt={1} mb={2}>
-                      <Button
-                        color={
-                          theme.palette.mode === "light"
-                            ? "primary"
-                            : "secondary"
-                        }
-                        variant="outlined"
-                        onClick={handleDisconnectAll}
-                        className={classes.button}
-                        fullWidth
-                        size="small"
-                      >
-                        {t("header.disconnectAll")}
-                      </Button>
-                    </Box>
-                  )}
-                </WalletPreference>
+                          {t("header.disconnectAll")}
+                        </Button>
+                      </Box>
+                    )}
+                  </WalletPreference>
+                )}
                 <WalletPreference
                   title={t("extension.version")}
                   statusElement={renderStatus(