feat: components to get parameters of contract

sidebar/src/components/DeployForm/DeployForm.css

@@ -14,7 +14,7 @@
 }
 
 .add-wallet-button, .add-environment-button {
-    height: calc(var(--input-height) * 1px);;
+    height: calc(var(--input-height) * 1px);
     width: 20%;
 }
 

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/pages/DeployPage/DeployPage.logic.ts

@@ -28,10 +28,12 @@ const useDeployPage = (vscode: VSCode, resourceManager: ResourceManager) => {
       return;
     }
 
-    vscode.postMessage({
-      type: MessageType.DEPLOY_CONTRACT,
-      data,
-    });
+    console.log(data.params);
+
+    // vscode.postMessage({
+    //   type: MessageType.DEPLOY_CONTRACT,
+    //   data,
+    // });
   };
 
   useEffect(() => {

sidebar/src/pages/DeployPage/DeployPage.tsx

@@ -5,6 +5,7 @@ import useDeployPage from '@pages/DeployPage/DeployPage.logic.ts';
 import { ResourceManager } from '@hooks/useResourceManager.ts';
 import DeployForm from '@components/DeployForm/DeployForm.tsx';
 import './DeployPage.css';
+import DeployParams from '@components/DeployParams/DeployParams.tsx';
 
 const DeployPage = (props: { vscode: VSCode; resourceManager: ResourceManager }) => {
   const logic = useDeployPage(props.vscode, props.resourceManager);
@@ -20,7 +21,8 @@ const DeployPage = (props: { vscode: VSCode; resourceManager: ResourceManager })
             vscode={props.vscode}
           />
           <VSCodeDivider className="divider" />
-          {/*<InteractParams contracts={logic.contracts} />*/}
+          <DeployParams />
+          <VSCodeDivider className="divider" />
           <VSCodeButton className="submit-button" type="submit">
             Deploy
           </VSCodeButton>

sidebar/src/types.d.ts

@@ -1,11 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ArgTypes } from '@/enums.ts';
+
 export type VSCode = any;
 
+export interface IParam {
+  type: ArgTypes;
+  value: any;
+}
+
 export interface IDeployForm {
   environmentId: string;
   contractId: string;
   walletId: string;
   fees: number;
   value: number;
-  params: any[];
+  params: Param[];
 }

vscode/src/actions/Deploy.ts

@@ -13,7 +13,6 @@ import {
   WalletClient,
 } from '@massalabs/massa-web3';
 import { readFileSync } from 'node:fs';
-import * as path from 'node:path';
 
 export interface DeployContractOptions {
   environmentId: string;
@@ -70,6 +69,8 @@ export class Deploy {
       deployerAccount,
     );
 
+    //new Args();
+
     return await web3Client.smartContracts().deploySmartContract(
       {
         contractDataBinary: readFileSync(contractInfos.path),