fixup! feat(voting): fix QA findings

lidofinance · Sep 12, 2024 · d07f8db · d07f8db
1 parent 1cc467f
commit d07f8db
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/modules/votes/ui/VoteActionsModals/DelegatorsList/VoteActionsDelegatorsList.tsx b/modules/votes/ui/VoteActionsModals/DelegatorsList/VoteActionsDelegatorsList.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo, useEffect } from 'react'
-import { Text, Checkbox, trimAddress } from '@lidofinance/lido-ui'
+import React, { useMemo, useEffect, useCallback } from 'react'
+import { Text, Checkbox, trimAddress, ToastInfo } from '@lidofinance/lido-ui'
 import {
   AccordionWrap,
   DelegatorsListItem,
@@ -40,10 +40,15 @@ export function DelegatorsList({
   eventsVoted,
   defaultExpanded,
 }: Props) {
+  const TRANSACTION_LIMIT = 5
+
   const initialCheckedItems = Object.fromEntries(
     eligibleDelegatedVoters
       .filter(delegator => !delegator.votedByDelegate)
-      .map(delegator => [delegator.address, true]),
+      .map((delegator, index) => [
+        delegator.address,
+        index < TRANSACTION_LIMIT,
+      ]),
   )
 
   const [checkedItems, dispatch] = useSimpleReducer(initialCheckedItems)
@@ -76,6 +81,23 @@ export function DelegatorsList({
     [selectedAddresses, eligibleDelegatedVoters],
   )
 
+  const handleCheckboxChange = useCallback(
+    (address: string, isChecked: boolean) => {
+      const currentCheckedCount = selectedAddresses.length
+
+      if (isChecked && currentCheckedCount >= TRANSACTION_LIMIT) {
+        ToastInfo('Transaction limit reached. Vote with the rest next.', {})
+        return
+      }
+
+      dispatch({
+        ...checkedItems,
+        [address]: isChecked,
+      })
+    },
+    [selectedAddresses, checkedItems, dispatch],
+  )
+
   function Summary() {
     return (
       <SummaryWrap>
@@ -105,10 +127,7 @@ export function DelegatorsList({
               <Checkbox
                 checked={checkedItems[delegator.address]}
                 onChange={e =>
-                  dispatch({
-                    ...checkedItems,
-                    [delegator.address]: e.target.checked,
-                  })
+                  handleCheckboxChange(delegator.address, e.target.checked)
                 }
               />
               <AddressPop address={delegator.address}>

diff --git a/modules/votes/ui/VoteFormActions/VoteFormActions.tsx b/modules/votes/ui/VoteFormActions/VoteFormActions.tsx
@@ -317,6 +317,7 @@ export function VoteFormActions({
           <TxRow tx={txVote} onClick={txVote.open} />
         </>
       )}
+      <br />
       {!txDelegatesVote.isEmpty && (
         <>
           <TxRow tx={txDelegatesVote} onClick={txDelegatesVote.open} />