From 0f76321b8e42c65eb3bb16f17d9fed67b4391f2e Mon Sep 17 00:00:00 2001
From: Rahul Yadav <rahulkyadav57@gmail.com>
Date: Thu, 5 Sep 2024 00:24:06 +0530
Subject: [PATCH] feat: build and deploy project

---
 src/components/workspace/ABIUi/TactABIUi.tsx  |  51 +++----
 .../workspace/BuildProject/BuildProject.tsx   | 139 +++++++++---------
 src/components/workspace/Editor/Editor.tsx    |   5 +-
 .../workspace/ExecuteFile/ExecuteFile.tsx     |  14 +-
 .../workspace/WorkSpace/WorkSpace.tsx         |  60 +++++---
 .../project/ManageProject/ManageProject.tsx   |  11 +-
 .../workspace/tree/FileTree/FileTree.tsx      |  12 +-
 src/hooks/file.hooks.ts                       |   2 +-
 src/hooks/fileTabs.hooks.ts                   |   8 +-
 src/hooks/project.hooks.ts                    |  23 +--
 src/hooks/projectV2.hooks.ts                  | 131 +++++++++++++----
 src/interfaces/workspace.interface.ts         |  18 ++-
 src/lib/fs.ts                                 |   2 +
 src/state/IDE.context.tsx                     |  20 ++-
 src/utility/eventEmitter.ts                   |   1 +
 15 files changed, 312 insertions(+), 185 deletions(-)

diff --git a/src/components/workspace/ABIUi/TactABIUi.tsx b/src/components/workspace/ABIUi/TactABIUi.tsx
index affde5f..3590a91 100644
--- a/src/components/workspace/ABIUi/TactABIUi.tsx
+++ b/src/components/workspace/ABIUi/TactABIUi.tsx
@@ -1,7 +1,7 @@
 import AppIcon from '@/components/ui/icon';
 import { UserContract, useContractAction } from '@/hooks/contract.hooks';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
+import { useProject } from '@/hooks/projectV2.hooks';
 import { LogType } from '@/interfaces/log.interface';
 import {
   TactABIField,
@@ -17,7 +17,6 @@ import { SandboxContract } from '@ton/sandbox';
 import { Button, Form, Input, Popover, Select, Switch } from 'antd';
 import { Rule, RuleObject } from 'antd/es/form';
 import { useForm } from 'antd/lib/form/Form';
-import { useRouter } from 'next/router';
 import { FC, Fragment, useEffect, useState } from 'react';
 import { ABIUiProps } from './ABIUi';
 import s from './ABIUi.module.scss';
@@ -317,16 +316,7 @@ const TactABIUi: FC<TactABI> = ({
   const { callGetter, callSetter } = useContractAction();
   const { createLog } = useLogActivity();
   const [form] = useForm();
-  const {
-    projectFiles,
-    getAllFilesWithContent,
-    updateABIInputValues,
-    getABIInputValues,
-    project,
-  } = useWorkspaceActions();
-  const router = useRouter();
-  const { id: projectId } = router.query;
-  const activeProject = project(projectId as string);
+  const { projectFiles, readdirTree, activeProject } = useProject();
 
   const getItemHeading = (item: TactType) => {
     if (item.type?.kind === 'simple') {
@@ -348,15 +338,22 @@ const TactABIUi: FC<TactABI> = ({
 
   const onSubmit = async (formValues: TactInputFields, fieldName: string) => {
     try {
-      let tsProjectFiles = {};
+      const tsProjectFiles: Record<string, string> = {};
       if (isIncludesTypeCellOrSlice(formValues)) {
-        tsProjectFiles = await getAllFilesWithContent(
-          projectId as string,
+        const fileCollection = await readdirTree(
+          `/${activeProject?.path}`,
+          {
+            basePath: null,
+            content: true,
+          },
           (file) =>
             !file.path.startsWith('dist') &&
             file.name.endsWith('.ts') &&
             !file.name.endsWith('.spec.ts'),
         );
+        fileCollection.forEach((file) => {
+          tsProjectFiles[file.path!] = file.content ?? '';
+        });
       }
       const parsedInputsValues = Object.values(
         await parseInputs(formValues, tsProjectFiles),
@@ -386,10 +383,10 @@ const TactABIUi: FC<TactABI> = ({
       } else {
         createLog(JSON.stringify(response, null, 2));
       }
-      updateABIInputValues(
-        { key: abiType.name, value: formValues, type: type },
-        projectId as string,
-      );
+      // updateABIInputValues(
+      //   { key: abiType.name, value: formValues, type: type },
+      //   activeProject as string,
+      // );
     } catch (error) {
       if ((error as Error).message.includes('no healthy nodes for')) {
         createLog(
@@ -409,13 +406,13 @@ const TactABIUi: FC<TactABI> = ({
 
   useEffect(() => {
     if (!activeProject) return;
-    const abiFields = getABIInputValues(
-      projectId as string,
-      abiType.name,
-      type,
-    );
-    if (!abiFields) return;
-    form.setFieldsValue(abiFields);
+    // const abiFields = getABIInputValues(
+    //   projectId as string,
+    //   abiType.name,
+    //   type,
+    // );
+    // if (!abiFields) return;
+    // form.setFieldsValue(abiFields);
   }, []);
 
   return (
@@ -434,7 +431,7 @@ const TactABIUi: FC<TactABI> = ({
           <Fragment key={field.name}>
             {renderField(
               field as TactABIField,
-              projectFiles(projectId as string),
+              projectFiles,
               [],
               type === 'Setter' ? -1 : 0,
             )}
diff --git a/src/components/workspace/BuildProject/BuildProject.tsx b/src/components/workspace/BuildProject/BuildProject.tsx
index 3caa25f..67b4f5d 100644
--- a/src/components/workspace/BuildProject/BuildProject.tsx
+++ b/src/components/workspace/BuildProject/BuildProject.tsx
@@ -7,6 +7,7 @@ import {
   CellABI,
   NetworkEnvironment,
   Project,
+  ProjectSetting,
   TactABIField,
   TactInputFields,
 } from '@/interfaces/workspace.interface';
@@ -30,8 +31,11 @@ import ExecuteFile from '../ExecuteFile/ExecuteFile';
 import s from './BuildProject.module.scss';
 
 import AppIcon from '@/components/ui/icon';
+import { useFile } from '@/hooks';
+import { useProject } from '@/hooks/projectV2.hooks';
 import { useSettingAction } from '@/hooks/setting.hooks';
 import { ABIParser, parseInputs } from '@/utility/abi';
+import EventEmitter from '@/utility/eventEmitter';
 import { Maybe } from '@ton/core/dist/utils/maybe';
 import { TonClient } from '@ton/ton';
 import { useForm } from 'antd/lib/form/Form';
@@ -72,6 +76,9 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
   );
 
   const { isAutoBuildAndDeployEnabled } = useSettingAction();
+  const { projectFiles, readdirTree, activeProject, updateProjectSetting } =
+    useProject();
+  const { getFile } = useFile();
 
   const [tonConnector] = useTonConnectUI();
   const chain = tonConnector.wallet?.account.chain;
@@ -85,25 +92,13 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
 
   const [deployForm] = useForm();
 
-  const {
-    projectFiles,
-    getFileByPath,
-    updateProjectById,
-    project,
-    activeFile,
-    getAllFilesWithContent,
-    updateABIInputValues,
-    getABIInputValues,
-  } = useWorkspaceActions();
-
-  const currentActiveFile = activeFile(projectId as string);
+  const { updateProjectById, updateABIInputValues, getABIInputValues } =
+    useWorkspaceActions();
 
   const { deployContract } = useContractAction();
 
-  const activeProject = project(projectId);
-
   const contractsToDeploy = () => {
-    return projectFiles(projectId)
+    return projectFiles
       .filter((f) => {
         const _fileExtension = getFileExtension(f.name || '');
         return (
@@ -170,26 +165,30 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
               allowClear
             >
               {_contractsToDeploy.map((f) => (
-                <Select.Option key={f.id} value={f.path} title={f.path}>
+                <Select.Option key={f.path} value={f.path} title={f.path}>
                   {f.name}
                 </Select.Option>
               ))}
             </Select>
           </Form.Item>
           {cellBuilder('Update initial contract state in ')}
-          <div className={s.nestedForm}>
-            {selectedContract &&
-              contractABI.initParams?.map((item) => {
-                return (
-                  <Fragment key={item.name}>
-                    {renderField(
-                      item as unknown as TactABIField,
-                      projectFiles(projectId),
-                    )}
-                  </Fragment>
-                );
-              })}
-          </div>
+          {selectedContract &&
+            contractABI.initParams &&
+            contractABI.initParams.length > 0 && (
+              <div className={s.nestedForm}>
+                {contractABI.initParams.map((item) => {
+                  return (
+                    <Fragment key={item.name}>
+                      {renderField(
+                        item as unknown as TactABIField,
+                        projectFiles,
+                      )}
+                    </Fragment>
+                  );
+                })}
+              </div>
+            )}
+
           <Button
             type="primary"
             htmlType="submit"
@@ -236,15 +235,22 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
           projectId as string,
         );
 
-        let tsProjectFiles = {};
+        const tsProjectFiles: Record<string, string> = {};
         if (isIncludesTypeCellOrSlice(tempFormValues)) {
-          tsProjectFiles = await getAllFilesWithContent(
-            projectId,
-            (file) =>
+          const fileCollection = await readdirTree(
+            `/${activeProject.path}`,
+            {
+              basePath: null,
+              content: true,
+            },
+            (file: { path: string; name: string }) =>
               !file.path.startsWith('dist') &&
               file.name.endsWith('.ts') &&
               !file.name.endsWith('.spec.ts'),
           );
+          fileCollection.forEach((file) => {
+            tsProjectFiles[file.path!] = file.content ?? '';
+          });
         }
 
         initParams = await parseInputs(
@@ -278,8 +284,8 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
   const deploy = async () => {
     createLog(`Deploying contract ...`, 'info');
     const contractBOCPath = selectedContract?.replace('.abi', '.code.boc');
-    const contractBOC = await getFileByPath(contractBOCPath!, projectId);
-    if (!contractBOC?.content) {
+    const contractBOC = (await getFile(contractBOCPath!)) as string;
+    if (!contractBOC) {
       throw new Error('Contract BOC is missing. Rebuild the contract.');
     }
     try {
@@ -300,10 +306,10 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
         contract,
         logs,
       } = await deployContract(
-        contractBOC.content,
+        contractBOC,
         buildOutput?.dataCell as unknown as string,
         environment.toLowerCase() as Network,
-        activeProject!,
+        activeProject as Project,
       );
 
       Analytics.track('Deploy project', {
@@ -328,12 +334,9 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
         updateContract(contract);
       }
 
-      updateProjectById(
-        {
-          contractAddress: _contractAddress,
-        } as Project,
-        projectId,
-      );
+      updateProjectSetting({
+        contractAddress: _contractAddress,
+      } as ProjectSetting);
     } catch (error) {
       console.log(error, 'error');
       const errorMessage = (error as Error).message.split('\n');
@@ -351,8 +354,8 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
     }
     const contractScriptPath = selectedContract.replace('.abi', '.ts');
     if (!cellBuilderRef.current?.contentWindow) return;
-    const contractScript = await getFileByPath(contractScriptPath, projectId);
-    if (activeProject?.language === 'tact' && !contractScript?.content) {
+    const contractScript = (await getFile(contractScriptPath)) as string;
+    if (activeProject?.language === 'tact' && !contractScript) {
       throw new Error('Contract script is missing. Rebuild the contract.');
     }
 
@@ -362,17 +365,19 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
       if (activeProject?.language == 'tact') {
         jsOutout = await buildTs(
           {
-            'tact.ts': contractScript?.content ?? '',
+            'tact.ts': contractScript,
           },
           'tact.ts',
         );
       } else {
-        const stateInitContent = await getFileByPath(
-          'stateInit.cell.ts',
-          projectId,
-        );
+        let stateInitContent = '';
         let cellCode = '';
-        if (stateInitContent && !stateInitContent.content && !initParams) {
+        try {
+          stateInitContent = (await getFile('stateInit.cell.ts')) as string;
+        } catch (error) {
+          console.log('stateInit.cell.ts is missing');
+        }
+        if (!stateInitContent && !initParams) {
           throw new Error(
             'State init data is missing in file stateInit.cell.ts',
           );
@@ -386,7 +391,7 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
             projectId,
           );
         } else {
-          cellCode = stateInitContent?.content ?? '';
+          cellCode = stateInitContent;
         }
 
         jsOutout = await buildTs(
@@ -448,7 +453,7 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
 
   const isContractInteraction = () => {
     let isValid =
-      activeProject?.id && selectedContract && activeProject.contractAddress
+      activeProject?.path && selectedContract && activeProject.contractAddress
         ? true
         : false;
     if (environment === 'SANDBOX') {
@@ -462,17 +467,17 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
       setContractABI(blankABI);
       return;
     }
-    const contractABIFile = await getFileByPath(selectedContract, projectId);
+    const contractABIFile = (await getFile(selectedContract)) as string;
 
-    if (selectedContract && !contractABIFile?.content) {
+    if (selectedContract && !contractABIFile) {
       updateSelectedContract('');
       return;
     }
-    if (!contractABIFile?.content) {
+    if (!contractABIFile) {
       createLog('Contract ABI is missing. Rebuild the contract.', 'error');
       return;
     }
-    const contractABI = JSON.parse(contractABIFile.content || '{}');
+    const contractABI = JSON.parse(contractABIFile || '{}');
     if (activeProject?.language === 'tact') {
       const abi = new ABIParser(JSON.parse(JSON.stringify(contractABI)));
       contractABI.getters = abi.getters;
@@ -518,12 +523,12 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
 
   const updateSelectedContract = (contract: string) => {
     setSelectedContract(contract);
-    updateProjectById(
-      {
-        selectedContract: contract,
-      } as Project,
-      projectId,
-    );
+    // updateProjectById(
+    //   {
+    //     selectedContract: contract,
+    //   } as Project,
+    //   projectId,
+    // );
   };
 
   const extractContractName = (currentContractName: string) => {
@@ -547,8 +552,8 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
     supressErrors = false,
   ) => {
     const contractScriptPath = currentContractName.replace('.abi', '.ts');
-    const contractScript = await getFileByPath(contractScriptPath, projectId);
-    if (language === 'tact' && !contractScript?.content) {
+    const contractScript = (await getFile(contractScriptPath)) as string;
+    if (language === 'tact' && !contractScript) {
       if (supressErrors) {
         return;
       }
@@ -557,7 +562,7 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
 
     const jsOutout = await buildTs(
       {
-        'tact.ts': contractScript?.content ?? '',
+        'tact.ts': contractScript,
       },
       'tact.ts',
     );
@@ -712,7 +717,6 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
 
       <div className={s.actionWrapper}>
         <ExecuteFile
-          file={currentActiveFile}
           projectId={projectId as string}
           icon="Build"
           label={
@@ -733,6 +737,7 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
             `}
           allowedFile={['fc', 'tact']}
           onCompile={() => {
+            EventEmitter.emit('RELOAD_PROJECT_FILES', projectId);
             (async () => {
               if (
                 environment == 'SANDBOX' &&
diff --git a/src/components/workspace/Editor/Editor.tsx b/src/components/workspace/Editor/Editor.tsx
index 18e139b..2dd287d 100644
--- a/src/components/workspace/Editor/Editor.tsx
+++ b/src/components/workspace/Editor/Editor.tsx
@@ -118,7 +118,8 @@ const Editor: FC<Props> = ({ className = '' }) => {
 
     // If file is changed e.g. in case of build process then force update in editor
     EventEmitter.on('FORCE_UPDATE_FILE', (filePath: string) => {
-      const latestFilePath = `/${activeProject}/${latestFile.current}`;
+      if (!activeProject?.path) return;
+      const latestFilePath = `/${activeProject.path}/${latestFile.current}`;
 
       (async () => {
         if (filePath !== latestFilePath) return;
@@ -237,7 +238,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
       </div>
       <EditorDefault
         className={s.editor}
-        path={fileTab.active ? `${activeProject}/${fileTab.active}` : ''}
+        path={fileTab.active ? `${activeProject?.path}/${fileTab.active}` : ''}
         theme="vs-theme-dark"
         // height="90vh"
         defaultLanguage={fileTypeFromFileName(fileTab.active ?? '')}
diff --git a/src/components/workspace/ExecuteFile/ExecuteFile.tsx b/src/components/workspace/ExecuteFile/ExecuteFile.tsx
index 34f9f56..181a573 100644
--- a/src/components/workspace/ExecuteFile/ExecuteFile.tsx
+++ b/src/components/workspace/ExecuteFile/ExecuteFile.tsx
@@ -1,6 +1,7 @@
 import AppIcon, { AppIconType } from '@/components/ui/icon';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProjectActions } from '@/hooks/project.hooks';
+import { useProject } from '@/hooks/projectV2.hooks';
 import { useSettingAction } from '@/hooks/setting.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
@@ -14,7 +15,6 @@ type ButtonClick =
   | React.MouseEvent<HTMLButtonElement, MouseEvent>
   | React.MouseEvent<HTMLAnchorElement, MouseEvent>;
 interface Props {
-  file?: Tree | undefined;
   projectId: Project['id'];
   onCompile?: () => void;
   onClick?: (e: ButtonClick, data: string) => void;
@@ -25,7 +25,6 @@ interface Props {
 }
 
 const ExecuteFile: FC<Props> = ({
-  // file,
   projectId,
   onCompile,
   onClick,
@@ -34,7 +33,8 @@ const ExecuteFile: FC<Props> = ({
   description = '',
   allowedFile = [],
 }) => {
-  const { compileTsFile, projectFiles } = useWorkspaceActions();
+  const { compileTsFile } = useWorkspaceActions();
+  const { projectFiles } = useProject();
   const { compileFuncProgram, compileTactProgram } = useProjectActions();
   const { createLog } = useLogActivity();
   const [selectedFile, setSelectedFile] = useState<Tree | undefined>();
@@ -44,7 +44,7 @@ const ExecuteFile: FC<Props> = ({
 
   const isAutoBuildAndDeployEnabledRef = useRef(false);
 
-  const fileList = projectFiles(projectId).filter((f: Tree | null) => {
+  const fileList = projectFiles.filter((f: Tree | null) => {
     const _fileExtension = getFileExtension(f?.name ?? '');
     if (f?.name === 'stdlib.fc') return false;
     return allowedFile.includes(_fileExtension as string);
@@ -110,7 +110,7 @@ const ExecuteFile: FC<Props> = ({
     e: number | string | React.ChangeEvent<HTMLSelectElement>,
   ) => {
     const selectedFile = fileList.find((f) => {
-      if (typeof e === 'string') return f.id === e;
+      if (typeof e === 'string') return f.path === e;
       return (
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         f.id === (e as React.ChangeEvent<HTMLSelectElement>)?.target?.value
@@ -156,14 +156,14 @@ const ExecuteFile: FC<Props> = ({
         showSearch
         className="w-100"
         defaultActiveFirstOption
-        value={selectedFile?.id}
+        value={selectedFile?.path}
         onChange={selectFile}
         filterOption={(inputValue, option) => {
           return option?.title.toLowerCase().includes(inputValue.toLowerCase());
         }}
       >
         {fileList.map((f) => (
-          <Select.Option key={f.id} value={f.id} title={f.path}>
+          <Select.Option key={f.path} value={f.path} title={f.path}>
             {f.name}
           </Select.Option>
         ))}
diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
index 7352797..609789d 100644
--- a/src/components/workspace/WorkSpace/WorkSpace.tsx
+++ b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -5,7 +5,6 @@ import { AppConfig } from '@/config/AppConfig';
 import { useFileTab } from '@/hooks';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProject } from '@/hooks/projectV2.hooks';
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
 import { Analytics } from '@/utility/analytics';
 import EventEmitter from '@/utility/eventEmitter';
@@ -32,7 +31,6 @@ import ItemAction from '../tree/FileTree/ItemActions';
 import s from './WorkSpace.module.scss';
 
 const WorkSpace: FC = () => {
-  const workspaceAction = useWorkspaceActions();
   const { clearLog, createLog } = useLogActivity();
 
   const router = useRouter();
@@ -42,10 +40,15 @@ const WorkSpace: FC = () => {
   const [contract, setContract] = useState<any>('');
 
   const { tab } = router.query;
-  const { activeProject, newFileFolder } = useProject();
-  const { fileTab } = useFileTab();
+  const {
+    activeProject,
+    setActiveProject,
+    projectFiles,
+    loadProjectFiles,
+    newFileFolder,
+  } = useProject();
 
-  const activeFile = workspaceAction.activeFile(activeProject as string);
+  const { fileTab, open: openTab } = useFileTab();
 
   const commitItemCreation = async (type: Tree['type'], name: string) => {
     if (!name) return;
@@ -66,6 +69,20 @@ const WorkSpace: FC = () => {
     globalWorkspace.sandboxWallet = wallet;
   };
 
+  const openProject = async (selectedProject: Project['id']) => {
+    if (!selectedProject) {
+      createLog(`${selectedProject} - project not found`, 'error');
+      return;
+    }
+    setActiveProject(selectedProject);
+    await loadProjectFiles(selectedProject);
+  };
+
+  useEffect(() => {
+    if (!activeProject) return;
+    openProject(activeProject.path as string).catch(() => {});
+  }, [activeProject]);
+
   const onKeydown = (e: KeyboardEvent) => {
     if ((e.ctrlKey || e.metaKey) && e.key === 's') {
       e.preventDefault();
@@ -77,20 +94,24 @@ const WorkSpace: FC = () => {
     if (!activeProject) {
       return;
     }
-    // createLog(`Project '${activeProject.name}' is opened`);
+    createLog(`Project '${activeProject.name}' is opened`);
     createSandbox(true).catch(() => {});
 
-    // if (activeFile) return;
-    // const projectFiles = workspaceAction.projectFiles(activeProject.id);
-    // const mainFile = projectFiles.find((file) =>
-    //   ['main.tact', 'main.fc'].includes(file.name),
-    // );
-    // if (!mainFile) return;
-    // workspaceAction.openFile(mainFile.id, activeProject.id);
+    if (fileTab.active) return;
+    // Open main file on project switch
+    const mainFile = projectFiles.find((file) =>
+      ['main.tact', 'main.fc'].includes(file.name),
+    );
+    if (!mainFile) return;
+    openTab(mainFile.name, mainFile.path);
   }, [activeProject]);
 
   useEffect(() => {
     document.addEventListener('keydown', onKeydown);
+    EventEmitter.on('RELOAD_PROJECT_FILES', async () => {
+      if (!activeProject) return;
+      await loadProjectFiles(activeProject.path as string);
+    });
 
     Analytics.track('Project Opened', {
       platform: 'IDE',
@@ -125,7 +146,7 @@ const WorkSpace: FC = () => {
       <div className={`${s.sidebar} onboarding-workspace-sidebar`}>
         <WorkspaceSidebar
           activeMenu={activeMenu}
-          projectName={activeProject}
+          projectName={activeProject?.path ?? ''}
           onMenuClicked={(name) => {
             setActiveMenu(name);
             router
@@ -147,7 +168,7 @@ const WorkSpace: FC = () => {
       >
         <div className={s.tree}>
           {activeMenu === 'setting' && (
-            <ProjectSetting projectId={activeProject as Project['id']} />
+            <ProjectSetting projectId={activeProject?.path as Project['id']} />
           )}
           {isLoaded && activeMenu === 'code' && (
             <div className="onboarding-file-explorer">
@@ -169,12 +190,12 @@ const WorkSpace: FC = () => {
                 </div>
               )}
 
-              <FileTree projectId={activeProject as string} />
+              <FileTree projectId={activeProject?.path as string} />
             </div>
           )}
           {activeMenu === 'build' && globalWorkspace.sandboxBlockchain && (
             <BuildProject
-              projectId={activeProject as string}
+              projectId={activeProject?.path as string}
               onCodeCompile={(_codeBOC) => {}}
               contract={contract}
               updateContract={(contractInstance) => {
@@ -184,7 +205,7 @@ const WorkSpace: FC = () => {
           )}
           {activeMenu === 'test-cases' && (
             <div className={s.testCaseArea}>
-              <TestCases projectId={activeProject as string} />
+              <TestCases projectId={activeProject?.path as string} />
             </div>
           )}
         </div>
@@ -207,8 +228,7 @@ const WorkSpace: FC = () => {
                   </div>
 
                   <div style={{ height: 'calc(100% - 43px)' }}>
-                    {!fileTab.active && !activeFile && <ProjectTemplate />}
-                    {fileTab.active && <Editor />}
+                    {fileTab.active ? <Editor /> : <ProjectTemplate />}
                   </div>
                 </div>
                 <div>
diff --git a/src/components/workspace/project/ManageProject/ManageProject.tsx b/src/components/workspace/project/ManageProject/ManageProject.tsx
index 31739e2..58da5f0 100644
--- a/src/components/workspace/project/ManageProject/ManageProject.tsx
+++ b/src/components/workspace/project/ManageProject/ManageProject.tsx
@@ -54,7 +54,7 @@ const ManageProject: FC = () => {
         placeholder="Select a project"
         showSearch
         className="w-100 select-search-input-dark"
-        value={activeProject}
+        value={activeProject?.path}
         onChange={(_project) => {
           openProject(_project).catch(() => {});
         }}
@@ -102,7 +102,7 @@ const ManageProject: FC = () => {
 
   useEffect(() => {
     if (!activeProject) return;
-    openProject(activeProject as string).catch(() => {});
+    openProject(activeProject.path as string).catch(() => {});
   }, [activeProject]);
 
   useEffect(() => {
@@ -123,7 +123,8 @@ const ManageProject: FC = () => {
         footer={null}
       >
         <span className={s.modalTitle}>
-          <AppIcon name="Info" /> Delete my <b>`{activeProject}`</b> Project?
+          <AppIcon name="Info" /> Delete my <b>`{activeProject?.name}`</b>{' '}
+          Project?
         </span>
         <div className={s.modalDescription}>
           <p>
@@ -150,8 +151,8 @@ const ManageProject: FC = () => {
             type="primary"
             danger
             onClick={() => {
-              if (activeProject) {
-                deleteSelectedProject(activeProject).catch(() => {});
+              if (activeProject?.path) {
+                deleteSelectedProject(activeProject.path).catch(() => {});
               }
             }}
           >
diff --git a/src/components/workspace/tree/FileTree/FileTree.tsx b/src/components/workspace/tree/FileTree/FileTree.tsx
index 0171b43..3161935 100644
--- a/src/components/workspace/tree/FileTree/FileTree.tsx
+++ b/src/components/workspace/tree/FileTree/FileTree.tsx
@@ -19,11 +19,13 @@ const FileTree: FC<Props> = ({ projectId }) => {
   const { activeProject, projectFiles, moveItem } = useProject();
 
   const getProjectFiles = (): NodeModel[] => {
-    if (!activeProject) return [];
+    if (!activeProject?.path) return [];
     return projectFiles.map((item) => {
       return {
-        id: `${activeProject}/${item.path}`,
-        parent: item.parent ? `${activeProject}/${item.parent}` : activeProject,
+        id: `${activeProject.path}/${item.path}`,
+        parent: item.parent
+          ? `${activeProject.path}/${item.parent}`
+          : (activeProject.path as string),
         droppable: item.type === 'directory',
         text: item.name,
         data: {
@@ -40,14 +42,14 @@ const FileTree: FC<Props> = ({ projectId }) => {
     );
   };
 
-  if (!activeProject) return null;
+  if (!activeProject?.path) return null;
 
   return (
     <div className={s.root}>
       <DndProvider backend={MultiBackend} options={getBackendOptions()}>
         <Tree
           tree={getProjectFiles()}
-          rootId={activeProject}
+          rootId={activeProject.path}
           onDrop={handleDrop}
           render={(node, { depth, isOpen, onToggle }) => (
             <TreeNode
diff --git a/src/hooks/file.hooks.ts b/src/hooks/file.hooks.ts
index 67cc61f..046c7a9 100644
--- a/src/hooks/file.hooks.ts
+++ b/src/hooks/file.hooks.ts
@@ -5,7 +5,7 @@ import { baseProjectPath } from './projectV2.hooks';
 
 const useFile = () => {
   const { activeProject } = useContext(IDEContext);
-  const projectPath = `${baseProjectPath}${activeProject}`;
+  const projectPath = `${baseProjectPath}${activeProject?.path}`;
   const getFile = async (filePath: string) => {
     return fileSystem.readFile(`${projectPath}/${filePath}`);
   };
diff --git a/src/hooks/fileTabs.hooks.ts b/src/hooks/fileTabs.hooks.ts
index 2bbf320..30f82dd 100644
--- a/src/hooks/fileTabs.hooks.ts
+++ b/src/hooks/fileTabs.hooks.ts
@@ -17,7 +17,7 @@ const useFileTab = () => {
     };
 
     try {
-      const settingPath = `/${activeProject}/.ide/setting.json`;
+      const settingPath = `/${activeProject.path}/.ide/setting.json`;
       if (!(await fileSystem.exists(settingPath))) {
         await fileSystem.writeFile(
           settingPath,
@@ -38,8 +38,8 @@ const useFileTab = () => {
           ...defaultSetting,
           ...parsedSetting,
         };
-        setFileTab(parsedSetting.tab);
       }
+      setFileTab(parsedSetting.tab);
 
       await fileSystem.writeFile(
         settingPath,
@@ -55,13 +55,12 @@ const useFileTab = () => {
   };
 
   const open = (name: string, path: string) => {
-    if (fileTab.active === name) return;
+    if (fileTab.active === path) return;
 
     const existingTab = fileTab.items.find((item) => item.path === path);
 
     if (existingTab) {
       const updatedTab = { ...fileTab, active: path };
-      setFileTab(updatedTab);
       syncTabSettings(updatedTab);
     } else {
       const newTab = { name, path, isDirty: false };
@@ -70,7 +69,6 @@ const useFileTab = () => {
         items: [...fileTab.items, newTab],
         active: path,
       };
-      setFileTab(updatedTab);
       syncTabSettings(updatedTab);
     }
   };
diff --git a/src/hooks/project.hooks.ts b/src/hooks/project.hooks.ts
index 993f224..ab55f70 100644
--- a/src/hooks/project.hooks.ts
+++ b/src/hooks/project.hooks.ts
@@ -9,6 +9,7 @@ import {
 import stdLibFiles from '@tact-lang/compiler/dist/imports/stdlib';
 import { precompile } from '@tact-lang/compiler/dist/pipeline/precompile';
 
+import fileSystem from '@/lib/fs';
 import { getContractInitParams } from '@/utility/abi';
 import TactLogger from '@/utility/tactLogger';
 import { CompilerContext } from '@tact-lang/compiler/dist/context';
@@ -17,12 +18,14 @@ import {
   SuccessResult,
   compileFunc,
 } from '@ton-community/func-js';
+import { useProject } from './projectV2.hooks';
 import { useSettingAction } from './setting.hooks';
 import { useWorkspaceActions } from './workspace.hooks';
 
 export function useProjectActions() {
   const { getFileByPath, createFiles, projectFiles } = useWorkspaceActions();
   const { isContractDebugEnabled } = useSettingAction();
+  const { writeFiles } = useProject();
 
   return {
     compileFuncProgram,
@@ -125,23 +128,25 @@ export function useProjectActions() {
       }
     });
 
-    const fs = new OverwritableVirtualFileSystem();
+    const fs = new OverwritableVirtualFileSystem(`/`);
 
     while (filesToProcess.length !== 0) {
       const fileToProcess = filesToProcess.pop();
-      const file = await getFileByPath(fileToProcess!, projectId);
-      if (file?.path) {
-        fs.writeContractFile(file.path!, file.content ?? '');
+      const filePath = `/${projectId}/${fileToProcess}`;
+      const fileContent = await fileSystem.readFile(filePath!);
+      if (fileContent) {
+        fs.writeContractFile(filePath!, fileContent as string);
       }
     }
 
     let ctx = new CompilerContext({ shared: {} });
     const stdlib = createVirtualFileSystem('@stdlib', stdLibFiles);
-    ctx = precompile(ctx, fs, stdlib, file.path!);
+    const entryFile = `/${projectId}/${file.path}`;
+    ctx = precompile(ctx, fs, stdlib, entryFile);
 
     const response = await buildTact({
       config: {
-        path: file.path!,
+        path: entryFile,
         output: 'dist',
         name: 'tact',
         options: {
@@ -178,7 +183,7 @@ export function useProjectActions() {
       }
     });
 
-    const buildFiles: Pick<Tree, 'path' | 'content'>[] = [];
+    const buildFiles: Pick<Tree, 'path' | 'content' | 'type'>[] = [];
     fs.overwrites.forEach((value, key) => {
       const filePath = key.slice(1);
 
@@ -201,13 +206,13 @@ export function useProjectActions() {
       buildFiles.push({
         path: filePath,
         content: fileContent,
+        type: 'file',
       });
       // TODO: Do this after the build files are updated.
       // EventEmitter.emit('FORCE_UPDATE_FILE', filePath);
     });
 
-    await createFiles(buildFiles, 'dist', projectId);
-
+    await writeFiles(projectId, buildFiles, { overwrite: true });
     return fs.overwrites;
   }
 
diff --git a/src/hooks/projectV2.hooks.ts b/src/hooks/projectV2.hooks.ts
index af91cd2..7383652 100644
--- a/src/hooks/projectV2.hooks.ts
+++ b/src/hooks/projectV2.hooks.ts
@@ -4,11 +4,13 @@ import {
 } from '@/constant/ProjectTemplate';
 import {
   ContractLanguage,
+  ProjectSetting,
   ProjectTemplate,
   Tree,
 } from '@/interfaces/workspace.interface';
 import fileSystem from '@/lib/fs';
 import ZIP from '@/lib/zip';
+import EventEmitter from '@/utility/eventEmitter';
 import { RcFile } from 'antd/es/upload';
 import cloneDeep from 'lodash.clonedeep';
 import { useContext } from 'react';
@@ -19,6 +21,7 @@ interface FileNode {
   path: string;
   type: 'file' | 'directory';
   parent?: string;
+  content?: string;
 }
 
 export const baseProjectPath = '/';
@@ -53,6 +56,7 @@ export const useProject = () => {
         overwrite: false,
       },
     );
+    if (!projectDirectory) return;
 
     let files =
       template === 'import' && defaultFiles?.length == 0
@@ -79,34 +83,51 @@ export const useProject = () => {
       files = [...files, ...commonFiles];
     }
 
+    const projectName = projectDirectory.slice(1);
+
     const project = {
+      name: projectName,
       language,
       template,
     };
 
-    await Promise.all(
-      files.map(async (file) => {
-        const path = `/${projectDirectory}/${file.path}`;
-        if (file.type === 'directory') {
-          return fileSystem.mkdir(path);
-        }
-        return fileSystem.writeFile(path, file.content ?? '');
-      }),
-    );
+    await writeFiles(projectDirectory, files);
 
     const projectSettingPath = `${projectDirectory}/.ide/setting.json`;
     if (!(await fileSystem.exists(projectSettingPath))) {
       await fileSystem.writeFile(
         projectSettingPath,
-        JSON.stringify({ project }),
+        JSON.stringify({ ...project }),
       );
     }
     await loadProjects();
 
-    setActiveProject(projectDirectory.slice(1));
+    setActiveProject({
+      path: projectName,
+      ...project,
+    });
     return projectDirectory;
   };
 
+  const writeFiles = async (
+    projectPath: string,
+    files: Pick<Tree, 'type' | 'path' | 'content'>[],
+    options?: { overwrite?: boolean },
+  ) => {
+    await Promise.all(
+      files.map(async (file) => {
+        const path = `/${projectPath}/${file.path}`;
+        if (file.type === 'directory') {
+          return fileSystem.mkdir(path);
+        }
+        await fileSystem.writeFile(path, file.content ?? '', options);
+        EventEmitter.emit('FORCE_UPDATE_FILE', path);
+        return path;
+      }),
+    );
+    EventEmitter.emit('RELOAD_PROJECT_FILES', projectPath);
+  };
+
   const loadProjectFiles = async (projectName: string) => {
     const projectFiles = await readdirTree(`${baseProjectPath}${projectName}`);
     setProjectFiles(projectFiles as Tree[]);
@@ -119,7 +140,11 @@ export const useProject = () => {
    */
   const readdirTree = async (
     path: string,
-    options: { basePath: null | string } = { basePath: null },
+    options: { basePath: null | string; content: boolean } = {
+      basePath: null,
+      content: false,
+    },
+    filter?: (fileNode: FileNode) => boolean,
   ): Promise<FileNode[]> => {
     const results: FileNode[] = [];
     const basePath = options.basePath ?? path;
@@ -135,12 +160,24 @@ export const useProject = () => {
         type: stat.isDirectory() ? 'directory' : 'file',
         parent:
           path === basePath ? undefined : path.replace(basePath + '/', ''),
+        content: options.content
+          ? ((await fileSystem.readFile(filePath)) as string)
+          : '',
       };
 
-      results.push(fileNode);
+      if (!filter || filter(fileNode)) {
+        results.push(fileNode);
+      }
 
       if (stat.isDirectory()) {
-        const nestedFiles = await readdirTree(filePath, { basePath });
+        const nestedFiles = await readdirTree(
+          filePath,
+          {
+            basePath,
+            content: options.content,
+          },
+          filter,
+        );
         results.push(...nestedFiles);
       }
     }
@@ -157,22 +194,22 @@ export const useProject = () => {
   };
 
   const newFileFolder = async (path: string, type: 'file' | 'directory') => {
-    if (!activeProject) return;
-    const newPath = `${baseProjectPath}${activeProject}/${path}`;
+    if (!activeProject?.path) return;
+    const newPath = `${baseProjectPath}${activeProject.path}/${path}`;
     await fileSystem.create(newPath, type);
-    await loadProjectFiles(activeProject);
+    await loadProjectFiles(activeProject.path);
   };
 
   const deleteProjectFile = async (path: string) => {
-    if (!activeProject) return;
-    await fileSystem.remove(`${baseProjectPath}${activeProject}/${path}`, {
+    if (!activeProject?.path) return;
+    await fileSystem.remove(`${baseProjectPath}${activeProject.path}/${path}`, {
       recursive: true,
     });
-    await loadProjectFiles(activeProject);
+    await loadProjectFiles(activeProject.path);
   };
 
   const moveItem = async (oldPath: string, targetPath: string) => {
-    if (!activeProject) return;
+    if (!activeProject?.path) return;
     if (oldPath === targetPath) return;
 
     const newPath = targetPath + '/' + oldPath.split('/').pop();
@@ -181,26 +218,59 @@ export const useProject = () => {
       `${baseProjectPath}/${oldPath}`,
       `${baseProjectPath}/${newPath}`,
     );
-    await loadProjectFiles(activeProject);
+    await loadProjectFiles(activeProject.path);
   };
 
   const renameProjectFile = async (oldPath: string, newName: string) => {
-    if (!activeProject) return;
+    if (!activeProject?.path) return;
     const newPath = oldPath.includes('/')
       ? oldPath.split('/').slice(0, -1).join('/') + '/' + newName
       : newName;
 
     const success = await fileSystem.rename(
-      `${baseProjectPath}${activeProject}/${oldPath}`,
-      `${baseProjectPath}${activeProject}/${newPath}`,
+      `${baseProjectPath}${activeProject.path}/${oldPath}`,
+      `${baseProjectPath}${activeProject.path}/${newPath}`,
     );
     if (!success) return;
-    await loadProjectFiles(activeProject);
+    await loadProjectFiles(activeProject.path);
+  };
+
+  const updateActiveProject = async (
+    projectPath: string | null,
+    force = false,
+  ) => {
+    if (activeProject?.path === projectPath && !force) return;
+    const projectSettingPath = `${baseProjectPath}${projectPath}/.ide/setting.json`;
+    if (projectPath && (await fileSystem.exists(projectSettingPath))) {
+      const setting = (await fileSystem.readFile(projectSettingPath)) as string;
+      const parsedSetting = setting ? JSON.parse(setting) : {};
+      setActiveProject({
+        ...parsedSetting,
+        path: projectPath,
+      });
+    } else {
+      setActiveProject(null);
+    }
   };
 
-  const updateActiveProject = (projectName: string | null) => {
-    if (activeProject === projectName) return;
-    setActiveProject(projectName);
+  const updateProjectSetting = async (itemToUpdate: ProjectSetting) => {
+    if (!activeProject?.path) return;
+    const projectSettingPath = `${baseProjectPath}${activeProject.path}/.ide/setting.json`;
+    if (!(await fileSystem.exists(projectSettingPath))) {
+      await fileSystem.writeFile(projectSettingPath, JSON.stringify({}));
+    } else {
+      const setting = (await fileSystem.readFile(projectSettingPath)) as string;
+      const parsedSetting = setting ? JSON.parse(setting) : {};
+      await fileSystem.writeFile(
+        projectSettingPath,
+        JSON.stringify({ ...parsedSetting, ...itemToUpdate }),
+        {
+          overwrite: true,
+        },
+      );
+      await updateActiveProject(activeProject.path, true);
+    }
+    await loadProjectFiles(activeProject.path);
   };
 
   return {
@@ -208,7 +278,9 @@ export const useProject = () => {
     projectFiles,
     activeProject,
     createProject,
+    writeFiles,
     deleteProject,
+    readdirTree,
     newFileFolder,
     deleteProjectFile,
     moveItem,
@@ -216,6 +288,7 @@ export const useProject = () => {
     setActiveProject: updateActiveProject,
     loadProjectFiles,
     loadProjects,
+    updateProjectSetting,
   };
 };
 
diff --git a/src/interfaces/workspace.interface.ts b/src/interfaces/workspace.interface.ts
index eccc0c2..2354fad 100644
--- a/src/interfaces/workspace.interface.ts
+++ b/src/interfaces/workspace.interface.ts
@@ -1,3 +1,4 @@
+import { IFileTab } from '@/state/IDE.context';
 import { ABITypeRef } from '@ton/core';
 import { Maybe } from '@ton/core/dist/utils/maybe';
 
@@ -42,9 +43,9 @@ export interface ABIFormInputValues {
 export interface Project {
   id: string;
   userId?: string;
-  name: string;
+  name?: string;
   language?: ContractLanguage;
-  template: string;
+  template?: string;
   contractAddress?: string;
   contractBOC?: string;
   abi?: ABI;
@@ -58,6 +59,19 @@ export interface Project {
   updatedAt?: Date;
   cellABI?: CellABI;
   abiFormInputValues?: ABIFormInputValues[];
+  path?: string;
+}
+
+export interface ProjectSetting {
+  name?: string;
+  path?: string;
+  template?: ProjectTemplate;
+  language?: ContractLanguage;
+  contractName?: string;
+  network?: NetworkEnvironment;
+  selectedContract?: string;
+  contractAddress?: string;
+  tab?: IFileTab;
 }
 
 export type WorkspaceState = {
diff --git a/src/lib/fs.ts b/src/lib/fs.ts
index cacfd09..8f299a0 100644
--- a/src/lib/fs.ts
+++ b/src/lib/fs.ts
@@ -67,6 +67,7 @@ class FileSystem {
     path: string,
     options: { recursive?: boolean; basePath?: string; onlyDir?: boolean } = {},
   ) {
+    if (!path) return [];
     const { recursive, basePath, onlyDir } = options;
     if (!recursive) {
       const files = await this.fs.readdir(path);
@@ -104,6 +105,7 @@ class FileSystem {
     path: string,
     options: { overwrite?: boolean } = { overwrite: true },
   ) {
+    if (!path) return;
     const newPath = options.overwrite
       ? path
       : await this.getUniquePath(path, true);
diff --git a/src/state/IDE.context.tsx b/src/state/IDE.context.tsx
index 571d5fc..c1288f6 100644
--- a/src/state/IDE.context.tsx
+++ b/src/state/IDE.context.tsx
@@ -1,4 +1,4 @@
-import { Tree } from '@/interfaces/workspace.interface';
+import { ProjectSetting, Tree } from '@/interfaces/workspace.interface';
 import { FC, createContext, useEffect, useMemo, useState } from 'react';
 
 interface ITabItems {
@@ -17,8 +17,8 @@ interface IDEContextProps {
   setProjects: (projects: string[]) => void;
   projectFiles: Tree[];
   setProjectFiles: (files: Tree[]) => void;
-  activeProject: string | null;
-  setActiveProject: (project: string | null) => void;
+  activeProject: ProjectSetting | null;
+  setActiveProject: (project: ProjectSetting | null) => void;
   fileTab: IFileTab;
   setFileTab: (fileTab: IFileTab) => void;
 }
@@ -45,7 +45,10 @@ export const IDEProvider: FC<{ children: React.ReactNode }> = ({
   const [projects, setProjects] = useState<string[]>([]);
   const [projectFiles, setProjectFiles] = useState<Tree[]>([]);
   const [fileTab, setFileTab] = useState<IFileTab>(defaultState.fileTab);
-  const [activeProject, setActiveProject] = useState<string | null>(null);
+  const [activeProject, setActiveProject] = useState<ProjectSetting | null>(
+    null,
+  );
+  const [isLoaded, setIsLoaded] = useState(false);
 
   const value = useMemo(
     () => ({
@@ -64,16 +67,21 @@ export const IDEProvider: FC<{ children: React.ReactNode }> = ({
   const onInit = () => {
     const storedActiveProject = localStorage.getItem('IDE_activeProject');
     if (storedActiveProject) {
-      setActiveProject(storedActiveProject);
+      setActiveProject(JSON.parse(storedActiveProject));
     }
   };
 
   useEffect(() => {
     onInit();
+    setIsLoaded(true);
   }, []);
 
   useEffect(() => {
-    localStorage.setItem('IDE_activeProject', activeProject ?? '');
+    if (!isLoaded) return;
+    localStorage.setItem(
+      'IDE_activeProject',
+      JSON.stringify(activeProject ?? {}),
+    );
   }, [activeProject]);
 
   return <IDEContext.Provider value={value}>{children}</IDEContext.Provider>;
diff --git a/src/utility/eventEmitter.ts b/src/utility/eventEmitter.ts
index a6f616e..c84cb3e 100644
--- a/src/utility/eventEmitter.ts
+++ b/src/utility/eventEmitter.ts
@@ -12,6 +12,7 @@ export interface EventEmitterPayloads {
   FORCE_UPDATE_FILE: string;
   FILE_SAVED: { fileId: string };
   TEST_CASE_LOG: string;
+  RELOAD_PROJECT_FILES: string;
 }
 
 const EventEmitter = {