Merge pull request #565 from eoscostarica/fix/refactor-ui

UI issues
edenia · Jun 3, 2021 · 027c55f · 027c55f
2 parents 11435b7 + 8563a86
commit 027c55f
Show file tree

Hide file tree

Showing 39 changed files with 358 additions and 80 deletions.
diff --git a/.env.jungle b/.env.jungle
@@ -60,7 +60,7 @@ REACT_APP_USE_BLOCK_PRODUCER_AGREEMENT_CONTRACT=true
 REACT_APP_HASURA_URL=http://localhost:8585/v1/graphql
 REACT_APP_EOS_API_NETWORK_NAME=jungle
 REACT_APP_EOS_API_NETWORK_LABEL=Jungle
-REACT_APP_EOS_API_NETWORK_LOGO=https://bloks.io/img/eosio.png
+REACT_APP_EOS_API_NETWORK_LOGO=https://jungletestnet.io/assets/jungle-testnet-logo.png
 REACT_APP_EOS_API_HOST=jungle.eosio.cr
 REACT_APP_EOS_API_PORT=443
 REACT_APP_EOS_API_PROTOCOL=https
@@ -72,4 +72,6 @@ REACT_APP_EOS_BP_JSON_ON_CHAIN_SCOPE=producerjson
 REACT_APP_TOKEN_SYMBOL=EOS
 REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
 REACT_APP_DISABLED_MENU_ITEMS=["/missed-blocks","/block-distribution"]
-REACT_APP_BLOCK_EXPLORER_URL=https://jungle3.bloks.io/transaction/${transaction}
+REACT_APP_BLOCK_EXPLORER_URL=https://jungle3.bloks.io/transaction/${transaction}
+REACT_APP_STATE_HISTORY_ENABLED=false
+REACT_APP_GOOGLE_ANALITIC_PAGE_ID=G-E6Y0EC9FT8
diff --git a/.env.lacchain b/.env.lacchain
@@ -75,3 +75,5 @@ REACT_APP_TOKEN_SYMBOL=
 REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
 REACT_APP_DISABLED_MENU_ITEMS=[]
 REACT_APP_BLOCK_EXPLORER_URL=https://explorer.latamlink.io/transaction/${transaction}
+REACT_APP_STATE_HISTORY_ENABLED=true
+REACT_APP_GOOGLE_ANALITIC_PAGE_ID=G-E6Y0EC9FT8
diff --git a/.env.local b/.env.local
@@ -63,4 +63,6 @@ REACT_APP_EOS_BP_JSON_ON_CHAIN_CONTRACT=producerjson
 REACT_APP_EOS_BP_JSON_ON_CHAIN_TABLE=producerjson
 REACT_APP_EOS_BP_JSON_ON_CHAIN_SCOPE=producerjson
 REACT_APP_TOKEN_SYMBOL=EOS
-REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
+REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
+REACT_APP_STATE_HISTORY_ENABLED=true
+REACT_APP_GOOGLE_ANALITIC_PAGE_ID=G-E6Y0EC9FT8
diff --git a/.env.mainnet b/.env.mainnet
@@ -73,3 +73,5 @@ REACT_APP_TOKEN_SYMBOL=EOS
 REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
 REACT_APP_DISABLED_MENU_ITEMS=["/missed-blocks", "/cpu-benchmark","/block-distribution"]
 REACT_APP_BLOCK_EXPLORER_URL=https://bloks.io/transaction/${transaction}
+REACT_APP_STATE_HISTORY_ENABLED=false
+REACT_APP_GOOGLE_ANALITIC_PAGE_ID=G-E6Y0EC9FT8
diff --git a/.env.telostestnet b/.env.telostestnet
@@ -75,3 +75,5 @@ REACT_APP_TOKEN_SYMBOL=TLOS
 REACT_APP_NETWORK_URL=[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]
 REACT_APP_DISABLED_MENU_ITEMS=["/missed-blocks","/block-distribution"]
 REACT_APP_BLOCK_EXPLORER_URL=https://telos-test.bloks.io/transaction/${transaction}
+REACT_APP_STATE_HISTORY_ENABLED=false
+REACT_APP_GOOGLE_ANALITIC_PAGE_ID=G-E6Y0EC9FT8
diff --git a/.github/workflows/push-dev-environment.yaml b/.github/workflows/push-dev-environment.yaml
@@ -44,7 +44,7 @@ jobs:
           REACT_APP_HASURA_URL: https://graphql-jungle.eosio.online/v1/graphql
           REACT_APP_EOS_API_NETWORK_NAME: jungle
           REACT_APP_EOS_API_NETWORK_LABEL: Jungle
-          REACT_APP_EOS_API_NETWORK_LOGO: https://bloks.io/img/eosio.png
+          REACT_APP_EOS_API_NETWORK_LOGO: https://jungletestnet.io/assets/jungle-testnet-logo.png
           REACT_APP_EOS_API_HOST: jungle.eosio.cr
           REACT_APP_EOS_API_PORT: 443
           REACT_APP_EOS_API_PROTOCOL: https
@@ -57,6 +57,8 @@ jobs:
           REACT_APP_NETWORK_URL: '[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]'
           REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks","/block-distribution","/cpu-benchmark"]'
           REACT_APP_BLOCK_EXPLORER_URL: 'https://jungle3.bloks.io/transaction/${transaction}'
+          REACT_APP_STATE_HISTORY_ENABLED: 'false'
+          REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8'
 
       - name: Build kubernetes files
         id: build_kubernetes_files

diff --git a/.github/workflows/push-lacchain-environment.yaml b/.github/workflows/push-lacchain-environment.yaml
@@ -61,6 +61,8 @@ jobs:
           REACT_APP_NETWORK_URL: '[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]'
           REACT_APP_DISABLED_MENU_ITEMS: '[]'
           REACT_APP_BLOCK_EXPLORER_URL: 'https://explorer.latamlink.io/transaction/${transaction}'
+          REACT_APP_STATE_HISTORY_ENABLED: 'true'
+          REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8'
 
       - name: Build and deploy kubernetes files
         id: build_kubernetes_files

diff --git a/.github/workflows/push-proton-testnet-environment.yaml b/.github/workflows/push-proton-testnet-environment.yaml
@@ -22,7 +22,7 @@ jobs:
             --username ${{ secrets.DOCKER_HUB_USER }} \
             --password-stdin
 
-      - name: "step-log"
+      - name: 'step-log'
         run: |
           echo "github.ref: ${{github.ref}}"
 
@@ -63,6 +63,8 @@ jobs:
           REACT_APP_NETWORK_URL: '[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]'
           REACT_APP_DISABLED_MENU_ITEMS: '["/cpu-benchmark"]'
           REACT_APP_BLOCK_EXPLORER_URL: 'https://proton-test.bloks.io/transaction/${transaction}'
+          REACT_APP_STATE_HISTORY_ENABLED: 'false'
+          REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8'
 
       - name: Build and deploy kubernetes files
         id: build_kubernetes_files

diff --git a/.github/workflows/push-telos-testnet-environment.yaml b/.github/workflows/push-telos-testnet-environment.yaml
@@ -22,7 +22,7 @@ jobs:
             --username ${{ secrets.DOCKER_HUB_USER }} \
             --password-stdin
 
-      - name: "step-log"
+      - name: 'step-log'
         run: |
           echo "github.ref: ${{github.ref}}"
 
@@ -63,6 +63,8 @@ jobs:
           REACT_APP_NETWORK_URL: '[{"label":"EOS Mainnet","value":"https://mainnet.eosio.online"},{"label":"LACChain EOSIO","value":"https://lacchain.eosio.online"},{"label":"Jungle Testnet","value":"https://jungle.eosio.online"},{"label":"Proton Testnet","value":"https://proton-testnet.eosio.online"},{"label":"Telos Testnet","value":"https://telos-testnet.eosio.online"}]'
           REACT_APP_DISABLED_MENU_ITEMS: '["/missed-blocks", "/cpu-benchmark","/block-distribution"]'
           REACT_APP_BLOCK_EXPLORER_URL: 'https://telos-test.bloks.io/transaction/${transaction}'
+          REACT_APP_STATE_HISTORY_ENABLED=: 'false'
+          REACT_APP_GOOGLE_ANALITIC_PAGE_ID: 'G-E6Y0EC9FT8'
 
       - name: Build and deploy kubernetes files
         id: build_kubernetes_files

diff --git a/README.md b/README.md
@@ -171,6 +171,7 @@ REACT_APP_EOS_USE_BP_JSON_ON_CHAIN=false
 REACT_APP_EOS_BP_JSON_ON_CHAIN_CONTRACT=producerjson
 REACT_APP_EOS_BP_JSON_ON_CHAIN_TABLE=producerjson
 REACT_APP_EOS_BP_JSON_ON_CHAIN_SCOPE=producerjson
+REACT_APP_STATE_HISTORY_ENABLED=false
 ```
 
 ### Quick start

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -110,5 +110,7 @@ services:
       REACT_APP_DISABLED_MENU_ITEMS: '${REACT_APP_DISABLED_MENU_ITEMS}'
       REACT_APP_BLOCK_EXPLORER_URL: '${REACT_APP_BLOCK_EXPLORER_URL}'
       REACT_APP_TAG: '${REACT_APP_TAG}'
+      REACT_APP_STATE_HISTORY_ENABLED: '${REACT_APP_STATE_HISTORY_ENABLED}'
+      REACT_APP_GOOGLE_ANALITIC_PAGE_ID: '${REACT_APP_GOOGLE_ANALITIC_PAGE_ID}'
 volumes:
-  postgres_data:
+  postgres_data:
diff --git a/webapp/Dockerfile b/webapp/Dockerfile
@@ -26,6 +26,8 @@ ARG react_app_disabled_menu_items
 ARG react_app_network_url
 ARG react_app_block_explorer_url
 ARG react_app_tag
+ARG react_app_state_history_enabled
+ARG react_app_google_analitic_page_id
 
 ENV WORK_DIR /usr/src/app
 ENV PATH $WORK_DIR/node_modules/.bin:$PATH
@@ -57,6 +59,8 @@ ENV REACT_APP_DISABLED_MENU_ITEMS $react_app_disabled_menu_items
 ENV REACT_APP_NETWORK_URL $react_app_network_url
 ENV REACT_APP_BLOCK_EXPLORER_URL $react_app_block_explorer_url
 ENV REACT_APP_TAG $react_app_tag
+ENV REACT_APP_STATE_HISTORY_ENABLED $react_app_state_history_enabled
+ENV REACT_APP_GOOGLE_ANALITIC_PAGE_ID $react_app_google_analitic_page_id
 
 RUN mkdir -p $WORK_DIR
 WORKDIR $WORK_DIR

diff --git a/webapp/makefile b/webapp/makefile
@@ -54,6 +54,8 @@ build-docker: ./Dockerfile
 		--build-arg react_app_disabled_menu_items='$(REACT_APP_DISABLED_MENU_ITEMS)' \
 		--build-arg react_app_network_url='$(REACT_APP_NETWORK_URL)' \
 		--build-arg react_app_block_explorer_url='$(REACT_APP_BLOCK_EXPLORER_URL)' \
+		--build-arg react_app_state_history_enabled='$(REACT_APP_STATE_HISTORY_ENABLED)' \
+		--build-arg react_app_google_analitic_page_id='$(REACT_APP_GOOGLE_ANALITIC_PAGE_ID)' \
 		.
 
 pull-image: ##@devops Pull the latest image from registry for caching

diff --git a/webapp/package.json b/webapp/package.json
@@ -68,6 +68,7 @@
     "react-d3-graph": "^2.5.0",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
+    "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.0",
     "react-perfect-scrollbar": "^1.5.8",

diff --git a/webapp/src/components/Icons/Rewards.js b/webapp/src/components/Icons/Rewards.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const RewardsSvg = () => (
+  <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M2 9c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2v10c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V9z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M16 21V5c0-1.105-.895-2-2-2h-4c-1.105 0-2 .895-2 2v16"
+    />
+  </svg>
+)
+
+export default RewardsSvg
diff --git a/webapp/src/components/Icons/index.js b/webapp/src/components/Icons/index.js
@@ -5,6 +5,7 @@ import BPJsonSvg from './BPJson'
 import EndpointSvg from './Endpoint'
 import MissingBlocksSvg from './MissingBlocks'
 import TopologySvg from './Topology'
+import RewardsSvg from './Rewards'
 
 export {
   BlockDistributionSvg,
@@ -13,5 +14,6 @@ export {
   BPJsonSvg,
   EndpointSvg,
   MissingBlocksSvg,
-  TopologySvg
+  TopologySvg,
+  RewardsSvg
 }
diff --git a/webapp/src/components/InformationCard/index.js b/webapp/src/components/InformationCard/index.js
@@ -90,11 +90,11 @@ const InformationCard = ({ producer, rank, onNodeClick, type }) => {
               classes={classes}
               missedBlocks={producer.missed_blocks || []}
               votes={formatWithThousandSeparator(
-                producer.total_votes_eos || 0,
+                producer.total_votes_eos || '0',
                 2
               )}
               rewards={formatWithThousandSeparator(
-                producer.total_rewards || 0,
+                producer.total_rewards || '0',
                 2
               )}
             />

diff --git a/webapp/src/components/TransactionsHistory.js b/webapp/src/components/TransactionsHistory.js
@@ -1,42 +1,111 @@
 /* eslint camelcase: 0 */
-import React, { memo } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import Card from '@material-ui/core/Card'
 import Grid from '@material-ui/core/Grid'
 import CardContent from '@material-ui/core/CardContent'
 import Typography from '@material-ui/core/Typography'
 import LinearProgress from '@material-ui/core/LinearProgress'
+import LaunchIcon from '@material-ui/icons/Launch'
 import { useSubscription } from '@apollo/react-hooks'
 
 import { BLOCK_TRANSACTIONS_HISTORY } from '../gql'
 import { formatWithThousandSeparator, getBlockNumUrl } from '../utils'
+import { generalConfig } from '../config'
 
-const BodyGraphValue = ({ loading, value }) => {
+const BodyGraphValue = ({ loading, value, classes, href }) => {
   if (loading) return <LinearProgress />
 
-  if (typeof value !== 'number') {
-    return <>{value}</>
-  }
-
   return (
     <Typography component="p" variant="h6">
       {value}
+      {href && (
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          <LaunchIcon className={classes.svgLink} color="primary" />
+        </a>
+      )}
     </Typography>
   )
 }
 
 BodyGraphValue.propTypes = {
   loading: PropTypes.bool,
-  value: PropTypes.any
+  value: PropTypes.any,
+  classes: PropTypes.object,
+  href: PropTypes.string
 }
 
 BodyGraphValue.defaultProps = {
   value: 0,
-  loading: false
+  loading: false,
+  classes: {}
 }
 
 const TransactionsHistory = ({ t, classes }) => {
   const { data, loading } = useSubscription(BLOCK_TRANSACTIONS_HISTORY)
+  const [allTimeHigh, setallTimeHigh] = useState({})
+
+  useEffect(() => {
+    if (data?.stats?.[0]?.tps_all_time_high?.blocks?.length) {
+      const result = data.stats[0].tps_all_time_high.blocks.reduce(
+        (prev, current) => {
+          return {
+            tps: {
+              value:
+                prev.value > current.transactions_count
+                  ? prev.value
+                  : current.transactions_count,
+              link: getBlockNumUrl(
+                prev.value > current.transactions_count
+                  ? prev.link
+                  : current.block_num
+              )
+            },
+            cpu: {
+              value: formatWithThousandSeparator(
+                prev.value > current.cpu_usage_percent
+                  ? prev.value
+                  : current.cpu_usage_percent * 100,
+                1
+              ),
+              link: getBlockNumUrl(
+                prev.value > current.cpu_usage_percent
+                  ? prev.link
+                  : current.block_num
+              )
+            }
+          }
+        },
+        {
+          tps: {
+            value: 0,
+            link: ''
+          },
+          cpu: {
+            value: 0,
+            link: ''
+          }
+        }
+      )
+
+      setallTimeHigh(result)
+    }
+  }, [data])
+
+  if (!generalConfig.historyEnabled)
+    return (
+      <Grid item xs={12} sm={4} lg={3}>
+        <Card>
+          <CardContent className={classes.cards}>
+            <Typography>{`${t('uniqueLocations')}`}</Typography>
+            <BodyGraphValue
+              value={data?.stats?.[0]?.unique_locations?.count || 0}
+              loading={loading}
+            />
+          </CardContent>
+        </Card>
+      </Grid>
+    )
 
   return (
     <>
@@ -45,12 +114,10 @@ const TransactionsHistory = ({ t, classes }) => {
           <CardContent className={classes.cards}>
             <Typography>{t('tpsAllTimeHigh')}</Typography>
             <BodyGraphValue
-              value={
-                <Typography component="p" variant="h6">
-                  {data?.stats?.[0]?.tps_all_time_high?.transactions_count || 0}
-                </Typography>
-              }
+              value={allTimeHigh?.tps?.value}
               loading={loading}
+              classes={classes}
+              href={allTimeHigh?.tps?.link}
             />
           </CardContent>
         </Card>
@@ -61,37 +128,9 @@ const TransactionsHistory = ({ t, classes }) => {
           <CardContent className={classes.cards}>
             <Typography>{t('networkUtilizationAllTimeHigh')}</Typography>
             <BodyGraphValue
-              value={
-                <Typography
-                  className={classes.cardLink}
-                  component="p"
-                  variant="h6"
-                >
-                  {data?.stats?.[0]?.tps_all_time_high?.blocks?.map(
-                    (block, index) => (
-                      <span key={index}>
-                        <a
-                          href={getBlockNumUrl(block.block_num)}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {block.block_num}
-                        </a>{' '}
-                        {t('cpu')}:{' '}
-                        {formatWithThousandSeparator(
-                          block.cpu_usage_percent * 100,
-                          4
-                        )}
-                        %
-                        {index <
-                        data?.stats?.[0]?.tps_all_time_high?.blocks.length - 1
-                          ? ', '
-                          : ''}
-                      </span>
-                    )
-                  )}
-                </Typography>
-              }
+              value={`${allTimeHigh?.cpu?.value}%`}
+              classes={classes}
+              href={allTimeHigh?.cpu?.link}
               loading={loading}
             />
           </CardContent>