feature(request): usd amount in request form

app/animated_checkmark.scss

@@ -5,7 +5,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   stroke-dashoffset: 166;
   stroke-width: 2;
   stroke-miterlimit: 10;
-  stroke: $main;
+  stroke: $gold;
   fill: none;
   animation: stroke .6s $curve forwards;
 }
@@ -17,7 +17,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   stroke-width: 2;
   stroke: #fff;
   stroke-miterlimit: 10;
-  box-shadow: inset 0px 0px 0px $main;
+  box-shadow: inset 0px 0px 0px $gold;
   animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
 }
 
@@ -45,6 +45,6 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
 
 @keyframes fill {
   100% {
-    box-shadow: inset 0px 0px 0px 30px $main;
+    box-shadow: inset 0px 0px 0px 30px $gold;
   }
 }

app/components/Form/Request.js

@@ -18,11 +18,13 @@ const Request = ({
   setCurrency,
   setRequestCurrencyFilters,
   currencyName,
+  requestUsdAmount,
 
   currentCurrencyFilters,
 
   onRequestSubmit
 }) => {
+  console.log('requestUsdAmount: ', requestUsdAmount)
   const onCurrencyFilterClick = (currency) => {
     // change the input amount 
     setRequestAmount(btc.convert(ticker.currency, currency, amount))
@@ -82,7 +84,7 @@ const Request = ({
           </div>
 
           <div className={styles.usdAmount}>
-            
+            {`≈ ${requestUsdAmount || 0} USD`}
           </div>
         </section>
 

app/components/ModalRoot/ModalRoot.scss

@@ -7,13 +7,14 @@
   width: 100%;
   height: 100%;
   z-index: 10;
-  background: #fff;
+  background: $spaceblue;
 }
 
 .content {
   position: relative;
   height: 100vh;
   margin: 5%;
+  color: $white;
 }
 
 .esc {
@@ -32,7 +33,7 @@
 
   &:active {
     color: $white;
-    background: $main;
+    background: $gold;
   }
 
   svg {

app/components/ModalRoot/SuccessfulSendPayment.scss

@@ -24,7 +24,7 @@
   .button {
     text-align: center;
     border-radius: 8px;
-    background: $main;
+    background: #31343f;
     padding: 20px 10px;
     font-weight: bold;
     cursor: pointer;
@@ -33,5 +33,10 @@
     color: $white;
     width: 15%;
     margin: 0 auto;
+    transition: all 0.25s;
+
+    &:hover {
+      background: darken(#31343f, 5%);
+    }
   }
 }

app/components/Wallet/Wallet.js

@@ -91,17 +91,6 @@ class Wallet extends Component {
                   </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>
-                </div>
               </div>
             </div>
           </div>

app/reducers/requestform.js

@@ -1,3 +1,7 @@
+import { createSelector } from 'reselect'
+import { btc } from 'utils'
+import { tickerSelectors } from './ticker'
+
 // Initial State
 const initialState = {
   amount: '',
@@ -56,6 +60,33 @@ const ACTION_HANDLERS = {
   [RESET_FORM]: () => (initialState)
 }
 
+const requestFormSelectors = {}
+const requestAmountSelector = state => state.requestform.amount
+const currencySelector = state => state.ticker.currency
+
+requestFormSelectors.usdAmount = createSelector(
+  requestAmountSelector,
+  currencySelector,
+  tickerSelectors.currentTicker,
+  
+  (amount, currency, ticker) => {
+    if (!ticker || !ticker.price_usd) { return false }
+
+    switch (currency) {
+      case 'btc':
+        return btc.btcToUsd(amount, ticker.price_usd)
+      case 'bits':
+        return btc.bitsToUsd(amount, ticker.price_usd)
+      case 'sats':
+        return btc.satoshisToUsd(amount, ticker.price_usd)
+      default:
+        return ''
+    }    
+  }
+)
+
+export { requestFormSelectors }
+
 // ------------------------------------
 // Reducer
 // ------------------------------------

app/reducers/ticker.js

@@ -99,7 +99,7 @@ tickerSelectors.currencyName = createSelector(
   currencySelector,
   (currency) => {
     if (currency === 'btc') { return 'BTC' }
-    if (currency === 'sats') { return 'satohis' }
+    if (currency === 'sats') { return 'satoshis' }
 
     return currency
   }

app/routes/app/components/App.js

@@ -58,7 +58,6 @@ class App extends Component {
       children
     } = this.props
 
-    console.log('activityModalProps: ', activityModalProps)
     if (!currentTicker) { return <LoadingBolt /> }
 
     return (

app/routes/app/containers/AppContainer.js

@@ -13,7 +13,7 @@ import { setFormType } from 'reducers/form'
 
 import { setPayAmount, setPayInput, setCurrencyFilters, updatePayErrors, payFormSelectors } from 'reducers/payform'
 
-import { setRequestAmount, setRequestMemo, setRequestCurrencyFilters } from 'reducers/requestform'
+import { setRequestAmount, setRequestMemo, setRequestCurrencyFilters, requestFormSelectors } from 'reducers/requestform'
 
 import { sendCoins } from 'reducers/transaction'
 
@@ -148,6 +148,7 @@ const mapStateToProps = state => ({
   showPayLoadingScreen: payFormSelectors.showPayLoadingScreen(state),
   payFormIsValid: payFormSelectors.payFormIsValid(state),
   payInputMin: payFormSelectors.payInputMin(state),
+  requestUsdAmount: requestFormSelectors.usdAmount(state),
   syncPercentage: lndSelectors.syncPercentage(state),
 
   filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
@@ -243,6 +244,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     currentCurrencyFilters: stateProps.currentCurrencyFilters,
     showCurrencyFilters: stateProps.showCurrencyFilters,
     currencyName: stateProps.currencyName,
+    requestUsdAmount: stateProps.requestUsdAmount,
 
     setRequestAmount: dispatchProps.setRequestAmount,
     setRequestMemo: dispatchProps.setRequestMemo,