Add explore apps statistics component - Closes #4358

.eslintrc

@@ -47,6 +47,7 @@
           ["@update", "./src/modules/update"],
           ["@wallet", "./src/modules/wallet/"],
           ["@account", "./src/modules/account/"],
+          ["@blockchainApplication", "./src/modules/blockchainApplication/"],
           ["@legacy", "./src/modules/legacy/"],
           ["@message", "./src/modules/message/"],
           ["@auth", "./src/modules/auth/"],

jsconfig.json

@@ -9,6 +9,7 @@
       "@fixtures/*": ["./tests/fixtures"],
       "@theme/*": ["./src/theme/*"],
       "@account/*": ["./src/modules/account/*"],
+      "@blockchainApplication/*": ["./src/modules/blockchainApplication/*"],
       "@block/*": ["./src/modules/block/*"],
       "@bookmark/*": ["./src/modules/bookmark/*"],
       "@search/*": ["./src/modules/search/*"],

setup/config/webpack.config.js

@@ -12,6 +12,7 @@ const config = {
       '@tests': resolve('./tests'),
       '@theme': resolve('./src/theme'),
       '@account': resolve('./src/modules/account'),
+      '@blockchainApplication': resolve('./src/modules/blockchainApplication'),
       '@block': resolve('./src/modules/block'),
       '@bookmark': resolve('./src/modules/bookmark'),
       '@search': resolve('./src/modules/search'),
@@ -25,7 +26,6 @@ const config = {
       '@settings': resolve('./packages/settings'),
       '@token': resolve('./src/modules/token'),
       '@transaction': resolve('./src/modules/transaction'),
-      '@blockchainApplication': resolve('./src/modules/blockchainApplication'),
       '@update': resolve('./src/modules/update'),
       '@views': resolve('./packages/views'),
       '@packages': resolve('./packages'),

src/locales/en/common.json

@@ -16,6 +16,7 @@
   "Account username": "Account username",
   "Account was removed": "Account was removed",
   "Accounts": "Accounts",
+  "Active": "Active",
   "Active delegates": "Active delegates",
   "Active delegates are select to generate blocks every round.": "Active delegates are select to generate blocks every round.",
   "Add": "Add",
@@ -42,6 +43,7 @@
   "Amount": "Amount",
   "Amount can't be negative.": "Amount can't be negative.",
   "Amount can't be zero.": "Amount can't be zero.",
+  "Amount of LSK tokens staked by validators and nominators for DPoS governance": "Amount of LSK tokens staked by validators and nominators for DPoS governance",
   "Amount of transaction": "Amount of transaction",
   "Amount per transaction (LSK)": "Amount per transaction (LSK)",
   "Amount range": "Amount range",
@@ -389,6 +391,7 @@
   "Register delegate": "Register delegate",
   "Register multisignature account": "Register multisignature account",
   "Register multisignature group": "Register multisignature group",
+  "Registered": "Registered",
   "Registered delegates": "Registered delegates",
   "Registrant": "Registrant",
   "Reject": "Reject",
@@ -472,14 +475,17 @@
   "Slot status": "Slot status",
   "Something went wrong. Please try again": "Something went wrong. Please try again",
   "Sorry, we couldn’t find the page you were looking for. We suggest that you return to the main dashboard.": "Sorry, we couldn’t find the page you were looking for. We suggest that you return to the main dashboard.",
+  "Staked": "Staked",
   "Standby delegates": "Standby delegates",
   "Standby delegates can be chosen at random for one of two slots per round for generating a block.": "Standby delegates can be chosen at random for one of two slots per round for generating a block.",
+  "Statistics": "Statistics",
   "Status": "Status",
   "Stay Informed": "Stay Informed",
   "Store this document in a safe place.": "Store this document in a safe place.",
   "Submitting the transaction": "Submitting the transaction",
   "Supply": "Supply",
   "Switch account": "Switch account",
+  "Terminated": "Terminated",
   "Terms of Use": "Terms of Use",
   "Testnet": "Testnet",
   "The aggregated LSK volume transferred over the selected time period.": "The aggregated LSK volume transferred over the selected time period.",
@@ -530,6 +536,8 @@
   "To recover, you can try to reload the page, by clicking the button below. If the problem persists, report the error via email.": "To recover, you can try to reload the page, by clicking the button below. If the problem persists, report the error via email.",
   "To verify the integrity of a signed message use the \"Verify message\" tool in the sidebar.": "To verify the integrity of a signed message use the \"Verify message\" tool in the sidebar.",
   "Toggle Full Screen": "Toggle Full Screen",
+  "Total LSK tokens in circulation": "Total LSK tokens in circulation",
+  "Total Supply": "Total Supply",
   "Total burnt": "Total burnt",
   "Total fee": "Total fee",
   "Total forged": "Total forged",

src/modules/blockchainApplication/explore/api/index.js

@@ -0,0 +1,27 @@
+/* istanbul ignore file */
+import http from 'src/utils/api/http';
+import { HTTP_PREFIX } from 'src/const/httpCodes';
+
+const httpPaths = {
+  blockchainAppsStatistics: `${HTTP_PREFIX}/blockchain/apps/statistics`,
+};
+
+/**
+ * Retrieves sidechains statistics information
+ *
+ * @param {Object} data
+ * @param {Object} data.network The network config from the Redux store
+ *
+ * @returns {Promise}
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const getStatistics = ({
+  network,
+  params = {},
+  baseUrl,
+}) => http({
+  path: httpPaths.blockchainAppsStatistics,
+  network,
+  params,
+  baseUrl,
+});

src/modules/blockchainApplication/explore/api/index.test.js

@@ -0,0 +1,35 @@
+import { getState } from '@fixtures/transactions';
+import http from 'src/utils/api/http';
+import { getStatistics } from '.';
+
+jest.mock('src/utils/api/http', () =>
+  jest.fn().mockImplementation(() => Promise.resolve({
+    data: {
+      registered: 2503,
+      active: 2328,
+      terminated: 35,
+      totalSupplyLSK: '5000000',
+      stakedLSK: '3000000',
+      inflationRate: '4.50',
+    },
+  })));
+
+const baseUrl = 'http://custom-base-url.com/';
+const { network } = getState();
+
+describe('get blockchain application statistics', () => {
+  it('Should call http with given params', () => {
+    getStatistics({
+      network,
+      baseUrl,
+      params: { },
+    });
+
+    expect(http).toHaveBeenCalledWith({
+      path: '/api/v2/blockchain/apps/statistics',
+      params: { },
+      network,
+      baseUrl,
+    });
+  });
+});

src/modules/blockchainApplication/explore/components/BlockchainApplicationStatistics/blockchainApplicationStatistics.css

@@ -0,0 +1,47 @@
+@import '../../../../../../setup/react/app/mixins.css';
+
+.container {
+  max-width: 350px;
+
+  & > header {
+    padding-bottom: 22px;
+  }
+
+  & > div {
+    margin-bottom: 16px;
+  }
+}
+
+.chartBox {
+  padding: 16px 0px !important;
+}
+
+.statsBox {
+  flex-direction: row !important;
+  justify-content: space-between !important;
+
+  & > div {
+    &:first-child {
+      flex-basis: 70%;
+    }
+
+    &:last-child {
+      flex-basis: 30%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.statsInfoTitle {
+  @mixin contentLarge;
+
+  color: var(--color-blue-gray);
+}
+
+.statsInfo {
+  @mixin headingNormalIntermediate;
+
+  color: var(--color-maastricht-blue);
+  margin: 8px 0 0;
+}

src/modules/blockchainApplication/explore/components/BlockchainApplicationStatistics/blockchainApplicationStatistics.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import BlockchainApplicationStatistics from './index';
+
+describe('BlockchainApplicationStatistics', () => {
+  const props = {
+    statistics: {
+      data: {
+        registered: 101,
+        active: 53,
+        terminated: 9,
+        totalSupplyLSK: '5000000',
+        stakedLSK: '3000000',
+      },
+    },
+  };
+
+  it('should properly', () => {
+    const wrapper = mount(<BlockchainApplicationStatistics {...props} />);
+
+    expect(wrapper.find('.statsInfoTitle').at(0)).toHaveText('Total Supply');
+    expect(wrapper.find('.statsInfoTitle').at(1)).toHaveText('Staked');
+    expect(wrapper.find('TokenAmount').at(0)).toHaveText('5,000,000');
+    expect(wrapper.find('TokenAmount').at(1)).toHaveText('3,000,000');
+  });
+});

src/modules/blockchainApplication/explore/components/BlockchainApplicationStatistics/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { toRawLsk } from '@token/fungible/utils/lsk';
+import Box from 'src/theme/box';
+import BoxHeader from 'src/theme/box/header';
+import BoxContent from 'src/theme/box/content';
+import { DoughnutChart } from 'src/modules/common/components/charts';
+import TokenAmount from '@token/fungible/components/tokenAmount';
+import Tooltip from 'src/theme/Tooltip';
+import Icon from 'src/theme/Icon';
+import { useTheme } from 'src/theme/Theme';
+import { getColorPalette } from 'src/modules/common/components/charts/chartOptions';
+import prepareChartDataAndOptions from '../../utils/prepareChartDataAndOptions';
+import styles from './blockchainApplicationStatistics.css';
+
+const BlockchainApplicationStatistics = ({ statistics }) => {
+  const { t } = useTranslation();
+  const colorPalette = getColorPalette(useTheme());
+  const {
+    doughnutChartData, doughnutChartOptions,
+  } = prepareChartDataAndOptions(statistics.data, colorPalette, t);
+  const cardsMap = [
+    {
+      title: t('Total Supply'), description: t('Total LSK tokens in circulation'), amount: toRawLsk(statistics.data.totalSupplyLSK), icon: 'totalSupplyToken',
+    },
+    {
+      title: t('Staked'), description: t('Amount of LSK tokens staked by validators and nominators for DPoS governance'), amount: toRawLsk(statistics.data.stakedLSK), icon: 'stackedToken',
+    },
+  ];
+
+  return (
+    <Box className={styles.container}>
+      <BoxHeader>
+        <h1>{t('Statistics')}</h1>
+      </BoxHeader>
+      <BoxContent className={styles.chartBox}>
+        <DoughnutChart
+          data={doughnutChartData}
+          options={doughnutChartOptions}
+        />
+      </BoxContent>
+      {cardsMap.map(({
+        title, description, amount, icon,
+      }) => (
+        <BoxContent
+          key={`app-stats-card-${icon}`}
+          className={styles.statsBox}
+        >
+          <div>
+            <div>
+              <span className={styles.statsInfoTitle}>{title}</span>
+              <Tooltip size="m" position="bottom">
+                <p>{description}</p>
+              </Tooltip>
+            </div>
+            <p className={styles.statsInfo}>
+              <TokenAmount val={amount} />
+            </p>
+          </div>
+          <div>
+            <Icon name={icon} />
+          </div>
+        </BoxContent>
+      ))}
+    </Box>
+  );
+};
+
+export default BlockchainApplicationStatistics;

src/modules/blockchainApplication/explore/utils/prepareChartDataAndOptions.js

@@ -0,0 +1,39 @@
+const prepareChartDataAndOptions = (statistics, colorPalette, t) => {
+  const doughnutChartData = {
+    labels: [
+      t('Registered'),
+      t('Active'),
+      t('Terminated'),
+    ],
+    datasets: [
+      {
+        backgroundColor: [colorPalette[1], colorPalette[0], colorPalette[2]],
+        data: [statistics.registered, statistics.active, statistics.terminated],
+      },
+    ],
+  };
+
+  const doughnutChartOptions = {
+    cutoutPercentage: 70,
+    legend: {
+      display: true,
+      position: 'left',
+      align: 'start',
+      labels: {
+        padding: 20,
+      },
+    },
+    layout: {
+      padding: {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+      },
+    },
+  };
+
+  return { doughnutChartData, doughnutChartOptions };
+};
+
+export default prepareChartDataAndOptions;

src/modules/blockchainApplication/explore/utils/prepareChartDataAndOptions.test.js

@@ -0,0 +1,47 @@
+import prepareChartDataAndOptions from './prepareChartDataAndOptions';
+
+describe('BlockchainApplication explore utils', () => {
+  it('Should return correct data when calling prepareChartDataAndOptions', () => {
+    const statistics = {
+      registered: 101,
+      active: 53,
+      terminated: 9,
+      totalSupplyLSK: '5000000',
+      stakedLSK: '3000000',
+    };
+    const colorPalette = ['green', 'blue', 'grey'];
+    const t = (l) => l;
+    const {
+      doughnutChartData, doughnutChartOptions,
+    } = prepareChartDataAndOptions(statistics, colorPalette, t);
+
+    expect(doughnutChartData).toEqual({
+      labels: ['Registered', 'Active', 'Terminated'],
+      datasets: [
+        {
+          backgroundColor: ['blue', 'green', 'grey'],
+          data: [statistics.registered, statistics.active, statistics.terminated],
+        },
+      ],
+    });
+    expect(doughnutChartOptions).toEqual({
+      cutoutPercentage: 70,
+      legend: {
+        display: true,
+        position: 'left',
+        align: 'start',
+        labels: {
+          padding: 20,
+        },
+      },
+      layout: {
+        padding: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+        },
+      },
+    });
+  });
+});

src/modules/blockchainApplication/manage/components/ManageBlockchainApplications/index.js

@@ -0,0 +1,9 @@
+/* istanbul ignore file */
+import React from 'react';
+import BlockchainApplicationStatistics from '../../../explore/components/BlockchainApplicationStatistics';
+
+const ManageBlockchainAppications = ({ apps, statistics }) => (
+  <BlockchainApplicationStatistics apps={apps} statistics={statistics} />
+);
+
+export default ManageBlockchainAppications;