upd delegators page actions list

rarimo · May 7, 2024 · fc4fbc8 · fc4fbc8
1 parent d2dd376
commit fc4fbc8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog], and this project adheres to [Semantic Versioning].
 
+## [1.4.4] - 2024-05-07
+### Fixed
+- Delegation page actions
+
 ## [1.4.3] - 2024-05-06
 ### Fixed
 - Rewards amount formatting
@@ -116,7 +120,8 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 - Initiated project
 
-[Unreleased]: https://gitlab.com/rarimo/scan/compare/1.4.3...HEAD
+[Unreleased]: https://gitlab.com/rarimo/scan/compare/1.4.4...HEAD
+[1.4.4]: https://gitlab.com/rarimo/scan/compare/1.4.3...1.4.4
 [1.4.3]: https://gitlab.com/rarimo/scan/compare/1.4.2...1.4.3
 [1.4.2]: https://gitlab.com/rarimo/scan/compare/1.4.1...1.4.2
 [1.4.1]: https://gitlab.com/rarimo/scan/compare/1.4.0...1.4.1

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scan",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "private": true,
   "gitHooks": {
     "pre-commit": "yarn lint",

diff --git a/src/components/MultipleActionsButton.tsx b/src/components/MultipleActionsButton.tsx
@@ -1,7 +1,7 @@
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { Box, Button, MenuItem, Select, SelectChangeEvent, Stack, useTheme } from '@mui/material'
 import { uniqueId } from 'lodash-es'
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 const BUTTON_ID = `multiple-actions-button-${uniqueId()}`
 
@@ -47,6 +47,11 @@ export default function MultipleActionsButton({
     handleClose()
   }
 
+  useEffect(() => {
+    setValue(actions?.[Number(value)] ? value : '0')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions])
+
   return (
     <Stack ref={anchorEl} direction={'row'}>
       <Button id={BUTTON_ID} disabled={isDisabled || isHandlerDisabled} onClick={handler}>

diff --git a/src/components/Validator/ValidatorDetailsActions.tsx b/src/components/Validator/ValidatorDetailsActions.tsx
@@ -73,54 +73,52 @@ export default function ValidatorDetailsActions({
     )
   }, [isGrantsLoading, isGrantsLoadingError, isDelegationLoading, isDelegationLoadingError])
 
-  const actions = useMemo(
-    () => {
-      const result = [
-        {
-          label: t('validator-details.delegate-btn'),
-          handler: () => delegate(DelegateTypes.Delegate),
-          isDisabled: isDelegationLoadingComp,
-        },
-      ]
+  const actions = useMemo(() => {
+    const result = [
+      {
+        label: t('validator-details.delegate-btn'),
+        handler: () => delegate(DelegateTypes.Delegate),
+        isDisabled: isDelegationLoadingComp,
+      },
+    ]
 
-      if (!isDelegationEmpty) {
-        result.push({
-          label: t('validator-details.undelegate-btn'),
-          handler: () => delegate(DelegateTypes.Undelegate),
-          isDisabled: isDelegationLoadingComp,
-        })
-      }
+    if (!isDelegationEmpty) {
+      result.push({
+        label: t('validator-details.undelegate-btn'),
+        handler: () => delegate(DelegateTypes.Undelegate),
+        isDisabled: isDelegationLoadingComp,
+      })
+    }
 
-      if (!isRewardEmpty) {
-        result.push({
-          label: t('validator-details.get-reward-btn'),
-          handler: getRewards,
-          isDisabled: isRewardLoading || isRewardLoadingError,
-        })
-      }
+    if (!isRewardEmpty) {
+      result.push({
+        label: t('validator-details.get-reward-btn'),
+        handler: getRewards,
+        isDisabled: isRewardLoading || isRewardLoadingError,
+      })
+    }
 
-      if (isValidator) {
-        result.push({
-          label: t('validator-details.get-commission-btn'),
-          handler: getValidatorCommission,
-          isDisabled: isRewardLoading || isRewardLoadingError,
-        })
-      }
+    if (isValidator) {
+      result.push({
+        label: t('validator-details.get-commission-btn'),
+        handler: getValidatorCommission,
+        isDisabled: isRewardLoading || isRewardLoadingError,
+      })
+    }
 
-      return result
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      isDelegationEmpty,
-      isDelegationLoading,
-      isDelegationLoadingError,
-      isRewardEmpty,
-      isRewardLoading,
-      isRewardLoadingError,
-      isValidator,
-      t,
-    ],
-  )
+    return result
+  }, [
+    delegate,
+    getRewards,
+    getValidatorCommission,
+    isDelegationEmpty,
+    isDelegationLoadingComp,
+    isRewardEmpty,
+    isRewardLoading,
+    isRewardLoadingError,
+    isValidator,
+    t,
+  ])
 
   return (
     <Tooltip
@@ -133,7 +131,11 @@ export default function ValidatorDetailsActions({
       disableTouchListener={isConnected}
     >
       <span>
-        <MultipleActionsButton actions={actions} isDisabled={!isConnected || isDisabled} />
+        <MultipleActionsButton
+          key={actions?.length}
+          actions={actions}
+          isDisabled={!isConnected || isDisabled}
+        />
       </span>
     </Tooltip>
   )