Merge pull request #9 from smartcontractkit/170048196-170048219-add-g…

…as-price

Add gas price information

feeds-ui/src/components/networkGraph/NetworkGraph.component.js

@@ -81,6 +81,7 @@ const NetworkGraph = ({
           <div className="details">
             <div className="date"></div>
             <div className="block"></div>
+            <div className="gas"></div>
           </div>
         </div>
 

feeds-ui/src/components/networkGraph/NetworkGraph.d3.js

@@ -40,7 +40,11 @@ export default class NetworkGraph {
       .style('opacity', 0)
   }
 
-  updateNodes(nodes) {
+  updateNodes(updatedNodes) {
+    // Prevent from update redux store
+    // Fix it after D3 refactor
+    const nodes = JSON.parse(JSON.stringify(updatedNodes))
+
     const updateData = this.svg
       .select('.network-graph__nodes')
       .selectAll('g.network-graph__node-group')
@@ -189,6 +193,7 @@ export default class NetworkGraph {
     this.oracleTooltip.select('.price').text('')
     this.oracleTooltip.select('.date').text('')
     this.oracleTooltip.select('.block').text('')
+    this.oracleTooltip.select('.gas').text('')
 
     this.oracleTooltip.select('.name').text(() => d.name)
 
@@ -211,6 +216,10 @@ export default class NetworkGraph {
       this.oracleTooltip
         .select('.block')
         .text(() => `Block: ${d.state.meta.blockNumber}`)
+
+      this.oracleTooltip
+        .select('.gas')
+        .text(() => `Gas Price (Gwei): ${d.state.meta.gasPrice}`)
     }
   }
 

feeds-ui/src/components/oracleTable/OracleTable.component.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react'
+import { humanizeUnixTimestamp } from 'utils'
+import _ from 'lodash'
+import { Table, Icon } from 'antd'
+
+const OracleTable = ({
+  networkGraphState,
+  networkGraphNodes,
+  fetchEthGasPrice,
+  ethGasPrice,
+}) => {
+  const [data, setData] = useState()
+  const [gasPrice, setGasPrice] = useState()
+
+  useEffect(() => {
+    fetchEthGasPrice()
+  }, [fetchEthGasPrice])
+
+  useEffect(() => {
+    if (ethGasPrice) {
+      setGasPrice(ethGasPrice.fast / 10)
+    }
+  }, [ethGasPrice])
+
+  useEffect(() => {
+    const mergedData = networkGraphNodes
+      .filter(node => node.type === 'oracle')
+      .map(oracle => {
+        const state = _.find(networkGraphState, { sender: oracle.address })
+        return {
+          oracle: oracle,
+          state,
+          key: oracle.id,
+        }
+      })
+    setData(mergedData)
+  }, [networkGraphState, networkGraphNodes])
+
+  const columns = [
+    {
+      title: 'Oracle',
+      dataIndex: 'oracle.name',
+      key: 'name',
+      sorter: (a, b) =>
+        a.oracle.name.localeCompare(b && b.oracle && b.oracle.name),
+    },
+    {
+      title: 'Answer',
+      dataIndex: 'state.responseFormatted',
+      key: 'answer',
+      sorter: (a, b) => {
+        if (!a.state || !b.state) return
+
+        return a.state.responseFormatted - b.state.responseFormatted
+      },
+    },
+    {
+      title: 'Gas Price (Gwei)',
+      dataIndex: 'state.meta.gasPrice',
+      key: 'gas',
+      sorter: (a, b) => {
+        if (!a.state || !b.state) return
+        return a.state.meta.gasPrice - b.state.meta.gasPrice
+      },
+      defaultSortOrder: 'descend',
+    },
+    {
+      title: 'Date',
+      dataIndex: 'state.meta.timestamp',
+      key: 'timestamp',
+      render: timestamp => humanizeUnixTimestamp(timestamp),
+    },
+  ]
+
+  return (
+    <div className="oracle-table">
+      <h2 className="oracle-table-header">Oracles data</h2>
+      <div className="gas-price-info">
+        <h4>
+          <Icon type="check-circle" /> Recommended gas price:{' '}
+          <b>{gasPrice} Gwei</b>
+        </h4>
+      </div>
+      <Table
+        dataSource={data}
+        columns={columns}
+        pagination={false}
+        size={'middle'}
+        locale={{ emptyText: <Icon type="loading" /> }}
+      />
+    </div>
+  )
+}
+
+export default OracleTable

feeds-ui/src/components/oracleTable/OracleTable.enhanced.js

@@ -0,0 +1,19 @@
+import OracleTable from './OracleTable.component'
+import { connect } from 'react-redux'
+
+import {
+  aggregationSelectors,
+  aggregationOperations,
+} from 'state/ducks/aggregation'
+
+const mapStateToProps = state => ({
+  networkGraphNodes: aggregationSelectors.networkGraphNodes(state),
+  networkGraphState: aggregationSelectors.networkGraphState(state),
+  ethGasPrice: state.aggregation.ethGasPrice,
+})
+
+const mapDispatchToProps = {
+  fetchEthGasPrice: aggregationOperations.fetchEthGasPrice,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(OracleTable)

feeds-ui/src/components/oracleTable/index.js

@@ -0,0 +1 @@
+export { default as OracleTable } from './OracleTable.enhanced'

feeds-ui/src/contracts/AggregationContract.js

@@ -116,6 +116,19 @@ export default class AggregationContract {
     })
   }
 
+  async addGasPriceToLogs(logs) {
+    if (!logs) return logs
+
+    const logsWithGasPriceOps = logs.map(async log => {
+      const tx = await this.provider.getTransaction(log.meta.transactionHash)
+      // eslint-disable-next-line require-atomic-updates
+      log.meta.gasPrice = ethers.utils.formatUnits(tx.gasPrice, 'gwei')
+      return log
+    })
+
+    return Promise.all(logsWithGasPriceOps)
+  }
+
   async oracleResponseLogs({ answerId, fromBlock }) {
     const answerIdHex = ethers.utils.hexlify(answerId)
 
@@ -198,7 +211,11 @@ export default class AggregationContract {
           }),
         )
         const logWithTimestamp = await this.addBlockTimestampToLogs([logged])
-        return callback ? callback(logWithTimestamp[0]) : logWithTimestamp[0]
+        const logWithGasPrice = await this.addGasPriceToLogs(
+          logWithTimestamp,
+        ).then(l => l[0])
+
+        return callback ? callback(logWithGasPrice) : logWithGasPrice
       }),
     )
   }

feeds-ui/src/pages/EthUsdPage.js

@@ -8,6 +8,7 @@ import { NetworkGraph } from 'components/networkGraph'
 import { NetworkGraphInfo } from 'components/networkGraphInfo'
 import { AnswerHistory } from 'components/answerHistory'
 import { DeviationHistory } from 'components/deviationHistory'
+import { OracleTable } from 'components/oracleTable'
 
 const OPTIONS = {
   contractAddress: '0x79fEbF6B9F76853EDBcBc913e6aAE8232cFB9De9',
@@ -42,6 +43,7 @@ const NetworkPage = ({ initContract, clearState }) => {
       <NetworkGraphInfo options={OPTIONS} />
       <AnswerHistory options={OPTIONS} />
       <DeviationHistory options={OPTIONS} />
+      <OracleTable />
     </div>
   )
 }

feeds-ui/src/pages/Ropsten.js

@@ -6,6 +6,7 @@ import { NetworkGraphInfo } from 'components/networkGraphInfo'
 import { AnswerHistory } from 'components/answerHistory'
 import { DeviationHistory } from 'components/deviationHistory'
 import withRopsten from 'enhancers/withRopsten'
+import { OracleTable } from 'components/oracleTable'
 
 const NetworkPage = ({ initContract, clearState, options }) => {
   useEffect(() => {
@@ -25,6 +26,7 @@ const NetworkPage = ({ initContract, clearState, options }) => {
       <NetworkGraphInfo options={options} />
       <AnswerHistory options={options} />
       <DeviationHistory options={options} />
+      <OracleTable />
     </div>
   )
 }

feeds-ui/src/state/ducks/aggregation/actions.js

@@ -63,3 +63,8 @@ export const setOptions = payload => ({
 export const clearState = () => ({
   type: types.CLEAR_STATE,
 })
+
+export const setEthGasPrice = payload => ({
+  type: types.ETHGAS_PRICE,
+  payload,
+})

feeds-ui/src/state/ducks/aggregation/operations.js

@@ -65,10 +65,16 @@ const fetchOracleResponseById = request => {
 
       const logs = await contractInstance.oracleResponseLogs(request)
       const withTimestamp = await contractInstance.addBlockTimestampToLogs(logs)
+      const withGasAndTimeStamp = await contractInstance.addGasPriceToLogs(
+        withTimestamp,
+      )
 
-      const uniquePayload = _.uniqBy([...withTimestamp, ...currentLogs], l => {
-        return l.sender
-      })
+      const uniquePayload = _.uniqBy(
+        [...withGasAndTimeStamp, ...currentLogs],
+        l => {
+          return l.sender
+        },
+      )
 
       dispatch(actions.setOracleResponse(uniquePayload))
     } catch {
@@ -312,4 +318,16 @@ const fetchJobId = address => {
   }
 }
 
-export { initContract, clearState, fetchJobId }
+const fetchEthGasPrice = () => {
+  return async dispatch => {
+    try {
+      const data = await fetch('https://ethgasstation.info/json/ethgasAPI.json')
+      const jsonData = await data.json()
+      dispatch(actions.setEthGasPrice(jsonData))
+    } catch {
+      console.error('Could not fetch gas price')
+    }
+  }
+}
+
+export { initContract, clearState, fetchJobId, fetchEthGasPrice }

feeds-ui/src/state/ducks/aggregation/reducers.js

@@ -13,6 +13,7 @@ export const initialState = {
   minimumResponses: null,
   updateHeight: null,
   answerHistory: null,
+  ethGasPrice: null,
 }
 
 function clearState(state) {
@@ -101,6 +102,12 @@ const reducer = (state = initialState, action) => {
         answerHistory: action.payload,
       }
 
+    case types.ETHGAS_PRICE:
+      return {
+        ...state,
+        ethGasPrice: action.payload,
+      }
+
     default:
       return state
   }

feeds-ui/src/state/ducks/aggregation/types.js

@@ -12,3 +12,4 @@ export const REQUEST_TIME = 'aggregation/REQUEST_TIME'
 export const MINUMUM_RESPONSES = 'aggregation/MINUMUM_RESPONSES'
 export const UPDATE_HEIGHT = 'aggregation/UPDATE_HEIGHT'
 export const ANSWER_HISTORY = 'aggregation/ANSWER_HISTORY'
+export const ETHGAS_PRICE = 'aggregation/ETHGAS_PRICE'