CopyPaste Address + Address To Emoji + Popup changes
This commit is contained in:
parent
427252e4a7
commit
126f850f9f
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user