fix(wallet-header): wire up currency switching from the home page wallet header

app/components/Contacts/SubmitChannelForm.js

@@ -37,6 +37,9 @@ class SubmitChannelForm extends React.Component {
     }
 
     const formSubmitted = () => {
+      // dont submit to LND if they havent set channel capacity amount
+      if (contactCapacity > 0) { return }
+        
       // submit the channel to LND
       openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactCapacity })
 

app/components/Wallet/Wallet.js

@@ -23,10 +23,19 @@ const Wallet = ({
   openRequestForm,
   showPayLoadingScreen,
   showSuccessPayScreen,
-  successTransactionScreen
+  successTransactionScreen,
+  currentCurrencyFilters,
+  currencyName,
+  setCurrency,
+  setWalletCurrencyFilters
 }) => {
   const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
 
+  const onCurrencyFilterClick = (currency) => {
+    setCurrency(currency)
+    setWalletCurrencyFilters(false)
+  }
+
   return (
     <div className={styles.wallet}>
       <div className={styles.content}>
@@ -45,19 +54,31 @@ const Wallet = ({
 
         <div className={styles.left}>
           <div className={styles.leftContent}>
-            <Isvg className={styles.bitcoinLogo} src={bitcoinIcon} />
+            <span onClick={openReceiveModal} className={styles.qrCode}>
+              <Isvg className={styles.bitcoinLogo} src={qrCode} />
+            </span>
             <div className={styles.details}>
               <h1>
                 <span>
                   <Value
                     value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
+                    fromCurrency={ticker.fromCurrency}
                     currency={ticker.currency}
                     currentTicker={currentTicker}
                   />
-                  <i className={styles.currency}>{btc.renderCurrency(ticker.currency)}</i>
-                </span>
-                <span onClick={openReceiveModal}>
-                  <Isvg className={styles.bitcoinLogo} src={qrCode} />
+                  <section className={styles.currencyContainer}>
+                    <i className={styles.currency}>{currencyName}</i>
+                    <span onClick={() => setWalletCurrencyFilters(!info.showWalletCurrencyFilters)}>
+                      <FaAngleDown />
+                    </span>
+
+                    <ul className={info.showWalletCurrencyFilters && styles.active}>
+                      {
+                        currentCurrencyFilters.map(filter =>
+                          <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
+                      }
+                    </ul>
+                  </section>
                 </span>
               </h1>
               <span className={styles.usdValue}>≈ ${usdAmount ? usdAmount.toLocaleString() : ''}</span>

app/components/Wallet/Wallet.scss

@@ -43,8 +43,12 @@
   display: flex;
   flex-direction: row;
 
+  .qrCode {
+    cursor: pointer;
+  }
+
   .bitcoinLogo svg {
-    width: 32px;
+    width: 20px;
     height: 32px;
   }
 
@@ -83,6 +87,40 @@
       .currency {
         margin-left: 2.5px;
       }
+
+      .currencyContainer {
+        position: relative;
+        display: inline-block;
+
+        svg {
+          width: 25px;
+          height: 32px;
+          color: $white;
+        }
+
+        ul {
+          visibility: hidden;
+          position: absolute;
+          top: 30px;
+
+          &.active {
+            visibility: visible;
+          }
+
+          li {
+            font-size: 12px;
+            padding: 0px 15px;
+            background: #191919;
+            cursor: pointer;
+            transition: 0.25s hover;
+            border-bottom: 1px solid #0f0f0f;
+
+            &:hover {
+              background: #0f0f0f;
+            }
+          }
+        }
+      }
     }
 
     .tickerButtons {

app/reducers/contactsform.js

@@ -15,7 +15,7 @@ const initialState = {
 
   searchQuery: '',
   manualSearchQuery: '',
-  contactCapacity: 0.1,
+  contactCapacity: 0,
   node: {},
   showErrors: {
     manualInput: false

app/reducers/info.js

@@ -7,6 +7,7 @@ import { blockExplorer } from 'utils'
 // ------------------------------------
 export const GET_INFO = 'GET_INFO'
 export const RECEIVE_INFO = 'RECEIVE_INFO'
+export const SET_WALLET_CURRENCY_FILTERS = 'SET_WALLET_CURRENCY_FILTERS'
 
 // ------------------------------------
 // Actions
@@ -17,6 +18,13 @@ export function getInfo() {
   }
 }
 
+export function setWalletCurrencyFilters(showWalletCurrencyFilters) {
+  return {
+    type: SET_WALLET_CURRENCY_FILTERS,
+    showWalletCurrencyFilters
+  }
+}
+
 // Send IPC event for getinfo
 export const fetchInfo = () => async (dispatch) => {
   dispatch(getInfo())
@@ -36,7 +44,8 @@ export const receiveInfo = (event, data) => (dispatch) => {
 // ------------------------------------
 const ACTION_HANDLERS = {
   [GET_INFO]: state => ({ ...state, infoLoading: true }),
-  [RECEIVE_INFO]: (state, { data }) => ({ ...state, infoLoading: false, data })
+  [RECEIVE_INFO]: (state, { data }) => ({ ...state, infoLoading: false, data }),
+  [SET_WALLET_CURRENCY_FILTERS]: (state, { showWalletCurrencyFilters }) => ({ ...state, showWalletCurrencyFilters })
 }
 
 // ------------------------------------
@@ -44,7 +53,8 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   infoLoading: false,
-  data: {}
+  data: {},
+  showWalletCurrencyFilters: false
 }
 
 // Selectors

app/reducers/ticker.js

@@ -64,7 +64,7 @@ export const receiveCryptocurrency = (event, currency) => (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_CURRENCY]: (state, { currency }) => ({ ...state, currency }),
+  [SET_CURRENCY]: (state, { currency }) => ({ ...state, fromCurrency: state.currency, currency }),
   [SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }),
   [GET_TICKERS]: state => ({ ...state, tickerLoading: true }),
   [RECIEVE_TICKERS]: (state, { btcTicker, ltcTicker }) => (
@@ -113,6 +113,7 @@ export { tickerSelectors }
 const initialState = {
   tickerLoading: false,
   currency: '',
+  fromCurrency: 'sats',
   crypto: '',
   btcTicker: null,
   ltcTicker: null,

app/routes/activity/containers/ActivityContainer.js

@@ -25,6 +25,8 @@ import { setFormType } from 'reducers/form'
 
 import { payFormSelectors } from 'reducers/payform'
 
+import { setWalletCurrencyFilters } from 'reducers/info'
+
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -42,7 +44,8 @@ const mapDispatchToProps = {
   openWalletModal,
   fetchBalance,
   updateSearchText,
-  setFormType
+  setFormType,
+  setWalletCurrencyFilters
 }
 
 const mapStateToProps = state => ({
@@ -64,6 +67,8 @@ const mapStateToProps = state => ({
   invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state),
 
   currentTicker: tickerSelectors.currentTicker(state),
+  currentCurrencyFilters: tickerSelectors.currentCurrencyFilters(state),
+  currencyName: tickerSelectors.currencyName(state),
 
   currentActivity: activitySelectors.currentActivity(state)(state),
   nonActiveFilters: activitySelectors.nonActiveFilters(state),
@@ -81,8 +86,11 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     showPayLoadingScreen: stateProps.showPayLoadingScreen,
     showSuccessPayScreen: stateProps.payment.showSuccessPayScreen,
     successTransactionScreen: stateProps.transaction.successTransactionScreen,
+    currentCurrencyFilters: stateProps.currentCurrencyFilters,
+    currencyName: stateProps.currencyName,
 
     setCurrency: dispatchProps.setCurrency,
+    setWalletCurrencyFilters: dispatchProps.setWalletCurrencyFilters,
     newAddress: dispatchProps.newAddress,
     openReceiveModal: dispatchProps.openWalletModal,
     openPayForm: () => dispatchProps.setFormType('PAY_FORM'),

app/utils/btc.js

@@ -52,6 +52,7 @@ export function bitsToUsd(bits, price) {
 export function satoshisToBtc(satoshis) {
   if (satoshis === undefined || satoshis === null || satoshis === '') return null
 
+  console.log('satoshis: ', satoshis)
   const btcAmount = sb.toBitcoin(satoshis).toFixed(8)
   return btcAmount > 0 ? btcAmount : btcAmount * -1
 }