Finish out UI for contribution.

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;
+  }
+}

frontend/client/components/ContributionModal/PaymentInfo.scss

@@ -1,3 +0,0 @@
-.PaymentInfo {
-  font-size: 1rem;
-}

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 */} <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>
 );

frontend/client/components/ContributionModal/index.tsx

@@ -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>