lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Tags in tables (#3261)

Browse Source 
Resolves #3243
This commit is contained in:
tom goriunov
2026-02-19 18:11:15 +01:00
committed by GitHub
parent e6e83ee4e7
commit df09a8d295
10 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/home/LatestTxsItem.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
<TxType types={ tx.transaction_types } isLoading={ isLoading }/>
{ tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
<TxWatchListTags tx={ tx } isLoading={ isLoading }/>
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0"/> }
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0" noColors/> }
</HStack>
<Flex
alignItems="center"
ui/home/LatestTxsItemMobile.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
<TxType types={ tx.transaction_types } isLoading={ isLoading }/>
{ tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
<TxWatchListTags tx={ tx } isLoading={ isLoading }/>
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0"/> }
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0" noColors/> }
</HStack>
<TxAdditionalInfo tx={ tx } isMobile isLoading={ isLoading }/>
</Flex>
ui/hotContracts/HotContractsListItem.tsx
+1
View File
@@ -33,6 +33,7 @@ const HotContractsListItem = ({ data, isLoading, exchangeRate }: Props) => {
<EntityTags
isLoading={ isLoading }
tags={ protocolTags }
noColors
/>
) }
<HStack>
ui/hotContracts/HotContractsTableItem.tsx
+1
View File
@@ -39,6 +39,7 @@ const HotContractsTableItem = ({
isLoading={ isLoading }
tags={ protocolTags }
mt="10px"
noColors
/>
) }
</TableCell>
ui/searchResults/SearchResultEntityTag.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const SearchResultEntityTag = ({ metadata, searchTerm, addressHash, ...rest }: P
return (
<Tag
{ ...rest }
startElement={ <EntityTagIcon data={ metadata } ignoreColor/> }
startElement={ <EntityTagIcon data={ metadata } noColors/> }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
</Tag>
ui/shared/EntityTags/EntityTag.tsx
+6 -5
View File
@@ -18,14 +18,15 @@ interface Props extends HTMLChakraProps<'span'> {
addressHash?: string;
isLoading?: boolean;
noLink?: boolean;
noColors?: boolean;
}
const EntityTag = ({ data, addressHash, isLoading, noLink, ...rest }: Props) => {
const EntityTag = ({ data, addressHash, isLoading, noLink, noColors, ...rest }: Props) => {
const multichainContext = useMultichainContext();
const linkParams = !noLink ? getTagLinkParams(data, multichainContext) : undefined;
const hasLink = Boolean(linkParams);
const iconColor = data.meta?.textColor ?? 'icon.secondary';
const iconColor = (!noColors && data.meta?.textColor) || 'icon.secondary';
const handleLinkClick = React.useCallback(() => {
if (!linkParams?.href) {
@@ -62,9 +63,9 @@ const EntityTag = ({ data, addressHash, isLoading, noLink, ...rest }: Props) =>
{ ...rest }
>
<Tag
bg={ data.meta?.bgColor }
color={ data.meta?.textColor }
startElement={ <EntityTagIcon data={ data }/> }
bg={ !noColors ? data.meta?.bgColor : undefined }
color={ !noColors ? data.meta?.textColor : undefined }
startElement={ <EntityTagIcon data={ data } noColors={ noColors }/> }
truncated
endElement={ linkParams?.type === 'external' ? <LinkExternalIcon color={ iconColor }/> : null }
endElementProps={ linkParams?.type === 'external' ? { ml: -1 } : undefined }
ui/shared/EntityTags/EntityTagIcon.tsx
+4 -4
View File
@@ -8,14 +8,14 @@ import IconSvg from 'ui/shared/IconSvg';
interface Props {
data: EntityTag;
ignoreColor?: boolean;
noColors?: boolean;
}
const EntityTagIcon = ({ data, ignoreColor }: Props) => {
const EntityTagIcon = ({ data, noColors }: Props) => {
const iconColor = data.meta?.textColor && !ignoreColor ? data.meta.textColor : 'icon.secondary';
const iconColor = (!noColors && data.meta?.textColor) || 'icon.secondary';
if (data.meta?.tagIcon) {
if (data.meta?.tagIcon && !noColors) {
return <Image boxSize={ 3 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
}
ui/shared/EntityTags/EntityTags.tsx
+14 -3
View File
@@ -15,9 +15,10 @@ interface Props {
tags: Array<TEntityTag>;
addressHash?: string;
isLoading?: boolean;
noColors?: boolean;
}
const EntityTags = ({ tags, addressHash, className, isLoading }: Props) => {
const EntityTags = ({ tags, addressHash, className, isLoading, noColors }: Props) => {
const isMobile = useIsMobile();
const visibleNum = isMobile ? 2 : 3;
@@ -51,6 +52,7 @@ const EntityTags = ({ tags, addressHash, className, isLoading }: Props) => {
addressHash={ addressHash }
isLoading={ isLoading }
maxW={ tagMaxW }
noColors={ noColors }
/>
)) }
{ metaSuitesPlaceholder }
@@ -63,7 +65,7 @@ const EntityTags = ({ tags, addressHash, className, isLoading }: Props) => {
<PopoverContent maxW="300px" w="fit-content">
<PopoverBody>
<Flex columnGap={ 2 } rowGap={ 2 } flexWrap="wrap">
{ tags.slice(visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag } addressHash={ addressHash }/>) }
{ tags.slice(visibleNum).map((tag) => <EntityTag key={ tag.slug } data={ tag } addressHash={ addressHash } noColors={ noColors }/>) }
</Flex>
</PopoverBody>
</PopoverContent>
@@ -74,7 +76,16 @@ const EntityTags = ({ tags, addressHash, className, isLoading }: Props) => {
return (
<>
{ tags.map((tag) => <EntityTag key={ tag.slug } data={ tag } addressHash={ addressHash } isLoading={ isLoading } maxW={ tagMaxW }/>) }
{ tags.map((tag) => (
<EntityTag
key={ tag.slug }
data={ tag }
addressHash={ addressHash }
isLoading={ isLoading }
maxW={ tagMaxW }
noColors={ noColors }
/>
)) }
{ metaSuitesPlaceholder }
</>
);
ui/txs/TxsListItem.tsx
+2 -2
View File
@@ -50,7 +50,7 @@ const TxsListItem = ({
}: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
const protocolTag = tx.to?.metadata?.tags?.find(tag => tag.tagType === 'protocol');
const protocolTag = tx.to?.hash !== currentAddress && tx.to?.metadata?.tags?.find(tag => tag.tagType === 'protocol');
return (
<ListItemMobile display="block" width="100%" animation={ animation } key={ tx.hash }>
@@ -67,7 +67,7 @@ const TxsListItem = ({
}
{ tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
<TxWatchListTags tx={ tx } isLoading={ isLoading }/>
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading }/> }
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } noColors/> }
</HStack>
<TxAdditionalInfo tx={ tx } isMobile isLoading={ isLoading }/>
</Flex>
ui/txs/TxsTableItem.tsx
+2 -2
View File
@@ -51,7 +51,7 @@ const TxsTableItem = ({
}: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
const protocolTag = tx.to?.metadata?.tags?.find(tag => tag.tagType === 'protocol');
const protocolTag = tx.to?.hash !== currentAddress && tx.to?.metadata?.tags?.find(tag => tag.tagType === 'protocol');
return (
<TableRow key={ tx.hash } animation={ animation }>
@@ -103,7 +103,7 @@ const TxsTableItem = ({
<span>{ tx.method }</span>
</Badge>
) }
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } maxW="100%"/> }
{ protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } maxW="100%" noColors/> }
</VStack>
</TableCell>
{ showBlockInfo && (