feat: progress bar and incremental PoW generation

This commit is contained in:
Aravinth Manivannan
2023-10-29 06:28:05 +05:30
parent ad4582cc16
commit 9dfb0713ad
8 changed files with 221 additions and 137 deletions

View File

@@ -3,7 +3,7 @@
//
// SPDX-License-Identifier: MIT OR Apache-2.0
import { Work, ServiceWorkerWork } from "./types";
import { Work, ServiceWorkerMessage } from "./types";
import fetchPoWConfig from "./fetchPoWConfig";
import sendWork from "./sendWork";
import sendToParent from "./sendToParent";
@@ -24,6 +24,9 @@ export const registerVerificationEventHandler = (): void => {
};
export const solveCaptchaRunner = async (e: Event): Promise<void> => {
const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
let width = 0;
if (LOCK) {
e.preventDefault();
return;
@@ -32,6 +35,8 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
try {
LOCK = true;
if (CONST.btn().checked == false) {
width = 0;
PROGRESS_FILL.style.width = `${width}%`;
CONST.messageText().before();
LOCK = false;
return;
@@ -43,32 +48,49 @@ export const solveCaptchaRunner = async (e: Event): Promise<void> => {
CONST.messageText().during();
// 1. get config
const config = await fetchPoWConfig();
const max_recorded_nonce = config.max_recorded_nonce;
// 2. prove work
worker.postMessage(config);
worker.onmessage = async (event: MessageEvent) => {
const resp: ServiceWorkerWork = event.data;
console.log(
`Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.work.time}`
);
const resp: ServiceWorkerMessage = event.data;
const proof: Work = {
key: CONST.sitekey(),
string: config.string,
nonce: resp.work.nonce,
result: resp.work.result,
time: Math.trunc(resp.work.time),
worker_type: resp.work.worker_type,
};
if (resp.type === "work") {
width = 80;
PROGRESS_FILL.style.width = `${width}%`;
console.log(
`Proof generated. Difficuly: ${config.difficulty_factor} Duration: ${resp.value.work.time}`
);
// 3. submit work
const token = await sendWork(proof);
// 4. send token
sendToParent(token);
// 5. mark checkbox checked
CONST.btn().checked = true;
CONST.messageText().after();
LOCK = false;
const proof: Work = {
key: CONST.sitekey(),
string: config.string,
nonce: resp.value.work.nonce,
result: resp.value.work.result,
time: Math.trunc(resp.value.work.time),
worker_type: resp.value.work.worker_type,
};
width = 90;
PROGRESS_FILL.style.width = `${width}%`;
// 3. submit work
const token = await sendWork(proof);
// 4. send token
sendToParent(token);
// 5. mark checkbox checked
CONST.btn().checked = true;
width = 100;
PROGRESS_FILL.style.width = `${width}%`;
CONST.messageText().after();
LOCK = false;
}
if (resp.type === "progress") {
if (width < 80) {
width = (resp.nonce / max_recorded_nonce) * 100;
PROGRESS_FILL.style.width = `${width}%`;
}
console.log(`received nonce ${resp.nonce}`);
}
};
} catch (e) {
CONST.messageText().error();