Refactoring, upgrading & adding logs in router.ts

WORKFLOW_PAIRING_ANALYSIS.md

@@ -0,0 +1,385 @@
+# Analyse du Workflow de Pairing - Processus de Couplage d'Appareils
+
+## Introduction
+
+Ce document présente une analyse complète du workflow de pairing (processus de couplage) dans l'écosystème 4NK, qui permet à deux appareils de s'associer de manière sécurisée. Le processus implique à la fois le code TypeScript côté client (`ihm_client_dev2`) et les fonctionnalités WebAssembly compilées depuis Rust (`sdk_client`).
+
+## Vue d'ensemble du Processus
+
+Le workflow de pairing est déclenché par la fonction `onCreateButtonClick()` et suit une séquence d'actions coordonnées entre l'interface utilisateur, les services JavaScript et le module WebAssembly.
+
+## Étapes Détaillées du Workflow
+
+### 1. Déclenchement Initial
+
+**Fonction :** `onCreateButtonClick()`  
+**Localisation :** `src/utils/sp-address.utils.ts:152-160`
+
+```@/home/ank/dev/ihm_client_dev2/src/utils/sp-address.utils.ts#152:160
+async function onCreateButtonClick() {
+  try {
+    await prepareAndSendPairingTx();
+    // Don't call confirmPairing immediately - it will be called when the pairing process is complete
+    console.log('Pairing process initiated. Waiting for completion...');
+  } catch (e) {
+     console.error(`onCreateButtonClick error: ${e}`);
+  }
+}
+```
+
+**Actions :**
+- Appel de `prepareAndSendPairingTx()`
+- Gestion d'erreur avec logging
+- Attente de la complétion du processus
+
+### 2. Préparation et Envoi de la Transaction de Pairing
+
+**Fonction :** `prepareAndSendPairingTx()`  
+**Localisation :** `src/utils/sp-address.utils.ts:162-201`
+
+**Actions principales :**
+
+#### 2.1 Initialisation du Service
+```typescript
+const service = await Services.getInstance();
+const relayAddress = service.getAllRelays();
+```
+
+#### 2.2 Création du Processus de Pairing
+```typescript
+const createPairingProcessReturn = await service.createPairingProcess("", []);
+```
+
+#### 2.3 Vérification des Connexions
+```typescript
+await service.checkConnections(
+  createPairingProcessReturn.updated_process.current_process,
+  createPairingProcessReturn.updated_process.current_process.states[0].state_id
+);
+```
+
+#### 2.4 Configuration des Identifiants
+```typescript
+service.setProcessId(createPairingProcessReturn.updated_process.process_id);
+service.setStateId(createPairingProcessReturn.updated_process.current_process.states[0].state_id);
+```
+
+#### 2.5 Mise à Jour du Device
+```typescript
+const currentDevice = await service.getDeviceFromDatabase();
+if (currentDevice) {
+  currentDevice.pairing_process_commitment = createPairingProcessReturn.updated_process.process_id;
+  await service.saveDeviceInDatabase(currentDevice);
+}
+```
+
+#### 2.6 Traitement du Retour API
+```typescript
+await service.handleApiReturn(createPairingProcessReturn);
+```
+
+### 3. Création du Processus de Pairing (Côté Service)
+
+**Fonction :** `createPairingProcess()`  
+**Localisation :** `src/services/service.ts:334-371`
+
+**Paramètres :**
+- `userName`: Nom d'utilisateur (vide dans ce cas)
+- `pairWith`: Liste des adresses à coupler (vide initialement)
+
+**Actions :**
+
+#### 3.1 Vérification de l'État de Pairing
+```typescript
+if (this.sdkClient.is_paired()) {
+  throw new Error('Device already paired');
+}
+```
+
+#### 3.2 Préparation des Données
+```typescript
+const myAddress: string = this.sdkClient.get_address();
+pairWith.push(myAddress);
+
+const privateData = {
+  description: 'pairing',
+  counter: 0,
+};
+
+const publicData = {
+  memberPublicName: userName,
+  pairedAddresses: pairWith,
+};
+```
+
+#### 3.3 Définition des Rôles
+```typescript
+const roles: Record<string, RoleDefinition> = {
+  pairing: {
+    members: [],
+    validation_rules: [{
+      quorum: 1.0,
+      fields: validation_fields,
+      min_sig_member: 1.0,
+    }],
+    storages: [STORAGEURL]
+  },
+};
+```
+
+#### 3.4 Appel de Création du Processus
+```typescript
+return this.createProcess(privateData, publicData, roles);
+```
+
+### 4. Création du Processus (Côté WebAssembly)
+
+**Fonction :** `create_new_process()`  
+**Localisation :** `sdk_client/src/api.rs:1218-1264`
+
+**Actions principales :**
+
+#### 4.1 Validation des Rôles
+```rust
+if roles.is_empty() {
+    return Err(ApiError { message: "Roles can't be empty".to_owned() });
+}
+```
+
+#### 4.2 Création de la Transaction
+```rust
+let relay_address: SilentPaymentAddress = relay_address.try_into()?;
+let tx = create_transaction_for_addresses(&local_device, &freezed_utxos, &vec![relay_address], fee_rate_checked)?;
+let unsigned_transaction = SpClient::finalize_transaction(tx)?;
+```
+
+#### 4.3 Gestion des Secrets Partagés
+```rust
+let new_secrets = get_shared_secrets_in_transaction(&unsigned_transaction, &vec![relay_address])?;
+let mut shared_secrets = lock_shared_secrets()?;
+for (address, secret) in new_secrets {
+    shared_secrets.confirm_secret_for_address(secret, address);
+}
+```
+
+#### 4.4 Création de l'État du Processus
+```rust
+let process_id = OutPoint::new(unsigned_transaction.unsigned_tx.as_ref().unwrap().txid(), 0);
+let mut new_state = ProcessState::new(process_id, private_data.clone(), public_data.clone(), roles.clone())?;
+let mut process = Process::new(process_id);
+```
+
+### 5. Vérification des Connexions
+
+**Fonction :** `checkConnections()`  
+**Localisation :** `src/services/service.ts:232-289`
+
+**Actions :**
+
+#### 5.1 Validation des États
+```typescript
+if (process.states.length < 2) {
+  throw new Error('Process doesn\'t have any state yet');
+}
+```
+
+#### 5.2 Extraction des Rôles et Membres
+```typescript
+let roles: Record<string, RoleDefinition> | null = null;
+if (!stateId) {
+  roles = process.states[process.states.length - 2].roles;
+} else {
+  roles = process.states.find(state => state.state_id === stateId)?.roles || null;
+}
+```
+
+#### 5.3 Gestion des Processus de Pairing
+```typescript
+if (members.size === 0) {
+  // This must be a pairing process
+  const publicData = process.states[0]?.public_data;
+  if (!publicData || !publicData['pairedAddresses']) {
+    throw new Error('Not a pairing process');
+  }
+  const decodedAddresses = this.decodeValue(publicData['pairedAddresses']);
+  members.add({ sp_addresses: decodedAddresses });
+}
+```
+
+#### 5.4 Connexion aux Adresses Non Connectées
+```typescript
+if (unconnectedAddresses && unconnectedAddresses.size != 0) {
+  const apiResult = await this.connectAddresses(Array.from(unconnectedAddresses));
+  await this.handleApiReturn(apiResult);
+}
+```
+
+### 6. Traitement du Retour API
+
+**Fonction :** `handleApiReturn()`  
+**Localisation :** `src/services/service.ts:648-775`
+
+**Actions principales :**
+
+#### 6.1 Signature de Transaction
+```typescript
+if (apiReturn.partial_tx) {
+  const res = this.sdkClient.sign_transaction(apiReturn.partial_tx);
+  apiReturn.new_tx_to_send = res.new_tx_to_send;
+}
+```
+
+#### 6.2 Envoi de Transaction
+```typescript
+if (apiReturn.new_tx_to_send && apiReturn.new_tx_to_send.transaction.length != 0) {
+  this.sendNewTxMessage(JSON.stringify(apiReturn.new_tx_to_send));
+  await new Promise(r => setTimeout(r, 500));
+}
+```
+
+#### 6.3 Gestion des Secrets
+```typescript
+if (apiReturn.secrets) {
+  const unconfirmedSecrets = apiReturn.secrets.unconfirmed_secrets;
+  const confirmedSecrets = apiReturn.secrets.shared_secrets;
+  // Sauvegarde en base de données
+}
+```
+
+#### 6.4 Mise à Jour du Processus
+```typescript
+if (apiReturn.updated_process) {
+  const updatedProcess = apiReturn.updated_process;
+  const processId: string = updatedProcess.process_id;
+  await this.saveProcessToDb(processId, updatedProcess.current_process);
+}
+```
+
+#### 6.5 Confirmation Automatique du Pairing
+```typescript
+// Check if this is a pairing process that's ready for confirmation
+const existingDevice = await this.getDeviceFromDatabase();
+if (existingDevice && existingDevice.pairing_process_commitment === processId) {
+  const lastState = updatedProcess.current_process.states[updatedProcess.current_process.states.length - 1];
+  if (lastState && lastState.public_data && lastState.public_data['pairedAddresses']) {
+    console.log('Pairing process updated with paired addresses, confirming pairing...');
+    await this.confirmPairing();
+  }
+}
+```
+
+### 7. Confirmation du Pairing
+
+**Fonction :** `confirmPairing()`  
+**Localisation :** `src/services/service.ts:793-851`
+
+**Actions :**
+
+#### 7.1 Récupération du Processus de Pairing
+```typescript
+const existingDevice = await this.getDeviceFromDatabase();
+const pairingProcessId = existingDevice.pairing_process_commitment;
+const myPairingProcess = await this.getProcess(pairingProcessId);
+```
+
+#### 7.2 Extraction des Adresses Couplées
+```typescript
+let myPairingState = this.getLastCommitedState(myPairingProcess);
+const encodedSpAddressList = myPairingState.public_data['pairedAddresses'];
+const spAddressList = this.decodeValue(encodedSpAddressList);
+```
+
+#### 7.3 Pairing Effectif du Device
+```typescript
+this.sdkClient.unpair_device(); // Clear any existing pairing
+this.sdkClient.pair_device(pairingProcessId, spAddressList);
+```
+
+#### 7.4 Sauvegarde du Device Mis à Jour
+```typescript
+const newDevice = this.dumpDeviceFromMemory();
+newDevice.pairing_process_commitment = pairingProcessId;
+await this.saveDeviceInDatabase(newDevice);
+```
+
+## Architecture Technique
+
+### Côté Client (TypeScript)
+
+**Composants principaux :**
+- **Interface Utilisateur :** Gestion des événements de clic et affichage des emojis
+- **Services :** Orchestration du workflow et communication avec WebAssembly
+- **Base de Données :** Stockage des devices, secrets et processus
+- **WebSocket :** Communication avec les relais
+
+### Côté WebAssembly (Rust)
+
+**Fonctionnalités clés :**
+- **Gestion des Wallets :** Création et manipulation des portefeuilles Silent Payment
+- **Cryptographie :** Génération de secrets partagés et signatures
+- **Transactions :** Création et finalisation des transactions Bitcoin
+- **Processus :** Gestion des états et validation des changements
+
+## Types de Données Importants
+
+### Device
+```typescript
+interface Device {
+  sp_wallet: SpWallet;
+  pairing_process_commitment: OutPoint | null;
+  paired_member: Member;
+}
+```
+
+### Process
+```typescript
+interface Process {
+  states: ProcessState[];
+}
+```
+
+### ApiReturn
+```typescript
+interface ApiReturn {
+  secrets: SecretsStore | null;
+  updated_process: UpdatedProcess | null;
+  new_tx_to_send: NewTxMessage | null;
+  ciphers_to_send: string[];
+  commit_to_send: CommitMessage | null;
+  push_to_storage: string[];
+  partial_tx: TsUnsignedTransaction | null;
+}
+```
+
+## Flux de Communication
+
+1. **UI → Service :** Déclenchement du processus via `onCreateButtonClick()`
+2. **Service → WebAssembly :** Appel des fonctions WASM pour la création du processus
+3. **WebAssembly → Service :** Retour des données via `ApiReturn`
+4. **Service → WebSocket :** Envoi des messages aux relais
+5. **WebSocket → Service :** Réception des réponses des relais
+6. **Service → Database :** Sauvegarde des états et secrets
+7. **Service → UI :** Mise à jour de l'interface utilisateur
+
+## Points d'Attention
+
+### Sécurité
+- Les secrets partagés sont générés côté WebAssembly (Rust)
+- Les transactions sont signées de manière sécurisée
+- Les données sensibles sont chiffrées avant stockage
+
+### Asynchronisme
+- Le processus est entièrement asynchrone
+- Utilisation de promesses et callbacks pour la coordination
+- Gestion d'erreur à chaque étape critique
+
+### État du Processus
+- Suivi de l'état via `processId` et `stateId`
+- Sauvegarde persistante en base de données
+- Récupération possible en cas d'interruption
+
+## Conclusion
+
+Le workflow de pairing représente un processus complexe mais bien structuré qui coordonne l'interface utilisateur TypeScript avec les fonctionnalités cryptographiques Rust via WebAssembly. Cette architecture permet une sécurité maximale tout en maintenant une expérience utilisateur fluide. Le processus est conçu pour être résilient aux interruptions et permet une récupération d'état en cas de problème.
+
+La séparation claire entre les responsabilités (UI, orchestration, cryptographie) facilite la maintenance et les évolutions futures du système de pairing.

nginx.dev.conf

@@ -26,7 +26,7 @@ server {
 
     location /storage/ {
         rewrite ^/storage(/.*)$ $1 break;
-        proxy_pass http://localhost:8080;
+        proxy_pass http://localhost:8081;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "Upgrade";

nginx.prod.conf

@@ -0,0 +1,79 @@
+# --- 1. REDIRECTION HTTP VERS HTTPS ---
+server {
+    listen 80;
+    server_name dev2.4nkweb.com;
+    return 301 https://$host$request_uri;
+}
+
+# --- 2. CONFIGURATION HTTPS PRINCIPALE ---
+server {
+    listen 443 ssl;
+    server_name dev2.4nkweb.com;
+
+    # Chemins des certificats SSL
+    ssl_certificate /etc/letsencrypt/live/dev2.4nkweb.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/dev2.4nkweb.com/privkey.pem;
+	ssl_protocols TLSv1.2 TLSv1.3;
+	ssl_prefer_server_ciphers on;
+	ssl_ciphers HIGH:!aNULL:!MD5;
+
+    # --- LOCATION POUR VITE (Front-end + HMR WebSocket) ---
+    location / {
+        proxy_pass http://localhost:3003;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+    }
+
+    # --- LOCATION POUR L'AUTRE WEBSOCKET (port 8090) ---
+	location /ws/ {
+		proxy_pass http://localhost:8090;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection "Upgrade";
+		proxy_set_header Host $host;
+		proxy_set_header X-Real-IP $remote_addr;
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header X-Forwarded-Proto $scheme;
+		proxy_set_header X-NginX-Proxy true;
+		proxy_read_timeout 86400;
+	}
+
+    # --- LOCATION POUR SDK_STORAGE (port 8081) ---
+    location /storage/ {
+		# Gestion du préflight CORS
+        if ($request_method = 'OPTIONS') {
+            add_header 'Access-Control-Allow-Origin' '*' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
+            add_header 'Access-Control-Max-Age' 86400;
+            add_header 'Content-Length' 0;
+            add_header 'Content-Type' 'text/plain';
+            return 204;
+        }       
+        # Headers CORS pour les requêtes réelles
+        add_header 'Access-Control-Allow-Origin' '*' always;
+        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
+        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;       
+        rewrite ^/storage(/.*)$ $1 break;
+        proxy_pass http://localhost:8081;
+		proxy_http_version 1.1;
+        proxy_set_header Host $host;
+	}
+
+    # --- LOCATION POUR TON API (port 8091) ---
+    location /api/ {
+        proxy_pass http://localhost:8091;
+		proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # CORS headers
+        add_header Access-Control-Allow-Origin "*" always;
+        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE" always;
+        add_header Access-Control-Allow-Headers "Authorization,Content-Type,Accept,X-Requested-With" always;
+    }
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "sdk_client",
   "version": "1.0.0",
+  "type": "module",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build_wasm": "wasm-pack build --out-dir ../ihm_client/pkg  ../sdk_client --target bundler --dev",
+    "build_wasm": "wasm-pack build --out-dir ../ihm_client_dev2/pkg  ../sdk_client --target bundler --dev",
     "start": "vite --host 0.0.0.0",
     "build": "tsc && vite build",
     "deploy": "sudo cp -r dist/* /var/www/html/",

src/main.ts

@@ -1,20 +1,20 @@
 import { SignatureComponent } from './pages/signature/signature-component';
 import { SignatureElement } from './pages/signature/signature';
-/*import { ChatComponent } from './pages/chat/chat-component';
+// import { ChatComponent } from './pages/chat/chat-component';
-import { ChatElement } from './pages/chat/chat';*/
+// import { ChatElement } from './pages/chat/chat';
-import { AccountComponent } from './pages/account/account-component';
+// import { AccountComponent } from './pages/account/account-component';
-import { AccountElement } from './pages/account/account';
+// import { AccountElement } from './pages/account/account';
 
-export { SignatureComponent, SignatureElement, AccountComponent, AccountElement };
+export { SignatureComponent, SignatureElement };
 
 declare global {
   interface HTMLElementTagNameMap {
     'signature-component': SignatureComponent;
     'signature-element': SignatureElement;
-    /*'chat-component': ChatComponent;
+    // 'chat-component': ChatComponent;
-    'chat-element': ChatElement;*/
+    // 'chat-element': ChatElement;
-    'account-component': AccountComponent;
+    // 'account-component': AccountComponent;
-    'account-element': AccountElement;
+    // 'account-element': AccountElement;
   }
 }
 
@@ -25,6 +25,6 @@ if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) {
   customElements.define('signature-element', SignatureElement);
   /*customElements.define('chat-component', ChatComponent);
   customElements.define('chat-element', ChatElement);*/
-  customElements.define('account-component', AccountComponent);
+  // customElements.define('account-component', AccountComponent);
-  customElements.define('account-element', AccountElement);
+  // customElements.define('account-element', AccountElement);
 }

src/pages/account/account-component.ts

@@ -1,62 +1,62 @@
-import { AccountElement } from './account';
+// import { AccountElement } from './account';
-import accountCss from '../../../public/style/account.css?raw';
+// import accountCss from '../../../style/account.css?raw';
-import Services from '../../services/service.js';
+// import Services from '../../services/service.js';
 
-class AccountComponent extends HTMLElement {
+// class AccountComponent extends HTMLElement {
-  _callback: any;
+//   _callback: any;
-  accountElement: AccountElement | null = null;
+//   accountElement: AccountElement | null = null;
 
-  constructor() {
+//   constructor() {
-    super();
+//     super();
-    console.log('INIT');
+//     console.log('INIT');
-    this.attachShadow({ mode: 'open' });
+//     this.attachShadow({ mode: 'open' });
 
-    this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
+//     this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
-  }
+//   }
 
-  connectedCallback() {
+//   connectedCallback() {
-    console.log('CALLBACKs');
+//     console.log('CALLBACKs');
-    this.render();
+//     this.render();
-    this.fetchData();
+//     this.fetchData();
 
-    if (!customElements.get('account-element')) {
+//     if (!customElements.get('account-element')) {
-      customElements.define('account-element', AccountElement);
+//       customElements.define('account-element', AccountElement);
-    }
+//     }
-  }
+//   }
 
-  async fetchData() {
+//   async fetchData() {
-    if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
+//     if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
-      const data = await (window as any).myService?.getProcesses();
+//       const data = await (window as any).myService?.getProcesses();
-    } else {
+//     } else {
-      const service = await Services.getInstance();
+//       const service = await Services.getInstance();
-      const data = await service.getProcesses();
+//       const data = await service.getProcesses();
-    }
+//     }
-  }
+//   }
 
-  set callback(fn) {
+//   set callback(fn) {
-    if (typeof fn === 'function') {
+//     if (typeof fn === 'function') {
-      this._callback = fn;
+//       this._callback = fn;
-    } else {
+//     } else {
-      console.error('Callback is not a function');
+//       console.error('Callback is not a function');
-    }
+//     }
-  }
+//   }
 
-  get callback() {
+//   get callback() {
-    return this._callback;
+//     return this._callback;
-  }
+//   }
 
-  render() {
+//   render() {
-    if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
+//     if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
-      const style = document.createElement('style');
+//       const style = document.createElement('style');
-      style.textContent = accountCss;
+//       style.textContent = accountCss;
 
-      const accountElement = document.createElement('account-element');
+//       const accountElement = document.createElement('account-element');
 
-      this.shadowRoot.appendChild(style);
+//       this.shadowRoot.appendChild(style);
-      this.shadowRoot.appendChild(accountElement);
+//       this.shadowRoot.appendChild(accountElement);
-    }
+//     }
-  }
+//   }
-}
+// }
 
-export { AccountComponent };
+// export { AccountComponent };
-customElements.define('account-component', AccountComponent);
+// customElements.define('account-component', AccountComponent);

src/pages/account/account.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>Account</title>
@@ -7,4 +7,4 @@
     <account-component></account-component>
     <script type="module" src="./account.ts"></script>
 </body>
-</html>
+</html> -->

src/pages/account/document-validation.ts

@@ -1,321 +1,321 @@
-import { ProcessState } from '../../../pkg/sdk_client';
+// import { ProcessState } from '../../../pkg/sdk_client';
-import Services from '../../services/service';
+// import Services from '../../services/service';
 
-interface State {
+// interface State {
-  file: File | null;
+//   file: File | null;
-  fileHash: string | null;
+//   fileHash: string | null;
-  certificate: ProcessState | null;
+//   certificate: ProcessState | null;
-  commitmentHashes: string[];
+//   commitmentHashes: string[];
-}
+// }
 
-export interface Vin {
+// export interface Vin {
-  txid: string;            // The txid of the previous transaction (being spent)
+//   txid: string;            // The txid of the previous transaction (being spent)
-  vout: number;            // The output index in the previous tx
+//   vout: number;            // The output index in the previous tx
-  prevout: {
+//   prevout: {
-    scriptpubkey: string;
+//     scriptpubkey: string;
-    scriptpubkey_asm: string;
+//     scriptpubkey_asm: string;
-    scriptpubkey_type: string;
+//     scriptpubkey_type: string;
-    scriptpubkey_address: string;
+//     scriptpubkey_address: string;
-    value: number;
+//     value: number;
-  };
+//   };
-  scriptsig: string;
+//   scriptsig: string;
-  scriptsig_asm: string;
+//   scriptsig_asm: string;
-  witness: string[];
+//   witness: string[];
-  is_coinbase: boolean;
+//   is_coinbase: boolean;
-  sequence: number;
+//   sequence: number;
-}
+// }
 
-export interface TransactionInfo {
+// export interface TransactionInfo {
-  txid: string;
+//   txid: string;
-  version: number;
+//   version: number;
-  locktime: number;
+//   locktime: number;
-  vin: Vin[];   
+//   vin: Vin[];   
-  vout: any[];  
+//   vout: any[];  
-  size: number;
+//   size: number;
-  weight: number;
+//   weight: number;
-  fee: number;
+//   fee: number;
-  status: {
+//   status: {
-    confirmed: boolean;
+//     confirmed: boolean;
-    block_height: number;
+//     block_height: number;
-    block_hash: string;
+//     block_hash: string;
-    block_time: number;
+//     block_time: number;
-  };
+//   };
-}
+// }
 
-export function getDocumentValidation(container: HTMLElement) {
+// export function getDocumentValidation(container: HTMLElement) {
-  const state: State = {
+//   const state: State = {
-    file: null,
+//     file: null,
-    fileHash: null,
+//     fileHash: null,
-    certificate: null,
+//     certificate: null,
-    commitmentHashes: []
+//     commitmentHashes: []
-  }
+//   }
 
-  container.innerHTML = '';
+//   container.innerHTML = '';
-  container.style.cssText = `
+//   container.style.cssText = `
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    justify-content: center;
+//     justify-content: center;
-    align-items: center;
+//     align-items: center;
-    min-height: 100vh;
+//     min-height: 100vh;
-    gap: 2rem;
+//     gap: 2rem;
-  `;
+//   `;
 
-  function createDropButton(
+//   function createDropButton(
-    label: string,
+//     label: string,
-    onDrop: (file: File, updateVisuals: (file: File) => void) => void,
+//     onDrop: (file: File, updateVisuals: (file: File) => void) => void,
-    accept: string = '*/*' 
+//     accept: string = '*/*' 
-  ): HTMLElement {
+//   ): HTMLElement {
-    const wrapper = document.createElement('div');
+//     const wrapper = document.createElement('div');
-    wrapper.style.cssText = `
+//     wrapper.style.cssText = `
-      width: 200px;
+//       width: 200px;
-      height: 100px;
+//       height: 100px;
-      border: 2px dashed #888;
+//       border: 2px dashed #888;
-      border-radius: 8px;
+//       border-radius: 8px;
-      display: flex;
+//       display: flex;
-      flex-direction: column;
+//       flex-direction: column;
-      align-items: center;
+//       align-items: center;
-      justify-content: center;
+//       justify-content: center;
-      cursor: pointer;
+//       cursor: pointer;
-      font-weight: bold;
+//       font-weight: bold;
-      background: #f8f8f8;
+//       background: #f8f8f8;
-      text-align: center;
+//       text-align: center;
-      padding: 0.5rem;
+//       padding: 0.5rem;
-      box-sizing: border-box;
+//       box-sizing: border-box;
-    `;
+//     `;
 
-    const title = document.createElement('div');
+//     const title = document.createElement('div');
-    title.textContent = label;
+//     title.textContent = label;
 
-    const filename = document.createElement('div');
+//     const filename = document.createElement('div');
-    filename.style.cssText = `
+//     filename.style.cssText = `
-      font-size: 0.85rem;
+//       font-size: 0.85rem;
-      margin-top: 0.5rem;
+//       margin-top: 0.5rem;
-      color: #444;
+//       color: #444;
-      word-break: break-word;
+//       word-break: break-word;
-      text-align: center;
+//       text-align: center;
-    `;
+//     `;
 
-    wrapper.appendChild(title);
+//     wrapper.appendChild(title);
-    wrapper.appendChild(filename);
+//     wrapper.appendChild(filename);
 
-    const updateVisuals = (file: File) => {
+//     const updateVisuals = (file: File) => {
-      wrapper.style.borderColor = 'green';
+//       wrapper.style.borderColor = 'green';
-      wrapper.style.background = '#e6ffed';
+//       wrapper.style.background = '#e6ffed';
-      filename.textContent = file.name;
+//       filename.textContent = file.name;
-    };
+//     };
 
-    // === Hidden file input ===
+//     // === Hidden file input ===
-    const fileInput = document.createElement('input');
+//     const fileInput = document.createElement('input');
-    fileInput.type = 'file';
+//     fileInput.type = 'file';
-    fileInput.accept = accept;
+//     fileInput.accept = accept;
-    fileInput.style.display = 'none';
+//     fileInput.style.display = 'none';
-    document.body.appendChild(fileInput);
+//     document.body.appendChild(fileInput);
 
-    fileInput.onchange = () => {
+//     fileInput.onchange = () => {
-      const file = fileInput.files?.[0];
+//       const file = fileInput.files?.[0];
-      if (file) {
+//       if (file) {
-        onDrop(file, updateVisuals);
+//         onDrop(file, updateVisuals);
-        fileInput.value = ''; // reset so same file can be re-selected
+//         fileInput.value = ''; // reset so same file can be re-selected
-      }
+//       }
-    };
+//     };
 
-    // === Handle drag-and-drop ===
+//     // === Handle drag-and-drop ===
-    wrapper.ondragover = e => {
+//     wrapper.ondragover = e => {
-      e.preventDefault();
+//       e.preventDefault();
-      wrapper.style.background = '#e0e0e0';
+//       wrapper.style.background = '#e0e0e0';
-    };
+//     };
 
-    wrapper.ondragleave = () => {
+//     wrapper.ondragleave = () => {
-      wrapper.style.background = '#f8f8f8';
+//       wrapper.style.background = '#f8f8f8';
-    };
+//     };
 
-    wrapper.ondrop = e => {
+//     wrapper.ondrop = e => {
-      e.preventDefault();
+//       e.preventDefault();
-      wrapper.style.background = '#f8f8f8';
+//       wrapper.style.background = '#f8f8f8';
 
-      const file = e.dataTransfer?.files?.[0];
+//       const file = e.dataTransfer?.files?.[0];
-      if (file) {
+//       if (file) {
-        onDrop(file, updateVisuals);
+//         onDrop(file, updateVisuals);
-      }
+//       }
-    };
+//     };
 
-    // === Handle click to open file manager ===
+//     // === Handle click to open file manager ===
-    wrapper.onclick = () => {
+//     wrapper.onclick = () => {
-      fileInput.click();
+//       fileInput.click();
-    };
+//     };
 
-    return wrapper;
+//     return wrapper;
-  }
+//   }
 
-  const fileDropButton = createDropButton('Drop file', async (file, updateVisuals) => {
+//   const fileDropButton = createDropButton('Drop file', async (file, updateVisuals) => {
-    try {
+//     try {
-      state.file = file;
+//       state.file = file;
-      updateVisuals(file);
+//       updateVisuals(file);
-      console.log('Loaded file:', state.file);
+//       console.log('Loaded file:', state.file);
-      checkReady();
+//       checkReady();
-    } catch (err) {
+//     } catch (err) {
-      alert('Failed to drop the file.');
+//       alert('Failed to drop the file.');
-      console.error(err);
+//       console.error(err);
-    }
+//     }
-  });
+//   });
 
-  const certDropButton = createDropButton('Drop certificate', async (file, updateVisuals) => {
+//   const certDropButton = createDropButton('Drop certificate', async (file, updateVisuals) => {
-    try {
+//     try {
-      const text = await file.text(); 
+//       const text = await file.text(); 
-      const json = JSON.parse(text);
+//       const json = JSON.parse(text);
-      if (
+//       if (
-        typeof json === 'object' &&
+//         typeof json === 'object' &&
-        json !== null &&
+//         json !== null &&
-        typeof json.pcd_commitment === 'object' &&
+//         typeof json.pcd_commitment === 'object' &&
-        typeof json.state_id === 'string'
+//         typeof json.state_id === 'string'
-      ) {
+//       ) {
-        state.certificate = json as ProcessState;
+//         state.certificate = json as ProcessState;
 
-        state.commitmentHashes = Object.values(json.pcd_commitment).map((h: string) =>
+//         state.commitmentHashes = Object.values(json.pcd_commitment).map((h: string) =>
-          h.toLowerCase()
+//           h.toLowerCase()
-        );
+//         );
 
-        updateVisuals(file);
+//         updateVisuals(file);
-        console.log('Loaded certificate, extracted hashes:', state.commitmentHashes);
+//         console.log('Loaded certificate, extracted hashes:', state.commitmentHashes);
-        checkReady();
+//         checkReady();
-      } else {
+//       } else {
-        alert('Invalid certificate structure.');
+//         alert('Invalid certificate structure.');
-      }
+//       }
-    } catch (err) {
+//     } catch (err) {
-      alert('Failed to parse certificate JSON.');
+//       alert('Failed to parse certificate JSON.');
-      console.error(err);
+//       console.error(err);
-    }
+//     }
-  });
+//   });
 
-  const buttonRow = document.createElement('div');
+//   const buttonRow = document.createElement('div');
-  buttonRow.style.display = 'flex';
+//   buttonRow.style.display = 'flex';
-  buttonRow.style.gap = '2rem';
+//   buttonRow.style.gap = '2rem';
-  buttonRow.appendChild(fileDropButton);
+//   buttonRow.appendChild(fileDropButton);
-  buttonRow.appendChild(certDropButton);
+//   buttonRow.appendChild(certDropButton);
 
-  container.appendChild(buttonRow);
+//   container.appendChild(buttonRow);
 
-  async function checkReady() {
+//   async function checkReady() {
-    if (state.file && state.certificate && state.commitmentHashes.length > 0) {
+//     if (state.file && state.certificate && state.commitmentHashes.length > 0) {
-      // We take the commited_in and all pcd_commitment keys to reconstruct all the possible hash
+//       // We take the commited_in and all pcd_commitment keys to reconstruct all the possible hash
-      const fileBlob = {
+//       const fileBlob = {
-        type: state.file.type,
+//         type: state.file.type,
-        data: new Uint8Array(await state.file.arrayBuffer())
+//         data: new Uint8Array(await state.file.arrayBuffer())
-      };
+//       };
-      const service = await Services.getInstance();
+//       const service = await Services.getInstance();
-      const commitedIn = state.certificate.commited_in;
+//       const commitedIn = state.certificate.commited_in;
-      if (!commitedIn) return;
+//       if (!commitedIn) return;
-      const [prevTxid, prevTxVout] = commitedIn.split(':');
+//       const [prevTxid, prevTxVout] = commitedIn.split(':');
-      const processId = state.certificate.process_id;
+//       const processId = state.certificate.process_id;
-      const stateId = state.certificate.state_id;
+//       const stateId = state.certificate.state_id;
-      const process = await service.getProcess(processId);
+//       const process = await service.getProcess(processId);
-      if (!process) return;
+//       if (!process) return;
 
-      // Get the transaction that comes right after the commited_in
+//       // Get the transaction that comes right after the commited_in
-      const nextState = service.getNextStateAfterId(process, stateId);
+//       const nextState = service.getNextStateAfterId(process, stateId);
 
-      if (!nextState) {
+//       if (!nextState) {
-        alert(`❌ Validation failed: No next state, is the state you're trying to validate commited?`);
+//         alert(`❌ Validation failed: No next state, is the state you're trying to validate commited?`);
-        return;
+//         return;
-      }
+//       }
 
-      const [outspentTxId, _] = nextState.commited_in.split(':');
+//       const [outspentTxId, _] = nextState.commited_in.split(':');
-      console.log(outspentTxId);
+//       console.log(outspentTxId);
 
-      // Check that the commitment transaction exists, and that it commits to the state id
+//       // Check that the commitment transaction exists, and that it commits to the state id
 
-      const txInfo = await fetchTransaction(outspentTxId);
+//       const txInfo = await fetchTransaction(outspentTxId);
-      if (!txInfo) {
+//       if (!txInfo) {
-        console.error(`Validation error: Can't fetch new state commitment transaction`);
+//         console.error(`Validation error: Can't fetch new state commitment transaction`);
-        alert(`❌ Validation failed: invalid or non existent commited_in for state ${stateId}.`);
+//         alert(`❌ Validation failed: invalid or non existent commited_in for state ${stateId}.`);
-        return;
+//         return;
-      }
+//       }
 
-      // We must check that this transaction indeed spend the commited_in we have in the certificate
+//       // We must check that this transaction indeed spend the commited_in we have in the certificate
-      let found = false;
+//       let found = false;
-      for (const vin of txInfo.vin) {
+//       for (const vin of txInfo.vin) {
-        if (vin.txid === prevTxid) {
+//         if (vin.txid === prevTxid) {
-          found = true;
+//           found = true;
-          break;
+//           break;
-        }
+//         }
-      }
+//       }
 
-      if (!found) {
+//       if (!found) {
-        console.error(`Validation error: new state doesn't spend previous state commitment transaction`);
+//         console.error(`Validation error: new state doesn't spend previous state commitment transaction`);
-        alert('❌ Validation failed: Unconsistent commitment transactions history.');
+//         alert('❌ Validation failed: Unconsistent commitment transactions history.');
-        return;
+//         return;
-      }
+//       }
 
-      // set found back to false for next check
+//       // set found back to false for next check
-      found = false;
+//       found = false;
 
-      // is the state_id commited in the transaction?
+//       // is the state_id commited in the transaction?
-      for (const vout of txInfo.vout) {
+//       for (const vout of txInfo.vout) {
-        console.log(vout);
+//         console.log(vout);
-        if (vout.scriptpubkey_type && vout.scriptpubkey_type === 'op_return') {
+//         if (vout.scriptpubkey_type && vout.scriptpubkey_type === 'op_return') {
-          found = true;
+//           found = true;
-        } else {
+//         } else {
-          continue;
+//           continue;
-        }
+//         }
         
-        if (vout.scriptpubkey_asm) {
+//         if (vout.scriptpubkey_asm) {
-          const hash = extractHexFromScriptAsm(vout.scriptpubkey_asm);
+//           const hash = extractHexFromScriptAsm(vout.scriptpubkey_asm);
-          if (hash) {
+//           if (hash) {
-            if (hash !== stateId) {
+//             if (hash !== stateId) {
-              console.error(`Validation error: expected stateId ${stateId}, got ${hash}`);
+//               console.error(`Validation error: expected stateId ${stateId}, got ${hash}`);
-              alert('❌ Validation failed: Transaction does not commit to that state.');
+//               alert('❌ Validation failed: Transaction does not commit to that state.');
-              return;
+//               return;
-            }
+//             }
-          }
+//           }
-        }
+//         }
-      }
+//       }
 
-      if (!found) {
+//       if (!found) {
-        alert('❌ Validation failed: Transaction does not contain data.');
+//         alert('❌ Validation failed: Transaction does not contain data.');
-        return;
+//         return;
-      }
+//       }
 
-      // set found back to false for next check
+//       // set found back to false for next check
-      found = false;
+//       found = false;
 
-      for (const label of Object.keys(state.certificate.pcd_commitment)) {
+//       for (const label of Object.keys(state.certificate.pcd_commitment)) {
-        // Compute the hash for this label 
+//         // Compute the hash for this label 
-        console.log(`Computing hash with label ${label}`)
+//         console.log(`Computing hash with label ${label}`)
-        const fileHex = service.getHashForFile(commitedIn, label, fileBlob);
+//         const fileHex = service.getHashForFile(commitedIn, label, fileBlob);
-        console.log(`Found hash ${fileHex}`);
+//         console.log(`Found hash ${fileHex}`);
-        found = state.commitmentHashes.includes(fileHex);
+//         found = state.commitmentHashes.includes(fileHex);
-        if (found) break;
+//         if (found) break;
-      }
+//       }
 
-      if (found) {
+//       if (found) {
-        alert('✅ Validation successful: file hash found in pcd_commitment.');
+//         alert('✅ Validation successful: file hash found in pcd_commitment.');
-      } else {
+//       } else {
-        alert('❌ Validation failed: file hash NOT found in pcd_commitment.');
+//         alert('❌ Validation failed: file hash NOT found in pcd_commitment.');
-      }
+//       }
-    }
+//     }
-  }
+//   }
 
-  async function fetchTransaction(txid: string): Promise<TransactionInfo> {
+//   async function fetchTransaction(txid: string): Promise<TransactionInfo> {
-    const url = `https://mempool.4nkweb.com/api/tx/${txid}`;
+//     const url = `https://mempool.4nkweb.com/api/tx/${txid}`;
 
-    const response = await fetch(url);
+//     const response = await fetch(url);
-    if (!response.ok) {
+//     if (!response.ok) {
-      throw new Error(`Failed to fetch outspend status: ${response.statusText}`);
+//       throw new Error(`Failed to fetch outspend status: ${response.statusText}`);
-    }
+//     }
 
-    const outspend: TransactionInfo = await response.json();
+//     const outspend: TransactionInfo = await response.json();
-    return outspend;
+//     return outspend;
-  }
+//   }
 
-  function extractHexFromScriptAsm(scriptAsm: string): string | null {
+//   function extractHexFromScriptAsm(scriptAsm: string): string | null {
-    const parts = scriptAsm.trim().split(/\s+/);
+//     const parts = scriptAsm.trim().split(/\s+/);
-    const last = parts[parts.length - 1];
+//     const last = parts[parts.length - 1];
 
-    // Basic validation: must be 64-char hex (32 bytes)
+//     // Basic validation: must be 64-char hex (32 bytes)
-    if (/^[0-9a-fA-F]{64}$/.test(last)) {
+//     if (/^[0-9a-fA-F]{64}$/.test(last)) {
-      return last.toLowerCase();
+//       return last.toLowerCase();
-    }
+//     }
 
-    return null;
+//     return null;
-  }
+//   }
-}
+// }

src/pages/account/key-value-section.ts

@@ -1,196 +1,196 @@
-import { ValidationRule, RoleDefinition } from '../../../pkg/sdk_client';
+// import { ValidationRule, RoleDefinition } from '../../../pkg/sdk_client';
-import { showValidationRuleModal } from '../../components/validation-rule-modal/validation-rule-modal';
+// import { showValidationRuleModal } from '../../components/validation-rule-modal/validation-rule-modal';
 
-export function createKeyValueSection(title: string, id: string, isRoleSection = false) {
+// export function createKeyValueSection(title: string, id: string, isRoleSection = false) {
-  const section = document.createElement('div');
+//   const section = document.createElement('div');
-  section.id = id;
+//   section.id = id;
-  section.style.cssText = 'margin-bottom: 2rem; background: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);';
+//   section.style.cssText = 'margin-bottom: 2rem; background: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);';
 
-  const titleEl = document.createElement('h2');
+//   const titleEl = document.createElement('h2');
-  titleEl.textContent = title;
+//   titleEl.textContent = title;
-  titleEl.style.cssText = 'font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem;';
+//   titleEl.style.cssText = 'font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem;';
-  section.appendChild(titleEl);
+//   section.appendChild(titleEl);
 
-  const rowContainer = document.createElement('div');
+//   const rowContainer = document.createElement('div');
-  section.appendChild(rowContainer);
+//   section.appendChild(rowContainer);
 
-  const addBtn = document.createElement('button');
+//   const addBtn = document.createElement('button');
-  addBtn.textContent = '+ Add Row';
+//   addBtn.textContent = '+ Add Row';
-  addBtn.style.cssText = `
+//   addBtn.style.cssText = `
-    margin-top: 1rem;
+//     margin-top: 1rem;
-    padding: 0.5rem 1rem;
+//     padding: 0.5rem 1rem;
-    border: 1px solid #888;
+//     border: 1px solid #888;
-    border-radius: 0.375rem;
+//     border-radius: 0.375rem;
-    background-color: #f9f9f9;
+//     background-color: #f9f9f9;
-    cursor: pointer;
+//     cursor: pointer;
-  `;
+//   `;
-  section.appendChild(addBtn);
+//   section.appendChild(addBtn);
 
-  const roleRowStates: {
+//   const roleRowStates: {
-    roleNameInput: HTMLInputElement;
+//     roleNameInput: HTMLInputElement;
-    membersInput: HTMLInputElement;
+//     membersInput: HTMLInputElement;
-    storagesInput: HTMLInputElement;
+//     storagesInput: HTMLInputElement;
-    validationRules: ValidationRule[];
+//     validationRules: ValidationRule[];
-  }[] = [];
+//   }[] = [];
-  type fileBlob = {
+//   type fileBlob = {
-    type: string,
+//     type: string,
-    data: Uint8Array
+//     data: Uint8Array
-  };
+//   };
-  const nonRoleRowStates: { 
+//   const nonRoleRowStates: { 
-    keyInput: HTMLInputElement, 
+//     keyInput: HTMLInputElement, 
-    valueInput: HTMLInputElement, 
+//     valueInput: HTMLInputElement, 
-    fileInput: HTMLInputElement, 
+//     fileInput: HTMLInputElement, 
-    fileBlob: fileBlob | null
+//     fileBlob: fileBlob | null
-  }[] = [];
+//   }[] = [];
 
-  const inputStyle = 'flex: 1; height: 2.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem;';
+//   const inputStyle = 'flex: 1; height: 2.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem;';
 
-  const createRow = () => {
+//   const createRow = () => {
-    const row = document.createElement('div');
+//     const row = document.createElement('div');
-    row.style.cssText = 'display: flex; gap: 1rem; margin-bottom: 0.5rem; align-items: center;';
+//     row.style.cssText = 'display: flex; gap: 1rem; margin-bottom: 0.5rem; align-items: center;';
 
-    const deleteBtn = document.createElement('button');
+//     const deleteBtn = document.createElement('button');
-    deleteBtn.textContent = '🗑️';
+//     deleteBtn.textContent = '🗑️';
-    deleteBtn.style.cssText = 'background: none; border: none; font-size: 1.2rem; cursor: pointer;';
+//     deleteBtn.style.cssText = 'background: none; border: none; font-size: 1.2rem; cursor: pointer;';
-    deleteBtn.onclick = () => {
+//     deleteBtn.onclick = () => {
-      row.remove();
+//       row.remove();
-      updateDeleteButtons();
+//       updateDeleteButtons();
-    };
+//     };
 
-    if (isRoleSection) {
+//     if (isRoleSection) {
-      const roleName = document.createElement('input');
+//       const roleName = document.createElement('input');
-      const members = document.createElement('input');
+//       const members = document.createElement('input');
-      const storages = document.createElement('input');
+//       const storages = document.createElement('input');
 
-      roleName.placeholder = 'Role name';
+//       roleName.placeholder = 'Role name';
-      members.placeholder = 'members';
+//       members.placeholder = 'members';
-      storages.placeholder = 'storages';
+//       storages.placeholder = 'storages';
-      [roleName, members, storages].forEach(input => {
+//       [roleName, members, storages].forEach(input => {
-        input.type = 'text';
+//         input.type = 'text';
-        input.style.cssText = inputStyle;
+//         input.style.cssText = inputStyle;
-      });
+//       });
 
-      const ruleButton = document.createElement('button');
+//       const ruleButton = document.createElement('button');
-      ruleButton.textContent = 'Add Validation Rule';
+//       ruleButton.textContent = 'Add Validation Rule';
-      ruleButton.style.cssText = 'padding: 0.3rem 0.75rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
+//       ruleButton.style.cssText = 'padding: 0.3rem 0.75rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
 
-      const rules: ValidationRule[] = [];
+//       const rules: ValidationRule[] = [];
-      ruleButton.onclick = () => {
+//       ruleButton.onclick = () => {
-        showValidationRuleModal(rule => {
+//         showValidationRuleModal(rule => {
-          rules.push(rule);
+//           rules.push(rule);
-          ruleButton.textContent = `Rules (${rules.length})`;
+//           ruleButton.textContent = `Rules (${rules.length})`;
-        });
+//         });
-      };
+//       };
 
-      row.appendChild(roleName);
+//       row.appendChild(roleName);
-      row.appendChild(members);
+//       row.appendChild(members);
-      row.appendChild(storages);
+//       row.appendChild(storages);
-      row.appendChild(ruleButton);
+//       row.appendChild(ruleButton);
-      row.appendChild(deleteBtn);
+//       row.appendChild(deleteBtn);
 
-      roleRowStates.push({ roleNameInput: roleName, membersInput: members, storagesInput: storages, validationRules: rules });
+//       roleRowStates.push({ roleNameInput: roleName, membersInput: members, storagesInput: storages, validationRules: rules });
-    } else {
+//     } else {
-      const fileInput = document.createElement('input');
+//       const fileInput = document.createElement('input');
-      fileInput.type = 'file';
+//       fileInput.type = 'file';
-      fileInput.style.display = 'none';
+//       fileInput.style.display = 'none';
-      fileInput.onchange = async () => {
+//       fileInput.onchange = async () => {
-        const file = fileInput.files?.[0];
+//         const file = fileInput.files?.[0];
-        if (!file) return;
+//         if (!file) return;
 
-        const buffer = await file.arrayBuffer();
+//         const buffer = await file.arrayBuffer();
-        const uint8 = new Uint8Array(buffer);
+//         const uint8 = new Uint8Array(buffer);
 
-        rowState.fileBlob = {
+//         rowState.fileBlob = {
-          type: file.type,
+//           type: file.type,
-          data: uint8, 
+//           data: uint8, 
-        };
+//         };
 
-        valueInput.value = `📄 ${file.name}`;
+//         valueInput.value = `📄 ${file.name}`;
-        valueInput.disabled = true;
+//         valueInput.disabled = true;
-        attachBtn.textContent = `📎 ${file.name}`;
+//         attachBtn.textContent = `📎 ${file.name}`;
-      };
+//       };
 
-      const attachBtn = document.createElement('button');
+//       const attachBtn = document.createElement('button');
-      attachBtn.textContent = '📎 Attach';
+//       attachBtn.textContent = '📎 Attach';
-      attachBtn.style.cssText = 'padding: 0.3rem 0.75rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
+//       attachBtn.style.cssText = 'padding: 0.3rem 0.75rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
-      attachBtn.onclick = () => fileInput.click();
+//       attachBtn.onclick = () => fileInput.click();
 
-      const keyInput = document.createElement('input');
+//       const keyInput = document.createElement('input');
-      const valueInput = document.createElement('input');
+//       const valueInput = document.createElement('input');
 
-      const rowState = {
+//       const rowState = {
-        keyInput,
+//         keyInput,
-        valueInput,
+//         valueInput,
-        fileInput,
+//         fileInput,
-        fileBlob: null as fileBlob | null
+//         fileBlob: null as fileBlob | null
-      };
+//       };
-      nonRoleRowStates.push(rowState);
+//       nonRoleRowStates.push(rowState);
 
-      keyInput.placeholder = 'Key';
+//       keyInput.placeholder = 'Key';
-      valueInput.placeholder = 'Value';
+//       valueInput.placeholder = 'Value';
-      [keyInput, valueInput].forEach(input => {
+//       [keyInput, valueInput].forEach(input => {
-        input.type = 'text';
+//         input.type = 'text';
-        input.style.cssText = inputStyle;
+//         input.style.cssText = inputStyle;
-      });
+//       });
 
-      row.appendChild(keyInput);
+//       row.appendChild(keyInput);
-      row.appendChild(valueInput);
+//       row.appendChild(valueInput);
 
-      row.appendChild(attachBtn);
+//       row.appendChild(attachBtn);
-      row.appendChild(fileInput);
+//       row.appendChild(fileInput);
 
-      row.appendChild(deleteBtn);
+//       row.appendChild(deleteBtn);
-    }
+//     }
 
-    rowContainer.appendChild(row);
+//     rowContainer.appendChild(row);
-    updateDeleteButtons();
+//     updateDeleteButtons();
-  };
+//   };
 
-  const updateDeleteButtons = () => {
+//   const updateDeleteButtons = () => {
-    const rows = Array.from(rowContainer.children);
+//     const rows = Array.from(rowContainer.children);
-    rows.forEach(row => {
+//     rows.forEach(row => {
-      const btn = row.querySelector('button:last-child') as HTMLButtonElement;
+//       const btn = row.querySelector('button:last-child') as HTMLButtonElement;
-      if (rows.length === 1) {
+//       if (rows.length === 1) {
-        btn.disabled = true;
+//         btn.disabled = true;
-        btn.style.visibility = 'hidden';
+//         btn.style.visibility = 'hidden';
-      } else {
+//       } else {
-        btn.disabled = false;
+//         btn.disabled = false;
-        btn.style.visibility = 'visible';
+//         btn.style.visibility = 'visible';
-      }
+//       }
-    });
+//     });
-  };
+//   };
 
-  createRow();
+//   createRow();
-  addBtn.addEventListener('click', createRow);
+//   addBtn.addEventListener('click', createRow);
 
-  return {
+//   return {
-    element: section,
+//     element: section,
-    getData: () => {
+//     getData: () => {
-      if (isRoleSection) {
+//       if (isRoleSection) {
-        const data: Record<string, RoleDefinition> = {};
+//         const data: Record<string, RoleDefinition> = {};
-        for (const row of roleRowStates) {
+//         for (const row of roleRowStates) {
-          const key = row.roleNameInput.value.trim();
+//           const key = row.roleNameInput.value.trim();
-          if (!key) continue;
+//           if (!key) continue;
-          data[key] = {
+//           data[key] = {
-            members: row.membersInput.value.split(',').map(x => x.trim()).filter(Boolean),
+//             members: row.membersInput.value.split(',').map(x => x.trim()).filter(Boolean),
-            storages: row.storagesInput.value.split(',').map(x => x.trim()).filter(Boolean),
+//             storages: row.storagesInput.value.split(',').map(x => x.trim()).filter(Boolean),
-            validation_rules: row.validationRules
+//             validation_rules: row.validationRules
-          };
+//           };
-        }
+//         }
-        return data;
+//         return data;
-      } else {
+//       } else {
-        const data: Record<string, string | fileBlob> = {};
+//         const data: Record<string, string | fileBlob> = {};
-        for (const row of nonRoleRowStates) {
+//         for (const row of nonRoleRowStates) {
-          const key = row.keyInput.value.trim();
+//           const key = row.keyInput.value.trim();
-          if (!key) continue;
+//           if (!key) continue;
-          if (row.fileBlob) {
+//           if (row.fileBlob) {
-            data[key] = row.fileBlob; 
+//             data[key] = row.fileBlob; 
-          } else {
+//           } else {
-            data[key] = row.valueInput.value.trim();
+//             data[key] = row.valueInput.value.trim();
-          }
+//           }
-        }
+//         }
-        return data;
+//         return data;
-      }
+//       }
-    }
+//     }
-  };
+//   };
-}
+// }

src/pages/account/process-creation.ts

@@ -1,91 +1,91 @@
-import { createKeyValueSection } from './key-value-section';
+// import { createKeyValueSection } from './key-value-section';
-import { loadValidationRuleModal } from '../../components/validation-rule-modal/validation-rule-modal';
+// import { loadValidationRuleModal } from '../../components/validation-rule-modal/validation-rule-modal';
-import Services from '../../services/service';
+// import Services from '../../services/service';
-import { RoleDefinition } from '../../../pkg/sdk_client';
+// import { RoleDefinition } from '../../../pkg/sdk_client';
 
-export async function getProcessCreation(container: HTMLElement) {
+// export async function getProcessCreation(container: HTMLElement) {
-  await loadValidationRuleModal();
+//   await loadValidationRuleModal();
 
-  container.style.display = 'block';
+//   container.style.display = 'block';
-  container.innerHTML = `<div class="parameter-header">Process Creation</div>`;
+//   container.innerHTML = `<div class="parameter-header">Process Creation</div>`;
-  const privateSec = createKeyValueSection('Private Data', 'private-section');
+//   const privateSec = createKeyValueSection('Private Data', 'private-section');
-  const publicSec = createKeyValueSection('Public Data', 'public-section');
+//   const publicSec = createKeyValueSection('Public Data', 'public-section');
-  const rolesSec = createKeyValueSection('Roles', 'roles-section', true);
+//   const rolesSec = createKeyValueSection('Roles', 'roles-section', true);
 
-  container.appendChild(privateSec.element);
+//   container.appendChild(privateSec.element);
-  container.appendChild(publicSec.element);
+//   container.appendChild(publicSec.element);
-  container.appendChild(rolesSec.element);
+//   container.appendChild(rolesSec.element);
 
-  const btn = document.createElement('button');
+//   const btn = document.createElement('button');
-  btn.textContent = 'Create Process';
+//   btn.textContent = 'Create Process';
-  btn.style.cssText = `
+//   btn.style.cssText = `
-    display: block;
+//     display: block;
-    margin: 2rem auto 0;
+//     margin: 2rem auto 0;
-    padding: 0.75rem 2rem;
+//     padding: 0.75rem 2rem;
-    font-size: 1rem;
+//     font-size: 1rem;
-    font-weight: bold;
+//     font-weight: bold;
-    background-color: #4f46e5;
+//     background-color: #4f46e5;
-    color: white;
+//     color: white;
-    border: none;
+//     border: none;
-    border-radius: 0.5rem;
+//     border-radius: 0.5rem;
-    cursor: pointer;
+//     cursor: pointer;
-  `;
+//   `;
 
-  btn.onclick = async () => {
+//   btn.onclick = async () => {
-    const privateData = privateSec.getData();
+//     const privateData = privateSec.getData();
-    const publicData = publicSec.getData();
+//     const publicData = publicSec.getData();
-    const roles = rolesSec.getData() as Record<string, RoleDefinition>;
+//     const roles = rolesSec.getData() as Record<string, RoleDefinition>;
 
-    console.log('Private:', privateData);
+//     console.log('Private:', privateData);
-    console.log('Public:', publicData);
+//     console.log('Public:', publicData);
-    console.log('Roles:', roles);
+//     console.log('Roles:', roles);
 
-    const service = await Services.getInstance();
+//     const service = await Services.getInstance();
 
-    const createProcessResult = await service.createProcess(privateData, publicData, roles);
+//     const createProcessResult = await service.createProcess(privateData, publicData, roles);
-    const processId = createProcessResult.updated_process!.process_id;
+//     const processId = createProcessResult.updated_process!.process_id;
-    const stateId = createProcessResult.updated_process!.current_process.states[0].state_id;
+//     const stateId = createProcessResult.updated_process!.current_process.states[0].state_id;
-    await service.handleApiReturn(createProcessResult);
+//     await service.handleApiReturn(createProcessResult);
 
-    // Now we want to validate the update and register the first state of our new process
+//     // Now we want to validate the update and register the first state of our new process
-    const updateProcessResult = await service.createPrdUpdate(processId, stateId);
+//     const updateProcessResult = await service.createPrdUpdate(processId, stateId);
-    await service.handleApiReturn(createProcessResult);
+//     await service.handleApiReturn(createProcessResult);
 
-    const approveChangeResult = await service.approveChange(processId, stateId);
+//     const approveChangeResult = await service.approveChange(processId, stateId);
-    await service.handleApiReturn(approveChangeResult);
+//     await service.handleApiReturn(approveChangeResult);
-    if (approveChangeResult) {
+//     if (approveChangeResult) {
-      const process = await service.getProcess(processId);
+//       const process = await service.getProcess(processId);
-      let newState = service.getStateFromId(process, stateId);
+//       let newState = service.getStateFromId(process, stateId);
-      if (!newState) return;
+//       if (!newState) return;
-      for (const label of Object.keys(newState.keys)) {
+//       for (const label of Object.keys(newState.keys)) {
-        const hash = newState.pcd_commitment[label];
+//         const hash = newState.pcd_commitment[label];
-        const encryptedData = await service.getBlobFromDb(hash);
+//         const encryptedData = await service.getBlobFromDb(hash);
-        const filename = `${label}-${hash.slice(0,8)}.bin`;
+//         const filename = `${label}-${hash.slice(0,8)}.bin`;
 
-        const blob = new Blob([encryptedData], { type: "application/octet-stream" });
+//         const blob = new Blob([encryptedData], { type: "application/octet-stream" });
-        const link = document.createElement("a");
+//         const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
+//         link.href = URL.createObjectURL(blob);
-        link.download = filename;
+//         link.download = filename;
-        link.click();
+//         link.click();
 
-        setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+//         setTimeout(() => URL.revokeObjectURL(link.href), 1000);
-      }
+//       }
 
-      await service.generateProcessPdf(processId, newState);
+//       await service.generateProcessPdf(processId, newState);
 
-      // Add processId to the state we export
+//       // Add processId to the state we export
-      newState['process_id'] = processId;
+//       newState['process_id'] = processId;
-      const blob = new Blob([JSON.stringify(newState, null, 2)], { type: 'application/json' });
+//       const blob = new Blob([JSON.stringify(newState, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
+//       const url = URL.createObjectURL(blob);
 
-      const a = document.createElement('a');
+//       const a = document.createElement('a');
-      a.href = url;
+//       a.href = url;
-      a.download = `process_${processId}_${stateId}.json`;
+//       a.download = `process_${processId}_${stateId}.json`;
-      a.click();
+//       a.click();
 
-      URL.revokeObjectURL(url); // Clean up
+//       URL.revokeObjectURL(url); // Clean up
-    }
+//     }
-  };
+//   };
 
-  container.appendChild(btn);
+//   container.appendChild(btn);
-}
+// }

src/pages/account/process.ts

@@ -1,66 +1,66 @@
-export function createProcessTab(container: HTMLElement, processes: { name: string, publicData: Record<string, any> }[]): HTMLElement {
+// export function createProcessTab(container: HTMLElement, processes: { name: string, publicData: Record<string, any> }[]): HTMLElement {
-  container.id = 'process-tab';
+//   container.id = 'process-tab';
-  container.style.display = 'block';
+//   container.style.display = 'block';
-  container.style.cssText = 'padding: 1.5rem;';
+//   container.style.cssText = 'padding: 1.5rem;';
 
-  const title = document.createElement('h2');
+//   const title = document.createElement('h2');
-  title.textContent = 'Processes';
+//   title.textContent = 'Processes';
-  title.style.cssText = 'font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;';
+//   title.style.cssText = 'font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;';
-  container.appendChild(title);
+//   container.appendChild(title);
 
-  processes.forEach(proc => {
+//   processes.forEach(proc => {
-    const card = document.createElement('div');
+//     const card = document.createElement('div');
-    card.style.cssText = 'margin-bottom: 1rem; padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff;';
+//     card.style.cssText = 'margin-bottom: 1rem; padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff;';
 
-    const nameEl = document.createElement('h3');
+//     const nameEl = document.createElement('h3');
-    nameEl.textContent = proc.name;
+//     nameEl.textContent = proc.name;
-    nameEl.style.cssText = 'font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem;';
+//     nameEl.style.cssText = 'font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem;';
-    card.appendChild(nameEl);
+//     card.appendChild(nameEl);
 
-    const dataList = document.createElement('div');
+//     const dataList = document.createElement('div');
-    for (const [key, value] of Object.entries(proc.publicData)) {
+//     for (const [key, value] of Object.entries(proc.publicData)) {
-      const item = document.createElement('div');
+//       const item = document.createElement('div');
-      item.style.cssText = 'margin-bottom: 0.5rem;';
+//       item.style.cssText = 'margin-bottom: 0.5rem;';
 
-      const label = document.createElement('strong');
+//       const label = document.createElement('strong');
-      label.textContent = key + ': ';
+//       label.textContent = key + ': ';
-      item.appendChild(label);
+//       item.appendChild(label);
 
-      // Let's trim the quotes
+//       // Let's trim the quotes
-      const trimmed = value.replace(/^'|'$/g, '');
+//       const trimmed = value.replace(/^'|'$/g, '');
-      let parsed;
+//       let parsed;
-      try {
+//       try {
-        parsed = JSON.parse(trimmed);
+//         parsed = JSON.parse(trimmed);
-      } catch (_) {
+//       } catch (_) {
-        parsed = trimmed;
+//         parsed = trimmed;
-      }
+//       }
 
-      if (parsed && typeof parsed === 'object') {
+//       if (parsed && typeof parsed === 'object') {
-        const saveBtn = document.createElement('button');
+//         const saveBtn = document.createElement('button');
-        saveBtn.textContent = '💾 Save as JSON';
+//         saveBtn.textContent = '💾 Save as JSON';
-        saveBtn.style.cssText = 'margin-left: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
+//         saveBtn.style.cssText = 'margin-left: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
-        saveBtn.onclick = () => {
+//         saveBtn.onclick = () => {
-          const blob = new Blob([JSON.stringify(parsed, null, 2)], { type: 'application/json' });
+//           const blob = new Blob([JSON.stringify(parsed, null, 2)], { type: 'application/json' });
-          const url = URL.createObjectURL(blob);
+//           const url = URL.createObjectURL(blob);
-          const a = document.createElement('a');
+//           const a = document.createElement('a');
-          a.href = url;
+//           a.href = url;
-          a.download = `${proc.name}_${key}.json`;
+//           a.download = `${proc.name}_${key}.json`;
-          a.click();
+//           a.click();
-          URL.revokeObjectURL(url);
+//           URL.revokeObjectURL(url);
-        };
+//         };
-        item.appendChild(saveBtn);
+//         item.appendChild(saveBtn);
-      } else {
+//       } else {
-        const span = document.createElement('span');
+//         const span = document.createElement('span');
-        span.textContent = String(parsed);
+//         span.textContent = String(parsed);
-        item.appendChild(span);
+//         item.appendChild(span);
-      }
+//       }
 
-      dataList.appendChild(item);
+//       dataList.appendChild(item);
-    }
+//     }
 
-    card.appendChild(dataList);
+//     card.appendChild(dataList);
-    container.appendChild(card);
+//     container.appendChild(card);
-  });
+//   });
 
-  return container;
+//   return container;
-}
+// }

src/pages/home/home-component.ts

@@ -1,5 +1,6 @@
+// src/pages/home/home-component.ts
+
 import loginHtml from './home.html?raw';
-import loginScript from './home.ts?raw';
 import loginCss from '../../4nk.css?raw';
 import { initHomePage } from './home';
 
@@ -11,11 +12,26 @@ export class LoginComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    console.log('CALLBACK LOGIN PAGE');
     this.render();
-    setTimeout(() => {
+
-      initHomePage();
+    try {
-    }, 500);
+      if (this.shadowRoot) {
+        initHomePage(this.shadowRoot);
+      } else {
+        console.error("[LoginComponent] 💥 ShadowRoot est nul. Impossible d'initialiser.");
+      }
+    } catch (e) {
+      console.error("[LoginComponent] 💥 Échec de l'initHomePage:", e);
+    }
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = `
+        <style>${loginCss}</style>
+        ${loginHtml} 
+      `;
+    }
   }
 
   set callback(fn) {
@@ -25,23 +41,9 @@ export class LoginComponent extends HTMLElement {
       console.error('Callback is not a function');
     }
   }
-
   get callback() {
     return this._callback;
   }
-
-  render() {
-    if (this.shadowRoot)
-      this.shadowRoot.innerHTML = `
-            <style>
-            ${loginCss}
-            </style>${loginHtml}
-            <script type="module">
-            ${loginScript}
-            </scipt>
-            
-        `;
-  }
 }
 
 if (!customElements.get('login-4nk-component')) {

src/pages/home/home.html

@@ -13,9 +13,6 @@
   <div id="tab1" class="card tab-content active">
     <div class="card-description">Create an account :</div>
     <div class="pairing-request"></div>
-    <!-- <div class="card-image qr-code">
-      <img src="assets/qr_code.png" alt="QR Code" width="150" height="150" />
-    </div> -->
     <button id="createButton" class="create-btn"></button>
   </div>
   <div class="separator"></div>
@@ -23,19 +20,15 @@
     <div class="card-description">Add a device for an existing member :</div>
     <div class="card-image camera-card">
       <img id="scanner" src="assets/camera.jpg" alt="QR Code" width="150" height="150" />
-      <button id="scan-btn" onclick="scanDevice()">Scan</button>
+      <button id="scan-btn" onclick="scanDevice()">Scan</button> <div class="qr-code-scanner">
-      <div class="qr-code-scanner">
         <div id="qr-reader" style="width: 200px; display: contents"></div>
         <div id="qr-reader-results"></div>
       </div>
     </div>
     <p>Or</p>
-    <!-- <input type="text" id="addressInput" placeholder="Paste address" />
-    <div id="emoji-display-2"></div> -->
     <div class="card-description">Chose a member :</div>
     <select name="memberSelect" id="memberSelect" size="5" class="custom-select">
-      <!-- Options -->
+      </select>
-    </select>
     
     <button id="okButton" style="display: none">OK</button>
   </div>

src/pages/home/home.ts

@@ -1,20 +1,30 @@
+// src/pages/home/home.ts
+
 import Routing from '../../services/modal.service';
 import Services from '../../services/service';
 import { addSubscription } from '../../utils/subscription.utils';
-import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji} from '../../utils/sp-address.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, registerAllListeners } from '../../router';
 
 export { QrScannerComponent };
-export async function initHomePage(): Promise<void> {
+
-  console.log('INIT-HOME');
+/**
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+ * Fonction d'initialisation principale.
-  container.querySelectorAll('.tab').forEach((tab) => {
+ * Elle est appelée par home-component.ts et reçoit le ShadowRoot.
+ */
+export async function initHomePage(container: ShadowRoot): Promise<void> {
+
+  if (!container) {
+    console.error('[home.ts] 💥 ERREUR: Le shadowRoot est nul !');
+    return;
+  }
+
+  const tabs = container.querySelectorAll('.tab');
+
+  tabs.forEach((tab) => {
     addSubscription(tab, 'click', () => {
       container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
       tab.classList.add('active');
-
       container.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
       container.querySelector(`#${tab.getAttribute('data-tab') as string}`)?.classList.add('active');
     });
@@ -22,41 +32,21 @@ export async function initHomePage(): Promise<void> {
 
   const service = await Services.getInstance();
   const spAddress = await service.getDeviceAddress();
-  // generateQRCode(spAddress);
   generateCreateBtn();
   displayEmojis(spAddress);
 
-  // Add this line to populate the select when the page loads
+  await populateMemberSelect(container);
-  await populateMemberSelect();
 }
 
-//// Modal
+/**
-export async function openModal(myAddress: string, receiverAddress: string) {
+ * Remplit le <select> des membres.
-  const router = await Routing.getInstance();
+ * Doit utiliser le 'container' (ShadowRoot) pour trouver l'élément.
-  router.openLoginModal(myAddress, receiverAddress);
+ */
-}
+async function populateMemberSelect(container: ShadowRoot) {
-
-// const service =  await Services.getInstance()
-// service.setNotification()
-
-function scanDevice() {
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
-  const scannerImg = container.querySelector('#scanner') as HTMLElement;
-  if (scannerImg) scannerImg.style.display = 'none';
-  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
-  if (scannerQrCode) scannerQrCode.style.display = 'block';
-  const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
-  if (scanButton) scanButton.style.display = 'none';
-  const reader = container?.querySelector('#qr-reader');
-  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
-}
-
-async function populateMemberSelect() {
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
   const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement;
 
   if (!memberSelect) {
-    console.error('Could not find memberSelect element');
+    console.error('[home.ts] Impossible de trouver #memberSelect dans le shadowRoot.');
     return;
   }
 
@@ -65,8 +55,7 @@ async function populateMemberSelect() {
 
   for (const [processId, member] of Object.entries(members)) {
     const process = await service.getProcess(processId);
-    let memberPublicName;
+    let memberPublicName = 'Unnamed Member';
-    
     if (process) {
       const publicMemberData = service.getPublicData(process);
       if (publicMemberData) {
@@ -77,11 +66,6 @@ async function populateMemberSelect() {
       }
     }
 
-    if (!memberPublicName) {
-      memberPublicName = 'Unnamed Member';
-    }
-
-    // Récupérer les emojis pour ce processId
     const emojis = await addressToEmoji(processId);
 
     const option = document.createElement('option');
@@ -91,6 +75,32 @@ async function populateMemberSelect() {
   }
 }
 
-(window as any).populateMemberSelect = populateMemberSelect;
+/**
+ * Fonction appelée par le 'onclick="scanDevice()"' dans le HTML.
+ * Doit être attachée à 'window' pour être globale.
+ */
+function scanDevice() {
+  const hostElement = document.querySelector('login-4nk-component');
+  const container = hostElement?.shadowRoot;
+
+  if (!container) {
+    console.error('[home.ts] scanDevice: Impossible de trouver le shadowRoot !');
+    return;
+  }
+
+  const scannerImg = container.querySelector('#scanner') as HTMLElement;
+  if (scannerImg) scannerImg.style.display = 'none';
+  const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
+  if (scannerQrCode) scannerQrCode.style.display = 'block';
+  const scanButton = container.querySelector('#scan-btn') as HTMLElement;
+  if (scanButton) scanButton.style.display = 'none';
+  const reader = container.querySelector('#qr-reader');
+  if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
+}
 
 (window as any).scanDevice = scanDevice;
+
+export async function openModal(myAddress: string, receiverAddress: string) {
+  const router = await Routing.getInstance();
+  router.openLoginModal(myAddress, receiverAddress);
+}

src/pages/process-element/process-component.ts

@@ -1,12 +1,12 @@
-import processHtml from './process-element.html?raw';
+// src/pages/process-element/process-component.ts
-import processScript from './process-element.ts?raw';
-import processCss from '../../4nk.css?raw';
-import { initProcessElement } from './process-element';
 
-export class ProcessListComponent extends HTMLElement {
+import processHtml from './process-element.html?raw';
+import processCss from '../../4nk.css?raw';
+import { initProcessElement } from './process-element'; // On importe la vraie fonction
+
+// 1. Nom de classe corrigé (plus logique)
+export class ProcessElementComponent extends HTMLElement {
   _callback: any;
-  id: string = '';
-  zone: string = '';
 
   constructor() {
     super();
@@ -14,38 +14,61 @@ export class ProcessListComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    console.log('CALLBACK PROCESS LIST PAGE');
+    console.log('[ProcessElementComponent] 1. Composant connecté.');
-    this.render();
-    setTimeout(() => {
-      initProcessElement(this.id, this.zone);
-    }, 500);
-  }
     
-  set callback(fn) {
+    // 2. Lire les attributs passés par le routeur (router.ts)
-    if (typeof fn === 'function') {
+    const processId = this.getAttribute('process-id');
-      this._callback = fn;
+    const stateId = this.getAttribute('state-id');
-    } else {
+
-      console.error('Callback is not a function');
+    if (!processId || !stateId) {
+        console.error("💥 ProcessElementComponent a été créé sans 'process-id' ou 'state-id'.");
+        this.renderError("Erreur: ID de processus ou d'état manquant.");
+        return;
+    }
+
+    // 3. Afficher le HTML/CSS du squelette
+    this.render(); 
+    
+    // 4. Appeler la logique (init) en lui passant le shadowRoot et les IDs
+    try {
+      if (this.shadowRoot) { 
+        console.log(`[ProcessElementComponent] 2. Appel de initProcessElement pour ${processId}_${stateId}`);
+        initProcessElement(this.shadowRoot, processId, stateId); 
+      } else {
+        console.error("[ProcessElementComponent] 💥 ShadowRoot est nul.");
+      }
+    } catch (e) {
+      console.error("[ProcessElementComponent] 💥 Échec de l'initProcessElement():", e);
     }
   }
 
-  get callback() {
-    return this._callback;
-  }
-
   render() {
-    if (this.shadowRoot)
+    if (this.shadowRoot) {
       this.shadowRoot.innerHTML = `
-            <style>
+        <style>${processCss}</style>
-            ${processCss}
+        ${processHtml} 
-            </style>${processHtml}
-            <script type="module">
-            ${processScript}
-            </scipt>
         `;
+    }
   }
+
+  renderError(message: string) {
+    if (this.shadowRoot) {
+        this.shadowRoot.innerHTML = `<style>${processCss}</style>
+        <div class="title-container"><h1>Erreur</h1></div>
+        <div class="process-container"><p>${message}</p></div>`;
+    }
+  }
+  
+  // ... (Tes callbacks) ...
+  set callback(fn) {
+    if (typeof fn === 'function') { this._callback = fn; } 
+    else { console.error('Callback is not a function'); }
+  }
+  get callback() { return this._callback; }
 }
 
+// 6. Utilisation du bon nom de classe
 if (!customElements.get('process-4nk-component')) {
-  customElements.define('process-4nk-component', ProcessListComponent);
+  console.log('[ProcessElementComponent] Définition de <process-4nk-component>.');
+  customElements.define('process-4nk-component', ProcessElementComponent);
 }

src/pages/process-element/process-element.ts

@@ -1,50 +1,111 @@
+// src/pages/process-element/process-element.ts
+
 import { interpolate } from '../../utils/html.utils';
 import Services from '../../services/service';
-import { Process } from 'pkg/sdk_client';
+import { Process, ProcessState } from 'pkg/sdk_client';
-import { getCorrectDOM } from '~/utils/document.utils';
+// 1. Plus besoin de 'getCorrectDOM'
 
-let currentPageStyle: HTMLStyleElement | null = null;
+/**
+ * Fonction d'initialisation, appelée par process-component.ts
+ * Reçoit le shadowRoot et les IDs.
+ */
+export async function initProcessElement(container: ShadowRoot, processId: string, stateId: string) {
+  console.log(`[process-element.ts] 3. init() appelé pour ${processId}_${stateId}`);
   
-export async function initProcessElement(id: string, zone: string) {
+  const services = await Services.getInstance();
-  const processes = await getProcesses();
+
-  const container = getCorrectDOM('process-4nk-component');
+  // 2. Récupérer les éléments du DOM *dans* le shadowRoot (container)
-  // const currentProcess = processes.find((process) => process[0] === id)[1];
+  const titleH1 = container.querySelector('h1');
-  // const currentProcess = {title: 'Hello', html: '', css: ''};
+  const processContainer = container.querySelector('.process-container');
-  // await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
+
-  // const wrapper = document.querySelector('.process-container');
+  if (!titleH1 || !processContainer) {
-  // if (wrapper) {
+      console.error("[process-element.ts] 💥 Le HTML de base (h1 ou .process-container) est introuvable !");
-  //   wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
+      return;
-  //   injectCss(currentProcess.css);
+  }
-  // }
+
+  // 3. Récupérer les données
+  const process = await services.getProcess(processId);
+  if (!process) {
+      console.error(`[process-element.ts] 💥 Processus ${processId} non trouvé !`);
+      titleH1.innerText = "Erreur";
+      processContainer.innerHTML = `<p>Le processus ${processId} n'a pas pu être chargé.</p>`;
+      return;
+  }
+  
+  const state = services.getStateFromId(process, stateId);
+  if (!state) {
+      console.error(`[process-element.ts] 💥 État ${stateId} non trouvé dans le processus ${processId} !`);
+      titleH1.innerText = "Erreur";
+      processContainer.innerHTML = `<p>L'état ${stateId} n'a pas pu être chargé.</p>`;
+      return;
+  }
+
+  console.log("[process-element.ts] ✅ Processus et État chargés.");
+
+  // 4. Mettre à jour le titre
+  const processName = services.getProcessName(process) || "Processus";
+  titleH1.innerHTML = interpolate(titleH1.innerHTML, { processTitle: processName });
+
+  // 5. Logique de rendu de l'élément (À COMPLÉTER PAR TES SOINS)
+  // C'est là que tu dois construire le HTML pour cet état spécifique
+  // Par exemple, déchiffrer les attributs et les afficher.
+  processContainer.innerHTML = `
+      <div class="card" style="margin: 1rem; padding: 1rem;">
+          <h3>État: ${stateId.substring(0, 10)}...</h3>
+          <p>Commit: ${state.commited_in}</p>
+          <div id="attributes-list">
+            <p><em>Chargement des attributs...</em></p>
+          </div>
+      </div>
+  `;
+
+  // 6. Tenter de déchiffrer les données de cet état
+  await decryptAndDisplayAttributes(services, container, processId, state);
 }
 
-async function loadPage(data?: any) {
+/**
-  const content = document.getElementById('containerId');
+ * Helper (exemple) pour déchiffrer et afficher les données dans le conteneur
-  if (content && data) {
+ */
-    if (data) {
+async function decryptAndDisplayAttributes(services: Services, container: ShadowRoot, processId: string, state: ProcessState) {
-      content.innerHTML = interpolate(content.innerHTML, data);
+    const attributesList = container.querySelector('#attributes-list');
+    if (!attributesList) return;
+
+    console.log(`[process-element.ts] 🔐 Déchiffrement des attributs pour l'état ${state.state_id}...`);
+    attributesList.innerHTML = ''; // Vide le message "Chargement..."
+    let hasPrivateData = false;
+    
+    // Affiche les données publiques
+    if (state.public_data) {
+        for (const [key, value] of Object.entries(state.public_data)) {
+            const el = document.createElement('div');
+            el.className = 'attribute-pair public';
+            el.innerHTML = `<strong>${key} (public):</strong> ${JSON.stringify(services.decodeValue(value))}`;
+            attributesList.appendChild(el);
+        }
     }
-  }
-}
 
-function injectCss(cssContent: string) {
+    // Affiche les données privées
-  removeCss(); // Ensure that the previous CSS is removed
+    for (const attribute of Object.keys(state.pcd_commitment)) {
+        if (attribute === 'roles' || (state.public_data && state.public_data[attribute])) {
+            continue; // Skip les données publiques (déjà fait) et les rôles
+        }
         
-  currentPageStyle = document.createElement('style');
+        const decryptedValue = await services.decryptAttribute(processId, state, attribute);
-  currentPageStyle.type = 'text/css';
-  currentPageStyle.appendChild(document.createTextNode(cssContent));
-  document.head.appendChild(currentPageStyle);
-}
         
-function removeCss() {
+        const el = document.createElement('div');
-  if (currentPageStyle) {
+        el.className = 'attribute-pair private';
-    document.head.removeChild(currentPageStyle);
-    currentPageStyle = null;
-  }
-}
         
-async function getProcesses(): Promise<Record<string, Process>> {
+        if (decryptedValue) {
-  const service = await Services.getInstance();
+            hasPrivateData = true;
-  const processes = await service.getProcesses();
+            el.innerHTML = `<strong>${attribute} (privé):</strong> ${JSON.stringify(decryptedValue)}`;
-  return processes;
+        } else {
+            el.innerHTML = `<strong>${attribute} (privé):</strong> <span style="color: red;">[Déchiffrement impossible / Clé manquante]</span>`;
+        }
+        attributesList.appendChild(el);
+    }
+    
+    if (!hasPrivateData && !(state.public_data && Object.keys(state.public_data).length > 0)) {
+        console.log("[process-element.ts] ℹ️ Aucun attribut (public ou privé) trouvé pour cet état.");
+        attributesList.innerHTML = '<p>Cet état ne contient aucun attribut visible.</p>';
+    }
 }

src/pages/process/process-list-component.ts

@@ -1,49 +1,40 @@
-// import processHtml from './process.html?raw';
+// src/pages/process/process-list-component.ts
-// import processScript from './process.ts?raw';
-// import processCss from '../../4nk.css?raw';
-// import { init } from './process';
 
-// export class ProcessListComponent extends HTMLElement {
+import processHtml from './process.html?raw';
-//   _callback: any;
+import processCss from '../../4nk.css?raw';
-//   constructor() {
+import { init } from './process';
-//     super();
-//     this.attachShadow({ mode: 'open' });
-//   }
 
-//   connectedCallback() {
+export class ProcessListComponent extends HTMLElement {
-//     console.log('CALLBACK PROCESS LIST PAGE');
+  constructor() {
-//     this.render();
+    super();
-//     setTimeout(() => {
+    this.attachShadow({ mode: 'open' });
-//       init();
+  }
-//     }, 500);
-//   }
 
-//   set callback(fn) {
+  connectedCallback() {
-//     if (typeof fn === 'function') {
+    this.render();
-//       this._callback = fn;
-//     } else {
-//       console.error('Callback is not a function');
-//     }
-//   }
 
-//   get callback() {
+    try {
-//     return this._callback;
+      if (this.shadowRoot) {
-//   }
+        init(this.shadowRoot);
+      } else {
+        console.error('[ProcessListComponent] 💥 ShadowRoot est nul.');
+      }
+    } catch (e) {
+      console.error("[ProcessListComponent] 💥 Échec de l'init():", e);
+    }
+  }
 
-//   render() {
+  render() {
-//     if (this.shadowRoot)
+    if (this.shadowRoot) {
-//       this.shadowRoot.innerHTML = `
+      this.shadowRoot.innerHTML = `
-//             <style>
+        <style>${processCss}</style>
-//             ${processCss}
+        ${processHtml} 
-//             </style>${processHtml}
+      `;
-//             <script type="module">
+    }
-//             ${processScript}
+  }
-//             </scipt>
 
-//         `;
+}
-//   }
-// }
 
-// if (!customElements.get('process-list-4nk-component')) {
+if (!customElements.get('process-list-4nk-component')) {
-//   customElements.define('process-list-4nk-component', ProcessListComponent);
+  customElements.define('process-list-4nk-component', ProcessListComponent);
-// }
+}

src/pages/process/process.html

@@ -1,4 +1,4 @@
-<!-- <div class="title-container">
+<div class="title-container">
   <h1>Process Selection</h1>
 </div>
 
@@ -7,13 +7,17 @@
     <div class="process-card-description">
       <div class="input-container">
         <select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
+        
         <label for="autocomplete" class="input-label">Filter processes :</label>
+
         <div class="selected-processes"></div>
       </div>
+      
       <div class="process-card-content"></div>
     </div>
+    
     <div class="process-card-action">
-      <a class="btn" onclick="goToProcessPage()">OK</a>
+      <a class="btn" id="go-to-process-btn">OK</a>
     </div>
   </div>
-</div> -->
+</div>

src/pages/signature/signature-component.ts

@@ -1,5 +1,5 @@
 import { SignatureElement } from './signature';
-import signatureCss from '../../../public/style/signature.css?raw'
+import signatureCss from '../../../style/signature.css?raw'
 import Services from '../../services/service.js'
 
 class SignatureComponent extends HTMLElement {

src/pages/signature/signature.ts

@@ -1,4 +1,4 @@
-import signatureStyle from '../../../public/style/signature.css?inline';
+import signatureStyle from '../../../style/signature.css?inline';
 
 declare global {
     interface Window {

src/services/storage.service.ts

@@ -3,16 +3,31 @@ import axios, { AxiosResponse } from 'axios';
 export async function storeData(servers: string[], key: string, value: Blob, ttl: number | null): Promise<AxiosResponse | null> {
   for (const server of servers) {
     try {
-      // Handle relative paths (for development proxy) vs absolute URLs (for production)
+      // --- DÉBUT DE LA CORRECTION ---
+      // 1. On vérifie d'abord si la donnée existe en appelant le bon service
+      // On passe 'server' au lieu de 'url' pour que testData construise la bonne URL
+      const dataExists = await testData(server, key);
+      
+      if (dataExists) {
+        console.log('Data already stored:', key);
+        continue;
+      } else {
+        console.log('Data not stored for server, proceeding to POST:', key, server);
+      }
+      // --- FIN DE LA CORRECTION ---
+
+
+      // Construction de l'URL pour le POST (stockage)
+      // Cette partie était correcte
       let url: string;
       if (server.startsWith('/')) {
-        // Relative path - construct manually for proxy
+        // Relative path
         url = `${server}/store/${encodeURIComponent(key)}`;
         if (ttl !== null) {
           url += `?ttl=${ttl}`;
         }
       } else {
-        // Absolute URL - use URL constructor
+        // Absolute URL
         const urlObj = new URL(`${server}/store/${encodeURIComponent(key)}`);
         if (ttl !== null) {
           urlObj.searchParams.append('ttl', ttl.toString());
@@ -20,17 +35,11 @@ export async function storeData(servers: string[], key: string, value: Blob, ttl
         url = urlObj.toString();
       }
 
-      // Test first that data is not already stored
+      // La ligne ci-dessous a été supprimée car le test est fait au-dessus
-      const testResponse = await testData(url, key);
+      // const testResponse = await testData(url, key); // <-- LIGNE BOGUÉE SUPPRIMÉE
-      if (testResponse) {
-        console.log('Data already stored:', key);
-        continue;
-      } else {
-        console.log('Data not stored for server:', key, server);
-      }
 
-      // Send the encrypted ArrayBuffer as the raw request body.
+      // Send the encrypted data as the raw request body.
-      const response = await axios.post(url, value, {
+      const response = await axios.post(url, value, { // Note: c'est bien un POST sur 'url'
         headers: {
           'Content-Type': 'application/octet-stream'
         },
@@ -43,7 +52,7 @@ export async function storeData(servers: string[], key: string, value: Blob, ttl
       return response;
     } catch (error) {
       if (axios.isAxiosError(error) && error.response?.status === 409) {
-        return null;
+        return null; // 409 Conflict (Key already exists)
       }
       console.error('Error storing data:', error);
     }
@@ -51,22 +60,21 @@ export async function storeData(servers: string[], key: string, value: Blob, ttl
   return null;
 }
 
+// Fonction retrieveData (inchangée, elle était correcte)
 export async function retrieveData(servers: string[], key: string): Promise<ArrayBuffer | null> {
   for (const server of servers) {
     try {
-      // Handle relative paths (for development proxy) vs absolute URLs (for production)
       const url = server.startsWith('/') 
-        ? `${server}/retrieve/${key}`  // Relative path - use as-is for proxy
+        ? `${server}/retrieve/${key}`
-        : new URL(`${server}/retrieve/${key}`).toString();  // Absolute URL - construct properly
+        : new URL(`${server}/retrieve/${key}`).toString(); 
       
       console.log('Retrieving data', key,' from:', url);
-      // When fetching the data from the server:
+      
       const response = await axios.get(url, {
         responseType: 'arraybuffer' 
       });
       
       if (response.status === 200) {
-        // Validate that we received an ArrayBuffer
         if (response.data instanceof ArrayBuffer) {
           return response.data;
         } else {
@@ -80,8 +88,9 @@ export async function retrieveData(servers: string[], key: string): Promise<Arra
     } catch (error) {
       if (axios.isAxiosError(error)) {
         if (error.response?.status === 404) {
+          // C'est normal si la donnée n'existe pas
           console.log(`Data not found on server ${server} for key ${key}`);
-          continue; // Try next server
+          continue; 
         } else if (error.response?.status) {
           console.error(`Server ${server} error ${error.response.status}:`, error.response.statusText);
           continue;
@@ -103,17 +112,27 @@ interface TestResponse {
     value: boolean;
 }
 
-export async function testData(url: string, key: string): Promise<boolean | null> {
+// --- FONCTION testData CORRIGÉE ---
+// Elle prend 'server' au lieu de 'url' et construit sa propre URL '/test/...'
+export async function testData(server: string, key: string): Promise<boolean> {
   try {
-      const response = await axios.get(url);
+    // Construit l'URL /test/...
-      if (response.status !== 200) {
+    const testUrl = server.startsWith('/') 
-        console.error(`Test response status: ${response.status}`);
+      ? `${server}/test/${encodeURIComponent(key)}`
-        return false;
+      : new URL(`${server}/test/${encodeURIComponent(key)}`).toString();
-      }
+
+    const response = await axios.get(testUrl); // Fait un GET sur /test/...
+
+    // 200 OK = la donnée existe
+    return response.status === 200; 
 
-      return true; 
   } catch (error) {
-      console.error('Error testing data:', error);
+    if (axios.isAxiosError(error) && error.response?.status === 404) {
-      return null;
+      // 404 Not Found = la donnée n'existe pas. C'est une réponse valide.
+      return false;
+    }
+    // Toute autre erreur (serveur offline, 500, etc.)
+    console.error('Error testing data:', error);
+    return false; // On considère que le test a échoué
   }
 }

src/utils/sp-address.utils.ts

@@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
 
 // Verify Other address
 export function initAddressInput() {
-  const container = getCorrectDOM('login-4nk-component') as HTMLElement
+  const container = getCorrectDOM('login-4nk-component') as HTMLElement;
   const addressInput = container.querySelector('#addressInput') as HTMLInputElement;
   const emojiDisplay = container.querySelector('#emoji-display-2');
   const okButton = container.querySelector('#okButton') as HTMLButtonElement;
@@ -155,7 +155,7 @@ async function onCreateButtonClick() {
     // Don't call confirmPairing immediately - it will be called when the pairing process is complete
     console.log('Pairing process initiated. Waiting for completion...');
   } catch (e) {
-     console.error(`onCreateButtonClick error: ${e}`);
+    console.error(`onCreateButtonClick error: ${e}`);
   }
 }
 
@@ -164,17 +164,14 @@ export async function prepareAndSendPairingTx(): Promise<void> {
 
   try {
     const relayAddress = service.getAllRelays();
-    const createPairingProcessReturn = await service.createPairingProcess(
+    const createPairingProcessReturn = await service.createPairingProcess('', []);
-      "",
-      [],
-    );
 
     if (!createPairingProcessReturn.updated_process) {
       throw new Error('createPairingProcess returned an empty new process');
     }
 
     try {
-      await service.checkConnections(createPairingProcessReturn.updated_process.current_process, createPairingProcessReturn.updated_process.current_process.states[0].state_id);
+      await service.ensureConnections(createPairingProcessReturn.updated_process.current_process, createPairingProcessReturn.updated_process.current_process.states[0].state_id);
     } catch (e) {
       throw e;
     }
@@ -194,7 +191,6 @@ export async function prepareAndSendPairingTx(): Promise<void> {
     }
 
     await service.handleApiReturn(createPairingProcessReturn);
-
   } catch (err) {
     console.error(err);
   }
@@ -202,7 +198,7 @@ export async function prepareAndSendPairingTx(): Promise<void> {
 
 export async function generateQRCode(spAddress: string) {
   try {
-    const container = getCorrectDOM('login-4nk-component') as HTMLElement
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
     const currentUrl = 'https://' + window.location.host;
     const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
     const qrCode = container?.querySelector('.qr-code img');
@@ -213,9 +209,9 @@ export async function generateQRCode(spAddress: string) {
 }
 
 export async function generateCreateBtn() {
-  try{
+  try {
-    //Generate CreateBtn
+    // Generate CreateBtn
-    const container = getCorrectDOM('login-4nk-component') as HTMLElement
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
     const createBtn = container?.querySelector('.create-btn');
     if (createBtn) {
       createBtn.textContent = 'CREATE';
@@ -223,5 +219,4 @@ export async function generateCreateBtn() {
   } catch (err) {
     console.error(err);
   }
-
 }

vite.config.ts

@@ -5,6 +5,10 @@ import {createHtmlPlugin} from 'vite-plugin-html';
 import typescript from "@rollup/plugin-typescript";
 import fs from 'fs'
 import path from 'path'
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 // import pluginTerminal from 'vite-plugin-terminal';
 
 export default defineConfig({