diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js index 99750486..2df806d6 100644 --- a/app/components/Onboarding/Syncing.js +++ b/app/components/Onboarding/Syncing.js @@ -1,16 +1,27 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import QRCode from 'qrcode.react' +import copy from 'copy-to-clipboard' import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' +import { showNotification } from 'notifications' import styles from './Syncing.scss' class Syncing extends Component { componentWillMount() { - this.props.fetchBlockHeight() + const { fetchBlockHeight, newAddress } = this.props + + fetchBlockHeight() + newAddress('np2wkh') } render() { - const { syncPercentage } = this.props + const { syncPercentage, address } = this.props + + const copyClicked = () => { + copy(address) + showNotification('Noice', 'Successfully copied to clipboard') + } return (
@@ -20,8 +31,32 @@ class Syncing extends Component {
+ +
+

Fund your Zap wallet

+

Might as well fund your wallet while you're waiting to sync.

+
+ +
+
+ +
+
+ {address} + copy +
+
+
-

Syncing to the blockchain...

+

Syncing to the blockchain...

({ lnd: state.lnd, onboarding: state.onboarding, + address: state.address, syncPercentage: lndSelectors.syncPercentage(state), passwordIsValid: onboardingSelectors.passwordIsValid(state), @@ -74,7 +77,10 @@ const mapStateToProps = state => ({ const mergeProps = (stateProps, dispatchProps, ownProps) => { const syncingProps = { fetchBlockHeight: dispatchProps.fetchBlockHeight, - syncPercentage: stateProps.syncPercentage + newAddress: dispatchProps.newAddress, + + syncPercentage: stateProps.syncPercentage, + address: stateProps.address.address } const connectionTypeProps = {