diff --git a/src/theme/components.tsx b/src/theme/components.tsx index c57636d629..bc36c1a7f1 100644 --- a/src/theme/components.tsx +++ b/src/theme/components.tsx @@ -197,6 +197,52 @@ export const UniTokenAnimated = styled.img` filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15)); ` +const ETHERSCAN_HOSTNAMES: { [hostname: string]: true } = { + 'etherscan.io': true, + 'ropsten.etherscan.io': true, + 'rinkeby.etherscan.io': true, + 'kovan.etherscan.io': true, + 'goerli.etherscan.io': true, +} + +/** + * Returns the anonymized version of the given href, i.e. one that does not leak user information + * @param href the anonymized version of the given href + */ +function anonymizeLink(href: string): string { + try { + const url = new URL(href) + if (ETHERSCAN_HOSTNAMES[url.hostname]) { + return `${url.hostname}/${url.pathname.split('/')[1]}/***` + } + return href + } catch (error) { + console.error('Failed to anonymize outbound link', error) + return href + } +} + +function useHandleClickLinkCallback() { + return useCallback((event: React.MouseEvent) => { + const { target, href } = event.currentTarget + + const anonymizedHref = anonymizeLink(href) + + // don't prevent default, don't redirect if it's a new tab + if (target === '_blank' || event.ctrlKey || event.metaKey) { + ReactGA.outboundLink({ label: anonymizedHref }, () => { + console.debug('Fired outbound link event', anonymizedHref) + }) + } else { + event.preventDefault() + // send a ReactGA event and then trigger a location change + ReactGA.outboundLink({ label: anonymizedHref }, () => { + window.location.href = anonymizedHref + }) + } + }, []) +} + /** * Outbound link that handles firing google analytics events */ @@ -206,24 +252,7 @@ export function ExternalLink({ rel = 'noopener noreferrer', ...rest }: Omit, 'as' | 'ref' | 'onClick'> & { href: string }) { - const handleClick = useCallback( - (event: React.MouseEvent) => { - // don't prevent default, don't redirect if it's a new tab - if (target === '_blank' || event.ctrlKey || event.metaKey) { - ReactGA.outboundLink({ label: href }, () => { - console.debug('Fired outbound link event', href) - }) - } else { - event.preventDefault() - // send a ReactGA event and then trigger a location change - ReactGA.outboundLink({ label: href }, () => { - window.location.href = href - }) - } - }, - [href, target] - ) - return + return } export function ExternalLinkIcon({ @@ -232,25 +261,8 @@ export function ExternalLinkIcon({ rel = 'noopener noreferrer', ...rest }: Omit, 'as' | 'ref' | 'onClick'> & { href: string }) { - const handleClick = useCallback( - (event: React.MouseEvent) => { - // don't prevent default, don't redirect if it's a new tab - if (target === '_blank' || event.ctrlKey || event.metaKey) { - ReactGA.outboundLink({ label: href }, () => { - console.debug('Fired outbound link event', href) - }) - } else { - event.preventDefault() - // send a ReactGA event and then trigger a location change - ReactGA.outboundLink({ label: href }, () => { - window.location.href = href - }) - } - }, - [href, target] - ) return ( - + )