Implement automatic build and deployment in sandbox mode

Resolves #17
tact-lang · Apr 23, 2024 · 26f4efd · 26f4efd
1 parent de359bf
commit 26f4efd
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 16 deletions.
diff --git a/src/components/workspace/BuildProject/BuildProject.tsx b/src/components/workspace/BuildProject/BuildProject.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/interfaces/workspace.interface';
 import { Analytics } from '@/utility/analytics';
 import { buildTs } from '@/utility/typescriptHelper';
-import { getContractLINK, getFileExtension } from '@/utility/utils';
+import { delay, getContractLINK, getFileExtension } from '@/utility/utils';
 import { Network } from '@orbs-network/ton-access';
 import { Cell } from '@ton/core';
 import { Blockchain } from '@ton/sandbox';
@@ -22,6 +22,7 @@ import ExecuteFile from '../ExecuteFile/ExecuteFile';
 import s from './BuildProject.module.scss';
 
 import AppIcon from '@/components/ui/icon';
+import { useSettingAction } from '@/hooks/setting.hooks';
 import { useForm } from 'antd/lib/form/Form';
 import {
   AddressInput,
@@ -101,6 +102,8 @@ const BuildProject: FC<Props> = ({
     undefined
   );
 
+  const { isAutoBuildAndDeployEnabled } = useSettingAction();
+
   const [tonConnector] = useTonConnectUI();
   const chain = tonConnector.wallet?.account.chain;
   const connectedWalletAddress = useTonAddress();
@@ -660,14 +663,21 @@ const BuildProject: FC<Props> = ({
               ? 'Build'
               : 'Build'
           }
-          description="- Select a contract to build"
+          description={`- Select a contract to build <br /> 
+            ${
+              isAutoBuildAndDeployEnabled()
+                ? '- Auto-build and deploy is enabled for Sandbox and can be changed in settings.'
+                : ''
+            }`}
           allowedFile={['fc', 'tact']}
-          onCompile={() => {
+          onCompile={async () => {
             if (
               environment == 'SANDBOX' &&
-              activeProject?.language !== 'tact'
+              activeProject?.language === 'tact'
             ) {
-              // initDeploy();
+              if (!isAutoBuildAndDeployEnabled()) return;
+              await delay(100);
+              deployForm.submit();
             }
           }}
         />

diff --git a/src/components/workspace/ContractInteraction/ContractInteraction.module.scss b/src/components/workspace/ContractInteraction/ContractInteraction.module.scss
@@ -1,7 +1,7 @@
 .root {
   font-size: 0.8rem;
   // border-top: 1px solid #6a6a6a;
-  margin-top: 1rem;
+  margin-top: 2rem;
   .cellBuilderRef {
     visibility: hidden;
     width: 1px;
@@ -14,6 +14,9 @@
     border-bottom: 1px solid #9c9b9b;
     padding-bottom: 0.3rem;
     font-weight: 600;
+    &.hide {
+      display: none;
+    }
   }
   .sendMessage {
     width: 100%;

diff --git a/src/components/workspace/ContractInteraction/ContractInteraction.tsx b/src/components/workspace/ContractInteraction/ContractInteraction.tsx
@@ -184,8 +184,9 @@ const ContractInteraction: FC<Props> = ({
         sandbox="allow-scripts  allow-same-origin"
       />
       <p>
-        This will be used to send internal message and call getter method on
-        contract
+        Below options will be used to send internal message
+        {language === 'tact' ? '(call receiver)' : ''} and call getter method on
+        contract after the contract is deployed.
       </p>
       <br />
 
@@ -208,7 +209,7 @@ const ContractInteraction: FC<Props> = ({
       <br />
 
       <h3 className={s.label}>
-        Send internal message:{' '}
+        {language === 'tact' ? 'Receivers' : 'Send internal message'}
         {abi?.setters?.length && abi?.setters?.length > 0
           ? `(${abi?.setters?.length})`
           : ''}

diff --git a/src/components/workspace/Editor/Editor.tsx b/src/components/workspace/Editor/Editor.tsx
@@ -49,7 +49,7 @@ const Editor: FC<Props> = ({ file, projectId, className = '' }) => {
 
   let lspWebSocket: WebSocket;
 
-  const saveFile = () => {
+  const saveFile = async () => {
     if (!file.id) return;
     const fileContent = editorRef?.current?.getValue() || '';
     if (!fileContent) return;
@@ -58,6 +58,7 @@ const Editor: FC<Props> = ({ file, projectId, className = '' }) => {
         editorRef.current.trigger('editor', 'editor.action.formatDocument');
       }
       updateFileContent(file.id, fileContent, projectId);
+      EventEmitter.emit('FILE_SAVED', file.id);
     } catch (error) {}
   };
 

diff --git a/src/components/workspace/ExecuteFile/ExecuteFile.module.scss b/src/components/workspace/ExecuteFile/ExecuteFile.module.scss
@@ -2,7 +2,7 @@
   // border-bottom: 1px solid #6a6a6a;
   padding-bottom: 0.6rem;
   .desc {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     margin-bottom: 1rem;
   }
   .action {

diff --git a/src/components/workspace/ExecuteFile/ExecuteFile.tsx b/src/components/workspace/ExecuteFile/ExecuteFile.tsx
@@ -1,11 +1,13 @@
 import AppIcon, { AppIconType } from '@/components/ui/icon';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProjectActions } from '@/hooks/project.hooks';
+import { useSettingAction } from '@/hooks/setting.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
+import EventEmitter from '@/utility/eventEmitter';
 import { getFileExtension } from '@/utility/utils';
 import { Button, Select, message } from 'antd';
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import s from './ExecuteFile.module.scss';
 
 type ButtonClick =
@@ -36,6 +38,11 @@ const ExecuteFile: FC<Props> = ({
   const { compileFuncProgram, compileTactProgram } = useProjectActions();
   const { createLog } = useLogActivity();
   const [selectedFile, setSelectedFile] = useState<Tree | undefined>();
+  const selectedFileRef = useRef<Tree | undefined>();
+  const isAutoBuildAndDeployEnabled =
+    useSettingAction().isAutoBuildAndDeployEnabled();
+
+  const isAutoBuildAndDeployEnabledRef = useRef(false);
 
   const fileList = projectFiles(projectId).filter((f) => {
     const _fileExtension = getFileExtension(f?.name || '');
@@ -44,6 +51,7 @@ const ExecuteFile: FC<Props> = ({
   });
 
   const buildFile = async (e: ButtonClick) => {
+    const selectedFile = selectedFileRef.current;
     if (!selectedFile) {
       createLog('Please select a file', 'error');
       return;
@@ -107,13 +115,36 @@ const ExecuteFile: FC<Props> = ({
     setSelectedFile(selectedFile);
   };
 
+  const onFileSaved = () => {
+    if (!isAutoBuildAndDeployEnabledRef.current) return;
+    if (!selectedFileRef.current) return;
+    buildFile({} as ButtonClick);
+  };
+
+  useEffect(() => {
+    selectedFileRef.current = selectedFile;
+  }, [selectedFile]);
+
+  useEffect(() => {
+    isAutoBuildAndDeployEnabledRef.current = isAutoBuildAndDeployEnabled;
+  }, [isAutoBuildAndDeployEnabled]);
+
   useEffect(() => {
     setSelectedFile(fileList[0]);
+    EventEmitter.on('FILE_SAVED', onFileSaved);
+    return () => {
+      EventEmitter.off('FILE_SAVED', onFileSaved);
+    };
   }, []);
 
   return (
     <div className={s.root}>
-      {description && <p className={s.desc}>{description}</p>}
+      {description && (
+        <p
+          className={s.desc}
+          dangerouslySetInnerHTML={{ __html: description }}
+        ></p>
+      )}
       <Select
         placeholder="Select a file"
         notFoundContent="Required file not found"

diff --git a/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx b/src/components/workspace/WorkspaceSidebar/WorkspaceSidebar.tsx
@@ -38,6 +38,8 @@ const WorkspaceSidebar: FC<Props> = ({
     toggleFormatOnSave,
     updateTonAmountForInteraction,
     getTonAmountForInteraction,
+    isAutoBuildAndDeployEnabled,
+    toggleAutoBuildAndDeploy,
   } = useSettingAction();
 
   const hasEditAccess = isProjectEditable(projectId as string, user);
@@ -92,6 +94,26 @@ const WorkspaceSidebar: FC<Props> = ({
           />
         </Form.Item>
       </div>
+      <div className={s.settingItem}>
+        <Form.Item
+          label="Auto Build & Deploy in Sandbox"
+          valuePropName="checked"
+        >
+          <Switch
+            checked={isAutoBuildAndDeployEnabled()}
+            onChange={(toggleState) => {
+              toggleAutoBuildAndDeploy(toggleState);
+            }}
+          />
+        </Form.Item>
+        <p>
+          *{' '}
+          <small>
+            Automatically build and deploy the smart contract after the file is
+            saved <br /> if the environment is set to Sandbox.
+          </small>
+        </p>
+      </div>
 
       <div className={s.settingItem}>
         <Form.Item

diff --git a/src/hooks/project.hooks.ts b/src/hooks/project.hooks.ts
@@ -186,7 +186,8 @@ export function useProjectActions() {
     projectFiles(projectId).forEach((f) => {
       if (
         /\.(tact|fc|func)$/.test(f.name) &&
-        !filesToProcess.includes(f.path)
+        !filesToProcess.includes(f.path) &&
+        !f.path?.startsWith('dist/')
       ) {
         filesToProcess.push(f.path);
       }

diff --git a/src/hooks/setting.hooks.ts b/src/hooks/setting.hooks.ts
@@ -13,6 +13,8 @@ export function useSettingAction() {
     toggleFormatOnSave,
     updateTonAmountForInteraction,
     getTonAmountForInteraction,
+    isAutoBuildAndDeployEnabled,
+    toggleAutoBuildAndDeploy,
   };
 
   function updateStateByKey(dataByKey: any) {
@@ -57,4 +59,18 @@ export function useSettingAction() {
       tonAmountForInteraction: reset ? '0.05' : value,
     });
   }
+
+  function isAutoBuildAndDeployEnabled() {
+    return setting.autoBuildAndDeploy === undefined
+      ? true
+      : setting.autoBuildAndDeploy;
+  }
+
+  function toggleAutoBuildAndDeploy(
+    active: boolean = !setting.autoBuildAndDeploy
+  ) {
+    return updateStateByKey({
+      autoBuildAndDeploy: active,
+    });
+  }
 }
diff --git a/src/hooks/workspace.hooks.ts b/src/hooks/workspace.hooks.ts
@@ -243,12 +243,12 @@ function useWorkspaceActions() {
     return { ...file, content: fileContent?.content };
   }
 
-  function updateFileContent(
+  async function updateFileContent(
     id: Tree['id'],
     content: string,
     projectId: Project['id']
   ) {
-    fileSystem.files.update(id, { content });
+    await fileSystem.files.update(id, { content });
     updateOpenFile(id, { isDirty: false }, projectId);
   }
 

diff --git a/src/interfaces/setting.interface.ts b/src/interfaces/setting.interface.ts
@@ -1,5 +1,6 @@
 export interface SettingInterface {
   contractDebug: boolean;
   formatOnSave: boolean;
+  autoBuildAndDeploy: boolean;
   tonAmountForInteraction: string;
 }
diff --git a/src/state/setting.state.ts b/src/state/setting.state.ts
@@ -9,6 +9,7 @@ export const settingState = atom<SettingInterface>({
   default: {
     contractDebug: true,
     formatOnSave: false,
+    autoBuildAndDeploy: true,
     tonAmountForInteraction: '0.05',
   },
   effects_UNSTABLE: [persistAtom],