diff --git a/packages/react-components/src/CallExpander.tsx b/packages/react-components/src/CallExpander.tsx index 00de6c0a7c..b4394fd7ea 100644 --- 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 | null { +function CallExpander ({ children, className = '', isHeader, labelHash, labelSignature, mortality, onError, stringId, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement | null { const call = useMemo( () => value && value.callIndex ? value.registry.findMetaCall(value.callIndex) @@ -44,11 +44,10 @@ function CallExpander ({ children, className = '', isHeader, labelHash, labelSig return (
{stringId && `#${stringId}: `}{callName} - :
{stringId && `#${stringId}: `}{callName}
+ <>{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); diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx index 9f66b9454b..6830214a6e 100644 --- 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>/, ''); const parts = splitParts(combined.replace(/\\/g, '').replace(/`/g, '')); - return <>{parts.map((part, index) => index % 2 ? [{part}] : {part})} ; + return [ + parts[0].split(/[.(]/)[0], + <>{parts.map((part, index) => index % 2 ? [{part}] : {part})}  + ]; } -function Expander ({ children, className = '', help, helpIcon, isLeft, isOpen, isPadded, onClick, renderChildren, summary, summaryHead, summaryMeta, summarySub, withBreaks, withHidden }: Props): React.ReactElement { +function Expander ({ children, className = '', help, helpIcon, isHeader, isLeft, isOpen, isPadded, onClick, renderChildren, summary, summaryHead, summaryMeta, summarySub, withBreaks, withHidden }: Props): React.ReactElement { 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 ( -
+
{isLeft && icon}
- {help && ( - - )} - {summaryHead} +
+ {help && ( + + )} + {summaryHead} +
{summary} - {isExpanded && headerSub && ( -
{headerSub}
+ {headerSub && ( +
{isExpanded ? headerSub : headerSubMini}
)}
{!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; } diff --git a/packages/react-components/src/ProposedAction.tsx b/packages/react-components/src/ProposedAction.tsx index 2b3d1689cb..3cfca7a223 100644 --- 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 (
-

{stringId ? `#${stringId}: ` : ''}{t('No execution details available for this proposal')}

+
{stringId ? `#${stringId}: ` : ''}{t('No execution details available for this proposal')}
); } @@ -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); diff --git a/packages/react-signer/src/PaymentInfo.tsx b/packages/react-signer/src/PaymentInfo.tsx index 1fa4461a01..a6f510a97b 100644 --- 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 | null { +function PaymentInfo ({ accountId, className = '', extrinsic, isHeader }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const [dispatchInfo, setDispatchInfo] = useState(null); @@ -57,6 +57,7 @@ function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.Re <> Fees of {formatBalance(dispatchInfo.partialFee, { withSiFull: true })} will be applied to the submission diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx index 6fdbce1b42..6526425a2c 100644 --- 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 | null { +function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsigned, payload }, onError, tip }: Props): React.ReactElement | 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 ( ('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.')} > - {t('Sending transaction')} {section}.{method}({args})} - summaryMeta={meta} - > - - + {!isUnsigned && !payload && ( )} @@ -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; } `);