mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
edc54514f1
* refactor widgets on home page * coming soon placeholder component * top accounts page * contract data * address ERC-20 tokens list * chain filter for address ERC-20 tokens * token select for address detailed view * address details fields * tokens table * stats widgets on home page * chain indicators graph on the home page * quick search * search results all tab * tabs and chain select on search results page * search results mobile view * add contract info to search and address details * add text filter for tokens and search improvements * load all results inside tab on search results page * token balance info * add support for domains in the full search * Multichain explorer Resolves #2989 * add envs validator for multichain * add some tests * fix search bar on search results page on mobile * home stats fixes * fix ts * optimize amount of queries on address page * add more contract info on address page * add enter key hint to search input * fix tests * fix test * update bg.primary css-variable on color theme change * sitemap for multichain * txs page: render first tab if blob tab is not available on the chain * filter out in active chains from chain select on address page and user ops page * add chain icon to advanced filter table * fix tooltip on entity with shield * fix ts * show contract implementations * fixes * add chain icon to all lists * refactor zetachain chains config type * use chain id as primary option instead of chain slug * refactor chain config type for multichain and essential dapps * refactor chain icon and chain select * rename chain-slug in chain_slug * change default radius of chain icon and update screenshots for multichain tests * change conditions for "isContract" and "isVerified" * test fixes * make shield optional for external chain entities * add chain icon to approvals lists * add stats page for multichain * add chain postfix to chart .png and .csv assets name * fix tests * sync verified contracts language filter and fix loading state in the search results page * fix sol2uml diagram and csv export * regcred from helmfile for review * link fixes * fix state for unknown address * fix incorrect chain in the context during spa transition to the same route on different chain * add links to stats widgets * add mixpanel to L2 demo values * show message of on-demand contract verification * fix screenshots --------- Co-authored-by: Nick Zenchik <[email protected]>
102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
import { Box, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { ChainInfo } from 'types/api/interop';
|
|
|
|
import { route } from 'nextjs-routes';
|
|
|
|
import { Image } from 'toolkit/chakra/image';
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { Tooltip } from 'toolkit/chakra/tooltip';
|
|
import { stripTrailingSlash } from 'toolkit/utils/url';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import { distributeEntityProps } from '../base/utils';
|
|
import * as TxEntity from './TxEntity';
|
|
|
|
type Props = {
|
|
chain?: ChainInfo | null;
|
|
hash?: string | null;
|
|
} & Omit<TxEntity.EntityProps, 'hash' | 'chain'>;
|
|
|
|
const IconStub = ({ isLoading }: { isLoading?: boolean }) => {
|
|
return (
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
display="flex"
|
|
minWidth="20px"
|
|
h="20px"
|
|
borderRadius="full"
|
|
background={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' }}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
mr={ 2 }
|
|
>
|
|
<IconSvg
|
|
name="networks/icon-placeholder"
|
|
width="16px"
|
|
height="16px"
|
|
color="icon.primary"
|
|
display="block"
|
|
/>
|
|
</Skeleton>
|
|
);
|
|
};
|
|
|
|
const TxEntityInterop = ({ chain, hash, ...props }: Props) => {
|
|
const partsProps = distributeEntityProps(props);
|
|
|
|
const href = (chain?.instance_url && hash) ? stripTrailingSlash(chain.instance_url) + route({
|
|
pathname: '/tx/[hash]',
|
|
query: {
|
|
...props.query,
|
|
hash: hash,
|
|
},
|
|
}) : null;
|
|
|
|
return (
|
|
<TxEntity.Container { ...partsProps.container }>
|
|
{ chain && !props.noIcon && (
|
|
<Tooltip content={ `${ chain.chain_name ? chain.chain_name : 'External chain' } (chain id ${ chain.chain_id })` }>
|
|
<Box>
|
|
{ chain.chain_logo ? (
|
|
<Image
|
|
src={ chain.chain_logo }
|
|
alt={ chain.chain_name || 'external chain logo' }
|
|
width="20px"
|
|
height="20px"
|
|
mr={ 2 }
|
|
borderRadius="base"
|
|
/>
|
|
) : (
|
|
<IconStub isLoading={ props.isLoading }/>
|
|
) }
|
|
</Box>
|
|
</Tooltip>
|
|
) }
|
|
{ !chain && !props.noIcon && (
|
|
<IconStub/>
|
|
) }
|
|
{ hash && (
|
|
<>
|
|
{ href ? (
|
|
<TxEntity.Link { ...partsProps.link } hash={ hash } href={ href } external>
|
|
<TxEntity.Content { ...partsProps.content } hash={ hash }/>
|
|
</TxEntity.Link>
|
|
) : (
|
|
<Box overflow="hidden">
|
|
<TxEntity.Content { ...partsProps.content } hash={ hash }/>
|
|
</Box>
|
|
) }
|
|
<TxEntity.Copy { ...partsProps.copy } hash={ hash } noCopy/>
|
|
</>
|
|
) }
|
|
{ !hash && (
|
|
'N/A'
|
|
) }
|
|
</TxEntity.Container>
|
|
);
|
|
};
|
|
|
|
export default chakra(TxEntityInterop);
|