From 5bc4622d948ed06fb9c2872e84aa04a1524fce41 Mon Sep 17 00:00:00 2001 From: ankushKun Date: Wed, 6 Dec 2023 03:22:02 +0530 Subject: [PATCH] test working --- src/App.tsx | 4 + src/components/jsonArgs.tsx | 20 +++ src/pages/Deploy.tsx | 2 +- src/pages/Test.tsx | 268 +++++++++++++++++++++--------------- 4 files changed, 182 insertions(+), 112 deletions(-) create mode 100644 src/components/jsonArgs.tsx diff --git a/src/App.tsx b/src/App.tsx index 4ed17cf..d982e92 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import GlobalCloud from './pages/GlobalCloud'; import Sidebar from './components/Sidebar'; import Code from './pages/Code'; import Test from './pages/Test'; +import JsonArgs from './components/jsonArgs'; function App() { const [showSidebar, setShowSidebar] = useState(false); @@ -19,6 +20,9 @@ function App() { if (open == "editor") { return } + if (open == "jsonArgs") { + return + } return ( <> diff --git a/src/components/jsonArgs.tsx b/src/components/jsonArgs.tsx new file mode 100644 index 0000000..5782264 --- /dev/null +++ b/src/components/jsonArgs.tsx @@ -0,0 +1,20 @@ +import { Editor, useMonaco } from "@monaco-editor/react"; +import { editor } from "monaco-editor" +import theem from "../themes/merbivore-modified.json" + +export default function JsonArgs({ setShowSidebar }: { setShowSidebar: any }) { + setShowSidebar(false); + const monaco = useMonaco(); + monaco?.editor.defineTheme('custom', theem as editor.IStandaloneThemeData); + + return sessionStorage.setItem("jsonArgs", e as string)} + /> +} \ No newline at end of file diff --git a/src/pages/Deploy.tsx b/src/pages/Deploy.tsx index 9f7af5a..53ed2dd 100644 --- a/src/pages/Deploy.tsx +++ b/src/pages/Deploy.tsx @@ -142,7 +142,7 @@ const Deploy = ({ setShowSidebar }: { setShowSidebar: any }) => { } return ( -
+
{ !deploySuccess ? <>
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx index 66f7066..14bb37d 100644 --- a/src/pages/Test.tsx +++ b/src/pages/Test.tsx @@ -1,124 +1,170 @@ -import {useState} from 'react' +import { useEffect, useState } from 'react' +import { viewContractState, writeContract } from 'arweavekit' +type deployments = { + [key: string]: { + id: string, + env: "local" | "mainnet", + functions: string[] + } +} + +const sampleInput = '{ "name": "ankushKun" }' const Test = ({ setShowSidebar }: { setShowSidebar: any }) => { - // to show the side bar - setShowSidebar(true); - const [accessLevel, setAccessLevel] = useState('read'); - const [functionName, setFunctionName] = useState('function1'); - const [inputJson, setInputJson] = useState(''); - const handleChange=(e)=>{ - const {name,value}=e.target; - if(name=="accessLevel") - { - setAccessLevel(value); - } - else if(name=="functionName") - { - setFunctionName(value); - } - else if(name=="inputJson") - { - setInputJson(value); - } - else - { - console.log("wrong name in the form"); + // to show the side bar + setShowSidebar(true); + // const [functionType, setFunctionType] = useState('read'); + // const [functionArgs, setFunctionArgs] = useState(''); + + const [deployments, setDeployments] = useState({}) + const [selectedContract, setSelectedContract] = useState("") + const [functionType, setFunctionType] = useState("read") + const [functionName, setFunctionName] = useState("") + const [result, setResult] = useState("") + const [state, setState] = useState("") + const [success, setSuccess] = useState(false) + + const urlParams = new URLSearchParams(window.location.search) + const conName = urlParams.get("conName") + + + useEffect(() => { + const deployments = sessionStorage.getItem("deployments") + if (!deployments) return + const parsed = JSON.parse(deployments) + setDeployments(parsed) + if (conName) setSelectedContract(conName) + }, []) + + async function interact() { + if (!selectedContract) setResult("please select a contract") + else if (functionType == "") setResult("please select a function type") + else if (!functionName) setResult("please enter a function name") + + if (functionType == "read") { + const res = await viewContractState({ + environment: deployments[selectedContract].env, + contractTxId: deployments[selectedContract].id, + options: { + function: functionName, + ...JSON.parse(sessionStorage.getItem("jsonArgs") || sampleInput) + }, + strategy: "arweave" + }) + console.log(res) + if (res.result.status == 200) { + setSuccess(true) + setResult(JSON.stringify({ result: res.viewContract.result }, null, 2)) + } else { + setSuccess(false) + setResult(`error: ${res.result.status} + ${res.result.statusText} + + ${res.viewContract.errorMessage}`) + } + setState(JSON.stringify(res.viewContract.state, null, 2)) + } + else if (functionType == "write") { + try { + const res = await writeContract({ + wallet: "use_wallet", + environment: deployments[selectedContract].env, + contractTxId: deployments[selectedContract].id, + options: { + function: functionName, + ...JSON.parse(sessionStorage.getItem("jsonArgs") || sampleInput) + }, + strategy: "arweave" + }) + console.log(res) + if (res.result.status == 200) { + setSuccess(true) + setResult("TXN ID: " + res.writeContract.originalTxId) + } else { + setSuccess(false) + setResult(`error: ${res.result.status} +${res.result.statusText} + +${res.writeContract.errorMessage}`) + } + setState(JSON.stringify(res.state, null, 2)) + } + catch (e) { + console.log(e) + setResult(e as string) + } + } + } + + function goDownOnJSON(e) { + console.log(e) + if (e.keyCode == 9) { + e.preventDefault() + var v = e.target.value, s = e.target.selectionStart, e = e.target.selectionEnd; + e.target.value = v.substring(0, s) + '\t' + v.substring(e); + e.target.selectionStart = e.target.selectionEnd = s + 1; + return false; } - const handleSubmit = (event) => { - event.preventDefault(); - // You can perform actions with the form data here - }; + } + return ( -
-
-
- Select contracts to test - setSelectedContract(e.target.value)}> + + { + Object.keys(deployments).map((key) => { + return + }) + } + +
+
+
+
Call a function
+
type of action: + + setFunctionType("read")} /> + + + + setFunctionType("write")} /> + + +
+
+
Function Name
+ +
+
+
Input JSON
+ +
+
-
-
-
-
-
- Call a function -
- - setAccessLevel('read')} - /> - - setAccessLevel('write')} - /> - -
+
+
Output
+
+
+
Result
+ 
{result}
- -
- - -
- -
- -