Render styles inline and update minters async

thxprotocol · Oct 14, 2024 · 392dc5f · 392dc5f
1 parent 69b5e5c
commit 392dc5f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git a/apps/api/src/app/controllers/erc721/get.controller.ts b/apps/api/src/app/controllers/erc721/get.controller.ts
@@ -9,14 +9,7 @@ const controller = async (req: Request, res: Response) => {
     const erc721 = await ERC721Service.findById(req.params.id);
     if (!erc721) throw new NotFoundError();
 
-    // Check if pending transaction is mined.
-    // if (!erc721.address) {
-    //     erc721 = await ERC721Service.queryDeployTransaction(erc721);
-    // }
-
-    const { wallets, minters } = await ERC721Service.getMinters(erc721, req.auth.sub);
-
-    res.json({ ...erc721.toJSON(), wallets, minters });
+    res.json(erc721);
 };
 
 export { controller, validation };
diff --git a/apps/api/src/app/controllers/wallet/js/get.controller.ts b/apps/api/src/app/controllers/wallet/js/get.controller.ts
@@ -49,14 +49,42 @@ const controller = async (req: Request, res: Response) => {
                     iframe.style.transform = transform === 'scale(1)' ? 'scale(0)' : 'scale(1)';
                 }
             }
+
+            function fetchAndApplyStyles(cssUrl) {
+                fetch(cssUrl)
+                     .then(response => response.text())
+                     .then(css => {
+                         const styleSheet = new CSSStyleSheet();
+                         styleSheet.replaceSync(css);
+                         
+                         for (const rule of styleSheet.cssRules) {
+                             if (rule.style) {
+                                 const elements = document.querySelectorAll(rule.selectorText);
+                                 elements.forEach(element => {
+                                     for (let i = 0; i < rule.style.length; i++) {
+                                         const property = rule.style[i];
+                                         element.style.setProperty(
+                                             property,
+                                             rule.style.getPropertyValue(property),
+                                             rule.style.getPropertyPriority(property)
+                                         );
+                                     }
+                                 });
+                             }
+                         }
+                     })
+                     .catch(error => console.error('Error loading styles:', error));
+            }
+
+            fetchAndApplyStyles(CSS_URL);
     
-            // Link the stylesheet
-            const stylesheet = document.createElement('link');
-            stylesheet.rel = 'stylesheet';
-            stylesheet.href = CSS_URL; 
-            stylesheet.type = 'text/css';
-            stylesheet.media = 'all';
-            document.head.appendChild(stylesheet);
+            // // Link the stylesheet
+            // const stylesheet = document.createElement('link');
+            // stylesheet.rel = 'stylesheet';
+            // stylesheet.href = CSS_URL; 
+            // stylesheet.type = 'text/css';
+            // stylesheet.media = 'all';
+            // document.head.appendChild(stylesheet);
 
             // Check if there is a forced app path 
             const parentUrl = new URL(window.location.href)

diff --git a/apps/studio/src/stores/Collections.ts b/apps/studio/src/stores/Collections.ts
@@ -20,11 +20,16 @@ export const useCollectionStore = defineStore('collection', {
             const data = await this.request('/erc721');
             this.collections = await Promise.all(
                 data.map(async (id: string) => {
-                    const erc721 = await this.request(`/erc721/${id}`);
-                    const { minters, wallets } = await this.request(`/erc721/${id}/minters`);
-                    return { ...erc721, minters, wallets };
+                    return await this.request(`/erc721/${id}`);
                 }),
             );
+
+            for (const key in this.collections) {
+                const erc721 = this.collections[key];
+                this.request(`/erc721/${erc721._id}/minter`).then(({ minters, wallets }) => {
+                    this.collections[key] = { ...erc721, minters, wallets };
+                });
+            }
         },
         async get(id: string) {
             const data = await this.request(`/erc721/${id}`);