Skip to content

F
frontend
Commit c2d56a21 authored by isstuev's avatar isstuev
Browse files
Options

review-fixes

parent 64b466b6
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 192 deletions
ui/searchResults/SearchResultListItem.tsx
View file @ c2d56a21
......@@ -72,15 +72,13 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
case 'address': {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
return (
<Flex alignItems="center" overflow="hidden">
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
<AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
</Box>
</Address>
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
<AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
</Address>
);
}
......
ui/searchResults/SearchResultTableItem.tsx
View file @ c2d56a21
......@@ -119,15 +119,13 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
return (
<Td colSpan={ 3 } fontSize="sm">
<Flex alignItems="center" overflow="hidden">
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<mark>
<AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
</Address>
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<mark>
<AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
</Address>
</Td>
);
}
......
ui/snippets/searchBar/SearchBar.tsx
View file @ c2d56a21
......@@ -128,7 +128,7 @@ const SearchBar = ({ isHomepage }: Props) => {
w={ `${ menuWidth.current }px` }
ref={ menuRef }
>
<PopoverBody py={ 0 } color="chakra-body-text">
<PopoverBody p={ 0 } color="chakra-body-text">
<Box
maxH="50vh"
overflowY="scroll"
......@@ -136,6 +136,7 @@ const SearchBar = ({ isHomepage }: Props) => {
ref={ scrollRef }
as={ Element }
sx={ isHomepage ? { mark: { bgColor: 'green.100' } } : {} }
px={ 4 }
>
{ searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
<SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
View file @ c2d56a21
......@@ -78,7 +78,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
return map;
}, [ query.data?.items ]);
const scrollToCategory = React.useCallback((index: number) => {
const scrollToCategory = React.useCallback((index: number) => () => {
setTabIndex(index);
scroller.scrollTo(`cat_${ index }`, {
duration: 250,
......@@ -99,22 +99,26 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
return <Text>Something went wrong. Try refreshing the page or come back later.</Text>;
}
if (!query.data.items || query.data.items.length === 0) {
return <Text>No results found.</Text>;
}
const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
return (
<>
{ resultCategories.length > 1 && (
<Box position="sticky" top="0" width="100%" background={ bgColor } py={ 5 } my={ -5 } ref={ tabsRef }>
<Tabs variant="outline" colorScheme="gray" size="sm" onChange={ scrollToCategory } index={ tabIndex }>
<Tabs variant="outline" colorScheme="gray" size="sm" index={ tabIndex }>
<TabList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
{ resultCategories.map(cat => <Tab key={ cat.id }>{ cat.title }</Tab>) }
{ resultCategories.map((cat, index) => <Tab key={ cat.id } onClick={ scrollToCategory(index) }>{ cat.title }</Tab>) }
</TabList>
</Tabs>
</Box>
) }
{ resultCategories.map((cat, indx) => {
return (
<Element name={ `cat_${ indx }` } key={ indx }>
<Element name={ `cat_${ indx }` } key={ cat.id }>
<Text
fontSize="sm"
fontWeight={ 600 }
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
View file @ c2d56a21
......@@ -16,17 +16,25 @@ interface Props {
const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const icon = <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} flexShrink={ 0 }/>;
const name = data.name && (
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
);
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
if (isMobile) {
return (
<>
<Flex alignItems="center" justifyContent="space-between">
<AddressIcon
address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }}
mr={ 2 }
flexShrink={ 0 }
/>
<Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
{ icon }
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
......@@ -36,34 +44,19 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
flexGrow={ 1 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
{ address }
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ isContractVerified }
</Flex>
{ data.name && (
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 1 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
) }
{ name }
</>
);
}
return (
<Flex alignItems="center">
<AddressIcon
address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }}
mr={ 2 }
flexShrink={ 0 }
/>
<Flex alignItems="center" w="420px">
<Flex alignItems="center" gap={ 2 }>
{ icon }
<Flex alignItems="center" w="450px" gap={ 2 }>
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
......@@ -71,22 +64,11 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
whiteSpace="nowrap"
fontWeight={ 700 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
{ address }
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ isContractVerified }
</Flex>
{ data.name && (
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 0 }
ml={ 6 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
) }
{ name }
</Flex>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
View file @ c2d56a21
......@@ -15,52 +15,50 @@ interface Props {
}
const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
const blockNumber = (
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
</Text>
);
const hash = (
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
>
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
);
const date = dayjs(data.timestamp).format('llll');
if (isMobile) {
return (
<>
<Flex alignItems="center">
<Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
</Text>
<Flex alignItems="center" gap={ 2 }>
{ icon }
{ blockNumber }
</Flex>
<Text variant="secondary" overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
{ hash }
<Text variant="secondary">{ date }</Text>
</>
);
}
return (
<Grid templateColumns="24px auto minmax(auto, max-content) auto" gap={ 2 }>
<Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
w="200px"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
</Text>
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
>
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
<Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
<Grid templateColumns="24px 200px minmax(auto, max-content) auto" gap={ 2 }>
{ icon }
{ blockNumber }
{ hash }
<Text variant="secondary" textAlign="end">{ date }</Text>
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
View file @ c2d56a21
import { Text, Flex, Icon } from '@chakra-ui/react';
import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultLabel } from 'types/api/search';
......@@ -15,54 +15,53 @@ interface Props {
}
const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
const icon = <Icon as={ labelIcon } boxSize={ 6 } color="gray.500"/>;
const name = (
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
);
const address = (
<Text
overflow="hidden"
whiteSpace="nowrap"
variant="secondary"
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
);
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
if (isMobile) {
return (
<>
<Flex alignItems="center" overflow="hidden">
<Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 1 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
<Flex alignItems="center" overflow="hidden" gap={ 2 }>
{ icon }
{ name }
</Flex>
<Flex alignItems="center" justifyContent="space-between" overflow="hidden">
<Text overflow="hidden" whiteSpace="nowrap" variant="secondary">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
<Flex alignItems="center" justifyContent="space-between" overflow="hidden" gap={ 2 }>
{ address }
{ isContractVerified }
</Flex>
</>
);
}
return (
<Flex alignItems="center">
<Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 0 }
w="200px"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
<Text
overflow="hidden"
whiteSpace="nowrap"
variant="secondary"
ml={ 2 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
<Grid alignItems="center" gridTemplateColumns="24px 200px max-content 24px" gap={ 2 }>
{ icon }
{ name }
{ address }
{ isContractVerified }
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
View file @ c2d56a21
......@@ -15,61 +15,61 @@ interface Props {
}
const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
const name = data.name + (data.symbol ? ` (${ data.symbol })` : '');
const icon = <TokenLogo boxSize={ 6 } data={ data }/>;
const name = (
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name + (data.symbol ? ` (${ data.symbol })` : ''), searchTerm) }}/>
</Text>
);
const address = (
<Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
);
const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
const additionalInfo = (
<Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
);
if (isMobile) {
const templateCols = `1fr
${ data.is_smart_contract_verified ? ' auto' : '' }
${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
return (
<>
<Flex alignItems="center" justifyContent="space-between">
<TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 }/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
ml={ 2 }
flexGrow={ 1 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
</Text>
<Flex alignItems="center" gap={ 2 }>
{ icon }
{ name }
</Flex>
<Grid templateColumns="1fr auto auto" alignItems="center">
<Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
<Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
{ address }
{ contractVerifiedIcon }
{ additionalInfo }
</Grid>
</>
);
}
return (
<Grid templateColumns="24px 200px 1fr auto">
<TokenLogo boxSize={ 6 } data={ data }/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
ml={ 2 }
flexGrow={ 0 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
</Text>
<Flex alignItems="center">
<Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } variant="secondary">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
<Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
{ icon }
{ name }
<Flex alignItems="center" gap={ 2 }>
{ address }
{ contractVerifiedIcon }
</Flex>
<Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
{ additionalInfo }
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
View file @ c2d56a21
......@@ -14,28 +14,31 @@ interface Props {
}
const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
const icon = <Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>;
const hash = (
<chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
<HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
</chakra.mark>
);
const date = dayjs(data.timestamp).format('llll');
if (isMobile) {
return (
<>
<Flex alignItems="center" justifyContent="space-between">
<Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
<HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
</chakra.mark>
<Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
{ icon }
{ hash }
</Flex>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
<Text variant="secondary">{ date }</Text>
</>
);
}
return (
<Grid templateColumns="24px minmax(auto, max-content) auto" gap={ 2 }>
<Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>
<chakra.mark overflow="hidden" whiteSpace="nowrap" display="block" fontWeight={ 700 } >
<HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
</chakra.mark>
<Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
{ icon }
{ hash }
<Text variant="secondary" textAlign="end">{ date }</Text>
</Grid>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment