lbry-desktop/ui/js/component/transactionList/internal/TransactionListItem.jsx

123 lines
2.8 KiB
React
Raw Normal View History

import React from "react";
import LinkTransaction from "component/linkTransaction";
import { CreditAmount } from "component/common";
import DateTime from "component/dateTime";
import Link from "component/link";
import lbryuri from "lbryuri";
2017-11-01 21:23:30 +01:00
import * as txnTypes from "constants/transaction_types";
class TransactionListItem extends React.PureComponent {
2017-10-30 17:25:56 +01:00
abandonClaim() {
2017-11-01 21:23:30 +01:00
const { txid, nout } = this.props.transaction;
2017-10-30 17:25:56 +01:00
2017-11-01 21:23:30 +01:00
this.props.revokeClaim(txid, nout);
2017-10-24 15:10:27 +02:00
}
2017-10-30 17:25:56 +01:00
getLink(type) {
2017-11-01 21:23:30 +01:00
if (type == txnTypes.TIP) {
2017-10-30 17:25:56 +01:00
return (
<Link
onClick={this.abandonClaim.bind(this)}
icon="icon-unlock-alt"
2017-11-01 21:23:30 +01:00
title={__("Unlock")}
2017-10-30 17:25:56 +01:00
/>
);
} else {
return (
<Link
onClick={this.abandonClaim.bind(this)}
icon="icon-trash"
2017-11-01 21:23:30 +01:00
title={__("Revoke")}
2017-10-30 17:25:56 +01:00
/>
);
}
}
2017-10-20 15:01:54 +02:00
capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
render() {
2017-10-24 15:10:27 +02:00
const { reward, transaction, isRevokeable } = this.props;
const {
amount,
claim_id: claimId,
claim_name: name,
date,
fee,
txid,
type,
2017-10-24 15:10:27 +02:00
nout,
} = transaction;
const dateFormat = {
month: "short",
day: "numeric",
year: "numeric",
};
return (
<tr>
<td>
{date
? <div>
<DateTime
date={date}
show={DateTime.SHOW_DATE}
formatOptions={dateFormat}
/>
<div className="meta">
<DateTime date={date} show={DateTime.SHOW_TIME} />
</div>
</div>
: <span className="empty">
{__("(Transaction pending)")}
</span>}
</td>
<td>
<CreditAmount
amount={amount}
look="plain"
label={false}
showPlus={true}
precision={8}
/>
<br />
{fee != 0 &&
<CreditAmount
amount={fee}
look="fee"
label={false}
precision={8}
/>}
</td>
<td>
{this.capitalize(type)}{" "}
2017-10-30 17:25:56 +01:00
{isRevokeable && this.getLink(type)}
</td>
<td>
{reward &&
<Link navigate="/rewards">
{__("Reward: %s", reward.reward_title)}
</Link>}
{name &&
claimId &&
<Link
className="button-text"
navigate="/show"
navigateParams={{ uri: lbryuri.build({ name, claimId }) }}
>
{name}
</Link>}
</td>
<td>
<LinkTransaction id={txid} />
</td>
</tr>
);
}
}
export default TransactionListItem;