Merge pull request #10 from smartcontractkit/170170671-Add-Synthetix-…

…mainnet-pairs-in-aggregator-UI

Add Synthetix mainnet pairs in aggregator UI

feeds-ui/src/enhancers/withMainnet.js

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Redirect } from 'react-router-dom'
+import { withRouter } from 'react-router'
+
+const DEFAULT_OPTIONS = {
+  contractVersion: 2,
+  network: 'mainnet',
+  history: true,
+  bollinger: false,
+}
+
+const MAINNET_CONTRACTS = [
+  {
+    contractAddress: '0x9ab9ee9a5ac8aa4be93345877966b727777501b3',
+    name: 'AUD / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'AUD',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0xa18e0bf319a1316984c9fc9aba850e2a915cce0e',
+    name: 'EUR / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'EUR',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0xb405aa39dca6ecf18691cd638a98c090c477dcf9',
+    name: 'CHF / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'CHF',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0xf277717f64815b17aa687cce701fa154185db4d9',
+    name: 'GBP / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'GBP',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0x8C4a5746d70C1aCeD6c3feB0915f59e3faBb18c3',
+    name: 'JPY / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'JPY',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0xe1ec292422194cfa6bb6089566af3019803b1af2',
+    name: 'XAG / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'XAG',
+    counter: 3600,
+  },
+  {
+    contractAddress: '0x121df6cfe2426e6c9ae1b273f2e38d0c362c03fa',
+    name: 'XAU / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'XAU',
+    counter: 3600,
+  },
+  {
+    contractAddress: '',
+    name: 'BTC / USD aggregation',
+    valuePrefix: '$',
+    answerName: 'BTC',
+    counter: 600,
+  },
+]
+
+/**
+ * withMainnet enhancer
+ */
+const withMainnet = BaseComponent => {
+  const Mainnet = props => {
+    const { params } = props.match
+    const hasContract = MAINNET_CONTRACTS.filter(
+      contract =>
+        contract.contractAddress.toLowerCase() === params.address.toLowerCase(),
+    )
+
+    if (!hasContract.length) {
+      return <Redirect to={'/'} />
+    }
+
+    const options = { ...DEFAULT_OPTIONS, ...hasContract[0] }
+
+    return <BaseComponent {...props} options={options} />
+  }
+
+  return Mainnet
+}
+
+export default BaseComponent => {
+  return withMainnet(withRouter(BaseComponent))
+}

feeds-ui/src/enhancers/withRopsten.js

@@ -126,8 +126,7 @@ const withRopsten = BaseComponent => {
     const { params } = props.match
     const hasContract = ROPSTEN_CONTRACTS.filter(
       contract =>
-        contract.contractAddress.toLocaleLowerCase() ===
-        params.address.toLocaleLowerCase(),
+        contract.contractAddress.toLowerCase() === params.address.toLowerCase(),
     )
 
     if (!hasContract.length) {

feeds-ui/src/pages/Mainnet.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
+import { aggregationOperations } from 'state/ducks/aggregation'
+import { NetworkGraph } from 'components/networkGraph'
+import { NetworkGraphInfo } from 'components/networkGraphInfo'
+import { AnswerHistory } from 'components/answerHistory'
+import { DeviationHistory } from 'components/deviationHistory'
+import withMainnet from 'enhancers/withMainnet'
+import { OracleTable } from 'components/oracleTable'
+
+const NetworkPage = ({ initContract, clearState, options }) => {
+  useEffect(() => {
+    initContract(options).catch(() => {})
+    return () => {
+      clearState()
+    }
+  }, [initContract, clearState, options])
+
+  return (
+    <div className="page-wrapper network-page">
+      <NetworkGraph options={options} />
+      <NetworkGraphInfo options={options} />
+      <AnswerHistory options={options} />
+      <DeviationHistory options={options} />
+      <OracleTable />
+    </div>
+  )
+}
+
+const mapDispatchToProps = {
+  initContract: aggregationOperations.initContract,
+  clearState: aggregationOperations.clearState,
+}
+
+export default connect(null, mapDispatchToProps)(withMainnet(NetworkPage))

feeds-ui/src/pages/Ropsten.js

@@ -10,11 +10,7 @@ import { OracleTable } from 'components/oracleTable'
 
 const NetworkPage = ({ initContract, clearState, options }) => {
   useEffect(() => {
-    async function init() {
-      await initContract(options).catch(() => {})
-    }
-
-    init()
+    initContract(options).catch(() => {})
     return () => {
       clearState()
     }

feeds-ui/src/pages/index.js

@@ -7,6 +7,7 @@ import Testnet from './Testnet'
 import CreatePage from './Create'
 import CustomPage from './Custom'
 import RopstenPage from './Ropsten'
+import MainnetPage from './Mainnet'
 
 const AppRoutes = () => {
   return (
@@ -17,6 +18,7 @@ const AppRoutes = () => {
       <Route exact path="/create" component={CreatePage} />
       <Route exact path="/custom" component={CustomPage} />
       <Route path="/ropsten/:address" component={RopstenPage} />
+      <Route path="/mainnet/:address" component={MainnetPage} />
     </BrowserRouter>
   )
 }

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

@@ -89,6 +89,10 @@ const NODE_NAMES = [
     address: '0x24A718307Ce9B2420962fd5043fb876e17430934',
     name: 'Infinity Stones',
   },
+  {
+    address: '0x72f3dFf4CD17816604dd2df6C2741e739484CA62',
+    name: 'Alpha Vantage',
+  },
 
   // ROPSTEN