Align call expander (#8593)

* Extend confirmation referendum graph display * Adjust * ProposedAction with expander * Expander with left arrow * Adjust header * Additional CallExpander alignment * isHeader * Adjust expander with meta short summaries * Adjust
2022-12-23 11:43:58 +02:00 · 2022-12-23 11:43:58 +02:00 · 3c00ec8aa4
commit 3c00ec8aa4
parent a48f602a72
5 changed files with 53 additions and 89 deletions
--- a/packages/react-components/src/CallExpander.tsx
+++ b/packages/react-components/src/CallExpander.tsx
@ -5,7 +5,6 @@ import type { Call, Extrinsic } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';

 import React, { useMemo } from 'react';
-import styled from 'styled-components';

 import CallDisplay from './Call';
 import Expander from './Expander';
@ -18,6 +17,7 @@ interface Props {
  labelHash?: React.ReactNode;
  labelSignature?: React.ReactNode;
  mortality?: string;
+  onError?: () => void;
  stringId?: string;
  tip?: BN;
  value?: Call | Extrinsic | null;
@ -26,7 +26,7 @@ interface Props {
  withSignature?: boolean;
 }

-function CallExpander ({ children, className = '', isHeader, labelHash, labelSignature, mortality, stringId, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> | null {
+function CallExpander ({ children, className = '', isHeader, labelHash, labelSignature, mortality, onError, stringId, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> | null {
  const call = useMemo(
    () => value && value.callIndex
      ? value.registry.findMetaCall(value.callIndex)
@ -44,11 +44,10 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig
  return (
    <div className={`ui--CallExpander ${className}`}>
      <Expander
+        isHeader={isHeader}
        isLeft
        summaryHead={
-          isHeader
-            ? <h1>{stringId && `#${stringId}: `}{callName}</h1>
-            : <div>{stringId && `#${stringId}: `}{callName}</div>
+          <>{stringId && `#${stringId}: `}{callName}</>
        }
        summaryMeta={meta}
      >
@ -57,6 +56,7 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig
          labelHash={labelHash}
          labelSignature={labelSignature}
          mortality={mortality}
+          onError={onError}
          tip={tip}
          value={value}
          withBorder={withBorder}
@ -69,11 +69,4 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig
  );
 }

-export default React.memo(styled(CallExpander)`
-  .ui--Expander-summary-header {
-    h1 {
-      font-size: 1.25rem;
-      text-transform: none;
-    }
-  }
-`);
+export default React.memo(CallExpander);
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@ -22,6 +22,7 @@ export interface Props {
  help?: string;
  helpIcon?: IconName;
  isOpen?: boolean;
+  isHeader?: boolean;
  isLeft?: boolean;
  isPadded?: boolean;
  onClick?: (isOpen: boolean) => void;
@ -44,7 +45,7 @@ function splitParts (value: string): string[] {
  return ['[', ']'].reduce((result: string[], sep) => splitSingle(result, sep), [value]);
 }

-function formatMeta (meta?: Meta): React.ReactNode | null {
+function formatMeta (meta?: Meta): [React.ReactNode, React.ReactNode] | null {
  if (!meta || !meta.docs.length) {
    return null;
  }
@ -58,10 +59,13 @@ function formatMeta (meta?: Meta): React.ReactNode | null {
  ).join(' ').replace(/#(<weight>| <weight>).*<\/weight>/, '');
  const parts = splitParts(combined.replace(/\\/g, '').replace(/`/g, ''));

-  return <>{parts.map((part, index) => index % 2 ? <em key={index}>[{part}]</em> : <span key={index}>{part}</span>)}&nbsp;</>;
+  return [
+    parts[0].split(/[.(]/)[0],
+    <>{parts.map((part, index) => index % 2 ? <em key={index}>[{part}]</em> : <span key={index}>{part}</span>)}&nbsp;</>
+  ];
 }

-function Expander ({ children, className = '', help, helpIcon, isLeft, isOpen, isPadded, onClick, renderChildren, summary, summaryHead, summaryMeta, summarySub, withBreaks, withHidden }: Props): React.ReactElement<Props> {
+function Expander ({ children, className = '', help, helpIcon, isHeader, isLeft, isOpen, isPadded, onClick, renderChildren, summary, summaryHead, summaryMeta, summarySub, withBreaks, withHidden }: Props): React.ReactElement<Props> {
  const [isExpanded, toggleExpanded] = useToggle(isOpen, onClick);

  const demandChildren = useMemo(
@ -69,8 +73,8 @@ function Expander ({ children, className = '', help, helpIcon, isLeft, isOpen, i
    [isExpanded, renderChildren]
  );

-  const headerSub = useMemo(
-    () => formatMeta(summaryMeta) || summarySub,
+  const [headerSubMini, headerSub] = useMemo(
+    () => formatMeta(summaryMeta) || [summarySub, summarySub],
    [summaryMeta, summarySub]
  );

@ -98,23 +102,25 @@ function Expander ({ children, className = '', help, helpIcon, isLeft, isOpen, i
  );

  return (
-    <div className={`ui--Expander${isExpanded ? ' isExpanded' : ''}${isPadded ? ' isPadded' : ''}${hasContent ? ' hasContent' : ''}${withBreaks ? ' withBreaks' : ''} ${className}`}>
+    <div className={`ui--Expander${isExpanded ? ' isExpanded' : ''}${isHeader ? ' isHeader' : ''}${isPadded ? ' isPadded' : ''}${hasContent ? ' hasContent' : ''}${withBreaks ? ' withBreaks' : ''} ${className}`}>
      <div
        className={`ui--Expander-summary${isLeft ? ' isLeft' : ''}`}
        onClick={toggleExpanded}
      >
        {isLeft && icon}
        <div className='ui--Expander-summary-header'>
-          {help && (
-            <LabelHelp
-              help={help}
-              icon={helpIcon}
-            />
-          )}
-          {summaryHead}
+          <div className='ui--Expander-summary-title'>
+            {help && (
+              <LabelHelp
+                help={help}
+                icon={helpIcon}
+              />
+            )}
+            {summaryHead}
+          </div>
          {summary}
-          {isExpanded && headerSub && (
-            <div className='ui--Expander-summary-header-sub'>{headerSub}</div>
+          {headerSub && (
+            <div className='ui--Expander-summary-header-sub'>{isExpanded ? headerSub : headerSubMini}</div>
          )}
        </div>
        {!isLeft && icon}
@ -143,6 +149,14 @@ export default React.memo(styled(Expander)`
    }
  }

+  &.isHeader {
+    margin-left: 2rem;
+
+    .ui--Expander-summary-title {
+      font-size: 1.1rem;
+    }
+  }
+
  &.withBreaks .ui--Expander-content {
    white-space: normal;
  }
--- a/packages/react-components/src/ProposedAction.tsx
+++ b/packages/react-components/src/ProposedAction.tsx
@ -5,7 +5,6 @@ import type { Call } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';

 import React from 'react';
-import styled from 'styled-components';

 import { formatNumber, isString, isUndefined } from '@polkadot/util';

@ -29,7 +28,7 @@ function ProposedAction ({ className = '', idNumber, proposal }: Props): React.R
  if (!proposal) {
    return (
      <div className={`ui--ProposedAction ${className}`}>
-        <h1>{stringId ? `#${stringId}: ` : ''}{t<string>('No execution details available for this proposal')}</h1>
+        <div>{stringId ? `#${stringId}: ` : ''}{t<string>('No execution details available for this proposal')}</div>
      </div>
    );
  }
@ -47,21 +46,4 @@ function ProposedAction ({ className = '', idNumber, proposal }: Props): React.R
  );
 }

-export default React.memo(styled(ProposedAction)`
-  margin-left: 2rem;
-
-  > h1 {
-    font-size: 1.25rem;
-    text-transform: none;
-  }
-
-  .ui--ProposedAction-extrinsic {
-    > .ui--Params-Content {
-      padding-left: 0;
-    }
-  }
-
-  .ui--ProposedAction-header {
-    margin-bottom: 1rem;
-  }
-`);
+export default React.memo(ProposedAction);
--- a/packages/react-signer/src/PaymentInfo.tsx
+++ b/packages/react-signer/src/PaymentInfo.tsx
@ -16,15 +16,15 @@ import { formatBalance, nextTick } from '@polkadot/util';
 import { useTranslation } from './translate';

 interface Props {
-  accountId: string | null;
+  accountId?: string | null;
  className?: string;
  extrinsic?: SubmittableExtrinsic | null;
-  isSendable: boolean;
+  isHeader?: boolean;
  onChange?: (hasAvailable: boolean) => void;
  tip?: BN;
 }

-function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.ReactElement<Props> | null {
+function PaymentInfo ({ accountId, className = '', extrinsic, isHeader }: Props): React.ReactElement<Props> | null {
  const { t } = useTranslation();
  const { api } = useApi();
  const [dispatchInfo, setDispatchInfo] = useState<RuntimeDispatchInfo | null>(null);
@ -57,6 +57,7 @@ function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.Re
    <>
      <Expander
        className={className}
+        isHeader={isHeader}
        summary={
          <Trans i18nKey='feesForSubmission'>
            Fees of <span className='highlight'>{formatBalance(dispatchInfo.partialFee, { withSiFull: true })}</span> will be applied to the submission
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@ -7,52 +7,42 @@ import type { BN } from '@polkadot/util';
 import React from 'react';
 import styled from 'styled-components';

-import { Call, Expander, Modal } from '@polkadot/react-components';
+import { CallExpander, Modal } from '@polkadot/react-components';

 import PaymentInfo from './PaymentInfo';
 import { useTranslation } from './translate';

 interface Props {
-  accountId: string | null;
+  accountId?: string | null;
  className?: string;
  currentItem: QueueTx;
-  isSendable: boolean;
  onError: () => void;
  tip?: BN;
 }

-function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsigned, payload }, isSendable, onError, tip }: Props): React.ReactElement<Props> | null {
+function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsigned, payload }, onError, tip }: Props): React.ReactElement<Props> | null {
  const { t } = useTranslation();

  if (!extrinsic) {
    return null;
  }

-  const { meta, method, section } = extrinsic.registry.findMetaCall(extrinsic.callIndex);
-  const args = meta?.args.map(({ name }) => name).join(', ') || '';
-
  return (
    <Modal.Columns
      className={className}
      hint={t<string>('The details of the transaction including the type, the description (as available from the chain metadata) as well as any parameters and fee estimations (as available) for the specific type of call.')}
    >
-      <Expander
-        className='tx-details'
-        summary={<>{t<string>('Sending transaction')} <span className='highlight'>{section}.{method}({args})</span></>}
-        summaryMeta={meta}
-      >
-        <Call
-          onError={onError}
-          value={extrinsic}
-          withBorder={false}
-        />
-      </Expander>
+      <CallExpander
+        isHeader
+        onError={onError}
+        value={extrinsic}
+      />
      {!isUnsigned && !payload && (
        <PaymentInfo
          accountId={accountId}
-          className='tx-details'
+          className='paymentInfo'
          extrinsic={extrinsic}
-          isSendable={isSendable}
+          isHeader
          tip={tip}
        />
      )}
@ -61,23 +51,7 @@ function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsign
 }

 export default React.memo(styled(Transaction)`
-  .tx-details {
-    .ui--Expander-summary {
-      font-size: 1.1rem;
-      margin: 0 0 0.5rem;
-    }
-
-    .highlight {
-      font-weight: var(--font-weight-normal);
-    }
-
-    .meta {
-      margin-bottom: 0.5rem;
-      margin-left: 2rem;
-    }
-
-    .meta, .mute {
-      opacity: 0.6;
-    }
+  .paymentInfo {
+    margin-top: 0.5rem;
  }
 `);