diff --git a/app/components/Onboarding/Alias.js b/app/components/Onboarding/Alias.js index 5894c0e8..41c5c757 100644 --- a/app/components/Onboarding/Alias.js +++ b/app/components/Onboarding/Alias.js @@ -4,22 +4,22 @@ import Isvg from 'react-inlinesvg' import zapLogo from 'icons/zap_logo.svg' import styles from './Alias.scss' -const Alias = ({ alias, setAlias }) => { - console.log('alias: ', alias) - console.log('setAlias: ', setAlias) - - return ( -
- input && input.focus()} - /> -
- ) -} +const Alias = ({ alias, updateAlias }) => ( +
+ input && input.focus()} + value={alias} + onChange={event => updateAlias(event.target.value)} + /> +
+) -Alias.propTypes = {} +Alias.propTypes = { + alias: PropTypes.string.isRequired, + updateAlias: PropTypes.func.isRequired +} export default Alias \ No newline at end of file diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js index 7b42a451..84ff7ff0 100644 --- a/app/components/Onboarding/FormContainer.js +++ b/app/components/Onboarding/FormContainer.js @@ -30,12 +30,12 @@ const FormContainer = ({ title, description, back, next, children }) => {
{ - back &&
Back
+ back &&
Back
}
{ - next &&
Next
+ next &&
Next
}
diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js index 9c568cf1..59d01bc4 100644 --- a/app/components/Onboarding/Onboarding.js +++ b/app/components/Onboarding/Onboarding.js @@ -13,13 +13,15 @@ class Onboarding extends Component { render() { const { onboarding: { - step + step, + alias }, + submit, + aliasProps, syncingProps } = this.props const renderStep = () => { - console.log('step: ', step) switch(step) { case 1: return ( @@ -27,9 +29,9 @@ class Onboarding extends Component { title={'1. What should we call you?'} description={'Set your nickname to help others connect with you on the Lightning Network'} back={null} - next={() => console.log('alias next')} + next={() => submit(alias)} > - + ) default: diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js index 9448b474..1a8dfa0e 100644 --- a/app/components/Onboarding/Syncing.js +++ b/app/components/Onboarding/Syncing.js @@ -24,9 +24,9 @@ class Syncing extends Component {

Syncing to the blockchain...

-
+
-

{syncPercentage.toString().length > 0 && `${syncPercentage}%`}

+

{isNaN(parseInt(syncPercentage)) || syncPercentage.toString().length === 0 ? '' : `${syncPercentage}%`}

diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index dcd0021c..50f5af84 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -32,7 +32,8 @@ class Wallet extends Component { } = this.props const { modalOpen, qrCodeType } = this.state - const usdAmount = parseFloat(btc.satoshisToUsd(balance.walletBalance, currentTicker.price_usd)) + const usdAmount = btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd) + console.log('usdAmount: ', usdAmount) const changeQrCode = () => { const qrCodeNum = this.state.qrCodeType === 1 ? 2 : 1 diff --git a/app/containers/Root.js b/app/containers/Root.js index 50f5e39e..9e96c1bc 100644 --- a/app/containers/Root.js +++ b/app/containers/Root.js @@ -7,10 +7,15 @@ import PropTypes from 'prop-types' import LoadingBolt from '../components/LoadingBolt' import Onboarding from '../components/Onboarding' import Syncing from '../components/Onboarding/Syncing' +import { updateAlias, changeStep, submit } from '../reducers/onboarding' import { fetchBlockHeight, lndSelectors } from '../reducers/lnd' import Routes from '../routes' const mapDispatchToProps = { + updateAlias, + changeStep, + submit, + fetchBlockHeight } @@ -27,11 +32,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { syncPercentage: stateProps.syncPercentage } + const aliasProps = { + updateAlias: dispatchProps.updateAlias, + alias: stateProps.onboarding.alias + } + return { ...stateProps, ...dispatchProps, ...ownProps, + aliasProps, syncingProps } } @@ -39,19 +50,32 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const Root = ({ store, history, + + lnd, onboarding, - syncingProps + submit, + aliasProps, + syncingProps, + updateAlias, + changeStep, }) => { // If we are syncing show the syncing screen if (!onboarding.onboarded) { return ( ) } + // If we are syncing show the syncing screen + if (lnd.syncing) { + return + } + // Don't launch the app without gRPC connection if (!lnd.grpcStarted) { return } diff --git a/app/main.dev.js b/app/main.dev.js index 8537df95..9cb7b5bd 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -83,6 +83,19 @@ const sendLndSyncing = () => { }, 1000) } +const sendStartOnboarding = () => { + const sendStartOnboardingInterval = setInterval(() => { + if (didFinishLoad) { + clearInterval(sendStartOnboardingInterval) + + if (mainWindow) { + console.log('STARTING ONBOARDING') + mainWindow.webContents.send('startOnboarding') + } + } + }, 1000) +} + // Send the front end event letting them know the gRPC connection has started const sendGrpcConnected = () => { const sendGrpcConnectedInterval = setInterval(() => { @@ -126,7 +139,7 @@ const sendLndSynced = () => { } // Starts the LND node -const startLnd = () => { +const startLnd = (alias) => { let lndPath if (process.env.NODE_ENV === 'development') { @@ -146,7 +159,8 @@ const startLnd = () => { '--neutrino.connect=127.0.0.1:18333', '--autopilot.active', '--debuglevel=debug', - '--noencryptwallet' + '--noencryptwallet', + `--alias=${alias}` ] ) .on('error', error => console.log(`lnd error: ${error}`)) @@ -249,9 +263,10 @@ app.on('ready', async () => { // No LND process was found if (!results.length) { - // Assign path to certs to certPath - sendLndSyncing() + // let the application know onboarding has started + sendStartOnboarding() + // Assign path to certs to certPath switch (os.platform()) { case 'darwin': certPath = path.join(homedir, 'Library/Application Support/Lnd/tls.cert') @@ -267,7 +282,12 @@ app.on('ready', async () => { } // Start LND - startLnd() + // startLnd() + // once the onboarding has finished we wanna let the application we have started syncing and start LND + ipcMain.on('onboardingFinished', (event, { alias }) => { + sendLndSyncing() + startLnd(alias) + }) } else { // An LND process was found, no need to start our own console.log('LND ALREADY RUNNING') diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js index 8ea03f28..c8569d78 100644 --- a/app/reducers/ipc.js +++ b/app/reducers/ipc.js @@ -35,6 +35,8 @@ import { import { receiveDescribeNetwork, receiveQueryRoutes, receiveInvoiceAndQueryRoutes } from './network' +import { startOnboarding } from './onboarding' + // Import all receiving IPC event handlers and pass them into createIpc const ipc = createIpc({ lndSyncing, @@ -91,7 +93,9 @@ const ipc = createIpc({ receiveDescribeNetwork, receiveQueryRoutes, - receiveInvoiceAndQueryRoutes + receiveInvoiceAndQueryRoutes, + + startOnboarding }) export default ipc diff --git a/app/reducers/onboarding.js b/app/reducers/onboarding.js index 07e00aa1..4fb5665f 100644 --- a/app/reducers/onboarding.js +++ b/app/reducers/onboarding.js @@ -1,20 +1,60 @@ +import { ipcRenderer } from 'electron' + // ------------------------------------ // Constants // ------------------------------------ +export const UPDATE_ALIAS = 'UPDATE_ALIAS' + +export const CHANGE_STEP = 'CHANGE_STEP' + +export const ONBOARDING_STARTED = 'ONBOARDING_STARTED' +export const ONBOARDING_FINISHED = 'ONBOARDING_FINISHED' + +// ------------------------------------ +// Actions +// ------------------------------------ +export function updateAlias(alias) { + return { + type: UPDATE_ALIAS, + alias + } +} +export function changeStep(step) { + return { + type: CHANGE_STEP, + step + } +} + +export function submit(alias) { + // alert the app we're done onboarding and it's cool to start LND + ipcRenderer.send('onboardingFinished', { alias }) + + return { + type: ONBOARDING_FINISHED + } +} + +export const startOnboarding = () => (dispatch) => { + dispatch({ type: ONBOARDING_STARTED }) +} // ------------------------------------ // Action Handlers // ------------------------------------ const ACTION_HANDLERS = { - + [UPDATE_ALIAS]: (state, { alias }) => ({ ...state, alias }), + [CHANGE_STEP]: (state, { step }) => ({ ...state, step }), + [ONBOARDING_STARTED]: state => ({ ...state, onboarded: false }), + [ONBOARDING_FINISHED]: state => ({ ...state, onboarded: true }) } // ------------------------------------ // Reducer // ------------------------------------ const initialState = { - onboarded: false, + onboarded: true, step: 1, alias: '' }