output 24hr price changes

package.json

@@ -21,7 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@coingecko/cryptoformat": "^0.3.1",
+    "@coingecko/cryptoformat": "^0.3.2",
     "ethereum-address": "0.0.4",
     "ms": "^2.1.1"
   },
@@ -33,7 +33,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.5",
     "@reach/router": "^1.2.1",
-    "@svgr/webpack": "^4.2.0",
+    "@svgr/webpack": "^4.3.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.0.3",
@@ -53,13 +53,13 @@
     "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6",
     "react-pose": "^4.0.8",
-    "release-it": "^12.2.1",
+    "release-it": "^12.2.2",
     "style-loader": "^0.23.1",
     "stylelint": "^10.0.1",
     "stylelint-config-standard": "^18.3.0",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.3.1"
+    "webpack-dev-server": "^3.5.1"
   },
   "browserslist": "electron >= 5.0",
   "build": {

src/renderer/components/Ticker.css

@@ -36,3 +36,17 @@
     display: inline-block;
     font-size: .95rem;
 }
+
+.change {
+    font-size: .7rem;
+    display: inline-block;
+    margin-left: .25rem;
+}
+
+.change--positive {
+    color: forestgreen;
+}
+
+.change--negative {
+    color: crimson;
+}

src/renderer/components/Ticker.jsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
 import { AppContext } from '../store/createContext'
 import { cryptoFormatter } from '../../utils'
@@ -7,6 +8,26 @@ import { fadeIn } from './Animations'
 
 const Item = posed.div(fadeIn)
 
+const Change = ({ currency }) => (
+  <AppContext.Consumer>
+    {({ priceChanges }) => {
+      let classes = JSON.stringify(priceChanges[currency]).startsWith('+')
+        ? 'change--positive'
+        : 'change--negative'
+
+      return (
+        <span className={`change ${classes}`}>
+          {Number(priceChanges[currency]).toFixed(1)}%
+        </span>
+      )
+    }}
+  </AppContext.Consumer>
+)
+
+Change.propTypes = {
+  currency: PropTypes.string.isRequired
+}
+
 export default class Ticker extends PureComponent {
   static contextType = AppContext
 
@@ -26,6 +47,7 @@ export default class Ticker extends PureComponent {
           }
         >
           {cryptoFormatter(value, key)}
+          {key !== 'ocean' && <Change currency={key} />}
         </button>
       </Item>
     ))

src/renderer/store/AppProvider.jsx

@@ -26,6 +26,11 @@ export default class AppProvider extends PureComponent {
     currency: 'ocean',
     needsConfig: false,
     prices: pricesMap,
+    priceChanges: Object.assign(
+      ...conversions.map(key => ({
+        [key]: 0
+      }))
+    ),
     toggleCurrencies: currency => this.toggleCurrencies(currency),
     setBalances: () => this.setBalances(),
     accentColor: '#f6388a'
@@ -75,21 +80,27 @@ export default class AppProvider extends PureComponent {
       `https://api.etherscan.io/api?module=account&action=tokenbalance&contractaddress=${oceanTokenContract}&address=${account}&tag=latest`
     )
 
-    const balance = (json.result /= 1000000000000000000) // Convert from vodka 10^18
+    const balance = json.result / 1e18 // Convert from vodka 10^18
     return balance
   }
 
   fetchAndSetPrices = async () => {
     const currencies = conversions.join(',')
     const json = await fetchData(
-      `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}`
+      `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true`
     )
 
     let newPrices = new Map(this.state.prices) // make a shallow copy of the Map
     conversions.map(key => newPrices.set(key, json['ocean-protocol'][key])) // modify the copy
 
+    const newPriceChanges = await Object.assign(
+      ...conversions.map(key => ({
+        [key]: json['ocean-protocol'][key + '_24h_change']
+      }))
+    )
+
     ipcRenderer.send('prices-updated', Array.from(newPrices)) // convert Map to array, ipc messages seem to kill it
-    this.setState({ prices: newPrices })
+    this.setState({ prices: newPrices, priceChanges: newPriceChanges })
     return newPrices
   }