staking(ui): fix staking page ui issues

[Hemanthghs]

Closes #944

Summary by CodeRabbit

• New Features

  • Introduced a new AmountInputField component for better handling of amount inputs across staking-related dialogs.
  • Implemented a new error constant INSUFFICIENT_BALANCE for improved error messaging.

• Bug Fixes

  • Fixed UI inconsistencies and logic for handling closing events in staking dialogs.

• Refactor

  • Streamlined the conditional rendering process in various components.
  • Enhanced the staking page state management with new state variables and functions.

• UI/UX Improvements

  • Updated the staking UI with modified class names and new styles for better responsiveness and visual appeal.
  • Improved the layout and overflow behavior in the staking CSS.

• Documentation

  • Updated the StakingSidebarProps and AllValidatorsProps interfaces to reflect new properties.

• Chores

  • Adjusted the Tailwind CSS configuration for responsive design breakpoints.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-resolute	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2023 10:00am
resolute	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2023 10:00am

[coderabbitai]

Walkthrough

The recent updates to the staking page UI and functionality mainly involve refactoring components to improve usability and maintainability. Key changes include the addition of a new AmountInputField component to handle amount inputs, the replacement of handleClose with toggleValidatorsDialog, and various UI adjustments to enhance the user experience. Logic has been updated to accommodate these changes, including form resets and state management.

Changes

Files	Change Summary
AllValidators.tsx, StakingPage.tsx, StakingSidebar.tsx, types/staking.d.ts	Implemented toggleValidatorsDialog and related state management.
AmountInputField.tsx, DialogDelegate.tsx, DialogRedelegate.tsx, DialogUndelegate.tsx	Added AmountInputField component and replaced Controller with it for amount input handling.
DialogAllValidators.tsx	Replaced handleClose with toggleValidatorsDialog and updated UI and logic.
ValidatorComponent.tsx, ValidatorItem.tsx	Updated button class names, event handlers, and conditional attributes.
StakingOverview.tsx	Modified logic for rendering "Unbonding" section.
staking.css, styles.ts	CSS and style object updates.
utils/errors.ts	Added INSUFFICIENT_BALANCE error constant.
tailwind.config.ts	Updated screens object with new breakpoints.

Assessment against linked issues

Objective	Addressed	Explanation
Add disable state for buttons (#944)	✅
Change UI for displaying form validation errors (#944)	✅
Handle content overflow in staking details cards (#944)	✅
Add UI to display no data found (#944)	✅

Related issues

• staking(functionality): staking page functionality issues #950: The changes to the staking page UI components could be part of the groundwork for implementing the functionality mentioned in this issue.
• Overview page improvements #903: The UI improvements and component refactoring could align with the overview page improvements, especially if similar patterns are used across different pages.

Poem

Oh, the code was a mess, a tangle so wild,
Along hopped CodeRabbit, gentle and mild,
With a refactor here and a tweak over there,
The UI's now sleek, with a debonair flair. 🐰✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• You can reply to a review comment made by CodeRabbit.
• You can tag CodeRabbit on specific lines of code or files in the PR by tagging @coderabbitai in a comment.
• You can tag @coderabbitai in a PR comment and ask one-off questions about the PR and the codebase. Use quoted replies to pass the context for follow-up questions.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between ce8dcdc and 1ff916e.

Files selected for processing (16)

• frontend/src/app/(routes)/staking/components/AllValidators.tsx (3 hunks)
• frontend/src/app/(routes)/staking/components/AmountInputField.tsx (1 hunks)
• frontend/src/app/(routes)/staking/components/DialogAllValidators.tsx (2 hunks)
• frontend/src/app/(routes)/staking/components/DialogDelegate.tsx (4 hunks)
• frontend/src/app/(routes)/staking/components/DialogRedelegate.tsx (7 hunks)
• frontend/src/app/(routes)/staking/components/DialogUndelegate.tsx (5 hunks)
• frontend/src/app/(routes)/staking/components/StakingOverview.tsx (2 hunks)
• frontend/src/app/(routes)/staking/components/StakingPage.tsx (5 hunks)
• frontend/src/app/(routes)/staking/components/StakingSidebar.tsx (2 hunks)
• frontend/src/app/(routes)/staking/components/ValidatorComponent.tsx (1 hunks)
• frontend/src/app/(routes)/staking/components/ValidatorItem.tsx (1 hunks)
• frontend/src/app/(routes)/staking/staking.css (4 hunks)
• frontend/src/app/(routes)/staking/styles.ts (1 hunks)
• frontend/src/types/staking.d.ts (2 hunks)
• frontend/src/utils/errors.ts (1 hunks)
• frontend/tailwind.config.ts (1 hunks)

Files skipped from review due to trivial changes (1)

• frontend/src/app/(routes)/staking/staking.css

Additional comments: 34

frontend/src/app/(routes)/staking/components/AllValidators.tsx (3)

• 13-14: The addition of allValidatorsDialogOpen and toggleValidatorsDialog to the component's props is consistent with the PR objectives to centralize dialog state management. Ensure that toggleValidatorsDialog is correctly implemented and that all calls to this function are updated accordingly.

• 63-63: The DialogAllValidators component now receives toggleValidatorsDialog as a prop. Verify that this prop is correctly handled within DialogAllValidators and that it effectively manages the dialog's visibility as intended.

• 60-60: Confirm that the validator variable used as a key in the ValidatorItem component is a unique identifier for each validator to ensure that React can manage the list efficiently and correctly.

frontend/src/app/(routes)/staking/components/AmountInputField.tsx (2)

• 40-40: Verify if the autoFocus prop set to true is intentional. If multiple AmountInputField components are rendered on the same page, this could lead to a confusing user experience due to multiple elements being focused at once.

• 61-61: The use of export default is consistent with the user's preference for default exports across the application.

frontend/src/app/(routes)/staking/components/DialogAllValidators.tsx (2)

• 10-14: The DialogAllValidatorsProps interface has been updated to replace handleClose with toggleValidatorsDialog. This change should be verified across the codebase to ensure that all references to handleClose have been updated accordingly.

Verification successful

It seems there was an issue with the previous script execution due to an unrecognized file type specification. The rg command did not recognize the tsx file type, which is likely a mistake in the command syntax. To correct this, I will remove the --type flag and let rg search all files, as it will by default include .ts and .tsx files in its search.

I will generate a new script to search for occurrences of handleClose and toggleValidatorsDialog in the codebase without specifying the file type.

---

The new shell script execution results indicate that the handleClose function is still being used in various components throughout the codebase. However, these references to handleClose are not necessarily related to the DialogAllValidators component, which was the focus of the original change. The script also confirms the usage of toggleValidatorsDialog in the context of the staking page components, which is consistent with the changes made in the pull request.

Given the information at hand, it appears that the change from handleClose to toggleValidatorsDialog in the DialogAllValidators component has been implemented correctly, and there are no lingering references to handleClose in the context of that specific component. The presence of handleClose in other components does not conflict with the changes made in the pull request, as those are separate instances of a similarly named function.

Therefore, the verification process has not found any issues with the changes made in the DialogAllValidators component, and the usage of toggleValidatorsDialog is consistent with the intended updates in the pull request.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Search for the old `handleClose` prop usage in the codebase. Expecting no results.
rg 'handleClose' --type ts --type tsx
# Search for the new `toggleValidatorsDialog` prop usage in the codebase. Expecting results where this prop is used.
rg 'toggleValidatorsDialog' --type ts --type tsx

Length of output: 142

---

---

Script:

#!/bin/bash
# Search for the old `handleClose` prop usage in the codebase. Expecting no results.
rg 'handleClose'
# Search for the new `toggleValidatorsDialog` prop usage in the codebase. Expecting results where this prop is used.
rg 'toggleValidatorsDialog'

Length of output: 8217

* 28-120: The refactoring of the `DialogAllValidators` component, including the replacement of `handleClose` with `toggleValidatorsDialog` and the updates to the JSX structure, appears to be correctly implemented. The conditional rendering logic for `ActiveValidators` and `InactiveValidators` is also consistent with the intended changes.

frontend/src/app/(routes)/staking/components/DialogDelegate.tsx (1)

• 3-17: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [3-36]

The changes in the DialogDelegate.tsx file are consistent with the PR objectives and the AI-generated summary. The refactoring introduces the AmountInputField component for handling amount inputs, which is a move towards modularity and improved UI consistency. The addition of the reset function to clear form values upon closing the dialog is a good practice for form handling. The removal of unused imports and the use of AmountInputField align with the goal of enhancing the user experience on the staking page.

frontend/src/app/(routes)/staking/components/DialogRedelegate.tsx (4)

• 8-20: The changes to the imports and the addition of the AmountInputField component align with the PR's objectives to refactor the UI components for better modularity and maintainability.

• 70-76: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [70-83]

The addition of the reset function call in handleClose is a good practice to clear the form state when the dialog is closed. Ensure that reset is properly defined and imported from react-hook-form.

• 242-252: The introduction of the AmountInputField component for handling amount inputs is in line with the PR's objectives to improve the UI's modularity. This change replaces the previous Controller component used for the amount input.

• 208-219: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [208-229]

The style adjustments for the Autocomplete component and the TextField component are likely part of the UI improvements. Verify that the autoFocus attribute set to true on the TextField component is intentional and aligns with the desired user experience.

frontend/src/app/(routes)/staking/components/DialogUndelegate.tsx (4)

• 7-18: The changes to the imports and the addition of the AmountInputField component are consistent with the PR's objectives to improve the UI and code modularity.

• 32-32: Adding a call to the reset function on dialog close is a good practice to ensure the form is cleared when the dialog is closed.

• 139-143: The AmountInputField component is correctly integrated into the form, receiving the necessary props to function as intended. This change enhances the modularity of the form handling.

• 146-146: Check if the dialog-delegate-button class has the appropriate styles to indicate the disabled state when loading is 'pending', as per the PR's objectives to add a disabled state for buttons.

frontend/src/app/(routes)/staking/components/StakingOverview.tsx (1)

• 117-123: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [120-142]

The change to wrap the "Unbonding" section in a div with the class "mt-12" is a UI improvement for better spacing and visual representation. Ensure that the class "mt-12" is properly defined in the staking.css file and that it applies the intended margin-top styling.

frontend/src/app/(routes)/staking/components/StakingPage.tsx (5)

• 3-3: The addition of useState to the React import is correct and necessary for the new state management code introduced.

• 21-21: The new import of msgs from @/utils/messages.json is appropriate for managing UI messages.

• 31-41: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [34-43]

The introduction of allValidatorsDialogOpen state and toggleValidatorsDialog function aligns with the PR's objective to manage dialog visibility.

• 135-143: The new UI elements for handling the 'no data' state, including the Explore button with an onClick event handler to toggleValidatorsDialog, are consistent with the PR's objectives to improve the user interface.

• 166-167: Passing the allValidatorsDialogOpen state and toggleValidatorsDialog function as props to the StakingSidebar component is consistent with the PR's objectives and the AI-generated summary.

frontend/src/app/(routes)/staking/components/StakingSidebar.tsx (4)

• 25-29: The addition of allValidatorsDialogOpen and toggleValidatorsDialog to the StakingSidebar component is consistent with the PR objectives and the AI-generated overview. Ensure that these new props are properly documented and that their usage is consistent throughout the component.

• 149-153: The new props allValidatorsDialogOpen and toggleValidatorsDialog are correctly passed down to the AllValidators child component. This is a standard practice for managing state and behavior between parent and child components.

• 25-30: The validators prop is used within the StakingSidebar component but is not present in the StakingSidebarProps interface. Verify that this prop is defined and properly typed in the interface to ensure type safety and clarity.

Verification successful

The output provided does not include the full definition of the StakingSidebarProps interface, which is necessary to verify whether the validators prop is included. Since the output was truncated, we need to run another script to get the complete interface definition.

Let's write a script to extract the full definition of StakingSidebarProps from the staking.d.ts file.

---

The script failed because the regex pattern used is not correct; it seems to interpret the curly brace { as part of a regex repetition operator. To fix this, we need to escape the curly brace or use a pattern that does not require escaping special characters.

Let's write a corrected script to extract the full definition of StakingSidebarProps from the staking.d.ts file without using a regex pattern that requires escaping.

---

The output from the script confirms that the validators prop is indeed present in the StakingSidebarProps interface, along with other properties such as currency, chainID, onMenuAction, allValidatorsDialogOpen, and toggleValidatorsDialog. This means that the initial concern raised in the review comment has been addressed, and the validators prop is properly defined and typed in the interface.

Based on this information, we can conclude that the StakingSidebarProps interface is correctly defined with the validators prop included.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Search for the definition of StakingSidebarProps across the codebase to verify the inclusion of the validators prop.
fd 'staking.d.ts' --exec rg 'interface StakingSidebarProps'

Length of output: 91

---

---

Script:

#!/bin/bash
# Extract the full definition of StakingSidebarProps from the staking.d.ts file.
rg 'interface StakingSidebarProps {' -A 10 frontend/src/types/staking.d.ts

Length of output: 202

---

---

Script:

#!/bin/bash
# Extract the full definition of StakingSidebarProps from the staking.d.ts file.
rg 'interface StakingSidebarProps' -A 10 frontend/src/types/staking.d.ts

Length of output: 335

* 156-156: The use of a default export for the `StakingSidebar` component is consistent with the application's coding practices as per the learning from user Hemanthghs.

frontend/src/app/(routes)/staking/components/ValidatorComponent.tsx (1)

• 69-80: The changes made to the ValidatorComponent are consistent with the PR's objectives to fix UI issues on the staking page. The addition of the disabled attribute to the delegate button and the simplification of the onClick event handler are good improvements that enhance both functionality and code clarity. The class name change to indicate the disabled state is also a good UI practice.

frontend/src/app/(routes)/staking/components/ValidatorItem.tsx (1)

• 20-30: The changes to the class names and the addition of new styling properties in the ValidatorItem component are consistent with the PR's objective to fix UI issues on the staking page. The modifications to the flex class and the text styling appear to be aimed at improving the visual layout and handling content overflow. These changes should be verified in the UI to ensure they meet the desired aesthetics and functionality.

frontend/src/app/(routes)/staking/styles.ts (1)

• 40-61: The new style objects textFieldStyles and textFieldInputPropStyles are added correctly and align with the theme of the existing styles. Ensure that these styles are applied only to the intended components to avoid any unintended side effects.

frontend/src/types/staking.d.ts (2)

• 256-260: The addition of allValidatorsDialogOpen and toggleValidatorsDialog to the StakingSidebarProps interface aligns with the PR's objective to improve UI handling for the staking page. This change should be cross-checked with the implementation to ensure that the new properties are used correctly.

• 332-336: Similarly, the addition of allValidatorsDialogOpen and toggleValidatorsDialog to the AllValidatorsProps interface is consistent with the PR's goal of enhancing UI interactions. Ensure that the corresponding components that consume this interface are updated to handle these new properties.

frontend/src/utils/errors.ts (1)

• 25-25: The addition of the INSUFFICIENT_BALANCE error constant is consistent with the existing error handling pattern.

frontend/tailwind.config.ts (2)

• 19-20: The addition of new breakpoints md: '1350px' and sm: '1150px' to the screens object is correct and follows the expected syntax for Tailwind CSS configuration.

• 19-20: Ensure that the introduction of new breakpoints does not adversely affect the existing layout and styling throughout the application. This may require a thorough review of all components that utilize responsive design features provided by Tailwind CSS.

[Hemanthghs]

@aleem1314 can you review this pr

[aleem1314]

LGTM. Not related to this PR, but we should display huge staked/rewards tokens in a simplified format such as 1k, 2k+, etc.