Move sandbox creation to workspace

nujan-io · Aug 19, 2023 · 5a1fe39 · 5a1fe39
1 parent 76817d0
commit 5a1fe39
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 23 deletions.
diff --git a/src/components/workspace/BuildProject/BuildProject.module.scss b/src/components/workspace/BuildProject/BuildProject.module.scss
@@ -41,5 +41,6 @@
   }
   .info {
     margin-top: 1rem;
+    font-size: 0.9rem;
   }
 }
diff --git a/src/components/workspace/BuildProject/BuildProject.tsx b/src/components/workspace/BuildProject/BuildProject.tsx
@@ -18,12 +18,22 @@ import { FC, useEffect, useRef, useState } from 'react';
 import { Cell } from 'ton-core';
 import ContractInteraction from '../ContractInteraction';
 import ExecuteFile from '../ExecuteFile/ExecuteFile';
+import OpenFile from '../OpenFile/OpenFile';
 import s from './BuildProject.module.scss';
 interface Props {
   projectId: string;
   onCodeCompile: (codeBOC: string) => void;
+  sandboxBlockchain: Blockchain;
+  contract: any;
+  updateContract: (contractInstance: any) => void;
 }
-const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
+const BuildProject: FC<Props> = ({
+  projectId,
+  onCodeCompile,
+  sandboxBlockchain,
+  contract,
+  updateContract,
+}) => {
   const [isLoading, setIsLoading] = useState('');
   const { createLog } = useLogActivity();
   const [environment, setEnvironment] = useState<NetworkEnvironment>('SANDBOX');
@@ -34,10 +44,7 @@ const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
   const cellBuilderRef = useRef<HTMLIFrameElement>(null);
   const [tonConnector] = useTonConnectUI();
   const chain = tonConnector.wallet?.account.chain;
-  const [sandboxBlockchain, setSandboxBlockchain] = useState<Blockchain | null>(
-    null
-  );
-  const [contract, setContract] = useState<any>('');
+
   const [sandboxWallet, setSandboxWallet] =
     useState<SandboxContract<TreasuryContract>>();
 
@@ -102,7 +109,7 @@ const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
         return;
       }
       if (contract) {
-        setContract(contract);
+        updateContract(contract);
       }
 
       updateProjectById(
@@ -160,24 +167,29 @@ const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
     }
   };
 
-  const createSandbox = async () => {
-    if (sandboxBlockchain) {
-      return;
+  const isContractInteraction = () => {
+    let isValid =
+      activeProject?.id && tonConnector && activeProject?.contractAddress
+        ? true
+        : false;
+
+    if (environment === 'SANDBOX') {
+      isValid = isValid && sandboxBlockchain ? true : false;
     }
-    const blockchain = await Blockchain.create();
-    const wallet = await blockchain.treasury('user');
-    createLog(
-      `Sanbox account created. Address: <i>${wallet.address.toString()}</i>`,
-      'info',
-      false
-    );
-    setSandboxWallet(wallet);
-    setSandboxBlockchain(blockchain);
+    return isValid;
   };
 
   useEffect(() => {
     if (environment === 'SANDBOX') {
-      createSandbox();
+      (async () => {
+        const wallet = await sandboxBlockchain.treasury('user');
+        createLog(
+          `Sandbox account created. Address: <i>${wallet.address.toString()}</i>`,
+          'info',
+          false
+        );
+        setSandboxWallet(wallet);
+      })();
     }
   }, []);
 
@@ -243,12 +255,21 @@ const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
 
       {environment !== 'SANDBOX' && <TonAuth />}
 
+      <p className={s.info}>
+        1. Update initial contract state in{' '}
+        <OpenFile
+          projectId={projectId}
+          name="stateInit.cell.ts"
+          path="stateInit.cell.ts"
+        />{' '}
+      </p>
+
       <div className={s.actionWrapper}>
         <ExecuteFile
           file={currentActiveFile}
           projectId={projectId as string}
           label={environment === 'SANDBOX' ? 'Build and Deploy' : 'Build'}
-          description="Select a contract file to build and deploy"
+          description="2. Select a contract file to build and deploy"
           allowedFile={['fc']}
           onCompile={() => {
             if (environment == 'SANDBOX') {
@@ -284,7 +305,7 @@ const BuildProject: FC<Props> = ({ projectId, onCodeCompile }) => {
         </div>
       )}
 
-      {activeProject?.id && tonConnector && activeProject?.contractAddress && (
+      {isContractInteraction() && (
         <div className={s.contractInteraction}>
           <ContractInteraction
             contractAddress={activeProject?.contractAddress!!}

diff --git a/src/components/workspace/Tabs/Tabs.module.scss b/src/components/workspace/Tabs/Tabs.module.scss
@@ -13,6 +13,7 @@
     flex: 1;
     flex-shrink: 1;
     overflow: hidden;
+    overflow-x: auto;
     flex-shrink: 0;
   }
 

diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -2,6 +2,7 @@ import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
+import { Blockchain } from '@ton-community/sandbox';
 import { Spin } from 'antd';
 import { useRouter } from 'next/router';
 import { FC, useEffect, useState } from 'react';
@@ -25,6 +26,10 @@ const WorkSpace: FC = () => {
   const [activeMenu, setActiveMenu] = useState<WorkSpaceMenu>('code');
   const [isLoaded, setIsLoaded] = useState(false);
   const [isLoading, setIsloading] = useState(false);
+  const [sandboxBlockchain, setSandboxBlockchain] = useState<Blockchain | null>(
+    null
+  );
+  const [contract, setContract] = useState<any>('');
 
   const { id: projectId, tab } = router.query;
 
@@ -35,10 +40,19 @@ const WorkSpace: FC = () => {
     workspaceAction.createNewItem('', name, type, projectId as string);
   };
 
+  const createSandbox = async () => {
+    if (sandboxBlockchain) {
+      return;
+    }
+    const blockchain = await Blockchain.create();
+    setSandboxBlockchain(blockchain);
+  };
+
   useEffect(() => {
     if (activeProject) {
       createLog(`Project '${activeProject?.name}' is opened`);
     }
+    createSandbox();
     document.addEventListener('keydown', (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 's') {
         e.preventDefault();
@@ -60,6 +74,12 @@ const WorkSpace: FC = () => {
       console.log = originalConsoleLog;
       document.removeEventListener('keydown', () => {});
       // workspaceAction.closeAllFile();
+      workspaceAction.updateProjectById(
+        {
+          contractAddress: '',
+        },
+        projectId as string
+      );
       clearLog();
     };
   }, []);
@@ -110,10 +130,15 @@ const WorkSpace: FC = () => {
             <FileTree projectId={projectId as string} />
           </div>
         )}
-        {activeMenu === 'build' && (
+        {activeMenu === 'build' && sandboxBlockchain && (
           <BuildProject
             projectId={projectId as string}
             onCodeCompile={(_codeBOC) => {}}
+            sandboxBlockchain={sandboxBlockchain}
+            contract={contract}
+            updateContract={(contractInstance) => {
+              setContract(contractInstance);
+            }}
           />
         )}
         {activeMenu === 'test-cases' && (

diff --git a/src/hooks/logActivity.hooks.ts b/src/hooks/logActivity.hooks.ts
@@ -39,7 +39,7 @@ export function useLogActivity() {
       return;
     }
     const logEntry: LogEntry = {
-      text: text.replace(/\n/g, '<br />').trim(),
+      text: text.trim(),
       type,
       timestamp: new Date().toISOString(),
     };