2019-01-09 11:07:50 -08:00
|
|
|
import React from 'react';
|
2019-01-09 13:32:51 -08:00
|
|
|
import { connect } from 'react-redux';
|
2019-01-09 11:07:50 -08:00
|
|
|
import { Link } from 'react-router-dom';
|
2019-01-09 13:32:51 -08:00
|
|
|
import { Tag, Popconfirm } from 'antd';
|
2019-01-09 11:07:50 -08:00
|
|
|
import UnitDisplay from 'components/UnitDisplay';
|
|
|
|
import { ONE_DAY } from 'utils/time';
|
2019-01-09 13:32:51 -08:00
|
|
|
import { formatTxExplorerUrl } from 'utils/formatters';
|
|
|
|
import { deleteContribution } from 'modules/users/actions';
|
2019-01-09 11:07:50 -08:00
|
|
|
import { UserContribution } from 'types';
|
|
|
|
import './ProfileContribution.less';
|
|
|
|
|
2019-01-09 13:32:51 -08:00
|
|
|
interface OwnProps {
|
|
|
|
userId: number;
|
2019-01-09 11:07:50 -08:00
|
|
|
contribution: UserContribution;
|
2019-01-09 14:26:28 -08:00
|
|
|
showSendInstructions(contribution: UserContribution): void;
|
2019-01-09 11:07:50 -08:00
|
|
|
}
|
|
|
|
|
2019-01-09 13:32:51 -08:00
|
|
|
interface DispatchProps {
|
|
|
|
deleteContribution: typeof deleteContribution;
|
|
|
|
}
|
|
|
|
|
|
|
|
type Props = OwnProps & DispatchProps;
|
|
|
|
|
|
|
|
class ProfileContribution extends React.Component<Props> {
|
2019-01-09 11:07:50 -08:00
|
|
|
render() {
|
|
|
|
const { contribution } = this.props;
|
|
|
|
const { proposal } = contribution;
|
|
|
|
const isConfirmed = contribution.status === 'CONFIRMED';
|
2019-01-09 13:32:51 -08:00
|
|
|
const isExpired = !isConfirmed && contribution.dateCreated < Date.now() / 1000 - ONE_DAY;
|
2019-01-09 11:07:50 -08:00
|
|
|
|
|
|
|
let tag;
|
|
|
|
let actions: React.ReactNode;
|
|
|
|
if (isConfirmed) {
|
2019-01-09 13:32:51 -08:00
|
|
|
actions = (
|
|
|
|
<a
|
|
|
|
href={formatTxExplorerUrl(contribution.txId as string)}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener nofollow"
|
|
|
|
>
|
|
|
|
View transaction
|
|
|
|
</a>
|
|
|
|
);
|
2019-01-09 11:07:50 -08:00
|
|
|
} else if (isExpired) {
|
|
|
|
tag = <Tag color="red">Expired</Tag>;
|
2019-01-09 13:32:51 -08:00
|
|
|
// TODO: Link to support
|
2019-01-09 11:07:50 -08:00
|
|
|
actions = <>
|
2019-01-09 13:32:51 -08:00
|
|
|
<Popconfirm
|
|
|
|
title="Are you sure?"
|
|
|
|
onConfirm={this.deleteContribution}
|
|
|
|
>
|
|
|
|
<a>Delete</a>
|
|
|
|
</Popconfirm>
|
2019-01-09 14:26:28 -08:00
|
|
|
<Link to="/support">Contact support</Link>
|
2019-01-09 11:07:50 -08:00
|
|
|
</>;
|
|
|
|
} else {
|
|
|
|
tag = <Tag color="orange">Pending</Tag>;
|
2019-01-09 14:26:28 -08:00
|
|
|
actions = (
|
|
|
|
<a onClick={() => this.props.showSendInstructions(contribution)}>
|
|
|
|
View send instructions
|
|
|
|
</a>
|
|
|
|
);
|
2019-01-09 11:07:50 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="ProfileContribution">
|
|
|
|
<div className="ProfileContribution-info">
|
|
|
|
<Link
|
|
|
|
className="ProfileContribution-info-title"
|
|
|
|
to={`/proposals/${proposal.proposalId}`}
|
|
|
|
>
|
|
|
|
{proposal.title} {tag}
|
|
|
|
</Link>
|
|
|
|
<div className="ProfileContribution-info-brief">{proposal.brief}</div>
|
|
|
|
</div>
|
|
|
|
<div className="ProfileContribution-state">
|
|
|
|
<div className="ProfileContribution-state-amount">
|
|
|
|
+<UnitDisplay value={contribution.amount} symbol="ZEC" />
|
|
|
|
</div>
|
|
|
|
<div className="ProfileContribution-state-actions">
|
|
|
|
{actions}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2019-01-09 13:32:51 -08:00
|
|
|
|
|
|
|
private deleteContribution = () => {
|
|
|
|
this.props.deleteContribution(this.props.userId, this.props.contribution.id);
|
|
|
|
};
|
2019-01-09 11:07:50 -08:00
|
|
|
}
|
2019-01-09 13:32:51 -08:00
|
|
|
|
|
|
|
export default connect<{}, DispatchProps, OwnProps, {}>(undefined, {
|
|
|
|
deleteContribution,
|
|
|
|
})(ProfileContribution);
|