Merge branch 'dev' of https://github.com/CityOfZion/neon-wallet into …

…feature/offline-signing

.circleci/config.yml

@@ -80,6 +80,7 @@ jobs:
       - run: apt-get -y update
       - run: apt-get -y install libusb-1.0-0-dev icnsutils graphicsmagick libudev-dev
       - run: apt-get install --no-install-recommends -y gcc-multilib g++-multilib
+      - run: yarn install --frozen-lockfile --network-timeout 1000000 --network-concurrency 1
       - run: yarn assets
       - run: yarn build -w --x64
       - store_artifacts:
@@ -94,6 +95,7 @@ jobs:
           key: neon-wallet-dependencies-cache-{{ checksum "yarn.lock" }}
       - run: apt-get -y update
       - run: apt-get -y install libusb-1.0-0-dev icnsutils graphicsmagick libudev-dev
+      - run: yarn install --frozen-lockfile --network-timeout 1000000 --network-concurrency 1
       - run: yarn dist
       - store_artifacts:
           path: dist

__tests__/components/__snapshots__/Login.test.js.snap

@@ -20,7 +20,7 @@ exports[`Login renders without crashing 1`] = `
       />
     </div>
     <div
-      className="privateKeyLoginButtonRow"
+      className="loginButtonRow"
     >
       <Button
         disabled={true}

__tests__/store/reducers.test.js

@@ -4,6 +4,7 @@ describe('root reducer', () => {
   it('should combine all reducers', () => {
     expect(reducer({}, { type: '@@INIT' })).toEqual({
       spunky: expect.any(Object),
+      generateEncryptedWIF: expect.any(Object),
       generateWallet: expect.any(Object),
       notifications: expect.any(Object),
       claim: expect.any(Object),

app/components/Root/Routes.jsx

@@ -22,6 +22,7 @@ import TokenSale from '../../containers/TokenSale'
 import Encrypt from '../../containers/Encrypt'
 import NodeSelect from '../../containers/NodeSelect'
 import News from '../../containers/News'
+import EncryptQR from '../Settings/EncryptQR'
 import { ROUTES } from '../../core/constants'
 import OfflineSigningPrompt from '../../containers/OfflineSigningPrompt'
 
@@ -75,7 +76,11 @@ export default () => (
         path={ROUTES.DISPLAY_WALLET_QRS}
         render={props => <DisplayWalletAccountsQrCodes {...props} />}
       />
-
+      <Route
+        exact
+        path={ROUTES.DISPLAY_ENCRYPTED_WIF_QR}
+        render={props => <EncryptQR {...props} />}
+      />
       <Route exact path={ROUTES.SETTINGS} component={Settings} />
       <PrivateRoute
         exact

app/components/Settings/EncryptPanel/EncryptPanel.jsx

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react'
-import { noop } from 'lodash-es'
 import classNames from 'classnames'
 
 import { ROUTES } from '../../../core/constants'
@@ -11,33 +10,19 @@ import LockIcon from '../../../assets/icons/lock.svg'
 import CloseButton from '../../CloseButton'
 import styles from './EncryptPanel.scss'
 
-type State = {
-  encryptedkey: string,
-}
-
 type Props = {
   handleSubmit: Function,
   validatePassphraseLength: Function,
   isWIF: Function,
   className: string,
   title: string,
+  resetEncryptedWIF: Function,
+  encryptedWIF: string,
 }
 
-export default class EncryptPanel extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      encryptedkey: '',
-    }
-  }
-
-  static defaultProps = {
-    handleSubmit: noop,
-  }
-
+export default class EncryptPanel extends React.Component<Props> {
   render() {
-    const { className } = this.props
+    const { className, resetEncryptedWIF, encryptedWIF } = this.props
 
     return (
       <FullHeightPanel
@@ -48,42 +33,39 @@ export default class EncryptPanel extends React.Component<Props, State> {
         renderHeaderIcon={this.renderIcon}
         renderInstructions={this.renderInstructions}
       >
-        {this.renderPanelContent()}
+        {this.renderPanelContent(encryptedWIF, resetEncryptedWIF)}
       </FullHeightPanel>
     )
   }
 
   renderHeader = () => <span>{this.props.title}</span>
 
-  renderInstructions = () => {
-    const { encryptedkey } = this.state
-    if (!encryptedkey) {
+  renderInstructions = (encryptedWIF: string) => {
+    if (!encryptedWIF) {
       return <div>Choose a passphrase to encrypt an existing key</div>
     }
   }
 
-  renderPanelContent = () => {
-    const { encryptedkey } = this.state
-    if (!encryptedkey) {
+  renderPanelContent = (encryptedWIF: string, resetEncryptedWIF: Function) => {
+    if (!encryptedWIF) {
       return (
         <EncryptForm
           submitLabel="Generate Encrypted Key"
           onSubmit={this.onSubmit}
-          encryptPrivateKey={encryptedkey}
+          encryptPrivateKey={encryptedWIF}
           isWIF={this.props.isWIF}
           validatePassphraseLength={this.props.validatePassphraseLength}
         />
       )
     }
     return (
-      <EncryptSuccess encryptedKey={encryptedkey} handleReset={this.reset} />
+      <EncryptSuccess
+        encryptedKey={encryptedWIF}
+        handleReset={resetEncryptedWIF}
+      />
     )
   }
 
-  reset = () => {
-    this.setState({ encryptedkey: '' })
-  }
-
   renderIcon = () => (
     <div>
       <LockIcon />
@@ -96,7 +78,6 @@ export default class EncryptPanel extends React.Component<Props, State> {
     confirmPassphrase: string,
   ) => {
     const { handleSubmit } = this.props
-    const result = handleSubmit(privateKey, passphrase, confirmPassphrase)
-    this.setState({ encryptedkey: result })
+    handleSubmit(privateKey, passphrase, confirmPassphrase)
   }
 }

app/components/Settings/EncryptPanel/index.js

@@ -1 +1,27 @@
-export { default } from './EncryptPanel'
+// @flow
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { bindActionCreators } from 'redux'
+import {
+  getEncryptedWIF,
+  resetEncryptedWIF,
+} from '../../../modules/generateEncryptedWIF'
+import EncryptPanel from './EncryptPanel'
+
+const mapStateToProps = (state: Object) => ({
+  encryptedWIF: getEncryptedWIF(state),
+})
+
+const actionCreators = {
+  resetEncryptedWIF,
+}
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(actionCreators, dispatch)
+
+export default compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  ),
+)(EncryptPanel)

app/components/Settings/EncryptQR/EncryptQR.jsx

@@ -0,0 +1,89 @@
+// @flow
+import React, { Component } from 'react'
+
+import Button from '../../Button'
+import { ROUTES } from '../../../core/constants'
+import styles from './EncryptQR.scss'
+import FullHeightPanel from '../../Panel/FullHeightPanel'
+import CloseButton from '../../CloseButton'
+import BackButton from '../../BackButton'
+import ConfirmIcon from '../../../assets/icons/confirm.svg'
+import CopyIcon from '../../../assets/icons/copy.svg'
+import CheckIcon from '../../../assets/icons/check.svg'
+import AddIcon from '../../../assets/icons/add.svg'
+import withCopyCanvasToClipboard from '../../../hocs/withCopyCanvasToClipboard'
+
+type Props = {
+  encryptedWIF: string,
+  resetEncryptedWIF: Function,
+  handleCopy: (?HTMLCanvasElement, string, ?boolean) => Promise<void>,
+  handleCreateCanvas: (?HTMLCanvasElement, string) => any,
+  copied: boolean,
+}
+
+class EncryptQR extends Component<Props> {
+  encryptedCanvas: ?HTMLCanvasElement
+
+  componentDidMount() {
+    const { encryptedWIF } = this.props
+    this.props.handleCreateCanvas(this.encryptedCanvas, encryptedWIF)
+  }
+
+  render() {
+    const { resetEncryptedWIF } = this.props
+    return (
+      <FullHeightPanel
+        headerText="Encrypted QR Code"
+        renderInstructions={false}
+        headerContainerClassName={styles.headerIconMargin}
+        renderHeaderIcon={() => <CheckIcon />}
+        renderCloseButton={() => (
+          <div onClick={resetEncryptedWIF}>
+            <CloseButton routeTo={ROUTES.SETTINGS} />
+          </div>
+        )}
+        renderBackButton={() => <BackButton routeTo={ROUTES.ENCRYPT} />}
+        iconColor="#F7BC33"
+      >
+        <div
+          id="encrypted-wif-qr-codes"
+          className={styles.encryptedKeyContainer}
+        >
+          <div className={styles.qrContainer}>
+            <div className={styles.qr}>
+              <label> encrypted key </label>
+              <canvas
+                ref={node => {
+                  this.encryptedCanvas = node
+                }}
+              />
+              <Button
+                className={styles.submitButton}
+                renderIcon={() =>
+                  this.props.copied ? <ConfirmIcon /> : <CopyIcon />
+                }
+                type="submit"
+                onClick={() => {
+                  this.props.handleCopy(this.encryptedCanvas, 'encrypted-wif')
+                }}
+              >
+                Copy Code Image
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className={styles.qrPrintButtonContainer}>
+          <Button renderIcon={AddIcon} primary onClick={this.handlePrint}>
+            Print
+          </Button>
+        </div>
+      </FullHeightPanel>
+    )
+  }
+
+  handlePrint = () => {
+    window.print()
+  }
+}
+
+export default withCopyCanvasToClipboard(EncryptQR)

app/components/Settings/EncryptQR/EncryptQR.scss

@@ -0,0 +1,43 @@
+.encryptedKeyContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex: 1;
+}
+
+.qrContainer {
+  display: flex;
+  justify-content: space-around;
+  flex: 1;
+  margin-top: 24px;
+  width: 100%;
+
+  .qr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  canvas {
+    min-width: 200px;
+    min-height: 200px;
+  }
+
+  button {
+    margin-top: 12px;
+  }
+
+  label {
+    font-weight: bold;
+    font-size: 12px;
+    text-transform: uppercase;
+    opacity: var(--input-label-opacity);
+    color: var(--input-label);
+    margin-bottom: 10px;
+  }
+}
+
+.qrPrintButtonContainer {
+  margin-bottom: 50px;
+  width: 490px;
+}

app/components/Settings/EncryptQR/index.js

@@ -0,0 +1,25 @@
+// @flow
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import {
+  getEncryptedWIF,
+  resetEncryptedWIF,
+} from '../../../modules/generateEncryptedWIF'
+import EncryptQR from './EncryptQR'
+
+const mapStateToProps = (state: Object) => ({
+  encryptedWIF: getEncryptedWIF(state),
+})
+
+const actionCreators = {
+  resetEncryptedWIF,
+}
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(actionCreators, dispatch)
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(EncryptQR)

app/components/Settings/EncryptSuccess/EncryptSuccess.jsx

@@ -1,7 +1,10 @@
 // @flow
 import React from 'react'
+import { NavLink } from 'react-router-dom'
 import { noop } from 'lodash-es'
-
+import { ROUTES } from '../../../core/constants'
+import GridIcon from '../../../assets/icons/grid.svg'
+import AddIcon from '../../../assets/icons/add.svg'
 import LockIcon from '../../../assets/icons/lock.svg'
 import CopyToClipboard from '../../CopyToClipboard'
 import Button from '../../Button'
@@ -39,6 +42,21 @@ export default class EncryptSuccess extends React.Component<Props> {
               />
             </div>
           </div>
+          <div className={styles.buttonContainer}>
+            <Button renderIcon={AddIcon} primary onClick={this.handlePrint}>
+              Print
+            </Button>
+            <NavLink
+              id="display-encrypted-wif-qr"
+              exact
+              to={ROUTES.DISPLAY_ENCRYPTED_WIF_QR}
+            >
+              <Button primary renderIcon={() => <GridIcon />} type="submit">
+                Generate QR Code
+              </Button>
+            </NavLink>
+          </div>
+
           <Button
             className={styles.encryptResetButton}
             onClick={handleReset}
@@ -51,4 +69,8 @@ export default class EncryptSuccess extends React.Component<Props> {
       </section>
     )
   }
+
+  handlePrint = () => {
+    window.print()
+  }
 }