-
Notifications
You must be signed in to change notification settings - Fork 36
/
DetailsDrawer.tsx
79 lines (74 loc) · 2.72 KB
/
DetailsDrawer.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
/* eslint-disable unicorn/no-nested-ternary */
import React, { ReactElement, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { NftDetail } from '@lace/core';
import { Wallet } from '@lace/cardano';
import isNil from 'lodash/isNil';
import { Button, Drawer, DrawerHeader, DrawerNavigation, PostHogAction, toast } from '@lace/common';
import { buttonIds } from '@hooks/useEnterKeyPress';
import { NFT } from '@src/utils/get-token-list';
import { nftDetailSelector, nftNameSelector } from '../selectors';
import styles from './DetailsDrawer.module.scss';
import { useWalletStore } from '@stores';
import { useLocalStorage } from '@hooks';
import { useAnalyticsContext } from '@providers';
interface GeneralSettingsDrawerProps {
onClose: () => void;
onSend?: () => void;
selectedNft: NFT;
assetsInfo: Map<Wallet.Cardano.AssetId, Wallet.Asset.AssetInfo>;
}
export const DetailsDrawer = ({
onClose,
selectedNft,
assetsInfo = new Map(),
onSend
}: GeneralSettingsDrawerProps): ReactElement => {
const { t } = useTranslation();
const { environmentName } = useWalletStore();
const assetInfo = useMemo(
() => (isNil(assetsInfo) ? undefined : assetsInfo.get(selectedNft?.assetId)),
[selectedNft, assetsInfo]
);
const [userAvatar, { updateLocalStorage: setUserAvatar }] = useLocalStorage('userAvatar');
const analytics = useAnalyticsContext();
const nftDetailTranslation = {
tokenInformation: t('core.nftDetail.tokenInformation'),
attributes: t('core.nftDetail.attributes'),
setAsAvatar: t('core.nftDetail.setAsAvatar')
};
const handleSetAsAvatar = (image: string) => {
setUserAvatar({ ...userAvatar, [environmentName]: image });
toast.notify({ text: t('core.nftDetail.avatarUpdated') });
void analytics.sendEventToPostHog(PostHogAction.NFTDetailSetAsAvatarClick);
};
return (
<Drawer
open={!!selectedNft}
onClose={onClose}
title={assetInfo ? <DrawerHeader title={nftNameSelector(assetInfo, environmentName)} /> : undefined}
navigation={
selectedNft ? <DrawerNavigation title={t('core.nftDetail.title')} onCloseIconClick={onClose} /> : undefined
}
dataTestId="nft-details-drawer"
footer={
<div>
<Button className={styles.sendButton} onClick={onSend} id={buttonIds.nftDetailsBtnId}>
{t('browserView.crypto.nft.send')}
</Button>
</div>
}
>
{selectedNft && assetInfo && (
<div className={styles.wrapper}>
<NftDetail
{...nftDetailSelector(assetInfo)}
amount={selectedNft.amount}
translations={nftDetailTranslation}
handleSetAsAvatar={handleSetAsAvatar}
/>
</div>
)}
</Drawer>
);
};