mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
932add9d96
* basic components and address page refactoring * second part of refactoring * third part of refactoring * NativeCoinValue component * more refactoring * rename TruncatedValue into TruncatedText * minor fixes * refactor block details * fix layout of value and fee in tx table * update screenshots * different units for tooltip and stats widget small value fix * update screenshots * update tx table screenshot * fix copy button vertical alignment
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import type { ValidatorsZilliqaItem } from 'types/api/validators';
|
|
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import ValidatorEntity from 'ui/shared/entities/validator/ValidatorEntity';
|
|
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
|
|
import NativeCoinValue from 'ui/shared/value/NativeCoinValue';
|
|
|
|
interface Props {
|
|
data: ValidatorsZilliqaItem;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const ValidatorsListItem = ({ data, isLoading }: Props) => {
|
|
|
|
return (
|
|
<ListItemMobileGrid.Container>
|
|
|
|
<ListItemMobileGrid.Label isLoading={ isLoading }>BLS public key</ListItemMobileGrid.Label>
|
|
<ListItemMobileGrid.Value>
|
|
<ValidatorEntity
|
|
isLoading={ isLoading }
|
|
id={ data.bls_public_key }
|
|
/>
|
|
</ListItemMobileGrid.Value>
|
|
|
|
<ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
|
|
<ListItemMobileGrid.Value>
|
|
<Skeleton loading={ isLoading } display="inline-block">
|
|
{ data.index }
|
|
</Skeleton>
|
|
</ListItemMobileGrid.Value>
|
|
|
|
<ListItemMobileGrid.Label isLoading={ isLoading }>Balance</ListItemMobileGrid.Label>
|
|
<ListItemMobileGrid.Value>
|
|
<NativeCoinValue
|
|
amount={ data.balance }
|
|
loading={ isLoading }
|
|
/>
|
|
</ListItemMobileGrid.Value>
|
|
</ListItemMobileGrid.Container>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ValidatorsListItem);
|