Popup JS size reduction (coral-xyz#1959)

onsol-labs · Dec 22, 2022 · 6c1ce10 · 6c1ce10
1 parent 8b27448
commit 6c1ce10
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 28 deletions.
diff --git a/packages/app-extension/src/index.tsx b/packages/app-extension/src/index.tsx
@@ -1,6 +1,8 @@
 import React, { lazy, Suspense } from "react";
 import ReactDOM from "react-dom";
-import { BACKPACK_FEATURE_POP_MODE, openPopupWindow } from "@coral-xyz/common";
+import { openPopupWindow } from "@coral-xyz/common/dist/esm/browser";
+import { BACKPACK_FEATURE_POP_MODE } from "@coral-xyz/common/dist/esm/generated-config";
+import { Loading } from "@coral-xyz/react-common/dist/esm/components/base/Loading";
 
 import "./index.css";
 
@@ -19,8 +21,11 @@ document.addEventListener("keypress", async function onPress(event) {
   //
   if (BACKPACK_FEATURE_POP_MODE) {
     if (event.key === "g" && event.ctrlKey) {
-      await openPopupWindow("popup.html");
-      window.close();
+      const currentWindow = await chrome.windows.getCurrent();
+      const popupWindow = await openPopupWindow("popup.html");
+      if (currentWindow.id !== popupWindow.id) {
+        window.close();
+      }
     }
   }
 });
@@ -30,7 +35,7 @@ document.addEventListener("keypress", async function onPress(event) {
 //
 ReactDOM.render(
   <React.StrictMode>
-    <Suspense fallback={null}>
+    <Suspense fallback={<Loading />}>
       <App />
     </Suspense>
     <Suspense fallback={null}>

diff --git a/packages/app-extension/src/popup.html b/packages/app-extension/src/popup.html
@@ -1,23 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        background: #131315;
-        overflow: hidden;
-      }
-    </style>
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script src="popup.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+  <style>
+    #root,
+    body,
+    html {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-Height: 600px;
+      min-width: 375px;
+      margin: 0;
+      padding: 0;
+      background: #131315;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="popup.js"></script>
+</body>
+
+</html>
diff --git a/packages/react-common/src/components/base/Loading.tsx b/packages/react-common/src/components/base/Loading.tsx
@@ -1,6 +1,6 @@
-import type { CustomTheme} from "@coral-xyz/themes";
-import { styles } from "@coral-xyz/themes";
-import { CircularProgress } from "@mui/material";
+import type { CustomTheme } from "@coral-xyz/themes";
+import { styles } from "@coral-xyz/themes/";
+import CircularProgress from "@mui/material/CircularProgress";
 const useStyles = styles((theme: CustomTheme) => ({
   circle: {
     stroke: "url(#linearColors)",

diff --git a/packages/themes/src/index.tsx b/packages/themes/src/index.tsx
@@ -2,7 +2,7 @@ import createStyles from "@mui/styles/createStyles";
 import _makeStyles from "@mui/styles/makeStyles";
 import useTheme from "@mui/styles/useTheme";
 import type { CreateMUIStyled, Theme } from "@mui/system";
-import { styled as muiStyled } from "@mui/system";
+import muiStyled from "@mui/system/styled";
 
 export const HOVER_OPACITY = 0.8;