ghost-portal/packages/react-components/src/ProposedAction.tsx
Jaco 364e289504
Extend confirmation referendum graph display (#8586)
* Extend confirmation referendum graph display

* Adjust

* ProposedAction with expander

* Expander with left arrow

* Adjust header
2022-12-20 17:50:45 +02:00

68 lines
1.6 KiB
TypeScript

// Copyright 2017-2022 @polkadot/app-democracy authors & contributors
// SPDX-License-Identifier: Apache-2.0
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';
import CallExpander from './CallExpander';
import { useTranslation } from './translate';
interface Props {
className?: string;
proposal?: Call | null;
idNumber?: BN | number | string;
withLinks?: boolean;
expandNested?: boolean;
}
function ProposedAction ({ className = '', idNumber, proposal }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const stringId = isString(idNumber) || isUndefined(idNumber)
? idNumber
: formatNumber(idNumber);
if (!proposal) {
return (
<div className={`ui--ProposedAction ${className}`}>
<h1>{stringId ? `#${stringId}: ` : ''}{t<string>('No execution details available for this proposal')}</h1>
</div>
);
}
return (
<div className={`ui--ProposedAction ${className}`}>
<CallExpander
isHeader
labelHash={t<string>('preimage')}
stringId={stringId}
value={proposal}
withHash
/>
</div>
);
}
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;
}
`);