From e6fb844b40da05e386a8c4a24a9db55d37c454a5 Mon Sep 17 00:00:00 2001
From: Will O'Beirne
Date: Mon, 7 Jan 2019 00:42:24 -0500
Subject: [PATCH] Finish out UI for contribution.
---
.../ContributionModal/PaymentInfo.less | 102 ++++++++++++++++++
.../ContributionModal/PaymentInfo.scss | 3 -
.../ContributionModal/PaymentInfo.tsx | 84 ++++++++++++---
.../components/ContributionModal/index.tsx | 3 +
4 files changed, 175 insertions(+), 17 deletions(-)
create mode 100644 frontend/client/components/ContributionModal/PaymentInfo.less
delete mode 100644 frontend/client/components/ContributionModal/PaymentInfo.scss
diff --git a/frontend/client/components/ContributionModal/PaymentInfo.less b/frontend/client/components/ContributionModal/PaymentInfo.less
new file mode 100644
index 00000000..919e68a6
--- /dev/null
+++ b/frontend/client/components/ContributionModal/PaymentInfo.less
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/frontend/client/components/ContributionModal/PaymentInfo.scss b/frontend/client/components/ContributionModal/PaymentInfo.scss
deleted file mode 100644
index af783517..00000000
--- a/frontend/client/components/ContributionModal/PaymentInfo.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.PaymentInfo {
- font-size: 1rem;
-}
\ No newline at end of file
diff --git a/frontend/client/components/ContributionModal/PaymentInfo.tsx b/frontend/client/components/ContributionModal/PaymentInfo.tsx
index 00a2de01..fb048846 100644
--- a/frontend/client/components/ContributionModal/PaymentInfo.tsx
+++ b/frontend/client/components/ContributionModal/PaymentInfo.tsx
@@ -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 */} Click here.
+ {/* TODO: Help / FAQ page for sending */}
+ {' '}
+ Click here.
+
+
+
+ Z Address (Private)
+
+
+ T Address (Public)
+
+
+
{uri ? : }
-
-
+
-
- {memo && }
+
+ {memo && }
);
}
+
+ 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 = ({ label, value, help, isTextarea }) => (
-
+const CopyInput: React.SFC = ({ label, value, help, className, isTextarea }) => (
+
{isTextarea ? (
<>
@@ -69,12 +125,12 @@ const CopyInput: React.SFC = ({ label, value, help, isTextarea }
>
) : (
-
+ <>
message.success('Copied!', 2)}>
-
+ >
)}
);
diff --git a/frontend/client/components/ContributionModal/index.tsx b/frontend/client/components/ContributionModal/index.tsx
index c6b3f36f..cdfd70dc 100644
--- a/frontend/client/components/ContributionModal/index.tsx
+++ b/frontend/client/components/ContributionModal/index.tsx
@@ -36,6 +36,7 @@ export default class ContributionModal extends React.Component {
eye on it at the contributions tab on your profile.
>
}
+ style={{ width: '90%' }}
/>
);
} else {
@@ -49,6 +50,8 @@ export default class ContributionModal extends React.Component {
closable={hasSent}
okText={hasSent ? 'Done' : 'I’ve sent it'}
onOk={hasSent ? handleClose : this.confirmSend}
+ onCancel={handleClose}
+ centered
>
{content}