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 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 QRCode from 'qrcode.react';
|
||||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||||
import { formatZcashURI, formatZcashCLI } from 'utils/formatters';
|
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() {
|
render() {
|
||||||
const addr = 'z123';
|
const { sendType } = this.state;
|
||||||
const memo = 'memo123';
|
const addr = sendType === 'sapling'
|
||||||
|
? 'ztqYvtzzkSXzZvNhEVMoMxTRZyktg6ZDNB4yUx7UY17r6gTM5wpgMVfM7Ky7W2r9crro5fFtVUkkjkvNdVRiff2oDPboaTG'
|
||||||
|
: 'tmFuUWgfhVUt4Li9nXTjgAQ69dsftDffzNq';
|
||||||
|
const memo = sendType === 'sapling'
|
||||||
|
? 'memo123'
|
||||||
|
: undefined;
|
||||||
const amount = 123;
|
const amount = 123;
|
||||||
|
|
||||||
// Construct URI and CLI commands
|
// 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,
|
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
|
and we'll let you know when your contribution has been confirmed. Need help
|
||||||
sending?
|
sending?
|
||||||
{/* TODO: Help / FAQ page for sending */} <a>Click here</a>.
|
{/* TODO: Help / FAQ page for sending */}
|
||||||
|
{' '}
|
||||||
|
<a>Click here</a>.
|
||||||
</p>
|
</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">
|
||||||
<div className="PaymentInfo-uri-qr">
|
<div className="PaymentInfo-uri-qr">
|
||||||
{uri ? <QRCode value={uri} /> : <Spin />}
|
{uri ? <QRCode value={uri} /> : <Spin />}
|
||||||
</div>
|
</div>
|
||||||
<div className="PaymentInfo-uri-info">
|
<div className="PaymentInfo-uri-info">
|
||||||
<CopyInput label="Payment URI" value={uri} isTextarea />
|
<CopyInput
|
||||||
<Button type="ghost" size="large">
|
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" />
|
Open in Wallet <Icon type="link" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="PaymentInfo-fields">
|
<div className="PaymentInfo-fields">
|
||||||
<div className="PaymentInfo-fields-row">
|
<div className="PaymentInfo-fields-row">
|
||||||
<CopyInput label="Address" value={addr} />
|
<CopyInput
|
||||||
{memo && <CopyInput label="memo" value={memo} />}
|
className="PaymentInfo-fields-row-address"
|
||||||
|
label="Address"
|
||||||
|
value={addr}
|
||||||
|
/>
|
||||||
|
{memo && <CopyInput label="Memo" value={memo} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="PaymentInfo-fields-row">
|
<div className="PaymentInfo-fields-row">
|
||||||
<CopyInput
|
<CopyInput
|
||||||
|
@ -50,17 +93,30 @@ export default class PaymentInfo extends React.Component {
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleChangeSendType = (ev: RadioChangeEvent) => {
|
||||||
|
this.setState({ sendType: ev.target.value });
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CopyInputProps {
|
interface CopyInputProps {
|
||||||
label: string;
|
label: string;
|
||||||
value: string;
|
value: string;
|
||||||
|
className?: string;
|
||||||
help?: string;
|
help?: string;
|
||||||
isTextarea?: boolean;
|
isTextarea?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, isTextarea }) => (
|
const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, className, isTextarea }) => (
|
||||||
<Form.Item label={label} help={help}>
|
<Form.Item
|
||||||
|
className={classnames(
|
||||||
|
'CopyInput',
|
||||||
|
className,
|
||||||
|
isTextarea && 'is-textarea',
|
||||||
|
)}
|
||||||
|
label={label}
|
||||||
|
help={help}
|
||||||
|
>
|
||||||
{isTextarea ? (
|
{isTextarea ? (
|
||||||
<>
|
<>
|
||||||
<Input.TextArea value={value} readOnly rows={3} />
|
<Input.TextArea value={value} readOnly rows={3} />
|
||||||
|
@ -69,12 +125,12 @@ const CopyInput: React.SFC<CopyInputProps> = ({ label, value, help, isTextarea }
|
||||||
</CopyToClipboard>
|
</CopyToClipboard>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Input.Group>
|
<>
|
||||||
<Input value={value} readOnly />
|
<Input value={value} readOnly />
|
||||||
<CopyToClipboard text={value} onCopy={() => message.success('Copied!', 2)}>
|
<CopyToClipboard text={value} onCopy={() => message.success('Copied!', 2)}>
|
||||||
<Button icon="copy" />
|
<Button icon="copy" />
|
||||||
</CopyToClipboard>
|
</CopyToClipboard>
|
||||||
</Input.Group>
|
</>
|
||||||
)}
|
)}
|
||||||
</Form.Item>
|
</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>.
|
eye on it at the <a>contributions tab on your profile</a>.
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
style={{ width: '90%' }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
@ -49,6 +50,8 @@ export default class ContributionModal extends React.Component<Props, State> {
|
||||||
closable={hasSent}
|
closable={hasSent}
|
||||||
okText={hasSent ? 'Done' : 'I’ve sent it'}
|
okText={hasSent ? 'Done' : 'I’ve sent it'}
|
||||||
onOk={hasSent ? handleClose : this.confirmSend}
|
onOk={hasSent ? handleClose : this.confirmSend}
|
||||||
|
onCancel={handleClose}
|
||||||
|
centered
|
||||||
>
|
>
|
||||||
{content}
|
{content}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
Loading…
Reference in New Issue