fixes build

.github/workflows/gh-pages.yml

@@ -3,7 +3,7 @@ name: Deploy Miden Assembly Playground
 on:
   push:
     branches:
-      - main
+      - dominik_fix_build_again
 
 jobs:
   build:

playground/miden-wasm/src/transaction.rs

@@ -126,7 +126,6 @@ pub fn prepare_transaction() -> Result<JsValue, JsValue> {
 
 // PROVE TRANSACTION TYPES
 // ================================================================================================
-
 #[derive(Serialize, Deserialize, Debug)]
 pub struct WasmProvenTransaction {
     pub account_id: u64,

playground/src/index.css

@@ -5,6 +5,7 @@
 
 body {
   margin: 0;
+  background-color: #f5f5f5;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;

playground/src/pages/CodingEnvironment.tsx

@@ -13,9 +13,6 @@ import init, {
   run_program,
   prove_program,
   verify_program,
-  prepare_transaction,
-  prove_transaction,
-  verify_transaction,
 } from "miden-wasm";
 import toast, { Toaster } from "react-hot-toast";
 import {
@@ -27,7 +24,7 @@ import { emptyOutput, exampleCode, exampleInput } from "../utils/constants";
 
 export default function CodingEnvironment(): JSX.Element {
 
-  const [isProcessing, setIsProcessing] = useState(false);
+  const [isProcessing, setIsProcessing] = React.useState(false);
 
   /**
    * This sets the inputs to the default values.
@@ -271,4 +268,4 @@ export default function CodingEnvironment(): JSX.Element {
       </div>
     </div>
   );
-}
+}

playground/src/pages/TxProof.tsx

@@ -1,4 +1,4 @@
-import useState from "react";
+import React from "react";
 import ActionButton from "../components/ActionButton";
 import toast, { Toaster } from "react-hot-toast";
 import init, {
@@ -9,11 +9,17 @@ import init, {
 
 
 export default function TxProofPage(): JSX.Element {
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [showPrepVideo, setShowPrepVideo] = useState(false);
-    const [showProveVideo, setShowProveVideo] = useState(false);
-    const [prepared, setPrepared] = useState(false);
-    const [proven, setProven] = useState(false);
+    const [isProcessing, setIsProcessing] = React.useState(false);
+    const [showPrepVideo, setShowPrepVideo] = React.useState(false);
+    const [showProveVideo, setShowProveVideo] = React.useState(false);
+    const [prepared, setPrepared] = React.useState(false);
+    const [proven, setProven] = React.useState(false);
+
+    const [proof, setProof] = React.useState<Uint8Array | null>(null);
+    const [stackInputs, setStackInputs] = React.useState<BigUint64Array | null>(null);
+    const [stackOutputs, setStackOutputs] = React.useState<BigUint64Array | null>(null);
+    const [programHash, setProgramHash] = React.useState<BigUint64Array | null>(null);
+
 
     /**
    * This prepares the transaction.
@@ -28,7 +34,7 @@ export default function TxProofPage(): JSX.Element {
             const start = Date.now();
             const preparedTransaction = prepare_transaction();
             console.log(preparedTransaction);
-            toast.success(`Preparation successful in ${Date.now() - start} ms`);
+            toast.success(`Preparation successful in ${Date.now() - start} ms`, {duration: 4000});
         } catch (error) {
             toast.error(`Something is wrong`);
         }
@@ -51,8 +57,14 @@ export default function TxProofPage(): JSX.Element {
             console.log("Proving transaction");
             const start = Date.now();
             const provenTransaction = prove_transaction();
+
+            setProof(provenTransaction.proof);
+            setStackInputs(provenTransaction.stack_inputs);
+            setStackOutputs(provenTransaction.stack_outputs);
+            setProgramHash(provenTransaction.program_hash);
+
             console.log(provenTransaction);
-            toast.success(`Proven successful in ${Date.now() - start} ms`);
+            toast.success(`Proven successful in ${Date.now() - start} ms`, {duration: 4000});
         } catch (error) {
             toast.error(`Something is wrong`);
         }
@@ -67,9 +79,14 @@ export default function TxProofPage(): JSX.Element {
         setIsProcessing(true);
         init().then(() => {
             try {
+                if (!proof || !stackInputs || !stackOutputs || !programHash) {
+                    console.log("There is no proof to verify. \nDid you prove the program?");
+                    toast.error("Verification failed");
+                    return;
+                  }
                 console.log("Verifying transaction");
                 const start = Date.now();
-                const verified_transaction = verify_transaction();
+                const verified_transaction = verify_transaction(stackInputs, stackOutputs, programHash , proof);
                 console.log(verified_transaction);
                 toast.success(`Verification successful in ${Date.now() - start} ms`);
             } catch (error) {
@@ -97,18 +114,28 @@ export default function TxProofPage(): JSX.Element {
                     disabled={isProcessing || !proven || !prepared || showPrepVideo}
                     fixedWidth={true} />
             </div>
-        </div>
-        <div className="bg-white sm:rounded-lg flex justify-center">
+            <div className="bg-gray-100 sm:rounded-lg flex justify-center">
                 {showPrepVideo && !showProveVideo && (
-                    <div className="sm:w-60 md:w-120 lg:w-240">
-                        <video src={process.env.PUBLIC_URL + '/miden_tx_demo_prepare.mp4'} width="100%" autoPlay onEnded={onVideoEnd} />
+                    <div className="bg-gray-100 sm:w-60 md:w-120 lg:w-240">
+                        <video src={process.env.PUBLIC_URL + '/miden_tx_demo_prepare.mp4'} width="100%" autoPlay onEnded={onVideoEnd} playsInline />
                     </div>
                 )}
                 {showProveVideo && !showPrepVideo && (
-                    <div className="sm:w-60 md:w-120 lg:w-240">
-                        <video src={process.env.PUBLIC_URL + '/miden_tx_demo_prove.mp4'} width="100%" autoPlay onEnded={onVideoEnd} />
+                    <div className="bg-gray-100 sm:w-60 md:w-120 lg:w-240">
+                        <video src={process.env.PUBLIC_URL + '/miden_tx_demo_prove.mp4'} width="100%" autoPlay onEnded={onVideoEnd} playsInline />
+                    </div>
+                )}
+                {!showPrepVideo && !showProveVideo && prepared && !proven && (
+                    <div className="bg-gray-100 sm:w-60 md:w-120 lg:w-240 space-y-512">
+                        <img src={process.env.PUBLIC_URL + '/miden_tx_demo_prepared.png'} width="100%" />
+                    </div>
+                )}
+                {!showPrepVideo && !showProveVideo && prepared && proven && (
+                    <div className="bg-gray-100 sm:w-60 md:w-120 lg:w-240 space-y-512">
+                        <img src={process.env.PUBLIC_URL + '/miden_tx_demo_proven.png'} width="100%" />
                     </div>
                 )}
+            </div>
         </div></>
     );
 }