Merge pull request #58 from Calebux/scaffold-deployer

feat: scaffold deployer component

frontend/src/app/components/ScaffoldDeployer/ScaffoldDeployer.tsx

@@ -0,0 +1,129 @@
+"use client";
+import cloudUploadIcon from "../../../../public/assets/cloudUploadIcon.svg";
+import fileIcon from "../../../../public/assets/fileIcon.svg";
+import trash from "../../../../public/assets/deleteIcon.svg";
+import { useRef, useState } from "react";
+import Header from "../Header";
+import Image from "next/image";
+
+interface FileList {
+  lastModified: number;
+  lastModifiedDate: Date;
+  name: string;
+  size: number;
+  type: string;
+  webkitRelativePath: string;
+}
+
+function ScaffoldDeployer() {
+  const fileInputRef: any = useRef(null);
+  const [selectedFiles, setSelectedFiles] = useState<FileList[]>([]);
+
+  const handleFileSelect = (event: any) => {
+    event.preventDefault();
+    console.log("file upload");
+    const files: any = Array.from(event.target.files);
+    setSelectedFiles(files);
+    console.log(event.target.files);
+    console.log(selectedFiles);
+  };
+
+  const handleDeleteFile = (event: any) => {
+    event.preventDefault();
+    setSelectedFiles([]);
+  };
+
+  const handleDragOver = (event: any) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event: any) => {
+    event.preventDefault();
+    const files: any = Array.from(event.dataTransfer.files);
+    setSelectedFiles(files);
+  };
+  return (
+    <div className="flex flex-col dark:text-white text-black">
+      <Header />
+      <div className="flex items-center flex-col p-4 pt-20">
+        <form action="" className="flex flex-col">
+          <h1 className="text-2xl font-bold">Declare</h1>
+          {selectedFiles.length == 0 ? (
+            <div
+              className=" flex w-[600px] flex-col items-center rounded-[5px] border-[1px]  border-dashed border-[#333] bg-white pb-[90px] mb-5 mt-3 pt-[90px] text-center"
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+            >
+              <Image src={cloudUploadIcon} className="mb-10" alt="" />
+              <h2 className="mb-2  text-[22px] font-normal text-black">
+                Input Contract JSON RPC File
+              </h2>
+              <input
+                type="file"
+                onChange={(e) => handleFileSelect(e)}
+                multiple
+                style={{ display: "none" }}
+                ref={fileInputRef}
+              />
+
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  fileInputRef?.current.click();
+                }}
+                className="rounded-lg border-[1px] border-solid border-dark132 px-[57px] py-[16px] font-satoshi text-lg font-medium text-black"
+              >
+                Browse File
+              </button>
+            </div>
+          ) : (
+            <div className="bg-white flex items-center w-[600px] justify-between rounded-[20px] mt-3 mb-5 py-[16px] pl-8 pr-[52px]">
+              <div className="flex items-center">
+                <div className="relative flex h-[96px] w-[118px] justify-end">
+                  <div className="absolute left-0 top-[40px] z-20 min-w-[70px] rounded-lg bg-[#2ECC71] px-[4.5px] py-[1.5px] text-center font-satoshi text-2xl font-medium text-white">
+                    {selectedFiles?.at(0)?.name?.split(".")[1].toUpperCase()}
+                  </div>
+                  <Image src={fileIcon} className="" alt="file icon" />
+                </div>
+                <div>
+                  <h3 className="mb-2 text-[22px] font-medium text-black">
+                    {selectedFiles?.at(0)?.name.split(".")[0]}
+                  </h3>
+                </div>
+              </div>
+              <button onClick={handleDeleteFile}>
+                <Image src={trash} alt="trash icon" />
+              </button>
+            </div>
+          )}
+          <button className="bg-blue-500 py-3 px-4 rounded-[5px] w-[200px] text-white">
+            Declare
+          </button>
+        </form>
+        <form action="" className="flex flex-col mt-12">
+          <h1 className="text-2xl font-bold">Deploy</h1>
+          <input
+            type="text"
+            className="mt-4 mb-6 text-black p-3 rounded w-[600px]"
+            placeholder="Input Class Hash"
+          />
+          <input
+            type="text"
+            className="mt-4 mb-6 text-black p-3 rounded w-[600px]"
+            placeholder="Input Constructor Arguments"
+          />
+          <input
+            type="text"
+            className="mt-4 mb-6 text-black p-3 rounded w-[600px]"
+            placeholder="Input Number of Constructor Arguments"
+          />
+          <button className="bg-blue-500 py-3 px-4 rounded-[5px] w-[200px] text-white">
+            Deploy
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default ScaffoldDeployer;

frontend/src/app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
 
       <div className="mb-32 grid md:grid-cols-2 md:text-start text-center  lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left lg:max-w-5xl">
         <a
-          href="#"
+          href="/scaffold-deployer"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
           target="_blank"
           rel="noopener noreferrer"

frontend/src/app/scaffold-deployer/page.tsx

@@ -0,0 +1,9 @@
+import ScaffoldDeployer from "../components/ScaffoldDeployer/ScaffoldDeployer";
+
+export default async function Page() {
+  return (
+    <div className="container mx-auto py-10">
+      <ScaffoldDeployer />
+    </div>
+  );
+}

frontend/yarn.lock

@@ -158,10 +158,10 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@14.0.4":
+"@next/swc-darwin-x64@14.0.4":
   version "14.0.4"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz"
-  integrity sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz"
+  integrity sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==
 
 "@noble/curves@~1.3.0":
   version "1.3.0"
@@ -196,11 +196,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@parcel/[email protected]":
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.3.0.tgz"
-  integrity sha512-mKY+oijI4ahBMc/GygVGvEdOq0L4DxhYgwQqYAz/7yPzuGi79oXrZG52WdpGA1wLBPrYb0T8uBaGFo7I6rvSKw==
-
 "@parcel/[email protected]":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.3.0.tgz"