Create details dialog for application exploring - Closes #4356, #4357

.eslintrc

@@ -43,6 +43,7 @@
           ["@settings", "./packages/settings/"],
           ["@token", "./src/modules/token/"],
           ["@transaction", "./src/modules/transaction"],
+          ["@blockchainApplication", "./src/modules/blockchainApplication"],
           ["@update", "./src/modules/update"],
           ["@wallet", "./src/modules/wallet/"],
           ["@account", "./src/modules/account/"],

setup/config/webpack.config.js

@@ -25,6 +25,7 @@ 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'),

setup/jest.config.js

@@ -29,6 +29,7 @@ module.exports = {
     '^@fixtures(.*)$': resolve(__dirname, '../tests/fixtures/$1'),
     '^@theme(.*)$': resolve(__dirname, '../src/theme/$1'),
     '^@account(.*)$': resolve(__dirname, '../src/modules/account/$1'),
+    '^@blockchainApplication(.*)$': resolve(__dirname, '../src/modules/blockchainApplication/$1'),
     '^@block(.*)$': resolve(__dirname, '../src/modules/block/$1'),
     '^@bookmark(.*)$': resolve(__dirname, '../src/modules/bookmark/$1'),
     '^@search(.*)$': resolve(__dirname, '../src/modules/search/$1'),

src/locales/en/common.json

@@ -82,6 +82,7 @@
   "Caution! This delegate was punished on {{punishmentStartDate}}. There is approximately {{daysLeft}} days remaining before the punishment ends.": "Caution! This delegate was punished on {{punishmentStartDate}}. There is approximately {{daysLeft}} days remaining before the punishment ends.",
   "Caution! You are about to send the majority of your balance": "Caution! You are about to send the majority of your balance",
   "Caution! You are about to vote for the punished delegate, this will result in your LSK tokens being locked for a period of {{daysLeft}} days.": "Caution! You are about to vote for the punished delegate, this will result in your LSK tokens being locked for a period of {{daysLeft}} days.",
+  "Chain ID": "Chain ID",
   "Changed votes": "Changed votes",
   "Check for Updates...": "Check for Updates...",
   "Choose account": "Choose account",
@@ -145,6 +146,7 @@
   "Delegates overview": "Delegates overview",
   "Depending on the number of votes locked to your account (delegate weight), your account can become eligible to forge new blocks on the Lisk blockchain. With every new round (103 blocks), the top 101 active delegates and 2 randomly selected standby delegates each become eligible to forge a new block. For each block forged and accepted by the Lisk network, a delegate receives a new block reward and the transaction fees collected from each sender. The minimum required delegate weight to become eligible is 1000 LSK.": "Depending on the number of votes locked to your account (delegate weight), your account can become eligible to forge new blocks on the Lisk blockchain. With every new round (103 blocks), the top 101 active delegates and 2 randomly selected standby delegates each become eligible to forge a new block. For each block forged and accepted by the Lisk network, a delegate receives a new block reward and the transaction fees collected from each sender. The minimum required delegate weight to become eligible is 1000 LSK.",
   "Deposit at least {{amount}} LSK to your new account": "Deposit at least {{amount}} LSK to your new account",
+  "Deposited:": "Deposited:",
   "Details": "Details",
   "Disable dark mode": "Disable dark mode",
   "Disable discreet mode": "Disable discreet mode",
@@ -246,6 +248,8 @@
   "Label": "Label",
   "Label is too long, Max. 20 characters": "Label is too long, Max. 20 characters",
   "Label is too long.": "Label is too long.",
+  "Last Certificate Height": "Last Certificate Height",
+  "Last Update": "Last Update",
   "Last block forged": "Last block forged",
   "Last forged block": "Last forged block",
   "Last {{num}} blocks": "Last {{num}} blocks",
@@ -479,6 +483,7 @@
   "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.",
+  "The chain ID uniquely identifies a chain in the Lisk ecosystem": "The chain ID uniquely identifies a chain in the Lisk ecosystem",
   "The delegate has at least 1,000 LSK delegate weight, but is not among the\n      top 101 by delegate weight.": "The delegate has at least 1,000 LSK delegate weight, but is not among the\n      top 101 by delegate weight.",
   "The delegate is permanently banned from generating blocks due to repeated protocol violations or missing too many blocks.": "The delegate is permanently banned from generating blocks due to repeated protocol violations or missing too many blocks.",
   "The delegate is temporarily punished and their delegate weight is set to 0 due to a misbehavior.": "The delegate is temporarily punished and their delegate weight is set to 0 due to a misbehavior.",

src/modules/blockchainApplication/api/index.js

@@ -0,0 +1,28 @@
+import http from 'src/utils/api/http';
+import { HTTP_PREFIX } from 'src/const/httpCodes';
+
+const httpPaths = {
+  application: `${HTTP_PREFIX}/blockchain/apps`,
+};
+
+/**
+ * Retrieves the details of a single blockchain application
+ *
+ * @param {Object} data
+ * @param {String} data.params
+ * @param {String} data.params.chainId - Id of the chain
+ * @param {String?} data.baseUrl - Lisk Service API url to override the
+ * existing ServiceUrl on the network param.
+ * @param {Object} data.network - Network setting from Redux store
+ * @returns {Promise} Blockchain application details API call
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export const getApplication = ({
+  params, network, baseUrl,
+}) => http({
+  path: httpPaths.application,
+  params,
+  network,
+  baseUrl,
+});

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

@@ -0,0 +1,27 @@
+import { getState } from '@fixtures/transactions';
+import http from 'src/utils/api/http';
+import { getApplication } from '.';
+
+jest.mock('src/utils/api/http', () =>
+  jest.fn().mockImplementation(() => Promise.resolve({ data: [{ type: 0 }] })));
+
+const baseUrl = 'http://custom-base-url.com/';
+const sampleId = 'sample_id';
+const { network } = getState();
+
+describe('get blockchain application detail', () => {
+  it('Should call http with given params', () => {
+    getApplication({
+      network,
+      baseUrl,
+      params: { chainId: sampleId },
+    });
+
+    expect(http).toHaveBeenCalledWith({
+      path: '/api/v2/blockchain/apps',
+      params: { chainId: sampleId },
+      network,
+      baseUrl,
+    });
+  });
+});

src/modules/blockchainApplication/explore/components/BlockchainApplicationDetails/BlockchainApplicationDetails.css

@@ -0,0 +1,168 @@
+@import '../../../../../../setup/react/app/mixins.css';
+
+.dialogWrapper {
+  border: none;
+
+  & > span {
+    color: white !important;
+  }
+}
+
+.wrapper {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 757px;
+  min-width: 450px;
+  border-radius: 16px;
+  overflow: hidden;
+  background-color: var(--color-white);
+
+  & > div:first-child {
+    width: 100%;
+    height: 130px;
+    background: linear-gradient(268.31deg, #0c152e 0%, #254898 100%);
+  }
+}
+
+.avatarContainer {
+  width: 100%;
+  height: 51px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  & > img:first-child {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: -39px;
+    width: 77px;
+    height: 77px;
+    background-color: white;
+    border-radius: 40px;
+  }
+
+  & > img:nth-child(2) {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.detailsWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 51px;
+}
+
+.chainNameWrapper {
+  & > span {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--color-maastricht-blue);
+  }
+
+  & > span ~ button {
+    padding: 0px 0px !important;
+    min-width: fit-content;
+    margin-left: 16px;
+  }
+
+  & img {
+    width: 17px;
+  }
+}
+
+.addressRow {
+  & span {
+    font-size: 14px;
+  }
+}
+
+.appLink {
+  margin-top: 14px;
+  display: flex;
+  font-size: 14px;
+  font-weight: 400;
+
+  & > img {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+}
+
+.balanceRow {
+  display: flex;
+  align-items: center;
+  margin-top: 22px;
+  column-gap: 8px;
+
+  & > span:first-child {
+    font-size: 14px;
+    color: var(--color-blue-gray);
+  }
+
+  & > span:nth-child(2) {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--color-link-active);
+  }
+}
+
+.footerDetailsRow {
+  width: 100%;
+  padding: 32px;
+  box-sizing: border-box;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: flex-start;
+
+  & .headerText {
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--color-blue-gray);
+  }
+
+  & .detailContentText {
+    font-size: 15px;
+  }
+
+  & .statusChip {
+    font-size: 14px !important;
+    padding: 10px 16px;
+    border-radius: 40px;
+  }
+
+  & .active {
+    background-color: #00d5631a;
+    color: var(--color-jade-green);
+  }
+
+  & .registered {
+    background-color: #4070f41a;
+    color: var(--color-ultramarine-blue);
+  }
+
+  & .terminated {
+    background-color: var(--color-maastricht-blue);
+    color: var(--color-ghost-white);
+  }
+}
+
+.detail {
+  width: 20%;
+}
+
+.detail:first-of-type {
+  width: 35%;
+}
+
+.detail:last-of-type {
+  width: 25%;
+}