Adjust non-preimage display (#4359)

packages/react-components/src/ActionItem.tsx

@@ -1,49 +0,0 @@
-// Copyright 2017-2021 @polkadot/react-components authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { Proposal } from '@polkadot/types/interfaces';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-
-import Card from './Card';
-import ProposedAction, { styles as proposedActionStyles } from './ProposedAction';
-import { styles as rowStyles } from './Row';
-
-interface Props {
-  className?: string;
-  children?: React.ReactNode;
-  accessory?: React.ReactNode;
-  proposal?: Proposal | null;
-  idNumber: BN | number | string;
-  expandNested?: boolean;
-}
-
-export const styles = `
-  ${rowStyles}
-  ${proposedActionStyles}
-`;
-
-function ActionItem ({ accessory, children, className = '', expandNested, idNumber, proposal }: Props): React.ReactElement<Props> {
-  return (
-    <Card className={className}>
-      <div className='ui--Row'>
-        <div className='ui--Row-base'>
-          <div className='ui--Row-details'>
-            <ProposedAction
-              expandNested={expandNested}
-              idNumber={idNumber}
-              proposal={proposal}
-              withLinks={expandNested}
-            />
-          </div>
-          {accessory}
-        </div>
-        {children}
-      </div>
-    </Card>
-  );
-}
-
-export default React.memo(styled(ActionItem)`${styles}`);

packages/react-components/src/ProposedAction.tsx

@@ -11,21 +11,58 @@ import { formatNumber, isString } from '@polkadot/util';
 
 import Call from './Call';
 import Expander from './Expander';
-import Inset, { InsetProps } from './Inset';
+import { useTranslation } from './translate';
 import TreasuryProposal from './TreasuryProposal';
 import { isTreasuryProposalVote } from './util';
 
 interface Props {
   className?: string;
-  asInset?: boolean;
-  insetProps?: Partial<InsetProps>;
   proposal?: Proposal | null;
   idNumber: BN | number | string;
   withLinks?: boolean;
   expandNested?: boolean;
 }
 
-export const styles = `
+function ProposedAction ({ className = '', expandNested, idNumber, proposal, withLinks }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const stringId = isString(idNumber)
+    ? idNumber
+    : formatNumber(idNumber);
+
+  if (!proposal) {
+    return (
+      <h3>#{stringId}&nbsp;{t<string>('No execution details available for this proposal')}</h3>
+    );
+  }
+
+  const { meta, method, section } = proposal.registry.findMetaCall(proposal.callIndex);
+
+  const header = `#${stringId}: ${section}.${method}`;
+
+  return (
+    <div className={`ui--ProposedAction ${className}`}>
+      <h3>{header}</h3>
+      <Expander summaryMeta={meta}>
+        {(isTreasuryProposalVote(proposal) && expandNested)
+          ? (
+            <TreasuryProposal
+              asInset={withLinks}
+              insetProps={{
+                withBottomMargin: true,
+                withTopMargin: true,
+                ...(withLinks ? { href: '/treasury' } : {})
+              }}
+              proposalId={proposal.args[0].toString()}
+            />
+          )
+          : <Call value={proposal} />
+        }
+      </Expander>
+    </div>
+  );
+}
+
+export default React.memo(styled(ProposedAction)`
   margin-left: 2rem;
 
   .ui--ProposedAction-extrinsic {
@@ -37,64 +74,4 @@ export const styles = `
   .ui--ProposedAction-header {
     margin-bottom: 1rem;
   }
-`;
-
-function ProposedAction ({ asInset, className = '', expandNested, idNumber, insetProps, proposal, withLinks }: Props): React.ReactElement<Props> {
-  const stringId = isString(idNumber)
-    ? idNumber
-    : formatNumber(idNumber);
-
-  if (!proposal) {
-    return (
-      <h3>#{stringId}</h3>
-    );
-  }
-
-  const { meta, method, section } = proposal.registry.findMetaCall(proposal.callIndex);
-
-  const header = `#${stringId}: ${section}.${method}`;
-  const documentation = meta?.documentation
-    ? (
-      <summary>{meta.documentation.join(' ')}</summary>
-    )
-    : null;
-  const params = (isTreasuryProposalVote(proposal) && expandNested)
-    ? (
-      <TreasuryProposal
-        asInset={withLinks}
-        insetProps={{
-          withBottomMargin: true,
-          withTopMargin: true,
-          ...(withLinks ? { href: '/treasury' } : {})
-        }}
-        proposalId={proposal.args[0].toString()}
-      />
-    )
-    : <Call value={proposal} />;
-
-  if (asInset) {
-    return (
-      <Inset
-        header={header}
-        isCollapsible
-        {...insetProps}
-      >
-        <>
-          {documentation}
-          {params}
-        </>
-      </Inset>
-    );
-  }
-
-  return (
-    <div className={`ui--ProposedAction ${className}`}>
-      <h3>{header}</h3>
-      <Expander summaryMeta={meta}>
-        {params}
-      </Expander>
-    </div>
-  );
-}
-
-export default React.memo(styled(ProposedAction)`${styles}`);
+`);

packages/react-components/src/index.tsx

@@ -5,7 +5,6 @@ export * from '@polkadot/react-qr';
 
 export { default as AccountIndex } from './AccountIndex';
 export { default as AccountName } from './AccountName';
-export { default as ActionItem } from './ActionItem';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';
 export { default as AddressRow } from './AddressRow';