102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
import { Form, Input, Button, message, Alert, Divider } from 'antd';
|
||
import { updateUserSettings } from 'api/api';
|
||
import { isValidAddress } from 'utils/validators';
|
||
import './SetRefundAddress.less';
|
||
|
||
interface OwnProps {
|
||
userid: number;
|
||
onSetRefundAddress(): void;
|
||
onSetNoRefund(): void;
|
||
}
|
||
|
||
type Props = OwnProps;
|
||
|
||
const STATE = {
|
||
refundAddress: '',
|
||
isSaving: false,
|
||
};
|
||
|
||
type State = typeof STATE;
|
||
|
||
export default class SetRefundAddress extends React.Component<Props, State> {
|
||
state: State = { ...STATE };
|
||
|
||
render() {
|
||
const { refundAddress, isSaving } = this.state;
|
||
|
||
let status: 'validating' | 'error' | undefined;
|
||
let help;
|
||
if (refundAddress && !isValidAddress(refundAddress)) {
|
||
status = 'error';
|
||
help = 'That doesn’t look like a valid address';
|
||
}
|
||
|
||
return (
|
||
<Form className="SetRefundAddress" layout="vertical" onSubmit={this.handleSubmit}>
|
||
<Alert
|
||
type="info"
|
||
message="Please set a refund address"
|
||
description={`
|
||
If the proposal fails to reach its funding goal or gets
|
||
canceled, we need an address to refund your contribution to.
|
||
You’ll only need to set this once, and can change it later from
|
||
the Settings page.
|
||
`}
|
||
/>
|
||
|
||
<Form.Item label="Refund address" validateStatus={status} help={help}>
|
||
<Input
|
||
value={refundAddress}
|
||
placeholder="Z or T address"
|
||
size="large"
|
||
onChange={this.handleChange}
|
||
disabled={isSaving}
|
||
autoFocus
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Button
|
||
type="primary"
|
||
htmlType="submit"
|
||
size="large"
|
||
disabled={!refundAddress || isSaving || !!status}
|
||
loading={isSaving}
|
||
block
|
||
>
|
||
Set refund address & continue
|
||
</Button>
|
||
|
||
<Divider>or</Divider>
|
||
|
||
<Button type="danger" block onClick={this.props.onSetNoRefund}>
|
||
I don't want a refund, consider it a donation instead
|
||
</Button>
|
||
</Form>
|
||
);
|
||
}
|
||
|
||
private handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
||
this.setState({ refundAddress: ev.currentTarget.value });
|
||
};
|
||
|
||
private handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
|
||
ev.preventDefault();
|
||
const { userid } = this.props;
|
||
const { refundAddress } = this.state;
|
||
if (!refundAddress) {
|
||
return;
|
||
}
|
||
|
||
this.setState({ isSaving: true });
|
||
try {
|
||
await updateUserSettings(userid, { refundAddress });
|
||
this.props.onSetRefundAddress();
|
||
} catch (err) {
|
||
console.error(err);
|
||
message.error(err.message || err.toString(), 5);
|
||
this.setState({ isSaving: false });
|
||
}
|
||
};
|
||
}
|