Problem
1. SorobanInvokeButton does not show the method name being invoked in the loading state — state === "loading" shows "Invoking…" with no indication of which method is being called, making it confusing when multiple buttons are on the same page.
2. SorobanInvokeButton does not support a tooltip prop for the invoke button — the title={!isConnected ? "Connect wallet to invoke" : undefined} tooltip only applies when disconnected. When connected, hovering gives no information about what the method does.
3. SorobanInvokeButton result display has no max height — large contract return values push the page layout — the result <pre> block has whitespace-pre-wrap break-all but no max-h constraint. A contract returning megabytes of data would break the layout.
Solution
- Change loading label to
Invoking ${params.method}… when buttonLabel is the default.
- Add
tooltip?: string prop rendered as title={tooltip} on the button when connected.
- Add
maxResultHeight?: number prop (default 200px); wrap the result <pre> in a max-h container with overflow-y-auto.
Acceptance Criteria
Note for Contributors: Write a clear PR description. Include a screenshot of the constrained result block with a large output.
Problem
1.
SorobanInvokeButtondoes not show the method name being invoked in the loading state —state === "loading"shows "Invoking…" with no indication of which method is being called, making it confusing when multiple buttons are on the same page.2.
SorobanInvokeButtondoes not support atooltipprop for the invoke button — thetitle={!isConnected ? "Connect wallet to invoke" : undefined}tooltip only applies when disconnected. When connected, hovering gives no information about what the method does.3.
SorobanInvokeButtonresult display has no max height — large contract return values push the page layout — the result<pre>block haswhitespace-pre-wrap break-allbut nomax-hconstraint. A contract returning megabytes of data would break the layout.Solution
Invoking ${params.method}…whenbuttonLabelis the default.tooltip?: stringprop rendered astitle={tooltip}on the button when connected.maxResultHeight?: numberprop (default 200px); wrap the result<pre>in amax-hcontainer withoverflow-y-auto.Acceptance Criteria
Invoking {method}…for default-labelled buttonstooltipprop renders as native tooltip on the buttonnpm run buildpasses