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

70 lines
1.8 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
2018-03-26 23:32:43 +02:00
import ButtonTransaction from 'component/common/transaction-link';
import moment from 'moment';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
2018-03-26 23:32:43 +02:00
type Reward = {
id: string,
reward_title: string,
reward_amount: number,
transaction_id: string,
created_at: string,
};
type Props = {
rewards: Array<Reward>,
};
const RewardListClaimed = (props: Props) => {
const { rewards } = props;
if (!rewards || !rewards.length) {
return null;
}
return (
2019-06-17 22:32:38 +02:00
<section className="card">
<header className="table__header">
2019-11-22 22:13:00 +01:00
<div className="table__header-text">
<h2 className="card__title card__title--deprecated">{__('Claimed Rewards')}</h2>
2019-11-22 22:13:00 +01:00
<p className="section__subtitle">
{__(
'Reward history is tied to your email. In case of lost or multiple wallets, your balance may differ from the amounts claimed'
)}
.
</p>
</div>
</header>
2018-03-26 23:32:43 +02:00
2019-12-18 06:27:08 +01:00
<div className="table__wrapper">
<table className="table table--rewards">
<thead>
<tr>
<th>{__('Title')}</th>
2020-09-02 22:08:37 +02:00
<th>
<LbcSymbol size={20} />
</th>
2019-12-18 06:27:08 +01:00
<th>{__('Transaction')}</th>
<th>{__('Date')}</th>
</tr>
2019-12-18 06:27:08 +01:00
</thead>
<tbody>
{rewards.reverse().map(reward => (
<tr key={reward.id}>
<td>{reward.reward_title}</td>
<td>{reward.reward_amount}</td>
<td>{reward.transaction_id && <ButtonTransaction id={reward.transaction_id} />}</td>
<td>{moment(reward.created_at).format('LLL')}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
};
export default RewardListClaimed;