39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
// Copyright 2017-2022 @polkadot/app-staking authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import type { Props } from './types';
|
|
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { Columar } from '@polkadot/react-components';
|
|
|
|
import ChartPoints from './ChartPoints';
|
|
import ChartPrefs from './ChartPrefs';
|
|
import ChartRewards from './ChartRewards';
|
|
import ChartStake from './ChartStake';
|
|
|
|
function Validator ({ className = '', validatorId }: Props): React.ReactElement<Props> {
|
|
return (
|
|
<Columar className={className}>
|
|
<Columar.Column>
|
|
<ChartPoints validatorId={validatorId} />
|
|
<ChartRewards validatorId={validatorId} />
|
|
</Columar.Column>
|
|
<Columar.Column>
|
|
<ChartStake validatorId={validatorId} />
|
|
<ChartPrefs validatorId={validatorId} />
|
|
</Columar.Column>
|
|
</Columar>
|
|
);
|
|
}
|
|
|
|
export default React.memo(styled(Validator)`
|
|
.staking--Chart {
|
|
background: var(--bg-table);
|
|
border: 1px solid var(--border-table);
|
|
border-radius: 0.25rem;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
`);
|