Permalink
Browse files

feat(fiat): convert to bci api

feat(fiat): wire up setFiatTicker

fix(fiat): enable fixed height w scrolling

feat(fiat): add active style
  • Loading branch information...
JimmyMow committed Jul 31, 2018
1 parent bc15832 commit 7671d41eb2365f1a4bae7a7022476921f38ca6d3
@@ -58,6 +58,7 @@ const InvoiceModal = ({
value={invoice.finalAmount}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
</h1>
<section
@@ -47,7 +47,12 @@ const PaymentModal = ({
<div className={styles.amount}>
<h1>
<i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
<Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
<Value
value={payment.value}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
</h1>
<section
className={styles.currentCurrency}
@@ -57,6 +57,7 @@ const TransactionModal = ({
value={transaction.total_fees}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<span> {currencyName} fee</span>
</div>
@@ -72,6 +73,7 @@ const TransactionModal = ({
value={transaction.amount}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
</h1>
<section
@@ -155,7 +155,10 @@ class Network extends Component {
return 'online'
}
const usdAmount = btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd)
const usdAmount = btc.satoshisToUsd(
balance.channelBalance,
currentTicker[ticker.fiatTicker].last
)
const { refreshing } = this.state
return (
<div className={styles.network}>
@@ -296,6 +299,7 @@ class Network extends Component {
value={channel.local_balance}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i> {currencyName}</i>
</p>
@@ -307,6 +311,7 @@ class Network extends Component {
value={channel.remote_balance}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i>{ticker.currency.toUpperCase()}</i>
</p>
@@ -1,29 +1,38 @@
import React from 'react'
import PropTypes from 'prop-types'
import FaAngleLeft from 'react-icons/lib/fa/angle-left'
import Isvg from 'react-inlinesvg'
import checkIcon from 'icons/check.svg'
import styles from './Fiat.scss'
const Fiat = ({ disableSubMenu }) => {
const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => {
return (
<div>
<header className={styles.submenuHeader} onClick={disableSubMenu}>
<FaAngleLeft />
<span>Fiat currency</span>
</header>
<ul>
<li>USD</li>
<li>JPY</li>
<li>CNY</li>
<li>SGD</li>
<li>HKD</li>
<li>CAD</li>
<ul className={styles.fiatTickers}>
{fiatTickers.map(ft => (
<li
key={ft}
className={fiatTicker === ft && styles.active}
onClick={() => setFiatTicker(ft)}
>
<span>{ft}</span>
{fiatTicker === ft && <Isvg src={checkIcon} />}
</li>
))}
</ul>
</div>
)
}
Fiat.propTypes = {
disableSubMenu: PropTypes.func.isRequired
fiatTicker: PropTypes.string.isRequired,
fiatTickers: PropTypes.array.isRequired,
disableSubMenu: PropTypes.func.isRequired,
setFiatTicker: PropTypes.func.isRequired
}
export default Fiat
@@ -1,3 +1,5 @@
@import '../../styles/variables.scss';
.submenuHeader {
padding: 15px;
background: lighten(#1d1f27, 20%);
@@ -7,3 +9,18 @@
justify-content: end;
align-items: center;
}
.fiatTickers {
height: 300px;
overflow-y: scroll;
.active {
background: #0f0f0f;
svg {
height: 10px;
width: 10px;
color: $green;
}
}
}
@@ -2,18 +2,19 @@ import React from 'react'
import PropTypes from 'prop-types'
import { btc } from 'lib/utils'
const Value = ({ value, currency, currentTicker }) => {
const Value = ({ value, currency, currentTicker, fiatTicker }) => {
if (currency === 'sats') {
return <i>{value > 0 ? value : value * -1}</i>
}
return <i>{btc.convert('sats', currency, value, currentTicker.price_usd)}</i>
return <i>{btc.convert('sats', currency, value, currentTicker[fiatTicker].last)}</i>
}
Value.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
currency: PropTypes.string.isRequired,
currentTicker: PropTypes.object.isRequired
currentTicker: PropTypes.object.isRequired,
fiatTicker: PropTypes.string.isRequired
}
export default Value
@@ -34,7 +34,7 @@ const Wallet = ({
}) => {
const usdAmount = btc.satoshisToUsd(
parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10),
currentTicker.price_usd
currentTicker[ticker.fiatTicker].last
)
const onCurrencyFilterClick = currency => {
@@ -73,9 +73,9 @@ const Wallet = ({
<span>
<Value
value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
fromCurrency={ticker.fromCurrency}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<section className={styles.currencyContainer}>
<i className={styles.currency}>{currencyName}</i>
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
@@ -12,8 +12,8 @@ import axios from 'axios'
// defined on the webpack dev server.
const scheme = process.env.HOT ? '/proxy/' : 'https://'
export function requestTicker(id) {
const BASE_URL = `${scheme}api.coinmarketcap.com/v1/ticker/${id}`
export function requestTicker() {
const BASE_URL = `${scheme}blockchain.info/ticker`
return axios({
method: 'get',
url: BASE_URL
@@ -22,6 +22,7 @@ export const fetchBalance = () => async dispatch => {
// Receive IPC event for balance
export const receiveBalance = (event, { walletBalance, channelBalance }) => dispatch => {
// dispatch({ type: RECEIVE_BALANCE, walletBalance, channelBalance })
dispatch({ type: RECEIVE_BALANCE, walletBalance, channelBalance })
}
@@ -1,12 +1,13 @@
import { createSelector } from 'reselect'
import { requestTickers } from 'lib/utils/api'
import { requestTicker } from 'lib/utils/api'
import { infoSelectors } from './info'
// ------------------------------------
// Constants
// ------------------------------------
export const SET_CURRENCY = 'SET_CURRENCY'
export const SET_CRYPTO = 'SET_CRYPTO'
export const SET_FIAT_TICKER = 'SET_FIAT_TICKER'
export const GET_TICKERS = 'GET_TICKERS'
export const RECIEVE_TICKERS = 'RECIEVE_TICKERS'
@@ -33,6 +34,13 @@ export function setCrypto(crypto) {
}
}
export function setFiatTicker(fiatTicker) {
return {
type: SET_FIAT_TICKER,
fiatTicker
}
}
export function getTickers() {
return {
type: GET_TICKERS
@@ -49,10 +57,10 @@ export function recieveTickers({ btcTicker, ltcTicker }) {
export const fetchTicker = () => async dispatch => {
dispatch(getTickers())
const tickers = await requestTickers(['bitcoin', 'litecoin'])
dispatch(recieveTickers(tickers))
const btcTicker = await requestTicker()
dispatch(recieveTickers({ btcTicker }))
return tickers
return btcTicker
}
// Receive IPC event for receiveCryptocurrency
@@ -67,6 +75,7 @@ export const receiveCryptocurrency = (event, currency) => dispatch => {
const ACTION_HANDLERS = {
[SET_CURRENCY]: (state, { currency }) => ({ ...state, fromCurrency: state.currency, currency }),
[SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }),
[SET_FIAT_TICKER]: (state, { fiatTicker }) => ({ ...state, fiatTicker }),
[GET_TICKERS]: state => ({ ...state, tickerLoading: true }),
[RECIEVE_TICKERS]: (state, { btcTicker, ltcTicker }) => ({
...state,
@@ -125,6 +134,31 @@ const initialState = {
crypto: '',
btcTicker: null,
ltcTicker: null,
fiatTicker: 'USD',
fiatTickers: [
'USD',
'AUD',
'BRL',
'CAD',
'CHF',
'CLP',
'CNY',
'DKK',
'EUR',
'GBP',
'HKD',
'INR',
'ISK',
'JPY',
'KRW',
'NZD',
'PLN',
'RUB',
'SEK',
'SGD',
'THB',
'TWB'
],
currencyFilters: [
{
key: 'btc',
@@ -41,9 +41,10 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
<span>
<i className={styles.plus}>+</i>
<Value
value={invoice.finalAmount}
value={invoice.value}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i> {currencyName}</i>
</span>
@@ -38,7 +38,12 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
<div className={`hint--top-left ${styles.amount}`} data-hint="Payment amount">
<span>
<i className={styles.minus}>-</i>
<Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
<Value
value={payment.value}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i> {currencyName}</i>
</span>
<span>${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)}</span>
@@ -41,6 +41,7 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
value={transaction.amount}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i> {currencyName}</i>
</span>
@@ -1,5 +1,5 @@
import { connect } from 'react-redux'
import { setCurrency, tickerSelectors } from 'reducers/ticker'
import { setCurrency, setFiatTicker, tickerSelectors } from 'reducers/ticker'
import { fetchBalance } from 'reducers/balance'
import { fetchInvoices, setInvoice, invoiceSelectors } from 'reducers/invoice'
import { setPayment, fetchPayments, paymentSelectors } from 'reducers/payment'
@@ -26,6 +26,7 @@ import Activity from '../components/Activity'
const mapDispatchToProps = {
setCurrency,
setFiatTicker,
setPayment,
setInvoice,
fetchPayments,
@@ -120,7 +121,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
setActiveSubMenu: dispatchProps.setActiveSubMenu,
fiatProps: {
disableSubMenu: dispatchProps.disableSubMenu
fiatTicker: stateProps.ticker.fiatTicker,
fiatTickers: stateProps.ticker.fiatTickers,
disableSubMenu: dispatchProps.disableSubMenu,
setFiatTicker: dispatchProps.setFiatTicker
}
}
}
@@ -228,7 +228,7 @@ export default merge.smart(baseConfig, {
"'self'",
'http://localhost:*',
'ws://localhost:*',
'https://api.coinmarketcap.com',
'https://blockchain.info/ticker',
'https://zap.jackmallers.com'
],
'script-src': ["'self'", 'http://localhost:*', "'unsafe-eval'"],
@@ -285,9 +285,9 @@ export default merge.smart(baseConfig, {
)
app.use(
convert(
proxy('/proxy/api.coinmarketcap.com', {
target: 'https://api.coinmarketcap.com',
pathRewrite: { '^/proxy/api.coinmarketcap.com': '' },
proxy('/proxy/blockchain.info', {
target: 'https://blockchain.info/ticker',
pathRewrite: { '^/proxy/blockchain.info': '' },
changeOrigin: true
})
)

0 comments on commit 7671d41

Please sign in to comment.