-
Notifications
You must be signed in to change notification settings - Fork 295
/
WalletToken.tsx
96 lines (92 loc) · 2.66 KB
/
WalletToken.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
// @flow
import React, { useState, useCallback, useMemo } from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import styles from './WalletToken.scss';
import AssetContent from '../../../assets/AssetContent';
import type { AssetToken } from '../../../../api/assets/types';
import WalletTokenFooter from './WalletTokenFooter';
import WalletTokenHeader from './WalletTokenHeader';
type Props = {
anyAssetWasHovered: boolean,
asset: AssetToken,
assetSettingsDialogWasOpened: boolean,
className?: string,
headerClassName?: string,
footerClassName?: string,
fullFingerprint?: boolean,
isFavorite: boolean,
isInsertingAsset: boolean,
isLoading: boolean,
isRemovingAsset: boolean,
onAssetSettings?: Function,
onCopyAssetParam?: Function,
onOpenAssetSend?: Function,
onToggleFavorite?: Function,
};
const WalletToken = observer((props: Props) => {
const {
anyAssetWasHovered,
asset,
assetSettingsDialogWasOpened,
className,
headerClassName,
footerClassName,
fullFingerprint = true,
isFavorite,
isLoading,
onAssetSettings,
onCopyAssetParam,
onOpenAssetSend,
onToggleFavorite,
isInsertingAsset,
isRemovingAsset,
} = props;
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const toggleIsExpanded = useCallback(() => {
setIsExpanded(!isExpanded);
}, [setIsExpanded, isExpanded]);
const componentStyles = useMemo(
() =>
classNames(
styles.component,
isExpanded && styles.isExpanded,
isInsertingAsset && styles.inserting,
isRemovingAsset && styles.removing,
className
),
[className, styles, isExpanded, isInsertingAsset, isRemovingAsset]
);
return (
<div className={componentStyles}>
<WalletTokenHeader
asset={asset}
className={headerClassName}
isFavorite={isFavorite}
isExpanded={isExpanded}
isLoading={isLoading}
fullFingerprint={fullFingerprint}
anyAssetWasHovered={anyAssetWasHovered}
onClick={toggleIsExpanded}
onCopyAssetParam={onCopyAssetParam}
onToggleFavorite={onToggleFavorite}
assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
/>
<div className={styles.content}>
<AssetContent
asset={asset}
onCopyAssetParam={onCopyAssetParam}
highlightFingerprint={false}
/>
<WalletTokenFooter
asset={asset}
className={footerClassName}
isLoading={isLoading}
onAssetSettings={onAssetSettings}
onOpenAssetSend={onOpenAssetSend}
/>
</div>
</div>
);
});
export default WalletToken;