Fix pay toggle era filtering (#3291)

packages/page-staking/src/Payouts/PayToggle.tsx

@@ -13,12 +13,34 @@ interface Props {
   selected: number;
 }
 
-function PayToggle ({ className = '', onChange, options, selected }: Props): React.ReactElement<Props> | null {
+interface ToggleProps {
+  index: number;
+  isSelected: boolean;
+  onChange: (index: number) => void;
+  text: string;
+}
+
+function ToggleIndex ({ index, isSelected, onChange, text }: ToggleProps): React.ReactElement<ToggleProps> {
   const _onClick = useCallback(
-    (index: number) => () => onChange(index),
-    [onChange]
+    () => onChange(index),
+    [index, onChange]
   );
 
+  return (
+    <Button
+      icon={isSelected ? 'check' : 'circle'}
+      isBasic
+      isSelected={isSelected}
+      key={text}
+      label={text}
+      onClick={_onClick}
+    />
+  );
+}
+
+const ToggleIndexMemo = React.memo(ToggleIndex);
+
+function PayToggle ({ className = '', onChange, options, selected }: Props): React.ReactElement<Props> | null {
   if (!options.length || !options[0].value) {
     return null;
   }
@@ -26,13 +48,12 @@ function PayToggle ({ className = '', onChange, options, selected }: Props): Rea
   return (
     <div className={`ui--ToggleButton ${className}`}>
       {options.map(({ text }, index): React.ReactNode => (
-        <Button
-          icon={selected === index ? 'check' : 'circle'}
-          isBasic
+        <ToggleIndexMemo
+          index={index}
           isSelected={selected === index}
-          key={text}
-          label={text}
-          onClick={_onClick(index)}
+          key={index}
+          onChange={onChange}
+          text={text}
         />
       ))}
     </div>

packages/react-hooks/src/useOwnEraRewards.ts

@@ -45,17 +45,17 @@ export default function useOwnEraRewards (maxEras?: number): OwnRewards {
     setState({ isLoadingRewards: true, rewardCount: 0 });
   }, [maxEras]);
 
+  useEffect((): void => {
+    allEras && maxEras && setFilteredEras(
+      allEras.slice(-1 * maxEras)
+    );
+  }, [allEras, maxEras]);
+
   useEffect((): void => {
     mountedRef.current && available && setState(
       getRewards(available)
     );
   }, [available, mountedRef]);
 
-  useEffect((): void => {
-    allEras && maxEras && setFilteredEras(
-      allEras.reverse().filter((_, index) => index < maxEras).reverse()
-    );
-  }, [allEras, maxEras]);
-
   return state;
 }