feature(value): add value component to wallet

app/components/Value/Value.js

@@ -4,11 +4,18 @@ import { btc } from 'utils'
 
 const Value = ({ value, currency, currentTicker }) => {
   const renderValue = () => {
-    if (currency === 'btc') {
+    switch (currency) {
-      return btc.satoshisToBtc(value)
+      case 'btc':
+        return btc.satoshisToBtc(value)
+      case 'bits':
+        return btc.satoshisToBits(value)
+      case 'sats':
+        return value
+      case 'usd':
+        return btc.satoshisToUsd(value, currentTicker.price_usd) 
+      default: 
+        return value
     }
-
-    return 'gang'
   }
 
   return (

app/components/Wallet/Wallet.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { FaAngleDown } from 'react-icons/lib/fa'
 import Isvg from 'react-inlinesvg'
 import { btc } from 'utils'
+import Value from 'components/Value'
 import bitcoinIcon from 'icons/bitcoin.svg'
 import zapLogo from 'icons/zap_logo.svg'
 import qrCode from 'icons/qrcode.svg'
@@ -22,17 +23,18 @@ class Wallet extends Component {
 
   render() {
     const {
+      setCurrency,
       balance,
       address,
       info,
       newAddress,
+      ticker,
       currentTicker,
       openPayForm,
       openRequestForm
     } = this.props
 
     const { modalOpen, qrCodeType } = this.state
-    const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
 
     const changeQrCode = () => {
       const qrCodeNum = this.state.qrCodeType === 1 ? 2 : 1
@@ -76,13 +78,31 @@ class Wallet extends Component {
               <div className={styles.details}>
                 <h1>
                   <span>
-                    {btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))}BTC
+                    <Value
+                      value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
+                      currency={ticker.currency}
+                      currentTicker={currentTicker}
+                    />
+                    <i className={styles.currency}>{btc.renderCurrency(ticker.currency)}</i>
                   </span>
                   <span onClick={() => this.setState({ modalOpen: true })}>
                     <Isvg className={styles.bitcoinLogo} src={qrCode} />
                   </span>
                 </h1>
-                <span className={styles.usdValue}>≈ ${usdAmount ? usdAmount.toLocaleString() : ''}</span>
+                <div className={styles.tickerButtons}>
+                  <section className={ticker.currency === 'btc' && styles.active} onClick={() => setCurrency('btc')}>
+                    BTC
+                  </section>
+                  <section className={ticker.currency === 'bits' && styles.active} onClick={() => setCurrency('bits')}>
+                    Bits
+                  </section>
+                  <section className={ticker.currency === 'sats' && styles.active} onClick={() => setCurrency('sats')}>
+                    Satoshis
+                  </section>
+                  <section className={ticker.currency === 'usd' && styles.active} onClick={() => setCurrency('usd')}>
+                    USD
+                  </section>
+                </div>
               </div>
             </div>
           </div>
@@ -103,6 +123,7 @@ Wallet.propTypes = {
   address: PropTypes.string.isRequired,
   info: PropTypes.object.isRequired,
   newAddress: PropTypes.func.isRequired,
+  ticker: PropTypes.object.isRequired,
   currentTicker: PropTypes.object.isRequired,
   openPayForm: PropTypes.func.isRequired,
   openRequestForm: PropTypes.func.isRequired

app/components/Wallet/Wallet.scss

@@ -79,12 +79,33 @@
           opacity: 0.5;
         }
       }
+
+      .currency {
+        margin-left: 2.5px;
+      }
     }
 
-    .usdValue {
+    .tickerButtons {
-      font-size: 12px;
+      display: flex;
-      margin-left: 10px;
+      flex-direction: row;
-      font-style: italic;
+
+      section {
+        margin: 5px;
+        font-size: 10px;
+        border-radius: 5px;
+        border: 1px solid $white;
+        padding: 5px 10px;
+        cursor: pointer;
+        opacity: 0.5;
+        transition: 0.25s all;
+
+        &.active {
+          background: $main;
+          color: $spaceborder;
+          border-color: $spaceborder;
+          opacity: 1;
+        }
+      }
     }
   }
 

app/routes/activity/components/Activity.js

@@ -56,8 +56,8 @@ class Activity extends Component {
       changeFilter,
       currentActivity,
       newAddress,
-      openPayForm,
+
-      openRequestForm
+      walletProps
     } = this.props
 
     if (invoiceLoading || paymentLoading) { return <LoadingBolt /> }
@@ -74,15 +74,7 @@ class Activity extends Component {
           currentTicker={currentTicker}
         />
 
-        <Wallet
+        <Wallet {...walletProps} />
-          balance={balance}
-          address={address}
-          info={info}
-          newAddress={newAddress}
-          currentTicker={currentTicker}
-          openPayForm={openPayForm}
-          openRequestForm={openRequestForm}
-        />
 
         <div className={styles.activities}>
           <header className={styles.header}>
@@ -130,8 +122,6 @@ Activity.propTypes = {
   hideActivityModal: PropTypes.func.isRequired,
   changeFilter: PropTypes.func.isRequired,
   newAddress: PropTypes.func.isRequired,
-  openPayForm: PropTypes.func.isRequired,
-  openRequestForm: PropTypes.func.isRequired,
 
   activity: PropTypes.object.isRequired,
   currentActivity: PropTypes.array.isRequired,

app/routes/activity/containers/ActivityContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { tickerSelectors } from 'reducers/ticker'
+import { setCurrency, tickerSelectors } from 'reducers/ticker'
 import { fetchBalance } from 'reducers/balance'
 import {
   fetchInvoices,
@@ -26,6 +26,7 @@ import { setFormType } from 'reducers/form'
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
+  setCurrency,
   setPayment,
   setInvoice,
   fetchPayments,
@@ -64,15 +65,27 @@ const mapStateToProps = state => ({
   nonActiveFilters: activitySelectors.nonActiveFilters(state)
 })
 
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  ...stateProps,
+  const walletProps = {
-  ...dispatchProps,
+    balance: stateProps.balance,
-  ...ownProps,
+    address: stateProps.address.address,
+    info: stateProps.info,
+    ticker: stateProps.ticker,
+    currentTicker: stateProps.currentTicker,
+    
+    setCurrency: dispatchProps.setCurrency,
+    newAddress: dispatchProps.newAddress,
+    openPayForm: () => dispatchProps.setFormType('PAY_FORM'),
+    openRequestForm: () => dispatchProps.setFormType('REQUEST_FORM')
+  }
 
-  // action to open the pay form
+  return {
-  openPayForm: () => dispatchProps.setFormType('PAY_FORM'),
+    ...stateProps,
-  // action to open the request form
+    ...dispatchProps,
-  openRequestForm: () => dispatchProps.setFormType('REQUEST_FORM')
+    ...ownProps,
-})
+
+    walletProps
+  }
+}
 
 export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Activity)

app/utils/btc.js

@@ -13,6 +13,13 @@ export function satoshisToBtc(satoshis) {
   return btcAmount > 0 ? btcAmount : btcAmount * -1
 }
 
+export function satoshisToBits(satoshis) {
+  if (satoshis === undefined || satoshis === null || satoshis === '') return null
+
+  const bitsAmount = satoshis / 100
+  return bitsAmount > 0 ? bitsAmount : bitsAmount * -1
+}
+
 export function btcToUsd(btc, price) {
   const amount = parseFloat(btc * price).toFixed(2)
   return (btc > 0 && amount <= 0) ? '< 0.01' : amount.toLocaleString('en')
@@ -24,10 +31,26 @@ export function satoshisToUsd(satoshis, price) {
   return btcToUsd(satoshisToBtc(satoshis), price)
 }
 
+export function renderCurrency(currency) {
+  switch (currency) {
+    case 'btc':
+      return 'BTC'
+    case 'bits':
+      return 'bits'
+    case 'sats':
+      return 'satoshis'
+    case 'usd':
+      return 'USD'
+    default:
+      return 'satoshis'
+  }  
+}
 
 export default {
   btcToSatoshis,
   satoshisToBtc,
+  satoshisToBits,
   satoshisToUsd,
-  btcToUsd
+  btcToUsd,
+  renderCurrency
 }