From f6499c7f5a72c60c9728addd7ea699ec3bc5773c Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Mon, 17 Dec 2018 12:46:22 -0500 Subject: [PATCH 1/4] add prices container + features add cryptocompare --- app/js/containers/PriceContainer.jsx | 9 +++++++++ app/js/features/prices/actions.js | 3 +++ app/js/features/prices/constants.js | 3 +++ app/js/features/prices/index.js | 5 +++++ app/js/features/prices/reducer.js | 15 +++++++++++++++ app/js/features/prices/saga.js | 20 ++++++++++++++++++++ app/js/index.js | 3 +++ app/js/init.js | 12 ++++++++++++ app/js/layout/App.jsx | 8 +++++--- app/js/layout/Header.jsx | 7 +++++-- app/js/reducer.js | 6 ++++-- app/js/store.js | 8 +++++--- package.json | 1 + yarn.lock | 5 +++++ 14 files changed, 95 insertions(+), 10 deletions(-) create mode 100644 app/js/containers/PriceContainer.jsx create mode 100644 app/js/features/prices/actions.js create mode 100644 app/js/features/prices/constants.js create mode 100644 app/js/features/prices/index.js create mode 100644 app/js/features/prices/reducer.js create mode 100644 app/js/features/prices/saga.js create mode 100644 app/js/init.js diff --git a/app/js/containers/PriceContainer.jsx b/app/js/containers/PriceContainer.jsx new file mode 100644 index 00000000..18af28d0 --- /dev/null +++ b/app/js/containers/PriceContainer.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const PriceContainer = () => ( +
+

Hello

+
+) + +export default PriceContainer diff --git a/app/js/features/prices/actions.js b/app/js/features/prices/actions.js new file mode 100644 index 00000000..995efdee --- /dev/null +++ b/app/js/features/prices/actions.js @@ -0,0 +1,3 @@ +import { FETCH_PRICES } from './constants' + +export const fetchPrices = () => ({ type: FETCH_PRICES }) diff --git a/app/js/features/prices/constants.js b/app/js/features/prices/constants.js new file mode 100644 index 00000000..76a8b1b8 --- /dev/null +++ b/app/js/features/prices/constants.js @@ -0,0 +1,3 @@ +export const FETCH_PRICES = 'FETCH_PRICES'; +export const FETCH_PRICES_SUCCEEDED = 'FETCH_PRICES_SUCCEEDED' +export const FETCH_PRICES_FAILED = 'FETCH_PRICES_FAILED' diff --git a/app/js/features/prices/index.js b/app/js/features/prices/index.js new file mode 100644 index 00000000..6f9633b3 --- /dev/null +++ b/app/js/features/prices/index.js @@ -0,0 +1,5 @@ +import saga from './saga'; +import reducer from './reducer'; +import actions from './actions'; + +export default {saga, reducer, actions} diff --git a/app/js/features/prices/reducer.js b/app/js/features/prices/reducer.js new file mode 100644 index 00000000..26044f76 --- /dev/null +++ b/app/js/features/prices/reducer.js @@ -0,0 +1,15 @@ +import { FETCH_PRICES_SUCCEEDED } from './constants'; + +function reducer(state = {}, action) { + switch (action.type) { + case FETCH_PRICES_SUCCEEDED: + return { + ...state, + ...action.data + }; + default: + return state; + } +} + +export default reducer; diff --git a/app/js/features/prices/saga.js b/app/js/features/prices/saga.js new file mode 100644 index 00000000..fa1e6d5e --- /dev/null +++ b/app/js/features/prices/saga.js @@ -0,0 +1,20 @@ +import { fork, takeEvery, call, put } from 'redux-saga/effects' +import cc from 'cryptocompare' +import { FETCH_PRICES, FETCH_PRICES_SUCCEEDED, FETCH_PRICES_FAILED } from './constants'; + +export function *doFetchPrices() { + try { + const data = yield call(cc.priceMulti, ['ETH', 'SNT'], ['USD']) + yield put({type: FETCH_PRICES_SUCCEEDED, data}) + } catch (error) { + yield put({type: FETCH_PRICES_FAILED, error}) + } +} + +export function *onFetchPrices() { + yield takeEvery(FETCH_PRICES, doFetchPrices) +} + +export default [ + fork(onFetchPrices), +] diff --git a/app/js/index.js b/app/js/index.js index 1f5fe882..deb32742 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -8,6 +8,9 @@ import 'bootstrap/dist/css/bootstrap.css'; import App from './layout/App'; import history from './history'; import store from './store'; +import init from './init'; + +init(); ReactDOM.render( diff --git a/app/js/init.js b/app/js/init.js new file mode 100644 index 00000000..9ccdc854 --- /dev/null +++ b/app/js/init.js @@ -0,0 +1,12 @@ +import web3 from "Embark/web3" +import EmbarkJS from 'Embark/EmbarkJS' +import store from './store' +import { fetchPrices } from './features/prices/actions' + +const dispatch = action => store.dispatch(action) + +export default () => { + EmbarkJS.onReady(async (err) => { + dispatch(fetchPrices()) + }) +} diff --git a/app/js/layout/App.jsx b/app/js/layout/App.jsx index 769b166f..a6b4752b 100644 --- a/app/js/layout/App.jsx +++ b/app/js/layout/App.jsx @@ -5,6 +5,7 @@ import { Container } from 'reactstrap'; import Header from './Header'; import HomeContainer from '../containers/HomeContainer'; import HelloContainer from '../containers/HelloContainer'; +import PriceContainer from '../containers/PriceContainer'; class App extends Component { render() { @@ -12,14 +13,15 @@ class App extends Component {
- + + ); } } - -export default App; \ No newline at end of file + +export default App; diff --git a/app/js/layout/Header.jsx b/app/js/layout/Header.jsx index ef0d0111..63511a9a 100644 --- a/app/js/layout/Header.jsx +++ b/app/js/layout/Header.jsx @@ -9,7 +9,7 @@ import { NavItem, NavLink } from 'reactstrap'; - + class Header extends Component { constructor(props) { super(props); @@ -36,6 +36,9 @@ class Header extends Component { Hello + + Prices + @@ -43,4 +46,4 @@ class Header extends Component { } } -export default Header \ No newline at end of file +export default Header diff --git a/app/js/reducer.js b/app/js/reducer.js index 2e00f961..94bdd2ae 100644 --- a/app/js/reducer.js +++ b/app/js/reducer.js @@ -4,10 +4,12 @@ import { connectRouter } from 'connected-react-router'; import history from './history'; import example from './features/example' +import prices from './features/prices' const rootReducer = combineReducers({ router: connectRouter(history), - example: example.reducer + example: example.reducer, + prices: prices.reducer }); -export default rootReducer; \ No newline at end of file +export default rootReducer; diff --git a/app/js/store.js b/app/js/store.js index 458c2f50..e25d4715 100644 --- a/app/js/store.js +++ b/app/js/store.js @@ -6,11 +6,13 @@ import { all } from 'redux-saga/effects'; import history from './history'; import rootReducer from './reducer'; -import example from './features/example' +import example from './features/example'; +import prices from './features/prices'; function *root() { yield all([ - ...example.saga + ...example.saga, + ...prices.saga ]); } @@ -30,4 +32,4 @@ const store = createStore( sagaMiddleware.run(root); -export default store; \ No newline at end of file +export default store; diff --git a/package.json b/package.json index dc1c6ee7..c1a39089 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "bootstrap": "^4.1.3", "connected-react-router": "^6.0.0", + "cryptocompare": "^0.7.0", "react": "^16.6.3", "react-dom": "^16.6.3", "react-redux": "^6.0.0", diff --git a/yarn.lock b/yarn.lock index 1f69e608..516a4132 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27,6 +27,11 @@ connected-react-router@^6.0.0: immutable "^3.8.1" seamless-immutable "^7.1.3" +cryptocompare@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/cryptocompare/-/cryptocompare-0.7.0.tgz#d1e2f84d7c0a21761f44f5069f25af5c18e35123" + integrity sha512-X6Gqt/bBrWMmYzgpEhj/DKejb0lbLslFpqvTKCoDBXIvWPlbuXQPDcTRok8+ybe6CESzFu1Ac3xSu3q5nNsMNw== + dom-helpers@^3.3.1: version "3.4.0" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" From af9b9735c58977d278d70899b7f1776148bf1606 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Mon, 17 Dec 2018 12:54:15 -0500 Subject: [PATCH 2/4] all selection of from to currency pairs in action --- app/js/features/prices/actions.js | 2 +- app/js/features/prices/saga.js | 5 +++-- app/js/init.js | 7 +++++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/js/features/prices/actions.js b/app/js/features/prices/actions.js index 995efdee..97a80f3b 100644 --- a/app/js/features/prices/actions.js +++ b/app/js/features/prices/actions.js @@ -1,3 +1,3 @@ import { FETCH_PRICES } from './constants' -export const fetchPrices = () => ({ type: FETCH_PRICES }) +export const fetchPrices = payload => ({ type: FETCH_PRICES, payload }) diff --git a/app/js/features/prices/saga.js b/app/js/features/prices/saga.js index fa1e6d5e..efda9435 100644 --- a/app/js/features/prices/saga.js +++ b/app/js/features/prices/saga.js @@ -2,9 +2,10 @@ import { fork, takeEvery, call, put } from 'redux-saga/effects' import cc from 'cryptocompare' import { FETCH_PRICES, FETCH_PRICES_SUCCEEDED, FETCH_PRICES_FAILED } from './constants'; -export function *doFetchPrices() { +export function *doFetchPrices(action) { try { - const data = yield call(cc.priceMulti, ['ETH', 'SNT'], ['USD']) + const { payload: { from, to } } = action + const data = yield call(cc.priceMulti, from, to) yield put({type: FETCH_PRICES_SUCCEEDED, data}) } catch (error) { yield put({type: FETCH_PRICES_FAILED, error}) diff --git a/app/js/init.js b/app/js/init.js index 9ccdc854..4976e8c2 100644 --- a/app/js/init.js +++ b/app/js/init.js @@ -4,9 +4,12 @@ import store from './store' import { fetchPrices } from './features/prices/actions' const dispatch = action => store.dispatch(action) - +const relevantPairs = { + from: ['ETH', 'SNT'], + to: ['USD'] +} export default () => { EmbarkJS.onReady(async (err) => { - dispatch(fetchPrices()) + dispatch(fetchPrices(relevantPairs)) }) } From 73661da1dc5660fc95924257ab97ea7fb9377604 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Mon, 17 Dec 2018 12:56:27 -0500 Subject: [PATCH 3/4] add price selectors --- app/js/features/prices/reducer.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/js/features/prices/reducer.js b/app/js/features/prices/reducer.js index 26044f76..d8b59133 100644 --- a/app/js/features/prices/reducer.js +++ b/app/js/features/prices/reducer.js @@ -13,3 +13,6 @@ function reducer(state = {}, action) { } export default reducer; + +export const getEthUsdPrice = state => state.prices.ETH.USD +export const getSntUsdPrice = state => state.prices.SNT.USD From 2fe09bbd2d463e931fbf6f35c8aa039e68d28713 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Mon, 17 Dec 2018 13:40:05 -0500 Subject: [PATCH 4/4] add prices to PriceContainer --- app/js/containers/PriceContainer.jsx | 31 +++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/app/js/containers/PriceContainer.jsx b/app/js/containers/PriceContainer.jsx index 18af28d0..ba2b0a60 100644 --- a/app/js/containers/PriceContainer.jsx +++ b/app/js/containers/PriceContainer.jsx @@ -1,9 +1,34 @@ import React from 'react' +import { connect } from 'react-redux'; +import { Card, CardImg, CardText, CardBody, + CardTitle, CardSubtitle, Button } from 'reactstrap'; +import { getEthUsdPrice, getSntUsdPrice } from '../features/prices/reducer'; -const PriceContainer = () => ( + +const cardBodyStyle = { textAlign: 'center' } +const cardStyle = { border: 'none' } +const PriceContainer = ({ ethUsd, sntUsd }) => (
-

Hello

+ + + + ETH/USD + {ethUsd} + + + + + + SNT/USD + {sntUsd} + +
) -export default PriceContainer +const mapStateToProps = state => ({ + ethUsd: getEthUsdPrice(state), + sntUsd: getSntUsdPrice(state) +}) + +export default connect(mapStateToProps)(PriceContainer)