lbry-desktop/ui/component/transactionListTable/internal/transaction-list-item.jsx

109 lines
3.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-03-28 17:53:13 +01:00
import * as TXN_TYPES from 'constants/transaction_types';
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
2018-03-26 23:32:43 +02:00
import React from 'react';
import ButtonTransaction from 'component/common/transaction-link';
import CreditAmount from 'component/common/credit-amount';
import DateTime from 'component/dateTime';
import Button from 'component/button';
import { buildURI, parseURI } from 'lbry-redux';
2018-03-26 23:32:43 +02:00
type Props = {
transaction: Transaction,
revokeClaim: (string, number) => void,
isRevokeable: boolean,
reward: ?{
reward_title: string,
},
};
class TransactionListItem extends React.PureComponent<Props> {
constructor() {
super();
(this: any).abandonClaim = this.abandonClaim.bind(this);
}
getLink(type: string) {
2019-03-28 17:53:13 +01:00
if (type === TXN_TYPES.TIP) {
2019-11-22 22:13:00 +01:00
return <Button button="secondary" icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
2018-03-26 23:32:43 +02:00
}
const abandonTitle = type === TXN_TYPES.SUPPORT ? 'Abandon Support' : 'Abandon Claim';
return <Button button="secondary" icon={ICONS.DELETE} onClick={this.abandonClaim} title={__(abandonTitle)} />;
2018-03-26 23:32:43 +02:00
}
abandonClaim() {
const { txid, nout } = this.props.transaction;
this.props.revokeClaim(txid, nout);
2018-03-26 23:32:43 +02:00
}
2019-06-04 19:04:25 +02:00
capitalize = (string: ?string) => string && string.charAt(0).toUpperCase() + string.slice(1);
2018-03-26 23:32:43 +02:00
render() {
const { reward, transaction, isRevokeable } = this.props;
const { amount, claim_id: claimId, claim_name: name, date, fee, txid, type } = transaction;
2019-06-04 19:04:25 +02:00
// Ensure the claim name exists and is valid
2019-07-11 21:03:31 +02:00
let uri;
2019-08-30 16:36:51 +02:00
let claimName;
2019-07-11 21:03:31 +02:00
try {
2019-08-30 16:36:51 +02:00
if (name.startsWith('@')) {
({ claimName } = parseURI(name));
uri = buildURI({ channelName: claimName, channelClaimId: claimId });
} else {
({ claimName } = parseURI(name));
uri = buildURI({ streamName: claimName, streamClaimId: claimId });
}
2019-07-11 21:03:31 +02:00
} catch (e) {}
2018-03-26 23:32:43 +02:00
const dateFormat = {
month: 'short',
day: 'numeric',
year: 'numeric',
};
2019-12-19 18:33:33 +01:00
const forClaim = name && claimId;
2018-03-26 23:32:43 +02:00
return (
<tr>
<td>
2019-11-22 22:13:00 +01:00
{date ? (
<div>
<DateTime date={date} show={DateTime.SHOW_DATE} formatOptions={dateFormat} />
<div className="table__item-label">
<DateTime date={date} show={DateTime.SHOW_TIME} />
</div>
</div>
) : (
<span className="empty">{__('Pending')}</span>
2018-03-26 23:32:43 +02:00
)}
</td>
<td className="table__item--actionable">
<span>{this.capitalize(type)}</span> {isRevokeable && this.getLink(type)}
</td>
2019-07-23 10:05:51 +02:00
<td>
2019-12-19 18:33:33 +01:00
{forClaim && <Button button="link" navigate={uri} label={claimName} />}
{!forClaim && reward && <span>{reward.reward_title}</span>}
2018-03-26 23:32:43 +02:00
</td>
<td>
<ButtonTransaction id={txid} />
</td>
2019-11-22 22:13:00 +01:00
<td className="table__item--align-right">
<CreditAmount badge={false} showPlus amount={amount} precision={8} />
<br />
{fee !== 0 && (
<span className="table__item-label">
<CreditAmount badge={false} fee amount={fee} precision={8} />
</span>
2018-03-26 23:32:43 +02:00
)}
</td>
</tr>
);
}
}
export default TransactionListItem;