From 26f4efd29c31507b7b2b56b90de3f15ea9d3eecb Mon Sep 17 00:00:00 2001 From: Rahul Yadav Date: Tue, 23 Apr 2024 16:05:31 +0530 Subject: [PATCH] Implement automatic build and deployment in sandbox mode Resolves #17 --- .../workspace/BuildProject/BuildProject.tsx | 20 ++++++++--- .../ContractInteraction.module.scss | 5 ++- .../ContractInteraction.tsx | 7 ++-- src/components/workspace/Editor/Editor.tsx | 3 +- .../ExecuteFile/ExecuteFile.module.scss | 2 +- .../workspace/ExecuteFile/ExecuteFile.tsx | 35 +++++++++++++++++-- .../WorkspaceSidebar/WorkspaceSidebar.tsx | 22 ++++++++++++ src/hooks/project.hooks.ts | 3 +- src/hooks/setting.hooks.ts | 16 +++++++++ src/hooks/workspace.hooks.ts | 4 +-- src/interfaces/setting.interface.ts | 1 + src/state/setting.state.ts | 1 + 12 files changed, 103 insertions(+), 16 deletions(-) diff --git a/src/components/workspace/BuildProject/BuildProject.tsx b/src/components/workspace/BuildProject/BuildProject.tsx index 6cb35b1..0a0201b 100644 --- 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 = ({ undefined ); + const { isAutoBuildAndDeployEnabled } = useSettingAction(); + const [tonConnector] = useTonConnectUI(); const chain = tonConnector.wallet?.account.chain; const connectedWalletAddress = useTonAddress(); @@ -660,14 +663,21 @@ const BuildProject: FC = ({ ? 'Build' : 'Build' } - description="- Select a contract to build" + description={`- Select a contract to build
+ ${ + 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 index a566f93..de33196 100644 --- 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 index 2bbee27..b51ceda 100644 --- a/src/components/workspace/ContractInteraction/ContractInteraction.tsx +++ b/src/components/workspace/ContractInteraction/ContractInteraction.tsx @@ -184,8 +184,9 @@ const ContractInteraction: FC = ({ sandbox="allow-scripts allow-same-origin" />

- 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.


@@ -208,7 +209,7 @@ const ContractInteraction: FC = ({

- 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 index 2b1294e..70ab069 100644 --- a/src/components/workspace/Editor/Editor.tsx +++ b/src/components/workspace/Editor/Editor.tsx @@ -49,7 +49,7 @@ const Editor: FC = ({ 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 = ({ 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 index b8fc894..0fb6bc8 100644 --- 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 index d252c92..924c200 100644 --- 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 = ({ const { compileFuncProgram, compileTactProgram } = useProjectActions(); const { createLog } = useLogActivity(); const [selectedFile, setSelectedFile] = useState(); + const selectedFileRef = useRef(); + 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 = ({ }); 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 = ({ 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 (
- {description &&

{description}

} + {description && ( +

+ )}