2023-10-26 20:16:19 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Wallet Connect status-go test</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="pairLinkInput"
|
|
|
|
|
placeholder="Insert pair link"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div id="buttonRow">
|
2023-10-27 16:18:24 +00:00
|
|
|
<!-- TODO DEV <button id="pairButton" disabled>Pair</button>-->
|
|
|
|
|
<button id="pairButton">Pair</button>
|
2023-10-26 20:16:19 +00:00
|
|
|
<button id="authButton" disabled>Auth</button>
|
|
|
|
|
<button id="acceptButton" style="display: none">Accept</button>
|
|
|
|
|
<button id="rejectButton" style="display: none">Reject</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="statusRow">
|
|
|
|
|
skd: <span id="statusText">-</span> ; status-go
|
|
|
|
|
<span id="statusGoStatusText">-</span>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="echoTextArea" rows="10" cols="80"></textarea>
|
|
|
|
|
|
|
|
|
|
<script
|
|
|
|
|
src="bundle.js"
|
|
|
|
|
type="module"
|
|
|
|
|
onload="sdkLoaded()"
|
|
|
|
|
onerror="sdkFailLoading()"
|
|
|
|
|
></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function statusGoReady() {}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
function sdkLoaded() {
|
|
|
|
|
if (window.wc === undefined) {
|
|
|
|
|
goEcho(`FAILED missing "window.wc" SDK`);
|
|
|
|
|
setStatus(`FAILED missing "window.wc" SDK`);
|
|
|
|
|
} else {
|
|
|
|
|
window.getConfiguration().then(
|
|
|
|
|
(conf) => {
|
|
|
|
|
window.wc.init(conf.projectId).then(
|
|
|
|
|
(wc) => {
|
|
|
|
|
pairLinkInput.disabled = false;
|
|
|
|
|
setStatus("initialized");
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
setStatus(`SDK error: ${JSON.stringify(err)}`, "red");
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
goEcho(`SDK getConfiguration error: ${JSON.stringify(err)}`);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pairLinkInput = document.getElementById("pairLinkInput");
|
|
|
|
|
const pairButton = document.getElementById("pairButton");
|
|
|
|
|
const authButton = document.getElementById("authButton");
|
|
|
|
|
const acceptButton = document.getElementById("acceptButton");
|
|
|
|
|
const rejectButton = document.getElementById("rejectButton");
|
|
|
|
|
|
|
|
|
|
pairLinkInput.addEventListener("input", function () {
|
|
|
|
|
pairButton.disabled = !(pairLinkInput.value.length > 0);
|
|
|
|
|
/*authButton.disabled = !(
|
|
|
|
|
pairLinkInput.value.length > 0
|
|
|
|
|
);*/
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
pairButton.addEventListener("click", function () {
|
|
|
|
|
setStatus("Pairing...");
|
|
|
|
|
try {
|
2023-10-27 16:18:24 +00:00
|
|
|
// TODO DEV: remove harcode
|
2023-10-26 20:16:19 +00:00
|
|
|
wc.pair(pairLinkInput.value)
|
|
|
|
|
.then((sessionProposal) => {
|
2023-10-27 16:18:24 +00:00
|
|
|
//let sessionProposal = JSON.parse(`{"id":1698771618724119,"params":{"id":1698771618724119,"pairingTopic":"4c36da43ac0d351336663276de6b5e2182f42068b7021e3cd1a460d9d7077e20","expiry":1698771923,"requiredNamespaces":{"eip155":{"methods":["eth_sendTransaction","personal_sign"],"chains":["eip155:5"],"events":["chainChanged","accountsChanged"]}},"optionalNamespaces":{"eip155":{"methods":["eth_signTransaction","eth_sign","eth_signTypedData","eth_signTypedData_v4"],"chains":["eip155:5"],"events":[]}},"relays":[{"protocol":"irn"}],"proposer":{"publicKey":"5d648503f2ec0e5a263578c347e490dcacb4e4359f59d66f12905bb91b9f182d","metadata":{"description":"React App for WalletConnect","url":"https://react-app.walletconnect.com","icons":["https://avatars.githubusercontent.com/u/37784886"],"name":"React App","verifyUrl":"https://verify.walletconnect.com"}}},"verifyContext":{"verified":{"verifyUrl":"https://verify.walletconnect.com","validation":"UNKNOWN","origin":"https://react-app.walletconnect.com"}}}`);
|
2023-10-26 20:16:19 +00:00
|
|
|
setStatus(`Wait user pair`);
|
|
|
|
|
setDetails(
|
|
|
|
|
`Pair ID: ${sessionProposal.id} ; Topic: ${sessionProposal.params.pairingTopic}`
|
|
|
|
|
);
|
2023-10-27 16:18:24 +00:00
|
|
|
|
|
|
|
|
window
|
|
|
|
|
.pairSessionProposal(JSON.stringify(sessionProposal))
|
|
|
|
|
.then((success) => {
|
|
|
|
|
if (!success) {
|
2023-10-26 20:16:19 +00:00
|
|
|
goEcho(
|
2023-10-27 16:18:24 +00:00
|
|
|
`GO.pairSessionProposal call failed ${sessionProposal.id}`
|
2023-10-26 20:16:19 +00:00
|
|
|
);
|
2023-10-27 16:18:24 +00:00
|
|
|
setGoStatus(`GO.pairSessionProposal failed`, "red");
|
|
|
|
|
return;
|
2023-10-26 20:16:19 +00:00
|
|
|
}
|
2023-10-27 16:18:24 +00:00
|
|
|
});
|
|
|
|
|
// Waiting for "proposeUserPair" event
|
2023-10-26 20:16:19 +00:00
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
goEcho(`Pairing error ${JSON.stringify(error)}`);
|
|
|
|
|
setStatus(`Pairing error: ${error.message}`, "red");
|
|
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
goEcho(`Pairing error ${JSON.stringify(err)}`);
|
|
|
|
|
setStatus(`Pairing error: ${err.message}`, "red");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
authButton.addEventListener("click", function () {
|
|
|
|
|
setStatus("Authenticating...");
|
|
|
|
|
window.auth();
|
|
|
|
|
});
|
|
|
|
|
|
2023-10-27 16:18:24 +00:00
|
|
|
window.wc.registerForSessionRequest((event) => {
|
2023-10-26 20:16:19 +00:00
|
|
|
setStatus(`Session topic ${event.topic}`);
|
2023-10-27 16:18:24 +00:00
|
|
|
window.sessionRequest(event).then((success) => {
|
|
|
|
|
if (!success) {
|
|
|
|
|
goEcho(`Session request status-go call failed ${event.topic}`);
|
|
|
|
|
setGoStatus(`Session ${event.id} rejected`, "purple");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// Waiting for userApproveSession event
|
|
|
|
|
});
|
|
|
|
|
});
|
2023-10-26 20:16:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goEcho(message) {
|
|
|
|
|
window.echo(message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setStatusForElement(element, message, color) {
|
|
|
|
|
const statusText = document.getElementById(element);
|
|
|
|
|
statusText.textContent = message;
|
|
|
|
|
if (color === undefined) color = "green";
|
|
|
|
|
statusText.style.color = color;
|
|
|
|
|
}
|
|
|
|
|
function setStatus(message, color) {
|
|
|
|
|
setStatusForElement("statusText", message, color);
|
|
|
|
|
}
|
|
|
|
|
function setGoStatus(message, color) {
|
|
|
|
|
setStatusForElement("statusGoStatusText", message, color);
|
|
|
|
|
}
|
|
|
|
|
function setDetails(message) {
|
|
|
|
|
const echoTextArea = document.getElementById("echoTextArea");
|
|
|
|
|
echoTextArea.value = message;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sdkFailLoading() {
|
|
|
|
|
setStatus("FAILED loading SDK", "red");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function processGoEvents() {
|
|
|
|
|
while (true) {
|
|
|
|
|
try {
|
|
|
|
|
const event = await window.popNextEvent();
|
|
|
|
|
switch (event.name) {
|
|
|
|
|
case "nodeReady":
|
|
|
|
|
setGoStatus("ready");
|
|
|
|
|
statusGoReady();
|
|
|
|
|
break;
|
2023-10-27 16:18:24 +00:00
|
|
|
case "proposeUserPair":
|
|
|
|
|
setGoStatus("Session proposed");
|
|
|
|
|
setDetails(JSON.stringify(event.payload.supportedNamespaces));
|
|
|
|
|
let sessionProposal = event.payload.sessionProposal;
|
|
|
|
|
acceptButton.addEventListener("click", function () {
|
|
|
|
|
try {
|
|
|
|
|
window.wc
|
|
|
|
|
.approveSession(
|
|
|
|
|
sessionProposal,
|
|
|
|
|
event.payload.supportedNamespaces
|
|
|
|
|
)
|
|
|
|
|
.then(
|
|
|
|
|
() => {
|
|
|
|
|
goEcho(`Session ${sessionProposal.id} approved`);
|
|
|
|
|
setStatus(`Session ${sessionProposal.id} approved`);
|
|
|
|
|
acceptButton.style.display = "none";
|
|
|
|
|
rejectButton.style.display = "none";
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
goEcho(
|
|
|
|
|
`Session ${sessionProposal.id} approve error: ${err}`
|
|
|
|
|
);
|
|
|
|
|
setStatus(
|
|
|
|
|
`Session ${sessionProposal.id} approve error: ${err}`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
goEcho(`WTF error: ${err.message}`);
|
|
|
|
|
setStatus(`WTF error: ${err.message}`);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
rejectButton.addEventListener("click", function () {
|
|
|
|
|
try {
|
|
|
|
|
window.wc.rejectSession(sessionProposal.id).then(
|
|
|
|
|
() => {
|
|
|
|
|
goEcho(`Session ${sessionProposal.id} rejected`);
|
|
|
|
|
setStatus(`Session ${sessionProposal.id} rejected`);
|
|
|
|
|
acceptButton.style.display = "none";
|
|
|
|
|
rejectButton.style.display = "none";
|
|
|
|
|
},
|
|
|
|
|
(err) => {
|
|
|
|
|
goEcho(`Session ${sessionProposal.id} reject error`);
|
|
|
|
|
setStatus(`Session ${sessionProposal.id} reject error`);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
goEcho(
|
|
|
|
|
`Session ${sessionProposal.id} reject error: ${err.message}`
|
|
|
|
|
);
|
|
|
|
|
setStatus(
|
|
|
|
|
`Session ${sessionProposal.id} reject error: ${err.message}`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
acceptButton.style.display = "inline";
|
|
|
|
|
rejectButton.style.display = "inline";
|
2023-10-26 20:16:19 +00:00
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
goEcho(`GO event error: ${err.message}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
processGoEvents();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
