feat: add unionfield when multiple types are given

[kstroobants]

Fixes DXP-546

What

• Added UnionField.vue component to handle multiple types in form inputs e.g. str | int gives two fields.
• Updated ContractParams.vue to use the new UnionField component for handling union types.
• Modified useInputMap.ts to include logic for determining union types and returning the appropriate component.

Why

To add a missing part where the user states multiple types.

Testing done

Test in a local studio by write a contract with init and write methods containing multiple types.

# v0.1.0
# { "Depends": "py-genlayer:latest" }

from genlayer import *

# contract class
class Storage(gl.Contract):
    storage_str: str
    storage_int: u256
    storage_bool: bool
    storage_list: DynArray[u256] 
    storage_address: Address
    storage_bytes: bytes

    def __init__(self, initial_storage: str | int | bool | list | Address | bytes | None):
        if isinstance(initial_storage, str):
            self.storage_str = initial_storage
        elif isinstance(initial_storage, int):
            self.storage_int = initial_storage
        elif isinstance(initial_storage, bool):
            self.storage_bool = initial_storage
        elif isinstance(initial_storage, list):
            self.storage_list = initial_storage
        elif isinstance(initial_storage, Address):
            self.storage_address = initial_storage
        if isinstance(initial_storage, bytes):
            self.storage_bytes = initial_storage
        else:
            pass

    @gl.public.view
    def get_storage(self) -> str:
        return f"str: {self.storage_str}, int: {self.storage_int}, bool: {self.storage_bool}, list: {self.storage_list}, Address: {self.storage_address}, bytes: {self.storage_bytes}"

Decisions made

• Added a checkbutton to choose which type you want to send. For str | int, we do not know if the user wants to send 42 integer value or "42" string value so a smart type converter is not an option.
• Merged all type field that use AnyField so when the type is list | dict then we do not need two input boxes.

Checks

• I have tested this code
• I have reviewed my own PR
• I have created an issue for this PR
• I have set a descriptive PR title compliant with conventional commits

Reviewing tips

• Focus on the implementation of the UnionField.vue component and its integration into ContractParams.vue.
• Review the logic in useInputMap.ts for handling union types and ensure it aligns with the intended functionality.

User facing release notes

Added frontend support for multiple argument types.

Summary by CodeRabbit

• New Features

  • Added support for input fields that accept multiple union types, allowing users to select and enter values for different possible types in contract parameter forms.
  • Introduced a new input component with a user-friendly interface for handling union-type parameters, including dynamic grouping and input rendering.

• Improvements

  • Enhanced synchronization between input fields and the internal state for contract parameters, ensuring more reliable updates when values change.

[coderabbitai]

Walkthrough

A new UnionField Vue component is introduced to handle input fields that accept multiple union types. The input mapping logic is updated to support union types by returning the UnionField component and exposing a utility to extract union types. The contract parameter input handling is updated to bind union types without altering event handling or state updates.

Changes

Cohort / File(s)	Change Summary
Contract parameter input binding frontend/src/components/Simulator/ContractParams.vue	Adds a new prop binding :unionTypes="inputMap.getUnionTypes(paramType)" to dynamic input components rendering positional and keyword contract parameters. No changes to event handling or internal state updates were made.
Union input component frontend/src/components/global/fields/UnionField.vue	Introduces a new Vue 3 component UnionField that renders input fields supporting multiple union types. It manages internal state for selected type groups and values, initializes defaults, synchronizes with external model values, and emits updated values. Handles grouping of simple and complex types and conditionally renders appropriate input components.
Input mapping and union type extraction frontend/src/hooks/useInputMap.ts	Imports and integrates UnionField into the input mapping logic, returning it for union types. Adds a new function getUnionTypes to extract union types from schema definitions, and exposes it in the hook's return object.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ContractParams.vue
    participant useInputMap.ts
    participant UnionField.vue

    User->>ContractParams.vue: Interacts with contract parameter input
    ContractParams.vue->>useInputMap.ts: getComponent(paramType)
    useInputMap.ts-->>ContractParams.vue: Returns UnionField if union type
    ContractParams.vue->>UnionField.vue: Renders with :unionTypes and modelValue
    UnionField.vue->>ContractParams.vue: Emits update:modelValue on change
    ContractParams.vue->>ContractParams.vue: Updates args accordingly

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Poem

In fields of types where unions grow,
A bunny hops, excited so—
With radio buttons, choices bloom,
And inputs change from room to room.
Now contract forms are quite astute,
Thanks to this new union route!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 50ba112 and 1ad686b.

📒 Files selected for processing (2)

• frontend/src/components/Simulator/ContractParams.vue (2 hunks)
• frontend/src/components/global/fields/UnionField.vue (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• frontend/src/components/Simulator/ContractParams.vue
• frontend/src/components/global/fields/UnionField.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Analyze (javascript)
• GitHub Check: Analyze (python)
• GitHub Check: test
• GitHub Check: Load Tests / load-test
• GitHub Check: backend-unit-tests

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dxp-546-frontend-type-error-in-send-transaction

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud