2 - Deploy massa contract

sidebar/src/App.logic.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { VSCode } from '@/types';
+import { useResourceManager } from '@hooks/useResourceManager.ts';
+
+export const useApp = () => {
+  const [vscode, setVscode] = useState<VSCode>();
+  const resourceManager = useResourceManager(vscode);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    setVscode(acquireVsCodeApi());
+  }, []);
+
+  return {
+    vscode,
+    resourceManager,
+  };
+};

sidebar/src/App.tsx

@@ -1,5 +1,21 @@
+import { VSCodePanels, VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react';
+import DeployPage from '@pages/DeployPage/DeployPage.tsx';
+import NodePage from '@pages/NodePage/NodePage.tsx';
+import { useApp } from '@/App.logic.ts';
+
 export const App = () => {
+  const logic = useApp();
+
   return (
-    <p>This is the massa pannel</p>
+    <VSCodePanels>
+      <VSCodePanelTab id="tab-node">NODE</VSCodePanelTab>
+      <VSCodePanelTab id="tab-deploy">DEPLOY</VSCodePanelTab>
+      <VSCodePanelView id="view-node">
+        <NodePage vscode={logic.vscode} />
+      </VSCodePanelView>
+      <VSCodePanelView id="view-deploy">
+        <DeployPage vscode={logic.vscode} resourceManager={logic.resourceManager} />
+      </VSCodePanelView>
+    </VSCodePanels>
   );
 };

sidebar/src/components/DeployForm/DeployForm.css

@@ -0,0 +1,37 @@
+.dropdown-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.5rem;
+}
+
+.label {
+    margin-bottom: 0.2rem;
+}
+
+.dropdown-wallets, .dropdown-contracts, .dropdown-environments {
+    width: 80%;
+    margin-right: 0.5rem;
+}
+
+.add-wallet-button, .add-environment-button {
+    height: calc(var(--input-height) * 1px);
+    width: 20%;
+}
+
+.wallet-container, .environment-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.fees-container, .value-container {
+    margin-top: 0.5rem;
+    width: 100%;
+}
+
+.fees-textfield, .value-textfield {
+    width: 100%;
+}
+
+.error-message {
+    color: var(--vscode-errorForeground);
+}

sidebar/src/components/DeployForm/DeployForm.logic.ts

@@ -0,0 +1,15 @@
+import { useEdit } from '@hooks/useEdit.ts';
+import { IDeployForm, VSCode } from '@/types';
+import { useFormContext } from 'react-hook-form';
+
+const useDeployForm = (vscode: VSCode) => {
+  const { editWallet, editEnvironment } = useEdit(vscode);
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<IDeployForm>();
+
+  return { register, errors, editWallet, editEnvironment };
+};
+
+export default useDeployForm;

sidebar/src/components/DeployForm/DeployForm.tsx

@@ -0,0 +1,107 @@
+import { DeployContracts, Environments, Wallets } from '@backend/actions/types';
+import { VSCode } from '@/types';
+import './DeployForm.css';
+import { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import useDeployForm from '@components/DeployForm/DeployForm.logic.ts';
+
+interface DeployFormProps {
+  wallets: Wallets;
+  contracts: DeployContracts;
+  environments: Environments;
+  vscode: VSCode;
+}
+
+const DeployForm = ({ wallets, contracts, environments, vscode }: DeployFormProps) => {
+  const logic = useDeployForm(vscode);
+
+  return (
+    <div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown-wallets" className="label">
+          Select account:
+        </label>
+        <div className="wallet-container">
+          <VSCodeDropdown
+            id="dropdown-wallets"
+            className="dropdown-wallets"
+            {...logic.register('walletId', {
+              required: true,
+            })}
+          >
+            {wallets?.map((wallet) => (
+              <VSCodeOption value={wallet.id}>
+                {wallet.name} - {wallet.address}
+              </VSCodeOption>
+            ))}
+          </VSCodeDropdown>
+          <VSCodeButton className="add-wallet-button" onClick={logic.editWallet}>
+            Edit
+          </VSCodeButton>
+        </div>
+      </div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown-environments" className="label">
+          Select environment:
+        </label>
+        <div className="environment-container">
+          <VSCodeDropdown
+            id="dropdown-environments"
+            className="dropdown-environments"
+            {...logic.register('environmentId', {
+              required: true,
+            })}
+          >
+            {environments?.map((environment) => (
+              <VSCodeOption value={environment.id}>
+                {environment.name} ({environment.rpc})
+              </VSCodeOption>
+            ))}
+          </VSCodeDropdown>
+          <VSCodeButton className="add-environment-button" onClick={logic.editEnvironment}>
+            Edit
+          </VSCodeButton>
+        </div>
+      </div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown-contracts" className="label">
+          Select contract:
+        </label>
+        <VSCodeDropdown id="dropdown-contracts" {...logic.register('contractId', { required: true })}>
+          {contracts?.map((contract) => {
+            return (
+              <VSCodeOption value={contract.id}>
+                {contract.name} ({contract.path})
+              </VSCodeOption>
+            );
+          })}
+        </VSCodeDropdown>
+      </div>
+      <div className="fees-container">
+        <VSCodeTextField
+          className="fees-textfield"
+          {...logic.register('fees', {
+            required: true,
+            valueAsNumber: true,
+          })}
+        >
+          Fees (in MAS)
+        </VSCodeTextField>
+        {logic.errors.fees && <span className="error-message">Invalid number</span>}
+      </div>
+      <div className="value-container">
+        <VSCodeTextField
+          className="value-textfield"
+          {...logic.register('value', {
+            required: true,
+            valueAsNumber: true,
+          })}
+        >
+          Value (in MAS)
+        </VSCodeTextField>
+        {logic.errors.value && <span className="error-message">Invalid number</span>}
+      </div>
+    </div>
+  );
+};
+
+export default DeployForm;

sidebar/src/components/DeployParams/DeployParams.css

@@ -0,0 +1,17 @@
+.param, .add-remove-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+}
+
+.add-button, .remove-button {
+    width: 47%;
+}
+
+.param-textfield {
+    width: 70%;
+}
+
+.param-dropdown {
+    width: 25%;
+}

sidebar/src/components/DeployParams/DeployParams.logic.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { IDeployForm } from '@/types';
+import { ArgTypes } from '@/enums.ts';
+
+const useDeployParams = () => {
+  const form = useFormContext<IDeployForm>();
+  const [paramsCount, setParamsCount] = useState(0);
+
+  const addParam = () => {
+    setParamsCount(paramsCount + 1);
+  };
+
+  const removeParam = () => {
+    if (paramsCount === 0) return;
+    setParamsCount(paramsCount - 1);
+  };
+
+  useEffect(() => {
+    form.resetField('params');
+    for (let i = 0; i < paramsCount; i++) {
+      form.setValue(`params.${i}` as const, {
+        value: '',
+        type: Object.getOwnPropertyNames(ArgTypes).filter((value) => !isNaN(Number(value)))[0],
+      });
+    }
+  }, [paramsCount]);
+
+  return {
+    form,
+    paramsCount,
+    addParam,
+    removeParam,
+  };
+};
+
+export default useDeployParams;

sidebar/src/components/DeployParams/DeployParams.tsx

@@ -0,0 +1,48 @@
+import './DeployParams.css';
+import { VSCodeButton, VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import useDeployParams from '@components/DeployParams/DeployParams.logic.ts';
+import { ArgTypes } from '@/enums.ts';
+
+const DeployParams = () => {
+  const logic = useDeployParams();
+
+  return (
+    <div>
+      <div className="add-remove-container">
+        <VSCodeButton className="add-button" onClick={logic.addParam}>
+          Add param
+        </VSCodeButton>
+        <VSCodeButton className="remove-button" onClick={logic.removeParam}>
+          Remove param
+        </VSCodeButton>
+      </div>
+      {logic.paramsCount > 0 &&
+        Array.from({ length: logic.paramsCount }).map((_, index) => {
+          return (
+            <div key={index}>
+              <label htmlFor="param">Param {index + 1}:</label>
+              <div className="param">
+                <VSCodeTextField
+                  className="param-textfield"
+                  {...logic.form.register(`params.${index}.value` as const)}
+                />
+                <VSCodeDropdown className="param-dropdown" {...logic.form.register(`params.${index}.type` as const)}>
+                  {Object.getOwnPropertyNames(ArgTypes)
+                    .filter((value) => isNaN(Number(value)))
+                    .map((argType, index) => {
+                      return (
+                        <VSCodeOption key={argType} value={index.toString()}>
+                          {argType}
+                        </VSCodeOption>
+                      );
+                    })}
+                </VSCodeDropdown>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default DeployParams;

sidebar/src/enums.ts

@@ -0,0 +1,18 @@
+export enum ArgTypes {
+  STRING = 0,
+  BOOL = 1,
+  U8 = 2,
+  U32 = 3,
+  U64 = 4,
+  I128 = 5,
+  U128 = 6,
+  U256 = 7,
+  I32 = 8,
+  I64 = 9,
+  F32 = 10,
+  F64 = 11,
+  ARRAY = 12,
+  UINT8ARRAY = 13,
+  SERIALIZABLE = 14,
+  SERIALIZABLE_OBJECT_ARRAY = 15,
+}

sidebar/src/hooks/useEdit.ts

@@ -0,0 +1,17 @@
+import { VSCode } from '@/types';
+import { MessageType } from '@backend/enums.ts';
+
+export const useEdit = (vscode: VSCode) => {
+  const editEnvironment = () => {
+    vscode.postMessage({ type: MessageType.EDIT_ENVIRONMENT });
+  };
+
+  const editWallet = () => {
+    vscode.postMessage({ type: MessageType.EDIT_WALLETS });
+  };
+
+  return {
+    editEnvironment,
+    editWallet,
+  };
+};

sidebar/src/hooks/useResourceManager.ts

@@ -0,0 +1,52 @@
+import { DeployContracts, Environments, Wallets } from '@backend/actions/types';
+import { useEffect, useState } from 'react';
+import { VSCode } from '@/types';
+import { MessageType } from '@backend/enums.ts';
+
+export type ResourceManager = {
+  wallets: Wallets;
+  environments: Environments;
+  deployContracts: DeployContracts;
+};
+
+export const useResourceManager = (vscode: VSCode): ResourceManager => {
+  const [wallets, setWallets] = useState<Wallets>([]);
+  const [environments, setEnvironments] = useState<Environments>([]);
+  const [deployContracts, setDeployContracts] = useState<DeployContracts>([]);
+
+  useEffect(() => {
+    if (!vscode) {
+      return;
+    }
+    vscode.postMessage({ type: MessageType.GET_WALLETS });
+    vscode.postMessage({ type: MessageType.GET_ENVIRONMENTS });
+    vscode.postMessage({ type: MessageType.GET_DEPLOY_CONTRACTS });
+  }, [vscode]);
+
+  useEffect(() => {
+    const listener = (event: WindowEventMap['message']) => {
+      switch (event.data.type) {
+        case MessageType.WALLETS: {
+          setWallets(event.data.wallets);
+          break;
+        }
+        case MessageType.ENVIRONMENTS: {
+          setEnvironments(event.data.environments);
+          break;
+        }
+        case MessageType.DEPLOY_CONTRACTS: {
+          setDeployContracts(event.data.contracts);
+          break;
+        }
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => window.removeEventListener('message', listener);
+  }, []);
+
+  return {
+    wallets,
+    environments,
+    deployContracts,
+  };
+};