Merge pull request #726 from subspace/725-on-manage-my-nomination-tab…

…-the-option-to-nominate-a-deregistered-operator-should-be-removed

improve the filtering of Actions in Staking section especially for de…

explorer/src/components/Operator/ActionsDropdown.tsx

@@ -39,6 +39,8 @@ export const ActionsDropdown: FC<ActionsDropdownProps> = ({
     [excludeActions],
   )
 
+  if (actionsAvailable.length === 0) return <></>
+
   return (
     <Listbox
       value={action.type}

explorer/src/components/Operator/NominationManagement.tsx

@@ -239,23 +239,36 @@ export const NominationManagement: FC = () => {
         enableSorting: false,
         cell: ({
           row,
-        }: Cell<NominatorsConnectionQuery['nominatorsConnection']['edges'][0]['node']>) => (
-          <ActionsDropdown
-            action={action}
-            handleAction={handleAction}
-            row={
-              {
-                ...row,
-                original: {
-                  ...row.original,
-                  totalShares: row.original.shares,
-                },
-              } as ActionsDropdownRow
-            }
-            excludeActions={[OperatorActionType.Deregister, OperatorActionType.UnlockFunds]}
-            nominatorMaxShares={BigInt(row.original.shares)}
-          />
-        ),
+        }: Cell<NominatorsConnectionQuery['nominatorsConnection']['edges'][0]['node']>) => {
+          const excludeActions = [OperatorActionType.Deregister, OperatorActionType.UnlockFunds]
+          if (
+            row.original.operator.status &&
+            JSON.parse(row.original.operator.status ?? '{}')?.deregistered
+          )
+            excludeActions.push(OperatorActionType.Nominating)
+          if (
+            row.original.operator.status &&
+            JSON.parse(row.original.operator.status ?? '{}')?.slashed === null
+          )
+            return <></>
+          return (
+            <ActionsDropdown
+              action={action}
+              handleAction={handleAction}
+              row={
+                {
+                  ...row,
+                  original: {
+                    ...row.original,
+                    totalShares: row.original.shares,
+                  },
+                } as ActionsDropdownRow
+              }
+              excludeActions={excludeActions}
+              nominatorMaxShares={BigInt(row.original.shares)}
+            />
+          )
+        },
       },
     ]
     return cols

explorer/src/components/Operator/NominatorsList.tsx

@@ -233,7 +233,18 @@ export const NominatorsList: FC = () => {
         header: 'Actions',
         enableSorting: false,
         cell: ({ row }) => {
-          if (row.original.account.id !== subspaceAccount) return <> </>
+          if (row.original.account.id !== subspaceAccount) return <></>
+          const excludeActions = [OperatorActionType.Deregister, OperatorActionType.UnlockFunds]
+          if (
+            row.original.operator.status &&
+            JSON.parse(row.original.operator.status ?? '{}')?.deregistered
+          )
+            excludeActions.push(OperatorActionType.Nominating)
+          if (
+            row.original.operator.status &&
+            JSON.parse(row.original.operator.status ?? '{}')?.slashed === null
+          )
+            return <></>
           return (
             <ActionsDropdown
               action={action}
@@ -247,7 +258,7 @@ export const NominatorsList: FC = () => {
                   },
                 } as ActionsDropdownRow
               }
-              excludeActions={[OperatorActionType.Deregister, OperatorActionType.UnlockFunds]}
+              excludeActions={excludeActions}
               nominatorMaxShares={BigInt(row.original.shares)}
             />
           )

explorer/src/components/Operator/Operator.tsx

@@ -3,7 +3,7 @@
 import { Spinner } from 'components/common/Spinner'
 import { NotFound } from 'components/layout/NotFound'
 import { Routes } from 'constants/routes'
-import { OperatorByIdQuery, OperatorByIdQueryVariables, Operator as TOperator } from 'gql/graphql'
+import type { OperatorByIdQuery, OperatorByIdQueryVariables } from 'gql/oldSquidTypes'
 import useMediaQuery from 'hooks/useMediaQuery'
 import { useSquidQuery } from 'hooks/useSquidQuery'
 import { useWindowFocus } from 'hooks/useWindowFocus'
@@ -39,7 +39,7 @@ export const Operator: FC = () => {
   } = useQueryStates()
 
   const operatorDetails = useMemo(
-    () => (hasValue(operator) ? operator.value.operatorById : []) as TOperator,
+    () => hasValue(operator) && operator.value.operatorById,
     [operator],
   )
 

explorer/src/components/Operator/OperatorDetailsCard.tsx

@@ -6,7 +6,7 @@ import { Chains } from 'constants/'
 import { INTERNAL_ROUTES, Routes } from 'constants/routes'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { Operator } from 'gql/graphql'
+import { OperatorByIdQuery } from 'gql/graphql'
 import useDomains from 'hooks/useDomains'
 import useMediaQuery from 'hooks/useMediaQuery'
 import Link from 'next/link'
@@ -18,14 +18,16 @@ import { AccountIcon } from '../common/AccountIcon'
 dayjs.extend(relativeTime)
 
 type Props = {
-  operator: Operator
+  operator: OperatorByIdQuery['operatorById']
   isDesktop?: boolean
 }
 
 export const OperatorDetailsCard: FC<Props> = ({ operator, isDesktop = false }) => {
   const { selectedChain } = useDomains()
   const isLargeLaptop = useMediaQuery('(min-width: 1440px)')
 
+  if (!operator) return null
+
   return (
     <div className='w-full'>
       <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>

explorer/src/components/Operator/OperatorManagement.tsx

@@ -353,18 +353,32 @@ export const OperatorManagement: FC = () => {
           row,
         }: Cell<
           OperatorsConnectionQuery['operatorsConnection']['edges'][0]['node'] | Operators
-        >) => (
-          <ActionsDropdown
-            action={action}
-            handleAction={handleAction}
-            row={row as ActionsDropdownRow}
-            excludeActions={
-              operatorReadyToUnlock(row.original.status, lastBlock)
-                ? [OperatorActionType.Deregister, OperatorActionType.UnlockNominator]
-                : [OperatorActionType.UnlockFunds, OperatorActionType.UnlockFunds]
-            }
-          />
-        ),
+        >) => {
+          const excludeActions = operatorReadyToUnlock(row.original.status, lastBlock)
+            ? [OperatorActionType.Deregister, OperatorActionType.UnlockNominator]
+            : [OperatorActionType.UnlockFunds, OperatorActionType.UnlockFunds]
+
+          if (
+            !useRpcData &&
+            row.original.status &&
+            JSON.parse(row.original.status ?? '{}')?.deregistered
+          )
+            excludeActions.push(OperatorActionType.Nominating)
+          if (
+            !useRpcData &&
+            row.original.status &&
+            JSON.parse(row.original.status ?? '{}')?.slashed === null
+          )
+            return <></>
+          return (
+            <ActionsDropdown
+              action={action}
+              handleAction={handleAction}
+              row={row as ActionsDropdownRow}
+              excludeActions={excludeActions}
+            />
+          )
+        },
       },
     ]
   }, [

explorer/src/components/Operator/OperatorNominatorTable.tsx

@@ -2,7 +2,7 @@ import { limitNumberDecimals, numberWithCommas } from '@/utils/number'
 import { shortString } from '@/utils/string'
 import { SortedTable } from 'components/common/SortedTable'
 import { INTERNAL_ROUTES, Routes } from 'constants/routes'
-import { Nominator, Operator } from 'gql/graphql'
+import { Nominator, OperatorByIdQuery } from 'gql/graphql'
 import useDomains from 'hooks/useDomains'
 import useMediaQuery from 'hooks/useMediaQuery'
 import Link from 'next/link'
@@ -11,15 +11,16 @@ import type { Cell } from 'types/table'
 import { AccountIcon } from '../common/AccountIcon'
 
 interface Props {
-  operator: Operator
+  operator: OperatorByIdQuery['operatorById']
 }
 
 export const OperatorNominatorTable: FC<Props> = ({ operator }) => {
   const { selectedChain } = useDomains()
   const isLargeLaptop = useMediaQuery('(min-width: 1440px)')
 
-  const columns = useMemo(
-    () => [
+  const columns = useMemo(() => {
+    if (!operator) return []
+    return [
       {
         accessorKey: 'account',
         header: 'Account Id',
@@ -87,20 +88,14 @@ export const OperatorNominatorTable: FC<Props> = ({ operator }) => {
         cell: ({ row }: Cell<Nominator>) =>
           operator.operatorOwner === row.original.account.id ? 'Yes' : 'No',
       },
-    ],
-    [
-      isLargeLaptop,
-      operator.currentTotalStake,
-      operator.operatorOwner,
-      operator.totalShares,
-      selectedChain.token.symbol,
-      selectedChain.urls.page,
-    ],
-  )
+    ]
+  }, [isLargeLaptop, operator, selectedChain.token.symbol, selectedChain.urls.page])
+
+  if (!operator) return null
 
   return (
     <SortedTable
-      data={operator.nominators}
+      data={operator.nominators as Nominator[]}
       columns={columns}
       showNavigation={false}
       pagination={{

explorer/src/components/Operator/OperatorsList.tsx

@@ -257,7 +257,13 @@ export const OperatorsList: FC = () => {
             !useRpcData &&
             !nominator &&
             row.original.status &&
-            (JSON.parse(row.original.status) as unknown as { deregistered: object }).deregistered
+            JSON.parse(row.original.status ?? '{}')?.deregistered
+          )
+            excludeActions.push(OperatorActionType.Nominating)
+          if (
+            !useRpcData &&
+            row.original.status &&
+            JSON.parse(row.original.status ?? '{}')?.slashed === null
           )
             return <></>
           return (