lbry-desktop/ui/component/fileValues/view.jsx

109 lines
3.6 KiB
React
Raw Normal View History

// @flow
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
2020-10-23 00:11:22 +02:00
import * as PAGES from 'constants/pages';
import React, { PureComponent } from 'react';
import Button from 'component/button';
import Spinner from 'component/spinner';
import HelpLink from 'component/common/help-link';
import CreditAmount from 'component/common/credit-amount';
type Props = {
uri: string,
claim: StreamClaim,
fileInfo: FileListItem,
metadata: StreamMetadata,
openFolder: string => void,
contentType: string,
user: ?any,
pendingAmount: string,
openModal: (id: string, { uri: string }) => void,
claimIsMine: boolean,
};
class FileValues extends PureComponent<Props> {
render() {
const { uri, claim, metadata, openModal, pendingAmount, claimIsMine } = this.props;
if (!claim || !metadata) {
return <span className="empty">{__('Empty claim or metadata info.')}</span>;
}
2020-04-02 17:59:03 +02:00
const supportsAmount = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount);
2020-05-21 17:38:28 +02:00
const purchaseReceipt = claim && claim.purchase_receipt;
return (
2020-10-23 00:11:22 +02:00
<table className="table table--condensed table--fixed table--lbc-details">
<tbody>
{purchaseReceipt && (
<tr>
<td> {__('Purchase Amount')}</td>
<td>
<Button
button="link"
href={`https://explorer.lbry.com/tx/${purchaseReceipt.txid}`}
label={<CreditAmount amount={Number(purchaseReceipt.amount)} precision={2} />}
/>
</td>
</tr>
)}
<tr>
<td> {__('Original Publish Amount')}</td>
<td>{claim && claim.amount ? <CreditAmount amount={Number(claim.amount)} precision={2} /> : <p>...</p>}</td>
</tr>
<tr>
<td>
{__('Supports and Tips')}
<HelpLink href="https://lbry.com/faq/tipping" />
</td>
<td>
{claimIsMine && !pendingAmount && Boolean(supportsAmount) && (
<>
<Button
button="link"
className="expandable__button"
icon={ICONS.UNLOCK}
label={<CreditAmount amount={Number(supportsAmount)} precision={2} />}
onClick={() => {
openModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
}}
/>{' '}
</>
)}
{(!claimIsMine || (claimIsMine && !pendingAmount && supportsAmount === 0)) && (
<CreditAmount amount={Number(supportsAmount)} precision={2} />
)}
2020-10-23 00:11:22 +02:00
{claimIsMine && pendingAmount && <Spinner type={'small'} />}
</td>
</tr>
<tr>
<td>
<div>
{__('Total Staked Amount')}
<HelpLink href="https://lbry.com/faq/tipping" />
</div>
</td>
<td>
<CreditAmount amount={Number(claim.meta.effective_amount)} precision={2} />
</td>
</tr>
<tr>
<td>
{__('Community Choice?')}
<HelpLink href="https://lbry.com/faq/naming" />
</td>
<td>
<Button
button="link"
label={claim.meta.is_controlling ? __('Yes') : __('No')}
navigate={`/$/${PAGES.TOP}?name=${claim.name}`}
/>
</td>
</tr>
</tbody>
</table>
);
}
}
export default FileValues;