Investigate new introspection capabilities of the Wizard UI

[eloylp]

Context

Actually the wizard UI, has an invoke button that once clicked it provides the needed CLI command for deploying the contract:

Currently this commands are just hardcoded in the UI, there is no code introspection capabilities in the current Wizard UI prototype.

Goals

Research in how to make the UI smarter, do experiments, report results on this issue.

• Find a way for the wizard to pull contracts wasm files directly from the Nebulas contract repo.
• Check how far we can go by introspecting wasm files from the wizard UI (JS). If that is even possible.
• If the above points are possible, think about how to make the Wizard UI available for any wasm file contract repository.

[geofmureithi]

Check how far we can go by introspecting wasm files from the wizard UI (JS). If that is even possible.

Wasm doesnt have a stack trace, but I guess Soroban may have a custom solution as its possible. Putting a pin on this.

[eloylp]

Yeah, i have read that .wasm can be converted to its text representation .wat, which includes method signatures . Probably there are tools for parsing it in JS side ?

[mariopil]

I am wondering whether parsing .wasm or .wat would be needed at all. The target solution is to read all contracts sources from the repository and display them in the UI, is that right? In such a case the init method params could be just parsed from the rust source. WDYT?

[eloylp]

My thoughts here :)

AFAIK, the init function is just one function of the smart contract, like any other. The name is just a convention and no extra magic involves that.

Probably this issue is missing this in description but, would it be good to have the invoke button for every contract public function available ? So an user would be able to generate CLI invokation commands for every public contract function.

On my mind that would require to:

1. Identify the public functions.
2. Identify the signatures of each function in 1.
3. Generate the UI elements taking into account 1 and 2.

Said that, this is a research issue, we should also discuss if this is something interesting or not IMO. Maybe involve community also. Let me know your thoughts.

[mariopil]

Sure, we could add a dropdown with a method to invoke and params list (let say the init is a default one) - whenever user changes the method UI displays different params to set. But still I would stay with parsing only the rust files instead of wasm/wat - it should be easier :)

[geofmureithi]

Guys, but one cannot invoke from the wizard, I think this is in Pulsar if am not wrong.

[geofmureithi]

Specifically the invoke part.

[eloylp]

I think we are only referring to the CLI command generation (the string) . Correct if am wrong :)

[mariopil]

Yes, it's only for building the invoke command :)

[geofmureithi]

I think we need to remove it.
It omits other information such as building and deploying. Shouldn't this info be in documentation of the contracts?

[mariopil]

Reading contracts from repo would still be needed anyway for dynamically loading their code. As for the invoke - if we are going to remove this, then the UI with setting up the params would also be useless.

[geofmureithi]

I think if we include invoke, we have to include build and deploy.
I think just having invoke itself is confusing. Also the invoke command provided will never work without the other commands being executed first.

[mariopil]

Build and Deploy are IDE functionalities so I would not add them here. And then - the Invoke command and the UI to setup invoke params could be also moved to IDE.

[geofmureithi]

Invoke is an IDE functionality too.
The second problem is also that there are more than one invoke command in any contract. (Maybe we need to change the naming to Init) over Invoke.
Maybe we need to change the UI, and have a functionality where when you select an invocable function the invoke params show up next to it.

[geofmureithi]

Monaco implements an onhover

monaco.languages.registerHoverProvider('rust', {
    provideHover: function(model, position) { 
        // Log the current word in the console, we need to check if its an invoke-able method
        console.log(model.getWordAtPosition(position));
    }
});

[mariopil]

Yep, that was my idea few comments back - to have a dropdown with all public functions for which the invoke could be generated. And then the UI would need to be refreshed with inputs for each method params whenever user selects something from the dropdown.

[geofmureithi]

What about we use the hover feature above to draw above the function and give you the command and input if need be.
Ie we wont need to keep a list of functions or their arguments since we are using functionality provided by the code editor.

[geofmureithi]

I am also going to suggest we get rid of all dropdowns :).
Dropdowns are bad UX IMO
We could replace the contracts dropdown with an icon selection set.

[mariopil]

So the invoke command would be static without user inputs?
As for the dropdowns - it's ok for me to get rid of them :) I'm not expert in UX ;)

[geofmureithi]

No we would drop the invoke button and replace it with an Init button.
So something like this

[geofmureithi]

This is a basic rough drawing, the idea being the params will show up on hover of a function.
I may explain a little bit better in tommorow's sync.

[mariopil]

I've made some initial design of the hover (only graphical design, not in the code). I think I would get rid of user defined inputs at all for the invoke. Two reasons for that:

1. If you look at the screen below, the hover window is already big, adding here inputs would make it even bigger and too complex.
2. I don't think anyone would use it anyway. The main purpose of wizard is just to generate initial code that would be then edited in the IDE.
   Instead, let's put there some default example values just to present the user how to invoke a function.

[eloylp]

Instead, let's put there some default example values just to present the user how to invoke a function.

Yeah, i dont know. On my mind (my 2 cents), allowing users to just copy and paste directly to terminal and execute, adds value. Specially to those who are not very technical. If i am not mistaken, by having to replace the default values, probably users would need to copy the command first to a text editor, edit it , copy it , paste into the terminal. Would that add an usage barrier ?

But thats only my opinion. Lets wait maybe for others feedback or even request it from community :)

[mariopil]

But remember it's still only a wizard. The invoke dialog is just an example how a particular function of the contract can be called. User will not be able to run the contract from wizard anyway - he will have to compile and deploy it first using the IDE. And I would move the param settings there. Let's not duplicate the functionalities between wizard and IDE :)

[eloylp]

But remember it's still only a wizard. The invoke dialog is just an example how a particular function of the contract can be called. User will not be able to run the contract from wizard anyway - he will have to compile and deploy it first using the IDE. And I would move the param settings there. Let's not duplicate the functionalities between wizard and IDE :)

Agreed :) i see your point. Lets defer that complexity for the IDE. An example on how to invoke is probably generous enough for the wizard 👍

[mariopil]

Cool :) Here's some initial look of the updated UI - the monaco editor looks great :)