Wait for contract

src/components/Form/ApplyForm.tsx

@@ -1,9 +1,13 @@
-import { Button, Grid } from "@mui/material";
-import { useState } from "react";
+import { Box, Button, Grid, LinearProgress, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import { MerkleTreeArea } from "../Input/MerkleTreeArea";
+import { randomSleep } from "../../utils/dark-magic";
 
-export function ApplyForm () {
+export function ApplyForm ({ proof, tree}: any) {
+  const [isInit, setIsInit] = useState(false)
   const [merkleTree, setMerkleTree] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [merkleTreeProof, setMerkleTreeProof] = useState('')
   function updateClipboard(newClip: string) {
     navigator.clipboard.writeText(newClip).then(() => {
       /* clipboard successfully set */
@@ -12,29 +16,57 @@ export function ApplyForm () {
     });
   }
   return (
-    <Grid container>
+    <Grid container rowSpacing={3}>
       <Grid item container justifyContent="center">
         <Button
           variant="contained"
-          onClick={() => {
-            setMerkleTree('a')
+          disabled={isInit}
+          onClick={async () => {
+            setLoading(true)
+            setIsInit(true)
+            await randomSleep(5000)
+            setMerkleTree(JSON.stringify(tree, null, 2))
+            setMerkleTreeProof(JSON.stringify(proof, null, 2))
+            setLoading(false)
           }}
         >
-         Apply Merkle Tree
+          <Typography component="h3">
+            Create Merkle Tree and Proof
+          </Typography>
         </Button>
       </Grid>
       {
-        merkleTree ? 
-          (
-            <>
-              {/* @ts-ignore */}
-              <ASS/>
-              <MerkleTreeArea value={merkleTree}/>
-              <Button color="secondary" variant="contained" onClick={() => updateClipboard(merkleTree)}>copy</Button>
-            </>
-          )
-          : null
+        isInit ? <Grid item container columnSpacing={4}>
+          {
+            loading ?
+              <Box sx={{ width: '100%' }}>
+                <LinearProgress />
+              </Box>
+              :
+              <>
+                <Grid container item xs={6} rowSpacing={3}>
+                  <Grid container item>
+                    Merkle Tree
+                    <MerkleTreeArea value={merkleTree}/>
+                  </Grid>
+                  <Grid container item justifyContent="center">
+                    <Button color="secondary" variant="contained" onClick={() => updateClipboard(merkleTree)}>copy</Button>
+                  </Grid>
+                </Grid>
+                <Grid container item xs={6} rowSpacing={3}>
+                  <Grid container item>
+                    Proof
+                    <MerkleTreeArea value={merkleTreeProof}/>
+                  </Grid>
+                  <Grid container item justifyContent="center">
+                    <Button color="secondary" variant="contained" onClick={() => updateClipboard(merkleTreeProof)}>copy</Button>
+                  </Grid>
+                </Grid>
+              </>
+          }
+        </Grid> : null
       }
+
     </Grid>
   )
 }

src/components/Form/BorrowForm.tsx

@@ -9,14 +9,16 @@ export function BorrowForm ({ onSubmit, loading }: any) {
     <Grid container rowSpacing={4} justifyContent="center">
       <Grid container item xs={7}>
         <TextField
-          placeholder="Paste your Merkle Tree result here"
+          placeholder="Paste your Merkle Tree Proof there"
           multiline
           rows={10}
           style={{
             width: '100%'
           }}
           disabled={loading}
-          onChange={(e) => setMerkle(e.target.value)}
+          onChange={(e) => {
+            setMerkle(JSON.parse(e.target.value))
+          }}
         />
       </Grid>
       <Grid container item xs={7}>

src/components/Input/MerkleTreeArea.tsx

@@ -3,7 +3,6 @@ import { TextField, Typography } from "@mui/material";
 export function MerkleTreeArea ({ onChange, value}: any) {
   return (
     <TextField
-      placeholder="Paste your Merkle Tree result here"
       multiline
       rows={10}
       style={{

src/pages/dai.tsx

@@ -5,9 +5,9 @@ import { useState } from "react";
 
 export default function DaiPage () {
   const [ creatingProof, setCreatingProof ] = useState(false)
-  async function proof (amount: number) {
+  async function proof (amount: number, merkle: any) {
     setCreatingProof(true)
-    const result = await generateProof(amount)
+    const result = await generateProof(amount, merkle)
       .finally(() => {
         setCreatingProof(false)
       })
@@ -24,7 +24,7 @@ export default function DaiPage () {
                 amount: number,
                 merkle: string,
               }) => {
-                proof(e.amount)
+                proof(e.amount, e.merkle)
               }}
               loading={creatingProof}
             />

src/pages/merkle-tree.tsx

@@ -11,7 +11,7 @@ function Page({ data }: {
 }) {
   return (
     <>
-      <ApplyForm />
+      <ApplyForm tree={data.tree} proof={data.proof}/>
     </>
   )
 }

src/services/proof.service.ts

@@ -22,18 +22,12 @@ export async function exportSolidity({ proof, publicSignals }: any) {
 
 export async function generateProof(
   amount: number,
+  merkle: any,
   filePathWASM: string = '/base.wasm',
   filePathZKEY: string = '/base.zkey',
 ) {
   const circuitInputs = {
-    accountRoot: "0x27d7d6e3a855c2cff1234b9c249f25c97efaa6e1f67309dbe9f3c1983e3302d6",
-    certValue: 9527,
-    path: [
-      "0x2a09a9fd93c590c26b91effbb2499f07e8f7aa12e2b4940a3aed2411cb65e11c",
-      "0x231be438cf8d6a322f51a7182ae96fb67aa3a7d1673abecc96955fa51f6d7168",
-      "0x2258b1ae87b52b884ce173eb875bd74d675401aa4dc20c8989f080ce517f4c30"
-    ],
-    idx: [ 0, 0, 1 ],
+    ...merkle,
     borrowAmount: amount,
   }
   console.log(circuitInputs)

src/utils/dark-magic.ts

@@ -0,0 +1,11 @@
+export function sleep (time: number) {
+  return new Promise<void> (resolve => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}
+
+export function randomSleep (max: number = 3000) {
+  return sleep(Math.random() * max)
+}