-
Notifications
You must be signed in to change notification settings - Fork 36
/
DropdownMenu.tsx
104 lines (95 loc) · 3.79 KB
/
DropdownMenu.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { useEffect } from 'react';
import cn from 'classnames';
import { Dropdown } from 'antd';
import { Button, addEllipsis } from '@lace/common';
import { DropdownMenuOverlay } from '../MainMenu';
import ChevronNormal from '../../assets/icons/chevron-down.component.svg';
import ChevronSmall from '../../assets/icons/chevron-down-small.component.svg';
import styles from './DropdownMenu.module.scss';
import { useWalletStore } from '@src/stores';
import { UserAvatar } from '../MainMenu/DropdownMenuOverlay/components';
import { useAnalyticsContext } from '@providers';
import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
import { ProfileDropdown } from '@lace/ui';
import { useGetHandles, useLocalStorage } from '@hooks';
import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
import { getActiveWalletSubtitle } from '@src/utils/get-wallet-subtitle';
import { getUiWalletType } from '@src/utils/get-ui-wallet-type';
export interface DropdownMenuProps {
isPopup?: boolean;
}
export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement => {
const analytics = useAnalyticsContext();
const {
cardanoWallet,
walletUI: { isDropdownMenuOpen = false },
setIsDropdownMenuOpen
} = useWalletStore();
const [handle] = useGetHandles();
const { environmentName, walletInfo } = useWalletStore();
const [avatars] = useLocalStorage('userAvatar');
const Chevron = isPopup ? ChevronSmall : ChevronNormal;
const handleImage = handle?.profilePic;
const address = walletInfo.addresses[0].address.toString();
const userAvatar =
(environmentName && avatars && avatars[`${environmentName}${address}`]) ||
(handleImage && getAssetImageUrl(handleImage));
const sendAnalyticsEvent = (event: PostHogAction) => {
analytics.sendEventToPostHog(event);
};
const handleDropdownState = (openDropdown: boolean) => {
setIsDropdownMenuOpen(openDropdown);
if (openDropdown) {
sendAnalyticsEvent(PostHogAction.UserWalletProfileIconClick);
}
};
useEffect(() => () => setIsDropdownMenuOpen(false), [setIsDropdownMenuOpen]);
const walletName = cardanoWallet.source.wallet.metadata.name;
const titleCharBeforeEll = 10;
const titleCharAfterEll = 0;
return (
<Dropdown
overlayClassName={styles.overlay}
destroyPopupOnHide
onOpenChange={handleDropdownState}
overlay={<DropdownMenuOverlay isPopup={isPopup} sendAnalyticsEvent={sendAnalyticsEvent} />}
placement="bottomRight"
trigger={['click']}
>
{process.env.USE_MULTI_WALLET === 'true' ? (
<div className={styles.profileDropdownTrigger}>
<ProfileDropdown.Trigger
title={addEllipsis(walletName, titleCharBeforeEll, titleCharAfterEll)}
subtitle={getActiveWalletSubtitle(cardanoWallet.source.account)}
active={isDropdownMenuOpen}
profile={
userAvatar
? {
fallback: walletName,
imageSrc: userAvatar
}
: undefined
}
type={getUiWalletType(cardanoWallet.source.wallet.type)}
id="menu"
/>
</div>
) : (
<Button
variant="outlined"
color="secondary"
className={cn(styles.avatarBtn, { [styles.open]: isDropdownMenuOpen })}
data-testid="header-menu-button"
>
<span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
<UserAvatar walletName={walletName} isPopup={isPopup} avatar={userAvatar} />
<Chevron
className={cn(styles.chevron, { [styles.open]: isDropdownMenuOpen })}
data-testid={`chevron-${isDropdownMenuOpen ? 'up' : 'down'}`}
/>
</span>
</Button>
)}
</Dropdown>
);
};