-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
Tip.tsx
79 lines (70 loc) · 2.18 KB
/
Tip.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
// Copyright 2017-2020 @polkadot/app-treasury authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { OpenTip } from '@polkadot/types/interfaces';
import React from 'react';
import { AddressSmall, AddressMini, Expander } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import { FormatBalance } from '@polkadot/react-query';
import { Option } from '@polkadot/types';
import { useTranslation } from '../translate';
import TipEndorse from './TipEndorse';
import TipReason from './TipReason';
interface Props {
className?: string;
hash: string;
isMember: boolean;
members: string[];
}
function Tip ({ className, hash, isMember, members }: Props): React.ReactElement<Props> | null {
const { t } = useTranslation();
const { api } = useApi();
const tip = useCall<OpenTip | null>(api.query.treasury.tips, [hash], {
transform: (optTip: Option<OpenTip>) => optTip.unwrapOr(null)
});
if (!tip) {
return null;
}
const { finder, reason, tips, who } = tip;
const finderInfo = finder.unwrapOr(null);
return (
<tr className={className}>
<td className='address'>
<AddressSmall value={who} />
</td>
<td className='address'>
{finderInfo && (
<AddressMini value={finderInfo[0]} />
)}
</td>
<td className='number'>
{finderInfo && (
<FormatBalance value={finderInfo[1]} />
)}
</td>
<TipReason hash={reason} />
<td className='start all'>
{tips.length !== 0 && (
<Expander summary={t('Endorsements ({{count}})', { replace: { count: tips.length } })}>
{tips.map(([tipper, balance]) => (
<AddressMini
balance={balance}
key={tipper.toString()}
value={tipper}
withBalance
/>
))}
</Expander>
)}
</td>
<td className='button'>
<TipEndorse
hash={hash}
isMember={isMember}
members={members}
/>
</td>
</tr>
);
}
export default React.memo(Tip);