solutions/frontend/script2.js

class Proof {

    constructor(a, b, c, inputs) {
        this.a = a;
        this.b = b;
        this.c = c;
        this.inputs = inputs;
    }
}

class VerificationKey {

    constructor(alpha, beta, gamma, delta, gammaABC) {
        this.alpha = alpha;
        this.beta = beta;
        this.gamma = gamma;
        this.delta = delta;
        this.gammaABC = gammaABC;
    }
}


function readFileAsJson(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();

        reader.onload = function (event) {
            try {
                const jsonObj = JSON.parse(event.target.result);
                resolve(jsonObj);
            } catch (error) {
                reject(error);
            }
        };

        reader.onerror = function () {
            reject(new Error("Error reading the file."));
        };

        reader.readAsText(file);
    });
}

document.getElementById('submitBtn').addEventListener('click', async function () {
    document.getElementById('successIndicator').style.display = 'none';
    document.getElementById('failureIndicator').style.display = 'none';
    document.getElementById('loadingIndicator').style.display = 'block';
    // Getting values from input fields
    const fileInput = document.getElementById('fileInput');
    if (fileInput.files.length === 0) {
        alert("Please upload a JSON file.");
        document.getElementById('loadingIndicator').style.display = 'none';
        return;
    }
    const file = fileInput.files[0];

    let proof;
    try {
        const jsonObj = await readFileAsJson(file);

        const a = jsonObj.proof.a;
        const b = jsonObj.proof.b;
        const c = jsonObj.proof.c;
        const inputs = jsonObj.inputs;
        proof = new Proof(a, b, c, inputs);


    } catch (error) {
        console.error('Error:', error);
        document.getElementById('failureIndicator').style.display = 'block';
        document.getElementById('loadingIndicator').style.display = 'none';
    }


    const fileInput2 = document.getElementById('fileInput2');
    if (fileInput2.files.length === 0) {
        alert("Please upload a JSON file.");
        document.getElementById('loadingIndicator').style.display = 'none';
        return;
    }
    const file2 = fileInput2.files[0];

    let vk;
    try {
        const jsonObj = await readFileAsJson(file2);


        const alpha = jsonObj.alpha;
        const beta = jsonObj.beta;
        const gamma = jsonObj.gamma;
        const delta = jsonObj.delta;
        const gammaABC = jsonObj.gamma_abc;
        vk = new VerificationKey(alpha, beta, gamma, delta, gammaABC);

    } catch (error) {
        console.error('Error:', error);
        document.getElementById('failureIndicator').style.display = 'block';
        document.getElementById('loadingIndicator').style.display = 'none';
    }


    // Call a specific pallet function (example: transfer)
    // Replace 'palletName.methodName' with the actual pallet method you want to call
    // and adjust the parameters as needed.
    try {
        let inputs = "0x"+proof.inputs.map((input) => { return input.substring(2).toLowerCase() }).join('');
        console.log(inputs);
        const transaction = api.tx.zkpVerifyModule.verifyG16(vk.alpha[0], vk.alpha[1], vk.beta[0][0], vk.beta[0][1], vk.beta[1][0], vk.beta[1][1], vk.gamma[0][0], vk.gamma[0][1], vk.gamma[1][0], vk.gamma[1][1], vk.delta[0][0], vk.delta[0][1], vk.delta[1][0], vk.delta[1][1], vk.gammaABC[0][0], vk.gammaABC[0][1], vk.gammaABC[1][0], vk.gammaABC[1][1], inputs, proof.a[0], proof.a[1], proof.b[0][0], proof.b[0][1], proof.b[1][0], proof.b[1][1], proof.c[0], proof.c[1]);
        
        const unsub = await transaction.signAndSend(selectedAccount, { signer: injector.signer }, ({ status, events, dispatchError }) => {
            console.log("Hi");
            if (status.isInBlock || status.isFinalized) {
                events.forEach(({ event: { data, method, section } }) => {
                    console.log(`Event: ${section}.${method}`, data.toString());
                    if (method === 'ValidationSuccess') {
                        document.getElementById('loadingIndicator').style.display = 'none';
                        document.getElementById('successIndicator').style.display = 'block';
                    }
                });

                if (dispatchError) {
                    document.getElementById('loadingIndicator').style.display = 'none';
                    document.getElementById('failureIndicator').style.display = 'block';
                    if (dispatchError.isModule) {
                        // For module errors, we have the section indexed, lookup
                        const decoded = api.registry.findMetaError(dispatchError.asModule);
                        const { documentation, method, section } = decoded;

                        console.error(`${section}.${method}: ${documentation.join(' ')}`);
                    } else {
                        // Other, CannotLookup, BadOrigin, no extra info
                        console.error(dispatchError.toString());
                    }
                }
                unsub();
            }
        });
    } catch (error) {
        console.error('Error:', error);
    }

});
let api;
let selectedAccount;
let injector;
// On page loaded
window.addEventListener('load', async () => {
    // Initialize the Polkadot.js API
    const { ApiPromise, WsProvider } = polkadotApi;
    const wsProvider = new WsProvider('ws://127.0.0.1:9944');
    api = await ApiPromise.create({ provider: wsProvider });

    // Initialize the Polkadot.js API
    const { web3Accounts, web3Enable, web3FromAddress } = polkadotExtensionDapp;


    // Request access to the user's Polkadot.js accounts
    const extensions = await web3Enable('My Polkadot.js Integration App');
    if (extensions.length === 0) {
        // No extension installed, or the user refused to authorize access
        return;
    }

    // Get the user's accounts
    const allAccounts = await web3Accounts();
    if (allAccounts.length === 0) {
        // No accounts available
        return;
    }

    // Select account to use (for simplicity, using the first account)
    selectedAccount = allAccounts[0].address;
    injector = await web3FromAddress(selectedAccount);

});

document.getElementById('successIndicator').style.display = 'none';
document.getElementById('failureIndicator').style.display = 'none';