111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Link } from 'react-router-dom';
|
|
import { Tag, Popconfirm, Tooltip } from 'antd';
|
|
import UnitDisplay from 'components/UnitDisplay';
|
|
import { ONE_DAY } from 'utils/time';
|
|
import { formatTxExplorerUrl } from 'utils/formatters';
|
|
import { deleteContribution } from 'modules/users/actions';
|
|
import { UserContribution } from 'types';
|
|
import './ProfileContribution.less';
|
|
import { PROPOSAL_STAGE } from 'api/constants';
|
|
|
|
interface OwnProps {
|
|
userId: number;
|
|
contribution: UserContribution;
|
|
showSendInstructions(contribution: UserContribution): void;
|
|
}
|
|
|
|
interface DispatchProps {
|
|
deleteContribution: typeof deleteContribution;
|
|
}
|
|
|
|
type Props = OwnProps & DispatchProps;
|
|
|
|
class ProfileContribution extends React.Component<Props> {
|
|
render() {
|
|
const { contribution } = this.props;
|
|
const { proposal, private: isPrivate } = contribution;
|
|
const isConfirmed = contribution.status === 'CONFIRMED';
|
|
const isExpired =
|
|
(!isConfirmed && contribution.dateCreated < Date.now() / 1000 - ONE_DAY) ||
|
|
(proposal.stage === PROPOSAL_STAGE.CANCELED ||
|
|
proposal.stage === PROPOSAL_STAGE.FAILED);
|
|
|
|
let tag;
|
|
let actions: React.ReactNode;
|
|
if (isConfirmed) {
|
|
actions = (
|
|
<a
|
|
href={formatTxExplorerUrl(contribution.txId as string)}
|
|
target="_blank"
|
|
rel="noopener nofollow"
|
|
>
|
|
View transaction
|
|
</a>
|
|
);
|
|
} else if (isExpired) {
|
|
tag = <Tag color="red">Expired</Tag>;
|
|
actions = (
|
|
<>
|
|
<Popconfirm title="Are you sure?" onConfirm={this.deleteContribution}>
|
|
<a>Delete</a>
|
|
</Popconfirm>
|
|
<Link to="/contact">Contact support</Link>
|
|
</>
|
|
);
|
|
} else {
|
|
tag = <Tag color="orange">Pending</Tag>;
|
|
actions = (
|
|
<a onClick={() => this.props.showSendInstructions(contribution)}>
|
|
View send instructions
|
|
</a>
|
|
);
|
|
}
|
|
|
|
const privateTag = isPrivate ? (
|
|
<Tooltip
|
|
title={
|
|
<>
|
|
Other users will <b>not</b> be able to see that you made this contribution.
|
|
</>
|
|
}
|
|
>
|
|
<Tag>Private</Tag>
|
|
</Tooltip>
|
|
) : null;
|
|
|
|
return (
|
|
<div className="ProfileContribution">
|
|
<div className="ProfileContribution-info">
|
|
<Link
|
|
className="ProfileContribution-info-title"
|
|
to={`/proposals/${proposal.proposalId}`}
|
|
>
|
|
{proposal.title} {privateTag}
|
|
{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>
|
|
);
|
|
}
|
|
|
|
private deleteContribution = () => {
|
|
this.props.deleteContribution(this.props.userId, this.props.contribution.id);
|
|
};
|
|
}
|
|
|
|
export default connect<{}, DispatchProps, OwnProps, {}>(
|
|
undefined,
|
|
{
|
|
deleteContribution,
|
|
},
|
|
)(ProfileContribution);
|