add togglable QR code to wallet address component

lbryio · Jun 12, 2018 · 4107022 · 4107022
1 parent feffa76
commit 4107022
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/renderer/component/common/qr-code.jsx b/src/renderer/component/common/qr-code.jsx
@@ -6,22 +6,27 @@ import classnames from 'classnames';
 type Props = {
   value: string,
   paddingRight?: boolean,
+  paddingTop?: boolean,
+  size?: number,
 };
 
 class QRCode extends React.Component<Props> {
   static defaultProps = {
     paddingRight: false,
+    paddingTop: false,
+    size: 128,
   };
 
   render() {
-    const { value, paddingRight } = this.props;
+    const { value, paddingRight, paddingTop, size } = this.props;
     return (
       <div
         className={classnames('qr-code', {
           'qr-code--right-padding': paddingRight,
+          'qr-code--top-padding': paddingTop,
         })}
       >
-        <QRCodeElement value={value} />
+        <QRCodeElement value={value} size={size} />
       </div>
     );
   }

diff --git a/src/renderer/component/walletAddress/view.jsx b/src/renderer/component/walletAddress/view.jsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import Button from 'component/button';
 import Address from 'component/address';
+import QRCode from 'component/common/qr-code';
 import * as icons from 'constants/icons';
 
 type Props = {
@@ -12,6 +13,20 @@ type Props = {
 };
 
 class WalletAddress extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showQR: false,
+    };
+  }
+
+  toggleQR() {
+    this.setState({
+      showQR: !this.state.showQR,
+    });
+  }
+
   componentWillMount() {
     const { checkAddressIsMine, receiveAddress, getNewAddress } = this.props;
     if (!receiveAddress) {
@@ -23,6 +38,7 @@ class WalletAddress extends React.PureComponent<Props> {
 
   render() {
     const { receiveAddress, getNewAddress, gettingNewAddress } = this.props;
+    const { showQR } = this.state;
 
     return (
       <section className="card card--section">
@@ -43,7 +59,17 @@ class WalletAddress extends React.PureComponent<Props> {
             onClick={getNewAddress}
             disabled={gettingNewAddress}
           />
+          <Button
+            button="alt"
+            label={showQR ? __('Hide QR code') : __('Show QR code')}
+            onClick={this.toggleQR.bind(this)}
+          />
         </div>
+
+        <div className="card__content">
+          {showQR && <QRCode value={receiveAddress} paddingTop size={256} />}
+        </div>
+
         <div className="card__content">
           <div className="help">
             <p>

diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
@@ -359,4 +359,7 @@ p {
   &.qr-code--right-padding {
     padding-right: $spacing-vertical * 2/3;
   }
+  &.qr-code--top-padding {
+    padding-top: $spacing-vertical * 2/3;
+  }
 }