Adjust slash creation for staking pages (#5311)

packages/page-council/src/Motions/Slashing.tsx

@@ -54,7 +54,7 @@ function Slashing ({ className = '', isMember, members }: Props): React.ReactEle
   useEffect((): void => {
     const actioned = selectedEra && slashes && slashes.find(([era]) => era.eqn(selectedEra));
     const proposal = actioned
-      ? api.tx.staking.cancelDeferredSlash(actioned[0], actioned[1].map((_, index): number => index))
+      ? api.tx.staking.cancelDeferredSlash(actioned[0], actioned[1].map((_, index) => index))
       : null;
 
     setProposal({

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

@@ -21,10 +21,15 @@ interface Props {
   slash: SlashEra;
 }
 
+interface Proposal {
+  length: number;
+  proposal: SubmittableExtrinsic<'promise'>
+}
+
 interface Selected {
   selected: number[];
-  txAll: SubmittableExtrinsic<'promise'> | null;
-  txSome: SubmittableExtrinsic<'promise'> | null;
+  txAll: Proposal | null;
+  txSome: Proposal | null;
 }
 
 function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React.ReactElement<Props> | null {
@@ -33,7 +38,13 @@ function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React
   const [{ selected, txAll, txSome }, setSelected] = useState<Selected>((): Selected => {
     const proposal = api.tx.staking.cancelDeferredSlash(slash.era, slash.slashes.map((_, index) => index));
 
-    return { selected: [], txAll: api.tx.council?.propose(councilThreshold, proposal, proposal.encodedLength) || null, txSome: null };
+    return {
+      selected: [],
+      txAll: isFunction(api.tx.council?.propose)
+        ? { length: proposal.encodedLength, proposal }
+        : null,
+      txSome: null
+    };
   });
 
   const headerRef = useRef<[string?, string?, number?][]>([
@@ -54,11 +65,16 @@ function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React
       const proposal = selected.length
         ? api.tx.staking.cancelDeferredSlash(slash.era, selected)
         : null;
-      const txSome = proposal && api.tx.council?.propose(councilThreshold, proposal, proposal.encodedLength);
 
-      return { selected, txAll: state.txAll, txSome: txSome || null };
+      return {
+        selected,
+        txAll: state.txAll,
+        txSome: proposal && isFunction(api.tx.council?.propose)
+          ? { length: proposal.encodedLength, proposal }
+          : null
+      };
     }),
-    [api, councilThreshold, slash]
+    [api, slash]
   );
 
   return (
@@ -70,17 +86,27 @@ function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React
           <>
             <TxButton
               accountId={councilId}
-              extrinsic={txSome}
               isDisabled={!txSome}
               isToplevel
               label={t('Cancel selected')}
+              params={txSome && (
+                api.tx.council.propose.meta.args.length === 3
+                  ? [councilThreshold, txSome.proposal, txSome.length]
+                  : [councilThreshold, txSome.proposal]
+              )}
+              tx={api.tx.council.propose}
             />
             <TxButton
               accountId={councilId}
-              extrinsic={txAll}
               isDisabled={!txAll}
               isToplevel
               label={t('Cancel all')}
+              params={txAll && (
+                api.tx.council.propose.meta.args.length === 3
+                  ? [councilThreshold, txAll.proposal, txAll.length]
+                  : [councilThreshold, txAll.proposal]
+              )}
+              tx={api.tx.council.propose}
             />
           </>
         )}

packages/react-components/src/types.ts

@@ -42,7 +42,7 @@ export interface TxButtonProps {
   onStart?: () => void;
   onSuccess?: TxCallback;
   onUpdate?: TxCallback;
-  params?: any[] | (() => any[]);
+  params?: any[] | (() => any[]) | null;
   tooltip?: string;
   tx?: ((...args: any[]) => SubmittableExtrinsic<'promise'>) | null;
   withoutLink?: boolean;