fixes build

0xPolygonMiden · Jul 18, 2023 · 7a81192 · 7a81192
1 parent c54c800
commit 7a81192
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 20 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -3,7 +3,7 @@ name: Deploy Miden Assembly Playground
 on:
   push:
     branches:
-      - main
+      - dominik_fix_build_again
 
 jobs:
   build:

diff --git a/playground/public/miden_tx_demo_prepare.mp4 b/playground/public/miden_tx_demo_prepare.mp4
diff --git a/playground/public/miden_tx_demo_prepared.png b/playground/public/miden_tx_demo_prepared.png
diff --git a/playground/public/miden_tx_demo_prove.mp4 b/playground/public/miden_tx_demo_prove.mp4
diff --git a/playground/public/miden_tx_demo_proven.png b/playground/public/miden_tx_demo_proven.png
diff --git a/playground/src/index.css b/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;

diff --git a/playground/src/pages/CodingEnvironment.tsx b/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>
   );
-}
+}
diff --git a/playground/src/pages/TxProof.tsx b/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,11 @@ 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);
 
     /**
    * This prepares the transaction.
@@ -28,7 +28,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`);
         }
@@ -52,7 +52,7 @@ export default function TxProofPage(): JSX.Element {
             const start = Date.now();
             const provenTransaction = prove_transaction();
             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`);
         }
@@ -97,18 +97,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></>
     );
 }