UI

ui/components/ClassicEditor/NewItem/index.tsx

@@ -11,19 +11,22 @@ export const NewItem: FC<any> = ({ prop, setIsModalOpen, isModalOpen }) => {
   }, [isModalOpen])
 
   const save = () => {
-    setIDL({
-      ...IDL,
-      [prop]: [
-        ...IDL[prop],
-        { name: newInstructionName }
-      ]
-    })
+    if (!IDL[prop].find((inst: any) => inst.name === newInstructionName)) {
+
+      setIDL({
+        ...IDL,
+        [prop]: [
+          ...IDL[prop],
+          { name: newInstructionName }
+        ]
+      })
+    }
   }
 
   return (
 
     <div
-      className="flex flex-col justify-between p-5 m-5 w-32 min-w-[8rem] h-48 rounded-md ring-1 items-center hover:ring-2 ring-border"
+      className="flex flex-col justify-between p-5 m-5 h-[90%] rounded-md ring-1 items-center hover:ring-2 ring-border"
     >
       <input
         placeholder={`Add ${prop.charAt(0).toUpperCase() + prop.slice(1)}'s name`}

ui/components/ClassicEditor/card/index.tsx

@@ -16,7 +16,7 @@ export const Card: FC<any> = ({ prop, item, onClick, index, setEdit }) => {
   return (
 
     <div
-      className="relative flex p-5 pt-7 m-5 border w-32 min-w-[8rem] h-48 rounded-lg border-border justify-center text-red font-medium hover:bg-backg hover:text-green hover:border-green cursor-pointer"
+      className="relative flex p-5 pt-7 m-5 border w-44 h-[90%] rounded-lg border-border justify-center text-red font-medium hover:bg-backg hover:text-green hover:border-green cursor-pointer"
       onClick={(e) => {setEdit({item, index})}}
     >
       <TrashIcon onClick={(e) => {

ui/components/ClassicEditor/section/index.tsx

@@ -26,7 +26,7 @@ export const Section: FC<any> = ({ instruction, content, initExpanded = false, d
       >
         {`${instruction.charAt(0).toUpperCase() + instruction.slice(1)}`}
       </div>
-      <div className={`flex w-full mini-scrollbar transition-all duration-500 items-center overflow-y-hidden ${expanded ? "overflow-x-auto h-64" : " overflow-x-hidden h-0"}`}>
+      <div className={`flex w-full mini-scrollbar transition-all duration-500 overflow-y-hidden ${expanded ? "overflow-x-auto h-80" : " overflow-x-hidden h-0"}`}>
         {
           instruction !== "errors" && !edit ?
             <>

ui/components/NewEditor/section/index.tsx

@@ -7,7 +7,7 @@ import { useIDL } from "@/context/IDL";
 
 export const Section: FC<any> = ({ instruction }) => {
   const { IDL, setIDL } = useIDL()
-  const [newIntructionName, setNewIntructionName] = useState<string>("");
+  const [newInstructionName, setNewIntructionName] = useState<string>("");
   const [editingItem, setEditingItem] = useState(0);
 
   return (
@@ -22,22 +22,20 @@ export const Section: FC<any> = ({ instruction }) => {
           >
             <input
               placeholder={`Add ${instruction}'s Name`}
-              value={newIntructionName}
+              value={newInstructionName}
               onChange={(e) => setNewIntructionName(e.target.value)}
               className=" w-full bg-inputs focus:outline-none"
             />
             <div className="flex gap-2">
               <CheckIcon
                 className="w-5 h-5 text-white hover:text-green"
                 onClick={() => {
-                  if (!IDL[instruction].find((inst: any) => inst.name === newIntructionName)) {
+                  if (!IDL[instruction].find((inst: any) => inst.name === newInstructionName)) {
                     setIDL({
                       ...IDL,
                       [instruction]: [
                         ...IDL[instruction],
-                        {
-                          name: newIntructionName
-                        }
+                        { name: newInstructionName }
                       ]
                     })
                   }

ui/pages/index.tsx

@@ -29,8 +29,8 @@ export default function Home() {
   const newProject = cleanProject(setIDL);
   const generateIDL = saveIDLFile(setBaseFolder, IDL.version, IDL.name, IDL.instructions, IDL.accounts, IDL.types, IDL.events, IDL.errors, IDL.metadata);
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const [width, setWidth] = useState(true)
-  const [hidden, setHidden] = useState(false)
+  const [widthJson, setWidthJson] = useState(false)
+  const [hiddenJson, setHiddenJson] = useState(true)
 
   const navigation = [
     {
@@ -110,15 +110,15 @@ export default function Home() {
           <div className="h-full w-full overflow-auto">
             <CodeBracketIcon
               onClick={() => {
-                if (width) {
-                  setWidth(false)
+                if (widthJson) {
+                  setWidthJson(false)
                   setTimeout(() => {
-                    setHidden(true)
+                    setHiddenJson(true)
                   }, 450)
                 } else {
-                  setHidden(false)
+                  setHiddenJson(false)
                   setTimeout(() => {
-                    setWidth(true)
+                    setWidthJson(true)
                   }, 0)
 
                 }
@@ -127,7 +127,7 @@ export default function Home() {
             />
             {view[selectedUI as keyof typeof render]}
           </div>
-          <div className={`${width ? "w-6/12" : "w-0"} ${hidden ? "hidden" : ""} transition-[width] ease-in-out duration-700 border border-border rounded-l-lg`}>
+          <div className={`${widthJson ? "w-6/12" : "w-0"} ${hiddenJson ? "hidden" : ""} transition-[width] ease-in-out duration-700 border border-border rounded-l-lg`}>
             <JSONEditor noeditable />
           </div>
         </div>