Merge pull request #581 from arconnectio/fix/placeholder-issue

fix: resolve issue with placeholder & related code

src/components/HeadAuth.tsx

@@ -47,8 +47,8 @@ export const HeadAuth: React.FC<HeadAuthProps> = ({
           fallbackName ||
           new URL(url).hostname.split(".").slice(-2).join("."),
         logo: appInfo.logo || fallbackLogo,
-        type: appLogoPlaceholder.type,
-        placeholder: appLogoPlaceholder.placeholder
+        type: appLogoPlaceholder?.type,
+        placeholder: appLogoPlaceholder?.placeholder
       });
     }
 

src/components/dashboard/Reset.tsx

@@ -7,11 +7,11 @@ import {
   useToasts,
   type DisplayTheme
 } from "@arconnect/components";
-import { ExtensionStorage } from "~utils/storage";
 import { TrashIcon } from "@iconicicons/react";
 import browser from "webextension-polyfill";
 import styled from "styled-components";
 import { useTheme } from "~utils/theme";
+import { resetStorage } from "~utils/storage.utils";
 
 export function ResetDashboardView() {
   // reset modal
@@ -25,15 +25,7 @@ export function ResetDashboardView() {
   // reset ArConnect
   async function reset() {
     try {
-      // get all keys
-      const allStoredKeys = Object.keys(
-        (await browser.storage.local.get(null)) || {}
-      );
-
-      // remove all keys
-      await Promise.allSettled(
-        allStoredKeys.map((key) => ExtensionStorage.remove(key))
-      );
+      await resetStorage();
 
       // close window
       window.top.close();

src/components/hardware/HardwareWalletTheme.tsx

@@ -7,11 +7,13 @@ import {
   ARCONNECT_DARK_THEME,
   ARCONNECT_LIGHT_THEME,
   Provider as ThemeProvider,
-  type ArconnectTheme
+  type ArconnectTheme,
+  type DisplayTheme
 } from "@arconnect/components";
-
-const ARCONNECT_THEME_BACKGROUND_COLOR = "ARCONNECT_THEME_BACKGROUND_COLOR";
-const ARCONNECT_THEME_TEXT_COLOR = "ARCONNECT_THEME_TEXT_COLOR";
+import {
+  ARCONNECT_THEME_BACKGROUND_COLOR,
+  ARCONNECT_THEME_TEXT_COLOR
+} from "~utils/storage.utils";
 
 /**
  * Modify the theme if the active wallet is a hardware wallet. We transform the
@@ -54,19 +56,27 @@ export function ArConnectThemeProvider({ children }: PropsWithChildren<{}>) {
         theme === "dark" ? ARCONNECT_DARK_THEME : ARCONNECT_LIGHT_THEME
       )}
     >
-      <ThemeBackgroundObserver />
+      <ThemeBackgroundObserver theme={theme} />
 
       {children}
     </ThemeProvider>
   );
 }
 
-export function ThemeBackgroundObserver() {
+interface ThemeBackgroundObserverProps {
+  theme?: DisplayTheme;
+}
+
+export function ThemeBackgroundObserver({
+  theme
+}: ThemeBackgroundObserverProps) {
   const styledComponentsTheme = useStyledComponentsTheme();
   const backgroundColor = styledComponentsTheme.background;
   const textColor = styledComponentsTheme.primaryText;
 
   useEffect(() => {
+    if (!theme) return;
+
     let formattedBackgroundColor = "";
 
     if (backgroundColor.length === 3 || backgroundColor.length === 6) {
@@ -82,10 +92,17 @@ export function ThemeBackgroundObserver() {
         ARCONNECT_THEME_BACKGROUND_COLOR,
         formattedBackgroundColor
       );
+
+      document.documentElement.style.setProperty(
+        "--backgroundColor",
+        formattedBackgroundColor
+      );
     }
-  }, [backgroundColor]);
+  }, [theme, backgroundColor]);
 
   useEffect(() => {
+    if (!theme) return;
+
     let formattedTextColor = "";
 
     if (textColor.length === 3 || textColor.length === 6) {
@@ -98,8 +115,13 @@ export function ThemeBackgroundObserver() {
 
     if (formattedTextColor) {
       localStorage.setItem(ARCONNECT_THEME_TEXT_COLOR, formattedTextColor);
+
+      document.documentElement.style.setProperty(
+        "--textColor",
+        formattedTextColor
+      );
     }
-  }, [textColor]);
+  }, [theme, textColor]);
 
   return null;
 }

src/components/popup/HeadV2.tsx

@@ -100,7 +100,7 @@ export default function HeadV2({
   const hardwareApi = useHardwareApi();
 
   const appName = appInfo?.name;
-  const appIconPlaceholderText = appInfo.placeholder;
+  const appIconPlaceholderText = appInfo?.placeholder;
 
   const SquircleWrapper = onAppInfoClick ? ButtonSquircle : React.Fragment;
 

src/utils/auth/auth.utils.ts

@@ -126,13 +126,19 @@ export async function createAuthPopup(
   moduleAppData: ModuleAppData
 ) {
   const unlock = await popupMutex.lock();
-  const wallets = await getWallets();
 
-  // TODO: What about getActiveAddress()?
+  const [activeAddress, wallets] = await Promise.all([
+    getActiveAddress(),
+    getWallets()
+  ]);
 
-  if (wallets.length === 0) {
+  const hasWallets = activeAddress && wallets.length > 0;
+
+  if (!hasWallets) {
     openOrSelectWelcomePage(true);
 
+    unlock();
+
     throw new Error(ERR_MSG_NO_WALLETS_ADDED);
   }
 
@@ -149,22 +155,29 @@ export async function createAuthPopup(
     );
   }
 
-  if (!popupWindowTab) {
-    // TODO: To center this, the injected tab should send the center or dimensions of the screen:
-
-    const window = await browser.windows.create({
-      url: `${browser.runtime.getURL("tabs/auth.html")}#/`,
-      focused: true,
-      type: "popup",
-      width: 385,
-      height: 720
-    });
-
-    setPopupTabID(window.tabs[0].id);
-  } else {
-    log(LOG_GROUP.AUTH, "reusePopupTabID =", POPUP_TAB_ID);
-
-    await browser.windows.update(popupWindowTab.windowId, { focused: true });
+  try {
+    if (!popupWindowTab) {
+      // TODO: To center this, the injected tab should send the center or dimensions of the screen:
+
+      const window = await browser.windows.create({
+        url: `${browser.runtime.getURL("tabs/auth.html")}#/`,
+        focused: true,
+        type: "popup",
+        width: 385,
+        height: 720
+      });
+
+      setPopupTabID(window.tabs[0].id);
+    } else {
+      log(LOG_GROUP.AUTH, "reusePopupTabID =", POPUP_TAB_ID);
+
+      await browser.windows.update(popupWindowTab.windowId, { focused: true });
+    }
+  } catch (err) {
+    console.warn(
+      `Could not ${popupWindowTab ? "focus" : "open"} "tabs/auth.html":`,
+      err
+    );
   }
 
   let authID: string | undefined;

src/utils/storage.utils.ts

@@ -0,0 +1,28 @@
+import browser from "webextension-polyfill";
+import { ExtensionStorage } from "~utils/storage";
+
+export const ARCONNECT_THEME_BACKGROUND_COLOR =
+  "ARCONNECT_THEME_BACKGROUND_COLOR";
+export const ARCONNECT_THEME_TEXT_COLOR = "ARCONNECT_THEME_TEXT_COLOR";
+
+/**
+ * Clear all storage keys except for gateways.
+ */
+export async function resetStorage() {
+  if (typeof localStorage !== "undefined") {
+    localStorage.removeItem(ARCONNECT_THEME_BACKGROUND_COLOR);
+    localStorage.removeItem(ARCONNECT_THEME_TEXT_COLOR);
+  }
+
+  try {
+    // get all keys except gateways
+    const allStoredKeys = Object.keys(
+      (await browser.storage.local.get(null)) || {}
+    ).filter((key) => key !== "gateways");
+
+    // remove all keys except gateways
+    await Promise.allSettled(
+      allStoredKeys.map((key) => ExtensionStorage.remove(key))
+    );
+  } catch {}
+}

src/utils/urls/getAppIconPlaceholder.ts

@@ -1,5 +1,22 @@
 import type { AppLogoInfo } from "~applications/application";
 import { isGateway } from "./isGateway";
+
+/**
+ * Ensures a URL has a valid HTTP/HTTPS protocol prefix.
+ * If no protocol is present, HTTPS is added as the default.
+ *
+ * @param url - The URL string to normalize
+ * @returns The URL with a valid protocol prefix
+ */
+function ensureUrlProtocol(url: string): string {
+  try {
+    const hasProtocol = /^https?:\/\//i.test(url);
+    return hasProtocol ? url : `https://${url}`;
+  } catch {
+    return url;
+  }
+}
+
 /**
  * Generates a logo placeholder based on the base domain.
  * If the URL is a gateway (determined by a GET call), it uses the first two letters of the subdomain.
@@ -11,6 +28,7 @@ export async function generateLogoPlaceholder(
   url: string
 ): Promise<AppLogoInfo | undefined> {
   try {
+    url = ensureUrlProtocol(url);
     const { hostname } = new URL(url);
 
     const parts = hostname.split(".");
@@ -21,7 +39,8 @@ export async function generateLogoPlaceholder(
       parts.length > 1 ? parts.slice(1).join(".") : null;
 
     const isGatewayUrl =
-      !!candidateGatewayUrl && (await isGateway(candidateGatewayUrl));
+      !!candidateGatewayUrl &&
+      (await isGateway(ensureUrlProtocol(candidateGatewayUrl)));
 
     if (isGatewayUrl) {
       // For gateways, take the first two letters of the first subdomain

src/utils/wallets/wallets.provider.tsx

@@ -65,17 +65,17 @@ export function WalletsProvider({
 
       let walletStatus: WalletStatus = "noWallets";
 
-      if (hasWallets && decryptionKey) {
-        walletStatus = "unlocked";
-      } else if (!decryptionKey) {
-        walletStatus = "locked";
+      if (hasWallets) {
+        walletStatus = decryptionKey ? "unlocked" : "locked";
       } else if (redirectToWelcome) {
         // This should only happen when opening the regular popup, but not for the auth popup, as the
         // `createAuthPopup` will open the welcome page directly, instead of the popup, if needed:
 
-        openOrSelectWelcomePage(true);
+        await openOrSelectWelcomePage(true);
 
         window.top.close();
+
+        return;
       }
 
       setWalletsContextState({

src/wallets/index.ts

@@ -1,8 +1,6 @@
 import type { JWKInterface } from "arweave/node/lib/wallet";
-import { useStorage } from "@plasmohq/storage/hook";
 import { ExtensionStorage } from "~utils/storage";
 import type { HardwareWallet } from "./hardware";
-import { useEffect, useState } from "react";
 import browser from "webextension-polyfill";
 import Arweave from "arweave/web/common";
 import {
@@ -24,6 +22,7 @@ import {
 import type { ModuleAppData } from "~api/background/background-modules";
 import { isNotCancelError } from "~utils/assertions";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
+import { resetStorage } from "~utils/storage.utils";
 
 /**
  * Locally stored wallet
@@ -112,16 +111,7 @@ export async function openOrSelectWelcomePage(force = false) {
 
   // Make sure we clear any stored value from previous installations before
   // opening the welcome page to onboard the user:
-
-  // get all keys
-  const allStoredKeys = Object.keys(
-    (await browser.storage.local.get(null)) || {}
-  );
-
-  // remove all keys
-  await Promise.allSettled(
-    allStoredKeys.map((key) => ExtensionStorage.remove(key))
-  );
+  await resetStorage();
 
   const url = browser.runtime.getURL("tabs/welcome.html");
   const welcomePageTabs = await browser.tabs.query({ url });