Merge pull request #5 from status-im/query-display-price

Query display price

app/js/containers/PriceContainer.jsx

@@ -0,0 +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 cardBodyStyle = { textAlign: 'center' }
+const cardStyle = { border: 'none' }
+const PriceContainer = ({ ethUsd, sntUsd }) => (
+  <div>
+    <Card style={cardStyle}>
+      <CardImg top width="100%" src="https://raw.githubusercontent.com/TrustWallet/tokens/master/coins/60.png" alt="Card image cap" />
+      <CardBody style={cardBodyStyle}>
+        <CardTitle>ETH/USD</CardTitle>
+        <CardSubtitle>{ethUsd}</CardSubtitle>
+      </CardBody>
+    </Card>
+    <Card style={cardStyle}>
+      <CardImg top width="100%" src="https://raw.githubusercontent.com/TrustWallet/tokens/master/images/0x744d70fdbe2ba4cf95131626614a1763df805b9e.png" alt="Card image cap" />
+      <CardBody style={cardBodyStyle}>
+        <CardTitle>SNT/USD</CardTitle>
+        <CardSubtitle>{sntUsd}</CardSubtitle>
+      </CardBody>
+    </Card>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  ethUsd: getEthUsdPrice(state),
+  sntUsd: getSntUsdPrice(state)
+})
+
+export default connect(mapStateToProps)(PriceContainer)

app/js/features/prices/actions.js

@@ -0,0 +1,3 @@
+import { FETCH_PRICES } from './constants'
+
+export const fetchPrices = payload => ({ type: FETCH_PRICES, payload })

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'

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}

app/js/features/prices/reducer.js

@@ -0,0 +1,18 @@
+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;
+
+export const getEthUsdPrice = state => state.prices.ETH.USD
+export const getSntUsdPrice = state => state.prices.SNT.USD

app/js/features/prices/saga.js

@@ -0,0 +1,21 @@
+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(action) {
+  try {
+    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})
+  }
+}
+
+export function *onFetchPrices() {
+  yield takeEvery(FETCH_PRICES, doFetchPrices)
+}
+
+export default [
+  fork(onFetchPrices),
+]

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(
   <Provider store={store}>

app/js/init.js

@@ -0,0 +1,15 @@
+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)
+const relevantPairs = {
+  from: ['ETH', 'SNT'],
+  to: ['USD']
+}
+export default () => {
+  EmbarkJS.onReady(async (err) => {
+    dispatch(fetchPrices(relevantPairs))
+  })
+}

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 {
       <BrowserRouter>
         <Fragment>
           <Header />
-          <Container>  
+          <Container>
             <Route exact path="/" component={HomeContainer} />
             <Route path="/hello" component={HelloContainer} />
+            <Route path="/price" component={PriceContainer} />
           </Container>
         </Fragment>
       </BrowserRouter>
     );
   }
 }
- 
-export default App;
+
+export default App;

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 {
             <NavItem>
               <NavLink tag={Link} to="/hello">Hello</NavLink>
             </NavItem>
+            <NavItem>
+              <NavLink tag={Link} to="/price">Prices</NavLink>
+            </NavItem>
           </Nav>
         </Collapse>
       </Navbar>
@@ -43,4 +46,4 @@ class Header extends Component {
   }
 }
 
-export default Header
+export default Header

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;
+export default rootReducer;

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;
+export default store;

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",

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"