Merge pull request #6 from Alethio/ET-1609

Et 1609 - Add explorer url env and flag for privacy-policy
Alethio · Feb 6, 2019 · df433d5 · df433d5
2 parents 86e0bbb + c9c9814
commit df433d5
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 27 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,6 +7,9 @@ jobs:
     working_directory: ~/repo
     steps:
       - checkout
+      - run:
+          name: Init Config
+          command: ./set-env-vars.js > config.js
       - run:
           name: Yarn Install
           command: yarn install

diff --git a/app/components/NetStats/BigChart/index.js b/app/components/NetStats/BigChart/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { EXPLORER_URL } from 'config';
 import { BarChart, Bar, Tooltip, YAxis, ReferenceLine } from 'recharts';
 import { convertHashes, numberWithCommas, prepareChartData } from 'utils/helpers';
 import { BigNumber }  from 'bignumber.js';
@@ -11,6 +12,7 @@ import Container from './Container';
 import Label from './Label';
 import Value from './Value';
 import spinner from 'resources/img/Eclipse.svg';
+
 const BAR_WIDTH = 8;
 const CHART_HEIGHT = 91;
 const CHART_MARGINS = {
@@ -24,7 +26,7 @@ class BigChart extends Component {
   handleClickAction(data) {
     let blockNr = data.block.match(/\d/g);
     blockNr = blockNr.join('');
-    window.open(`https://ethstats.io/block/${blockNr}`, '_blank');
+    window.open(`${EXPLORER_URL}/block/${blockNr}`, '_blank');
   }
   render() {
     const {dataKey, tooltipKey, measureUnit, hasDomain, hasNavigation, color, chartStateData, labelPrefix, valuePrefix} = this.props;
@@ -90,10 +92,10 @@ class BigChart extends Component {
         { chartStateData ?
           <div>
             <BarChart
-              cursor="pointer"
+              cursor={EXPLORER_URL ? 'pointer' : '' }
               width={this.props.numberOfBars * BAR_WIDTH} height={CHART_HEIGHT} data={data}
               margin={CHART_MARGINS}
-              className="pointer">
+              className={EXPLORER_URL ? 'pointer' : '' }>
               <defs>
                 <linearGradient x1="50%" y1="3.061617e-15%" x2="50%" y2="100%" id="barGradient">
                   <stop stopColor="#40FFFF" offset="0%"/>
@@ -102,7 +104,7 @@ class BigChart extends Component {
               </defs>
               <Tooltip offset={0} wrapperStyle={{top: '60px', zIndex: 100}} content={<ChartTooltip dataKey={dataKey} tooltipKey={tooltipKey} measureUnit={measureUnit} valuePrefix={valuePrefix} labelPrefix={labelPrefix}/>}/>
               { hasNavigation ?
-                <Bar dataKey={dataKey} minPointSize={minPointSize} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={this.handleClickAction}/>
+                <Bar dataKey={dataKey} minPointSize={minPointSize} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={ EXPLORER_URL ?  this.handleClickAction : null}/>
                 : <Bar dataKey={dataKey} minPointSize={minPointSize} isAnimationActive={false} fill={color} shape={<RoundedBar/>} />}
               {hasDomain && <YAxis orientation="left" domain={[min, max]} hide/>}
               <ReferenceLine y={avg} label="" stroke={chartColor} />

diff --git a/app/components/NetStats/BigChartsSectionItem/TopLeft/index.js b/app/components/NetStats/BigChartsSectionItem/TopLeft/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { EXPLORER_URL } from 'config';
 import { numberWithCommas, convertHashes } from 'utils/helpers';
 import Title from '../Title';
 import Value from '../Value';
@@ -10,7 +11,7 @@ class TopLeft extends React.Component {
   handleClickAction(data) {
     let blockNr = data.match(/\d/g);
     blockNr = blockNr.join('');
-    window.open(`https://ethstats.io/block/${blockNr}`, '_blank');
+    window.open(`${EXPLORER_URL}/block/${blockNr}`, '_blank');
   }
   render() {
     const { mainTitle, color, chartStateData, reducerName } = this.props;
@@ -28,8 +29,8 @@ class TopLeft extends React.Component {
       <div>
         <Title>{mainTitle}</Title>
         { chartStateData &&
-          <Value color={color} onClick={ reducerName === 'lastBlock' ? () => this.handleClickAction(finalValue) : null }
-            className={ reducerName === 'lastBlock' ? 'pointer' : ''}>
+          <Value color={color} onClick={ reducerName === 'lastBlock' && EXPLORER_URL ? () => this.handleClickAction(finalValue) : null }
+            className={ reducerName === 'lastBlock' && EXPLORER_URL ? 'pointer' : ''}>
             {finalValue}
           </Value> }
       </div>

diff --git a/app/components/NetStats/Footer/index.js b/app/components/NetStats/Footer/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { PRIVACY_POLICY } from 'config';
 import Container from './Container';
 import IconContainer from './IconContainer';
 import FlexRow from './FlexRow';
@@ -23,7 +24,7 @@ class Footer extends React.Component {
         <FlexRow>
           { this.props.hasGuideTour && guideTour}
           <ReportIssue />
-          <PrivacyPolicy/>
+          {PRIVACY_POLICY && <PrivacyPolicy/> }
         </FlexRow>
         <FlexRow>
           <Text>EthStats.io (beta) powered by </Text>

diff --git a/app/components/NetStats/HistoricalBigChartsSectionItem/TopLeft/index.js b/app/components/NetStats/HistoricalBigChartsSectionItem/TopLeft/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { EXPLORER_URL } from 'config';
 
 import Title from 'components/NetStats/BigChartsSectionItem/Title';
 import Value from 'components/NetStats/BigChartsSectionItem/Value';
@@ -9,14 +10,15 @@ class TopLeft extends React.Component {
   handleClickAction(data) {
     let blockNr = data.match(/\d/g);
     blockNr = blockNr.join('');
-    window.open(`https://ethstats.io/block/${blockNr}`, '_blank');
+    window.open(`${EXPLORER_URL}/block/${blockNr}`, '_blank');
   }
   render() {
     const { title, value, color } = this.props;
     return (
       <div>
         <Title>{title}</Title>
-        <Value color={color} onClick={ () => this.handleClickAction(value) } className={ title === 'Block number' ? 'pointer' : '' }>
+        <Value color={color} onClick={  title === 'Block number' && EXPLORER_URL ? () => this.handleClickAction(value) : null }
+          className={ title === 'Block number' && EXPLORER_URL ? 'pointer' : '' }>
           {value}
         </Value>
       </div>

diff --git a/app/components/NetStats/SmallChart/index.js b/app/components/NetStats/SmallChart/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { EXPLORER_URL } from 'config';
 import {BarChart, ComposedChart, Line, Bar, Tooltip, YAxis} from 'recharts';
 import ChartTooltip from 'components/ChartTooltip';
 import {prepareChartData, prepareUncleChartData, preparePropagationChartData, prepareETHPendingChartData, prepareGasPriceChartData} from 'utils/helpers';
 import RoundedBar from './RoundedBar';
 import SpinnerContainer from './SpinnerContainer';
 import spinnerImgRes from 'resources/img/Eclipse.svg';
 import Spinner from '../BigChartsSectionItem/Spinner';
+
 const BAR_WIDTH = 6;
 const CHART_HEIGHT = 62;
 const CHART_MARGINS = {
@@ -22,7 +24,7 @@ class SmallChart extends React.Component {
   handleClickAction(data) {
     let blockNr = data.block.match(/\d/g);
     blockNr = blockNr.join('');
-    window.open(`https://ethstats.io/block/${blockNr}`, '_blank');
+    window.open(`${EXPLORER_URL}/block/${blockNr}`, '_blank');
   }
   render() {
     const { dataKey, tooltipKey, measureUnit, hasDomain, hasNavigation, color, full, chartStateData, labelPrefix, valuePrefix} = this.props;
@@ -66,13 +68,13 @@ class SmallChart extends React.Component {
           <div>
             {dataKey === 'histogram' ?
               <ComposedChart
-                cursor="default"
+                cursor={EXPLORER_URL ? 'pointer' : ''}
                 width={chartWidth} height={CHART_HEIGHT} data={data}
                 margin={CHART_MARGINS}
-                className="pointer">
+                className={EXPLORER_URL && 'pointer'}>
                 <Tooltip offset={0} wrapperStyle={{top: '-55px'}} content={<ChartTooltip dataKey={dataKey} tooltipKey={tooltipKey} measureUnit={measureUnit} full={full}/>}/>
                 {hasNavigation ?
-                  <Bar dataKey={dataKey} minPointSize={1} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={this.handleClickAction}/>
+                  <Bar dataKey={dataKey} minPointSize={1} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={EXPLORER_URL ? this.handleClickAction : null}/>
                   : <Bar dataKey={dataKey} minPointSize={1} isAnimationActive={false} fill={color} shape={<RoundedBar/>}/>}
                 <Line type="monotone" dataKey={dataKey} stroke="#EFC865" dot={false} activeDot={false} strokeWidth="1"/>
                 {hasDomain && <YAxis orientation="left" domain={[min, max]} hide/>}
@@ -82,22 +84,22 @@ class SmallChart extends React.Component {
                   cursor="default"
                   width={chartWidth} height={CHART_HEIGHT} data={data}
                   margin={CHART_MARGINS}
-                  className="pointer">
+                  className={EXPLORER_URL && 'pointer'}>
                   <Tooltip offset={0} wrapperStyle={{top: '-50px'}} content={<ChartTooltip forUncles dataKey={dataKey} tooltipKey={tooltipKey} measureUnit={measureUnit} full={full} labelPrefix={labelPrefix} valuePrefix={valuePrefix}/>}/>
                   {hasNavigation ?
-                    <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={this.handleClickAction}/> :
+                    <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={EXPLORER_URL ? this.handleClickAction : null}/> :
                     <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>}/>}
                   {hasDomain && <YAxis orientation="left" domain={[min, max]} hide/>}
                 </BarChart> :
                 chartStateData ?
                   <BarChart
-                    cursor="pointer"
+                    cursor={EXPLORER_URL ? 'pointer' : ''}
                     width={chartWidth} height={CHART_HEIGHT} data={data}
                     margin={CHART_MARGINS}
-                    className="pointer">
+                    className={EXPLORER_URL && 'pointer'}>
                     <Tooltip offset={0} wrapperStyle={{top: '-50px'}} content={<ChartTooltip dataKey={dataKey} tooltipKey={tooltipKey} measureUnit={measureUnit} full={full} labelPrefix={labelPrefix} valuePrefix={valuePrefix}/>}/>
                     {hasNavigation ?
-                      <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={this.handleClickAction}/> :
+                      <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>} onClick={EXPLORER_URL ? this.handleClickAction : null}/> :
                       <Bar dataKey={dataKey} minPointSize={3} isAnimationActive={false} fill={color} shape={<RoundedBar/>}/>}
                     {hasDomain && <YAxis orientation="left" domain={[min, max]} hide/>}
                   </BarChart> : <div></div>

diff --git a/app/index.tpl.html b/app/index.tpl.html
@@ -26,7 +26,7 @@
 
     gtag('config', 'UA-132898370-1');
   </script>
-  <script src="config.js"></script>
+  <script src="/config.js"></script>
 </head>
 <body class="view-login">
   <div id="root"></div>

diff --git a/app/routes/index.js b/app/routes/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route, IndexRoute, browserHistory } from 'react-router';
+import { PRIVACY_POLICY } from 'config';
 
 import App from 'containers/App';
 
@@ -13,7 +14,7 @@ export default () => {
     <Route path="/" component={App}>
       <IndexRoute name="Network Statistics" component={NetworkStatistics} />
       <Route path="demo-call-graphs" component={DemoCallGraphs} />
-      <Route path="privacy-policy" component={PrivacyPolicy} />
+      { PRIVACY_POLICY && <Route path="privacy-policy" component={PrivacyPolicy} /> }
       <Route path="history/block/:blockNr" component={({ params }) => <HistoricalBlock blockNr={params.blockNr}/>} />
       <Route path="*" name="404" component={() => {
         browserHistory.replace('/');

diff --git a/app/routes/pages/DemoCallGraphs/index.js b/app/routes/pages/DemoCallGraphs/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Graph from 'react-graph-vis';
 import TxIcon from 'resources/img/Transaction.png';
 import ContractMsgIcon from 'resources/img/ContractMsg.png';
@@ -10,9 +9,6 @@ import accountInteractionGraph from 'resources/dummyData/accountInteractionGraph
 import messageGraph from 'resources/dummyData/messageGraph';
 import SelectorType from './SelectorType';
 
-const prefix = 'https://stage.ethstats.io/';
-
-
 class DemoCallGraphs extends React.Component {
   constructor(props) {
     super(props);

diff --git a/config.js.example b/config.js.example
@@ -3,5 +3,7 @@ const config = {
   DS_URL: '127.0.0.1:6020',
   DS_USER: 'frontend',
   DS_PASS: '',
-  DS_NAMESPACE: 'ethstats/'
+  DS_NAMESPACE: 'ethstats/',
+  EXPLORER_URL: 'https://ethstats.io',
+  PRIVACY_POLICY: true
 };
diff --git a/set-env-vars.js b/set-env-vars.js
@@ -25,7 +25,11 @@ config = JSON.parse(config);
 
 Object.keys(config).forEach(item => {
   if (process.env[item]) {
-    config[item] = process.env[item];
+    if (item === 'PRIVACY_POLICY') {
+      config[item] = process.env[item] === 'true';
+    } else {
+      config[item] = process.env[item];
+    }
   }
 });