Allow sudo.sudoUncheckedWeight submission (#2724)

packages/page-sudo/src/Sudo.tsx

@@ -5,16 +5,22 @@
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { ComponentProps as Props } from './types';
 
+import BN from 'bn.js';
 import React, { useCallback, useState } from 'react';
-import { Button, Icon, Extrinsic, TxButton } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
+import styled from 'styled-components';
+import { Button, Icon, Extrinsic, Toggle, TxButton, InputNumber } from '@polkadot/react-components';
+import { useApi, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from './translate';
 
-function Propose ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
+const ZERO = new BN(0);
+
+function Propose ({ className, isMine, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { apiDefaultTxSudo } = useApi();
+  const { api, apiDefaultTxSudo } = useApi();
+  const [withWeight, toggleWithWeight] = useToggle();
   const [method, setMethod] = useState<SubmittableExtrinsic<'promise'> | null>(null);
+  const [weight, setWeight] = useState<BN>(ZERO);
 
   const _onChangeExtrinsic = useCallback(
     (method: SubmittableExtrinsic<'promise'> | null = null) =>
@@ -22,23 +28,58 @@ function Propose ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
     []
   );
 
+  const _onChangeWeight = useCallback(
+    (weight: BN = ZERO) => setWeight(weight),
+    []
+  );
+
   return isMine
     ? (
-      <section>
+      <section className={className}>
         <Extrinsic
           defaultValue={apiDefaultTxSudo}
           label={t('submit the following change')}
           onChange={_onChangeExtrinsic}
         />
         <br />
+        {withWeight && (
+          <InputNumber
+            help={t('The unchecked weight as specified for the sudoUncheckedWeight call.')}
+            isError={weight.eq(ZERO)}
+            isZeroable={false}
+            label={t('unchecked weight for this call')}
+            onChange={_onChangeWeight}
+            value={weight}
+          />
+        )}
+        {api.tx.sudo.sudoUncheckedWeight && (
+          <Toggle
+            className='sudoToggle'
+            label={
+              withWeight
+                ? t('sudo with unchecked weight parameter')
+                : t('sudo without unchecked weight parameter')
+            }
+            onChange={toggleWithWeight}
+            value={withWeight}
+          />
+        )}
         <Button.Group>
           <TxButton
             accountId={sudoKey}
             icon='sign-in'
-            isDisabled={!method}
+            isDisabled={!method || (withWeight ? weight.eq(ZERO) : false)}
             label={t('Submit Sudo')}
-            params={[method]}
-            tx='sudo.sudo'
+            params={
+              withWeight
+                ? [method, weight]
+                : [method]
+            }
+            tx={
+              withWeight
+                ? 'sudo.sudoUncheckedWeight'
+                : 'sudo.sudo'
+            }
           />
         </Button.Group>
       </section>
@@ -53,4 +94,9 @@ function Propose ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
     );
 }
 
-export default React.memo(Propose);
+export default React.memo(styled(Propose)`
+  .sudoToggle {
+    width: 100%;
+    text-align: right;
+  }
+`);

packages/page-sudo/src/types.ts

@@ -4,6 +4,7 @@
 
 export interface ComponentProps {
   allAccounts: string[];
+  className?: string;
   isMine: boolean;
   sudoKey?: string;
 }