feat: add pure editor mode

WTFAcademy · Jul 3, 2023 · 04ef82c · 04ef82c
1 parent 65399f1
commit 04ef82c
Show file tree

Hide file tree

Showing 11 changed files with 3,231 additions and 2,283 deletions.
diff --git a/.idea/runConfigurations/start_css.xml b/.idea/runConfigurations/start_css.xml
diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx
diff --git a/apps/demo/src/index.css b/apps/demo/src/index.css
@@ -12,3 +12,17 @@ body {
   margin: 0 auto;
 }
 
+.float-button{
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+  cursor: pointer;
+  z-index: 111;
+  position: fixed;
+  bottom: 60px;
+  right: 20px;
+  outline: none;
+  border: none;
+}
diff --git a/packages/core/src/components/Dialog.tsx b/packages/core/src/components/Dialog.tsx
@@ -0,0 +1,84 @@
+import { Fragment, useState } from 'react';
+
+import { Dialog, Transition } from '@headlessui/react';
+
+export default function MyModal() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 flex items-center justify-center">
+        <button
+          type="button"
+          onClick={openModal}
+          className="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+        >
+          Open dialog
+        </button>
+      </div>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-900"
+                  >
+                    Payment successful
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      Your payment has been successfully submitted. We’ve sent
+                      you an email with all of the details of your order.
+                    </p>
+                  </div>
+
+                  <div className="mt-4">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={closeModal}
+                    >
+                      Got it, thanks!
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
diff --git a/packages/core/src/components/NavBar.tsx b/packages/core/src/components/NavBar.tsx
@@ -6,7 +6,8 @@ type TNavProps<T> = {
   label: string;
   id: string;
   data?: T;
-}
+  delDisabled?: boolean;
+};
 
 type TProps = {
   /**
@@ -18,11 +19,16 @@ type TProps = {
   onClick?: (nav: TNavProps<any>, index: number) => void;
   onDeleteClick?: (nav: TNavProps<any>, index: number) => void;
   placeholderElement?: React.ReactNode;
-}
+};
 
 function NavBar(props: TProps) {
   const {
-    navs = [], globalId = '', activeNavId, onClick, onDeleteClick, placeholderElement,
+    navs = [],
+    globalId = '',
+    activeNavId,
+    onClick,
+    onDeleteClick,
+    placeholderElement,
   } = props;
   const [activeId, setActiveId] = useState(activeNavId || navs[0]?.id);
 
@@ -46,24 +52,21 @@ function NavBar(props: TProps) {
       {navs.map((nav, index) => (
         <div
           key={`${globalId}_${nav.id}_${index}`}
-          className={`nav ${nav.id === activeId ? 'nav-active' : ''}${nav.id === 'empty' ? ' nav-empty' : ''}`}
+          className={`nav ${nav.id === activeId ? 'nav-active' : ''}${
+            nav.id === 'empty' ? ' nav-empty' : ''
+          }`}
           onClick={() => handleClick(nav, index)}
         >
           <span>{nav.label}</span>
-          {
-            nav.id === activeId
-            && (
+          {nav.id === activeId && !nav.delDisabled && (
             <XMarkIcon
               className="absolute right-2 w-3 h-3 cursor-pointer mt-[2px] text-[#94A0B3]"
               onClick={() => handleDeleteClick(nav, index)}
             />
-            )
-          }
+          )}
         </div>
       ))}
-      <div className="nav-placeholder">
-        {placeholderElement}
-      </div>
+      <div className="nav-placeholder">{placeholderElement}</div>
     </div>
   );
 }

diff --git a/packages/core/src/editor/contexts/deployedContext.tsx b/packages/core/src/editor/contexts/deployedContext.tsx
@@ -5,6 +5,8 @@ import { TCompiledContract } from '../../types/contract';
 type TContext = {
   compiledContracts: TCompiledContract[];
   addCompiledContract: (compiledContract: TCompiledContract) => void;
+  compiledUniqContracts: Record<string, TCompiledContract>;
+  addCompiledUniqContract: (compiledContract: TCompiledContract) => void;
   clearCompiledContract: () => void;
   selectedNetwork?: string;
   setSelectedNetwork: (network: string) => void;
@@ -15,20 +17,30 @@ const DeployedContext = React.createContext<TContext | undefined>(undefined);
 // Editor Provider
 export function DeployedProvider({ children }: { children: React.ReactNode }) {
   const [compiledContracts, setCompiledContracts] = useState<TCompiledContract[]>([]);
+  const [compiledUniqContracts, setCompiledUniqContracts] = useState<Record<string, TCompiledContract>>({});
   const [selectedNetwork, setSelectedNetwork] = useState<string>();
 
   const addCompiledContract = (compiledContract: TCompiledContract) => {
     setCompiledContracts((old) => [...old, compiledContract]);
   };
 
+  const addCompiledUniqContract = (compiledContract: TCompiledContract) => {
+    setCompiledUniqContracts({
+      ...compiledUniqContracts,
+      [compiledContract.name]: compiledContract,
+    });
+  };
+
   const clearCompiledContract = () => {
     setCompiledContracts([]);
   };
 
   return (
     <DeployedContext.Provider
       value={{
+        compiledUniqContracts,
         compiledContracts,
+        addCompiledUniqContract,
         addCompiledContract,
         clearCompiledContract,
         setSelectedNetwork,