fix(onchain): fix the UX for on-chain payments to be like the UX for LN payments

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 &&
                 <span>
                   <section className={`${styles.spinner} ${styles.icon}`} />
-                  <section>Sending your lightning payment...</section>
+                  <section>Sending your transaction...</section>
                 </span>
             }
             {
@@ -83,6 +84,15 @@ const Wallet = ({
                   <section>Successfully sent payment</section>
                 </span>
             }
+            {
+              successTransactionScreen.show &&
+                <span>
+                  <section className={styles.icon}><AnimatedCheckmark /></section>
+                  <section>
+                    Successfully <button onClick={() => blockExplorer.showTransaction(successTransactionScreen.txid)}>sent</button> transaction
+                  </section>
+                </span>
+            }
           </div>
         </div>
       </div>
@@ -99,7 +109,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

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',

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) {

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,