log search on the search page

ui/searchResults/SearchResultListItem.tsx

@@ -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

@@ -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

@@ -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>