Files
tom goriunovandGitHub 7505f154e6 OP Superchain: local views for chains in the cluster (#2864)
* update styles for chain widgets on home page

* update latest txs styles and slug creation algorithm

* list of local txs

* list of local blocks

* local view for address internal tx tab

* local view for address coin history

* local view for address logs

* local view for address token transfers

* address details, kind of

* [wip] local view for address contract tab

* user ops views

* chain popover

* csv-export page

* advanced filter page

* block countdown pages

* fixes for contract tab

* refactor address txs and transfers tabs

* refactor getServerSideProps

* internal txs page

* tokens and token transfers pages

* simple tag for address page and details info placeholders

* add chain icon to the local lists

* show creator in contract tab

* OP Superchain: local views for chains in the cluster

Fixes #2827

* highlight current chain in the title of local entities

* tokens nfts tab for address

* allow entity icon to be an image

* adjust cross-chain txs table and add placeholder to home page

* cross-chain txs for address

* fetch multichain config from microservice

* fix skeleton in token transfers table

* tests, pt.1

* wtf with gh

* verified contracts page

* change chain info in block and token page header

* fix some tests

* update styles for token icon with chain logo in header

* fix links and address internal txs tab

* update screenshots

* fix margins for tx info button and chain icon in tx tables

* add some tests

* fix screenshots
2025-08-15 15:32:47 +02:00

88 lines
1.9 KiB
TypeScript

import { chakra } from '@chakra-ui/react';
import React from 'react';
import { route } from 'nextjs-routes';
import * as EntityBase from 'ui/shared/entities/base/components';
import { distributeEntityProps } from '../base/utils';
type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'id'>;
const Link = chakra((props: LinkProps) => {
const defaultHref = route({ pathname: '/validators/[id]', query: { id: props.id } });
return (
<EntityBase.Link
{ ...props }
href={ props.href ?? defaultHref }
>
{ props.children }
</EntityBase.Link>
);
});
const Icon = (props: EntityBase.IconBaseProps) => {
return (
<EntityBase.Icon
{ ...props }
name={ 'name' in props ? props.name : 'key' }
/>
);
};
type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'id'>;
const Content = chakra((props: ContentProps) => {
const { id, ...rest } = props;
return (
<EntityBase.Content
{ ...rest }
text={ id }
/>
);
});
type CopyProps = Omit<EntityBase.CopyBaseProps, 'text'> & Pick<EntityProps, 'id'>;
const Copy = (props: CopyProps) => {
const { id, ...rest } = props;
return (
<EntityBase.Copy
{ ...rest }
text={ id }
/>
);
};
const Container = EntityBase.Container;
export interface EntityProps extends EntityBase.EntityBaseProps {
id: string;
}
const ValidatorEntity = (props: EntityProps) => {
const partsProps = distributeEntityProps(props);
const content = <Content { ...partsProps.content }/>;
return (
<Container { ...partsProps.container }>
<Icon { ...partsProps.icon }/>
{ props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
<Copy { ...partsProps.copy }/>
</Container>
);
};
export default React.memo(chakra(ValidatorEntity));
export {
Container,
Link,
Icon,
Content,
Copy,
};