Skip to content

Refactor stakers modals#2358

Merged
Marketen merged 10 commits intodevelopfrom
mateu/refactor-stakers-modals
Feb 27, 2026
Merged

Refactor stakers modals#2358
Marketen merged 10 commits intodevelopfrom
mateu/refactor-stakers-modals

Conversation

@mateumiralles
Copy link
Copy Markdown
Contributor

@mateumiralles mateumiralles commented Jan 30, 2026

This pull request introduces two new reusable components for the UI: a generic CollapsibleList (accordion) and a branded BasePromotionModal, along with their associated styles. These components are then used to implement new modals for staker disclaimers and premium user flows, improving both code modularity and user experience. The changes also include modern, responsive, and accessible SCSS styles for these components.

The modal logic that previously lived inside the components has been moved into a dedicated hook, useStakerModals.tsx, which is now responsible for controlling how these modals are displayed.

New reusable components and their integration:

  • Collapsible List (Accordion):

    • Adds a generic CollapsibleList React component with support for multiple or single open sections, used for displaying structured lists such as terms of use.
    • Provides comprehensive, theme-aware SCSS styles for the collapsible list, including dark mode support.
  • Promotion Modal:

    • Introduces a BasePromotionModal component for displaying promotional or informational modals, supporting custom images, primary/secondary actions, and flexible button behavior (action, internal link, external link).
    • Includes a visually rich, responsive SCSS style for the promotion modal with gradient backgrounds and animated elements.

Integration into staker and premium flows:

  • Staker Disclaimer Modal:

    • Implements a StakerDisclaimerModal that uses CollapsibleList to present terms of use sections, with acceptance logic and custom styling for clarity and accessibility. [1] [2]
  • Premium Modals:

    • Adds UpgradeToPremiumModal and ActivateBackupModal components, leveraging BasePromotionModal to guide users through premium upgrade and backup activation flows.

Most important changes:

Component Development:

  • Added CollapsibleList and CollapsibleListItem components for reusable accordion-style UI, with configurable open/close logic.
  • Created BasePromotionModal for consistent, visually appealing promotional modals with flexible action handling.

Styling and Theming:

  • Developed SCSS styles for collapsibleList and basePromotionModal, ensuring responsive design and dark mode compatibility. [1] [2]

Feature Integration:

  • Implemented StakerDisclaimerModal using CollapsibleList to display terms of use with acceptance logic, and added dedicated styles. [1] [2]
  • Added premium-related modals (UpgradeToPremiumModal, ActivateBackupModal) using BasePromotionModal for improved user guidance in premium flows.

mateumiralles and others added 6 commits January 27, 2026 18:23
* Premium backup stakers Modal

* premium modal fix

* backup active and available checks

* update comments
* [WIP] new disclaimer modal

* formatting files

* disclaimer data fix

* modal copy fix

* Accordion component

* rename Accordion

* dark mode fixes
@mateumiralles mateumiralles requested a review from a team as a code owner January 30, 2026 13:56
@github-actions
Copy link
Copy Markdown

github-actions bot commented Jan 30, 2026

@mateumiralles
Copy link
Copy Markdown
Contributor Author

@copilot review the PR

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 9, 2026

@mateumiralles I've opened a new pull request, #2366, to work on those changes. Once the pull request is ready, I'll request review from you.

@github-actions github-actions bot temporarily deployed to commit February 26, 2026 08:33 Inactive
@github-actions github-actions bot temporarily deployed to commit February 26, 2026 14:56 Inactive
@github-actions github-actions bot temporarily deployed to commit February 27, 2026 10:04 Inactive
@Marketen
Copy link
Copy Markdown
Contributor

@copilot review this PR. im interested mainly in checking logic changes that might introduce new bugs or trigger an unwanted behaviour. Be extra careful when reviewing the changes done in packages/admin-ui/src/pages/stakers/components/StakerNetwork.tsx

Copy link
Copy Markdown
Contributor

Copilot AI commented Feb 27, 2026

@Marketen I've opened a new pull request, #2399, to work on those changes. Once the pull request is ready, I'll request review from you.

@Marketen Marketen merged commit 7786866 into develop Feb 27, 2026
9 checks passed
@Marketen Marketen deleted the mateu/refactor-stakers-modals branch February 27, 2026 10:29
pablomendezroyo pushed a commit that referenced this pull request Mar 9, 2026
Refactor stakers Modals
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants