1  import { ExternalLinkIcon } from '@heroicons/react/solid';
 2  import { Box, Link, SvgIcon, TypographyProps } from '@mui/material';
 3  import { useRootStore } from 'src/store/root';
 4  import { GENERAL } from 'src/utils/mixPanelEvents';
 5  
 6  import { CompactableTypography, CompactMode } from './CompactableTypography';
 7  import { DarkTooltip } from './infoTooltips/DarkTooltip';
 8  
 9  export interface UserNameTextProps extends TypographyProps {
10    addressCompactMode?: CompactMode;
11    domainCompactMode?: CompactMode;
12    domainName?: string;
13    loading?: boolean;
14    address: string;
15    link?: string;
16    iconSize?: number;
17    funnel?: string;
18  }
19  
20  export const UserNameText: React.FC<UserNameTextProps> = ({
21    addressCompactMode = CompactMode.SM,
22    domainCompactMode = CompactMode.LG,
23    loading,
24    domainName,
25    address,
26    link,
27    iconSize = 16,
28    funnel,
29    ...rest
30  }) => {
31    const isDomainNameLong = Boolean(domainName && domainName?.length > 18);
32  
33    const shouldCompact = !domainName || isDomainNameLong;
34    const trackEvent = useRootStore((store) => store.trackEvent);
35  
36    return (
37      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
38        <CompactableTypography
39          compactMode={domainName ? domainCompactMode : addressCompactMode}
40          compact={shouldCompact}
41          loading={loading}
42          {...rest}
43        >
44          {domainName ? domainName : address}
45        </CompactableTypography>
46        {link && (
47          <DarkTooltip title="View on Etherscan">
48            <Link
49              href={link}
50              target="_blank"
51              sx={{ display: 'flex' }}
52              onClick={() => trackEvent(GENERAL.EXTERNAL_LINK, { funnel: funnel, Link: 'Etherscan' })}
53            >
54              <SvgIcon sx={{ fontSize: iconSize }}>
55                <ExternalLinkIcon />
56              </SvgIcon>
57            </Link>
58          </DarkTooltip>
59        )}
60      </Box>
61    );
62  };