feat: added arguments to deploy functionality

horuslabsio · May 5, 2024 · 79946ef · 79946ef
1 parent ec1aa00
commit 79946ef
Show file tree

Hide file tree

Showing 2 changed files with 3,927 additions and 3,981 deletions.
diff --git a/frontend/src/app/components/ScaffoldDeployer/ScaffoldDeployer.tsx b/frontend/src/app/components/ScaffoldDeployer/ScaffoldDeployer.tsx
@@ -5,7 +5,12 @@ import trash from "../../../../public/assets/deleteIcon.svg";
 import { useRef, useState } from "react";
 import Header from "../Header";
 import Image from "next/image";
-import { UniversalDeployerContractPayload } from "starknet";
+import {
+  CallData,
+  Calldata,
+  UniversalDeployerContractPayload,
+  num,
+} from "starknet";
 import { useAccount } from "@starknet-react/core";
 interface FileList {
   lastModified: number;
@@ -21,9 +26,27 @@ function ScaffoldDeployer() {
   const [selectedFiles, setSelectedFiles] = useState<FileList[]>([]);
   const [classHash, setClassHash] = useState("");
   const [deployedAddress, setDeployedAddress] = useState("");
+  const [argumentsList, setArgumentsList] = useState([""]);
+  const [argumentError, setArgumentError] = useState("");
 
   const { account, isConnected } = useAccount();
 
+  const handleInputChange = (index: number, event: any) => {
+    const newArgumentsList = [...argumentsList];
+    newArgumentsList[index] = event.target.value;
+    setArgumentsList(newArgumentsList);
+  };
+
+  const handleAddArgument = () => {
+    if (argumentsList[argumentsList.length - 1] === "") {
+      setArgumentError(
+        "Input an argument value in the previous field before adding another!"
+      );
+      return;
+    }
+    setArgumentsList([...argumentsList, ""]);
+  };
+
   const handleFileSelect = (event: any) => {
     event.preventDefault();
     console.log("file upload");
@@ -57,8 +80,12 @@ function ScaffoldDeployer() {
       if (!isConnected || !account) {
         throw new Error("Connect wallet to continue");
       }
-      const payload: UniversalDeployerContractPayload = {
+      const contractConstructor = CallData.compile(argumentsList);
+      const payload: UniversalDeployerContractPayload = argumentsList[0] === '' ? {
+        classHash: classHash,
+      } : {
         classHash: classHash,
+        constructorCalldata: contractConstructor,
       };
       const result = await account.deployContract(payload);
       console.log(
@@ -142,6 +169,28 @@ function ScaffoldDeployer() {
             }}
             value={classHash}
           />
+          <div className="mb-4">
+            <h2 className="text-lg font-bold mb-2">Constructor Arguments</h2>
+            <div className="flex flex-col gap-y-3">
+              {argumentsList.map((arg, index) => (
+                <div key={index} className="flex items-center gap-x-2">
+                  <h4 className="text-base font-medium w-[120px]">
+                    Argument {index + 1}
+                  </h4>
+                  <input
+                    type="text"
+                    value={arg}
+                    className="py-2 px-6 rounded-md w-full text-[#333]"
+                    onChange={(event) => handleInputChange(index, event)}
+                  />
+                </div>
+              ))}
+              {argumentError === "" && (
+                <h6 className=" text-red-600 text-sm">{argumentError}</h6>
+              )}
+            </div>
+          </div>
+
           {deployedAddress && (
             <div>
               <p>Deployed Address</p>
@@ -154,17 +203,27 @@ function ScaffoldDeployer() {
             </div>
           )}
 
-          <button
-            type="submit"
-            disabled={disableButton}
-            className="bg-blue-500 py-3 px-4 rounded-[5px] w-[200px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
-          >
-            Deploy
-          </button>
+          <div className="flex items-center gap-x-5">
+            <button
+              type="button"
+              onClick={handleAddArgument}
+              disabled={argumentsList[argumentsList.length - 1] === ""}
+              className="bg-blue-500 py-3 px-4 rounded-[5px] w-[250px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
+            >
+              Add argument
+            </button>
+            <button
+              type="submit"
+              disabled={disableButton}
+              className="bg-blue-500 py-3 px-4 rounded-[5px] w-[200px] text-white disabled:bg-slate-300 disabled:cursor-not-allowed"
+            >
+              Deploy
+            </button>
+          </div>
         </form>
       </div>
     </div>
   );
 }
 
-export default ScaffoldDeployer;
+export default ScaffoldDeployer;