diff --git a/app/animated_checkmark.scss b/app/animated_checkmark.scss index 0eb592f2..42d85085 100644 --- a/app/animated_checkmark.scss +++ b/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; } } \ No newline at end of file diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js index 8c180312..8e2aa2b7 100644 --- a/app/components/Form/Request.js +++ b/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 = ({
- + {`≈ ${requestUsdAmount || 0} USD`}
diff --git a/app/components/ModalRoot/ModalRoot.scss b/app/components/ModalRoot/ModalRoot.scss index 3622414c..956fc93b 100644 --- a/app/components/ModalRoot/ModalRoot.scss +++ b/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 { diff --git a/app/components/ModalRoot/SuccessfulSendPayment.scss b/app/components/ModalRoot/SuccessfulSendPayment.scss index 297541bc..f71069c2 100644 --- a/app/components/ModalRoot/SuccessfulSendPayment.scss +++ b/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%); + } } } \ No newline at end of file diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 703bc554..f5378d27 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -91,17 +91,6 @@ class Wallet extends Component { ≈ ${usdAmount ? usdAmount.toLocaleString() : ''} -
-
setCurrency('btc')}> - BTC -
-
setCurrency('bits')}> - Bits -
-
setCurrency('sats')}> - Satoshis -
-
diff --git a/app/reducers/requestform.js b/app/reducers/requestform.js index eb68c7f5..780a9cf4 100644 --- a/app/reducers/requestform.js +++ b/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 // ------------------------------------ diff --git a/app/reducers/ticker.js b/app/reducers/ticker.js index 2a9aee11..0350aff2 100644 --- a/app/reducers/ticker.js +++ b/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 } diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 6938e4c7..42160dc1 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -58,7 +58,6 @@ class App extends Component { children } = this.props - console.log('activityModalProps: ', activityModalProps) if (!currentTicker) { return } return ( diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index fbbc9992..c1619e32 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/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,