Skip to content

feat(SorobanInvokeButton): show method name in loading label, tooltip prop, max-height constraint on result block #369

Description

@k-deejah

Problem

1. SorobanInvokeButton does not show the method name being invoked in the loading statestate === "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

  1. Change loading label to Invoking ${params.method}… when buttonLabel is the default.
  2. Add tooltip?: string prop rendered as title={tooltip} on the button when connected.
  3. Add maxResultHeight?: number prop (default 200px); wrap the result <pre> in a max-h container with overflow-y-auto.

Acceptance Criteria

  • Loading state shows Invoking {method}… for default-labelled buttons
  • tooltip prop renders as native tooltip on the button
  • Result block is height-constrained with a scrollable overflow
  • npm run build passes

Note for Contributors: Write a clear PR description. Include a screenshot of the constrained result block with a large output.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions