ghost-portal/packages/react-components/src/CallExpander.tsx
Jaco 1e3cf6094b
Adjust Call/Event display (known balance args) (#8569)
* Adjust Call/Event display (known balance args)

* Additional

* Adjust

* smooth

* adjust colors
2022-12-18 15:48:03 +02:00

53 lines
1.2 KiB
TypeScript

// Copyright 2017-2022 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { Call } from '@polkadot/types/interfaces';
import React, { useMemo } from 'react';
import CallDisplay from './Call';
import Expander from './Expander';
interface Props {
children?: React.ReactNode;
className?: string;
labelHash?: React.ReactNode;
value?: Call | null;
withHash?: boolean;
}
function CallExpander ({ children, className = '', labelHash, value, withHash }: Props): React.ReactElement<Props> | null {
const call = useMemo(
() => value && value.callIndex
? value.registry.findMetaCall(value.callIndex)
: null,
[value]
);
if (!call) {
return null;
}
const { meta, method, section } = call;
const callName = `${section}.${method}`;
return (
<div className={`ui--CallExpander ${className}`}>
<Expander
summaryHead={<div>{callName}</div>}
summaryMeta={meta}
>
<CallDisplay
callName={callName}
labelHash={labelHash}
value={value}
withHash={withHash}
/>
{children}
</Expander>
</div>
);
}
export default React.memo(CallExpander);