VSCode Extension - GUI to edit sui.keystore

[mario4tier]

This is mostly front-end work.

Build a UI to manage the sui.keystores (with Suibase there is one keystore per network).

Management should include:

• display/creation/deletion of addresses.
• Copy-to-clipboard of any public address.
• edit of alias
• a "swiss knife" import of private key in "any format". User just cut&paste what they have, the extension validate/convert as needed to store in the sui.keystore.
• May be some utility export, particularly for copying a private key to a web wallet.

[kkomelin]

A nice brief intro to keys from the Suibase Cookbook

[kkomelin]

Hey @mario4tier ,

Do you have/know an opensource JavaScript/TypeScript API to manage Sui keys? Should it be just Sui cli system calls? Does VSCode extension have access to Sui cli in terms of permissions?

[mario4tier]

I recommend to do it with Sui cli call. Not aware of an API that does this.

Two locations the shell call can be done from (the code is already doing this from both places): (1) From the "core" of the VSCode extension (not the webview). (2) From the suibase-daemon (this is a JSON-RPC backend for the extension).

The advantage of the suibase-daemon is there is only one writer to the files (shell commands are serialized). Less possibility of messing up the files and better "single source of truth" when, say, there are two competing VSCode extension.

Doing it directly from the VSCode extension is simpler and would be good enough for a "first phase" implementation.

What is that core vs webview twist? You might already know this, but saying just in case. In a VSCode extension a Webview (e.g. the "Suibase dashboard") does not run always on the same machine as the "core" VSCode extension. This happen when people do remote development (e.g. windows WSL).

Only the "core" of the extension is guaranteed to run on the machine where the sui.keystore files are located (and suibase-daemon is running).

This is why you will see in the code the Webview exchanging messages with the core to perform the shell calls (and get any backend data).

I have implemented all such message passing to conveniently work with react, and can walk you through this code as needed.

Typescript "Core" extension:~/suibase/typescript/vscode-extension/src Typescript/react "webview": ~/suibase/typescript/vscode-extension/webview-ui

Some shell commands: ~/suibase/typescript/vscode-extension/src/SuibaseExec.ts

Example of a related view<->core messages in ~/suibase/typescript/vscode-extension/src/common/ViewMessages.ts:

[mario4tier]

The same visually:

This seems over-complicated, but it is necessary. The suibase-daemon is polling the filesystem to maintain a "single source of truth" and be the backend.

I do not have a lot of front-end experience, and wondering if something like redux would help to synchronize the webviews with the backend (keeping in mind that the "Core" extension is an intermediate)? For now, I did develop my own "data versioning polling" to minimize heavy data transfer.

[kkomelin]

Thank you for the detailed explanation of how Suibase VSCode extension communicates with Suibase backend @mario4tier. I need to learn it further.