fusionDev1Dev3

package.json

@@ -5,7 +5,7 @@
   "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/",

public/style/account.css

@@ -599,7 +599,7 @@ body {
     margin-top: 9vh;
     margin-left: -1%;
     text-align: left;
-    width: 209vh;
+    width: 100vw;
 }
 
 /* Liste des information sur l'account */
@@ -1364,3 +1364,62 @@ body {
     border-radius: 50%;
     border: 2px solid white;
 }
+
+/* ---------------------Style pour le QR code--------------------- */
+
+.qr-code {
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.qr-code:hover {
+    transform: scale(1.5);
+}
+
+.qr-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.qr-modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    position: relative;
+    text-align: center;
+}
+
+.close-qr-modal {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+}
+
+.close-qr-modal:hover {
+    color: #000;
+}
+
+.qr-code-large {
+    max-width: 300px;
+    margin: 10px 0;
+}
+
+.qr-address {
+    margin-top: 10px;
+    word-break: break-all;
+    font-size: 12px;
+    color: #666;
+}

src/pages/account/account.ts

@@ -2,7 +2,7 @@ declare global {
     interface Window {
         initAccount: () => void;
         showContractPopup: (contractId: string) => void;
-        showPairing: () => void;
+        showPairing: () => Promise<void>;
         showWallet: () => void;
         showData: () => void;
         addWalletRow: () => void;
@@ -36,6 +36,7 @@ declare global {
         generateRecoveryWords: () => string[];
         exportUserData: () => void;
         updateActionButtons: () => void;
+        showQRCodeModal: (address: string) => void;
     }
 }
 
@@ -45,6 +46,7 @@ import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage }
 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';
 
 let isAddingRow = false;
 let currentRow: HTMLTableRowElement | null = null;
@@ -197,6 +199,7 @@ class AccountElement extends HTMLElement {
         window.updateActionButtons = () => this.updateActionButtons();
         window.openAvatarPopup = () => this.openAvatarPopup();
         window.closeAvatarPopup = () => this.closeAvatarPopup();
+        window.showQRCodeModal = (address: string) => this.showQRCodeModal(address);
 
         if (!localStorage.getItem('rows')) {
             localStorage.setItem('rows', JSON.stringify(defaultRows));
@@ -552,6 +555,13 @@ private updateTableContent(rows: Row[]): void {
             <td>${row.column1}</td>
             <td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
             <td>${row.column3}</td>
+            <td>
+                <img src="https://api.qrserver.com/v1/create-qr-code/?size=50x50&data=${encodeURIComponent(row.column1)}" 
+                     alt="QR Code" 
+                     title="${row.column1}"
+                     class="qr-code"
+                     onclick="window.showQRCodeModal('${encodeURIComponent(row.column1)}')">
+            </td>
             <td>
                 <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">
@@ -627,29 +637,26 @@ private deleteRow(button: HTMLButtonElement): void {
     const table = row.closest('tbody');
     if (!table) return;
 
-    // Vérifier le nombre de lignes restantes
     const remainingRows = table.getElementsByTagName('tr').length;
     if (remainingRows <= 2) {
         this.showAlert('You must keep at least 2 devices paired');
         return;
     }
 
-    // Animation de suppression
+    const index = Array.from(table.children).indexOf(row);
-    row.style.transition = 'opacity 0.3s';
+    row.style.transition = 'opacity 0.3s, transform 0.3s';
     row.style.opacity = '0';
+    row.style.transform = 'translateX(-100%)';
 
     setTimeout(() => {
-        // Obtenir l'index avant la suppression
-        const index = Array.from(table.children).indexOf(row);
-        
-        // Supprimer la ligne du DOM
         row.remove();
 
-        // Mettre à jour le localStorage
         const storageKey = STORAGE_KEYS[currentMode];
         const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
+        if (index > -1) {
             rows.splice(index, 1);
             localStorage.setItem(storageKey, JSON.stringify(rows));
+        }
     }, 300);
 }
 
@@ -887,9 +894,6 @@ private showContractPopup(contractId: string) {
     });
 }
 
-// Ajouter à l'objet window
-
-
 // Fonction utilitaire pour cacher tous les contenus
 private hideAllContent(): void {
     const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
@@ -902,25 +906,22 @@ private hideAllContent(): void {
 }
 
 // Fonctions d'affichage des sections
-private showPairing(): void {
+private async showPairing(): Promise<void> {
+    const service = await Services.getInstance();
+    const spAddress = await service.getDeviceAddress();
     
     isAddingRow = false;
     currentRow = null;
-
     currentMode = 'pairing';
-    // Cacher tous les contenus
+    
     this.hideAllContent();
     
-    // Mettre à jour le titre
     const headerElement = this.shadowRoot?.getElementById('parameter-header');
     if (headerElement) {
         headerElement.textContent = 'Pairing';
     }
 
-    
-    // Afficher le contenu de pairing
     const pairingContent = this.shadowRoot?.getElementById('pairing-content');
-
     if (pairingContent) {
         pairingContent.style.display = 'block';
         pairingContent.innerHTML = `
@@ -932,7 +933,8 @@ private showPairing(): void {
                             <th>SP Address</th>
                             <th>Device Name</th>
                             <th>SP Emojis</th>
-                            <th></th>
+                            <th>QR Code</th>
+                            <th>Actions</th>
                         </tr>
                     </thead>
                     <tbody></tbody>
@@ -943,8 +945,46 @@ private showPairing(): void {
             </div>
         `;
 
-        // Mettre à jour le contenu du tableau
+        let rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
-        const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
+        
+        const deviceExists = rows.some((row: Row) => row.column1 === spAddress);
+        
+        if (!deviceExists && spAddress) {
+            const emojis = await addressToEmoji(spAddress);
+            
+            try {
+                // Déboguer le processus de pairing
+                const pairingProcessId = await service.getPairingProcessId();
+                console.log('Pairing Process ID:', pairingProcessId);
+                
+                const pairingProcess = await service.getProcess(pairingProcessId);
+                console.log('Pairing Process:', pairingProcess);
+                
+                const userName = pairingProcess?.states?.[0]?.metadata?.userName 
+                    || pairingProcess?.states?.[0]?.metadata?.name
+                    || localStorage.getItem('userName')
+                
+                console.log('Username found:', userName);
+
+                const newRow = {
+                    column1: spAddress,
+                    column2: userName,
+                    column3: emojis
+                };
+                rows = [newRow, ...rows];
+                localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
+            } catch (error) {
+                console.error('Error getting pairing process:', error);
+                const newRow = {
+                    column1: spAddress,
+                    column2: 'This Device',
+                    column3: emojis
+                };
+                rows = [newRow, ...rows];
+                localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
+            }
+        }
+        
         this.updateTableContent(rows);
     }
 }
@@ -1419,6 +1459,28 @@ private initializeEventListeners() {
         avatarInput.addEventListener('change', this.handleAvatarUpload.bind(this));
     }
 }
+
+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=${address}" 
+                 alt="QR Code Large" 
+                 class="qr-code-large">
+            <div class="qr-address">${decodeURIComponent(address)}</div>
+        </div>
+    `;
+
+    this.shadowRoot?.appendChild(modal);
+
+    const closeBtn = modal.querySelector('.close-qr-modal');
+    closeBtn?.addEventListener('click', () => modal.remove());
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) modal.remove();
+    });
+}
 }
 
 customElements.define('account-element', AccountElement);