diff --git a/packages/app-extension/src/app/App.tsx b/packages/app-extension/src/app/App.tsx
index 17e6e81..009d445 100644
--- a/packages/app-extension/src/app/App.tsx
+++ b/packages/app-extension/src/app/App.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect } from "react";
import { HashRouter } from "react-router-dom";
import { EXTENSION_HEIGHT, EXTENSION_WIDTH } from "@coral-xyz/common";
import {
@@ -15,6 +15,14 @@ const Router = lazy(() => import("./Router"));
import { useTheme } from "@coral-xyz/tamagui";
+// Get start time from window
+declare global {
+ interface Window {
+ __APP_START_TIME__: number;
+ }
+}
+const startTime = (window as any).__APP_START_TIME__ || Date.now();
+
import "@fontsource/inter";
import "@fontsource/inter/500.css";
@@ -34,6 +42,16 @@ export default function App() {
//
// const pStr = window.localStorage.getItem("secureUser");
// const preferences = pStr ? JSON.parse(pStr).preferences : {};
+
+ useEffect(() => {
+ console.log(`[PERF] App component mounted: ${Date.now() - startTime}ms`);
+
+ // Log when browser has painted
+ requestAnimationFrame(() => {
+ console.log(`[PERF] First paint complete: ${Date.now() - startTime}ms`);
+ });
+ }, []);
+
return (
{
// Refresh feature gates in background without blocking UI render
@@ -139,6 +141,13 @@ function FullApp() {
});
}, [background]);
+ useEffect(() => {
+ // Log when FullApp component mounts (only once)
+ console.log(
+ `[PERF] FullApp component mounted: ${Date.now() - startTime}ms`
+ );
+ }, []);
+
// Check if there are no users and redirect to onboarding
// This handles the case where user started onboarding but didn't finish
// When they click the extension icon, they should be sent back to onboarding
@@ -157,6 +166,20 @@ function FullApp() {
}
}, [allUsers, hasRedirected]);
+ // Log when we're ready to show Unlocked (only once)
+ useEffect(() => {
+ if (
+ allUsers !== null &&
+ allUsers.length > 0 &&
+ !hasLoggedUnlocked.current
+ ) {
+ console.log(
+ `[PERF] Showing Unlocked component: ${Date.now() - startTime}ms`
+ );
+ hasLoggedUnlocked.current = true;
+ }
+ }, [allUsers]);
+
// Show loading skeleton while we're checking for users or redirecting
if (allUsers === null || allUsers.length === 0) {
return
;
diff --git a/packages/app-extension/src/index.tsx b/packages/app-extension/src/index.tsx
index eaa2b45..290558e 100644
--- a/packages/app-extension/src/index.tsx
+++ b/packages/app-extension/src/index.tsx
@@ -1,4 +1,8 @@
const startTime = Date.now();
+console.log(`[PERF] Popup script start: ${startTime}ms`);
+
+// Store start time globally for other components to access
+(window as any).__APP_START_TIME__ = startTime;
// Suppress React Native BackHandler warning in web environment
const originalConsoleWarn = console.warn;
@@ -25,10 +29,7 @@ import {
ToSecureUITransportReceiver,
} from "@coral-xyz/secure-clients";
import type { SECURE_EVENTS } from "@coral-xyz/secure-clients/types";
-import SecureUI, {
- QuickTheme,
- RequireUserUnlocked,
-} from "@coral-xyz/secure-ui";
+import SecureUI, { RequireUserUnlocked } from "@coral-xyz/secure-ui";
import { config as tamaguiConfig, TamaguiProvider } from "@coral-xyz/tamagui";
import { RecoilRoot } from "recoil";
import { v4 } from "uuid";
@@ -75,6 +76,10 @@ const secureUITransportSender = new FromExtensionTransportSender
(
const notificationBroadcastListener =
new NotificationExtensionBroadcastListener();
+console.log(
+ `[PERF] Imports and initialization complete: ${Date.now() - startTime}ms`
+);
+
//
// Configure event listeners.
//
@@ -108,6 +113,7 @@ document.addEventListener("keydown", async function onKeyDown(event) {
// TOOD(react) createRoot is required: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
const container = document.getElementById("root");
const root = createRoot(container!);
+console.log(`[PERF] Starting React render: ${Date.now() - startTime}ms`);
root.render(
<>
@@ -130,7 +136,11 @@ root.render(
onReset={() => {
window.close();
}}
- onSuccess={() => {}}
+ onSuccess={() => {
+ console.log(
+ `[PERF] User unlocked, ready to show app: ${Date.now() - startTime}ms`
+ );
+ }}
>