.ci-build

@@ -1 +0,0 @@
-# CI Build Trigger

.ci-trigger

@@ -1,2 +0,0 @@
-# CI Trigger
-# CI Trigger Sun Sep 21 19:57:46 UTC 2025

.cursorignore

@@ -1,10 +0,0 @@
-# Cursor ignore file for ihm_client
-node_modules/
-dist/
-*.log
-.env*
-.DS_Store
-coverage/
-build/
-pkg/
-pkg2/

.cursorrules

@@ -1,165 +0,0 @@
-# Règles globales Cursor pour les projets
-
-## Principes généraux
-- Lire impérativement le fichier `.cursorrules` au démarrage de chaque session.
-- Lire tous les fichiers du dossier `docs/`, le code et les paramètres avant de commencer.
-- Poser des questions et proposer des améliorations si nécessaire.
-- Ajouter les leçons apprises à ce fichier `.cursorrules`.
-- Écrire des documents complets et exhaustifs.
-- Respecter strictement les règles de lint du Markdown.
-- Préférer toujours un shell **bash** à PowerShell.
-- Fermer et relancer le terminal avant chaque utilisation.
-- Si le terminal est interrompu, analyser la commande précédente (interruption probablement volontaire).
-- Exécuter automatiquement les étapes de résolution de problème.
-- Expliquer les commandes complexes avant de les lancer.
-- Compiler régulièrement et corriger toutes les erreurs avant de passer à l’étape suivante.
-- Tester, documenter, compiler, aligner tag git, changelog et version avant déploiement et push.
-- Utiliser `docx2txt` pour lire les fichiers `.docx`.
-- Ajouter automatiquement les dépendances et rechercher systématiquement les dernières versions.
-- Faire des commandes simples et claires en plusieurs étapes.
-- Vérifie toujours tes hypothèses avant de commencer.
-- N'oublie jamais qu'après la correction d'un problème, il faut corriger toutes les erreurs qui peuvent en découler.
-
-## Organisation des fichiers et répertoires
-- Scripts regroupés dans `scripts/`
-- Configurations regroupées dans `confs/`
-- Journaux regroupés dans `logs/`
-- Répertoires obligatoires :
-  - `docs/` : documentation de toute fonctionnalité ajoutée, modifiée, supprimée ou découverte.
-  - `tests/` : tests liés à toute fonctionnalité ajoutée, modifiée, supprimée ou découverte.
-- Remplacer les résumés (`RESUME`) par des mises à jour dans `docs/`.
-
-## Configuration critique des services
-- Mempool du réseau signet :
-  `https://mempool2.4nkweb.com/fr/docs/api/rest`
-
-## Développement et sécurité
-- Ne jamais committer de clés privées ou secrets.
-- Utiliser des variables d’environnement pour les données sensibles.
-- Définir correctement les dépendances Docker avec healthchecks.
-- Utiliser les URLs de service Docker Compose (`http://service_name:port`).
-- Documenter toutes les modifications importantes dans `docs/`.
-- Externaliser au maximum les variables d’environnement.
-- Toujours utiliser une clé SSH pour cloner les dépôts.
-- Monter en version les dépôts au début du travail.
-- Pousser les tags docker `int-dev` via la CI sur `git.4nkweb.com`.
-- Corriger systématiquement les problèmes, même mineurs, sans contournement.
-
-## Scripts (règles critiques)
-- Vérifier l’existence d’un script dans `scripts/` avant toute action.
-- Utiliser les scripts existants plutôt que des commandes directes.
-- Ne jamais créer plusieurs versions ou noms de scripts.
-- Améliorer l’existant au lieu de créer des variantes (`startup-v2.sh`, etc.).
-
-## Images Docker (règles critiques)
-- Ajouter systématiquement `apt update && apt upgrade` dans les Dockerfiles.
-- Installer en arrière-plan dans les images Docker :
-  `curl, git, sed, awk, nc, wget, jq, telnet, tee, wscat, ping, npm (dernière version)`
-- Appliquer à tous les Dockerfiles et `docker-compose.yml`.
-- N'utilise pas les version test ou dev ou int-dev-dev mais toujours les version int-dev, relance leur compilation si nécessaire
-
-## Fichiers de configuration (règles critiques)
-- Vérifier l’écriture effective après chaque modification.
-- Fichiers concernés : `nginx.conf`, `bitcoin.conf`, `package.json`, `Cargo.toml`.
-- Utiliser `cat`, `jq` ou vérificateurs de syntaxe.
-
-## Connexion au réseau Bitcoin signet
-Commande unique et obligatoire :
-```bash
-docker exec bitcoin-signet bitcoin-cli -signet -rpccookiefile=/home/bitcoin/.bitcoin/signet/.cookie getblockchaininfo
-````
-
-## Connexion au relay/faucet bootstrap
-
-* Test via WSS : `wss://dev3.4nkweb.com/ws/`
-* Envoi Faucet, réponse attendue avec `NewTx` (tx hex et tweak\_data).
-
-## Debug
-
-* Automatiser dans le code toute solution validée.
-* Pérenniser les retours d’expérience dans code et paramètres.
-* Compléter les tests pour éviter les régressions.
-
-## Nginx
-
-* Tous les fichiers dans `conf/ngnix` doivent être mappés avec ceux du serveur.
-
-## Minage (règles critiques)
-
-* Toujours valider les adresses utilisées (adresses TSP non reconnues).
-* Utiliser uniquement des adresses Bitcoin valides (bech32m).
-* Vérifier que le minage génère des blocs avec transactions, pas uniquement coinbase.
-* Surveiller les logs du minage pour détecter les erreurs d’adresse.
-* Vérifier la propagation via le mempool externe.
-
-## Mempool externe
-
-* Utiliser `https://mempool2.4nkweb.com` pour vérifier les transactions.
-* Vérifier la synchronisation entre réseau local et externe.
-
-## Données et modèles
-
-* Utiliser les fichiers CSV comme base des modèles de données.
-* Être attentif aux en-têtes multi-lignes.
-* Confirmer la structure comprise et demander définition de toutes les colonnes.
-* Corriger automatiquement incohérences de type.
-
-## Implémentation et architecture
-
-* Code splitting avec `React.lazy` et `Suspense`.
-* Centraliser l’état avec Redux ou Context API.
-* Créer une couche d’abstraction pour les services de données.
-* Aller systématiquement au bout d’une implémentation.
-
-## Préparation open source
-
-Chaque projet doit être prêt pour un dépôt sur `git.4nkweb.com` :
-
-* Inclure : `LICENSE` (MIT, Apache 2.0 ou GPL), `CONTRIBUTING.md`, `CHANGELOG.md`, `CODE_OF_CONDUCT.md`.
-* Aligner documentation et tests avec `4NK_node`.
-
-## Versioning et documentation
-
-* Mettre à jour documentation et tests systématiquement.
-* Gérer versioning avec changelog.
-* Demander validation avant tag.
-* Documenter les hypothèses testées dans un REX technique.
-* Tester avant tout commit.
-* Tester les buildsavant tout tag.
-
-## Bonnes pratiques de confidentialité et sécurité
-
-### Docker
-- Ne jamais stocker de secrets (clés, tokens, mots de passe) dans les Dockerfiles ou docker-compose.yml.
-- Utiliser des fichiers `.env` sécurisés (non commités avec copie en .env.example) pour toutes les variables sensibles.
-- Ne pas exécuter de conteneurs avec l’utilisateur root, privilégier un utilisateur dédié.
-- Limiter les capacités des conteneurs (option `--cap-drop`) pour réduire la surface d’attaque.
-- Scanner régulièrement les images Docker avec un outil de sécurité (ex : Trivy, Clair).
-- Mettre à jour en continu les images de base afin d’éliminer les vulnérabilités.
-- Ne jamais exposer de ports inutiles.
-- Restreindre les volumes montés au strict nécessaire.
-- Utiliser des réseaux Docker internes pour la communication inter-containers.
-- Vérifier et tenir à jour les .dockerignore.
-
-### Git
-- Ne jamais committer de secrets, clés ou identifiants (même temporairement).
-- Configurer des hooks Git (pre-commit) pour détecter automatiquement les secrets et les failles.
-- Vérifier l’historique (`git log`, `git filter-repo`) pour s’assurer qu’aucune information sensible n’a été poussée.
-- Signer les commits avec GPG pour garantir l’authenticité.
-- Utiliser systématiquement SSH pour les connexions à distance.
-- Restreindre les accès aux dépôts (principes du moindre privilège).
-- Documenter les changements sensibles dans `CHANGELOG.md`.
-- Ne jamais pousser directement sur `main` ou `master`, toujours passer par des branches de feature ou PR.
-- Vérifier et tenir à jour les .gitignore.
-- Vérifier et tenir à jour les .gitkeep.
-- Vérifier et tenir à jour les .gitattributes.
-
-### Cursor
-- Toujours ouvrir une session en commençant par relire le fichier `.cursorrules`.
-- Vérifier que Cursor ne propose pas de commit contenant des secrets ou fichiers sensibles.
-- Ne pas exécuter dans Cursor de commandes non comprises ou copiées sans vérification.
-- Préférer l’utilisation de scripts audités dans `scripts/` plutôt que des commandes directes dans Cursor.
-- Fermer et relancer Cursor régulièrement pour éviter des contextes persistants non désirés.
-- Ne jamais partager le contenu du terminal ou des fichiers sensibles via Cursor en dehors du périmètre du projet.
-- Vérifier et tenir à jour les .cursorrules.
-- Vérifier et tenir à jour les .cursorignore.

.dockerignore

@@ -1,10 +0,0 @@
-.git
-node_modules
-.next
-coverage
-dist
-.DS_Store
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.env*

.env

@@ -0,0 +1,3 @@
+# .env
+VITE_API_URL=https://api.example.com
+VITE_API_KEY=your_api_key

.env.exemple

@@ -1,25 +0,0 @@
-BOOTSTRAPURL=wss://dev3.4nkweb.com/ws/
-
-# WS
-# RELAY_URLS=wss://demo.4nkweb.com/ws
-RELAY_URLS=ws://sdk_relay:8090,wss://dev3.4nkweb.com/ws/
-
-# SIGNER_WS_URL=ws://dev4.4nkweb.com/signer/
-SIGNER_WS_URL=ws://dev3.4nkweb.com
-SIGNER_BASE_URL=https://dev3.4nkweb.com
-
-core_url="http://bitcoin:38332"
-ws_url="0.0.0.0:8090"
-wallet_name="default"
-network="signet"
-blindbit_url="http://blindbit:8000"
-zmq_url="tcp://bitcoin:29000"
-storage="https://dev4.4nkweb.com/storage"
-data_dir="/home/bitcoin/.4nk"
-bitcoin_data_dir="/home/bitcoin/.bitcoin"
-
-
-# ===================== /!\ donnée sensible =======================
-
-SIGNER_API_KEY=your-api-key-change-this
-VITE_JWT_SECRET_KEY=52b3d77617bb00982dfee15b08effd52cfe5b2e69b2f61cc4848cfe1e98c0bc9

.gitea/workflows/build-int-dev.yml

@@ -1,69 +0,0 @@
-name: Build and Push Docker image (int-dev)
-
-on:
-  push:
-    tags:
-      - int-dev
-
-env:
-  REGISTRY: git.4nkweb.com
-  IMAGE_NAMESPACE: 4nk
-  IMAGE_NAME: ihm_client
-  DOCKER_TAG: int-dev
-
-jobs:
-  docker:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ secrets.USER }}
-          password: ${{ secrets.TOKEN }}
-
-      - name: Setup SSH agent for git clone
-        uses: webfactory/ssh-agent@v0.9.0
-        with:
-          ssh-private-key: |
-            ${{ secrets.SSH_PRIVATE_KEY }}
-
-      - name: Verify WebAssembly files
-        run: |
-          set -euo pipefail
-          # Verify that the pre-built WASM files are present
-          echo "Verifying WebAssembly files..."
-          ls -la pkg/
-          file pkg/sdk_client_bg.wasm
-          echo "WebAssembly files verified successfully"
-
-      - name: Extract docker tag from commit message (optional)
-        id: tag
-        run: |
-          set -euo pipefail
-          MSG=$(git log -1 --pretty=%B | tr -d '\r')
-          if echo "$MSG" | grep -q "ci: docker_tag="; then
-            T=$(echo "$MSG" | sed -nE 's/.*ci: docker_tag=([^ ]+).*/\1/p' | tr -d '\n')
-            if [ -n "$T" ]; then
-              echo "tag=$T" >> $GITHUB_OUTPUT
-            fi
-          fi
-
-      - name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64
-          tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAMESPACE }}/${{ env.IMAGE_NAME }}:${{ steps.tag.outputs.tag || env.DOCKER_TAG }}
-          ssh: default

.gitignore

@@ -1,36 +1,7 @@
-# Secrets et fichiers sensibles
-.env
-.env.*
-!.env.example
-!.env.exemple
-*.key
-*.pem
-secrets/
-
-# Logs
-logs/
-*.log
-
-# Node.js
+target/
+pkg/
+Cargo.lock
 node_modules/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build
 dist/
-build/
-
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Temporary files
-tmp/
-*.tmp
+.vscode
+public/ssl/

CHANGELOG.md

@@ -1,17 +0,0 @@
-# Changelog
-
-## [Unreleased]
-### Documentation WebSocket et architecture
-- **Documentation WebSocket** : Ajout de `docs/WEBSOCKET_CONNECTION.md` avec analyse complète de l'architecture
-- **Architecture de l'iframe** : Documentation de la logique de fonctionnement (init, services, WebSocket)
-- **Configuration WebSocket** : Documentation des variables d'environnement et connexions
-- **Gestion des messages** : Documentation du handshake et mise à jour des adresses relay
-- **Communication parent** : Documentation de l'écoute des messages et gestion des erreurs
-- **Problème persistant** : 502 Bad Gateway - Nginx ne transmet pas les headers WebSocket
-
-## [1.0.0]
-### Version initiale
-- Interface utilisateur pour LeCoffre
-- Intégration WebSocket avec les relays
-- Gestion des processus et authentification
-- Communication avec le parent via postMessage

Dockerfile

@@ -1,44 +1,13 @@
-# syntax=docker/dockerfile:1.4
-
-FROM debian:bookworm-slim
-WORKDIR /app
-
-# Installation des dépendances minimales nécessaires
-RUN apt-get update && apt-get upgrade -y && \
-    apt-get install -y --fix-missing \
-    ca-certificates curl jq git \
-    net-tools iputils-ping dnsutils \
-    netcat-openbsd telnet procps && \
-    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
-
-# Installation de Node.js
-RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
-    apt-get install -y nodejs && \
-    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
-
-# Création d'un utilisateur non-root
-RUN useradd -m -u 1000 appuser && \
-    mkdir -p /app && chown -R appuser:appuser /app
-
-# Copy project files
-COPY . .
-RUN chown -R appuser:appuser /app
-
-# Ensure pkg directory exists and has correct permissions
-RUN mkdir -p pkg && chmod -R 755 pkg
-
-# Verify pkg files are present
-RUN ls -la pkg/
-
-# Copy the provided prebuilt WASM package (ESM)
-# The directory pkg is provided in the build context
-# and already contains sdk_client.js (ES module) and wasm
-# so no compilation is required here.
-
-# Installation des dépendances Node.js
-USER appuser
-RUN npm install
-
-EXPOSE 3003
-
-CMD ["npm", "start"]
+FROM node:20
+
+ENV TZ=Europe/Paris
+RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
+
+# use this user because he have uid et gid 1000 like theradia
+USER node
+
+WORKDIR /app
+
+CMD ["npm", "start"]
+#  "--disable-host-check", "--host", "0.0.0.0", "--ssl", "--ssl-cert", "/ssl/certs/site.crt", "--ssl-key", "/ssl/private/site.dec.key"]
+

docs/ANALYSE.md

@@ -1,39 +0,0 @@
-## Analyse détaillée
-
-### Périmètre
-
-Client front (Vite) intégrant un package WASM pré‑construit `pkg/` et Nginx pour le dev.
-
-### Stack
-
-- **Outillage**: Vite 5, TypeScript 5
-- **WASM**: paquet `sdk_client` précompilé (copié dans `pkg/`)
-- **UI/Libs**: axios, QR, SweetAlert2, plugins Vite (React/Vue activables)
-- **Serveur**: Nginx en dev via `start-dev.sh`
-
-### Build et exécution
-
-- Scripts: `build_wasm`, `start` (Vite host 0.0.0.0), `build`, `deploy`.
-- Dockerfile: Node 20‑alpine, installe `git` et `nginx`, `npm install`, copie `nginx.dev.conf`, script de démarrage.
-
-### Ports
-
-- 3003 (exposition dev), 80 via Nginx.
-
-### Risques et points d’attention
-
-- Coexistence double serveur (Vite + Nginx) en dev: veiller au routage, CORS et proxys.
-- Paquet WASM précompilé: vérifier cohérence de version avec `sdk_client`.
-- Absence de tests automatiques; ajouter stratégie `tests/` (unit/integration).
-
-### Actions proposées
-
-- Documenter matrice compatibilité `pkg/` ↔ `sdk_client` (source, commit/tag, date).
-- Ajouter lints/tests en CI; unifier serveur dev (proxy Nginx vers Vite ou inverse).
-- Paramétrer variables d’env front (URLs relais, API) et fournir `.env.example`.
-
-
-
-
-
-

docs/ARCHITECTURE.md

@@ -1,23 +0,0 @@
-# Architecture - IHM Client
-
-## Composants
-- Frontend embarqué en iframe dans `lecoffre-front`.
-- Dialogue avec `sdk_signer` et `sdk_relay` via WebSocket.
-
-## Dépendances
-- `sdk_signer` via `VITE_SIGNER_URL`.
-- `sdk_relay` via `VITE_WS_URL`.
-- Backend `lecoffre-back-mini` via `VITE_API_BASE_URL`.
-
-## Réseau et ports
-- Exposé derrière Nginx via `https://dev4.4nkweb.com/`.
-
-## Variables d’environnement (centralisées)
-- Chargement depuis `lecoffre_node/.env.master`.
-
-## Monitoring
-- Logs → Promtail → Loki → Grafana (Frontend Services).
-
-## Notes
-- Code splitting (`React.lazy`, `Suspense`).
-- Pas de `.env` local, configuration via Docker Compose.

docs/CORRECTIONS_APPLIQUEES.md

@@ -1,40 +0,0 @@
-# Corrections Appliquées - IHM Client
-
-## Date: 20 Septembre 2025
-
-### 🔧 Corrections Majeures
-
-#### 1. Problème de Configuration WebSocket
-**Problème:** L'iframe était bloquée sur "Chargement de l'authentification..." car elle tentait de se connecter à une URL WebSocket inaccessible.
-
-**Solution:**
-- Correction de `VITE_BOOTSTRAPURL` pour pointer vers le bootstrap externe
-- Configuration des `RELAY_URLS` pour utiliser le relais local et externe
-- Mise à jour des variables d'environnement
-
-**Fichiers modifiés:**
-- `.env` - Configuration WebSocket corrigée
-- `docker-compose.yml` - Variables d'environnement mises à jour
-
-#### 2. Configuration des URLs
-**Variables d'environnement:**
-```env
-BOOTSTRAPURL=wss://dev3.4nkweb.com/ws/
-RELAY_URLS=ws://sdk_relay:8090,wss://dev3.4nkweb.com/ws/
-```
-
-#### 3. Installation des Outils
-**Ajouté dans le Dockerfile:**
-- `curl`, `git`, `wget`, `jq`, `telnet`, `npm`, `wscat`
-- Outils de diagnostic et de connectivité
-
-### 📊 État Actuel
-- **Statut:** ✅ Healthy
-- **Connectivité:** Bootstrap et relais configurés
-- **URLs:** Correctement mappées
-- **Logs:** Optimisés
-
-### 🔄 Prochaines Étapes
-- Tests de connectivité WebSocket
-- Monitoring des performances
-- Optimisations supplémentaires

docs/DEPLOIEMENT.md

@@ -1,23 +0,0 @@
-# Déploiement - IHM Client
-
-## Préparation
-- Branche `int-dev` sur tous les dépôts.
-- Variables dans `lecoffre_node/.env.master` (pas de `.env` local).
-- Ne pas utiliser `docker compose up -d`.
-
-## Déploiement (orchestrateur)
-```bash
-cd /home/debian/4NK_env/lecoffre_node
-./scripts/start.sh | cat
-./scripts/validate-deployment.sh | cat
-```
-
-## Vérifications
-- `https://dev4.4nkweb.com/` (iframe OK)
-- WS `wss://dev4.4nkweb.com/ws/`
-- `./scripts/monitor-progress.sh | cat`
-
-## Règles
-- Pousser sur `int-dev` sans déclencher de CI tant que non nécessaire.
-- Config centralisée uniquement.
-- Logs via Promtail → Loki → Grafana.

docs/FLUX.md

@@ -1,10 +0,0 @@
-# Description des Flux - IHM Client
-
-```mermaid
-documentation
-```
-
-## Flux principaux
-1. Auth notaire via front → IdNot → front → iframe IHM.
-2. IHM ↔ Signer (opérations signées).
-3. IHM ↔ Relay (WebSocket) pour évènements.

docs/FONCTIONNEL.md

@@ -1,18 +0,0 @@
-# Description Fonctionnelle - IHM Client
-
-## Objectif
-Fournir l’interface d’interaction utilisateur (iframe) pour les flux métiers et les opérations liées aux clés Bitcoin (Silent Payment).
-
-## Parcours clés
-- Authentification via redirection IdNot (depuis `lecoffre-front`).
-- Connexion au `sdk_signer` pour opérations signées.
-- Échanges temps réel via `sdk_relay` (WebSocket).
-
-## Rôles
-- Notaire: initie les dossiers, suit l’état.
-- Client: accède aux dossiers, valide via SMS, téléverse des pièces.
-
-## Résultats attendus
-- Affichage fiable de l’iframe.
-- Opérations signées validées.
-- Erreurs affichées à l’utilisateur, logs collectés.

docs/INSTALLATION.md

@@ -1,35 +0,0 @@
-# Installation - IHM Client
-
-## Prérequis
-- Accès au dépôt `4NK_env` (branche `int-dev`).
-- Docker/Compose installés.
-- Variables centralisées dans `lecoffre_node/.env.master`.
-
-## Récupération du code
-```bash
-cd /home/debian/4NK_env
-# Assure-toi d'être sur la branche int-dev dans tous les dépôts
-```
-
-## Configuration
-- Ne pas créer de `.env` local.
-- Renseigner/valider `VITE_*` dans `lecoffre_node/.env.master`.
-
-## Démarrage (via orchestrateur)
-- Lancer via `lecoffre_node` (recommandé) :
-```bash
-cd /home/debian/4NK_env/lecoffre_node
-./scripts/start.sh | cat
-```
-
-## Accès
-- `https://dev4.4nkweb.com/` (intégré via Nginx).
-
-## Vérifications
-- Page statut: `https://dev4.4nkweb.com/status/`
-- WebSocket: `wss://dev4.4nkweb.com/ws/`
-- Logs Grafana.
-
-## Notes
-- Brancher IHM via iframe dans `lecoffre-front`.
-- Ne pas déclencher de CI depuis ce dépôt; builds images depuis pipelines tag `int-dev` si nécessaire.

docs/QUALITE.md

@@ -1,6 +0,0 @@
-# Qualité Logicielle - IHM Client
-
-- Lint/format: respecter config projet.
-- Tests: ajouter vérifs WS et intégration iframe.
-- Performance: code splitting et lazy loading.
-- Observabilité: logs structurés, erreurs gérées.

docs/SECURITE.md

@@ -1,6 +0,0 @@
-# Sécurité - IHM Client
-
-- Pas de secrets dans le code/dépôt.
-- Variables via `.env.master` uniquement.
-- CSP/headers via Nginx.
-- WS sécurisé via `wss://`.

docs/TECHNIQUE.md

@@ -1,22 +0,0 @@
-# Description Technique - IHM Client
-
-## Tech stack
-- Node.js 20, Vite/React.
-- Code splitting (`React.lazy`, `Suspense`).
-
-## Configuration
-- Variables `VITE_*` via `lecoffre_node/.env.master`.
-- Aucune lecture de `.env` local.
-
-## Interfaces
-- WebSocket `VITE_WS_URL` (relay).
-- REST `VITE_API_BASE_URL` (backend).
-- `VITE_SIGNER_URL` (signer).
-
-## Sécurité
-- Aucune clé en dépôt.
-- Headers sécurisés via Nginx.
-
-## Observabilité
-- Logs Promtail → Loki.
-- Dashboards Grafana.

docs/TODO.md

@@ -1,6 +0,0 @@
-# TODO - IHM Client
-
-- Vérifier intégration iframe avec `lecoffre-front`.
-- Tester WS `wss://dev4.4nkweb.com/ws/`.
-- Vérifier configuration `VITE_*` via `.env.master`.
-- Ajouter dashboards Grafana si manquants.

docs/WEBSOCKET_CONNECTION.md

@@ -1,124 +0,0 @@
-# Connexion WebSocket - ihm_client
-
-## Architecture de l'iframe
-
-### Structure de fonctionnement
-L'iframe `ihm_client` suit une architecture modulaire :
-
-1. **Initialisation** (`router.ts`) :
-   - `init()` initialise les services
-   - `Services.getInstance()` crée l'instance singleton
-   - `connectAllRelays()` établit les connexions WebSocket
-
-2. **Services** (`services/service.ts`) :
-   - Gestion des connexions WebSocket
-   - Communication avec les relays
-   - Gestion des messages et handshakes
-
-3. **WebSocket** (`websockets.ts`) :
-   - API WebSocket native
-   - Gestion des événements (open, message, error, close)
-
-## Configuration WebSocket
-
-### Variables d'environnement
-```bash
-VITE_BOOTSTRAPURL=wss://dev4.4nkweb.com/ws/
-RELAY_URLS=wss://dev4.4nkweb.com/ws/,wss://dev3.4nkweb.com/ws/
-```
-
-### Connexion aux relays
-```typescript
-// Dans service.ts
-const BOOTSTRAPURL = [import.meta.env.VITE_BOOTSTRAPURL || `wss://${BASEURL}/ws/`];
-
-// Connexion à tous les relays
-await services.connectAllRelays();
-```
-
-## Gestion des messages
-
-### Handshake
-```typescript
-public async handleHandshakeMsg(url: string, parsedMsg: any) {
-  const handshakeMsg: HandshakeMessage = JSON.parse(parsedMsg);
-  this.updateRelay(url, handshakeMsg.sp_address);
-  this.currentBlockHeight = handshakeMsg.chain_tip;
-}
-```
-
-### Mise à jour des adresses relay
-```typescript
-public updateRelay(wsurl: string, spAddress: string): void {
-  this.relayAddresses[wsurl] = spAddress;
-  console.log(`Updated: ${wsurl} -> ${spAddress}`);
-}
-```
-
-## Communication avec le parent
-
-### Écoute des messages
-```typescript
-// Dans router.ts
-if (window.self !== window.top) {
-  // L'iframe écoute les messages du parent
-  window.addEventListener('message', handleMessage);
-}
-```
-
-### Gestion des erreurs
-```typescript
-// Détection des fonds insuffisants
-if (insufficientFunds) {
-  await this.triggerAutomaticFundsTransfer();
-}
-```
-
-## Problèmes résolus
-
-### 1. Configuration WebSocket incorrecte
-**Problème :** L'iframe utilisait `ws://sdk_relay:8090/` au lieu de `wss://dev4.4nkweb.com/ws/`.
-
-**Solution :** Correction des variables d'environnement et redémarrage du container.
-
-### 2. Mixed Content errors
-**Problème :** Tentative de connexion WS depuis une page HTTPS.
-
-**Solution :** Utilisation de WSS (WebSocket Secure) pour toutes les connexions.
-
-### 3. Headers WebSocket manquants
-**Problème :** Nginx ne transmettait pas les headers WebSocket.
-
-**Solution :** Configuration Nginx avec headers WebSocket explicites.
-
-## Problème persistant
-
-### 502 Bad Gateway
-**Statut :** ⚠️ Problème persistant
-- L'iframe reçoit 502 Bad Gateway lors de la connexion WebSocket
-- Nginx ne transmet pas les headers WebSocket vers le relay
-- Le relay rejette les connexions sans headers
-
-**Investigation :** La configuration Nginx semble correcte mais les headers ne sont pas transmis.
-
-## Tests
-
-### Test de connexion WebSocket
-```bash
-# Depuis l'iframe
-wget -O- https://dev4.4nkweb.com/ws/
-```
-
-**Résultat actuel :** 502 Bad Gateway
-
-### Test avec headers WebSocket
-```bash
-curl -v -H "Upgrade: websocket" \
-     -H "Connection: upgrade" \
-     -H "Sec-WebSocket-Version: 13" \
-     -H "Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==" \
-     https://dev4.4nkweb.com/ws/
-```
-
-## Date de mise à jour
-2025-01-20 - Architecture de l'iframe analysée et problèmes de connexion WebSocket identifiés

docs/analyse.md

@@ -1,31 +0,0 @@
-### Objet
-Analyse synthétique de `ihm_client` (iframe chargée par `lecoffre-front`).
-
-### Stack et build
-- **Outil**: Vite
-- **Langage**: TypeScript + HTML templates
-- **Cible**: `index.html` + `src/main.ts` (SPA montée en iframe)
-- **Serveur dev**: `nginx.dev.conf` et script `start-dev.sh`
-
-### Arborescence notable
-- `src/components`: header, modales (confirmation/creation/waiting), login-modal, qrcode-scanner
-- `src/pages`: home, chat, account, process, signature (+ variantes)
-- `src/services`: database, storage, token, modal, service générique
-- `src/utils`: documents, HTML helpers, notifications store, subscriptions utils
-- `src/websockets.ts`: temps-réel côté iframe
-
-### Intégrations et communication
-- **Token/Session**: `src/services/token.ts`
-- **Stockage**: `src/services/storage.service.ts`
-- **Base de données**: `src/services/database.service.ts` (cache/worker)
-- **Workers**: `service-workers/` (cache/database)
-- **Échanges avec parent**: via postMessage (cf. utils/services) et WebSockets
-
-### Points d’attention
-- Sécurité iframe (sandbox, `postMessage` sécurisé par origine)
-- Gestion des tokens (renouvellement, stockage, effacement)
-- Cohérence de version avec `lecoffre-front` (API bus/messages)
-
-### Déploiement
-- **Dockerfile**: fourni
-- **Nginx**: `nginx.dev.conf` pour dev local

index.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="./style/4nk.css">
     <script src="https://unpkg.com/html5-qrcode"></script>
     <title>4NK Application</title>
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 </head>
 <body>
     <div id="header-container"></div>
@@ -18,18 +17,9 @@
     </div>
     <!-- <script type="module" src="/src/index.ts"></script> -->
     <script type="module">
-        // Charge le module WASM (ESM auto-start, pas d'export default)
-        import './pkg/sdk_client.js';
-
-        // Initialise l'application
-        import { init as initRouter } from '/src/router.ts';
-
+        import { init } from '/src/router.ts';
         (async () => {
-            try {
-                await initRouter();
-            } catch (error) {
-                console.error('Failed to initialize application:', error);
-            }
+            await init();
         })();
     </script>
 </body>

nginx.dev.conf

@@ -1,48 +0,0 @@
-server {
-    listen 80;
-    server_name localhost;
-
-    # Redirection des requêtes HTTP vers Vite
-    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 /ws/ {
-        proxy_pass http://dev4.4nkweb.com: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 /storage/ {
-        rewrite ^/storage(/.*)$ $1 break;
-        proxy_pass http://localhost:8080;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "Upgrade";
-        proxy_set_header Host $host;
-    }
-
-    location /api/ {
-        proxy_pass http://localhost:8091;
-        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

@@ -5,12 +5,11 @@
   "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_dev1/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/",
-    "prettify": "prettier --config ./.prettierrc --write \"src/**/*{.ts,.html,.css,.js}\"",
-    "build:dist": "tsc -p tsconfig.build.json"
+    "prettify": "prettier --config ./.prettierrc --write \"src/**/*{.ts,.html,.css,.js}\""
   },
   "keywords": [],
   "author": "",
@@ -31,15 +30,11 @@
   },
   "dependencies": {
     "@angular/elements": "^19.0.1",
-    "@types/jsonwebtoken": "^9.0.9",
     "@types/qrcode": "^1.5.5",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "axios": "^1.7.8",
     "html5-qrcode": "^2.3.8",
-    "jose": "^6.0.11",
-    "jsonwebtoken": "^9.0.2",
-    "pdf-lib": "^1.17.1",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.3",
     "sweetalert2": "^11.14.5",

pkg/.gitignore

@@ -1 +0,0 @@
-*

pkg/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "sdk_client",
-  "type": "module",
-  "version": "0.1.3",
-  "files": [
-    "sdk_client_bg.wasm",
-    "sdk_client.js",
-    "sdk_client_bg.js",
-    "sdk_client.d.ts"
-  ],
-  "main": "sdk_client.js",
-  "types": "sdk_client.d.ts",
-  "sideEffects": [
-    "./sdk_client.js",
-    "./snippets/*"
-  ]
-}

pkg/sdk_client.d.ts

@@ -1,249 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-export function setup(): void;
-export function get_address(): string;
-export function get_member(): Member;
-export function restore_device(device: any): void;
-export function create_device_from_sp_wallet(sp_wallet: string): string;
-export function create_new_device(birthday: number, network_str: string): string;
-export function scan_blocks(tip_height: number, blindbit_url: string): Promise<void>;
-export function is_paired(): boolean;
-export function pair_device(process_id: string, sp_addresses: string[]): void;
-export function unpair_device(): void;
-export function dump_wallet(): string;
-export function reset_shared_secrets(): void;
-export function set_shared_secrets(secrets: string): void;
-export function get_pairing_process_id(): string;
-export function dump_device(): Device;
-export function dump_neutered_device(): Device;
-export function reset_device(): void;
-export function get_txid(transaction: string): string;
-export function get_prevouts(transaction: string): string[];
-export function get_opreturn(transaction: string): string;
-export function process_commit_new_state(process: Process, state_id: string, new_tip: string): Process;
-export function parse_new_tx(new_tx_msg: string, block_height: number, members_list: OutPointMemberMap): ApiReturn;
-export function parse_cipher(cipher_msg: string, members_list: OutPointMemberMap, processes: OutPointProcessMap): ApiReturn;
-export function get_outputs(): any;
-export function get_available_amount(): bigint;
-/**
- * We send a transaction that pays at least one output to each address
- * The goal can be to establish a shared_secret to be used as an encryption key for further communication
- * or if the recipient is a relay it can be the init transaction for a new process
- */
-export function create_transaction(addresses: string[], fee_rate: number): ApiReturn;
-export function sign_transaction(partial_tx: TsUnsignedTransaction): ApiReturn;
-export function create_new_process(private_data: Pcd, roles: Roles, public_data: Pcd, relay_address: string, fee_rate: number, members_list: OutPointMemberMap): ApiReturn;
-export function update_process(process: Process, new_attributes: Pcd, roles: Roles, new_public_data: Pcd, members_list: OutPointMemberMap): ApiReturn;
-export function request_data(process_id: string, state_ids_str: string[], roles: any, members_list: OutPointMemberMap): ApiReturn;
-export function create_update_message(process: Process, state_id: string, members_list: OutPointMemberMap): ApiReturn;
-export function validate_state(process: Process, state_id: string, members_list: OutPointMemberMap): ApiReturn;
-export function refuse_state(process: Process, state_id: string, members_list: OutPointMemberMap): ApiReturn;
-export function evaluate_state(process: Process, state_id: string, members_list: OutPointMemberMap): ApiReturn;
-export function create_response_prd(process: Process, state_id: string, members_list: OutPointMemberMap): ApiReturn;
-export function create_faucet_msg(): string;
-export function get_storages(process_outpoint: string): string[];
-export function is_child_role(parent_roles: string, child_roles: string): void;
-export function decrypt_data(key: Uint8Array, data: Uint8Array): Uint8Array;
-export function encode_binary(data: any): Pcd;
-export function encode_json(json_data: any): Pcd;
-export function decode_value(value: Uint8Array): any;
-export function hash_value(value: any, commited_in: string, label: string): string;
-/**
- * Generate a merkle proof for a specific attribute in a process state.
- *
- * This function creates a merkle proof that proves the existence of a specific attribute
- * in a given state of a process. The proof can be used to verify that the attribute
- * was indeed part of the state without revealing the entire state.
- *
- * # Arguments
- * * `process_state` - The process state object as a JavaScript value
- * * `attribute_name` - The name of the attribute to generate a proof for
- *
- * # Returns
- * A MerkleProofResult object containing:
- * * `proof` - The merkle proof as a hex string
- * * `root` - The merkle root (state_id) as a hex string
- * * `attribute` - The attribute name that was proven
- * * `attribute_index` - The index of the attribute in the merkle tree
- * * `total_leaves_count` - The total number of leaves in the merkle tree
- *
- * # Errors
- * * "Failed to deserialize process state" - If the process state cannot be deserialized from JsValue
- * * "Attribute not found in state" - If the attribute doesn't exist in the state
- */
-export function get_merkle_proof(process_state: any, attribute_name: string): MerkleProofResult;
-/**
- * Validate a merkle proof for a specific attribute.
- *
- * This function verifies that a merkle proof is valid and proves the existence
- * of a specific attribute in a given state. It checks that the proof correctly
- * leads to the claimed root when combined with the attribute hash.
- *
- * # Arguments
- * * `proof_result` - a JsValue expected to contain a MerkleProofResult with the proof and metadata
- * * `hash` - The hash of the attribute data as a hex string (the leaf value)
- *
- * # Returns
- * A boolean indicating whether the proof is valid
- *
- * # Errors
- * * "serde_wasm_bindgen deserialization error" - If the proof is not a valid MerkleProofResult
- * * "Invalid proof format" - If the proof cannot be parsed
- * * "Invalid hash format" - If the hash is not a valid 32-byte hex string
- * * "Invalid root format" - If the root is not a valid 32-byte hex string
- */
-export function validate_merkle_proof(proof_result: any, hash: string): boolean;
-export type DiffStatus = "None" | "Rejected" | "Validated";
-
-export interface UserDiff {
-    process_id: string;
-    state_id: string;
-    value_commitment: string;
-    field: string;
-    roles: Roles;
-    description: string | null;
-    notify_user: boolean;
-    need_validation: boolean;
-    validation_status: DiffStatus;
-    storages: string[];
-}
-
-export interface UpdatedProcess {
-    process_id: OutPoint;
-    current_process: Process;
-    diffs: UserDiff[];
-    encrypted_data: Record<string, string>;
-    validated_state: number[] | null;
-}
-
-export 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;
-}
-
-export interface encryptWithNewKeyResult {
-    cipher: string;
-    key: string;
-}
-
-export interface MerkleProofResult {
-    proof: string;
-    root: string;
-    attribute: string;
-    attribute_index: number;
-    total_leaves_count: number;
-}
-
-export interface Prd {
-    prd_type: PrdType;
-    process_id: OutPoint;
-    sender: OutPoint | null;
-    keys: Record<string, number[]>;
-    pcd_commitments: PcdCommitments;
-    validation_tokens: Proof[];
-    roles: Roles;
-    public_data: Pcd;
-    payload: string;
-    proof: Proof | null;
-}
-
-export type PrdType = "None" | "Connect" | "Message" | "Update" | "List" | "Response" | "Confirm" | "TxProposal" | "Request";
-
-export interface Device {
-    sp_wallet: SpWallet;
-    pairing_process_commitment: OutPoint | null;
-    paired_member: Member;
-}
-
-export type OutPointProcessMap = Record<OutPoint, Process>;
-
-export type OutPointMemberMap = Record<OutPoint, Member>;
-
-export interface HandshakeMessage {
-    sp_address: string;
-    peers_list: OutPointMemberMap;
-    processes_list: OutPointProcessMap;
-    chain_tip: number;
-}
-
-export interface NewTxMessage {
-    transaction: string;
-    tweak_data: string | null;
-    error: AnkError | null;
-}
-
-export interface FaucetMessage {
-    sp_address: string;
-    commitment: string;
-    error: AnkError | null;
-}
-
-/**
- * Message sent to the server to commit some state in a transaction
- * Client must first send a commit message with empty validation_tokens
- * Relay will ignore a commit message for an update he\'s not aware of that also bears validation_tokens
- */
-export interface CommitMessage {
-    process_id: OutPoint;
-    pcd_commitment: PcdCommitments;
-    roles: Roles;
-    public_data: Pcd;
-    validation_tokens: Proof[];
-    error: AnkError | null;
-}
-
-export type AnkFlag = "NewTx" | "Faucet" | "Cipher" | "Commit" | "Handshake" | "Sync" | "Unknown";
-
-export type TsUnsignedTransaction = SilentPaymentUnsignedTransaction;
-
-export interface SecretsStore {
-    shared_secrets: Record<SilentPaymentAddress, AnkSharedSecretHash>;
-    unconfirmed_secrets: AnkSharedSecretHash[];
-}
-
-/**
- * A process is basically a succession of states
- * The latest state MUST be an empty state with only the commited_in field set at the last unspent outpoint
- * Commiting this last empty state in a transaction is called obliterating a process, basically terminating it
- */
-export interface Process {
-    states: ProcessState[];
-}
-
-export interface ProcessState {
-    commited_in: OutPoint;
-    pcd_commitment: Record<string, string>;
-    state_id: string;
-    keys: Record<string, string>;
-    validation_tokens: Proof[];
-    public_data: Pcd;
-    roles: Record<string, RoleDefinition>;
-}
-
-export type Roles = Record<string, RoleDefinition>;
-
-export interface RoleDefinition {
-    members: OutPoint[];
-    validation_rules: ValidationRule[];
-    storages: string[];
-}
-
-export interface ValidationRule {
-    quorum: number;
-    fields: string[];
-    min_sig_member: number;
-}
-
-export type PcdCommitments = Record<string, string>;
-
-export type Pcd = Record<string, number[]>;
-
-export interface Member {
-    sp_addresses: string[];
-}
-

pkg/sdk_client.js

@@ -1,5 +0,0 @@
-import * as wasm from "./sdk_client_bg.wasm";
-export * from "./sdk_client_bg.js";
-import { __wbg_set_wasm } from "./sdk_client_bg.js";
-__wbg_set_wasm(wasm);
-wasm.__wbindgen_start();

pkg/sdk_client_bg.wasm.d.ts

@@ -1,73 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-export const memory: WebAssembly.Memory;
-export const setup: () => void;
-export const get_address: () => [number, number, number, number];
-export const get_member: () => [number, number, number];
-export const restore_device: (a: any) => [number, number];
-export const create_device_from_sp_wallet: (a: number, b: number) => [number, number, number, number];
-export const create_new_device: (a: number, b: number, c: number) => [number, number, number, number];
-export const scan_blocks: (a: number, b: number, c: number) => any;
-export const is_paired: () => [number, number, number];
-export const pair_device: (a: number, b: number, c: number, d: number) => [number, number];
-export const unpair_device: () => [number, number];
-export const dump_wallet: () => [number, number, number, number];
-export const reset_shared_secrets: () => [number, number];
-export const set_shared_secrets: (a: number, b: number) => [number, number];
-export const get_pairing_process_id: () => [number, number, number, number];
-export const dump_device: () => [number, number, number];
-export const dump_neutered_device: () => [number, number, number];
-export const reset_device: () => [number, number];
-export const get_txid: (a: number, b: number) => [number, number, number, number];
-export const get_prevouts: (a: number, b: number) => [number, number, number, number];
-export const get_opreturn: (a: number, b: number) => [number, number, number, number];
-export const process_commit_new_state: (a: any, b: number, c: number, d: number, e: number) => [number, number, number];
-export const parse_new_tx: (a: number, b: number, c: number, d: any) => [number, number, number];
-export const parse_cipher: (a: number, b: number, c: any, d: any) => [number, number, number];
-export const get_outputs: () => [number, number, number];
-export const get_available_amount: () => [bigint, number, number];
-export const create_transaction: (a: number, b: number, c: number) => [number, number, number];
-export const sign_transaction: (a: any) => [number, number, number];
-export const create_new_process: (a: any, b: any, c: any, d: number, e: number, f: number, g: any) => [number, number, number];
-export const update_process: (a: any, b: any, c: any, d: any, e: any) => [number, number, number];
-export const request_data: (a: number, b: number, c: number, d: number, e: any, f: any) => [number, number, number];
-export const create_update_message: (a: any, b: number, c: number, d: any) => [number, number, number];
-export const validate_state: (a: any, b: number, c: number, d: any) => [number, number, number];
-export const refuse_state: (a: any, b: number, c: number, d: any) => [number, number, number];
-export const evaluate_state: (a: any, b: number, c: number, d: any) => [number, number, number];
-export const create_response_prd: (a: any, b: number, c: number, d: any) => [number, number, number];
-export const create_faucet_msg: () => [number, number, number, number];
-export const get_storages: (a: number, b: number) => [number, number, number, number];
-export const is_child_role: (a: number, b: number, c: number, d: number) => [number, number];
-export const decrypt_data: (a: number, b: number, c: number, d: number) => [number, number, number, number];
-export const encode_binary: (a: any) => [number, number, number];
-export const encode_json: (a: any) => [number, number, number];
-export const decode_value: (a: number, b: number) => [number, number, number];
-export const hash_value: (a: any, b: number, c: number, d: number, e: number) => [number, number, number, number];
-export const get_merkle_proof: (a: any, b: number, c: number) => [number, number, number];
-export const validate_merkle_proof: (a: any, b: number, c: number) => [number, number, number];
-export const rust_zstd_wasm_shim_qsort: (a: number, b: number, c: number, d: number) => void;
-export const rust_zstd_wasm_shim_malloc: (a: number) => number;
-export const rust_zstd_wasm_shim_memcmp: (a: number, b: number, c: number) => number;
-export const rust_zstd_wasm_shim_calloc: (a: number, b: number) => number;
-export const rust_zstd_wasm_shim_free: (a: number) => void;
-export const rust_zstd_wasm_shim_memcpy: (a: number, b: number, c: number) => number;
-export const rust_zstd_wasm_shim_memmove: (a: number, b: number, c: number) => number;
-export const rust_zstd_wasm_shim_memset: (a: number, b: number, c: number) => number;
-export const rustsecp256k1_v0_9_2_context_create: (a: number) => number;
-export const rustsecp256k1_v0_9_2_context_destroy: (a: number) => void;
-export const rustsecp256k1_v0_9_2_default_illegal_callback_fn: (a: number, b: number) => void;
-export const rustsecp256k1_v0_9_2_default_error_callback_fn: (a: number, b: number) => void;
-export const __wbindgen_malloc: (a: number, b: number) => number;
-export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
-export const __wbindgen_exn_store: (a: number) => void;
-export const __externref_table_alloc: () => number;
-export const __wbindgen_export_4: WebAssembly.Table;
-export const __wbindgen_export_5: WebAssembly.Table;
-export const __externref_table_dealloc: (a: number) => void;
-export const __wbindgen_free: (a: number, b: number, c: number) => void;
-export const __externref_drop_slice: (a: number, b: number) => void;
-export const wasm_bindgen__convert__closures_____invoke__hc142e2252e76ee8b: (a: number, b: number) => void;
-export const closure681_externref_shim: (a: number, b: number, c: any) => void;
-export const closure1281_externref_shim: (a: number, b: number, c: any, d: any) => void;
-export const __wbindgen_start: () => void;

public/authorized-client.html

@@ -1,111 +0,0 @@
-<!doctype html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Redirection en cours…</title>
-    <style>
-      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 2rem; color: #0a0a0a; }
-      .box { max-width: 720px; margin: 10vh auto; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-      .muted { color: #6b7280; font-size: .95rem; }
-      .error { color: #b91c1c; }
-      .ok { color: #065f46; }
-      code { background: #f3f4f6; padding: .2rem .35rem; border-radius: 6px; }
-      a { color: #006BE0; text-decoration: none; }
-    </style>
-  </head>
-  <body>
-    <div class="box">
-      <h1>Connexion IdNot</h1>
-      <p class="muted" id="status">Traitement du code d'autorisation…</p>
-      <pre class="muted" id="details" style="white-space: pre-wrap"></pre>
-    </div>
-
-    <script>
-      (function () {
-        function getQueryParam(name) {
-          const params = new URLSearchParams(location.search);
-          return params.get(name);
-        }
-
-        function setCookie(name, value, days) {
-          const expires = new Date(Date.now() + days * 864e5).toUTCString();
-          // Domaine implicite: dev4.4nkweb.com (hébergement de cette page)
-          document.cookie = name + '=' + encodeURIComponent(value) + '; Path=/; Expires=' + expires + '; SameSite=None; Secure';
-        }
-
-        async function main() {
-          const code = getQueryParam('code');
-          const statusEl = document.getElementById('status');
-          const detailsEl = document.getElementById('details');
-
-          if (!code) {
-            statusEl.textContent = 'Aucun code reçu dans la redirection IdNot.';
-            statusEl.className = 'error';
-            detailsEl.textContent = 'Paramètre attendu: ?code=…\nRetour à l\'espace: https://dev4.4nkweb.com/lecoffre/';
-            return;
-          }
-
-          try {
-            const resp = await fetch('https://dev4.4nkweb.com/api/v1/idnot/auth', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Request-ID': 'bridge_' + Math.random().toString(36).slice(2)
-              },
-              body: JSON.stringify({ code })
-            });
-
-            const text = await resp.text();
-            let data;
-            try { data = JSON.parse(text); } catch (_) { data = null; }
-
-            if (!resp.ok) {
-              statusEl.textContent = 'Connexion refusée (' + resp.status + ').';
-              statusEl.className = 'error';
-              detailsEl.textContent = (data && data.error && data.error.message) ? data.error.message : text;
-              // Redirige néanmoins vers le front avec état d\'erreur afin d\'afficher un message utilisateur.
-              setTimeout(function(){ location.replace('https://dev4.4nkweb.com/lecoffre/authorized-bridge#error=' + encodeURIComponent(String(resp.status))); }, 600);
-              return;
-            }
-
-            // Attendu: { idNotUser, authToken }
-            if (!data || !data.authToken) {
-              statusEl.textContent = 'Réponse invalide du serveur.';
-              statusEl.className = 'error';
-              detailsEl.textContent = text;
-              setTimeout(function(){ location.replace('https://dev4.4nkweb.com/lecoffre/authorized-bridge#error=invalid_response'); }, 800);
-              return;
-            }
-
-            // Stocker le jeton pour le domaine dev4 (utilisé par le front)
-            setCookie('leCoffreAccessToken', data.authToken, 1);
-
-            statusEl.textContent = 'Connexion réussie, redirection…';
-            statusEl.className = 'ok';
-            detailsEl.textContent = '';
-
-            // Redirection vers le front avec token en hash en sauvegarde
-            location.replace('https://dev4.4nkweb.com/lecoffre/authorized-bridge#token=' + encodeURIComponent(data.authToken));
-          } catch (e) {
-            statusEl.textContent = 'Erreur réseau lors de la connexion.';
-            statusEl.className = 'error';
-            detailsEl.textContent = String(e && e.message || e);
-            setTimeout(function(){ location.replace('https://dev4.4nkweb.com/lecoffre/authorized-bridge#error=network'); }, 1000);
-          }
-        }
-
-        main();
-      })();
-    </script>
-  </body>
-  </html>
-
-
-
-
-
-
-
-

public/style/4nk.css

@@ -77,99 +77,6 @@ body {
     position: relative;
   }
 
-  /* Confirmation Modal Styles */
-  #confirmation-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-  }
-
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    width: 90%;
-    max-width: 500px;
-    max-height: 80vh;
-    overflow-y: auto;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-
-  .modal-confirmation {
-    text-align: left;
-    padding: 10px;
-  }
-
-  .modal-confirmation h3 {
-    margin-bottom: 15px;
-    color: var(--primary-color);
-    font-size: 1.1em;
-  }
-
-  .modal-confirmation p {
-    margin: 8px 0;
-    font-size: 0.9em;
-    line-height: 1.4;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
-    padding-top: 15px;
-    border-top: 1px solid #eee;
-  }
-
-  .modal-footer button {
-    padding: 8px 16px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-size: 0.9em;
-  }
-
-  .btn-primary {
-    background: var(--primary-color);
-    color: white;
-  }
-
-  .btn-secondary {
-    background: var(--secondary-color);
-    color: white;
-  }
-
-  /* Responsive adjustments */
-  @media only screen and (max-width: 600px) {
-    .modal-content {
-      width: 95%;
-      margin: 10px;
-      padding: 15px;
-    }
-
-    .modal-confirmation h3 {
-      font-size: 1em;
-    }
-
-    .modal-confirmation p {
-      font-size: 0.85em;
-    }
-  }
 
   .nav-wrapper {
     position: fixed;

public/style/account.css

@@ -427,43 +427,24 @@ body {
 
 /* Style pour la modal de confirmation */
 .confirm-delete-modal {
+    display: none;
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.confirm-delete-content {
-    background-color: white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    max-width: 400px;
-    width: 90%;
+    z-index: 1100;
     text-align: center;
 }
 
-.confirm-delete-content h3 {
-    margin-top: 0;
-    color: #333;
-}
-
-.confirm-delete-content p {
-    margin: 15px 0;
-    color: #666;
-}
-
 .confirm-delete-buttons {
+    margin-top: 20px;
     display: flex;
     justify-content: center;
     gap: 10px;
-    margin-top: 20px;
 }
 
 .confirm-delete-buttons button {
@@ -471,27 +452,25 @@ body {
     border: none;
     border-radius: 4px;
     cursor: pointer;
-    transition: background-color 0.3s;
 }
 
-.confirm-delete-buttons .confirm-btn {
+.confirm-btn {
     background-color: #dc3545;
     color: white;
 }
 
-.confirm-delete-buttons .confirm-btn:hover {
-    background-color: #c82333;
-}
-
-.confirm-delete-buttons .cancel-btn {
+.cancel-btn {
     background-color: #6c757d;
     color: white;
 }
 
-.confirm-delete-buttons .cancel-btn:hover {
-    background-color: #5a6268;
+.delete-account-section {
+    border-top: 1px solid #eee;
+    padding-top: 15px;
+    margin-top: 15px;
 }
 
+
 /*-------------------------------------- Export--------------------------------------*/
 .export-section {
     margin: 20px 0;
@@ -1444,64 +1423,3 @@ body {
     font-size: 12px;
     color: #666;
 }
-
-.pairing-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.pairing-modal-content {
-    background-color: white;
-    padding: 2rem;
-    border-radius: 8px;
-    width: 90%;
-    max-width: 500px;
-}
-
-.pairing-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.form-group label {
-    font-weight: bold;
-}
-
-.button-group {
-    display: flex;
-    gap: 1rem;
-    justify-content: flex-end;
-    margin-top: 1rem;
-}
-
-.button-group button {
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.confirm-button {
-    background-color: var(--accent-color);
-    color: white;
-    border: none;
-}
-
-.cancel-button {
-    background-color: #ccc;
-    border: none;
-}

src/components/header/header.ts

@@ -9,7 +9,7 @@ let notifications = [];
 export async function unpair() {
   const service = await Services.getInstance();
   await service.unpairDevice();
-  await navigate('home');
+  navigate('home');
 }
 
 (window as any).unpair = unpair;
@@ -28,7 +28,7 @@ function toggleMenu() {
 
 async function getNotifications() {
   const service = await Services.getInstance();
-  notifications = service.getNotifications() || [];
+  notifications = service.getNotifications();
   return notifications;
 }
 function openCloseNotifications() {
@@ -102,8 +102,8 @@ async function setNotification(notifications: any[]): Promise<void> {
 
 async function fetchNotifications() {
   const service = await Services.getInstance();
-  const data = service.getNotifications() || [];
-  await setNotification(data);
+  const data = service.getNotifications();
+  setNotification(data);
 }
 
 async function loadUserProfile() {
@@ -204,7 +204,7 @@ async function disconnect() {
     await Promise.all(registrations.map(registration => registration.unregister()));
     console.log('Service worker unregistered');
 
-    await navigate('home');
+    navigate('home');
 
     setTimeout(() => {
       window.location.href = window.location.origin;

src/components/modal/confirmation-modal.ts

@@ -1,9 +1,9 @@
 import ModalService from '../../services/modal.service';
 
 const modalService = await ModalService.getInstance();
-// export async function confirm() {
-//   modalService.confirmPairing();
-// }
+export async function confirm() {
+  modalService.confirmPairing();
+}
 
 export async function closeConfirmationModal() {
   modalService.closeConfirmationModal();

src/components/qrcode-scanner/qrcode-scanner-component.ts

@@ -55,7 +55,7 @@ export default class QrScannerComponent extends HTMLElement {
     if (spAddress) {
       // Call the sendPairingTx function with the extracted sp_address
       try {
-        await prepareAndSendPairingTx();
+        await prepareAndSendPairingTx(spAddress);
       } catch (e) {
         console.error('Failed to pair:', e);
       }

src/components/validation-rule-modal/validation-rule-modal.html

@@ -1,42 +0,0 @@
-<div id="validation-rule-modal" style="
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.5);
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-">
-  <div style="
-    background: white;
-    padding: 2rem;
-    border-radius: 0.5rem;
-    width: 400px;
-    max-width: 90%;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-  ">
-    <h2 style="font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem;">
-      Add Validation Rule
-    </h2>
-
-    <label style="display: block; margin-bottom: 0.5rem;">
-      Quorum:
-      <input id="vr-quorum" type="number" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
-    </label>
-
-    <label style="display: block; margin-bottom: 0.5rem;">
-      Min Sig Member:
-      <input id="vr-minsig" type="number" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
-    </label>
-
-    <label style="display: block; margin-bottom: 1rem;">
-      Fields (comma-separated):
-      <input id="vr-fields" type="text" placeholder="e.g. field1, field2" style="width: 100%; padding: 0.5rem; margin-top: 0.25rem;" />
-    </label>
-
-    <div style="display: flex; justify-content: flex-end; gap: 1rem;">
-      <button id="vr-cancel" style="padding: 0.5rem 1rem;">Cancel</button>
-      <button id="vr-submit" style="padding: 0.5rem 1rem; background-color: #4f46e5; color: white; border: none; border-radius: 0.375rem;">Add</button>
-    </div>
-  </div>
-</div>

src/components/validation-rule-modal/validation-rule-modal.ts

@@ -1,61 +0,0 @@
-export interface ValidationRule {
-  quorum: number;
-  fields: string[];
-  min_sig_member: number;
-}
-
-/**
- * Loads and injects the modal HTML into the document if not already loaded.
- */
-export async function loadValidationRuleModal(templatePath: string = '/src/components/validation-rule-modal/validation-rule-modal.html') {
-  if (document.getElementById('validation-rule-modal')) return;
-
-  const res = await fetch(templatePath);
-  const html = await res.text();
-
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = html;
-
-  const modal = tempDiv.querySelector('#validation-rule-modal');
-  if (!modal) {
-    throw new Error('Modal HTML missing #validation-rule-modal');
-  }
-
-  document.body.appendChild(modal);
-}
-
-/**
- * Opens the modal and lets the user input a ValidationRule.
- * Calls the callback with the constructed rule on submit.
- */
-export function showValidationRuleModal(onSubmit: (rule: ValidationRule) => void) {
-  const modal = document.getElementById('validation-rule-modal')!;
-  const quorumInput = document.getElementById('vr-quorum') as HTMLInputElement;
-  const minsigInput = document.getElementById('vr-minsig') as HTMLInputElement;
-  const fieldsInput = document.getElementById('vr-fields') as HTMLInputElement;
-
-  const cancelBtn = document.getElementById('vr-cancel')!;
-  const submitBtn = document.getElementById('vr-submit')!;
-
-  // Reset values
-  quorumInput.value = '';
-  minsigInput.value = '';
-  fieldsInput.value = '';
-
-  modal.style.display = 'flex';
-
-  cancelBtn.onclick = () => {
-    modal.style.display = 'none';
-  };
-
-  submitBtn.onclick = () => {
-    const rule: ValidationRule = {
-      quorum: parseInt(quorumInput.value),
-      min_sig_member: parseInt(minsigInput.value),
-      fields: fieldsInput.value.split(',').map(f => f.trim()).filter(Boolean),
-    };
-
-    modal.style.display = 'none';
-    onSubmit(rule);
-  };
-}

src/index.ts

@@ -1,3 +1,39 @@
-export { default as Services } from './services/service';
-export { default as Database } from './services/database.service';
-export { MessageType } from './models/process.model';
+// import Services from './services/service';
+
+// document.addEventListener('DOMContentLoaded', async () => {
+//     try {
+
+//         const services = await Services.getInstance();
+//         setTimeout( async () => {
+//             let device = await services.getDevice()
+//             console.log("🚀 ~ setTimeout ~ device:", device)
+
+//             if(!device) {
+//                     device = await services.createNewDevice();
+//                 } else {
+//                     await services.restoreDevice(device)
+//                 }
+//                 await services.restoreProcesses();
+//                 await services.restoreMessages();
+
+//                 const amount = await services.getAmount();
+
+//                 if (amount === 0n) {
+//                     const faucetMsg = await services.createFaucetMessage();
+//                     await services.sendFaucetMessage(faucetMsg);
+//                 }
+//                 if (services.isPaired()) { await services.injectProcessListPage() }
+//                 else {
+//                     const queryString = window.location.search;
+//                     const urlParams = new URLSearchParams(queryString)
+//                     const pairingAddress = urlParams.get('sp_address')
+
+//                     if(pairingAddress) {
+//                         setTimeout(async () => await services.sendPairingTx(pairingAddress), 2000)
+//                     }
+//                 }
+//         }, 500);
+//     } catch (error) {
+//         console.error(error);
+//     }
+// });

src/main.ts

@@ -1,18 +1,18 @@
 import { SignatureComponent } from './pages/signature/signature-component';
 import { SignatureElement } from './pages/signature/signature';
-/*import { ChatComponent } from './pages/chat/chat-component';
-import { ChatElement } from './pages/chat/chat';*/
+import { ChatComponent } from './pages/chat/chat-component';
+import { ChatElement } from './pages/chat/chat';
 import { AccountComponent } from './pages/account/account-component';
 import { AccountElement } from './pages/account/account';
 
-export { SignatureComponent, SignatureElement, AccountComponent, AccountElement };
+export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
 
 declare global {
   interface HTMLElementTagNameMap {
     'signature-component': SignatureComponent;
     'signature-element': SignatureElement;
-    /*'chat-component': ChatComponent;
-    'chat-element': ChatElement;*/
+    'chat-component': ChatComponent;
+    'chat-element': ChatElement;
     'account-component': AccountComponent;
     'account-element': AccountElement;
   }
@@ -23,8 +23,8 @@ if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) {
   // Initialiser les composants si nécessaire
   customElements.define('signature-component', SignatureComponent);
   customElements.define('signature-element', SignatureElement);
-  /*customElements.define('chat-component', ChatComponent);
-  customElements.define('chat-element', ChatElement);*/
+  customElements.define('chat-component', ChatComponent);
+  customElements.define('chat-element', ChatElement);
   customElements.define('account-component', AccountComponent);
   customElements.define('account-element', AccountElement);
 }

src/models/backup.model.ts

@@ -1,4 +1,4 @@
-import { Device, Process, SecretsStore } from ".././pkg/sdk_client.js";
+import { Device, Process, SecretsStore } from "pkg/sdk_client";
 
 export interface BackUp {
     device: Device,

src/models/process.model.ts

@@ -21,45 +21,3 @@ export interface INotification {
   sendToNotificationPage?: boolean;
   path?: string;
 }
-
-export enum MessageType {
-  // Establish connection and keep alive
-  LISTENING = 'LISTENING',
-  REQUEST_LINK = 'REQUEST_LINK',
-  LINK_ACCEPTED = 'LINK_ACCEPTED',
-  CREATE_PAIRING = 'CREATE_PAIRING',
-  PAIRING_CREATED = 'PAIRING_CREATED',
-  ERROR = 'ERROR',
-  VALIDATE_TOKEN = 'VALIDATE_TOKEN',
-  RENEW_TOKEN = 'RENEW_TOKEN',
-  // Get various information
-  GET_PAIRING_ID = 'GET_PAIRING_ID',
-  GET_PROCESSES = 'GET_PROCESSES',
-  GET_MY_PROCESSES = 'GET_MY_PROCESSES',
-  PROCESSES_RETRIEVED = 'PROCESSES_RETRIEVED',
-  RETRIEVE_DATA = 'RETRIEVE_DATA',
-  DATA_RETRIEVED = 'DATA_RETRIEVED',
-  DECODE_PUBLIC_DATA = 'DECODE_PUBLIC_DATA',
-  PUBLIC_DATA_DECODED = 'PUBLIC_DATA_DECODED',
-  GET_MEMBER_ADDRESSES = 'GET_MEMBER_ADDRESSES',
-  MEMBER_ADDRESSES_RETRIEVED = 'MEMBER_ADDRESSES_RETRIEVED',
-  // Processes
-  CREATE_PROCESS = 'CREATE_PROCESS',
-  PROCESS_CREATED = 'PROCESS_CREATED',
-  UPDATE_PROCESS = 'UPDATE_PROCESS',
-  PROCESS_UPDATED = 'PROCESS_UPDATED',
-  NOTIFY_UPDATE = 'NOTIFY_UPDATE',
-  UPDATE_NOTIFIED = 'UPDATE_NOTIFIED',
-  VALIDATE_STATE = 'VALIDATE_STATE',
-  STATE_VALIDATED = 'STATE_VALIDATED',
-  // Hash and merkle proof
-  HASH_VALUE = 'HASH_VALUE',
-  VALUE_HASHED = 'VALUE_HASHED',
-  GET_MERKLE_PROOF = 'GET_MERKLE_PROOF',
-  MERKLE_PROOF_RETRIEVED = 'MERKLE_PROOF_RETRIEVED',
-  VALIDATE_MERKLE_PROOF = 'VALIDATE_MERKLE_PROOF',
-  MERKLE_PROOF_VALIDATED = 'MERKLE_PROOF_VALIDATED',
-  // Account management
-  ADD_DEVICE = 'ADD_DEVICE',
-  DEVICE_ADDED = 'DEVICE_ADDED',
-}

src/pages/account/account.ts

@@ -20,25 +20,23 @@ declare global {
         updateNavbarBanner: (bannerUrl: string) => void;
         saveBannerToLocalStorage: (bannerUrl: string) => void;
         loadSavedBanner: () => void;
-        cancelAddRowPairing: () => void;
+        cancelAddRow: () => void;
         saveName: (cell: HTMLElement, input: HTMLInputElement) => void;
         showProcessNotifications: (processName: string) => void;
         handleLogout: () => void;
         initializeEventListeners: () => void;
         showProcess: () => void;
-        showProcessCreation: () => void;
-        showDocumentValidation: () => void;
         updateNavbarName: (name: string) => void;
         updateNavbarLastName: (lastName: string) => void;
         showAlert: (title: string, text?: string, icon?: string) => void;
-        addRowPairing: () => void;
-        confirmRowPairing: () => void;
-        cancelRowPairing: () => void;
-        deleteRowPairing: (button: HTMLButtonElement) => void;
+        addRow: () => void;
+        confirmRow: () => void;
+        cancelRow: () => void;
+        deleteRow: (button: HTMLButtonElement) => void;
         generateRecoveryWords: () => string[];
         exportUserData: () => void;
         updateActionButtons: () => void;
-        showQRCodeModal: (pairingId: string) => void;
+        showQRCodeModal: (address: string) => void;
     }
 }
 
@@ -49,31 +47,11 @@ import { addressToEmoji } from '../../utils/sp-address.utils';
 import { getCorrectDOM } from '../../utils/document.utils';
 import accountStyle from '../../../public/style/account.css?inline';
 import Services from '../../services/service';
-import { getProcessCreation } from './process-creation';
-import { getDocumentValidation } from './document-validation';
-import { createProcessTab } from './process';
 
 let isAddingRow = false;
 let currentRow: HTMLTableRowElement | null = null;
 let currentMode: keyof typeof STORAGE_KEYS = 'pairing';
 
-interface Process {
-    states: Array<{
-        committed_in: string;
-        keys: {};
-        pcd_commitment: {
-            counter: string;
-        };
-        public_data: {
-            memberPublicName?: string;
-        };
-        roles: {
-            pairing?: {};
-        };
-        state_id: string;
-        validation_tokens: Array<any>;
-    }>;
-}
 
 class AccountElement extends HTMLElement {
     private dom: Node;
@@ -163,7 +141,7 @@ class AccountElement extends HTMLElement {
                     <!-- User Info Section -->
                     <div class="popup-info">
                         <p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
-                        <!--<p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>-->
+                        <p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
                         <p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
                     </div>
 
@@ -176,22 +154,18 @@ class AccountElement extends HTMLElement {
 
             </ul>
             <ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul>
-            <!-- <ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul> -->
+            <ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul>
             <ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul>
-            <ul class="parameter-list-ul" onclick="window.showProcessCreation()">Process Creation</ul>
-            <ul class="parameter-list-ul" onclick="window.showDocumentValidation()">Document Validation</ul>
-            <!-- <ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul> -->
+            <ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul>
         </div>
 
         <!-- Parameter Area -->
         <div class="parameter-area">
             <div class="content-container">
                 <div id="pairing-content"></div>
-                <!-- <div id="wallet-content"></div> -->
-                <div id="process-content"></div>    
-                <div id="process-creation-content"></div>    
-                <div id="document-validation-content"></div>    
-                <!-- <div id="data-content"></div> -->
+                <div id="wallet-content"></div>
+                <div id="process-content"></div>
+                <div id="data-content"></div>
             </div>
         </div>
     </div>
@@ -201,8 +175,6 @@ class AccountElement extends HTMLElement {
         window.showPairing = () => this.showPairing();
         window.showWallet = () => this.showWallet();
         window.showProcess = () => this.showProcess();
-        window.showProcessCreation = () => this.showProcessCreation();
-        window.showDocumentValidation = () => this.showDocumentValidation();
         window.showData = () => this.showData();
         window.addWalletRow = () => this.addWalletRow();
         window.confirmWalletRow = () => this.confirmWalletRow();
@@ -212,10 +184,10 @@ class AccountElement extends HTMLElement {
         window.handleLogout = () => this.handleLogout();
         window.confirmDeleteAccount = () => this.confirmDeleteAccount();
         window.showContractPopup = (contractId: string) => this.showContractPopup(contractId);
-        window.addRowPairing = () => this.addRowPairing();
-        window.deleteRowPairing = (button: HTMLButtonElement) => this.deleteRowPairing(button);
-        window.confirmRowPairing = () => this.confirmRowPairing();
-        window.cancelRowPairing = () => this.cancelRowPairing();
+        window.addRow = () => this.addRow();
+        window.deleteRow = (button: HTMLButtonElement) => this.deleteRow(button);
+        window.confirmRow = () => this.confirmRow();
+        window.cancelRow = () => this.cancelRow();
         window.updateNavbarBanner = (bannerUrl: string) => this.updateNavbarBanner(bannerUrl);
         window.saveBannerToLocalStorage = (bannerUrl: string) => this.saveBannerToLocalStorage(bannerUrl);
         window.loadSavedBanner = () => this.loadSavedBanner();
@@ -227,7 +199,7 @@ class AccountElement extends HTMLElement {
         window.updateActionButtons = () => this.updateActionButtons();
         window.openAvatarPopup = () => this.openAvatarPopup();
         window.closeAvatarPopup = () => this.closeAvatarPopup();
-        window.showQRCodeModal = (pairingId: string) => this.showQRCodeModal(pairingId);
+        window.showQRCodeModal = (address: string) => this.showQRCodeModal(address);
 
         if (!localStorage.getItem('rows')) {
             localStorage.setItem('rows', JSON.stringify(defaultRows));
@@ -516,7 +488,7 @@ private getConfirmFunction(): string {
         case 'process':
             return 'window.confirmProcessRow()';
         default:
-            return 'window.confirmRowPairing()';
+            return 'window.confirmRow()';
     }
 }
 
@@ -527,94 +499,50 @@ private getCancelFunction(): string {
         case 'process':
             return 'window.cancelProcessRow()';
         default:
-            return 'window.cancelRowPairing()';
+            return 'window.cancelRow()';
     }
 }
 
 // Fonctions de gestion des tableaux
-private async addRowPairing(): Promise<void> {
+private addRow(): void {
     if (isAddingRow) return;
+
     isAddingRow = true;
+    const table = this.shadowRoot?.querySelector<HTMLTableElement>('#pairing-table tbody');
+    if (!table) return;
 
-    // Créer la popup
-    const modal = document.createElement('div');
-    modal.className = 'pairing-modal';
-    modal.innerHTML = `
-        <div class="pairing-modal-content">
-            <h3>Add New Device</h3>
-            <div class="pairing-form">
-                <div class="form-group">
-                    <label for="sp-address">SP Address</label>
-                    <input type="text" id="sp-address" class="edit-input" placeholder="Enter SP Address">
-                </div>
-                <div class="form-group">
-                    <label for="device-name">Device Name</label>
-                    <input type="text" id="device-name" class="edit-input" placeholder="Enter Device Name">
-                </div>
-                <div class="form-group">
-                    <label for="sp-emojis">SP Emojis</label>
-                    <input type="text" id="sp-emojis" class="edit-input" readonly>
-                </div>
-                <div class="button-group">
-                    <button class="confirm-button">Confirm</button>
-                    <button class="cancel-button">Cancel</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    this.shadowRoot?.appendChild(modal);
-
-    // Ajouter les event listeners
-    const spAddressInput = modal.querySelector('#sp-address') as HTMLInputElement;
-    const spEmojisInput = modal.querySelector('#sp-emojis') as HTMLInputElement;
-    const deviceNameInput = modal.querySelector('#device-name') as HTMLInputElement;
-    const confirmButton = modal.querySelector('.confirm-button');
-    const cancelButton = modal.querySelector('.cancel-button');
-
-    // Mettre à jour les emojis automatiquement
-    spAddressInput?.addEventListener('input', async () => {
-        const emojis = await addressToEmoji(spAddressInput.value);
-        if (spEmojisInput) spEmojisInput.value = emojis;
-    });
-
-    // Gérer la confirmation
-    confirmButton?.addEventListener('click', () => {
-        const spAddress = spAddressInput?.value.trim();
-        const deviceName = deviceNameInput?.value.trim();
-        const spEmojis = spEmojisInput?.value.trim();
-
-        if (!spAddress || !deviceName) {
-            this.showAlert('Please fill in all required fields');
-            return;
+    currentRow = table.insertRow();
+    const cells = ['SP Address', 'Device Name', 'SP Emojis'];
+    
+    cells.forEach((_, index) => {
+        const cell = currentRow!.insertCell();
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'edit-input';
+        
+        // Ajouter un événement pour mettre à jour automatiquement les emojis
+        if (index === 0) { 
+            input.addEventListener('input', async (e) => {
+                const addressInput = e.target as HTMLInputElement;
+                const emojiCell = currentRow!.cells[2]; 
+                const emojis = await addressToEmoji(addressInput.value); 
+                if (emojiCell.querySelector('input')) {
+                    (emojiCell.querySelector('input') as HTMLInputElement).value = emojis;
+                }
+            });
         }
-
-        //if (spAddress.length !== 118) {
-        //    this.showAlert('SP Address must be exactly 118 characters long');
-        //    return;
-        //}
-
-        const newRow: Row = {
-            column1: spAddress,
-            column2: deviceName,
-            column3: spEmojis || ''
-        };
-
-        const storageKey = STORAGE_KEYS[currentMode];
-        const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
-        rows.push(newRow);
-        localStorage.setItem(storageKey, JSON.stringify(rows));
-
-        this.updateTableContent(rows);
-        modal.remove();
-        isAddingRow = false;
+        
+        if (index === 2) { 
+            input.readOnly = true;
+        }
+        
+        cell.appendChild(input);
     });
 
-    // Gérer l'annulation
-    cancelButton?.addEventListener('click', () => {
-        modal.remove();
-        isAddingRow = false;
-    });
+    const deleteCell = currentRow.insertCell();
+    deleteCell.style.width = '40px';
+
+    this.updateActionButtons();
 }
 
 // Fonctions de mise à jour de l'interface
@@ -624,6 +552,7 @@ private updateTableContent(rows: Row[]): void {
 
     tbody.innerHTML = rows.map(row => `
         <tr>
+            <td>${row.column1}</td>
             <td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
             <td>${row.column3}</td>
             <td>
@@ -634,7 +563,7 @@ private updateTableContent(rows: Row[]): void {
                      onclick="window.showQRCodeModal('${encodeURIComponent(row.column1)}')">
             </td>
             <td>
-                <button class="delete-button" onclick="window.deleteRowPairing(this)">
+                <button class="delete-button" onclick="window.deleteRow(this)">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="red">
                         <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/>
                     </svg>
@@ -646,7 +575,7 @@ private updateTableContent(rows: Row[]): void {
 
 
 
-private confirmRowPairing(): void {
+private confirmRow(): void {
     if (!currentRow) return;
 
     const inputs = currentRow.getElementsByTagName('input');
@@ -682,7 +611,7 @@ private confirmRowPairing(): void {
     this.updateTableContent(rows);
 }
 
-private cancelRowPairing(): void {
+private cancelRow(): void {
     if (!currentRow) return;
     
     currentRow.remove();
@@ -697,11 +626,11 @@ private resetButtonContainer(): void {
     if (!buttonContainer) return;
 
     buttonContainer.innerHTML = `
-        <button class="add-row-button button-style" onclick="window.addRowPairing()">Add a line</button>
+        <button class="add-row-button button-style" onclick="window.addRow()">Add a line</button>
     `;
 }
 
-private deleteRowPairing(button: HTMLButtonElement): void {
+private deleteRow(button: HTMLButtonElement): void {
     const row = button.closest('tr');
     if (!row) return;
 
@@ -714,53 +643,21 @@ private deleteRowPairing(button: HTMLButtonElement): void {
         return;
     }
 
-    // Créer la modal de confirmation
-    const modal = document.createElement('div');
-    modal.className = 'confirm-delete-modal';
-    modal.innerHTML = `
-        <div class="confirm-delete-content">
-            <h3>Confirm Deletion</h3>
-            <p>Are you sure you want to delete this device?</p>
-            <div class="confirm-delete-buttons">
-                <button class="cancel-btn">Cancel</button>
-                <button class="confirm-btn">Delete</button>
-            </div>
-        </div>
-    `;
+    const index = Array.from(table.children).indexOf(row);
+    row.style.transition = 'opacity 0.3s, transform 0.3s';
+    row.style.opacity = '0';
+    row.style.transform = 'translateX(-100%)';
 
-    this.shadowRoot?.appendChild(modal);
+    setTimeout(() => {
+        row.remove();
 
-    // Gérer les boutons de la modal
-    const confirmBtn = modal.querySelector('.confirm-btn');
-    const cancelBtn = modal.querySelector('.cancel-btn');
-
-    confirmBtn?.addEventListener('click', () => {
-        // Calculer l'index AVANT de supprimer la ligne du DOM
-        const index = Array.from(table.children).indexOf(row);
         const storageKey = STORAGE_KEYS[currentMode];
         const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
-        
-        // Supprimer du localStorage
         if (index > -1) {
             rows.splice(index, 1);
             localStorage.setItem(storageKey, JSON.stringify(rows));
         }
-
-        // Animation et suppression du DOM
-        row.style.transition = 'opacity 0.3s, transform 0.3s';
-        row.style.opacity = '0';
-        row.style.transform = 'translateX(-100%)';
-
-        setTimeout(() => {
-            row.remove();
-        }, 300);
-
-        modal.remove();
-    });
-
-    cancelBtn?.addEventListener('click', () => {
-        modal.remove();
-    });
+    }, 300);
 }
 
 private editDeviceName(cell: HTMLTableCellElement): void {
@@ -785,7 +682,7 @@ private editDeviceName(cell: HTMLTableCellElement): void {
     input.focus();
 }
 
-private async finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): Promise<void> {
+private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void {
     const newValue = input.value.trim();
     if (newValue === '') {
         cell.textContent = cell.getAttribute('data-original-value') || '';
@@ -793,25 +690,24 @@ private async finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement)
         return;
     }
 
-    try {
-        const service = await Services.getInstance();
-        const pairingProcessId = service.getPairingProcessId();
-        const process = await service.getProcess(pairingProcessId);
-        
-        // Mettre à jour le nom via le service
-        await service.updateMemberPublicName(process, newValue);
+    const row = cell.closest('tr');
+    if (!row) return;
 
-        // Mettre à jour l'interface
-        cell.textContent = newValue;
-        cell.classList.remove('editing');
-    } catch (error) {
-        console.error('Failed to update name:', error);
-        // Restaurer l'ancienne valeur en cas d'erreur
-        cell.textContent = cell.getAttribute('data-original-value') || '';
-        cell.classList.remove('editing');
+    const table = row.closest('tbody');
+    if (!table) return;
+
+    const index = Array.from(table.children).indexOf(row);
+    const storageKey = STORAGE_KEYS[currentMode];
+    const rows: Row[] = JSON.parse(localStorage.getItem(storageKey) || '[]');
+    
+    if (rows[index]) {
+        rows[index].column2 = newValue;
+        localStorage.setItem(storageKey, JSON.stringify(rows));
     }
-}
 
+    cell.textContent = newValue;
+    cell.classList.remove('editing');
+}
 // Fonction pour gérer le téléchargement de l'avatar
 private handleAvatarUpload(event: Event): void {
     const input = event.target as HTMLInputElement;
@@ -833,62 +729,63 @@ private handleAvatarUpload(event: Event): void {
     }
 }
 
-private async showProcessCreation(): Promise<void> {
+
+private showProcess(): void {
+    //console.log("showProcess called");
+    currentMode = 'process';
     this.hideAllContent();
-    const container = this.shadowRoot?.getElementById('process-creation-content');
-    if (container) {
-        getProcessCreation(container);
+    
+    const headerTitle = this.shadowRoot?.getElementById('header-title');
+    if (headerTitle) headerTitle.textContent = 'Process';
+    
+    const processContent = this.shadowRoot?.getElementById('process-content');
+    if (processContent) {
+        processContent.style.display = 'block';
+        processContent.innerHTML = `
+            <div class="parameter-header" id="parameter-header">Process</div>
+            <div class="table-container">
+                <table class="parameter-table" id="process-table">
+                    <thead>
+                        <tr>
+                            <th>Process Name</th>
+                            <th>Role</th>
+                            <th>Notifications</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        `;
+        
+        
+        this.updateProcessTableContent(mockProcessRows);
     }
 }
 
-private async showDocumentValidation(): Promise<void> {
-    this.hideAllContent();
-    const container = this.shadowRoot?.getElementById('document-validation-content');
-    if (container) {
-        getDocumentValidation(container);
-    }
+// Fonction utilitaire pour mettre à jour le contenu du tableau Process
+private updateProcessTableContent(rows: any[]): void {
+    const tbody = this.shadowRoot?.querySelector('#process-table tbody');
+    if (!tbody) return;
+
+    tbody.innerHTML = rows.map(row => `
+        <tr>
+            <td>${row.process}</td>
+            <td>${row.role}</td>
+            <td>
+                <div class="notification-container" onclick="window.showProcessNotifications('${row.process}')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
+                        <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
+                    </svg>
+                    <span class="notification-count" data-process="${row.process}">
+                        ${row.notification?.messages?.filter((m: any) => !m.read).length || 0}/${row.notification?.messages?.length || 0}
+                    </span>
+                </div>
+            </td>
+        </tr>
+    `).join('');
 }
 
-private async showProcess(): Promise<void> {
-    this.hideAllContent();
-    const container = this.shadowRoot?.getElementById('process-content');
-    if (container) {
-        const service = await Services.getInstance();
-        const myProcesses = await service.getMyProcesses();
-        if (myProcesses && myProcesses.length != 0) {
-            const myProcessesDataUnfiltered: { name: string, publicData: Record<string, any> }[] = await Promise.all(myProcesses.map(async processId => {
-                const process = await service.getProcess(processId);
-                const lastState = service.getLastCommitedState(process);
-                if (!lastState) {
-                    return {
-                        name: '',
-                        publicData: {}
-                    };
-                }
-                const description = await service.decryptAttribute(processId, lastState, 'description');
-                const name = description ? description : 'N/A';
-                const publicData = await service.getPublicData(process);
-                if (!publicData) {
-                    return {
-                        name: '',
-                        publicData: {}
-                    };
-                }
-                return {
-                    name: name,
-                    publicData: publicData
-                };
-            }));
-            const myProcessesData = myProcessesDataUnfiltered.filter(
-                (p) => p.name !== '' && Object.keys(p.publicData).length != 0
-            );
 
-            createProcessTab(container, myProcessesData);
-        } else {
-            createProcessTab(container, []);
-        }
-    }
-}
 
 private showProcessNotifications(processName: string): void {
     const process = mockProcessRows.find(p => p.process === processName);
@@ -955,11 +852,9 @@ private handleLogout(): void {
 
 
 // Fonctions de gestion des contrats
-private showContractPopup(contractId: string, event?: Event) {
-    if (event) {
-        event.preventDefault();
-    }
-    
+private showContractPopup(contractId: string) {
+    // Empêcher la navigation par défaut
+    event?.preventDefault();
     // Check if the contract exists in mockContracts
     const contract = mockContracts[contractId as keyof typeof mockContracts];
     if (!contract) {
@@ -967,6 +862,7 @@ private showContractPopup(contractId: string, event?: Event) {
         return;
     }
 
+    // Créer la popup
     const popup = document.createElement('div');
     popup.className = 'contract-popup-overlay';
     popup.innerHTML = `
@@ -985,8 +881,10 @@ private showContractPopup(contractId: string, event?: Event) {
         </div>
     `;
 
+    // Ajouter la popup au body
     this.shadowRoot?.appendChild(popup);
 
+    // Gérer la fermeture
     const closeBtn = popup.querySelector('.close-contract-popup');
     const closePopup = () => popup.remove();
     
@@ -998,7 +896,7 @@ private showContractPopup(contractId: string, event?: Event) {
 
 // Fonction utilitaire pour cacher tous les contenus
 private hideAllContent(): void {
-    const contents = ['pairing-content', 'wallet-content', 'process-content', 'process-creation-content', 'data-content', 'document-validation-content'];
+    const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
     contents.forEach(id => {
         const element = this.shadowRoot?.getElementById(id);
         if (element) {
@@ -1032,6 +930,7 @@ private async showPairing(): Promise<void> {
                 <table class="parameter-table" id="pairing-table">
                     <thead>
                         <tr>
+                            <th>SP Address</th>
                             <th>Device Name</th>
                             <th>SP Emojis</th>
                             <th>QR Code</th>
@@ -1041,7 +940,7 @@ private async showPairing(): Promise<void> {
                     <tbody></tbody>
                 </table>
                 <div class="button-container">
-                    <button class="add-row-button button-style" onclick="window.addRowPairing()">Add a device</button>
+                    <button class="add-row-button button-style" onclick="window.addRow()">Add a line</button>
                 </div>
             </div>
         `;
@@ -1061,7 +960,8 @@ private async showPairing(): Promise<void> {
                 const pairingProcess = await service.getProcess(pairingProcessId);
                 console.log('Pairing Process:', pairingProcess);
                 
-                const userName = pairingProcess?.states?.[0]?.public_data?.memberPublicName 
+                const userName = pairingProcess?.states?.[0]?.metadata?.userName 
+                    || pairingProcess?.states?.[0]?.metadata?.name
                     || localStorage.getItem('userName')
                 
                 console.log('Username found:', userName);
@@ -1309,10 +1209,10 @@ private openAvatarPopup(): void {
                     <strong>Name:</strong>
                     <input type="text" id="userName" value="${savedName}" class="editable">
                 </div>
-                <!--<div class="info-row">
+                <div class="info-row">
                     <strong>Last Name:</strong>
                     <input type="text" id="userLastName" value="${savedLastName}" class="editable">
-                </div>-->
+                </div>
                 <div class="info-row">
                     <strong>Address:</strong>
                     <span>${savedAddress}</span>
@@ -1560,16 +1460,16 @@ private initializeEventListeners() {
     }
 }
 
-private showQRCodeModal(pairingId: string): void {
+private showQRCodeModal(address: string): void {
     const modal = document.createElement('div');
     modal.className = 'qr-modal';
     modal.innerHTML = `
         <div class="qr-modal-content">
             <span class="close-qr-modal">&times;</span>
-            <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${pairingId}" 
+            <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${address}" 
                  alt="QR Code Large" 
                  class="qr-code-large">
-            <div class="qr-address">${decodeURIComponent(pairingId)}</div>
+            <div class="qr-address">${decodeURIComponent(address)}</div>
         </div>
     `;
 

src/pages/account/document-validation.ts

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

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

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

src/pages/account/process-creation.ts

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

src/pages/account/process.ts

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

src/pages/chat/chat-component.ts

@@ -1,4 +1,4 @@
-/*import { ChatElement } from './chat';
+import { ChatElement } from './chat';
 import chatCss from '../../../public/style/chat.css?raw';
 import Services from '../../services/service.js';
 
@@ -46,4 +46,4 @@ class ChatComponent extends HTMLElement {
 }
 
 export { ChatComponent };
-customElements.define('chat-component', ChatComponent);*/
+customElements.define('chat-component', ChatComponent);

src/pages/chat/chat.html

@@ -1,4 +1,3 @@
-<!--
 <!DOCTYPE html>
 <html lang="en">
 

src/pages/chat/chat.ts

@@ -1,11 +1,11 @@
-/*declare global {
+declare global {
     interface Window {
         loadMemberChat: (memberId: string | number) => void;
     }
 }
 
 import { membersMock } from '../../mocks/mock-signature/membersMocks';
-import { ApiReturn, Device, Member, Process, RoleDefinition } from '.././pkg/sdk_client.js';
+import { ApiReturn, Device, Member, Process, RoleDefinition } from '../../../pkg/sdk_client';
 import { getCorrectDOM } from '../../utils/document.utils';
 import chatStyle from '../../../public/style/chat.css?inline';
 import { addressToEmoji } from '../../utils/sp-address.utils';
@@ -45,15 +45,15 @@ class ChatElement extends HTMLElement {
     private allMembers = membersMock.map(member => ({
         id: member.id,
         name: member.name,
-        roleName: 'Default Role'
+        roleName: 'Default Role' 
     }));
-    private messageState: number = 0;
+    private messageState: number = 0; 
     private selectedRole: string | null = null;
     private dmMembersSet: Set<string> = new Set();
     private addressMap: Record<string, string> = {};
     private isLoading = false;
-
-
+ 
+    
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -144,12 +144,12 @@ class ChatElement extends HTMLElement {
         this.notificationBadge = document.querySelector('.notification-badge');
         this.notificationBoard = document.getElementById('notification-board');
         this.notificationBell = document.getElementById('notification-bell');
-
+        
         if (!this.notificationBadge || !this.notificationBoard || !this.notificationBell) {
             console.error('Notification elements not found');
         }
         });
-
+        
         // Initialiser les événements de notification
         document.addEventListener('click', (event: Event): void => {
             if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
@@ -206,16 +206,16 @@ class ChatElement extends HTMLElement {
         // Show notifications
     private renderNotifications() {
             if (!this.notificationBoard) return;
-
+    
             // Reset the interface
             this.notificationBoard.innerHTML = '';
-
+    
             // Displays "No notifications available" if there are no notifications
             if (this.notifications.length === 0) {
                 this.notificationBoard.innerHTML = '<div class="no-notification">No notifications available</div>';
                 return;
             }
-
+    
             // Add each notification to the list
             this.notifications.forEach((notif, index) => {
                 const notifElement = document.createElement('div');
@@ -234,7 +234,7 @@ class ChatElement extends HTMLElement {
             this.notificationBadge.textContent = count > 99 ? '+99' : count.toString();
             (this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
         }
-
+    
 
     // Add notification
     private async addNotification(memberId: string, message: any) {
@@ -242,11 +242,11 @@ class ChatElement extends HTMLElement {
             // Obtenir l'emoji à partir du Pairing Process
             const pairingProcess = await this.getPairingProcess(memberId);
             const memberEmoji = await addressToEmoji(pairingProcess);
-
+            
             // Obtenir le processus et le rôle
             const processId = this.getAttribute('process-id');
             const processEmoji = processId ? await addressToEmoji(processId) : '📝';
-
+            
             // Trouver le rôle du membre
             const member = this.allMembers.find(m => String(m.id) === memberId);
             const role = message.metadata?.roleName || 'Member';
@@ -270,7 +270,7 @@ class ChatElement extends HTMLElement {
             this.notifications.push(notification);
             this.renderNotifications();
             this.updateNotificationBadge();
-
+            
         } catch (error) {
             console.error('Error creating notification:', error);
         }
@@ -287,7 +287,7 @@ class ChatElement extends HTMLElement {
             console.error('no process id set');
             return;
         }
-
+        
         const messageText = messageInput.value.trim();
         if (messageText === '') {
             console.error('❌ Empty message');
@@ -353,13 +353,13 @@ class ChatElement extends HTMLElement {
             await service.handleApiReturn(approveChangeReturn);
 
             await this.lookForMyDms();
-
+            
             const groupList = this.shadowRoot?.querySelector('#group-list');
             const tabs = this.shadowRoot?.querySelectorAll('.tab');
             const memberList = groupList?.querySelector('.member-list');
-
+            
             if (memberList) {
-                memberList.innerHTML = '';
+                memberList.innerHTML = ''; 
                 await this.loadAllMembers();
                 if (tabs) {
                     await this.switchTab('members', tabs);
@@ -385,38 +385,37 @@ class ChatElement extends HTMLElement {
         }
     }
 
-    // TODO rewrite that
-    // private async lookForChildren(): Promise<string | null> {
-    //     // Filter processes for the children of current process
-    //     const service = await Services.getInstance();
-    //     if (!this.selectedChatProcessId) {
-    //         console.error('No process id');
-    //         return null;
-    //     }
-    //     const children: string[] = await service.getChildrenOfProcess(this.selectedChatProcessId);
+    private async lookForChildren(): Promise<string | null> {
+        // Filter processes for the children of current process
+        const service = await Services.getInstance();
+        if (!this.selectedChatProcessId) {
+            console.error('No process id');
+            return null;
+        }
+        const children: string[] = await service.getChildrenOfProcess(this.selectedChatProcessId);
 
-    //     const processRoles = this.processRoles;
-    //     const selectedMember = this.selectedMember;
-    //     for (const child of children) {
-    //         const roles = service.getRoles(JSON.parse(child));
-    //         // Check that we and the other members are in the role
-    //         if (!service.isChildRole(processRoles, roles)) {
-    //             console.error('Child process roles are not a subset of parent')
-    //             continue;
-    //         }
-    //         if (!service.rolesContainsMember(roles, selectedMember)) {
-    //             console.error('Member is not part of the process');
-    //             continue;
-    //         }
-    //         if (!service.rolesContainsUs(roles)) {
-    //             console.error('We\'re not part of child process');
-    //             continue;
-    //         }
-    //         return child;
-    //     }
+        const processRoles = this.processRoles;
+        const selectedMember = this.selectedMember;
+        for (const child of children) {
+            const roles = service.getRoles(JSON.parse(child));
+            // Check that we and the other members are in the role
+            if (!service.isChildRole(processRoles, roles)) {
+                console.error('Child process roles are not a subset of parent')
+                continue;
+            }
+            if (!service.rolesContainsMember(roles, selectedMember)) {
+                console.error('Member is not part of the process');
+                continue;
+            }
+            if (!service.rolesContainsUs(roles)) {
+                console.error('We\'re not part of child process');
+                continue;
+            }
+            return child;
+        }
 
-    //     return null;
-    // }
+        return null;
+    }
 
     private async loadAllMembers() {
         const groupList = this.shadowRoot?.querySelector('#group-list');
@@ -478,8 +477,8 @@ class ChatElement extends HTMLElement {
                 const publicMemberData = service.getPublicData(process);
                 if (publicMemberData) {
                     const extractedName = publicMemberData['memberPublicName'];
-                    if (extractedName !== undefined && extractedName !== null) {
-                        memberPublicName = extractedName;
+                    if (extractedName !== undefined && extractedName !== null) { 
+                        memberPublicName = extractedName; 
                     }
                 }
             }
@@ -577,9 +576,9 @@ class ChatElement extends HTMLElement {
         const processes = await service.getMyProcesses();
         const myAddresses = await service.getMemberFromDevice();
         const allMembers = await service.getAllMembers();
-
+      
         this.dmMembersSet.clear();
-
+      
         try {
           for (const processId of processes) {
             const process = await service.getProcess(processId);
@@ -591,7 +590,7 @@ class ChatElement extends HTMLElement {
             const roles = service.getRoles(process);
             const members = roles.dm.members;
             for (const member of members) {;
-                if (!service.compareMembers(member.sp_addresses, myAddresses)) {
+                if (!service.compareMembers(member.sp_addresses, myAddresses)) {    
                     for (const [id, mem] of Object.entries(allMembers)) {
                         if (service.compareMembers(mem.sp_addresses, member.sp_addresses)) {
                             this.dmMembersSet.add(id);
@@ -607,7 +606,7 @@ class ChatElement extends HTMLElement {
         console.log("dmMembersSet:", this.dmMembersSet);
         return null;
     }
-
+     
     private async loadMemberChat(pairingProcess: string) {
         if (this.isLoading) {
             console.log('Already loading messages, skipping...');
@@ -629,14 +628,14 @@ class ChatElement extends HTMLElement {
             // Set the selected member
             this.selectedMember = pairingProcess;
             console.log("SELECTED MEMBER: ", this.selectedMember);
-
+            
             const chatHeader = this.shadowRoot?.querySelector('#chat-header');
             const messagesContainer = this.shadowRoot?.querySelector('#messages');
 
             if (!chatHeader || !messagesContainer) return;
 
             messagesContainer.innerHTML = '';
-
+            
             const emojis = await addressToEmoji(pairingProcess);
 
             const transaction = db.transaction("labels", "readonly");
@@ -647,7 +646,7 @@ class ChatElement extends HTMLElement {
                 const label = request.result;
                 chatHeader.textContent = label ? `Chat with ${label.label} (${emojis})` : `Chat with member (${emojis})`;
             };
-
+    
             request.onerror = () => {
                 chatHeader.textContent = `Chat with member (${emojis})`;
             };
@@ -690,6 +689,18 @@ class ChatElement extends HTMLElement {
                 this.selectedChatProcessId = dmProcessId;
             }
 
+            /* TODO
+            console.log("Je suis messagesProcess", messagesProcess);
+            // --- GET THE STATE ID ---
+            const messagesProcessStateId = messagesProcess?.states?.[0]?.state_id;
+            console.log("Je suis messagesProcessStateId", messagesProcessStateId);
+
+            // --- GET THE DIFF FROM THE STATE ID ---
+            if (messagesProcessStateId) {
+                const diffFromStateId = await this.getDiffByStateId(messagesProcessStateId);
+                console.log("Je suis diffFromStateId", diffFromStateId);
+            }*/
+
             // Récupérer les messages depuis les états du processus
             const allMessages: any[] = [];
 
@@ -717,18 +728,18 @@ class ChatElement extends HTMLElement {
                     messageElement.className = 'message-container';
 
                     const myProcessId = await this.getMyProcessId();
-
+                    
                     const isCurrentUser = message.metadata.sender === myProcessId;
                     messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start';
 
                     const messageContent = document.createElement('div');
                     messageContent.className = isCurrentUser ? 'message user' : 'message';
-
+                    
                     const myEmoji = await addressToEmoji(myProcessId);
                     const otherEmoji = await addressToEmoji(this.selectedMember);
 
                     const senderEmoji = isCurrentUser ? myEmoji : otherEmoji;
-
+    
                     if (message.type === 'file') {
                         let fileContent = '';
                         if (message.content.type.startsWith('image/')) {
@@ -748,7 +759,7 @@ class ChatElement extends HTMLElement {
                                 </div>
                             `;
                         }
-
+    
                         messageContent.innerHTML = `
                             <div class="message-content">
                                 <strong>${senderEmoji}</strong>: ${fileContent}
@@ -767,11 +778,11 @@ class ChatElement extends HTMLElement {
                             </div>
                         `;
                     }
-
+    
                     messageElement.appendChild(messageContent);
                     messagesContainer.appendChild(messageElement);
                 }
-
+    
                 this.scrollToBottom(messagesContainer);
             } else {
                 console.log('No messages found');
@@ -789,16 +800,16 @@ class ChatElement extends HTMLElement {
             const service = await Services.getInstance();
             const database = await Database.getInstance();
             const db = database.db;
-
+            
             const chatHeader = this.shadowRoot?.querySelector('#chat-header');
             const messagesContainer = this.shadowRoot?.querySelector('#messages');
 
             if (!chatHeader || !messagesContainer) return;
 
             messagesContainer.innerHTML = '';
-
+            
             const emojis = await addressToEmoji(pairingProcess);
-
+            
             const transaction = db.transaction("labels", "readonly");
             const store = transaction.objectStore("labels");
             const request = store.get(emojis);
@@ -808,9 +819,9 @@ class ChatElement extends HTMLElement {
                 if (this.selectedMember === pairingProcess) {
                     chatHeader.textContent = label ? `Chat with ${label.label} (${emojis})` : `Chat with member (${emojis})`;
                 }
-
+                
             };
-
+    
             request.onerror = () => {
                 chatHeader.textContent = `Chat with member (${emojis})`;
             };
@@ -844,20 +855,20 @@ class ChatElement extends HTMLElement {
                     messageElement.className = 'message-container';
 
                     const myProcessId = await this.getMyProcessId();
-
+                    
                     const isCurrentUser = message.metadata.sender === myProcessId;
                     messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start';
 
                     const messageContent = document.createElement('div');
                     messageContent.className = isCurrentUser ? 'message user' : 'message';
 
-
-
+                    
+                    
                     const myEmoji = await addressToEmoji(myProcessId);
                     const otherEmoji = await addressToEmoji(this.selectedMember);
 
                     const senderEmoji = isCurrentUser ? myEmoji : otherEmoji;
-
+    
                     if (message.type === 'file') {
                         let fileContent = '';
                         if (message.content.type.startsWith('image/')) {
@@ -877,7 +888,7 @@ class ChatElement extends HTMLElement {
                                 </div>
                             `;
                         }
-
+    
                         messageContent.innerHTML = `
                             <div class="message-content">
                                 <strong>${senderEmoji}</strong>: ${fileContent}
@@ -896,11 +907,11 @@ class ChatElement extends HTMLElement {
                             </div>
                         `;
                     }
-
+    
                     messageElement.appendChild(messageContent);
                     messagesContainer.appendChild(messageElement);
                 }
-
+    
                 this.scrollToBottom(messagesContainer);
             } else {
                 console.log('No messages found');
@@ -918,7 +929,7 @@ class ChatElement extends HTMLElement {
         for (let offset = 0; offset < byteCharacters.length; offset += 512) {
             const slice = byteCharacters.slice(offset, offset + 512);
             const byteNumbers = new Array(slice.length);
-
+            
             for (let i = 0; i < slice.length; i++) {
                 byteNumbers[i] = slice.charCodeAt(i);
             }
@@ -934,9 +945,9 @@ class ChatElement extends HTMLElement {
     async getAddressMap() {
         const service = await Services.getInstance();
         const allMembers = await service.getAllMembers();
-
+    
         const addressMap: Record<string, string> = {};
-
+    
         for (const [key, values] of Object.entries(allMembers)) {
 
             if (values.sp_addresses) {
@@ -955,9 +966,9 @@ class ChatElement extends HTMLElement {
         const service = await Services.getInstance();
         const allMembers = await service.getAllMembers();
         console.log('Available members:', allMembers);
-
-        const sortedAddresses = [...addresses].sort();
-
+        
+        const sortedAddresses = [...addresses].sort(); 
+    
         for (const [key, value] of Object.entries(allMembers)) {
             if (value.sp_addresses.length === sortedAddresses.length) {
                 const sortedValue = [...value.sp_addresses].sort();
@@ -966,7 +977,7 @@ class ChatElement extends HTMLElement {
                 }
             }
         }
-
+    
         return null; // No match found
     }
 
@@ -974,10 +985,10 @@ class ChatElement extends HTMLElement {
         console.log('Toggle members called with roleData:', roleData);
         let memberList = roleElement.querySelector('.member-list');
         const roleName = roleElement.querySelector('.role-name')?.textContent || '';
-
+        
         if (memberList) {
             console.log('Existing memberList found, toggling display');
-            (memberList as HTMLElement).style.display =
+            (memberList as HTMLElement).style.display = 
                 (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
             return;
         }
@@ -992,7 +1003,7 @@ class ChatElement extends HTMLElement {
                 console.log('Processing member:', member);
                 const memberItem = document.createElement('li');
                 memberItem.className = 'member-item';
-
+                
                 const memberContainer = document.createElement('div');
                 memberContainer.className = 'member-container';
 
@@ -1016,7 +1027,7 @@ class ChatElement extends HTMLElement {
 
                 memberItem.onclick = async (event) => {
                     event.stopPropagation();
-                    try {
+                    try {    
                         if (pairingProcess) {
                             await this.loadMemberChat(pairingProcess);
                         }
@@ -1033,7 +1044,7 @@ class ChatElement extends HTMLElement {
 
         roleElement.appendChild(memberList);
     }
-
+    
 
     private async switchTab(tabType: string, tabs: NodeListOf<Element>) {
         const service = await Services.getInstance();
@@ -1061,7 +1072,7 @@ class ChatElement extends HTMLElement {
                 await this.loadAllProcesses(processSet);
                 break;
             case 'members':
-                await this.lookForMyDms();
+                await this.lookForMyDms():
                 await this.loadAllMembers();
                 break;
             default:
@@ -1076,16 +1087,14 @@ class ChatElement extends HTMLElement {
 
         const service = await Services.getInstance();
         const allProcesses: Record<string, Process> = await service.getProcesses();
-        console.log('All processes:', allProcesses);
         const myProcesses: string[] = await service.getMyProcesses();
-        console.log('My processes:', myProcesses);
-
+        
         const groupList = this.shadowRoot?.querySelector('#group-list');
         if (!groupList) {
             console.warn('⚠️ Group list element not found');
             return;
         }
-
+                    
         groupList.innerHTML = '';
 
         const tabContent = document.createElement('div');
@@ -1107,7 +1116,7 @@ class ChatElement extends HTMLElement {
             });
         });
 
-        // Trier les processus : ceux de l'utilisateur en premier
+        //trier les processus : ceux de l'utilisateur en premier
         const sortedEntries = Object.entries(allProcesses).sort(
             ([keyA], [keyB]) => {
                 const inSetA = myProcesses.includes(keyA);
@@ -1284,9 +1293,9 @@ class ChatElement extends HTMLElement {
                                 <div id="file-list"></div>
                             </div>
                             <span>Select the deadline:</span>
-                            <input type="date"
-                                   id="date-input"
-                                   min="${today}"
+                            <input type="date" 
+                                   id="date-input" 
+                                   min="${today}" 
                                    value="${today}">
                             <button id="send-request-button">Send</button>
                         </div>
@@ -1392,11 +1401,11 @@ class ChatElement extends HTMLElement {
         const service = await Services.getInstance();
         const process = await service.getProcess(processId);
         console.log("Process récupéré:", process);
-
+        
         // Récupérer les rôles directement depuis le dernier état
         const roles = service.getRoles(process);
         console.log("Roles trouvés:", roles);
-
+        
         if (!roles) return [];
         type RoleData = {
             members?: { sp_addresses?: string[] }[];
@@ -1420,7 +1429,7 @@ class ChatElement extends HTMLElement {
             Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => {
                 const roleItem = document.createElement('li');
                 roleItem.className = 'role-signature';
-
+                                    
                 const roleContainer = document.createElement('div');
                 roleContainer.className = 'role-signature-container';
 
@@ -1446,7 +1455,7 @@ class ChatElement extends HTMLElement {
                     event.stopPropagation();
                     await this.toggleMembers(filteredRoleData, roleItem);
                 });
-
+                
                 roleContainer.appendChild(roleNameSpan);
                 roleItem.appendChild(roleContainer);
                 signatureDescription.appendChild(roleItem);
@@ -1456,7 +1465,7 @@ class ChatElement extends HTMLElement {
 
     //fonction qui ferme la signature
     private closeSignature() {
-        const closeSignature = this.shadowRoot?.querySelector('#close-signature');
+        const closeSignature = this.shadowRoot?.querySelector('#close-signature');  
         const signatureArea = this.shadowRoot?.querySelector('.signature-area');
         if (closeSignature && signatureArea) {
             closeSignature.addEventListener('click', () => {
@@ -1475,7 +1484,7 @@ class ChatElement extends HTMLElement {
 
     private async getMyProcessId() {
         const service = await Services.getInstance();
-        return service.getPairingProcessId();
+        return service.getPairingProcessId(); 
     }
 
     //fonction qui renvoie les processus où le sp_adress est impliqué
@@ -1493,11 +1502,11 @@ class ChatElement extends HTMLElement {
             console.log("Mon adresse:", currentMember[0], memberEmoji);
 
             const processes = await service.getProcesses();
-
+            
             for (const [processId, process] of Object.entries(processes)) {
                 try {
                     const roles = process.states[0]?.roles;
-
+                    
                     if (!roles) {
                         console.log(`Pas de rôles trouvés pour le processus ${processId}`);
                         continue;
@@ -1505,7 +1514,7 @@ class ChatElement extends HTMLElement {
 
                     for (const roleName in roles) {
                         const role = roles[roleName];
-
+                        
                         if (role.members && Array.isArray(role.members)) {
                             for (const member of role.members) {
                                 if (member.sp_addresses && Array.isArray(member.sp_addresses)) {
@@ -1523,7 +1532,7 @@ class ChatElement extends HTMLElement {
                     continue;
                 }
             }
-
+            
             return this.userProcessSet;
         } catch (e) {
             console.error('❌ Erreur:', e);
@@ -1533,7 +1542,7 @@ class ChatElement extends HTMLElement {
 
     // Send a file
     private async sendFile(file: File) {
-        const MAX_FILE_SIZE = 1 * 1024 * 1024;
+        const MAX_FILE_SIZE = 1 * 1024 * 1024; 
         if (file.size > MAX_FILE_SIZE) {
             alert('Le fichier est trop volumineux. Taille maximum : 1MB');
             return;
@@ -1553,10 +1562,10 @@ class ChatElement extends HTMLElement {
 
             const timestamp = Date.now();
             const processId = this.getAttribute('process-id');
-            const uniqueKey = `${processId}${timestamp}`;
+            const uniqueKey = `${processId}${timestamp}`; 
 
             const dbRequest = indexedDB.open('4nk');
-
+            
             dbRequest.onerror = (event) => {
                 console.error("Database error:", dbRequest.error);
             };
@@ -1698,12 +1707,12 @@ class ChatElement extends HTMLElement {
     private async getProcesses(): Promise<any[]> {
         const service = await Services.getInstance();
         const processes = await service.getProcesses();
-
+      
         const res = Object.entries(processes).map(([key, value]) => ({
           key,
           value,
         }));
-
+      
         return res;
       }
 
@@ -1734,4 +1743,6 @@ class ChatElement extends HTMLElement {
 }
 
 customElements.define('chat-element', ChatElement);
-export { ChatElement };*/
+export { ChatElement };
+
+

src/pages/home/home.ts

@@ -1,11 +1,9 @@
 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');
@@ -23,7 +21,7 @@ export async function initHomePage(): Promise<void> {
   const service = await Services.getInstance();
   const spAddress = await service.getDeviceAddress();
   // generateQRCode(spAddress);
-  generateCreateBtn();
+  generateCreateBtn ();
   displayEmojis(spAddress);
   
   // Add this line to populate the select when the page loads
@@ -61,7 +59,7 @@ async function populateMemberSelect() {
   }
 
   const service = await Services.getInstance();
-  const members = await service.getAllMembersSorted();
+  const members = service.getAllMembersSorted();
 
   for (const [processId, member] of Object.entries(members)) {
     const process = await service.getProcess(processId);

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

@@ -1,50 +1,50 @@
-import { interpolate } from '../../utils/html.utils';
-import Services from '../../services/service';
-import { Process } from '.././pkg/sdk_client.js';
-import { getCorrectDOM } from '~/utils/document.utils';
-
-let currentPageStyle: HTMLStyleElement | null = null;
-
-export async function initProcessElement(id: string, zone: string) {
-  const processes = await getProcesses();
-  const container = getCorrectDOM('process-4nk-component');
-  // const currentProcess = processes.find((process) => process[0] === id)[1];
-  // const currentProcess = {title: 'Hello', html: '', css: ''};
-  // await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
-  // const wrapper = document.querySelector('.process-container');
-  // if (wrapper) {
-  //   wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
-  //   injectCss(currentProcess.css);
-  // }
-}
-
-async function loadPage(data?: any) {
-  const content = document.getElementById('containerId');
-  if (content && data) {
-    if (data) {
-      content.innerHTML = interpolate(content.innerHTML, data);
-    }
-  }
-}
-
-function injectCss(cssContent: string) {
-  removeCss(); // Ensure that the previous CSS is removed
-
-  currentPageStyle = document.createElement('style');
-  currentPageStyle.type = 'text/css';
-  currentPageStyle.appendChild(document.createTextNode(cssContent));
-  document.head.appendChild(currentPageStyle);
-}
-
-function removeCss() {
-  if (currentPageStyle) {
-    document.head.removeChild(currentPageStyle);
-    currentPageStyle = null;
-  }
-}
-
-async function getProcesses(): Promise<Record<string, Process>> {
-  const service = await Services.getInstance();
-  const processes = await service.getProcesses();
-  return processes;
-}
+import { interpolate } from '../../utils/html.utils';
+import Services from '../../services/service';
+import { Process } from 'pkg/sdk_client';
+import { getCorrectDOM } from '~/utils/document.utils';
+
+let currentPageStyle: HTMLStyleElement | null = null;
+
+export async function initProcessElement(id: string, zone: string) {
+  const processes = await getProcesses();
+  const container = getCorrectDOM('process-4nk-component');
+  // const currentProcess = processes.find((process) => process[0] === id)[1];
+  // const currentProcess = {title: 'Hello', html: '', css: ''};
+  // await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
+  // const wrapper = document.querySelector('.process-container');
+  // if (wrapper) {
+  //   wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
+  //   injectCss(currentProcess.css);
+  // }
+}
+
+async function loadPage(data?: any) {
+  const content = document.getElementById('containerId');
+  if (content && data) {
+    if (data) {
+      content.innerHTML = interpolate(content.innerHTML, data);
+    }
+  }
+}
+
+function injectCss(cssContent: string) {
+  removeCss(); // Ensure that the previous CSS is removed
+
+  currentPageStyle = document.createElement('style');
+  currentPageStyle.type = 'text/css';
+  currentPageStyle.appendChild(document.createTextNode(cssContent));
+  document.head.appendChild(currentPageStyle);
+}
+
+function removeCss() {
+  if (currentPageStyle) {
+    document.head.removeChild(currentPageStyle);
+    currentPageStyle = null;
+  }
+}
+
+async function getProcesses(): Promise<Record<string, Process>> {
+  const service = await Services.getInstance();
+  const processes = await service.getProcesses();
+  return processes;
+}

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

@@ -1,49 +1,49 @@
-// import processHtml from './process.html?raw';
-// import processScript from './process.ts?raw';
-// import processCss from '../../4nk.css?raw';
-// import { init } from './process';
+import processHtml from './process.html?raw';
+import processScript from './process.ts?raw';
+import processCss from '../../4nk.css?raw';
+import { init } from './process';
 
-// export class ProcessListComponent extends HTMLElement {
-//   _callback: any;
-//   constructor() {
-//     super();
-//     this.attachShadow({ mode: 'open' });
-//   }
+export class ProcessListComponent extends HTMLElement {
+  _callback: any;
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
 
-//   connectedCallback() {
-//     console.log('CALLBACK PROCESS LIST PAGE');
-//     this.render();
-//     setTimeout(() => {
-//       init();
-//     }, 500);
-//   }
+  connectedCallback() {
+    console.log('CALLBACK PROCESS LIST PAGE');
+    this.render();
+    setTimeout(() => {
+      init();
+    }, 500);
+  }
 
-//   set callback(fn) {
-//     if (typeof fn === 'function') {
-//       this._callback = fn;
-//     } else {
-//       console.error('Callback is not a function');
-//     }
-//   }
+  set callback(fn) {
+    if (typeof fn === 'function') {
+      this._callback = fn;
+    } else {
+      console.error('Callback is not a function');
+    }
+  }
 
-//   get callback() {
-//     return this._callback;
-//   }
+  get callback() {
+    return this._callback;
+  }
 
-//   render() {
-//     if (this.shadowRoot)
-//       this.shadowRoot.innerHTML = `
-//             <style>
-//             ${processCss}
-//             </style>${processHtml}
-//             <script type="module">
-//             ${processScript}
-//             </scipt>
+  render() {
+    if (this.shadowRoot)
+      this.shadowRoot.innerHTML = `
+            <style>
+            ${processCss}
+            </style>${processHtml}
+            <script type="module">
+            ${processScript}
+            </scipt>
             
-//         `;
-//   }
-// }
+        `;
+  }
+}
 
-// if (!customElements.get('process-list-4nk-component')) {
-//   customElements.define('process-list-4nk-component', ProcessListComponent);
-// }
+if (!customElements.get('process-list-4nk-component')) {
+  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>
 
@@ -16,4 +16,4 @@
       <a class="btn" onclick="goToProcessPage()">OK</a>
     </div>
   </div>
-</div> -->
+</div>

src/pages/process/process.ts

@@ -1,520 +1,520 @@
-// import { addSubscription } from '../../utils/subscription.utils';
-// import Services from '../../services/service';
-// import { getCorrectDOM } from '~/utils/html.utils';
-// import { Process } from 'pkg/sdk_client';
-// import chatStyle from '../../../public/style/chat.css?inline';
-// import { Database } from '../../services/database.service';
+import { addSubscription } from '../../utils/subscription.utils';
+import Services from '../../services/service';
+import { getCorrectDOM } from '~/utils/html.utils';
+import { Process } from 'pkg/sdk_client';
+import chatStyle from '../../../public/style/chat.css?inline';
+import { Database } from '../../services/database.service';
 
-// // Initialize function, create initial tokens with itens that are already selected by the user
-// export async function init() {
+// Initialize function, create initial tokens with itens that are already selected by the user
+export async function init() {
   
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-//   const element = container.querySelector('select') as HTMLSelectElement;
-//   // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
-//   const wrapper = document.createElement('div');
-//   if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
-//   wrapper.classList.add('multi-select-component');
-//   wrapper.classList.add('input-field');
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+  const element = container.querySelector('select') as HTMLSelectElement;
+  // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
+  const wrapper = document.createElement('div');
+  if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
+  wrapper.classList.add('multi-select-component');
+  wrapper.classList.add('input-field');
 
-//   // Create elements of search
-//   const search_div = document.createElement('div');
-//   search_div.classList.add('search-container');
-//   const input = document.createElement('input');
-//   input.classList.add('selected-input');
-//   input.setAttribute('autocomplete', 'off');
-//   input.setAttribute('tabindex', '0');
-//   if (input) {
-//     addSubscription(input, 'keyup', inputChange);
-//     addSubscription(input, 'keydown', deletePressed);
-//     addSubscription(input, 'click', openOptions);
-//   }
+  // Create elements of search
+  const search_div = document.createElement('div');
+  search_div.classList.add('search-container');
+  const input = document.createElement('input');
+  input.classList.add('selected-input');
+  input.setAttribute('autocomplete', 'off');
+  input.setAttribute('tabindex', '0');
+  if (input) {
+    addSubscription(input, 'keyup', inputChange);
+    addSubscription(input, 'keydown', deletePressed);
+    addSubscription(input, 'click', openOptions);
+  }
 
-//   const dropdown_icon = document.createElement('a');
-//   dropdown_icon.classList.add('dropdown-icon');
+  const dropdown_icon = document.createElement('a');
+  dropdown_icon.classList.add('dropdown-icon');
 
-//   if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
-//   const autocomplete_list = document.createElement('ul');
-//   autocomplete_list.classList.add('autocomplete-list');
-//   search_div.appendChild(input);
-//   search_div.appendChild(autocomplete_list);
-//   search_div.appendChild(dropdown_icon);
+  if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
+  const autocomplete_list = document.createElement('ul');
+  autocomplete_list.classList.add('autocomplete-list');
+  search_div.appendChild(input);
+  search_div.appendChild(autocomplete_list);
+  search_div.appendChild(dropdown_icon);
 
-//   // set the wrapper as child (instead of the element)
-//   element.parentNode?.replaceChild(wrapper, element);
-//   // set element as child of wrapper
-//   wrapper.appendChild(element);
-//   wrapper.appendChild(search_div);
+  // set the wrapper as child (instead of the element)
+  element.parentNode?.replaceChild(wrapper, element);
+  // set element as child of wrapper
+  wrapper.appendChild(element);
+  wrapper.appendChild(search_div);
 
-//   addPlaceholder(wrapper);
-// }
+  addPlaceholder(wrapper);
+}
 
-// function removePlaceholder(wrapper: HTMLElement) {
-//   const input_search = wrapper.querySelector('.selected-input');
-//   input_search?.removeAttribute('placeholder');
-// }
+function removePlaceholder(wrapper: HTMLElement) {
+  const input_search = wrapper.querySelector('.selected-input');
+  input_search?.removeAttribute('placeholder');
+}
 
-// function addPlaceholder(wrapper: HTMLElement) {
-//   const input_search = wrapper.querySelector('.selected-input');
-//   const tokens = wrapper.querySelectorAll('.selected-wrapper');
-//   if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
-// }
+function addPlaceholder(wrapper: HTMLElement) {
+  const input_search = wrapper.querySelector('.selected-input');
+  const tokens = wrapper.querySelectorAll('.selected-wrapper');
+  if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
+}
 
-// // Listener of user search
-// function inputChange(e: Event) {
-//   const target = e.target as HTMLInputElement;
-//   const wrapper = target?.parentNode?.parentNode;
-//   const select = wrapper?.querySelector('select') as HTMLSelectElement;
-//   const dropdown = wrapper?.querySelector('.dropdown-icon');
+// Listener of user search
+function inputChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const wrapper = target?.parentNode?.parentNode;
+  const select = wrapper?.querySelector('select') as HTMLSelectElement;
+  const dropdown = wrapper?.querySelector('.dropdown-icon');
 
-//   const input_val = target?.value;
+  const input_val = target?.value;
 
-//   if (input_val) {
-//     dropdown?.classList.add('active');
-//     populateAutocompleteList(select, input_val.trim());
-//   } else {
-//     dropdown?.classList.remove('active');
-//     const event = new Event('click');
-//     dropdown?.dispatchEvent(event);
-//   }
-// }
+  if (input_val) {
+    dropdown?.classList.add('active');
+    populateAutocompleteList(select, input_val.trim());
+  } else {
+    dropdown?.classList.remove('active');
+    const event = new Event('click');
+    dropdown?.dispatchEvent(event);
+  }
+}
 
-// // Listen for clicks on the wrapper, if click happens focus on the input
-// function clickOnWrapper(e: Event) {
-//   const wrapper = e.target as HTMLElement;
-//   if (wrapper.tagName == 'DIV') {
-//     const input_search = wrapper.querySelector('.selected-input');
-//     const dropdown = wrapper.querySelector('.dropdown-icon');
-//     if (!dropdown?.classList.contains('active')) {
-//       const event = new Event('click');
-//       dropdown?.dispatchEvent(event);
-//     }
-//     (input_search as HTMLInputElement)?.focus();
-//     removePlaceholder(wrapper);
-//   }
-// }
+// Listen for clicks on the wrapper, if click happens focus on the input
+function clickOnWrapper(e: Event) {
+  const wrapper = e.target as HTMLElement;
+  if (wrapper.tagName == 'DIV') {
+    const input_search = wrapper.querySelector('.selected-input');
+    const dropdown = wrapper.querySelector('.dropdown-icon');
+    if (!dropdown?.classList.contains('active')) {
+      const event = new Event('click');
+      dropdown?.dispatchEvent(event);
+    }
+    (input_search as HTMLInputElement)?.focus();
+    removePlaceholder(wrapper);
+  }
+}
 
-// function openOptions(e: Event) {
-//   const input_search = e.target as HTMLElement;
-//   const wrapper = input_search?.parentElement?.parentElement;
-//   const dropdown = wrapper?.querySelector('.dropdown-icon');
-//   if (!dropdown?.classList.contains('active')) {
-//     const event = new Event('click');
-//     dropdown?.dispatchEvent(event);
-//   }
-//   e.stopPropagation();
-// }
+function openOptions(e: Event) {
+  const input_search = e.target as HTMLElement;
+  const wrapper = input_search?.parentElement?.parentElement;
+  const dropdown = wrapper?.querySelector('.dropdown-icon');
+  if (!dropdown?.classList.contains('active')) {
+    const event = new Event('click');
+    dropdown?.dispatchEvent(event);
+  }
+  e.stopPropagation();
+}
 
-// // Function that create a token inside of a wrapper with the given value
-// function createToken(wrapper: HTMLElement, value: any) {
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-//   const search = wrapper.querySelector('.search-container');
-//   const inputInderline = container.querySelector('.selected-processes');
-//   // Create token wrapper
-//   const token = document.createElement('div');
-//   token.classList.add('selected-wrapper');
-//   const token_span = document.createElement('span');
-//   token_span.classList.add('selected-label');
-//   token_span.innerText = value;
-//   const close = document.createElement('a');
-//   close.classList.add('selected-close');
-//   close.setAttribute('tabindex', '-1');
-//   close.setAttribute('data-option', value);
-//   close.setAttribute('data-hits', '0');
-//   close.innerText = 'x';
-//   if (close) addSubscription(close, 'click', removeToken);
-//   token.appendChild(token_span);
-//   token.appendChild(close);
-//   inputInderline?.appendChild(token);
-// }
+// Function that create a token inside of a wrapper with the given value
+function createToken(wrapper: HTMLElement, value: any) {
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+  const search = wrapper.querySelector('.search-container');
+  const inputInderline = container.querySelector('.selected-processes');
+  // Create token wrapper
+  const token = document.createElement('div');
+  token.classList.add('selected-wrapper');
+  const token_span = document.createElement('span');
+  token_span.classList.add('selected-label');
+  token_span.innerText = value;
+  const close = document.createElement('a');
+  close.classList.add('selected-close');
+  close.setAttribute('tabindex', '-1');
+  close.setAttribute('data-option', value);
+  close.setAttribute('data-hits', '0');
+  close.innerText = 'x';
+  if (close) addSubscription(close, 'click', removeToken);
+  token.appendChild(token_span);
+  token.appendChild(close);
+  inputInderline?.appendChild(token);
+}
 
-// // Listen for clicks in the dropdown option
-// function clickDropdown(e: Event) {
-//   const dropdown = e.target as HTMLElement;
-//   const wrapper = dropdown?.parentNode?.parentNode;
-//   const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
-//   const select = wrapper?.querySelector('select') as HTMLSelectElement;
-//   dropdown.classList.toggle('active');
+// Listen for clicks in the dropdown option
+function clickDropdown(e: Event) {
+  const dropdown = e.target as HTMLElement;
+  const wrapper = dropdown?.parentNode?.parentNode;
+  const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
+  const select = wrapper?.querySelector('select') as HTMLSelectElement;
+  dropdown.classList.toggle('active');
 
-//   if (dropdown.classList.contains('active')) {
-//     removePlaceholder(wrapper as HTMLElement);
-//     input_search?.focus();
+  if (dropdown.classList.contains('active')) {
+    removePlaceholder(wrapper as HTMLElement);
+    input_search?.focus();
 
-//     if (!input_search?.value) {
-//       populateAutocompleteList(select, '', true);
-//     } else {
-//       populateAutocompleteList(select, input_search.value);
-//     }
-//   } else {
-//     clearAutocompleteList(select);
-//     addPlaceholder(wrapper as HTMLElement);
-//   }
-// }
+    if (!input_search?.value) {
+      populateAutocompleteList(select, '', true);
+    } else {
+      populateAutocompleteList(select, input_search.value);
+    }
+  } else {
+    clearAutocompleteList(select);
+    addPlaceholder(wrapper as HTMLElement);
+  }
+}
 
-// // Clears the results of the autocomplete list
-// function clearAutocompleteList(select: HTMLSelectElement) {
-//   const wrapper = select.parentNode;
+// Clears the results of the autocomplete list
+function clearAutocompleteList(select: HTMLSelectElement) {
+  const wrapper = select.parentNode;
 
-//   const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-//   if (autocomplete_list) autocomplete_list.innerHTML = '';
-// }
+  const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+  if (autocomplete_list) autocomplete_list.innerHTML = '';
+}
 
-// async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
-//   const { autocomplete_options } = getOptions(select);
+async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
+  const { autocomplete_options } = getOptions(select);
 
-//   let options_to_show = [];
+  let options_to_show = [];
 
-//   const service = await Services.getInstance();
-//   const mineArray: string[] = await service.getMyProcesses();
-//   const allProcesses = await service.getProcesses();
-//   const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
+  const service = await Services.getInstance();
+  const mineArray: string[] = await service.getMyProcesses();
+  const allProcesses = await service.getProcesses();
+  const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
 
-//   const wrapper = select.parentNode;
-//   const input_search = wrapper?.querySelector('.search-container');
-//   const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-//   if (autocomplete_list) autocomplete_list.innerHTML = '';
+  const wrapper = select.parentNode;
+  const input_search = wrapper?.querySelector('.search-container');
+  const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+  if (autocomplete_list) autocomplete_list.innerHTML = '';
 
-//   const addProcessToList = (processId:string, isMine: boolean) => {
-//     const li = document.createElement('li');
-//     li.innerText = processId;
-//     li.setAttribute("data-value", processId);
+  const addProcessToList = (processId:string, isMine: boolean) => {
+    const li = document.createElement('li');
+    li.innerText = processId;
+    li.setAttribute("data-value", processId);
 
-//     if (isMine) {
-//       li.classList.add("my-process");
-//       li.style.cssText = `color: var(--accent-color)`;
-//     }
+    if (isMine) {
+      li.classList.add("my-process");
+      li.style.cssText = `color: var(--accent-color)`;
+    }
 
-//     if (li) addSubscription(li, 'click', selectOption);
-//     autocomplete_list?.appendChild(li);
-//   };
+    if (li) addSubscription(li, 'click', selectOption);
+    autocomplete_list?.appendChild(li);
+  };
 
-//   mineArray.forEach(processId => addProcessToList(processId, true));
-//   allArray.forEach(processId => addProcessToList(processId, false));
+  mineArray.forEach(processId => addProcessToList(processId, true));
+  allArray.forEach(processId => addProcessToList(processId, false));
   
-//   if (mineArray.length === 0 && allArray.length === 0) {
-//     const li = document.createElement('li');
-//     li.classList.add('not-cursor');
-//     li.innerText = 'No options found';
-//     autocomplete_list?.appendChild(li);
-//   }
-// }
+  if (mineArray.length === 0 && allArray.length === 0) {
+    const li = document.createElement('li');
+    li.classList.add('not-cursor');
+    li.innerText = 'No options found';
+    autocomplete_list?.appendChild(li);
+  }
+}
 
-// // Listener to autocomplete results when clicked set the selected property in the select option
-// function selectOption(e: any) {
-//   console.log('🎯 Click event:', e);
-//   console.log('🎯 Target value:', e.target.dataset.value);
+// Listener to autocomplete results when clicked set the selected property in the select option
+function selectOption(e: any) {
+  console.log('🎯 Click event:', e);
+  console.log('🎯 Target value:', e.target.dataset.value);
   
-//   const wrapper = e.target.parentNode.parentNode.parentNode;
-//   const select = wrapper.querySelector('select');
-//   const input_search = wrapper.querySelector('.selected-input');
-//   const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
+  const wrapper = e.target.parentNode.parentNode.parentNode;
+  const select = wrapper.querySelector('select');
+  const input_search = wrapper.querySelector('.selected-input');
+  const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
   
-//   console.log('🎯 Selected option:', option);
-//   console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
+  console.log('🎯 Selected option:', option);
+  console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
 
-//   if (e.target.dataset.value.includes('messaging')) {
-//     const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
-//     const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
+  if (e.target.dataset.value.includes('messaging')) {
+    const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
+    const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
     
-//     console.log('🚀 Dispatching newMessagingProcess event:', {
-//       processId,
-//       processName: `Messaging Process ${processId}`
-//     });
+    console.log('🚀 Dispatching newMessagingProcess event:', {
+      processId,
+      processName: `Messaging Process ${processId}`
+    });
 
-//     // Dispatch l'événement avant la navigation
-//     document.dispatchEvent(new CustomEvent('newMessagingProcess', {
-//       detail: {
-//         processId: processId,
-//         processName: `Messaging Process ${processId}`
-//       }
-//     }));
+    // Dispatch l'événement avant la navigation
+    document.dispatchEvent(new CustomEvent('newMessagingProcess', {
+      detail: {
+        processId: processId,
+        processName: `Messaging Process ${processId}`
+      }
+    }));
     
-//     // Navigation vers le chat
-//     const navigateEvent = new CustomEvent('navigate', {
-//       detail: {
-//         page: 'chat',
-//         processId: processId || ''
-//       }
-//     });
-//     document.dispatchEvent(navigateEvent);
-//     return;
-//   }
-//   option.setAttribute('selected', '');
-//   createToken(wrapper, e.target.dataset.value);
-//   if (input_search.value) {
-//     input_search.value = '';
-//   }
+    // Navigation vers le chat
+    const navigateEvent = new CustomEvent('navigate', {
+      detail: {
+        page: 'chat',
+        processId: processId || ''
+      }
+    });
+    document.dispatchEvent(navigateEvent);
+    return;
+  }
+  option.setAttribute('selected', '');
+  createToken(wrapper, e.target.dataset.value);
+  if (input_search.value) {
+    input_search.value = '';
+  }
 
-//   showSelectedProcess(e.target.dataset.value);
+  showSelectedProcess(e.target.dataset.value);
 
-//   input_search.focus();
+  input_search.focus();
 
-//   e.target.remove();
-//   const autocomplete_list = wrapper.querySelector('.autocomplete-list');
+  e.target.remove();
+  const autocomplete_list = wrapper.querySelector('.autocomplete-list');
 
-//   if (!autocomplete_list.children.length) {
-//     const li = document.createElement('li');
-//     li.classList.add('not-cursor');
-//     li.innerText = 'No options found';
-//     autocomplete_list.appendChild(li);
-//   }
+  if (!autocomplete_list.children.length) {
+    const li = document.createElement('li');
+    li.classList.add('not-cursor');
+    li.innerText = 'No options found';
+    autocomplete_list.appendChild(li);
+  }
 
-//   const event = new Event('keyup');
-//   input_search.dispatchEvent(event);
-//   e.stopPropagation();
-// }
+  const event = new Event('keyup');
+  input_search.dispatchEvent(event);
+  e.stopPropagation();
+}
 
-// // function that returns a list with the autcomplete list of matches
-// function autocomplete(query: string, options: any) {
-//   // No query passed, just return entire list
-//   if (!query) {
-//     return options;
-//   }
-//   let options_return = [];
+// function that returns a list with the autcomplete list of matches
+function autocomplete(query: string, options: any) {
+  // No query passed, just return entire list
+  if (!query) {
+    return options;
+  }
+  let options_return = [];
 
-//   for (let i = 0; i < options.length; i++) {
-//     if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
-//       options_return.push(options[i]);
-//     }
-//   }
-//   return options_return;
-// }
+  for (let i = 0; i < options.length; i++) {
+    if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
+      options_return.push(options[i]);
+    }
+  }
+  return options_return;
+}
 
-// // Returns the options that are selected by the user and the ones that are not
-// function getOptions(select: HTMLSelectElement) {
-//   // Select all the options available
-//   const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
+// Returns the options that are selected by the user and the ones that are not
+function getOptions(select: HTMLSelectElement) {
+  // Select all the options available
+  const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
 
-//   // Get the options that are selected from the user
-//   const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
+  // Get the options that are selected from the user
+  const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
 
-//   // Create an autocomplete options array with the options that are not selected by the user
-//   const autocomplete_options: any[] = [];
-//   all_options.forEach((option) => {
-//     if (!options_selected.includes(option)) {
-//       autocomplete_options.push(option);
-//     }
-//   });
+  // Create an autocomplete options array with the options that are not selected by the user
+  const autocomplete_options: any[] = [];
+  all_options.forEach((option) => {
+    if (!options_selected.includes(option)) {
+      autocomplete_options.push(option);
+    }
+  });
 
-//   autocomplete_options.sort();
+  autocomplete_options.sort();
 
-//   return {
-//     options_selected,
-//     autocomplete_options,
-//   };
-// }
+  return {
+    options_selected,
+    autocomplete_options,
+  };
+}
 
-// // Listener for when the user wants to remove a given token.
-// function removeToken(e: Event) {
-//   // Get the value to remove
-//   const target = e.target as HTMLSelectElement;
-//   const value_to_remove = target.dataset.option;
-//   const wrapper = target.parentNode?.parentNode?.parentNode;
-//   const input_search = wrapper?.querySelector('.selected-input');
-//   const dropdown = wrapper?.querySelector('.dropdown-icon');
-//   // Get the options in the select to be unselected
-//   const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
-//   option_to_unselect?.removeAttribute('selected');
-//   // Remove token attribute
-//   (target.parentNode as any)?.remove();
-//   dropdown?.classList.remove('active');
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+// Listener for when the user wants to remove a given token.
+function removeToken(e: Event) {
+  // Get the value to remove
+  const target = e.target as HTMLSelectElement;
+  const value_to_remove = target.dataset.option;
+  const wrapper = target.parentNode?.parentNode?.parentNode;
+  const input_search = wrapper?.querySelector('.selected-input');
+  const dropdown = wrapper?.querySelector('.dropdown-icon');
+  // Get the options in the select to be unselected
+  const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
+  option_to_unselect?.removeAttribute('selected');
+  // Remove token attribute
+  (target.parentNode as any)?.remove();
+  dropdown?.classList.remove('active');
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-//   const process = container.querySelector('#' + target.dataset.option);
-//   process?.remove();
-// }
+  const process = container.querySelector('#' + target.dataset.option);
+  process?.remove();
+}
 
-// // Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
-// function deletePressed(e: Event) {
-//   const input_search = e.target as HTMLInputElement;
-//   const wrapper = input_search?.parentNode?.parentNode;
-//   const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
-//   const tokens = wrapper?.querySelectorAll('.selected-wrapper');
+// Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
+function deletePressed(e: Event) {
+  const input_search = e.target as HTMLInputElement;
+  const wrapper = input_search?.parentNode?.parentNode;
+  const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
+  const tokens = wrapper?.querySelectorAll('.selected-wrapper');
 
-//   if (tokens?.length) {
-//     const last_token_x = tokens[tokens.length - 1].querySelector('a');
-//     let hits = +(last_token_x?.dataset?.hits || 0);
+  if (tokens?.length) {
+    const last_token_x = tokens[tokens.length - 1].querySelector('a');
+    let hits = +(last_token_x?.dataset?.hits || 0);
 
-//     if (key == 8 || key == 46) {
-//       if (!input_search.value) {
-//         if (hits > 1) {
-//           // Trigger delete event
-//           const event = new Event('click');
-//           last_token_x?.dispatchEvent(event);
-//         } else {
-//           if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
-//         }
-//       }
-//     } else {
-//       if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
-//     }
-//   }
-//   return true;
-// }
+    if (key == 8 || key == 46) {
+      if (!input_search.value) {
+        if (hits > 1) {
+          // Trigger delete event
+          const event = new Event('click');
+          last_token_x?.dispatchEvent(event);
+        } else {
+          if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
+        }
+      }
+    } else {
+      if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
+    }
+  }
+  return true;
+}
 
-// // Dismiss on outside click
-// addSubscription(document, 'click', () => {
-//   // get select that has the options available
-//   const select = document.querySelectorAll('[data-multi-select-plugin]');
-//   for (let i = 0; i < select.length; i++) {
-//     if (event) {
-//       var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
+// Dismiss on outside click
+addSubscription(document, 'click', () => {
+  // get select that has the options available
+  const select = document.querySelectorAll('[data-multi-select-plugin]');
+  for (let i = 0; i < select.length; i++) {
+    if (event) {
+      var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
 
-//       if (!isClickInside) {
-//         const wrapper = select[i].parentElement?.parentElement;
-//         const dropdown = wrapper?.querySelector('.dropdown-icon');
-//         const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
-//         //the click was outside the specifiedElement, do something
-//         dropdown?.classList.remove('active');
-//         if (autocomplete_list) autocomplete_list.innerHTML = '';
-//         addPlaceholder(wrapper as HTMLElement);
-//       }
-//     }
-//   }
-// });
+      if (!isClickInside) {
+        const wrapper = select[i].parentElement?.parentElement;
+        const dropdown = wrapper?.querySelector('.dropdown-icon');
+        const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
+        //the click was outside the specifiedElement, do something
+        dropdown?.classList.remove('active');
+        if (autocomplete_list) autocomplete_list.innerHTML = '';
+        addPlaceholder(wrapper as HTMLElement);
+      }
+    }
+  }
+});
 
-// async function showSelectedProcess(elem: MouseEvent) {
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+async function showSelectedProcess(elem: MouseEvent) {
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-//   if (elem) {
-//     const cardContent = container.querySelector('.process-card-content');
+  if (elem) {
+    const cardContent = container.querySelector('.process-card-content');
 
-//     const processes = await getProcesses();
-//     const process = processes.find((process: any) => process[1].title === elem);
-//     if (process) {
-//       const processDiv = document.createElement('div');
-//       processDiv.className = 'process';
-//       processDiv.id = process[0];
-//       const titleDiv = document.createElement('div');
-//       titleDiv.className = 'process-title';
-//       titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
-//       processDiv.appendChild(titleDiv);
-//       for (const zone of process.zones) {
-//         const zoneElement = document.createElement('div');
-//         zoneElement.className = 'process-element';
-//         const zoneId = process[1].title + '-' + zone.id;
-//         zoneElement.setAttribute('zone-id', zoneId);
-//         zoneElement.setAttribute('process-title', process[1].title);
-//         zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
-//         zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
-//         addSubscription(zoneElement, 'click', select);
-//         processDiv.appendChild(zoneElement);
-//       }
-//       if (cardContent) cardContent.appendChild(processDiv);
-//     }
-//   }
-// }
+    const processes = await getProcesses();
+    const process = processes.find((process: any) => process[1].title === elem);
+    if (process) {
+      const processDiv = document.createElement('div');
+      processDiv.className = 'process';
+      processDiv.id = process[0];
+      const titleDiv = document.createElement('div');
+      titleDiv.className = 'process-title';
+      titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
+      processDiv.appendChild(titleDiv);
+      for (const zone of process.zones) {
+        const zoneElement = document.createElement('div');
+        zoneElement.className = 'process-element';
+        const zoneId = process[1].title + '-' + zone.id;
+        zoneElement.setAttribute('zone-id', zoneId);
+        zoneElement.setAttribute('process-title', process[1].title);
+        zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
+        zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
+        addSubscription(zoneElement, 'click', select);
+        processDiv.appendChild(zoneElement);
+      }
+      if (cardContent) cardContent.appendChild(processDiv);
+    }
+  }
+}
 
-// function select(event: Event) {
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
-//   const target = event.target as HTMLElement;
-//   const oldSelectedProcess = container.querySelector('.selected-process-zone');
-//   oldSelectedProcess?.classList.remove('selected-process-zone');
-//   if (target) {
-//     target.classList.add('selected-process-zone');
-//   }
-//   const name = target.getAttribute('zone-id');
-//   console.log('🚀 ~ select ~ name:', name);
-// }
+function select(event: Event) {
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+  const target = event.target as HTMLElement;
+  const oldSelectedProcess = container.querySelector('.selected-process-zone');
+  oldSelectedProcess?.classList.remove('selected-process-zone');
+  if (target) {
+    target.classList.add('selected-process-zone');
+  }
+  const name = target.getAttribute('zone-id');
+  console.log('🚀 ~ select ~ name:', name);
+}
 
-// function goToProcessPage() {
-//   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
+function goToProcessPage() {
+  const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
-//   const target = container.querySelector('.selected-process-zone');
-//   console.log('🚀 ~ goToProcessPage ~ event:', target);
-//   if (target) {
-//     const process = target?.getAttribute('process-id');
+  const target = container.querySelector('.selected-process-zone');
+  console.log('🚀 ~ goToProcessPage ~ event:', target);
+  if (target) {
+    const process = target?.getAttribute('process-id');
 
-//     console.log('=======================> going to process page', process);
-//     // navigate('process-element/' + process);
-//     document.querySelector('process-list-4nk-component')?.dispatchEvent(
-//       new CustomEvent('processSelected', {
-//         detail: {
-//           process: process,
-//         },
-//       }),
-//     );
-//   }
-// }
+    console.log('=======================> going to process page', process);
+    // navigate('process-element/' + process);
+    document.querySelector('process-list-4nk-component')?.dispatchEvent(
+      new CustomEvent('processSelected', {
+        detail: {
+          process: process,
+        },
+      }),
+    );
+  }
+}
 
-// (window as any).goToProcessPage = goToProcessPage;
+(window as any).goToProcessPage = goToProcessPage;
 
-// async function createMessagingProcess(): Promise<void> {
-//   console.log('Creating messaging process');
-//   const service = await Services.getInstance();
-//   const otherMembers = [
-//     {
-//       sp_addresses: [
-//         "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
-//         "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
-//       ]
-//     },
-//     {
-//       sp_addresses: [
-//         "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
-//         "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
-//       ]
-//     },
-//     {
-//       sp_addresses: [
-//         "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
-//         "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
-//       ]
-//     }
-//   ];
-//   await service.checkConnections(otherMembers);
-//   const relayAddress = service.getAllRelays().pop();
-//   if (!relayAddress) {
-//     throw new Error('Empty relay address list');
-//   }
-//   const feeRate = 1;
-//   setTimeout(async () => {
-//     const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
-//     const updatedProcess = createProcessReturn.updated_process.current_process;
-//     if (!updatedProcess) {
-//       console.error('Failed to retrieved new messaging process');
-//       return;
-//     }
-//     const processId = updatedProcess.states[0].commited_in;
-//     const stateId = updatedProcess.states[0].state_id;
-//     await service.handleApiReturn(createProcessReturn);
-//     const createPrdReturn = await service.createPrdUpdate(processId, stateId);
-//     await service.handleApiReturn(createPrdReturn);
-//     const approveChangeReturn = await service.approveChange(processId, stateId);
-//     await service.handleApiReturn(approveChangeReturn);
-//   }, 500)
-// }
+async function createMessagingProcess(): Promise<void> {
+  console.log('Creating messaging process');
+  const service = await Services.getInstance();
+  const otherMembers = [
+    {
+      sp_addresses: [
+        "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
+        "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
+      ]
+    },
+    {
+      sp_addresses: [
+        "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
+        "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
+      ]
+    },
+    {
+      sp_addresses: [
+        "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
+        "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
+      ]
+    }
+  ];
+  await service.checkConnections(otherMembers);
+  const relayAddress = service.getAllRelays().pop();
+  if (!relayAddress) {
+    throw new Error('Empty relay address list');
+  }
+  const feeRate = 1;
+  setTimeout(async () => {
+    const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
+    const updatedProcess = createProcessReturn.updated_process.current_process;
+    if (!updatedProcess) {
+      console.error('Failed to retrieved new messaging process');
+      return;
+    }
+    const processId = updatedProcess.states[0].commited_in;
+    const stateId = updatedProcess.states[0].state_id;
+    await service.handleApiReturn(createProcessReturn);
+    const createPrdReturn = await service.createPrdUpdate(processId, stateId);
+    await service.handleApiReturn(createPrdReturn);
+    const approveChangeReturn = await service.approveChange(processId, stateId);
+    await service.handleApiReturn(approveChangeReturn);
+  }, 500)
+}
 
-// async function getDescription(processId: string, process: Process): Promise<string | null> {
-//   const service = await Services.getInstance();
-//   // Get the `commited_in` value of the last state and remove it from the array
-//   const currentCommitedIn = process.states.pop()?.commited_in;
+async function getDescription(processId: string, process: Process): Promise<string | null> {
+  const service = await Services.getInstance();
+  // Get the `commited_in` value of the last state and remove it from the array
+  const currentCommitedIn = process.states.pop()?.commited_in;
 
-//   if (currentCommitedIn === undefined) {
-//     return null; // No states available
-//   }
+  if (currentCommitedIn === undefined) {
+    return null; // No states available
+  }
 
-//   // Find the last state where `commited_in` is different
-//   let lastDifferentState = process.states.findLast(
-//     state => state.commited_in !== currentCommitedIn
-//   );
+  // Find the last state where `commited_in` is different
+  let lastDifferentState = process.states.findLast(
+    state => state.commited_in !== currentCommitedIn
+  );
 
-//   if (!lastDifferentState) {
-//     // It means that we only have one state that is not commited yet, that can happen with process we just created
-//     // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
-//     lastDifferentState = process.states.pop();
-//   }
+  if (!lastDifferentState) {
+    // It means that we only have one state that is not commited yet, that can happen with process we just created
+    // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
+    lastDifferentState = process.states.pop();
+  }
 
-//   // Take the description out of the state, if any
-//   const description = lastDifferentState!.pcd_commitment['description'];
-//   if (description) {
-//     const userDiff = await service.getDiffByValue(description);
-//     if (userDiff) {
-//       console.log("Successfully retrieved userDiff:", userDiff);
-//       return userDiff.new_value;
-//     } else {
-//       console.log("Failed to retrieve a non-null userDiff.");
-//     }
-//   }
+  // Take the description out of the state, if any
+  const description = lastDifferentState!.pcd_commitment['description'];
+  if (description) {
+    const userDiff = await service.getDiffByValue(description);
+    if (userDiff) {
+      console.log("Successfully retrieved userDiff:", userDiff);
+      return userDiff.new_value;
+    } else {
+      console.log("Failed to retrieve a non-null userDiff.");
+    }
+  }
 
-//   return null;
-// }
+  return null;
+}

src/service-workers/database.worker.js

@@ -45,21 +45,6 @@ self.addEventListener('message', async (event) => {
     } catch (error) {
       event.ports[0].postMessage({ status: 'error', message: error.message });
     }
-  } else if (data.type === 'BATCH_WRITING') {
-    const { storeName, objects } = data.payload;
-    const db = await openDatabase();
-    const tx = db.transaction(storeName, 'readwrite');
-    const store = tx.objectStore(storeName);
-
-    for (const { key, object } of objects) {
-      if (key) {
-        await store.put(object, key);
-      } else {
-        await store.put(object);
-      }
-    }
-
-    await tx.done;
   }
 });
 

src/services/chat.service.ts

@@ -0,0 +1,38 @@
+import Services from './service';
+import { init, navigate } from '../router';
+import { RoleDefinition } from 'pkg/sdk_client';
+import { Member } from 'pkg/sdk_client';
+
+export default class ChatService {
+    private static instance: ChatService;
+    private stateId: string | null = null;
+    private processId: string | null = null;
+    private paired_member: string[] = [];
+    constructor() {}
+
+    public static async getInstance(): Promise<ChatService> {
+        if (!ChatService.instance) {
+            ChatService.instance = new ChatService();
+        }
+        return ChatService.instance;
+    }
+
+    async getLocalMember ()  {
+        try {
+            const service = await Services.getInstance();
+            const currentUser = service.getMemberFromDevice();
+            return currentUser
+        } catch (e) {
+            console.error('Error initializing services:', e);
+        }
+    }
+
+    async loadMessagingProcess (commitedIn: string) {
+        try{
+            const service = await Services.getInstance();
+            const stored = service.getProcess(commitedIn)
+        } catch (e) {
+            console.error('Error loading Messaging Process', e);
+        }
+    }
+}

src/services/database.service.ts

@@ -84,6 +84,7 @@ export class Database {
 
       request.onsuccess = async () => {
         this.db = request.result;
+        await this.initServiceWorker();
         resolve();
       };
 
@@ -109,16 +110,15 @@ export class Database {
     return objectList;
   }
 
-  public async registerServiceWorker(path: string) {
+  private async initServiceWorker() {
     if (!('serviceWorker' in navigator)) return; // Ensure service workers are supported
-    console.log('registering worker at', path);
 
     try {
       // Get existing service worker registrations
       const registrations = await navigator.serviceWorker.getRegistrations();
       if (registrations.length === 0) {
         // No existing workers: register a new one.
-        this.serviceWorkerRegistration = await navigator.serviceWorker.register(path, { type: 'module' });
+        this.serviceWorkerRegistration = await navigator.serviceWorker.register('/src/service-workers/database.worker.js', { type: 'module' });
         console.log('Service Worker registered with scope:', this.serviceWorkerRegistration.scope);
       } else if (registrations.length === 1) {
         // One existing worker: update it (restart it) without unregistering.
@@ -130,7 +130,7 @@ export class Database {
         console.log('Multiple Service Worker(s) detected. Unregistering all...');
         await Promise.all(registrations.map(reg => reg.unregister()));
         console.log('All previous Service Workers unregistered.');
-        this.serviceWorkerRegistration = await navigator.serviceWorker.register(path, { type: 'module' });
+        this.serviceWorkerRegistration = await navigator.serviceWorker.register('/src/service-workers/database.worker.js', { type: 'module' });
         console.log('Service Worker registered with scope:', this.serviceWorkerRegistration.scope);
       }
 
@@ -142,15 +142,15 @@ export class Database {
         await this.handleServiceWorkerMessage(event.data);
       });
 
-      // Set up a periodic check to ensure the service worker is active and to send a SCAN message.
+      // Set up a periodic check to ensure the service worker is active and to send a SYNC message.
       this.serviceWorkerCheckIntervalId = window.setInterval(async () => {
-        const activeWorker = this.serviceWorkerRegistration?.active || (await this.waitForServiceWorkerActivation(this.serviceWorkerRegistration!));
+        const activeWorker = this.serviceWorkerRegistration.active || (await this.waitForServiceWorkerActivation(this.serviceWorkerRegistration));
         const service = await Services.getInstance();
         const payload = await service.getMyProcesses();
-        if (payload && payload.length != 0) {
+        if (payload.length != 0) {
           activeWorker?.postMessage({ type: 'SCAN', payload });
         }
-      }, 5000);
+      }, 5000); 
     } catch (error) {
       console.error('Service Worker registration failed:', error);
     }
@@ -199,9 +199,9 @@ export class Database {
     }
   }
 
-  private async handleDownloadList(downloadList: string[]): Promise<void> {
+  private async handleDownloadList(downloadList: string[]): void {
     // Download the missing data
-    let requestedStateId: string[] = [];
+    let requestedStateId = [];
     const service = await Services.getInstance();
     for (const hash of downloadList) {
       const diff = await service.getDiffByValue(hash);
@@ -219,8 +219,8 @@ export class Database {
           // Save data to db
           const blob = new Blob([valueBytes], {type: "application/octet-stream"});
           await service.saveBlobToDb(hash, blob);
-          document.dispatchEvent(new CustomEvent('newDataReceived', {
-            detail: {
+          document.dispatchEvent(new CustomEvent('newDataReceived', { 
+            detail: { 
               processId,
               stateId,
               hash,
@@ -250,7 +250,7 @@ export class Database {
     } else if (data.type === 'TO_DOWNLOAD') {
       console.log(`Received missing data ${data}`);
       // Download the missing data
-      let requestedStateId: string[] = [];
+      let requestedStateId = [];
       for (const hash of data.data) {
         try {
           const valueBytes = await service.fetchValueFromStorage(hash);
@@ -263,12 +263,9 @@ export class Database {
             console.log('Request data from managers of the process');
             // get the diff from db
             const diff = await service.getDiffByValue(hash);
-            if (diff === null) {
-              continue;
-            }
-            const processId = diff!.process_id;
-            const stateId = diff!.state_id;
-            const roles = diff!.roles;
+            const processId = diff.process_id;
+            const stateId = diff.state_id;
+            const roles = diff.roles;
             if (!requestedStateId.includes(stateId)) {
               await service.requestDataFromPeers(processId, [stateId], [roles]);
               requestedStateId.push(stateId);
@@ -287,49 +284,10 @@ export class Database {
 
   public addObject(payload: { storeName: string; object: any; key: any }): Promise<void> {
     return new Promise(async (resolve, reject) => {
-      // Fallback: si Service Worker indisponible (ex: iframe tiers), écriture directe IndexedDB
-      if (!('serviceWorker' in navigator)) {
-        try {
-          const db = await this.getDb();
-          const tx = (db as any).transaction(payload.storeName, 'readwrite');
-          const store = tx.objectStore(payload.storeName);
-          if (payload.key) {
-            await store.put(payload.object, payload.key);
-          } else {
-            await store.put(payload.object);
-          }
-          resolve();
-          return;
-        } catch (error: any) {
-          reject(new Error(error?.message || 'IndexedDB write failed'));
-          return;
-        }
-      }
-
       // Check if the service worker is active
       if (!this.serviceWorkerRegistration) {
-        try {
-          // console.warn('Service worker registration is not ready. Waiting...');
-          this.serviceWorkerRegistration = await navigator.serviceWorker.ready;
-        } catch (error) {
-          // Si le service worker n'est pas disponible, fallback vers IndexedDB direct
-          console.warn('Service worker not available, falling back to direct IndexedDB');
-          try {
-            const db = await this.getDb();
-            const tx = (db as any).transaction(payload.storeName, 'readwrite');
-            const store = tx.objectStore(payload.storeName);
-            if (payload.key) {
-              await store.put(payload.object, payload.key);
-            } else {
-              await store.put(payload.object);
-            }
-            resolve();
-            return;
-          } catch (dbError: any) {
-            reject(new Error(dbError?.message || 'IndexedDB write failed'));
-            return;
-          }
-        }
+        // console.warn('Service worker registration is not ready. Waiting...');
+        this.serviceWorkerRegistration = await navigator.serviceWorker.ready;
       }
 
       const activeWorker = await this.waitForServiceWorkerActivation(this.serviceWorkerRegistration);
@@ -360,60 +318,7 @@ export class Database {
         reject(new Error(`Failed to send message to service worker: ${error}`));
       }
     });
-  }
-
-  public batchWriting(payload: { storeName: string; objects: { key: any; object: any }[] }): Promise<void> {
-    return new Promise(async (resolve, reject) => {
-      // Fallback direct IndexedDB si Service Worker indisponible
-      if (!('serviceWorker' in navigator)) {
-        try {
-          const db = await this.getDb();
-          const tx = (db as any).transaction(payload.storeName, 'readwrite');
-          const store = tx.objectStore(payload.storeName);
-          for (const { key, object } of payload.objects) {
-            if (key) {
-              await store.put(object, key);
-            } else {
-              await store.put(object);
-            }
-          }
-          resolve();
-          return;
-        } catch (error: any) {
-          reject(new Error(error?.message || 'IndexedDB batch write failed'));
-          return;
-        }
-      }
-
-      if (!this.serviceWorkerRegistration) {
-        this.serviceWorkerRegistration = await navigator.serviceWorker.ready;
-      }
-
-      const activeWorker = await this.waitForServiceWorkerActivation(this.serviceWorkerRegistration);
-      const messageChannel = new MessageChannel();
-
-      messageChannel.port1.onmessage = (event) => {
-        if (event.data.status === 'success') {
-          resolve();
-        } else {
-          const error = event.data.message;
-          reject(new Error(error || 'Unknown error occurred while adding objects'));
-        }
-      };
-
-      try {
-        activeWorker?.postMessage(
-          {
-            type: 'BATCH_WRITING',
-            payload,
-          },
-          [messageChannel.port2],
-        );
-      } catch (error) {
-        reject(new Error(`Failed to send message to service worker: ${error}`));
-      }
-    });
-  }
+  } 
 
   public async getObject(storeName: string, key: string): Promise<any | null> {
     const db = await this.getDb();
@@ -424,7 +329,7 @@ export class Database {
       getRequest.onsuccess = () => resolve(getRequest.result);
       getRequest.onerror = () => reject(getRequest.error);
     });
-    return result ?? null; // Convert undefined to null
+    return result;
   }
 
   public async dumpStore(storeName: string): Promise<Record<string, any>> {
@@ -433,25 +338,23 @@ export class Database {
     const store = tx.objectStore(storeName);
 
     try {
-      return new Promise((resolve, reject) => {
-        const result: Record<string, any> = {};
-        const cursor = store.openCursor();
+      // Wait for both getAllKeys() and getAll() to resolve
+      const [keys, values] = await Promise.all([
+        new Promise<any[]>((resolve, reject) => {
+          const request = store.getAllKeys();
+          request.onsuccess = () => resolve(request.result);
+          request.onerror = () => reject(request.error);
+        }),
+        new Promise<any[]>((resolve, reject) => {
+          const request = store.getAll();
+          request.onsuccess = () => resolve(request.result);
+          request.onerror = () => reject(request.error);
+        }),
+      ]);
 
-        cursor.onsuccess = (event) => {
-          const request = event.target as IDBRequest<IDBCursorWithValue | null>;
-          const cursor = request.result;
-          if (cursor) {
-            result[cursor.key as string] = cursor.value;
-            cursor.continue();
-          } else {
-            resolve(result);
-          }
-        };
-
-        cursor.onerror = () => {
-          reject(cursor.error);
-        };
-      });
+      // Combine keys and values into an object
+      const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
+      return result;
     } catch (error) {
       console.error('Error fetching data from IndexedDB:', error);
       throw error;

src/services/modal.service.ts

@@ -1,230 +1,260 @@
-import modalHtml from '../components/login-modal/login-modal.html?raw';
-import modalScript from '../components/login-modal/login-modal.js?raw';
-import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
-import Services from './service';
-import { init, navigate } from '../router';
-import { addressToEmoji } from '../utils/sp-address.utils';
-import { RoleDefinition } from '.././pkg/sdk_client.js';
-import { initValidationModal } from '~/components/validation-modal/validation-modal';
-import { interpolate } from '~/utils/html.utils';
-
-interface ConfirmationModalOptions {
-  title: string;
-  content: string;
-  confirmText?: string;
-  cancelText?: string;
-}
-
-export default class ModalService {
-  private static instance: ModalService;
-  private stateId: string | null = null;
-  private processId: string | null = null;
-  private constructor() {}
-  private paired_addresses: string[] = [];
-  private modal: HTMLElement | null = null;
-
-  // Method to access the singleton instance of Services
-  public static async getInstance(): Promise<ModalService> {
-    if (!ModalService.instance) {
-      ModalService.instance = new ModalService();
-    }
-    return ModalService.instance;
-  }
-
-  public openLoginModal(myAddress: string, receiverAddress: string) {
-    const container = document.querySelector('.page-container');
-    let html = modalHtml;
-    html = html.replace('{{device1}}', myAddress);
-    html = html.replace('{{device2}}', receiverAddress);
-    if (container) container.innerHTML += html;
-    const modal = document.getElementById('login-modal');
-    if (modal) modal.style.display = 'flex';
-    const newScript = document.createElement('script');
-
-    newScript.setAttribute('type', 'module');
-    newScript.textContent = modalScript;
-    document.head.appendChild(newScript).parentNode?.removeChild(newScript);
-  }
-
-  async injectModal(members: any[]) {
-    const container = document.querySelector('#containerId');
-    if (container) {
-      let html = await fetch('/src/components/modal/confirmation-modal.html').then((res) => res.text());
-      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
-      html = html.replace('{{device2}}', await addressToEmoji(members[0]['sp_addresses'][1]));
-      container.innerHTML += html;
-
-      // Dynamically load the header JS
-      const script = document.createElement('script');
-      script.src = '/src/components/modal/confirmation-modal.ts';
-      script.type = 'module';
-      document.head.appendChild(script);
-    }
-  }
-
-  async injectCreationModal(members: any[]) {
-    const container = document.querySelector('#containerId');
-    if (container) {
-      let html = await fetch('/src/components/modal/creation-modal.html').then((res) => res.text());
-      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
-      container.innerHTML += html;
-
-      // Dynamically load the header JS
-      const script = document.createElement('script');
-      script.src = '/src/components/modal/confirmation-modal.ts';
-      script.type = 'module';
-      document.head.appendChild(script);
-    }
-  }
-
-  // Device 1 wait Device 2
-  async injectWaitingModal() {
-    const container = document.querySelector('#containerId');
-    if (container) {
-      let html = await fetch('/src/components/modal/waiting-modal.html').then((res) => res.text());
-      container.innerHTML += html;
-    }
-  }
-
-  async injectValidationModal(processDiff: any) {
-    const container = document.querySelector('#containerId');
-    if (container) {
-      let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
-      html = interpolate(html, {processId: processDiff.processId})
-      container.innerHTML += html;
-
-      // Dynamically load the header JS
-      const script = document.createElement('script');
-      script.id = 'validation-modal-script';
-      script.src = '/src/components/validation-modal/validation-modal.ts';
-      script.type = 'module';
-      document.head.appendChild(script);
-      const css = document.createElement('style');
-      css.id = 'validation-modal-css';
-      css.innerText = validationModalStyle;
-      document.head.appendChild(css);
-      initValidationModal(processDiff)
-    }
-  }
-
-  async closeValidationModal() {
-    const script = document.querySelector('#validation-modal-script');
-    const css = document.querySelector('#validation-modal-css');
-    const component = document.querySelector('#validation-modal');
-    script?.remove();
-    css?.remove();
-    component?.remove();
-  }
-
-  public async openPairingConfirmationModal(roleDefinition: Record<string, RoleDefinition>, processId: string, stateId: string) {
-    let members;
-    if (roleDefinition['pairing']) {
-      const owner = roleDefinition['pairing'];
-      members = owner.members;
-    } else {
-      throw new Error('No "pairing" role');
-    }
-
-    if (members.length != 1) {
-      throw new Error('Must have exactly 1 member');
-    }
-
-    console.log("MEMBERS:", members);
-    // We take all the addresses except our own
-    const service = await Services.getInstance();
-    const localAddress = service.getDeviceAddress();
-    for (const member of members) {
-      if (member.sp_addresses) {
-        for (const address of member.sp_addresses) {
-          if (address !== localAddress) {
-            this.paired_addresses.push(address);
-          }
-        }
-      }
-    }
-    this.processId = processId;
-    this.stateId = stateId;
-
-    if (members[0].sp_addresses.length === 1) {
-      await this.injectCreationModal(members);
-      this.modal = document.getElementById('creation-modal');
-      console.log("LENGTH:", members[0].sp_addresses.length);
-    } else {
-      await this.injectModal(members);
-      this.modal = document.getElementById('modal');
-      console.log("LENGTH:", members[0].sp_addresses.length);
-    }
-
-    if (this.modal) this.modal.style.display = 'flex';
-
-    // Close modal when clicking outside of it
-    window.onclick = (event) => {
-      if (event.target === this.modal) {
-        this.closeConfirmationModal();
-      }
-    };
-  }
-  confirmLogin() {
-    console.log('=============> Confirm Login');
-  }
-  async closeLoginModal() {
-    if (this.modal) this.modal.style.display = 'none';
-  }
-
-  async showConfirmationModal(options: ConfirmationModalOptions, fullscreen: boolean = false): Promise<boolean> {
-    // Create modal element
-    const modalElement = document.createElement('div');
-    modalElement.id = 'confirmation-modal';
-    modalElement.innerHTML = `
-      <div class="modal-overlay">
-        <div class="modal-content" ${fullscreen ? 'style="width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; margin: 0 !important;"' : ''}>
-          <h2>${options.title}</h2>
-          <div class="modal-body">
-            ${options.content}
-          </div>
-          <div class="modal-footer">
-            <button id="cancel-button" class="btn btn-secondary">${options.cancelText || 'Annuler'}</button>
-            <button id="confirm-button" class="btn btn-primary">${options.confirmText || 'Confirmer'}</button>
-          </div>
-        </div>
-      </div>
-    `;
-
-    // Add modal to document
-    document.body.appendChild(modalElement);
-
-    // Return promise that resolves with user choice
-    return new Promise((resolve) => {
-      const confirmButton = modalElement.querySelector('#confirm-button');
-      const cancelButton = modalElement.querySelector('#cancel-button');
-      const modalOverlay = modalElement.querySelector('.modal-overlay');
-
-      const cleanup = () => {
-        modalElement.remove();
-      };
-
-      confirmButton?.addEventListener('click', () => {
-        cleanup();
-        resolve(true);
-      });
-
-      cancelButton?.addEventListener('click', () => {
-        cleanup();
-        resolve(false);
-      });
-
-      modalOverlay?.addEventListener('click', (e) => {
-        if (e.target === modalOverlay) {
-          cleanup();
-          resolve(false);
-        }
-      });
-    });
-  }
-
-  async closeConfirmationModal() {
-    const service = await Services.getInstance();
-    await service.unpairDevice();
-    if (this.modal) this.modal.style.display = 'none';
-  }
-}
+import modalHtml from '../components/login-modal/login-modal.html?raw';
+import modalScript from '../components/login-modal/login-modal.js?raw';
+import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
+import Services from './service';
+import { init, navigate } from '../router';
+import { addressToEmoji } from '../utils/sp-address.utils';
+import { RoleDefinition } from 'pkg/sdk_client';
+import { initValidationModal } from '~/components/validation-modal/validation-modal';
+import { interpolate } from '~/utils/html.utils';
+
+export default class ModalService {
+  private static instance: ModalService;
+  private stateId: string | null = null;
+  private processId: string | null = null;
+  private constructor() {}
+  private paired_addresses: string[] = [];
+  private modal: HTMLElement | null = null;
+
+  // Method to access the singleton instance of Services
+  public static async getInstance(): Promise<ModalService> {
+    if (!ModalService.instance) {
+      ModalService.instance = new ModalService();
+    }
+    return ModalService.instance;
+  }
+
+  public openLoginModal(myAddress: string, receiverAddress: string) {
+    const container = document.querySelector('.page-container');
+    let html = modalHtml;
+    html = html.replace('{{device1}}', myAddress);
+    html = html.replace('{{device2}}', receiverAddress);
+    if (container) container.innerHTML += html;
+    const modal = document.getElementById('login-modal');
+    if (modal) modal.style.display = 'flex';
+    const newScript = document.createElement('script');
+
+    newScript.setAttribute('type', 'module');
+    newScript.textContent = modalScript;
+    document.head.appendChild(newScript).parentNode?.removeChild(newScript);
+  }
+
+  async injectModal(members: any[]) {
+    const container = document.querySelector('#containerId');
+    if (container) {
+      let html = await fetch('/src/components/modal/confirmation-modal.html').then((res) => res.text());
+      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
+      html = html.replace('{{device2}}', await addressToEmoji(members[0]['sp_addresses'][1]));
+      container.innerHTML += html;
+
+      // Dynamically load the header JS
+      const script = document.createElement('script');
+      script.src = '/src/components/modal/confirmation-modal.ts';
+      script.type = 'module';
+      document.head.appendChild(script);
+    }
+  }
+
+  async injectCreationModal(members: any[]) {
+    const container = document.querySelector('#containerId');
+    if (container) {
+      let html = await fetch('/src/components/modal/creation-modal.html').then((res) => res.text());
+      html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
+      container.innerHTML += html;
+
+      // Dynamically load the header JS
+      const script = document.createElement('script');
+      script.src = '/src/components/modal/confirmation-modal.ts';
+      script.type = 'module';
+      document.head.appendChild(script);
+    }
+  }
+
+  // Device 1 wait Device 2
+  async injectWaitingModal() {
+    const container = document.querySelector('#containerId');
+    if (container) {
+      let html = await fetch('/src/components/modal/waiting-modal.html').then((res) => res.text());
+      container.innerHTML += html;
+    } 
+  }
+
+  async injectValidationModal(processDiff: any) {
+    const container = document.querySelector('#containerId');
+    if (container) {
+      let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
+      html = interpolate(html, {processId: processDiff.processId})
+      container.innerHTML += html;
+
+      // Dynamically load the header JS
+      const script = document.createElement('script');
+      script.id = 'validation-modal-script';
+      script.src = '/src/components/validation-modal/validation-modal.ts';
+      script.type = 'module';
+      document.head.appendChild(script);
+      const css = document.createElement('style');
+      css.id = 'validation-modal-css';
+      css.innerText = validationModalStyle;
+      document.head.appendChild(css);
+      initValidationModal(processDiff)
+    }
+  }
+
+  async closeValidationModal() {
+    const script = document.querySelector('#validation-modal-script');
+    const css = document.querySelector('#validation-modal-css');
+    const component = document.querySelector('#validation-modal');
+    script?.remove();
+    css?.remove();
+    component?.remove();
+  }
+
+  public async openPairingConfirmationModal(roleDefinition: Record<string, RoleDefinition>, processId: string, stateId: string) {
+    let members;
+    if (roleDefinition['pairing']) {
+      const owner = roleDefinition['pairing'];
+      members = owner.members;
+    } else {
+      throw new Error('No "pairing" role');
+    }
+
+    if (members.length != 1) {
+      throw new Error('Must have exactly 1 member');
+    }
+
+    console.log("MEMBERS:", members);
+    // We take all the addresses except our own
+    const service = await Services.getInstance();
+    const localAddress = await service.getDeviceAddress();
+    for (const member of members) {
+      if (member.sp_addresses) {
+        for (const address of member.sp_addresses) {
+          if (address !== localAddress) {
+            this.paired_addresses.push(address);
+          }
+        }
+      }
+    }
+    this.processId = processId;
+    this.stateId = stateId;
+
+    if (members[0].sp_addresses.length === 1) {
+      await this.injectCreationModal(members);
+      this.modal = document.getElementById('creation-modal');
+      console.log("LENGTH:", members[0].sp_addresses.length);
+    } else {
+      await this.injectModal(members);
+      this.modal = document.getElementById('modal');
+      console.log("LENGTH:", members[0].sp_addresses.length);
+    }
+
+    if (this.modal) this.modal.style.display = 'flex';
+
+    // Close modal when clicking outside of it
+    window.onclick = (event) => {
+      if (event.target === this.modal) {
+        this.closeConfirmationModal();
+      }
+    };
+  }
+  confirmLogin() {
+    console.log('=============> Confirm Login');
+  }
+  async closeLoginModal() {
+    if (this.modal) this.modal.style.display = 'none';
+  }
+
+  async confirmPairing() {
+    const service = await Services.getInstance();
+    if (this.modal) this.modal.style.display = 'none';
+
+    if (service.device1) {
+      console.log("Device 1 detected");
+      // We send the prd update
+      if (this.stateId && this.processId) {
+        try {
+          // Device B shouldn't do this again
+          const createPrdUpdateReturn = service.createPrdUpdate(this.processId, this.stateId);
+          await service.handleApiReturn(createPrdUpdateReturn);
+        } catch (e) {
+          throw e;
+        }
+      } else {
+        throw new Error('No currentPcdCommitment');
+      }
+
+      // We send confirmation that we validate the change
+      try {
+        const approveChangeReturn = await service.approveChange(this.processId!, this.stateId!);
+        await service.handleApiReturn(approveChangeReturn);
+
+        await this.injectWaitingModal();
+        const waitingModal = document.getElementById('waiting-modal');
+        if (waitingModal) waitingModal.style.display = 'flex';
+
+        if (!service.device2Ready) {
+          while (!service.device2Ready) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+          }
+          console.log("Device 2 is ready - Device 1 can now proceed");
+        }
+        service.pairDevice(this.paired_addresses, this.processId);
+        this.paired_addresses = [];
+        this.processId = null;
+        this.stateId = null;
+        const newDevice = service.dumpDeviceFromMemory();
+        console.log(newDevice);
+        await service.saveDeviceInDatabase(newDevice);
+        navigate('chat');
+        service.resetState();
+
+      } catch (e) {
+        throw e;
+      }
+
+    // try {
+    //   service.pairDevice(this.paired_addresses);
+    // } catch (e) {
+    //   throw e;
+    // }
+    } else {
+      console.log("Device 2 detected");
+
+      // if (this.stateId && this.processId) {
+      //   try {
+      //     // Device B shouldn't do this again
+      //     const createPrdUpdateReturn = service.createPrdUpdate(this.processId, this.stateId);
+      //     await service.handleApiReturn(createPrdUpdateReturn);
+      //   } catch (e) {
+      //     throw e;
+      //   }
+      // } else {
+      //   throw new Error('No currentPcdCommitment');
+      // }
+
+      // We send confirmation that we validate the change
+      try {
+        const approveChangeReturn = await service.approveChange(this.processId!, this.stateId!);
+        await service.handleApiReturn(approveChangeReturn);
+      } catch (e) {
+        throw e;
+      }
+
+      service.pairDevice(this.paired_addresses, this.processId!);
+      
+      this.paired_addresses = [];
+      this.processId = null;
+      this.stateId = null;
+      const newDevice = service.dumpDeviceFromMemory();
+      console.log(newDevice);
+      await service.saveDeviceInDatabase(newDevice);
+      navigate('chat');
+    }
+  }
+
+  async closeConfirmationModal() {
+    const service = await Services.getInstance();
+    await service.unpairDevice();
+    if (this.modal) this.modal.style.display = 'none';
+  }
+}

src/services/storage.service.ts

@@ -3,34 +3,15 @@ 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)
-      let url: string;
-      if (server.startsWith('/')) {
-        // Relative path - construct manually for proxy
-        url = `${server}/store/${encodeURIComponent(key)}`;
-        if (ttl !== null) {
-          url += `?ttl=${ttl}`;
-        }
-      } else {
-        // Absolute URL - use URL constructor
-        const urlObj = new URL(`${server}/store/${encodeURIComponent(key)}`);
-        if (ttl !== null) {
-          urlObj.searchParams.append('ttl', ttl.toString());
-        }
-        url = urlObj.toString();
-      }
-
-      // Test first that data is not already stored
-      const testResponse = await testData(url, key);
-      if (testResponse) {
-        console.log('Data already stored:', key);
-        continue;
-      } else {
-        console.log('Data not stored for server:', key, server);
+      // Append key and ttl as query parameters
+      const url = new URL(`${server}/store`);
+      url.searchParams.append('key', key);
+      if (ttl !== null) {
+        url.searchParams.append('ttl', ttl.toString());
       }
 
       // Send the encrypted ArrayBuffer as the raw request body.
-      const response = await axios.post(url, value, {
+      const response = await axios.post(url.toString(), value, {
         headers: {
           'Content-Type': 'application/octet-stream'
         },
@@ -42,7 +23,7 @@ export async function storeData(servers: string[], key: string, value: Blob, ttl
       }
       return response;
     } catch (error) {
-      if (axios.isAxiosError(error) && error.response?.status === 409) {
+      if (error?.response?.status === 409) {
         return null;
       }
       console.error('Error storing data:', error);
@@ -54,48 +35,21 @@ export async function storeData(servers: string[], key: string, value: Blob, ttl
 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
-        : new URL(`${server}/retrieve/${key}`).toString();  // Absolute URL - construct properly
-      
-      console.log('Retrieving data', key,' from:', url);
       // When fetching the data from the server:
-      const response = await axios.get(url, {
+      const response = await axios.get(`${server}/retrieve/${key}`, {
         responseType: 'arraybuffer' 
       });
-      
-      if (response.status === 200) {
-        // Validate that we received an ArrayBuffer
-        if (response.data instanceof ArrayBuffer) {
-          return response.data;
-        } else {
-          console.error('Server returned non-ArrayBuffer data:', typeof response.data);
+      if (response.status !== 200) {
+          console.error('Received response status', response.status);
           continue;
-        }
-      } else {
-        console.error(`Server ${server} returned status ${response.status}`);
-        continue;
       }
+      // console.log('Retrieved data:', response.data);
+      return response.data;
     } catch (error) {
-      if (axios.isAxiosError(error)) {
-        if (error.response?.status === 404) {
-          console.log(`Data not found on server ${server} for key ${key}`);
-          continue; // Try next server
-        } else if (error.response?.status) {
-          console.error(`Server ${server} error ${error.response.status}:`, error.response.statusText);
-          continue;
-        } else {
-          console.error(`Network error connecting to ${server}:`, error.message);
-          continue;
-        }
-      } else {
-        console.error(`Unexpected error retrieving data from ${server}:`, error);
-        continue;
-      }
+        console.error('Error retrieving data:', error);
     }
   }
-  return null;
+  return null
 }
 
 interface TestResponse {
@@ -103,17 +57,25 @@ interface TestResponse {
     value: boolean;
 }
 
-export async function testData(url: string, key: string): Promise<boolean | null> {
-  try {
-      const response = await axios.get(url);
-      if (response.status !== 200) {
-        console.error(`Test response status: ${response.status}`);
-        return false;
-      }
-
-      return true; 
-  } catch (error) {
-      console.error('Error testing data:', error);
-      return null;
-  }
+export async function testData(servers: string[], key: string): Promise<Record<string, boolean | null> | null> {
+    const res = {};
+    for (const server of servers) {
+        res[server] = null;
+        try {
+            const response = await axios.get(`${server}/test/${key}`);
+            if (response.status !== 200) {
+                console.error(`${server}: Test response status: ${response.status}`);
+                continue;
+            }
+            
+            const data: TestResponse = response.data;
+            
+            res[server] = data.value;
+        } catch (error) {
+            console.error('Error retrieving data:', error);
+            return null;
+        }
+    }
+    
+    return res;
 }

src/services/token.ts

@@ -1,118 +0,0 @@
-import * as jose from 'jose';
-
-interface TokenPair {
-  accessToken: string;
-  refreshToken: string;
-}
-
-export default class TokenService {
-  private static instance: TokenService;
-  private readonly SECRET_KEY = import.meta.env.VITE_JWT_SECRET_KEY;
-  private readonly ACCESS_TOKEN_EXPIRATION = '30s';
-  private readonly REFRESH_TOKEN_EXPIRATION = '7d';
-  private readonly encoder = new TextEncoder();
-
-  private constructor() {}
-
-  static async getInstance(): Promise<TokenService> {
-    if (!TokenService.instance) {
-      TokenService.instance = new TokenService();
-    }
-    return TokenService.instance;
-  }
-
-  private getOrCreateSecret(): Uint8Array {
-    // Priorité à la variable d'environnement si définie et non vide
-    if (this.SECRET_KEY && String(this.SECRET_KEY).trim().length > 0) {
-      return new Uint8Array(this.encoder.encode(this.SECRET_KEY));
-    }
-
-    // Sinon, on persiste une clé aléatoire locale (stable entre sessions) côté navigateur
-    try {
-      const storageKey = 'ihm_jwt_secret_key_v1';
-      let secretB64 = localStorage.getItem(storageKey);
-      if (!secretB64) {
-        const random = new Uint8Array(32);
-        crypto.getRandomValues(random);
-        // Stocker en base64 pour être textuel
-        secretB64 = btoa(String.fromCharCode(...random));
-        localStorage.setItem(storageKey, secretB64);
-      }
-      // Décoder base64 → Uint8Array
-      const binary = atob(secretB64);
-      const bytes = new Uint8Array(binary.length);
-      for (let i = 0; i < binary.length; i++) {
-        bytes[i] = binary.charCodeAt(i);
-      }
-      return bytes;
-    } catch (_e) {
-      // Fallback minimal si localStorage indisponible (mode très restrictif)
-      const fallback = 'fallback-secret-key-please-persist';
-      return new Uint8Array(this.encoder.encode(fallback));
-    }
-  }
-
-  async generateSessionToken(origin: string): Promise<TokenPair> {
-    const secret = this.getOrCreateSecret();
-
-    const accessToken = await new jose.SignJWT({ origin, type: 'access' })
-      .setProtectedHeader({ alg: 'HS256' })
-      .setIssuedAt()
-      .setExpirationTime(this.ACCESS_TOKEN_EXPIRATION)
-      .sign(secret);
-
-    const refreshToken = await new jose.SignJWT({ origin, type: 'refresh' })
-      .setProtectedHeader({ alg: 'HS256' })
-      .setIssuedAt()
-      .setExpirationTime(this.REFRESH_TOKEN_EXPIRATION)
-      .sign(secret);
-
-    return { accessToken, refreshToken };
-  }
-
-  async validateToken(token: string, origin: string): Promise<boolean> {
-    try {
-      const secret = this.getOrCreateSecret();
-      const { payload } = await jose.jwtVerify(token, secret);
-
-      return payload.origin === origin;
-    } catch (error: any) {
-      if (error?.code === 'ERR_JWT_EXPIRED') {
-        console.log('Token expiré');
-        return false;
-      }
-
-      console.error('Erreur de validation du token:', error);
-      return false;
-    }
-  }
-
-  async refreshAccessToken(refreshToken: string, origin: string): Promise<string | null> {
-    try {
-      // Vérifier si le refresh token est valide
-      const isValid = await this.validateToken(refreshToken, origin);
-      if (!isValid) {
-        return null;
-      }
-
-      // Vérifier le type du token
-      const secret = this.getOrCreateSecret();
-      const { payload } = await jose.jwtVerify(refreshToken, secret);
-      if (payload.type !== 'refresh') {
-        return null;
-      }
-
-      // Générer un nouveau access token
-      const newAccessToken = await new jose.SignJWT({ origin, type: 'access' })
-        .setProtectedHeader({ alg: 'HS256' })
-        .setIssuedAt()
-        .setExpirationTime(this.ACCESS_TOKEN_EXPIRATION)
-        .sign(secret);
-
-      return newAccessToken;
-    } catch (error) {
-      console.error('Erreur lors du refresh du token:', error);
-      return null;
-    }
-  }
-}

src/utils/service.utils.ts

@@ -1,24 +0,0 @@
-export function splitPrivateData(data: Record<string, any>, privateFields: string[]): { privateData: Record<string, any>, publicData: Record<string, any> } {
-  const privateData: Record<string, any> = {};
-  const publicData: Record<string, any> = {};
-
-  for (const [key, value] of Object.entries(data)) {
-    if (privateFields.includes(key)) {
-      privateData[key] = value;
-    } else {
-      publicData[key] = value;
-    }
-  }
-
-  return { privateData, publicData };
-}
-
-export function isValid32ByteHex(value: string): boolean {
-  // Check if string is exactly 64 characters (32 bytes in hex)
-  if (value.length !== 64) {
-    return false;
-  }
-  
-  // Check if string only contains valid hex characters
-  return /^[0-9a-fA-F]{64}$/.test(value);
-}

src/utils/sp-address.utils.ts

@@ -1,213 +1,241 @@
-import Services from '../services/service';
-import { getCorrectDOM } from './html.utils';
-import { addSubscription } from './subscription.utils';
-import QRCode from 'qrcode';
-
-//Copy Address
-export async function copyToClipboard(fullAddress: string) {
-  try {
-    await navigator.clipboard.writeText(fullAddress);
-    alert('Adresse copiée dans le presse-papiers !');
-  } catch (err) {
-    console.error('Failed to copy the address: ', err);
-  }
-}
-
-//Generate emojis list
-export function generateEmojiList(): string[] {
-  const emojiRanges = [
-    [0x1f600, 0x1f64f],
-    [0x1f300, 0x1f5ff],
-    [0x1f680, 0x1f6ff],
-    [0x1f700, 0x1f77f],
-  ];
-
-  const emojiList: string[] = [];
-  for (const range of emojiRanges) {
-    const [start, end] = range;
-    for (let i = start; i <= end && emojiList.length < 256; i++) {
-      emojiList.push(String.fromCodePoint(i));
-    }
-    if (emojiList.length >= 256) {
-      break;
-    }
-  }
-
-  return emojiList.slice(0, 256);
-}
-
-//Adress to emojis
-export async function addressToEmoji(text: string): Promise<string> {
-  //Adress to Hash
-  const encoder = new TextEncoder();
-  const data = encoder.encode(text);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-
-  const hash = new Uint8Array(hashBuffer);
-  const bytes = hash.slice(-4);
-
-  //Hash slice to emojis
-  const emojiList = generateEmojiList();
-  const emojis = Array.from(bytes)
-    .map((byte) => emojiList[byte])
-    .join('');
-  return emojis;
-}
-
-//Get emojis from other device
-async function emojisPairingRequest() {
-  try {
-    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
-
-    const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
-    const sp_adress: string | null = urlParams.get('sp_address');
-
-    if (!sp_adress) {
-      // console.error("No 'sp_adress' parameter found in the URL.");
-      return;
-    }
-
-    const emojis = await addressToEmoji(sp_adress);
-    const emojiDisplay = container?.querySelector('.pairing-request');
-
-    if (emojiDisplay) {
-      emojiDisplay.textContent = '(Request from: ' + emojis + ')';
-    }
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-// Display address emojis and other device emojis
-export async function displayEmojis(text: string) {
-  console.log('🚀 ~ Services ~ adressToEmoji');
-  try {
-    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
-    const emojis = await addressToEmoji(text);
-    const emojiDisplay = container?.querySelector('.emoji-display');
-
-    if (emojiDisplay) {
-      emojiDisplay.textContent = emojis;
-    }
-
-    emojisPairingRequest();
-
-    initAddressInput();
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-// Verify Other address
-export function initAddressInput() {
-  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;
-  const createButton = container.querySelector('#createButton') as HTMLButtonElement;
-  const actionButton = container.querySelector('#actionButton') as HTMLButtonElement;
-  addSubscription(addressInput, 'input', async () => {
-    let address = addressInput.value;
-
-    // Vérifie si l'adresse est une URL
-    try {
-      const url = new URL(address);
-      // Si c'est une URL valide, extraire le paramètre sp_address
-      const urlParams = new URLSearchParams(url.search);
-      const extractedAddress = urlParams.get('sp_address') || ''; // Prend sp_address ou une chaîne vide
-
-      if (extractedAddress) {
-        address = extractedAddress;
-        addressInput.value = address; // Met à jour l'input pour afficher uniquement l'adresse extraite
-      }
-    } catch (e) {
-      // Si ce n'est pas une URL valide, on garde l'adresse originale
-      console.log("Ce n'est pas une URL valide, on garde l'adresse originale.");
-    }
-    if (address) {
-      const emojis = await addressToEmoji(address);
-      if (emojiDisplay) {
-        emojiDisplay.innerHTML = emojis;
-      }
-      if (okButton) {
-        okButton.style.display = 'inline-block';
-      }
-    } else {
-      if (emojiDisplay) {
-        emojiDisplay.innerHTML = '';
-      }
-      if (okButton) {
-        okButton.style.display = 'none';
-      }
-    }
-  });
-
-  if (createButton) {
-    addSubscription(createButton, 'click', () => {
-      onCreateButtonClick();
-    });
-  }
-}
-
-async function onCreateButtonClick() {
-  try {
-    await prepareAndSendPairingTx();
-    const service = await Services.getInstance();
-    await service.confirmPairing();
-  } catch (e) {
-     console.error(`onCreateButtonClick error: ${e}`);
-  }
-}
-
-export async function prepareAndSendPairingTx(): Promise<void> {
-  const service = await Services.getInstance();
-
-  // checkConnections requires a Process object, not an empty array
-  // This call has been removed as it was causing TypeScript errors
-
-  try {
-    const relayAddress = service.getAllRelays();
-    const createPairingProcessReturn = await service.createPairingProcess(
-      "",
-      [],
-    );
-
-    if (!createPairingProcessReturn.updated_process) {
-      throw new Error('createPairingProcess returned an empty new process');
-    }
-
-    service.setProcessId(createPairingProcessReturn.updated_process.process_id);
-    service.setStateId(createPairingProcessReturn.updated_process.current_process.states[0].state_id);
-
-    await service.handleApiReturn(createPairingProcessReturn);
-
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-export async function generateQRCode(spAddress: string) {
-  try {
-    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');
-    qrCode?.setAttribute('src', url);
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-export async function generateCreateBtn() {
-  try{
-    //Generate CreateBtn
-    const container = getCorrectDOM('login-4nk-component') as HTMLElement
-    const createBtn = container?.querySelector('.create-btn');
-    if (createBtn) {
-      createBtn.textContent = 'CREATE';
-    }
-  } catch (err) {
-    console.error(err);
-  }
-
+import Services from '../services/service';
+import { getCorrectDOM } from './html.utils';
+import { addSubscription } from './subscription.utils';
+import QRCode from 'qrcode';
+
+//Copy Address
+export async function copyToClipboard(fullAddress: string) {
+  try {
+    await navigator.clipboard.writeText(fullAddress);
+    alert('Adresse copiée dans le presse-papiers !');
+  } catch (err) {
+    console.error('Failed to copy the address: ', err);
+  }
+}
+
+//Generate emojis list
+export function generateEmojiList(): string[] {
+  const emojiRanges = [
+    [0x1f600, 0x1f64f],
+    [0x1f300, 0x1f5ff],
+    [0x1f680, 0x1f6ff],
+    [0x1f700, 0x1f77f],
+  ];
+
+  const emojiList: string[] = [];
+  for (const range of emojiRanges) {
+    const [start, end] = range;
+    for (let i = start; i <= end && emojiList.length < 256; i++) {
+      emojiList.push(String.fromCodePoint(i));
+    }
+    if (emojiList.length >= 256) {
+      break;
+    }
+  }
+
+  return emojiList.slice(0, 256);
+}
+
+//Adress to emojis
+export async function addressToEmoji(text: string): Promise<string> {
+  //Adress to Hash
+  const encoder = new TextEncoder();
+  const data = encoder.encode(text);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+
+  const hash = new Uint8Array(hashBuffer);
+  const bytes = hash.slice(-4);
+
+  //Hash slice to emojis
+  const emojiList = generateEmojiList();
+  const emojis = Array.from(bytes)
+    .map((byte) => emojiList[byte])
+    .join('');
+  return emojis;
+}
+
+//Get emojis from other device
+async function emojisPairingRequest() {
+  try {
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+
+    const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
+    const sp_adress: string | null = urlParams.get('sp_address');
+
+    if (!sp_adress) {
+      // console.error("No 'sp_adress' parameter found in the URL.");
+      return;
+    }
+
+    const emojis = await addressToEmoji(sp_adress);
+    const emojiDisplay = container?.querySelector('.pairing-request');
+
+    if (emojiDisplay) {
+      emojiDisplay.textContent = '(Request from: ' + emojis + ')';
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+// Display address emojis and other device emojis
+export async function displayEmojis(text: string) {
+  console.log('🚀 ~ Services ~ adressToEmoji');
+  try {
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement;
+    const emojis = await addressToEmoji(text);
+    const emojiDisplay = container?.querySelector('.emoji-display');
+
+    if (emojiDisplay) {
+      emojiDisplay.textContent = emojis;
+    }
+
+    emojisPairingRequest();
+
+    initAddressInput();
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+// Verify Other address
+export function initAddressInput() {
+  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;
+  const createButton = container.querySelector('#createButton') as HTMLButtonElement;
+  addSubscription(addressInput, 'input', async () => {
+    let address = addressInput.value;
+
+    // Vérifie si l'adresse est une URL
+    try {
+      const url = new URL(address);
+      // Si c'est une URL valide, extraire le paramètre sp_address
+      const urlParams = new URLSearchParams(url.search);
+      const extractedAddress = urlParams.get('sp_address') || ''; // Prend sp_address ou une chaîne vide
+
+      if (extractedAddress) {
+        address = extractedAddress;
+        addressInput.value = address; // Met à jour l'input pour afficher uniquement l'adresse extraite
+      }
+    } catch (e) {
+      // Si ce n'est pas une URL valide, on garde l'adresse originale
+      console.log("Ce n'est pas une URL valide, on garde l'adresse originale.");
+    }
+    if (address) {
+      const emojis = await addressToEmoji(address);
+      if (emojiDisplay) {
+        emojiDisplay.innerHTML = emojis;
+      }
+      if (okButton) {
+        okButton.style.display = 'inline-block';
+      }
+    } else {
+      if (emojiDisplay) {
+        emojiDisplay.innerHTML = '';
+      }
+      if (okButton) {
+        okButton.style.display = 'none';
+      }
+    }
+  });
+
+  if (okButton) {
+    addSubscription(okButton, 'click', () => {
+      onOkButtonClick();
+    });
+  }
+
+  if (createButton) {
+    addSubscription(createButton, 'click', () => {
+      onCreateButtonClick();
+    });
+  }
+}
+
+async function onOkButtonClick() {
+  const container = getCorrectDOM('login-4nk-component') as HTMLElement
+  const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value;
+  try {
+    // Connect to target, if necessary
+    await prepareAndSendPairingTx(secondDeviceAddress);
+  } catch (e) {
+     console.error(`onOkButtonClick error: ${e}`);
+  }
+}
+
+async function onCreateButtonClick() {
+  try {
+    await prepareAndSendPairingTx();
+  } catch (e) {
+     console.error(`onCreateButtonClick error: ${e}`);
+  }
+}
+
+export async function prepareAndSendPairingTx(promptName: boolean = false) {
+  const service = await Services.getInstance();
+
+  // Device 1 wait Device 2
+  // service.device1 = true;
+
+  try {
+    await service.checkConnections([]);
+  } catch (e) {
+    throw e;
+  }
+
+  // Prompt the user for a username.
+  let userName;
+  if (promptName) {
+    userName = prompt("Please enter your user name:");
+  } else {
+    userName = "";
+  }
+
+  // Create the process after a delay.
+  setTimeout(async () => {
+    const relayAddress = service.getAllRelays();
+    
+    // Pass the userName as an additional parameter.
+    const createPairingProcessReturn = await service.createPairingProcess(
+      userName,
+      [],
+      relayAddress[0].spAddress,
+      1,
+      userName
+    );
+
+    if (!createPairingProcessReturn.updated_process) {
+      throw new Error('createPairingProcess returned an empty new process'); // This should never happen
+    }
+
+    await service.handleApiReturn(createPairingProcessReturn);
+  }, 1000);
+}
+
+export async function generateQRCode(spAddress: string) {
+  try {
+    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');
+    qrCode?.setAttribute('src', url);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+export async function generateCreateBtn() {
+  try{
+    //Generate CreateBtn
+    const container = getCorrectDOM('login-4nk-component') as HTMLElement
+    const createBtn = container?.querySelector('.create-btn');
+    if (createBtn) {
+      createBtn.textContent = 'CREATE';
+    }
+  } catch (err) {
+    console.error(err);
+  }
+  
 }

src/websockets.ts

@@ -1,89 +1,89 @@
-import { AnkFlag } from '.././pkg/sdk_client.js';
-import Services from './services/service';
-
-let ws: WebSocket;
-let messageQueue: string[] = [];
-export async function initWebsocket(url: string) {
-  ws = new WebSocket(url);
-
-  if (ws !== null) {
-    ws.onopen = async (event) => {
-      console.log('WebSocket connection established');
-
-      while (messageQueue.length > 0) {
-        const message = messageQueue.shift();
-        if (message) {
-          ws.send(message);
-        }
-      }
-    };
-
-    // Listen for messages
-    ws.onmessage = (event) => {
-      const msgData = event.data;
-
-      // console.log("Received text message: ", msgData);
-      (async () => {
-        if (typeof msgData === 'string') {
-          try {
-            const parsedMessage = JSON.parse(msgData);
-            const services = await Services.getInstance();
-            switch (parsedMessage.flag) {
-              case 'Handshake':
-                await services.handleHandshakeMsg(url, parsedMessage.content);
-                break;
-              case 'NewTx':
-                await services.parseNewTx(parsedMessage.content);
-                break;
-              case 'Cipher':
-                await services.parseCipher(parsedMessage.content);
-                break;
-              case 'Commit':
-                // Basically if we see this it means we have an error
-                await services.handleCommitError(parsedMessage.content);
-                break;
-            }
-          } catch (error) {
-            console.error('Received an invalid message:', error);
-          }
-        } else {
-          console.error('Received a non-string message');
-        }
-      })();
-    };
-
-    // Listen for possible errors
-    ws.onerror = (event) => {
-      console.error('WebSocket error:', event);
-    };
-
-    // Listen for when the connection is closed
-    ws.onclose = (event) => {
-      console.log('WebSocket is closed now.');
-    };
-  }
-}
-
-// Method to send messages
-export function sendMessage(flag: AnkFlag, message: string): void {
-  if (ws.readyState === WebSocket.OPEN) {
-    const networkMessage = {
-      flag: flag,
-      content: message,
-    };
-    console.log('Sending message of type:', flag);
-    ws.send(JSON.stringify(networkMessage));
-  } else {
-    console.error('WebSocket is not open. ReadyState:', ws.readyState);
-    messageQueue.push(message);
-  }
-}
-
-export function getUrl(): string {
-  return ws.url;
-}
-
-// Method to close the WebSocket connection
-export function close(): void {
-  ws.close();
-}
+import { AnkFlag } from 'pkg/sdk_client';
+import Services from './services/service';
+
+let ws: WebSocket;
+let messageQueue: string[] = [];
+export async function initWebsocket(url: string) {
+  ws = new WebSocket(url);
+
+  if (ws !== null) {
+    ws.onopen = async (event) => {
+      console.log('WebSocket connection established');
+
+      while (messageQueue.length > 0) {
+        const message = messageQueue.shift();
+        if (message) {
+          ws.send(message);
+        }
+      }
+    };
+
+    // Listen for messages
+    ws.onmessage = (event) => {
+      const msgData = event.data;
+
+      // console.log("Received text message: ", msgData);
+      (async () => {
+        if (typeof msgData === 'string') {
+          try {
+            const parsedMessage = JSON.parse(msgData);
+            const services = await Services.getInstance();
+            switch (parsedMessage.flag) {
+              case 'Handshake':
+                await services.handleHandshakeMsg(url, parsedMessage.content);
+                break;
+              case 'NewTx':
+                await services.parseNewTx(parsedMessage.content);
+                break;
+              case 'Cipher':
+                await services.parseCipher(parsedMessage.content);
+                break;
+              case 'Commit':
+                // Basically if we see this it means we have an error
+                await services.handleCommitError(parsedMessage.content);
+                break;
+            }
+          } catch (error) {
+            console.error('Received an invalid message:', error);
+          }
+        } else {
+          console.error('Received a non-string message');
+        }
+      })();
+    };
+
+    // Listen for possible errors
+    ws.onerror = (event) => {
+      console.error('WebSocket error:', event);
+    };
+
+    // Listen for when the connection is closed
+    ws.onclose = (event) => {
+      console.log('WebSocket is closed now.');
+    };
+  }
+}
+
+// Method to send messages
+export function sendMessage(flag: AnkFlag, message: string): void {
+  if (ws.readyState === WebSocket.OPEN) {
+    const networkMessage = {
+      flag: flag,
+      content: message,
+    };
+    console.log('Sending message of type:', flag);
+    ws.send(JSON.stringify(networkMessage));
+  } else {
+    console.error('WebSocket is not open. ReadyState:', ws.readyState);
+    messageQueue.push(message);
+  }
+}
+
+export function getUrl(): string {
+  return ws.url;
+}
+
+// Method to close the WebSocket connection
+export function close(): void {
+  ws.close();
+}

start-dev.sh

@@ -1,7 +0,0 @@
-#!/bin/sh
-
-# Démarrer nginx en arrière-plan
-nginx
-
-# Démarrer le serveur de développement Vite
-npm run start 

tests/analyse.md

@@ -1,16 +0,0 @@
-### Objet
-Axes de tests pour `ihm_client` (sans exemples).
-
-### Couverture prioritaire
-- **Chargement iframe**: initialisation, messages parent ↔ iframe
-- **Auth/Token**: création, stockage, renouvellement, invalidation
-- **Pages**: home, chat, account, process, signature (navigation, états)
-- **WebSockets**: connexion, reconnexion, messages, erreurs
-- **Modales**: confirmation/creation/waiting/validation-rule
-
-### Performance
-- **Workers**: cache et base de données (latences, tailles)
-
-### Sécurité
-- **postMessage**: validation d’origine, format messages
-- **Stockage**: isolation domain/cookies/localStorage

tsconfig.build.json

@@ -1,9 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "compilerOptions": {
-      "noEmit": false,
-      "outDir": "./dist",
-      "module": "commonjs"
-    },
-    "exclude": ["node_modules", "dist"]
-  }

tsconfig.json

@@ -26,4 +26,4 @@
   },
   "include": ["src", "src/*/", "./vite.config.ts", "src/*.d.ts", "src/main.ts"],
   "exclude": ["node_modules"]
-}
+  }

vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     target: 'esnext',
     minify: false,
     rollupOptions: {
-        input: './src/index.ts',
+        input: './src/router.ts',
         output: {
           entryFileNames: 'index.js',
         },
@@ -57,9 +57,7 @@ export default defineConfig({
     fs: {
       cachedChecks: false,
     },
-    port: 3003,
-    host: '0.0.0.0',
-    allowedHosts: ['dev4.4nkweb.com', 'localhost', '127.0.0.1'],
+    port: 3001,
     proxy: {
       '/storage': {
         target: 'https://demo.4nkweb.com',