lbry-desktop/ui/component/fileValues/view.jsx
2020-04-02 12:01:37 -04:00

110 lines
3.9 KiB
JavaScript

// @flow
import React, { Fragment, PureComponent } from 'react';
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import Button from 'component/button';
import Spinner from 'component/spinner';
import * as PAGES from 'constants/pages';
import HelpLink from 'component/common/help-link';
import CreditAmount from 'component/common/credit-amount';
import Card from 'component/common/card';
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>;
}
const supportsAmount = claim && claim.meta && claim.meta.support_amount && Number(claim.meta.support_amount);
return (
<Fragment>
<Card
title={__('LBC Details')}
defaultExpand={false}
actions={
<table className="table table--condensed table--fixed table--lbc-details">
<tbody>
<tr>
<td> {__('Original Publish Amount')}</td>
<td>
{claim && claim.amount ? (
<CreditAmount badge={false} 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 badge={false} amount={Number(supportsAmount)} precision={2} />}
onClick={() => {
openModal(MODALS.LIQUIDATE_SUPPORTS, { uri });
}}
/>{' '}
</>
)}
{(!claimIsMine || (claimIsMine && !pendingAmount && supportsAmount === 0)) && (
<CreditAmount badge={false} amount={Number(supportsAmount)} precision={2} />
)}
{claimIsMine && pendingAmount && <Spinner type={'small'} />}
</td>
</tr>
<tr>
<td>
<div>
{__('Total Staked Amount')}
<HelpLink href="https://lbry.com/faq/tipping" />
</div>
</td>
<td>
<CreditAmount badge={false} 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>
}
/>
</Fragment>
);
}
}
export default FileValues;