340 lines
13 KiB
HTML
340 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Wallet Connect status-go test</title>
|
|
<style></style>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script src="bundle.js" type="module"></script>
|
|
<script>
|
|
function goEcho(message) {
|
|
window.echo(message);
|
|
}
|
|
|
|
// If not null add to it
|
|
var logEntries = null;
|
|
|
|
var newSessionButton;
|
|
var hashedPasswordInput;
|
|
|
|
function addHtmlEntry(htmlContent, color = null, entry = null) {
|
|
const logDiv = document.getElementById("log");
|
|
if (entry) {
|
|
entry.remove();
|
|
}
|
|
entry = document.createElement("div");
|
|
logDiv.appendChild(entry);
|
|
entry.innerHTML = htmlContent;
|
|
if (color) {
|
|
entry.style.color = color;
|
|
}
|
|
entry.scrollIntoView();
|
|
if (logEntries) {
|
|
logEntries.push(entry);
|
|
}
|
|
return entry;
|
|
}
|
|
|
|
function addLogEntry(message, color = "black", entry = null) {
|
|
return addHtmlEntry(`${message}`, color, entry);
|
|
}
|
|
|
|
function logComponentStatusChange(componentName, statusMessage, color = "black", entry = null) {
|
|
const componentHtml = `<span style="color: fuchsia;">${componentName}</span>: `;
|
|
const statusHtml = `<span style="color: ${color};">${statusMessage}</span>`;
|
|
return addHtmlEntry(`${componentHtml}${statusHtml}`, null, entry);
|
|
}
|
|
|
|
const statusGoEntry = logComponentStatusChange("status-go", "Initializing...");
|
|
var eventCount = 0;
|
|
const readyToPairEventName = "readyToPair";
|
|
async function initializeSDK() {
|
|
try {
|
|
const sdkEntry = logComponentStatusChange("SDK", "Initializing...");
|
|
const conf = await window.getConfiguration();
|
|
const wc = await window.wc.init(conf.projectId);
|
|
logComponentStatusChange("SDK", "Initialized", "green", sdkEntry);
|
|
eventCount++;
|
|
} catch (error) {
|
|
logComponentStatusChange("SDK", "FAIL initializing ${error.message}", "red", sdkEntry);
|
|
}
|
|
}
|
|
|
|
var pairLinkInput = null;
|
|
var pairButton = null;
|
|
function newPairWorkflow() {
|
|
if (logEntries) {
|
|
for (let i = 0; i < logEntries.length; i++) {
|
|
logEntries[i].remove();
|
|
}
|
|
}
|
|
|
|
logEntries = [];
|
|
eventCount++;
|
|
|
|
addHtmlEntry(
|
|
`<input type="text" id="pairLinkInput" placeholder="Insert pair link" /><button id="pairButton" disabled>Pair</button>`
|
|
);
|
|
|
|
// List existing pairing sessions
|
|
const pairings = window.wc.getPairings();
|
|
if (pairings.length > 0) {
|
|
addHtmlEntry(`Existing pairings:`, "fuchsia");
|
|
}
|
|
for (let i = 0; i < pairings.length; i++) {
|
|
const p = pairings[i];
|
|
const disconnectEntry = addHtmlEntry(
|
|
`[${i + 1}] <span style="color: ${p.active ? "green" : "orange"};">${
|
|
p.active ? "ACTIVE" : "INACTIVE"
|
|
}</span> <span class="elide-text">${
|
|
p.topic
|
|
}</span>; Expires: ${timestampToStr(p.expiry)} <button id="unpairButton${i}">Disconnect</button>`
|
|
);
|
|
const unpairButton = document.getElementById(`unpairButton${i}`);
|
|
unpairButton.addEventListener("click", function () {
|
|
window.wc.disconnect(p.topic).then(
|
|
() => {
|
|
addLogEntry(`Pairing ${p.topic} disconnected`, "green", disconnectEntry);
|
|
unpairButton.remove();
|
|
},
|
|
(err) => {
|
|
addLogEntry(`Pairing ${p.topic} disconnect error: ${err.message}`, "red", disconnectEntry);
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
pairLinkInput = document.getElementById(`pairLinkInput`);
|
|
pairButton = document.getElementById(`pairButton`);
|
|
pairLinkInput.addEventListener("input", function () {
|
|
pairButton.disabled = !(pairLinkInput.value.length > 0);
|
|
});
|
|
pairButton.addEventListener("click", function () {
|
|
newSessionButton.style.display = "inline";
|
|
pairButton.disabled = true;
|
|
pairLinkInput.disabled = true;
|
|
|
|
const sdkEntry = logComponentStatusChange("SDK", "Pairing...");
|
|
window.wc
|
|
.pair(pairLinkInput.value)
|
|
.then((sessionProposal) => {
|
|
logComponentStatusChange("SDK", "got Pair session proposal", "green", sdkEntry);
|
|
addLogEntry(`Pair ID: ${sessionProposal.id} ; Topic: ${sessionProposal.params.pairingTopic}`);
|
|
const goSession = logComponentStatusChange("GO.pairSessionProposal", "waiting status-go", "pink");
|
|
|
|
document.addEventListener(`proposeUserPair`, function (event) {
|
|
pairProposalEntry = logComponentStatusChange(
|
|
"GO.proposeUserPair",
|
|
`received "proposeUserPair"`,
|
|
"green"
|
|
);
|
|
addLogEntry(JSON.stringify(event.detail.supportedNamespaces));
|
|
addHtmlEntry(
|
|
`<button id="acceptPairButton">Accept</button><button id="rejectPairButton">Reject</button>`
|
|
);
|
|
const acceptPairButton = document.getElementById(`acceptPairButton`);
|
|
const rejectPairButton = document.getElementById(`rejectPairButton`);
|
|
acceptPairButton.addEventListener("click", function () {
|
|
window.wc.approvePairSession(sessionProposal, event.detail.supportedNamespaces).then(
|
|
() => {
|
|
logComponentStatusChange(
|
|
"GO.pairSessionProposal",
|
|
`Pair session ${sessionProposal.id} approved`,
|
|
"green",
|
|
pairProposalEntry
|
|
);
|
|
acceptPairButton.remove();
|
|
rejectPairButton.remove();
|
|
},
|
|
(err) => {
|
|
logComponentStatusChange(
|
|
"GO.pairSessionProposal",
|
|
`Pair session ${sessionProposal.id} approve error: ${err.message}`,
|
|
"red",
|
|
pairProposalEntry
|
|
);
|
|
}
|
|
);
|
|
});
|
|
rejectPairButton.addEventListener("click", function () {
|
|
window.wc.rejectPairSession(sessionProposal.id).then(
|
|
() => {
|
|
logComponentStatusChange(
|
|
"GO.pairSessionProposal",
|
|
`Pair session ${sessionProposal.id} rejected`,
|
|
"green",
|
|
pairProposalEntry
|
|
);
|
|
acceptPairButton.remove();
|
|
rejectPairButton.remove();
|
|
},
|
|
(err) => {
|
|
logComponentStatusChange(
|
|
"GO.pairSessionProposal",
|
|
`Pair session ${sessionProposal.id} reject error: ${err.message}`,
|
|
"red",
|
|
pairProposalEntry
|
|
);
|
|
}
|
|
);
|
|
});
|
|
});
|
|
|
|
window.pairSessionProposal(JSON.stringify(sessionProposal)).then((success) => {
|
|
if (!success) {
|
|
logComponentStatusChange(
|
|
"GO.pairSessionProposal",
|
|
`call failed ${sessionProposal.id}`,
|
|
"red",
|
|
goSession
|
|
);
|
|
return;
|
|
}
|
|
logComponentStatusChange("GO.pairSessionProposal", `waiting for "proposeUserPair"`, "black", goSession);
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
logComponentStatusChange("SDK", `Pairing error ${error.message}`, "red", sdkEntry);
|
|
});
|
|
});
|
|
}
|
|
|
|
function sdkReady() {
|
|
window.wc.registerForSessionRequest((event) => {
|
|
eventCount++;
|
|
|
|
logComponentStatusChange("SDK", `received "session_request" event`, "green");
|
|
addLogEntry(`Event: ${JSON.stringify(event)}`);
|
|
|
|
addHtmlEntry(
|
|
`<button id="acceptSessionButton${eventCount}">Accept</button> <button id="rejectSessionButton${eventCount}">Reject</button>`
|
|
);
|
|
|
|
const acceptSessionButton = document.getElementById(`acceptSessionButton${eventCount}`);
|
|
const rejectSessionButton = document.getElementById(`rejectSessionButton${eventCount}`);
|
|
acceptSessionButton.addEventListener("click", function () {
|
|
const sessionReqEntry = logComponentStatusChange("status-go", `sessionRequest called`, "orange");
|
|
window.sessionRequest(JSON.stringify(event), hashedPasswordInput.value).then((success) => {
|
|
acceptSessionButton.disabled = true;
|
|
rejectSessionButton.disabled = true;
|
|
|
|
if (success) {
|
|
logComponentStatusChange("status-go", `sessionRequest OK`, "green", sessionReqEntry);
|
|
// waiting for "sessionRequestResult" event
|
|
} else {
|
|
logComponentStatusChange(
|
|
"status-go",
|
|
`sessionRequest call failed for topic ${event.topic}`,
|
|
"red",
|
|
sessionReqEntry
|
|
);
|
|
window.wc.rejectSessionRequest(event.topic, event.id, true);
|
|
setStatus(`Session ${event.id} rejected, internal error`, "purple");
|
|
}
|
|
});
|
|
});
|
|
|
|
rejectSessionButton.addEventListener("click", function () {
|
|
acceptSessionButton.disabled = true;
|
|
rejectSessionButton.disabled = true;
|
|
window.wc.rejectSessionRequest(event.topic, event.id).then(
|
|
() => {
|
|
addLogEntry(`Session ${event.id} rejected`);
|
|
},
|
|
(err) => {
|
|
addLogEntry(`Session ${event.id} reject error: ${err.message}`, "red");
|
|
}
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("sessionRequestResult", function (event) {
|
|
let req = event.detail.sessionRequest;
|
|
const res = window.wc.respondSessionRequest(req.topic, req.id, event.detail.signed);
|
|
addLogEntry(`Session ${req.topic} approval accepted`);
|
|
addHtmlEntry(
|
|
`</br><a href="https://goerli.etherscan.io/tx/${event.detail.signed}" target="_blank">${event.detail.signed}</a>`
|
|
);
|
|
});
|
|
|
|
// Add start from scratch option
|
|
document.addEventListener(readyToPairEventName, function () {
|
|
addHtmlEntry(`<button id="newSessionButton" style="display: none;">New Session</button>`);
|
|
newSessionButton = document.getElementById("newSessionButton");
|
|
newSessionButton.addEventListener("click", function () {
|
|
newPairWorkflow();
|
|
});
|
|
addHtmlEntry(
|
|
`<input type="text" id="hashedPasswordInput" placeholder="Insert hashed password" value="0x38301fb0b5fcf3aaa4b97c4771bb6c75546e313b4ce7057c51a8cc6a3ace9d7e"/>`
|
|
);
|
|
hashedPasswordInput = document.getElementById(`hashedPasswordInput`);
|
|
sdkReady();
|
|
newPairWorkflow();
|
|
});
|
|
|
|
async function processGoEvents() {
|
|
while (true) {
|
|
try {
|
|
const event = await window.popNextEvent();
|
|
switch (event.name) {
|
|
case "nodeReady":
|
|
logComponentStatusChange("status-go", "Ready", "green", statusGoEntry);
|
|
eventCount++;
|
|
break;
|
|
default:
|
|
// Handle status-go and SDK bootstrap events
|
|
if (eventCount == 2) {
|
|
eventCount++;
|
|
document.dispatchEvent(new CustomEvent(readyToPairEventName, {}));
|
|
} else if (event.name != "") {
|
|
goEcho(`GO event: ${event.name}`);
|
|
document.dispatchEvent(new CustomEvent(event.name, { detail: event.payload }));
|
|
} else {
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
}
|
|
break;
|
|
}
|
|
} catch (err) {
|
|
goEcho(`GO event error: ${err.message}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
processGoEvents();
|
|
|
|
// Call the initializeSDK function on page load
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
initializeSDK();
|
|
});
|
|
|
|
function timestampToStr(timestamp) {
|
|
const date = new Date(timestamp * 1000);
|
|
const readableDate = date.toLocaleDateString();
|
|
const readableTime = date.toLocaleTimeString();
|
|
|
|
return `${readableDate} - ${readableTime}`
|
|
}
|
|
</script>
|
|
</body>
|
|
<style>
|
|
.elide-text {
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
transition: max-width 0.3s ease;
|
|
vertical-align: middle;
|
|
}
|
|
.elide-text:hover {
|
|
max-width: none;
|
|
background-color: #f0f0f0;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</html>
|