## Week 15 - 2024 Write up proof construction and submission doco for Web3 gaming. Based on `trustless-browser-sandbox`. Write up doco for React app interface to zkWasm-sercie-helper. Discuss the api, and availablity on the explorer, credit etc. ---------------------- ## Proof tasks and wasm.cloud prover After gameplay has finished the player can submit a proof task to via Delphinus Labs zkWasm prover and a smart contract can be verified on chain. The "Create Proof" invocation is usualy triggered by a button on the Main App or could be triggered by a callback from the game state controller - this is left up to the View (Main app) / gamplay UI designer. Either way a triggered create proof loads a modal card with information about the movements played in the game etc (see below). ![Selection_041](https://hackmd.io/_uploads/r1EbUzre0.png) In the demo apps/games, in React this is within `Nav.tsx` ```typescript <NewProveTask md5={md5}></NewProveTask> ``` A new prove task take the image MD5 of the games web assembily. Within `NewProveTask.tsx` a new proof is constructed from ```typescript useEffect(() => { if (l2account && gameLoaded) { const msg = msgToSign; console.log(l2account); const prikey = PrivateKey.fromString(l2account.address); const signingWitness = new SignatureWitness(prikey, msg); const sig_witness:Array<string> = signingWitness.sig.map((v) => "0x" + v+ ":bytes-packed"); const pubkey_witness:Array<string> = signingWitness.pkey.map((v) => "0x" + v+ ":bytes-packed"); const commands_info = [`${commands.length}:i64`].concat(commands.map((v) => `${v}:i64`)); const witness = pubkey_witness; for (const s of sig_witness) { witness.push(s); } setSigWitness(witness); setWitness(commands_info.concat(witness)); setInstance( ["0x" + msgHash + ":bytes-packed"] .concat(merklePreRoot.map((x)=>`${x}:i64`)) .concat(merklePostRoot.map((x)=>`${x}:i64`)) ); } if (readyToSubmit == false) { setMessage("You do not have a game play to prove"); } }, [l2account, gameLoaded, commands]); ``` The above useEffect takes the users account, the gameLoaded (which game is being played), a list of commands that the user used to get to some state in the game (the gameplay itself). In addition, internally, the state of `readyToSubmit`, i.e., whether the user has reached the end of gameplay that is worth submitting. The start of the constrcution and dispatch of the proof task is done via the Modal props: ```typscript const modalprops: ModalCommonProps = { btnLabel: "Game Proof", title: "Create Proof of Your Game Play", childrenClass: "", handleConfirm: function (): void { addNewProveTask(); }, handleClose: () => { setStatus(ModalStatus.PreConfirm); }, children: content, valid: readyToSubmit, message: message, status: status, confirmLabel: "Create Proof", }; ``` The const `addNewProveTask()` is used to take the prepared proof, obtain a signature, and dispatch it to the rpc. `prepareNewProveTask()` takes the proof message (from the above useEffect). Once initiating the "Create Proof" (usually by a button), the `prepareNewProveTask` asks the user to sign the message (via browser extension wallet) containing the Movements, MerkleRoot, PubKey and Signature information.The prrof and signature is then submit it to the zkWasm cloud prover. ```typescript const addNewProveTask = async function () { try { const task = await prepareNewProveTask(); ... dispatch(addProvingTask(task)) ... } ``` ```typescript const prepareNewProveTask = async function () { ... } ``` Without going into extensive details `prepareNewProveTask` prepares a proof using the account address, the MD5 of the Wasm (gmae) image, the public inputs (the gameplay) and the Witness of the transaction message data. ```typescript const info: ProvingParams = { user_address: account!.address.toLowerCase(), md5: props.md5, public_inputs: instance, private_inputs: witness, }; ``` This (`info`) is subsequently made into a message to be signed by the user, ehich is then sent to the zkWasm prover rpc. ## zkWasm-service-helper WIP write example of gameplay message, signed, sent and available and showing on explorer, the replies and status(s).