mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
7505f154e6
* 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
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { Box, Flex, Text } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { TokenInfo, TokenInstance } from 'types/api/token';
|
|
|
|
import { route } from 'nextjs/routes';
|
|
|
|
import { useMultichainContext } from 'lib/contexts/multichain';
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import { Link } from 'toolkit/chakra/link';
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { TruncatedTextTooltip } from 'toolkit/components/truncation/TruncatedTextTooltip';
|
|
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
|
|
import NftMedia from 'ui/shared/nft/NftMedia';
|
|
|
|
type Props = { item: TokenInstance; token: TokenInfo; isLoading: boolean };
|
|
|
|
const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
|
|
|
|
const isMobile = useIsMobile();
|
|
const multichainContext = useMultichainContext();
|
|
|
|
const mediaElement = (
|
|
<NftMedia
|
|
mb="18px"
|
|
data={ item }
|
|
isLoading={ isLoading }
|
|
autoplayVideo={ false }
|
|
size="md"
|
|
/>
|
|
);
|
|
|
|
const url = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: token.address_hash, id: item.id } }, multichainContext);
|
|
|
|
return (
|
|
<Box
|
|
w={{ base: '100%', lg: '210px' }}
|
|
border="1px solid"
|
|
borderColor={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' }}
|
|
borderRadius="12px"
|
|
p="10px"
|
|
textStyle="sm"
|
|
fontWeight={ 500 }
|
|
>
|
|
<Link href={ isLoading ? undefined : url } display="inline">
|
|
{ mediaElement }
|
|
</Link>
|
|
{ item.id && (
|
|
<Flex mb={ 2 } ml={ 1 }>
|
|
<Text whiteSpace="pre" color="text.secondary">ID# </Text>
|
|
<TruncatedTextTooltip label={ item.id }>
|
|
<Skeleton loading={ isLoading } overflow="hidden">
|
|
<Link
|
|
overflow="hidden"
|
|
textOverflow="ellipsis"
|
|
whiteSpace="nowrap"
|
|
display="block"
|
|
loading={ isLoading }
|
|
href={ url }
|
|
>
|
|
{ item.id }
|
|
</Link>
|
|
</Skeleton>
|
|
</TruncatedTextTooltip>
|
|
</Flex>
|
|
) }
|
|
{ item.owner && (
|
|
<Flex mb={ 2 } ml={ 1 }>
|
|
<Text whiteSpace="pre" color="text.secondary" mr={ 2 } lineHeight="24px">Owner</Text>
|
|
<AddressEntity
|
|
address={ item.owner }
|
|
isLoading={ isLoading }
|
|
truncation="constant"
|
|
noCopy
|
|
noIcon={ isMobile }
|
|
/>
|
|
</Flex>
|
|
) }
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default TokenInventoryItem;
|