Finish out UI for contribution.
This commit is contained in:
parent
99fdedb816
commit
e6fb844b40
|
@ -0,0 +1,102 @@
|
|||
@import '~styles/variables.less';
|
||||
|
||||
.PaymentInfo {
|
||||
&-text {
|
||||
margin-top: -0.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&-types {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
&-uri {
|
||||
display: flex;
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(#000, 0.06);
|
||||
|
||||
&-qr {
|
||||
padding: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px rgba(#000, 0.2),
|
||||
0 2px 4px rgba(#000, 0.1);
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-fields {
|
||||
&-row {
|
||||
display: flex;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
margin-right: 0.75rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-address {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ant overrides
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background: rgba(#000, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.CopyInput {
|
||||
&.ant-form-item {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 0.3rem;
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-children {
|
||||
display: flex;
|
||||
|
||||
.ant-input {
|
||||
font-family: @code-family;
|
||||
font-size: 0.8rem;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
height: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-explain {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
.PaymentInfo {
|
||||
font-size: 1rem;
|
||||
}
|
|
@ -1,14 +1,31 @@
|
|||
import React from 'react';
|
||||
import { Form, Input, Spin, Button, Icon, message } from 'antd';
|
||||
import classnames from 'classnames';
|
||||
import { Form, Input, Spin, Button, Icon, Radio, message } from 'antd';
|
||||
import { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import QRCode from 'qrcode.react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { formatZcashURI, formatZcashCLI } from 'utils/formatters';
|
||||
import './PaymentInfo.scss';
|
||||
import './PaymentInfo.less';
|
||||
|
||||
type SendType = 'sapling' | 'transparent';
|
||||
|
||||
interface State {
|
||||
sendType: SendType;
|
||||
}
|
||||
|
||||
export default class PaymentInfo extends React.Component<{}, State> {
|
||||
state: State = {
|
||||
sendType: 'sapling',
|
||||
};
|
||||
|
||||
export default class PaymentInfo extends React.Component {
|
||||
render() {
|
||||
const addr = 'z123';
|
||||
const memo = 'memo123';
|
||||
const { sendType } = this.state;
|
||||
const addr = sendType === 'sapling'
|
||||
? 'ztqYvtzzkSXzZvNhEVMoMxTRZyktg6ZDNB4yUx7UY17r6gTM5wpgMVfM7Ky7W2r9crro5fFtVUkkjkvNdVRiff2oDPboaTG'
|
||||
: 'tmFuUWgfhVUt4Li9nXTjgAQ69dsftDffzNq';
|
||||
const memo = sendType === 'sapling'
|
||||
? 'memo123'
|
||||
: undefined;
|
||||
const amount = 123;
|
||||
|
||||
// Construct URI and CLI commands
|
||||
|
@ -21,23 +38,49 @@ export default class PaymentInfo extends React.Component {
|
|||
Thank you for contributing! Just send using whichever method works best for you,
|
||||
and we'll let you know when your contribution has been confirmed. Need help
|
||||
sending?
|
||||
{/* TODO: Help / FAQ page for sending */} <a>Click here</a>.
|
||||
{/* TODO: Help / FAQ page for sending */}
|
||||
{' '}
|
||||
<a>Click here</a>.
|
||||
</p>
|
||||
|
||||
<Radio.Group
|
||||
className="PaymentInfo-types"
|
||||
onChange={this.handleChangeSendType}
|
||||
value={sendType}
|
||||
>
|
||||
<Radio.Button value="sapling">
|
||||
Z Address (Private)
|
||||
</Radio.Button>
|
||||
<Radio.Button value="transparent">
|
||||
T Address (Public)
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
<div className="PaymentInfo-uri">
|
||||
<div className="PaymentInfo-uri-qr">
|
||||
{uri ? <QRCode value={uri} /> : <Spin />}
|
||||
</div>
|
||||
<div className="PaymentInfo-uri-info">
|
||||
<CopyInput label="Payment URI" value={uri} isTextarea />
|
||||
<Button type="ghost" size="large">
|
||||
<CopyInput
|
||||
className="PaymentInfo-uri-info-input"
|
||||
label="Payment URI"
|
||||
value={uri}
|
||||
isTextarea
|
||||
/>
|
||||
<Button type="ghost" size="large" href={uri} block>
|
||||
Open in Wallet <Icon type="link" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="PaymentInfo-fields">
|
||||
<div className="PaymentInfo-fields-row">
|
||||
<CopyInput label="Address" value={addr} />
|
||||
{memo && <CopyInput label="memo" value={memo} />}
|
||||
<CopyInput
|
||||
className="PaymentInfo-fields-row-address"
|
||||
label="Address"
|
||||
value={addr}
|
||||
/>
|
||||
{memo && <CopyInput label="Memo" value={memo} />}
|
||||
</div>
|
||||
<div className="PaymentInfo-fields-row">
|
||||
<CopyInput
|
||||
|
@ -50,17 +93,30 @@ export default class PaymentInfo extends React.Component {
|
|||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
handleChangeSendType = (ev: RadioChangeEvent) => {
|
||||
this.setState({ sendType: ev.target.value });
|
||||
};
|
||||
}
|
||||
|
||||
interface CopyInputProps {
|
||||
label: string;
|
||||
value: string;
|
||||
className?: string;
|
||||
help?: string;
|
||||
isTextarea?: boolean;
|
||||
}
|
||||
|
||||
const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, isTextarea }) => (
|
||||
<Form.Item label={label} help={help}>
|
||||
const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, className, isTextarea }) => (
|
||||
<Form.Item
|
||||
className={classnames(
|
||||
'CopyInput',
|
||||
className,
|
||||
isTextarea && 'is-textarea',
|
||||
)}
|
||||
label={label}
|
||||
help={help}
|
||||
>
|
||||
{isTextarea ? (
|
||||
<>
|
||||
<Input.TextArea value={value} readOnly rows={3} />
|
||||
|
@ -69,12 +125,12 @@ const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, isTextarea }
|
|||
</CopyToClipboard>
|
||||
</>
|
||||
) : (
|
||||
<Input.Group>
|
||||
<>
|
||||
<Input value={value} readOnly />
|
||||
<CopyToClipboard text={value} onCopy={() => message.success('Copied!', 2)}>
|
||||
<Button icon="copy" />
|
||||
</CopyToClipboard>
|
||||
</Input.Group>
|
||||
</>
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
|
|
|
@ -36,6 +36,7 @@ export default class ContributionModal extends React.Component<Props, State> {
|
|||
eye on it at the <a>contributions tab on your profile</a>.
|
||||
</>
|
||||
}
|
||||
style={{ width: '90%' }}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
@ -49,6 +50,8 @@ export default class ContributionModal extends React.Component<Props, State> {
|
|||
closable={hasSent}
|
||||
okText={hasSent ? 'Done' : 'I’ve sent it'}
|
||||
onOk={hasSent ? handleClose : this.confirmSend}
|
||||
onCancel={handleClose}
|
||||
centered
|
||||
>
|
||||
{content}
|
||||
</Modal>
|
||||
|
|
Loading…
Reference in New Issue