diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index a555ebe0..74de945d 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { FaAngleDown } from 'react-icons/lib/fa'
import Isvg from 'react-inlinesvg'
-import { btc } from 'utils'
+import { btc, blockExplorer } from 'utils'
import Value from 'components/Value'
import AnimatedCheckmark from 'components/AnimatedCheckmark'
@@ -22,7 +22,8 @@ const Wallet = ({
openPayForm,
openRequestForm,
showPayLoadingScreen,
- showSuccessPayScreen
+ showSuccessPayScreen,
+ successTransactionScreen
}) => {
const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
@@ -73,7 +74,7 @@ const Wallet = ({
showPayLoadingScreen &&
- Sending your lightning payment...
+ Sending your transaction...
}
{
@@ -83,6 +84,18 @@ const Wallet = ({
Successfully sent payment
}
+ {
+ successTransactionScreen.show &&
+
+
+
+ {
+ // TODO(jimmymow): remove this
+ // eslint-disable-next-line
+ }Successfully blockExplorer.showTransaction(successTransactionScreen.txid)}>sent transaction
+
+
+ }
@@ -99,7 +112,8 @@ Wallet.propTypes = {
openRequestForm: PropTypes.func.isRequired,
openReceiveModal: PropTypes.func.isRequired,
showPayLoadingScreen: PropTypes.bool.isRequired,
- showSuccessPayScreen: PropTypes.bool.isRequired
+ showSuccessPayScreen: PropTypes.bool.isRequired,
+ successTransactionScreen: PropTypes.object.isRequired
}
export default Wallet
diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss
index 5dc92f5e..2ad5670f 100644
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@@ -196,3 +196,8 @@
transform: rotate(360deg);
}
}
+
+.txLink {
+ text-decoration: underline;
+ cursor: pointer;
+}
diff --git a/app/main.dev.js b/app/main.dev.js
index 4a0dd49b..240cd09c 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -164,7 +164,7 @@ const startLnd = (alias, autopilot) => {
'--bitcoin.active',
'--bitcoin.testnet',
'--bitcoin.node=neutrino',
- '--neutrino.connect=btcd0.lightning.computer:18333',
+ '--neutrino.connect=188.166.148.62:18333',
'--neutrino.addpeer=btcd.jackmallers.com:18333',
'--neutrino.addpeer=159.65.48.139:18333',
'--neutrino.connect=127.0.0.1:18333',
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index c5f69e86..fe6bc7ec 100644
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@@ -5,7 +5,6 @@ import { newAddress } from './address'
import { fetchBalance } from './balance'
import { setFormType } from './form'
import { resetPayForm } from './payform'
-import { showModal } from './modal'
import { setError } from './error'
// ------------------------------------
@@ -21,6 +20,9 @@ export const TRANSACTION_FAILED = 'TRANSACTION_FAILED'
export const ADD_TRANSACTION = 'ADD_TRANSACTION'
+export const SHOW_SUCCESS_TRANSACTION_SCREEN = 'SHOW_SUCCESS_TRANSACTION_SCREEN'
+export const HIDE_SUCCESS_TRANSACTION_SCREEN = 'HIDE_SUCCESS_TRANSACTION_SCREEN'
+
// ------------------------------------
// Actions
// ------------------------------------
@@ -36,6 +38,19 @@ export function sendTransaction() {
}
}
+export function showSuccessTransactionScreen(txid) {
+ return {
+ type: SHOW_SUCCESS_TRANSACTION_SCREEN,
+ txid
+ }
+}
+
+export function hideSuccessTransactionScreen() {
+ return {
+ type: HIDE_SUCCESS_TRANSACTION_SCREEN
+ }
+}
+
// Send IPC event for payments
export const fetchTransactions = () => (dispatch) => {
dispatch(getTransactions())
@@ -51,22 +66,27 @@ export const sendCoins = ({
// backend needs amount in satoshis no matter what currency we are using
const amount = btc.convert(currency, 'sats', value)
+ // submit the transaction to LND
dispatch(sendTransaction())
ipcRenderer.send('lnd', { msg: 'sendCoins', data: { amount, addr } })
+
+ // Close the form modal once the payment was sent to LND
+ // we will do the loading/success UX on the main page
+ // so we aren't blocking the user
+ dispatch(setFormType(null))
}
// Receive IPC event for successful payment
// TODO: Add payment to state, not a total re-fetch
-export const transactionSuccessful = (event, { amount, addr, txid }) => (dispatch) => {
+export const transactionSuccessful = (event, { txid }) => (dispatch) => {
// Get the new list of transactions (TODO dont do an entire new fetch)
dispatch(fetchTransactions())
- // Close the form modal once the payment was succesful
- dispatch(setFormType(null))
// Show successful payment state
- dispatch(showModal('SUCCESSFUL_SEND_COINS', { txid, amount, addr }))
- // TODO: Add successful on-chain payment to payments list once payments list supports on-chain and LN
- // dispatch({ type: PAYMENT_SUCCESSFULL, payment: { amount, addr, txid, pending: true } })
dispatch({ type: TRANSACTION_SUCCESSFULL })
+
+ // Show successful tx state for 5 seconds
+ dispatch(showSuccessTransactionScreen(txid))
+ setTimeout(() => dispatch(hideSuccessTransactionScreen()), 5000)
// Fetch new balance
dispatch(fetchBalance())
// Reset the payment form
@@ -111,7 +131,10 @@ const ACTION_HANDLERS = {
...state,
transactions: [transaction, ...state.transactions]
}
- )
+ ),
+
+ [SHOW_SUCCESS_TRANSACTION_SCREEN]: (state, { txid }) => ({ ...state, successTransactionScreen: { show: true, txid } }),
+ [HIDE_SUCCESS_TRANSACTION_SCREEN]: state => ({ ...state, successTransactionScreen: { show: false, txid: '' } })
}
// ------------------------------------
@@ -120,7 +143,11 @@ const ACTION_HANDLERS = {
const initialState = {
sendingTransaction: false,
transactionLoading: false,
- transactions: []
+ transactions: [],
+ successTransactionScreen: {
+ show: false,
+ txid: ''
+ }
}
export default function transactionReducer(state = initialState, action) {
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index cda3c15d..8f2b1f75 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -53,6 +53,7 @@ const mapStateToProps = state => ({
info: state.info,
payment: state.payment,
+ transaction: state.transaction,
invoice: state.invoice,
invoices: invoiceSelectors.invoices(state),
@@ -79,6 +80,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
currentTicker: stateProps.currentTicker,
showPayLoadingScreen: stateProps.showPayLoadingScreen,
showSuccessPayScreen: stateProps.payment.showSuccessPayScreen,
+ successTransactionScreen: stateProps.transaction.successTransactionScreen,
setCurrency: dispatchProps.setCurrency,
newAddress: dispatchProps.newAddress,