Skip to content

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

log search on the search page

parent a8fcd42f
Show whitespace changes
Inline Side-by-side
Showing with 40 additions and 6 deletions
ui/searchResults/SearchResultListItem.tsx
View file @ 1764f302
......@@ -8,6 +8,7 @@ import blockIcon from 'icons/block.svg';
import labelIcon from 'icons/publictags.svg';
import txIcon from 'icons/transactions.svg';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
......@@ -25,6 +26,14 @@ interface Props {
const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
const handleLinkClick = React.useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
'Search query': searchTerm,
'Source page type': 'Search results',
'Result URL': e.currentTarget.href,
});
}, [ searchTerm ]);
const firstRow = (() => {
switch (data.type) {
case 'token': {
......@@ -39,6 +48,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
fontWeight={ 700 }
wordBreak="break-all"
isLoading={ isLoading }
onClick={ handleLinkClick }
>
<Skeleton isLoaded={ !isLoading } dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
</LinkInternal>
......@@ -53,7 +63,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<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%"/>
<AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
</Box>
</Address>
);
......@@ -69,6 +79,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
fontWeight={ 700 }
wordBreak="break-all"
isLoading={ isLoading }
onClick={ handleLinkClick }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</LinkInternal>
......@@ -81,7 +92,11 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
return (
<Flex alignItems="center">
<Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }>
<LinkInternal
fontWeight={ 700 }
href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }
onClick={ handleLinkClick }
>
<Box as={ shouldHighlightHash ? 'span' : 'mark' }>{ data.block_number }</Box>
</LinkInternal>
</Flex>
......@@ -93,7 +108,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<Flex alignItems="center" overflow="hidden">
<Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<chakra.mark display="block" overflow="hidden">
<AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 } display="block"/>
<AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 } display="block" onClick={ handleLinkClick }/>
</chakra.mark>
</Flex>
);
......
ui/searchResults/SearchResultTableItem.tsx
View file @ 1764f302
......@@ -8,6 +8,7 @@ import blockIcon from 'icons/block.svg';
import labelIcon from 'icons/publictags.svg';
import txIcon from 'icons/transactions.svg';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
import trimTokenSymbol from 'lib/token/trimTokenSymbol';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
......@@ -24,6 +25,14 @@ interface Props {
const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
const handleLinkClick = React.useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
mixpanel.logEvent(mixpanel.EventTypes.SEARCH_QUERY, {
'Search query': searchTerm,
'Source page type': 'Search results',
'Result URL': e.currentTarget.href,
});
}, [ searchTerm ]);
const content = (() => {
switch (data.type) {
case 'token': {
......@@ -40,6 +49,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
fontWeight={ 700 }
wordBreak="break-all"
isLoading={ isLoading }
onClick={ handleLinkClick }
>
<Skeleton isLoaded={ !isLoading } dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
</LinkInternal>
......@@ -58,6 +68,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
case 'address': {
if (data.name) {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
return (
<>
<Td fontSize="sm">
......@@ -68,6 +79,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
onClick={ handleLinkClick }
>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.address }/>
......@@ -87,7 +99,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<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 }/>
<AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
</Address>
</Td>
......@@ -106,6 +118,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
fontWeight={ 700 }
wordBreak="break-all"
isLoading={ isLoading }
onClick={ handleLinkClick }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</LinkInternal>
......@@ -128,7 +141,11 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<Td fontSize="sm">
<Flex alignItems="center">
<Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }>
<LinkInternal
fontWeight={ 700 }
href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }
onClick={ handleLinkClick }
>
<Box as={ shouldHighlightHash ? 'span' : 'mark' }>{ data.block_number }</Box>
</LinkInternal>
</Flex>
......@@ -148,7 +165,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<Flex alignItems="center">
<Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<mark>
<AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 }/>
<AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
</Flex>
</Td>
......
ui/shared/address/AddressLink.tsx
View file @ 1764f302
......@@ -18,6 +18,7 @@ type CommonProps = {
fontWeight?: string;
alias?: string | null;
isLoading?: boolean;
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}
type AddressTokenTxProps = {
......@@ -105,6 +106,7 @@ const AddressLink = (props: Props) => {
target={ target }
overflow="hidden"
whiteSpace="nowrap"
onClick={ props.onClick }
>
{ content }
</LinkInternal>
......
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