Fix length of gov 2 submissions (#8333)

* Fix length of gov 2 submissions

* No ProposedAction

packages/page-preimages/src/types.ts

@@ -4,10 +4,14 @@
 import type { Bytes } from '@polkadot/types';
 import type { Call } from '@polkadot/types/interfaces';
 import type { PalletPreimageRequestStatus } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
 
 export interface Preimage {
   count: number;
   bytes: Bytes | null;
   proposal: Call | null;
+  proposalHash: HexString;
+  proposalLength: BN;
   status: PalletPreimageRequestStatus | null;
 }

packages/page-preimages/src/usePreimage.ts

@@ -5,15 +5,16 @@ import type { ApiPromise } from '@polkadot/api';
 import type { Bytes, Option } from '@polkadot/types';
 import type { Call, Hash } from '@polkadot/types/interfaces';
 import type { FrameSupportPreimagesBounded, PalletPreimageRequestStatus } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
 import type { HexString } from '@polkadot/util/types';
 import type { Preimage } from './types';
 
 import { useMemo } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
-import { isBn, isString } from '@polkadot/util';
+import { BN_ZERO, isBn, isString } from '@polkadot/util';
 
-function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestStatus>, optBytes: Option<Bytes>): Preimage {
+function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestStatus>, optBytes: Option<Bytes>, [proposalHash, proposalLength]: [HexString, BN]): Preimage {
   const status = optStatus.unwrapOr(null);
   const bytes = optBytes.unwrapOr(null);
   let count = 0;
@@ -41,20 +42,23 @@ function createResult (api: ApiPromise, optStatus: Option<PalletPreimageRequestS
     bytes,
     count,
     proposal,
+    proposalHash,
+    proposalLength,
     status
   };
 }
 
-function getParams (hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): unknown[] {
+function getParams (hash: Hash | HexString, optStatus: Option<PalletPreimageRequestStatus>): [HexString, BN] {
   const status = optStatus.unwrapOr(null);
+  const hexHash = isString(hash)
+    ? hash
+    : hash.toHex();
 
-  return [
-    status
-      ? status.isRequested
-        ? [hash, status.asRequested.len.unwrapOr(0)]
-        : [hash, status.asUnrequested.len]
-      : [hash, 0]
-  ];
+  return status
+    ? status.isRequested
+      ? [hexHash, status.asRequested.len.unwrapOr(BN_ZERO)]
+      : [hexHash, status.asUnrequested.len]
+    : [hexHash, BN_ZERO];
 }
 
 export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): HexString {
@@ -73,26 +77,28 @@ export function getPreimageHash (hashOrBounded: Hash | HexString | FrameSupportP
         : hashOrBounded.toHex();
 }
 
-function usePreimageImpl (hashOrBounded: Hash | HexString | FrameSupportPreimagesBounded): Preimage | undefined {
+function usePreimageImpl (hashOrBounded?: Hash | HexString | FrameSupportPreimagesBounded | null): Preimage | undefined {
   const { api } = useApi();
 
   const hash = useMemo(
-    () => getPreimageHash(hashOrBounded),
+    () => hashOrBounded && getPreimageHash(hashOrBounded),
     [hashOrBounded]
   );
 
-  const optStatus = useCall<Option<PalletPreimageRequestStatus>>(api.query.preimage.statusFor, [hash]);
+  const optStatus = useCall<Option<PalletPreimageRequestStatus>>(hash && api.query.preimage.statusFor, [hash]);
 
   const params = useMemo(
-    () => optStatus && getParams(hash, optStatus),
+    () => hash && optStatus && getParams(hash, optStatus),
     [hash, optStatus]
   );
 
-  const optBytes = useCall<Option<Bytes>>(params && api.query.preimage.preimageFor, params);
+  const optBytes = useCall<Option<Bytes>>(params && api.query.preimage.preimageFor, [params]);
 
   return useMemo(
-    () => optBytes && optStatus && createResult(api, optStatus, optBytes),
-    [api, optBytes, optStatus]
+    () => optBytes && optStatus && params
+      ? createResult(api, optStatus, optBytes, params)
+      : undefined,
+    [api, optBytes, optStatus, params]
   );
 }
 

packages/page-referenda/src/Referenda/Submit.tsx

@@ -5,11 +5,13 @@ import type { ApiPromise } from '@polkadot/api';
 import type { RawParam } from '@polkadot/react-params/types';
 import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
 import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
 import type { PalletReferenda } from '../types';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
+import usePreimage from '@polkadot/app-preimages/usePreimage';
 import { getGovernanceTracks } from '@polkadot/apps-config';
 import { Button, Dropdown, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useBestNumber, useToggle } from '@polkadot/react-hooks';
@@ -30,7 +32,7 @@ interface Props {
 }
 
 interface HashState {
-  hash?: string;
+  hash?: HexString | null;
   isHashValid: boolean;
 }
 
@@ -94,7 +96,8 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
   const [origin, setOrigin] = useState<RawParam['value'] | null>(null);
   const [atAfter, setAtAfter] = useState<RawParam['value'] | null>(null);
   const [defaultAtAfter, setDefaultAtAfter] = useState<DefaultAtAfter | null>(null);
-  const [{ hash, isHashValid }, setHash] = useState<HashState>({ hash: '', isHashValid: false });
+  const [{ hash, isHashValid }, setHash] = useState<HashState>({ hash: null, isHashValid: false });
+  const preimage = usePreimage(hash);
 
   useEffect((): void => {
     tracks && trackId !== undefined && bestNumber && setDefaultAtAfter((prev) =>
@@ -152,7 +155,7 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
 
   const _onChangeHash = useCallback(
     (hash?: string) =>
-      setHash({ hash, isHashValid: isHex(hash, 256) }),
+      setHash({ hash: hash as HexString, isHashValid: isHex(hash, 256) }),
     []
   );
 
@@ -230,10 +233,10 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
             <TxButton
               accountId={accountId}
               icon='plus'
-              isDisabled={!(originParam || origin) || !atAfter || !isHashValid || !accountId || isInvalidAt}
+              isDisabled={!(originParam || origin) || !atAfter || !isHashValid || !accountId || isInvalidAt || !preimage?.proposalHash}
               label={t<string>('Submit proposal')}
               onStart={toggleSubmit}
-              params={[originParam || origin, { Lookup: hash }, atAfter]}
+              params={[originParam || origin, { Lookup: { hash: preimage?.proposalHash, len: preimage?.proposalLength } }, atAfter]}
               tx={api.tx[palletReferenda as 'referenda'].submit}
             />
           </Modal.Actions>

packages/react-components/src/ProposedAction.tsx

@@ -7,7 +7,7 @@ import type { BN } from '@polkadot/util';
 import React from 'react';
 import styled from 'styled-components';
 
-import { formatNumber, isString } from '@polkadot/util';
+import { formatNumber, isString, isUndefined } from '@polkadot/util';
 
 import CallDisplay from './Call';
 import Expander from './Expander';
@@ -18,26 +18,25 @@ import { isTreasuryProposalVote } from './util';
 interface Props {
   className?: string;
   proposal?: Call | null;
-  idNumber: BN | number | string;
+  idNumber?: BN | number | string;
   withLinks?: boolean;
   expandNested?: boolean;
 }
 
 function ProposedAction ({ className = '', expandNested, idNumber, proposal, withLinks }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const stringId = isString(idNumber)
+  const stringId = isString(idNumber) || isUndefined(idNumber)
     ? idNumber
     : formatNumber(idNumber);
 
   if (!proposal) {
     return (
-      <h3>#{stringId}&nbsp;{t<string>('No execution details available for this proposal')}</h3>
+      <h3>{stringId ? `#${stringId}: ` : ''}{t<string>('No execution details available for this proposal')}</h3>
     );
   }
 
   const { meta, method, section } = proposal.registry.findMetaCall(proposal.callIndex);
-
-  const header = `#${stringId}: ${section}.${method}`;
+  const header = `${stringId ? `#${stringId}: ` : ''}${section}.${method}`;
 
   return (
     <div className={`ui--ProposedAction ${className}`}>