fix: updating the democracy proposal modal (#10296)

* fix: updating the democracy proposal modal

* style: fixing linting issue

packages/page-democracy/src/Overview/Propose.tsx

@@ -4,12 +4,12 @@
 import type { BN } from '@polkadot/util';
 import type { HexString } from '@polkadot/util/types';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Input, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, usePreimage } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
-import { isFunction, isHex } from '@polkadot/util';
+import { BN_ZERO, isFunction, isHex } from '@polkadot/util';
 
 import { useTranslation } from '../translate.js';
 
@@ -19,8 +19,14 @@ interface Props {
 }
 
 interface HashState {
-  hash?: HexString;
-  isHashValid: boolean;
+  imageHash?: HexString | null;
+  isImageHashValid: boolean;
+}
+
+interface ImageState {
+  imageLen: BN;
+  imageLenDefault?: BN;
+  isImageLenValid: boolean;
 }
 
 function Propose ({ className = '', onClose }: Props): React.ReactElement<Props> {
@@ -28,13 +34,36 @@ function Propose ({ className = '', onClose }: Props): React.ReactElement<Props>
   const { api } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [balance, setBalance] = useState<BN | undefined>();
-  const [{ hash, isHashValid }, setHash] = useState<HashState>({ isHashValid: false });
+  const [{ imageHash, isImageHashValid }, setImageHash] = useState<HashState>({ imageHash: null, isImageHashValid: false });
+  const [{ imageLen, imageLenDefault, isImageLenValid }, setImageLen] = useState<ImageState>({ imageLen: BN_ZERO, isImageLenValid: false });
   const publicProps = useCall<unknown[]>(api.query.democracy.publicProps);
-  const preimage = usePreimage(hash);
+  const preimage = usePreimage(imageHash);
 
-  const _onChangeHash = useCallback(
-    (hash?: string): void =>
-      setHash({ hash: hash as HexString, isHashValid: isHex(hash, 256) }),
+  useEffect((): void => {
+    preimage?.proposalLength && setImageLen((prev) => ({
+      imageLen: prev.imageLen,
+      imageLenDefault: preimage.proposalLength,
+      isImageLenValid: prev.isImageLenValid
+    }));
+  }, [preimage]);
+
+  const _onChangeImageHash = useCallback(
+    (h?: string) =>
+      setImageHash({
+        imageHash: h as HexString,
+        isImageHashValid: isHex(h, 256)
+      }),
+    []
+  );
+
+  const _onChangeImageLen = useCallback(
+    (value?: BN): void => {
+      value && setImageLen((prev) => ({
+        imageLen: value,
+        imageLenDefault: prev.imageLenDefault,
+        isImageLenValid: !value.isZero()
+      }));
+    },
     []
   );
 
@@ -61,13 +90,29 @@ function Propose ({ className = '', onClose }: Props): React.ReactElement<Props>
             type='account'
           />
         </Modal.Columns>
-        <Modal.Columns hint={t('The hash of the preimage for the proposal as previously submitted or intended.')}>
+        <Modal.Columns
+          hint={
+            <>
+              <p>{t('The hash of the preimage for the proposal as previously submitted or intended.')}</p>
+              <p>{t('The length value will be auto-populated from the on-chain value if it is found.')}</p>
+            </>
+          }
+        >
           <Input
             autoFocus
-            isError={!isHashValid}
+            isError={!isImageHashValid}
             label={t('preimage hash')}
-            onChange={_onChangeHash}
-            value={hash}
+            onChange={_onChangeImageHash}
+            value={imageHash || ''}
+          />
+          <InputNumber
+            defaultValue={imageLenDefault}
+            isDisabled={!!preimage?.proposalLength && !preimage?.proposalLength.isZero() && isImageHashValid && isImageLenValid}
+            isError={!isImageLenValid}
+            key='inputLength'
+            label={t('preimage length')}
+            onChange={_onChangeImageLen}
+            value={imageLen}
           />
         </Modal.Columns>
         <Modal.Columns hint={t('The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.')}>
@@ -88,15 +133,15 @@ function Propose ({ className = '', onClose }: Props): React.ReactElement<Props>
         <TxButton
           accountId={accountId}
           icon='plus'
-          isDisabled={!balance || !hasMinLocked || !isHashValid || !accountId || !publicProps || (isFunction(api.tx.preimage?.notePreimage) && !isFunction(api.tx.democracy?.notePreimage) && !preimage)}
+          isDisabled={!balance || !hasMinLocked || !isImageHashValid || !accountId || !publicProps || (isFunction(api.tx.preimage?.notePreimage) && !isFunction(api.tx.democracy?.notePreimage) && !preimage)}
           label={t('Submit proposal')}
           onStart={onClose}
           params={
             api.tx.democracy.propose.meta.args.length === 3
-              ? [hash, balance, publicProps?.length]
+              ? [imageHash, balance, publicProps?.length]
               : isFunction(api.tx.preimage?.notePreimage) && !isFunction(api.tx.democracy?.notePreimage)
-                ? [preimage && { Lookup: { hash: preimage.proposalHash, len: preimage.proposalLength } }, balance]
-                : [hash, balance]
+                ? [preimage && { Lookup: { hash: preimage.proposalHash, len: imageLen } }, balance]
+                : [imageHash, balance]
           }
           tx={api.tx.democracy.propose}
         />