9413237952

Committed 08 Feb 2024 01:46PM UTC coverage: 52.934% (-0.9%) from 53.839%

Build # 9413237952

Build Type

push

github

Specific Base f98d1b

Committed by

rhyslbw

Commit Message

chore: bump version

Run Details

1989 of 4673 branches covered (42.56%)

Branch coverage included in aggregate %.

4487 of 7561 relevant lines covered (59.34%)

56.03 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

34.43

/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx

import React from 'react';
import classnames from 'classnames';
import { useWalletStore } from '@src/stores';
import { Menu, Tooltip as AntdTooltip } from 'antd';
import { useTranslation } from 'react-i18next';
import styles from '../DropdownMenuOverlay.module.scss';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { toast, addEllipsis } from '@lace/common';
import { WalletStatusContainer } from '@components/WalletStatus';
import { UserAvatar } from './UserAvatar';
import { useGetHandles } from '@hooks';
import { useAnalyticsContext } from '@providers';
import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
import { ProfileDropdown } from '@lace/ui';
import { getAssetImageUrl } from '@src/utils/get-asset-image-url';

const ADRESS_FIRST_PART_LENGTH = 10;
const ADRESS_LAST_PART_LENGTH = 5;
const WALLET_NAME_MAX_LENGTH = 16;
const TOAST_DEFAULT_DURATION = 3;

const overlayInnerStyle = {
  padding: '8px 16px',
  borderRadius: '12px',
  boxShadow: 'box-shadow: 0px 0px 16px rgba(167, 143, 160, 0.2)'
};

interface UserInfoProps {
  avatarVisible?: boolean;
}

export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactElement => {
  const { t } = useTranslation();
  const { walletInfo } = useWalletStore();
  const analytics = useAnalyticsContext();
  const walletAddress = walletInfo.addresses[0].address.toString();
  const shortenedWalletAddress = addEllipsis(walletAddress, ADRESS_FIRST_PART_LENGTH, ADRESS_LAST_PART_LENGTH);
  const walletName = addEllipsis(walletInfo.name.toString(), WALLET_NAME_MAX_LENGTH, 0);
  const [handle] = useGetHandles();
  const handleName = handle?.nftMetadata?.name;
  const handleImage = handle?.profilePic;

  const handleOnAddressCopy = () => {
    toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') });
    analytics.sendEventToPostHog(PostHogAction.UserWalletProfileWalletAddressClick);
  };

  return (
    <Menu.ItemGroup className={classnames(styles.menuItem, styles.borderBottom)} data-testid="header-menu-user-info">
      <div
        className={classnames(styles.userInfoWrapper, {
          [styles.singleWalletWrapper]: process.env.USE_MULTI_WALLET !== 'true',
          [styles.multiWalletWrapper]: process.env.USE_MULTI_WALLET === 'true'
        })}
      >
        <CopyToClipboard text={handleName || walletAddress}>
          {process.env.USE_MULTI_WALLET === 'true' ? (
            <ProfileDropdown.WalletOption
              title={walletInfo.name}
              subtitle="Account #0"
              id={walletName}
              profile={
                handleImage
                  ? {
                      fallback: walletInfo.name,
                      imageSrc: getAssetImageUrl(handleImage)
                    }
                  : undefined
              }
              type="cold"
            />
          ) : (
            <AntdTooltip
              overlayInnerStyle={overlayInnerStyle}
              placement="top"
              title={
                <span className={styles.tooltip}>
                  {handleName ? t('settings.copyHandle') : t('settings.copyAddress')}
                </span>
              }
            >
              <div className={styles.userInfo} onClick={handleOnAddressCopy}>
                {avatarVisible && <UserAvatar walletName={walletName} />}
                <div className={styles.userMeta} data-testid="header-menu-user-details">
                  <p className={styles.walletName} data-testid="header-menu-wallet-name">
                    {walletName}
                  </p>
                  <p className={styles.walletAddress} data-testid="header-menu-wallet-address">
                    {handleName || shortenedWalletAddress}
                  </p>
                </div>
              </div>
            </AntdTooltip>
          )}
        </CopyToClipboard>
        <div className={styles.walletStatusInfo}>
          <WalletStatusContainer />
        </div>
      </div>
    </Menu.ItemGroup>
  );
};

1	import React from 'react';	24✔
2	import classnames from 'classnames';	24✔
3	import { useWalletStore } from '@src/stores';	24✔
4	import { Menu, Tooltip as AntdTooltip } from 'antd';	24✔
5	import { useTranslation } from 'react-i18next';	24✔
6	import styles from '../DropdownMenuOverlay.module.scss';	24✔
7	import { CopyToClipboard } from 'react-copy-to-clipboard';	24✔
8	import { toast, addEllipsis } from '@lace/common';	24✔
9	import { WalletStatusContainer } from '@components/WalletStatus';	24✔
10	import { UserAvatar } from './UserAvatar';	24✔
11	import { useGetHandles } from '@hooks';	24✔
12	import { useAnalyticsContext } from '@providers';	24✔
13	import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';	24✔
14	import { ProfileDropdown } from '@lace/ui';	24✔
15	import { getAssetImageUrl } from '@src/utils/get-asset-image-url';	24✔
16
17	const ADRESS_FIRST_PART_LENGTH = 10;	24✔
18	const ADRESS_LAST_PART_LENGTH = 5;	24✔
19	const WALLET_NAME_MAX_LENGTH = 16;	24✔
20	const TOAST_DEFAULT_DURATION = 3;	24✔
21
22	const overlayInnerStyle = {	24✔
23	padding: '8px 16px',
24	borderRadius: '12px',
25	boxShadow: 'box-shadow: 0px 0px 16px rgba(167, 143, 160, 0.2)'
26	};
27
28	interface UserInfoProps {
29	avatarVisible?: boolean;
30	}
31
32	export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactElement => {	24!
33	const { t } = useTranslation();	×
34	const { walletInfo } = useWalletStore();	×
35	const analytics = useAnalyticsContext();	×
36	const walletAddress = walletInfo.addresses[0].address.toString();	×
37	const shortenedWalletAddress = addEllipsis(walletAddress, ADRESS_FIRST_PART_LENGTH, ADRESS_LAST_PART_LENGTH);	×
38	const walletName = addEllipsis(walletInfo.name.toString(), WALLET_NAME_MAX_LENGTH, 0);	×
39	const [handle] = useGetHandles();	×
40	const handleName = handle?.nftMetadata?.name;	×
41	const handleImage = handle?.profilePic;	×
42
43	const handleOnAddressCopy = () => {	×
44	toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') });	×
45	analytics.sendEventToPostHog(PostHogAction.UserWalletProfileWalletAddressClick);	×
46	};
47
48	return (	×
49	<Menu.ItemGroup className={classnames(styles.menuItem, styles.borderBottom)} data-testid="header-menu-user-info">
50	<div
51	className={classnames(styles.userInfoWrapper, {
52	[styles.singleWalletWrapper]: process.env.USE_MULTI_WALLET !== 'true',
53	[styles.multiWalletWrapper]: process.env.USE_MULTI_WALLET === 'true'
54	})}
55	>
56	<CopyToClipboard text={handleName \|\| walletAddress}>	×
57	{process.env.USE_MULTI_WALLET === 'true' ? (
58	<ProfileDropdown.WalletOption	×
59	title={walletInfo.name}
60	subtitle="Account #0"
61	id={walletName}
62	profile={
63	handleImage
64	? {	×
65	fallback: walletInfo.name,
66	imageSrc: getAssetImageUrl(handleImage)
67	}
68	: undefined
69	}
70	type="cold"
71	/>
72	) : (
73	<AntdTooltip
74	overlayInnerStyle={overlayInnerStyle}
75	placement="top"
76	title={
77	<span className={styles.tooltip}>
78	{handleName ? t('settings.copyHandle') : t('settings.copyAddress')}	×
79	</span>
80	}
81	>
82	<div className={styles.userInfo} onClick={handleOnAddressCopy}>
83	{avatarVisible && <UserAvatar walletName={walletName} />}	×
84	<div className={styles.userMeta} data-testid="header-menu-user-details">
85	<p className={styles.walletName} data-testid="header-menu-wallet-name">
86	{walletName}
87	</p>
88	<p className={styles.walletAddress} data-testid="header-menu-wallet-address">
89	{handleName \|\| shortenedWalletAddress}	×
90	</p>
91	</div>
92	</div>
93	</AntdTooltip>
94	)}
95	</CopyToClipboard>
96	<div className={styles.walletStatusInfo}>
97	<WalletStatusContainer />
98	</div>
99	</div>
100	</Menu.ItemGroup>
101	);
102	};

input-output-hk / lace / 9413237952

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous