Don't rely on earliestUnappliedSlash availability (#8209)

* Don't rely on earliestUnappliedSlash availability

* Update packages/react-hooks/src/useAvailableSlashes.ts

* Update packages/react-hooks/src/useAvailableSlashes.ts

* Format with correct offsets

* text

packages/page-staking/src/Slashes/Era.tsx

@@ -48,13 +48,21 @@ function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React
     };
   });
 
-  const headerRef = useRef<[string?, string?, number?][]>([
-    [t('era {{era}}/unapplied', { replace: { era: slash.era.toString() } }), 'start', 3],
+  const headerRef = useRef<([string?, string?, number?] | false)[]>([
+    [t('era {{era}}/unapplied', {
+      replace: {
+        era: api.query.staking.earliestUnappliedSlash || !api.consts.staking.slashDeferDuration
+          ? slash.era.toString()
+          : slash.era.sub(api.consts.staking.slashDeferDuration).toString()
+      }
+    }), 'start', 3],
     [t('reporters'), 'address'],
     [t('own')],
     [t('other')],
     [t('total')],
     [t('payout')],
+    !api.query.staking.earliestUnappliedSlash && !!api.consts.staking.slashDeferDuration &&
+      [t('apply')],
     []
   ]);
 

packages/page-staking/src/Slashes/Row.tsx

@@ -6,6 +6,7 @@ import type { Slash } from './types';
 import React, { useCallback } from 'react';
 
 import { AddressMini, AddressSmall, Badge, Checkbox, ExpanderScroll } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
@@ -18,8 +19,9 @@ interface Props {
   slash: Slash;
 }
 
-function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, own, payout, reporters, validator }, total, totalOther } }: Props): React.ReactElement<Props> {
+function Row ({ index, isSelected, onSelect, slash: { era, isMine, slash: { others, own, payout, reporters, validator }, total, totalOther } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
 
   const _onSelect = useCallback(
     () => onSelect && onSelect(index),
@@ -79,6 +81,11 @@ function Row ({ index, isSelected, onSelect, slash: { isMine, slash: { others, o
       <td className='number together'>
         <FormatBalance value={payout} />
       </td>
+      {!api.query.staking.earliestUnappliedSlash && !!api.consts.staking.slashDeferDuration && (
+        <td className='number together'>
+          {formatNumber(era)}
+        </td>
+      )}
       <td>
         <Checkbox
           isDisabled={!onSelect}

packages/page-staking/src/Slashes/index.tsx

@@ -98,11 +98,17 @@ function Slashes ({ ownStashes = [], slashes }: Props): React.ReactElement<Props
   );
 
   const eraOpts = useMemo(
-    () => rows.map(({ era }) => ({
-      text: t<string>('era {{era}}', { replace: { era: formatNumber(era) } }),
-      value: era.toString()
-    })),
-    [rows, t]
+    () => rows
+      .map(({ era }) =>
+        api.query.staking.earliestUnappliedSlash || !api.consts.staking.slashDeferDuration
+          ? era
+          : era.sub(api.consts.staking.slashDeferDuration)
+      )
+      .map((era) => ({
+        text: t<string>('era {{era}}', { replace: { era: formatNumber(era) } }),
+        value: era.toString()
+      })),
+    [api, rows, t]
   );
 
   const councilId = useMemo(

packages/react-hooks/src/useAvailableSlashes.ts

@@ -26,14 +26,24 @@ function useAvailableSlashesImpl (): [BN, PalletStakingUnappliedSlash[]][] {
 
   useEffect((): Unsub => {
     let unsub: Unsub | undefined;
+    const [from, isEarliest] = api.query.staking?.earliestUnappliedSlash
+      ? [earliestSlash && earliestSlash.unwrapOr(null), true]
+      : indexes
+        ? [indexes.activeEra, false]
+        : [null, false];
 
-    if (mountedRef.current && indexes && earliestSlash && earliestSlash.isSome) {
-      const from = earliestSlash.unwrap();
+    if (mountedRef.current && indexes && from) {
       const range: BN[] = [];
+      const end = isEarliest
+        // any <= activeEra (we include activeEra since slashes are immediately reflected)
+        // NOTE: the era refers to where the slashes actually ocurred
+        ? indexes.activeEra
+        // we don't have access to earliestUnappliedSlash, use duration
+        // NOTE: the era refers to where these are to be applied
+        : indexes.activeEra.add(api.consts.staking.slashDeferDuration);
       let start = new BN(from);
 
-      // any <= activeEra (we include activeEra since slashes are immediately reflected)
-      while (start.lte(indexes.activeEra)) {
+      while (start.lte(end)) {
         range.push(start);
         start = start.add(BN_ONE);
       }