feat: update UX & sui command

Author: tung-lee

src/extension.ts

@@ -3,7 +3,7 @@
 import * as vscode from 'vscode';
 import { join } from 'path';
 import { MessageHandlerData } from '@estruyf/vscode';
-import { build, publish, test } from './suiCommand';
+import { build, publish, executeCommand } from './suiCommand';
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
@@ -49,22 +49,30 @@ export function activate(context: vscode.ExtensionContext) {
 						payload: `Hello from the extension!`
 					} as MessageHandlerData<string>);
 					break;
-				
+
 				case "GET_DATA_ERROR":
 					panel.webview.postMessage({
 						command,
 						requestId, // The requestId is used to identify the response
 						error: `Oops, something went wrong!`
 					} as MessageHandlerData<string>);
 					break;
-				
+
 				case "POST_DATA":
 					vscode.window.showInformationMessage(`Received data from the webview: ${payload.data}`);
 					test(payload.data);
 					break;
 
 				case "SUI_TERMINAL":
-					test(payload.command);	
+					executeCommand(payload.command);
+					break;
+
+				case "BUILD":
+					build(payload.path);
+					break;
+
+				case "PUBLISH":
+					publish(payload.path);
 					break;
 
 				case "SAVE_ALIASES":
@@ -74,10 +82,10 @@ export function activate(context: vscode.ExtensionContext) {
 						vscode.window.showInformationMessage("Aliases saved successfully!");
 					});
 
-					// use value as undefined to remove the key
-					// context.workspaceState.update("", undefined);
+				// use value as undefined to remove the key
+				// context.workspaceState.update("", undefined);
 
-				default: 
+				default:
 					vscode.window.showInformationMessage(`Unknown command: ${command}`);
 			}
 		}, undefined, context.subscriptions);
@@ -97,7 +105,7 @@ export function deactivate() { }
 
 const getWebviewContent = (context: vscode.ExtensionContext, webview: vscode.Webview) => {
 	const jsFile = "webview.js";
-	const localServerUrl = "http://localhost:9000";
+	const localServerUrl = "http://localhost:9999";
 
 	let scriptUrl = null;
 	let cssUrl = null;

src/suiCommand.ts

@@ -1,18 +1,18 @@
 import * as vscode from 'vscode';
 
-export const build = () => {
+export const build = (path: string) => {
     const terminal = vscode.window.createTerminal("Sui Simulator");
-    terminal.sendText("sui move build");
+    terminal.sendText(`sui move build -p ${path}`);
     terminal.show();
 };
 
-export const publish = () => {
+export const publish = (path: string) => {
     const terminal = vscode.window.createTerminal("Sui Simulator");
-    terminal.sendText("sui client publish --gas-budget 10000000");
+    terminal.sendText(`sui client publish --gas-budget 100000000 ${path}`);
     terminal.show();
 };
 
-export const test = (command: string) => {
+export const executeCommand = (command: string) => {
     const terminal = vscode.window.createTerminal("Sui Simulator");
     terminal.sendText(command);
     terminal.show();

src/webview/App.tsx

@@ -26,6 +26,9 @@ export const App: React.FunctionComponent<IAppProps> = ({ }: React.PropsWithChil
     const [isError, setIsError] = useState<boolean>(false);
     const [response, setResponse] = useState<string>("");
 
+    const [buildPath, setBuildPath] = useState<string>("");
+    const [publishPath, setPublishPath] = useState<string>("");
+
     let keypair: Ed25519Keypair | null = null;
 
     const handleNetworkChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -115,11 +118,11 @@ export const App: React.FunctionComponent<IAppProps> = ({ }: React.PropsWithChil
     useEffect(() => {
         getDetailPackage(suiClient, "0xcab68c8cd7e80f3dd06466da6b2c083d1fd50ab3e9be8e32395c19b53021c064").then((data) => {
             const modules = Object.keys(data as {});
-            
+
             if (data) {
                 for (const module of modules) {
                     const { exposedFunctions } = data[module];
-                    console.log(exposedFunctions);
+
                 }
             }
         }).catch(err => console.log(err));
@@ -129,15 +132,40 @@ export const App: React.FunctionComponent<IAppProps> = ({ }: React.PropsWithChil
         <>
             <h1>Sui Simulator</h1>
             <hr />
+            <h2>Network</h2>
             <select value={network} onChange={handleNetworkChange}>
                 <option>devnet</option>
                 <option>testnet</option>
             </select>
             <hr />
-            <Input placeholder="Mnemonics" value={mnemonics} onChange={handleMnemonicsChange} />
-            <Input placeholder="Package ID" value={packageId} onChange={(e) => setPackageId(e.target.value)} />
-            <Input placeholder="Module" value={module} onChange={(e) => setModule(e.target.value)} />
-            <Input placeholder="Function Name" value={functionName} onChange={(e) => setFunctionName(e.target.value)} />
+            <h2>Buikd</h2>
+            <Input placeholder="Path" value={buildPath} onChange={(e) => setBuildPath(e.target.value)} />
+            <Button onClick={() => { sendMessage("BUILD", { path: buildPath }); }}>
+                Build
+            </Button>
+            <h2>Publish</h2>
+            <Input placeholder="Path" value={publishPath} onChange={(e) => setPublishPath(e.target.value)} />
+            <Button onClick={() => { sendMessage("PUBLISH", { path: publishPath }); }}>
+                Publish
+            </Button>
+            <hr />
+            <h2>Call</h2>
+            <div>
+                <span>Mnemonics: </span>
+                <Input placeholder="Mnemonics" value={mnemonics} onChange={handleMnemonicsChange} />
+            </div>
+            <div>
+                <span>Package: </span>
+                <Input placeholder="Package ID" value={packageId} onChange={(e) => setPackageId(e.target.value)} />
+            </div>
+            <div>
+                <span>Module: </span>
+                <Input placeholder="Module" value={module} onChange={(e) => setModule(e.target.value)} />
+            </div>
+            <div>
+                <span>Function: </span>
+                <Input placeholder="Function Name" value={functionName} onChange={(e) => setFunctionName(e.target.value)} />
+            </div>
             <p>Args</p>
             {args.map((arg, index) => {
                 return <> <input type="text" value={arg.value} onChange={(e) => {
@@ -163,11 +191,9 @@ export const App: React.FunctionComponent<IAppProps> = ({ }: React.PropsWithChil
             }}>
                 Call
             </Button>
-            <Button onClick={() => { sendMessage("SUI_TERMINAL", {command: "sui client objects"}); }}>
-                Test Terminal
-            </Button>
             {!isError ? <p>Result: {response}</p> : <p>Error: {error}</p>}
-            <Aliases/>
+            <hr />
+            <Aliases />
         </>
     );
 };

webpack/webview.config.js

@@ -38,7 +38,7 @@ const config = [
         plugins: [],
         devServer: {
             compress: true,
-            port: 9000,
+            port: 9999,
             hot: true,
             allowedHosts: "all",
             headers: {