From 126f850f9fcb72cd8e3015a42987fa060e6b5c59 Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Wed, 23 Oct 2024 10:50:07 +0200
Subject: [PATCH] CopyPaste Address + Address To Emoji + Popup changes

---
 public/style/4nk.css             |  54 ++++++++++-
 src/html/confirmation-modal.html |  10 +-
 src/html/home.html               |   7 ++
 src/services/routing.service.ts  |   7 +-
 src/services/service.ts          | 154 ++++++++++++++++++++++++++++++-
 5 files changed, 221 insertions(+), 11 deletions(-)

diff --git a/public/style/4nk.css b/public/style/4nk.css
index 75b44ea..e40db44 100644
--- a/public/style/4nk.css
+++ b/public/style/4nk.css
@@ -21,10 +21,16 @@ body {
   height: 100vh;
   }
   .message {
+    margin: 30px 0;
     font-size: 14px;
     overflow-wrap: anywhere;
   }
 
+  .message strong{
+    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
+    font-size: 20px;
+  }
+
   /** Modal Css */
   .modal {
     display: none;
@@ -36,6 +42,7 @@ body {
     background-color: rgba(0, 0, 0, 0.5);
     justify-content: center;
     align-items: center;
+    z-index: 3;
   }
   
   .modal-content {
@@ -161,7 +168,7 @@ body {
     display: flex;
     padding: 1rem;
     box-sizing: border-box;
-    max-height: 50vh;
+    max-height: 60vh;
   }
 
   h1 {
@@ -267,6 +274,49 @@ body {
     align-items: center;
     height: 200px;
   }
+
+  .emoji-display {
+    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
+    font-size: 20px;
+    
+  }
+
+  #emoji-display-2{
+    margin-top: 30px;
+    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
+    font-size: 20px;
+  }
+
+  #okButton{
+    margin-bottom: 2em;
+    cursor: pointer;
+    background-color: #D0D0D7;
+    color: white;
+    border-style: none;
+    border-radius: 5px;
+    color: #000;
+    padding: 2px;
+    margin-top: 10px;
+  }
+
+  .pairing-request {
+    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
+    font-size: 14px;
+    margin-top: 0px;
+  }
+
+  .sp-address-btn {
+    margin-bottom: 2em;
+    cursor: pointer;
+    background-color: #D0D0D7;
+    color: white;
+    border-style: none;
+    border-radius: 5px;
+    color: #000;
+    padding: 2px;
+
+  }
+
   .camera-card {
     display: flex;
     justify-content: center;
@@ -345,7 +395,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 0px;
   }
   
   
diff --git a/src/html/confirmation-modal.html b/src/html/confirmation-modal.html
index 1d9fff1..6face18 100644
--- a/src/html/confirmation-modal.html
+++ b/src/html/confirmation-modal.html
@@ -2,11 +2,11 @@
     <div class="modal-content">
       <div class="modal-title">Login</div>
       <div class="message">
-        Do you want to pair device?
-        <!-- Attempting to pair device with address 
-        <strong>{{device1}}</strong>
-        with device with address 
-        <strong>{{device2}}</strong> -->
+        Do you want to pair device?<br>
+        Attempting to pair device with address <br> 
+        <strong>{{device1}}</strong> <br>
+        with device with address <br>
+        <strong>{{device2}}</strong> 
       </div>
       <div class="confirmation-box">
         <a class="btn confirmation-btn" onclick="confirm()">Confirm</a>
diff --git a/src/html/home.html b/src/html/home.html
index 4f4b11e..cbd0572 100644
--- a/src/html/home.html
+++ b/src/html/home.html
@@ -43,9 +43,12 @@
             <div class="card-description">
                 Scan with your other device :
               </div>
+              <div class="pairing-request"></div>
           <div class="card-image qr-code">
             <img src="assets/qr_code.png" alt="QR Code" width="150" height="150">
           </div>
+          <button id="copyBtn" class="sp-address-btn"></button>
+          <div class="card-image emoji-display" id="emoji-display"></div>
         </div>
         <div class="separator"></div>
         <div id="tab2" class="card tab-content">
@@ -59,6 +62,10 @@
               <div id="qr-reader-results"></div>
             </div>
           </div>
+          <p>Or</p>
+          <input type="text" id="addressInput" placeholder="Paste address">
+          <div id="emoji-display-2"></div>
+          <button id="okButton" style="display:none;">OK</button>
         </div>
 
         <!-- <div id="modal" class="modal">
diff --git a/src/services/routing.service.ts b/src/services/routing.service.ts
index 10775a3..ee074df 100644
--- a/src/services/routing.service.ts
+++ b/src/services/routing.service.ts
@@ -43,7 +43,7 @@ export default class Routing {
         document.head.appendChild(newScript).parentNode?.removeChild(newScript);
     }
 
-    public openConfirmationModal(pcd: any, outpointCommitment: string) {
+    public async openConfirmationModal(pcd: any, outpointCommitment: string) {
         console.log("")
         let roles = JSON.parse(pcd['roles']);// ['members'][0];
         console.log(roles);
@@ -56,8 +56,9 @@ export default class Routing {
             if (address !== local_address) { this.paired_addresses.push(address) }
         }
         let html = confirmationModalHtml;
-        // html = html.replace('{{device1}}', members[0]['sp_addresses'][0]);
-        // html = html.replace('{{device2}}', members[0]['sp_addresses'][1]);
+        let services = await Services.getInstance();
+        html = html.replace('{{device1}}', await services.addressToEmoji(members[0]['sp_addresses'][0]));
+        html = html.replace('{{device2}}', await services.addressToEmoji(members[0]['sp_addresses'][1]));
         this.currentOutpoint = outpointCommitment as string;
         const container = document.querySelector('.page-container');
 
diff --git a/src/services/service.ts b/src/services/service.ts
index 1a5bf40..1b1a432 100644
--- a/src/services/service.ts
+++ b/src/services/service.ts
@@ -93,11 +93,156 @@ export default class Services {
         const url = await QRCode.toDataURL(currentUrl + "?sp_address=" + text);
         const qrCode = container?.querySelector('.qr-code img');
         qrCode?.setAttribute('src', url)
+
+        //Generate Address CopyBtn
+        const address = container?.querySelector('.sp-address-btn')
+        if (address) {
+          address.textContent = "Copy address";
+        }
+        const copyBtn = document.getElementById('copyBtn');
+        if (copyBtn) {
+          copyBtn.addEventListener('click', () => this.copyToClipboard(text));
+        }
       } catch (err) {
         console.error(err);
       }
     }
 
+    //Copy Address
+    public async 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
+    public 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
+    public addressToEmoji = async (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 = this.generateEmojiList();
+      const emojis = Array.from(bytes).map(byte => emojiList[byte]).join('');
+      return emojis;
+    }
+
+    //Get emojis from other device
+    public async emojisPairingRequest () {
+      try {
+        const container = document.getElementById('containerId');
+
+        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 this.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
+    private displayEmojis = async (text: string) => {
+      console.log("🚀 ~ Services ~ adressToEmoji")
+      try {
+        const container = document.getElementById('containerId');
+        const emojis = await this.addressToEmoji(text);
+        const emojiDisplay = container?.querySelector('.emoji-display');
+
+        if (emojiDisplay) {
+          emojiDisplay.textContent = emojis; 
+        }
+
+        this.emojisPairingRequest();
+
+        this.initAddressInput();
+
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    // Verify Other address
+    public initAddressInput() {
+      const addressInput = document.getElementById('addressInput') as HTMLInputElement;
+      const emojiDisplay = document.getElementById('emoji-display-2');
+      const okButton = document.getElementById('okButton');
+
+      addressInput.addEventListener('input', async () => {
+          const address = addressInput.value;
+  
+          
+          if (address) {
+              const emojis = await this.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) {
+        okButton.addEventListener('click', () => {
+            this.onOkButtonClick(); 
+        });
+      }
+    }
+
+    private async onOkButtonClick() {
+      const addressInput = (document.getElementById('addressInput') as HTMLInputElement).value;
+      await this.sendPairingTx(addressInput);
+    }
+  
+    
     public isPaired(): boolean | undefined {
       try {
         return this.sdkClient.is_linking();
@@ -263,7 +408,7 @@ export default class Services {
                 const actual_proposal = JSON.parse(proposals[0]); // We just don't acknowledge concurrent proposals for now
                 console.info(actual_proposal);
                 let router = await Routing.getInstance();
-                router.openConfirmationModal(actual_proposal, processCommitment);
+                await router.openConfirmationModal(actual_proposal, processCommitment);
               }
             } catch (e) {
               console.error(e);
@@ -404,6 +549,10 @@ export default class Services {
       }
 
       this.generateQRCode(spAddress || '')
+      //Adress to Emoji integration
+      this.displayEmojis(spAddress)
+      //Adress to Emoji integration
+      
       
       return spAddress;
     }
@@ -413,6 +562,9 @@ export default class Services {
         await this.sdkClient.restore_device(device)
         const spAddress = this.sdkClient.get_address();
         this.generateQRCode(spAddress || '')
+        //Adress to Emoji integration
+        this.displayEmojis(spAddress)
+        //Adress to Emoji integration
       } catch (e) {
         console.error(e);
       }