handleSource link-service

src/pages/home/home.ts

@@ -4,6 +4,8 @@ import { addSubscription } from '../../utils/subscription.utils';
 import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji} from '../../utils/sp-address.utils';
 import { getCorrectDOM } from '../../utils/html.utils';
 import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
+import { navigate, handleSource } from '../../router';
+
 export { QrScannerComponent };
 export async function initHomePage(): Promise<void> {
   console.log('INIT-HOME');
@@ -26,6 +28,18 @@ export async function initHomePage(): Promise<void> {
   
   // Add this line to populate the select when the page loads
   await populateMemberSelect();
+
+  const endpoint = window.location.pathname;
+  console.log('endpoint', endpoint);
+  
+  if (endpoint && endpoint !== '/') {
+    try {
+      await handleSource(endpoint);
+      console.log('handleSource', endpoint);
+    } catch (error) {
+      console.error('Error handling endpoint:', error);
+    }
+  }
 }
 
 //// Modal

src/router.ts

@@ -148,31 +148,12 @@ export async function init(): Promise<void> {
     await services.restoreSecretsFromDB();
 
     // If we have a service redirection flag, we intercept it here
-    const queryString = window.location.search;
+    const endpoint = window.location.pathname;
-    const urlParams = new URLSearchParams(queryString);
-    const source = urlParams.get('source');
 
-    if (source === "lecoffre") {
+    if (endpoint) {
-      console.log('Detected source \'lecoffre\'')
+      await handleSource(endpoint);
-      // We pair first if necessary
-      if (!services.isPaired()) {
-        await prepareAndSendPairingTx(); 
-        await services.confirmPairing();
-      }
-      if (services.isPaired()) {
-        // pop up to inform user that they will be redirected to lecoffre with their 4nk identity
-        alert("User successfully created, you will be redirected to lecoffre.io");
-        // Once paired we get a copy of the device without the spend key
-        const neuteredDevice = services.dumpNeuteredDevice();
-        if (!neuteredDevice) {
-          console.error('Failed to get a neutered device');
-          return;
-        }
-        // We send the neutered device to the main frame
-        window.parent.postMessage({ type: 'RESPONSE', payload: JSON.stringify(neuteredDevice) }, 'https://lecoffreio.4nkweb.com');
-      }
     } else {
-      console.log('No source provided');
+      console.log('No endpoint provided');
     }
 
     if (services.isPaired()) {
@@ -186,6 +167,84 @@ export async function init(): Promise<void> {
   }
 }
 
+export async function handleSource(endpoint: string) {
+  const services = await Services.getInstance();
+  
+  switch (endpoint) {
+    case '/link-service':
+      window.addEventListener('message', async (event: MessageEvent) => {
+        console.log("Received message:", event.data);
+        if (event.data.type === 'REQUEST_LINK') {
+          console.log("Received link request, showing confirmation modal");
+          
+          const modalService = await ModalService.getInstance();
+          const result = await modalService.showConfirmationModal({
+            title: 'Confirmation de liaison',
+            content: `
+              <div class="modal-confirmation">
+                <h3>Liaison avec ${event.origin}</h3>
+                <p>Vous êtes sur le point de lier votre identité 4NK avec ${event.origin}.</p>
+                <p>Cette action permettra à ${event.origin} d'intéragir avec votre identité 4NK.</p>
+                <p>Voulez-vous continuer ?</p>
+              </div>
+            `,
+            confirmText: 'Ajouter un service',
+            cancelText: 'Annuler'
+          });
+
+          if (result) {
+            try {
+              if (!services.isPaired()) {
+                await prepareAndSendPairingTx();
+                await services.confirmPairing();
+              }
+
+              const neuteredDevice = services.dumpNeuteredDevice();
+              if (neuteredDevice) {
+                window.parent.postMessage(
+                  { 
+                    type: 'RESPONSE', 
+                    success: true,
+                    payload: JSON.stringify(neuteredDevice) 
+                  },
+                  event.origin
+                );
+              } else {
+                throw new Error('Failed to get a neutered device');
+              }
+            } catch (error) {
+              window.parent.postMessage(
+                { 
+                  type: 'RESPONSE', 
+                  success: false, 
+                  error: 'Failed to complete pairing process' 
+                },
+                event.origin
+              );
+            }
+          } else {
+            // The user canceled the link request
+            console.log("User canceled the linking process");
+            window.parent.postMessage(
+              { 
+                type: 'RESPONSE', 
+                success: false, 
+                error: 'User canceled linking' 
+              },
+              event.origin
+            );
+          }
+        }
+      });
+      console.log('sending message from link-service');
+      window.parent.postMessage({ type: 'LISTENING', endpoint: endpoint }, '*');
+      break;
+
+    default:
+      console.log('Unknown endpoint:', endpoint);
+  }
+}
+
 async function cleanPage() {
   const container = document.querySelector('#containerId');
   if (container) container.innerHTML = '';

src/services/modal.service.ts

@@ -8,6 +8,13 @@ import { RoleDefinition } from 'pkg/sdk_client';
 import { initValidationModal } from '~/components/validation-modal/validation-modal';
 import { interpolate } from '~/utils/html.utils';
 
+interface ConfirmationModalOptions {
+  title: string;
+  content: string;
+  confirmText?: string;
+  cancelText?: string;
+}
+
 export default class ModalService {
   private static instance: ModalService;
   private stateId: string | null = null;

src/utils/sp-address.utils.ts

@@ -105,6 +105,7 @@ export function initAddressInput() {
   const emojiDisplay = container.querySelector('#emoji-display-2');
   const okButton = container.querySelector('#okButton') as HTMLButtonElement;
   const createButton = container.querySelector('#createButton') as HTMLButtonElement;
+  const actionButton = container.querySelector('#actionButton') as HTMLButtonElement;
   addSubscription(addressInput, 'input', async () => {
     let address = addressInput.value;
 
@@ -141,12 +142,6 @@ export function initAddressInput() {
     }
   });
 
-  if (okButton) {
-    addSubscription(okButton, 'click', () => {
-      onOkButtonClick();
-    });
-  }
-
   if (createButton) {
     addSubscription(createButton, 'click', () => {
       onCreateButtonClick();
@@ -154,15 +149,6 @@ export function initAddressInput() {
   }
 }
 
-// TODO I don't think this is still relevant, but we need to talk about what we expect this button to do
-async function onOkButtonClick() {
-  try {
-    await prepareAndSendPairingTx();
-  } catch (e) {
-     console.error(`onOkButtonClick error: ${e}`);
-  }
-}
-
 async function onCreateButtonClick() {
   try {
     await prepareAndSendPairingTx();