test page input args

betteridea-dev · Dec 29, 2023 · a70fcb6 · a70fcb6
1 parent 4e5ff4e
commit a70fcb6
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 44 deletions.
diff --git a/app/src/components/deploy.tsx b/app/src/components/deploy.tsx
@@ -173,7 +173,7 @@ export default function Deploy({ contracts, target, test }: { contracts: contrac
                     </div>
                 </div>
 
-                <label htmlFor="wallet" className="p-2 px-4 cursor-pointer rounded bg-[#093E49] text-center w-fit mx-auto">{!state.walletJWK ? "Import a wallet.json file" : `Imported: ${state.fileName} ✅`}</label>
+                <label htmlFor="wallet" className="p-2 px-4 cursor-pointer rounded bg-[#093E49] text-center w-fit mx-auto hover:scale-105 active:scale-95">{!state.walletJWK ? "Import a wallet.json file" : `Imported: ${state.fileName} ✅`}</label>
                 <input type="file" accept="application/JSON" id="wallet" className="hidden" onChange={(e) => dispatch({ type: "set_file", payload: e.target.files[0] })} />
 
                 <div className="flex flex-col gap-3 justify-center items-center">
@@ -215,4 +215,4 @@ export default function Deploy({ contracts, target, test }: { contracts: contrac
                 </div>
         }
     </div>
-}
+}
diff --git a/app/src/components/test.tsx b/app/src/components/test.tsx
@@ -1,5 +1,70 @@
+import { useState, useEffect } from "react"
+import useDeployments, { deployment } from "../hooks/useDeployments"
+import useContracts from "../hooks/useContracts"
+
 export default function Test({ target }: { target: string }) {
-    return <div>
-        Test {target}
+    const [activeDeployment, setActiveDeployment] = useState<string>()
+    const [callType, setCallType] = useState<"read" | "write">("read")
+    const [functionName, setFunctionName] = useState<string>("")
+    const { deployments, removeDeployment } = useDeployments()
+    const { contracts, setContracts } = useContracts()
+
+    useEffect(() => {
+        setContracts({
+            ...contracts,
+            "input": {
+                "README.md": "This is not a contract. The state.json is used to send arguments to the contract for testing.",
+                "state.json": JSON.stringify({ name: "ankushKun" }),
+                "contract.js": ""
+            }
+        })
+        if (!target) return
+        setActiveDeployment(target)
+    }, [])
+
+    return <div className="flex flex-col justify-center items-center h-full gap-5">
+        <div className="w-fit">
+            <label className="block text-white">Select a deployment</label>
+            <select className="bg-white rounded-md px-2 py-1"
+                defaultValue={target || "none"} onChange={(e) => setActiveDeployment(e.target.value)}>
+                <option value="none" disabled>Select a deployment</option>
+                {Object.keys(deployments).map((key) => {
+                    return <option key={key} value={key}>{key} ({deployments[key].env}-{deployments[key].txid})</option>
+                })}
+            </select>
+        </div>
+        <div className="w-full grid grid-cols-2 p-5 gap-5">
+            <div className="flex flex-col gap-1">
+                <div className="text-2xl">Call a Function</div>
+                <div className="flex gap-5 items-center">
+                    <div>Type:</div>
+                    <div className="flex items-center gap-1">
+                        <input type="radio" name="calltype" id="read" value="read" checked={callType == "read"} onClick={() => setCallType("read")} />
+                        <label htmlFor="read">Read</label>
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input type="radio" name="calltype" id="write" value="write" checked={callType == "write"} onClick={() => setCallType("write")} />
+                        <label htmlFor="write">Write</label>
+                    </div>
+                </div>
+                <div className="text-lg mt-5">Function Name</div>
+                <select className="bg-white rounded-md px-2 py-1 w-fit mb-2" defaultValue="none" onChange={(e) => setFunctionName(e.target.value)}>
+                    <option value="none" disabled>Select a function</option>
+                    <option value="test">test</option>
+
+                </select>
+                {/* input json */}
+                <div className="ring-1 ring-white/20 rounded overflow-clip p-0.5 h-full"><iframe className="rounded" src={`/betterIDE?editor&language=json&file=input/state.json`} className="w-full h-full" /></div>
+                {/* call button */}
+                <button className="bg-green-500 my-5 text-black rounded-md px-4 p-1 w-fit active:scale-95 hover:scale-105">RUN</button>
+            </div>
+            <div className="flex flex-col gap-1">
+                <div className="text-2xl">Output</div>
+                <div>Result</div>
+                <pre className="bg-white/10 p-1 rounded">...</pre>
+                <div>Latest State</div>
+                <pre className="bg-white/10 p-1 rounded">...</pre>
+            </div>
+        </div>
     </div>
-}
+}
diff --git a/app/src/editor.tsx b/app/src/editor.tsx
@@ -41,4 +41,4 @@ export default function CEditor() {
         defaultValue={value}
         onChange={(value) => { setValue(value) }}
     />
-}
+}
diff --git a/app/src/hooks/useDeployments.ts b/app/src/hooks/useDeployments.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 
-type deployment = {
+export type deployment = {
     "txid": string,
     "env": string
 }
@@ -10,48 +10,30 @@ export type deploymentType = {
 }
 
 export default function useDeployments() {
-    const [localDeployments, setLocalDeployments] = useState<deploymentType>(JSON.parse(sessionStorage.getItem("localDeployments")!) || {})
-    const [netDeployments, setNetDeployments] = useState<deploymentType>(JSON.parse(localStorage.getItem("deployments")!) || {})
-
+    const [deployments, setDeployments] = useState<deploymentType>(JSON.parse(localStorage.getItem("deployments")!) || {})
 
     useEffect(() => {
-        if (localDeployments) sessionStorage.setItem("localDeployments", JSON.stringify(localDeployments))
-        if (netDeployments) localStorage.setItem("deployments", JSON.stringify(netDeployments))
-    }, [localDeployments, netDeployments])
+        if (deployments) localStorage.setItem("deployments", JSON.stringify(deployments))
+    }, [deployments])
 
     function newDeployment(name: string, txid: string, env: string) {
-        if (env == "local") {
-            const nc = {
-                ...localDeployments,
-                [name]: {
-                    "txid": txid,
-                    "env": env
-                }
-            }
-            setLocalDeployments(nc)
-        } else {
-            const nc = {
-                ...netDeployments,
-                [name]: {
-                    "txid": txid,
-                    "env": env
-                }
+        console.log("newDeployment", name, txid, env)
+        const nc = {
+            ...deployments,
+            [name]: {
+                "txid": txid,
+                "env": env
             }
-            setNetDeployments(nc)
         }
+        setDeployments(nc)
+
     }
 
-    function removeDeployment(name: string, env: string) {
-        if (env == "local") {
-            const nc = { ...localDeployments }
-            delete nc[name]
-            setLocalDeployments(nc)
-        } else {
-            const nc = { ...netDeployments }
-            delete nc[name]
-            setNetDeployments(nc)
-        }
+    function removeDeployment(name: string) {
+        const nc = { ...deployments }
+        delete nc[name]
+        setDeployments(nc)
     }
 
-    return { localDeployments, netDeployments, newDeployment, removeDeployment }
+    return { deployments, newDeployment, removeDeployment }
 }
diff --git a/app/src/ide.tsx b/app/src/ide.tsx
@@ -182,4 +182,4 @@ export default function IDE() {
             </div>
         </div>
     </div>
-}
+}
diff --git a/app/src/index.css b/app/src/index.css
@@ -9,14 +9,23 @@
   scroll-behavior: smooth !important;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  font-family: monospace;
+  /* font-family: monospace; */
   color: whitesmoke;
+  transition: all 150ms ease;
 }
 
 *::-webkit-scrollbar {
   display: none;
 }
 
+button:hover{
+  transform: scale(1.05);
+}
+
+button:active{
+  transform: scale(0.95);
+}
+
 html,
 body {
   min-height: 100vh;
@@ -39,4 +48,9 @@ select:focus {
 select:active {
   border: none;
   outline: none;
-}
+}
+
+select option {
+  background-color: whitesmoke;
+  color: black;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,4 +41,4 @@ export default function CEditor() { @@
             defaultValue={value}
             onChange={(value) => { setValue(value) }}
         />
-    }
+    }