feature(request): make request in both btc and usd

app/reducers/form.js

@@ -1,6 +1,10 @@
 // Constants
 // ------------------------------------
 export const SET_FORM = 'SET_FORM'
+export const SET_AMOUNT = 'SET_AMOUNT'
+export const SET_MESSAGE = 'SET_MESSAGE'
+export const SET_PUBKEY = 'SET_PUBKEY'
+export const RESET_FORM = 'RESET_FORM'
 
 // ------------------------------------
 // Actions
@@ -13,11 +17,42 @@ export function setForm({ modalOpen, formType }) {
   }
 }
 
+export function setAmount(amount) {
+  return {
+    type: SET_AMOUNT,
+    amount
+  }
+}
+
+export function setMessage(message) {
+  return {
+    type: SET_MESSAGE,
+    message
+  }
+}
+
+export function setPubkey(pubkey) {
+  return {
+    type: SET_PUBKEY,
+    pubkey
+  }
+}
+
+export function resetForm() {
+  return {
+    type: RESET_FORM
+  }
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_FORM]: (state, { modalOpen, formType }) => ({ ...state, modalOpen, formType })
+  [SET_FORM]: (state, { modalOpen, formType }) => ({ ...state, modalOpen, formType }),
+  [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
+  [SET_MESSAGE]: (state, { message }) => ({ ...state, message }),
+  [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }),
+  [RESET_FORM]: () => (initialState)
 }
 
 // ------------------------------------
@@ -25,7 +60,10 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   modalOpen: false,
-  formType: 'pay'
+  formType: 'pay',
+  amount: '0',
+  message: '',
+  pubkey: ''
 }
 
 export default function formReducer(state = initialState, action) {

app/reducers/index.js

@@ -7,6 +7,7 @@ import balance from './balance'
 import payment from './payment'
 import peers from './peers'
 import form from './form'
+import invoice from './invoice'
 import activity from './activity'
 
 const rootReducer = combineReducers({
@@ -17,6 +18,7 @@ const rootReducer = combineReducers({
   payment,
   peers,
   form,
+  invoice,
   activity
 })
 

app/reducers/invoice.js

@@ -0,0 +1,97 @@
+import { callApi } from '../api'
+import { btc, usd } from '../utils'
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const GET_INVOICE = 'GET_INVOICE'
+export const RECEIVE_INVOICE = 'RECEIVE_INVOICE'
+export const SEND_INVOICE = 'SEND_INVOICE'
+export const INVOICE_SUCCESSFUL = 'INVOICE_SUCCESSFUL'
+export const INVOICE_FAILED = 'INVOICE_FAILED'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function getInvoice() {
+  return {
+    type: GET_INVOICE
+  }
+}
+
+export function receiveInvoice(data) {
+  return {
+    type: RECEIVE_INVOICE,
+    data
+  }
+}
+
+export function sendInvoice() {
+  return {
+    type: SEND_INVOICE
+  }
+}
+
+export function invoiceSuccessful(data) {
+  return {
+    type: INVOICE_SUCCESSFUL,
+    data
+  }
+}
+
+export function invoiceFailed() {
+  return {
+    type: SEND_PAYMENT
+  }
+}
+
+export const fetchInvoice = (r_hash) => async (dispatch) => {
+  dispatch(getInvoice())
+  const invoice = await callApi(`invoice/${r_hash}`, 'get')
+
+  invoice ?
+    dispatch(receiveInvoice(invoice.data))
+  :
+    dispatch(invoiceFailed())
+
+  return invoice
+}
+
+export const createInvoice = (amount, memo, currency, rate) => async (dispatch) => {
+  const value = currency === 'btc' ? btc.btcToSatoshis(amount) : btc.btcToSatoshis(usd.usdToBtc(amount, rate))
+
+  dispatch(sendInvoice())
+  const invoice = await callApi('addinvoice', 'post', { value, memo })
+  console.log('invoice: ', invoice.data)
+  if (invoice) {
+    dispatch(invoiceSuccessful(invoice.data))
+  } else {
+    dispatch(invoiceFailed())
+  }
+
+  return invoice
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [GET_INVOICE]: (state) => ({ ...state, loading: true }),
+  [RECEIVE_INVOICE]: (state, { data }) => ({ ...state, loading: false, data }),
+  [SEND_INVOICE]: (state) => ({ ...state, loading: true }),
+  [INVOICE_SUCCESSFUL]: (state, { data }) => ({ ...state, loading: false, data }),
+  [INVOICE_FAILED]: (state) => ({ ...state, loading: false, data: null })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = {
+  loading: false,
+  data: {}
+}
+
+export default function invoiceReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/reducers/payment.js

@@ -1,54 +1,59 @@
 import { callApi } from '../api'
-import { btcToSatoshis, btcToUsd } from '../utils/bitcoin'
+import { btc } from '../utils'
 // ------------------------------------
 // Constants
 // ------------------------------------
-export const SET_AMOUNT = 'SET_AMOUNT'
-export const SET_MESSAGE = 'SET_MESSAGE'
-export const SET_PUBKEY = 'SET_PUBKEY'
+export const SEND_PAYMENT = 'SEND_PAYMENT'
+export const PAYMENT_SUCCESSFULL = 'PAYMENT_SUCCESSFULL'
+export const PAYMENT_FAILED = 'PAYMENT_FAILED'
 
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function setAmount(amount) {
+export function sendPayment() {
   return {
-    type: SET_AMOUNT,
-    amount
+    type: SEND_PAYMENT
   }
 }
 
-export function setMessage(message) {
+export function paymentSuccessfull(data) {
   return {
-    type: SET_MESSAGE,
-    message
+    type: PAYMENT_SUCCESSFULL,
+    data
   }
 }
 
-export function setPubkey(pubkey) {
+export function paymentFailed() {
   return {
-    type: SET_PUBKEY,
-    pubkey
+    type: PAYMENT_FAILED
   }
 }
 
+export const makePayment = (dest_string, btc_amount) => async (dispatch) => {
+  const amt = btc.btcToSatoshis(btc_amount)
+
+  dispatch(sendPayment())
+  const payment = await callApi('payments', 'post', { dest_string, amt })
+  payment ?
+    dispatch(paymentSuccessfull(payment))
+  :
+    dispatch(paymentFailed())
+
+  return payment
+}
+
 
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
-  [SET_MESSAGE]: (state, { message }) => ({ ...state, message }),
-  [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey })
 }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
-  paymentLoading: false,
-  amount: '0',
-  message: '',
-  pubkey: ''
+  paymentLoading: false
 }
 
 export default function paymentReducer(state = initialState, action) {

app/routes/activity/components/components/Invoices.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
+import { btc } from '../../../../utils'
 import styles from './Invoices.scss'
 
 class Invoices extends Component {
@@ -34,9 +34,9 @@ class Invoices extends Component {
                   <div className={invoice.settled ? styles.settled : null}>
                     {
                       ticker.currency === 'btc' ?
-                        satoshisToBtc(invoice.value)
+                        btc.satoshisToBtc(invoice.value)
                       :
-                        satoshisToUsd(invoice.value, ticker.btcTicker.price_usd) 
+                        btc.satoshisToUsd(invoice.value, ticker.btcTicker.price_usd) 
                     }
                   </div>
                 </div>

app/routes/activity/components/components/Payments.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
+import { btc } from '../../../../utils'
 import styles from './Payments.scss'
 
 class Payments extends Component {
@@ -39,9 +39,9 @@ class Payments extends Component {
                   <span className={styles.fee}>
                   {
                     ticker.currency === 'btc' ?
-                      satoshisToBtc(payment.fee)
+                      btc.satoshisToBtc(payment.fee)
                     :
-                      satoshisToUsd(payment.fee, ticker.btcTicker.price_usd) 
+                      btc.satoshisToUsd(payment.fee, ticker.btcTicker.price_usd) 
                   }
                   </span>
                 </div>
@@ -49,9 +49,9 @@ class Payments extends Component {
                   <span className={styles.value}>
                     {
                       ticker.currency === 'btc' ?
-                        satoshisToBtc(payment.value)
+                        btc.satoshisToBtc(payment.value)
                       :
-                        satoshisToUsd(payment.value, ticker.btcTicker.price_usd) 
+                        btc.satoshisToUsd(payment.value, ticker.btcTicker.price_usd) 
                     }
                   </span>
                 </div>

app/routes/app/components/App.js

@@ -5,13 +5,6 @@ import Nav from './components/Nav.js'
 import styles from './App.scss'
 
 class App extends Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      form: false
-    }
-  }
-
   componentWillMount() {
     const { fetchTicker, fetchBalance } = this.props
     
@@ -32,6 +25,7 @@ class App extends Component {
       fetchPeers,
       setCurrency,
       setForm,
+      createInvoice,
       children
     } = this.props
 
@@ -48,6 +42,7 @@ class App extends Component {
           peers={peers}
           ticker={ticker}
           form={form}
+          createInvoice={createInvoice}
         />
         <Nav 
           ticker={ticker}

app/routes/app/components/components/Form/Form.js

@@ -11,15 +11,15 @@ class Form extends Component {
 
   render() {
     const { 
-      form: { formType },
+      form: { formType, amount, message, pubkey },
       setAmount,
       setMessage,
       setPubkey,
-      payment: { amount, message, pubkey },
       peers: { peers },
-      ticker: { currency },
+      ticker: { currency, btcTicker },
       isOpen,
-      close
+      close,
+      createInvoice
     } = this.props
 
     return (
@@ -102,7 +102,7 @@ class Form extends Component {
                 </section>
               :
                 <section className={styles.buttonGroup}>
-                  <div className={styles.button}>Request</div>
+                  <div className={styles.button} onClick={() => createInvoice(amount, message, currency, btcTicker.price_usd)}>Request</div>
                 </section>
             }
           </div>

app/routes/app/components/components/Nav.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import ReactSVG from 'react-svg'
 import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
 import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
-import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
+import { btc } from '../../../../utils'
 import styles from './Nav.scss'
 
 class Nav extends Component {
@@ -38,9 +38,9 @@ class Nav extends Component {
               <span>
                 {
                   ticker.currency === 'btc' ?
-                    satoshisToBtc(balance.walletBalance)
+                    btc.satoshisToBtc(balance.walletBalance)
                   :
-                    satoshisToUsd(balance.walletBalance, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(balance.walletBalance, ticker.btcTicker.price_usd)
                 }
               </span>
             </p>
@@ -51,9 +51,9 @@ class Nav extends Component {
               <span>
                 {
                   ticker.currency === 'btc' ?
-                    satoshisToBtc(balance.channelBalance)
+                    btc.satoshisToBtc(balance.channelBalance)
                   :
-                    satoshisToUsd(balance.channelBalance, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(balance.channelBalance, ticker.btcTicker.price_usd)
                 }
               </span>
             </p>

app/routes/app/containers/AppContainer.js

@@ -5,7 +5,8 @@ import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { fetchPeers } from '../../../reducers/peers'
 import { setForm } from '../../../reducers/form'
-import { setAmount, setMessage, setPubkey } from '../../../reducers/payment'
+import { createInvoice } from '../../../reducers/invoice'
+import { setAmount, setMessage, setPubkey } from '../../../reducers/form'
 
 const mapDispatchToProps = {
 	fetchTicker,
@@ -16,7 +17,8 @@ const mapDispatchToProps = {
 	setAmount,
 	setMessage,
 	setPubkey,
-	setForm
+	setForm,
+	createInvoice
 }
 
 const mapStateToProps = (state) => ({

app/utils/bitcoin.js → app/utils/btc.js

@@ -20,4 +20,11 @@ export function satoshisToUsd(satoshis, price) {
 
 export function btcToUsd(btc, price) {
 	return parseFloat((btc * price).toFixed(2)).toLocaleString('en')
+}
+
+export default {
+	btcToSatoshis,
+	satoshisToBtc,
+	satoshisToUsd,
+	btcToUsd
 }

app/utils/index.js

@@ -0,0 +1,7 @@
+import btc from './btc'
+import usd from './usd'
+
+export default {
+	btc,
+	usd
+}

app/utils/usd.js

@@ -0,0 +1,9 @@
+export function usdToBtc(usd, rate) {
+  if (usd == undefined || usd === '') return
+
+  return (usd / rate).toFixed(8)
+}
+
+export default {
+	usdToBtc
+}