move modal to diff directory and change injection in html

src/components/header/header.ts

@@ -1,4 +1,4 @@
-import { INotification } from '~/models/notification.model';
+import { INotification } from '../../models/notification.model';
 import { currentRoute, navigate } from '../../router';
 import Services from '../../services/service';
 

src/components/modal/confirmation-modal.ts

@@ -0,0 +1,13 @@
+import ModalService from "../../services/modal.service";
+
+const modalService = await ModalService.getInstance();
+export async function confirm() {
+    modalService.confirmPairing()
+}
+
+export async function closeConfirmationModal() {
+  modalService.closeConfirmationModal()
+}
+
+(window as any).confirm = confirm;
+(window as any).closeConfirmationModal = closeConfirmationModal;

src/html/confirmation-modal.js

@@ -1,13 +0,0 @@
-import Routing from "/src/services/routing.service.ts";
-
-const router = await Routing.getInstance();
-export async function confirm() {
-    router.confirmPairing()
-}
-
-export async function closeConfirmationModal() {
-  router.closeConirmationModal()
-}
-
-window.confirm = confirm;
-window.closeConfirmationModal = closeConfirmationModal;

src/services/modal.service.ts

@@ -1,7 +1,5 @@
 import modalHtml from '../html/login-modal.html?raw';
-import confirmationModalHtml from '../html/confirmation-modal.html?raw';
 import modalScript from '../html/login-modal.js?raw';
-import confirmationModalScript from '../html/confirmation-modal.js?raw';
 import Services from './service';
 import { U32_MAX } from './service';
 import { navigate } from '../router';
@@ -37,6 +35,22 @@ export default class ModalService {
     document.head.appendChild(newScript).parentNode?.removeChild(newScript);
   }
 
+  async injectModal(members: any[]) {
+    const container = document.querySelector('.page-container');
+    if (container) {
+      let html = await fetch('/src/components/modal/confirmation-modal.html').then((res) => res.text());
+      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
+      html = html.replace('{{device2}}', await addressToEmoji(members[0]['sp_addresses'][1]));
+      container.innerHTML += html; 
+  
+      // Dynamically load the header JS
+      const script = document.createElement('script');
+      script.src = '/src/components/modal/confirmation-modal.ts';
+      script.type = 'module';
+      document.head.appendChild(script);
+    }
+  }
+
   public async openConfirmationModal(pcd: any, outpointCommitment: string) {
     let roles = JSON.parse(pcd['roles']); // ['members'][0];
     console.log(roles);
@@ -51,19 +65,13 @@ export default class ModalService {
         this.paired_addresses.push(address);
       }
     }
-    let html = confirmationModalHtml;
-    html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
-    html = html.replace('{{device2}}', await addressToEmoji(members[0]['sp_addresses'][1]));
-    this.currentOutpoint = outpointCommitment as string;
-    const container = document.querySelector('.page-container');
-
-    if (container) container.innerHTML += html;
+    await this.injectModal(members)
     const modal = document.getElementById('modal');
     if (modal) modal.style.display = 'flex';
-    const newScript = document.createElement('script');
-    newScript.setAttribute('type', 'module');
-    newScript.textContent = confirmationModalScript;
-    document.head.appendChild(newScript).parentNode?.removeChild(newScript);
+    // const newScript = document.createElement('script');
+    // newScript.setAttribute('type', 'module');
+    // newScript.textContent = confirmationModalScript;
+    // document.head.appendChild(newScript).parentNode?.removeChild(newScript);
 
     // Add correct text