Zilliqa: Validator views (#2557)

* list of validators

* validator details page

* clean up

* review fixes

configs/envs/.env.zilliqa_prototestnet

@@ -9,14 +9,12 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
-NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS=['solidity','vyper','yul','scilla']
-
-
 # Instance ENVs
 NEXT_PUBLIC_API_BASE_PATH=/
 NEXT_PUBLIC_API_HOST=zilliqa-prototestnet.blockscout.com
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x3d1ded3a7924cd3256a4b1a447c9bfb194f54b9a8ceb441edb8bb01563b516db
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 99.97%)','linear-gradient(90deg, rgba(0, 208, 198, 1) 0.06%, rgba(43, 146, 151, 1) 50.02%, rgba(0, 0, 0, 1) 99.97%)'],'text_color':['rgba(255, 255, 255, 1)','rgba(255, 255, 255, 1)'],'button':{'_default':{'background':['rgba(38, 6, 124, 1)']},'_hover':{'background':['rgba(17, 4, 87, 1)']}}}
@@ -38,4 +36,6 @@ NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-c
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_VIEWS_ADDRESS_BECH_32_PREFIX=zil
 NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=["base16", "bech32"]
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VIEWS_CONTRACT_LANGUAGE_FILTERS=['solidity','vyper','yul','scilla']
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE=zilliqa

docs/ENVS.md

@@ -750,7 +750,7 @@ The feature enables the Validators page which provides detailed information abou
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE | `'stability' \| 'blackfort'` | Chain type | Required | - | `'stability'` | v1.25.0+ |
+| NEXT_PUBLIC_VALIDATORS_CHAIN_TYPE | `'stability' \| 'blackfort' \| 'zilliqa'` | Chain type | Required | - | `'stability'` | v1.25.0+ |
 
  
 

lib/api/resources.ts

@@ -150,6 +150,8 @@ import type {
   ValidatorsBlackfortCountersResponse,
   ValidatorsBlackfortResponse,
   ValidatorsBlackfortSorting,
+  ValidatorsZilliqaResponse,
+  ValidatorZilliqa,
 } from 'types/api/validators';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
@@ -1097,6 +1099,15 @@ export const RESOURCES = {
   validators_blackfort_counters: {
     path: '/api/v2/validators/blackfort/counters',
   },
+  validators_zilliqa: {
+    path: '/api/v2/validators/zilliqa',
+    filterFields: [],
+  },
+  validator_zilliqa: {
+    path: '/api/v2/validators/zilliqa/:bls_public_key',
+    pathParams: [ 'bls_public_key' as const ],
+    filterFields: [],
+  },
 
   // BLOBS
   blob: {
@@ -1247,7 +1258,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_reward
 'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
-'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history' |
+'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'validators_zilliqa' | 'noves_address_history' |
 'token_transfers_all' | 'scroll_l2_txn_batches' | 'scroll_l2_txn_batch_txs' | 'scroll_l2_txn_batch_blocks' |
 'scroll_l2_deposits' | 'scroll_l2_withdrawals' | 'advanced_filter' | 'pools';
 
@@ -1375,6 +1386,8 @@ Q extends 'validators_stability' ? ValidatorsStabilityResponse :
 Q extends 'validators_stability_counters' ? ValidatorsStabilityCountersResponse :
 Q extends 'validators_blackfort' ? ValidatorsBlackfortResponse :
 Q extends 'validators_blackfort_counters' ? ValidatorsBlackfortCountersResponse :
+Q extends 'validators_zilliqa' ? ValidatorsZilliqaResponse :
+Q extends 'validator_zilliqa' ? ValidatorZilliqa :
 Q extends 'shibarium_withdrawals' ? ShibariumWithdrawalsResponse :
 Q extends 'shibarium_deposits' ? ShibariumDepositsResponse :
 Q extends 'shibarium_withdrawals_count' ? number :

lib/hooks/useNavItems.tsx

@@ -68,7 +68,7 @@ export default function useNavItems(): ReturnType {
       text: 'Top validators',
       nextRoute: { pathname: '/validators' as const },
       icon: 'validator',
-      isActive: pathname === '/validators',
+      isActive: pathname === '/validators' || pathname === '/validators/[id]',
     } : null;
     const rollupDeposits = {
       text: `Deposits (L1${ rightLineArrow }L2)`,

lib/metadata/getPageOgType.ts

@@ -51,6 +51,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/name-domains': 'Root page',
   '/name-domains/[name]': 'Regular page',
   '/validators': 'Root page',
+  '/validators/[id]': 'Regular page',
   '/gas-tracker': 'Root page',
   '/mud-worlds': 'Root page',
   '/token-transfers': 'Root page',

lib/metadata/templates/description.ts

@@ -54,6 +54,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains': DEFAULT_TEMPLATE,
   '/name-domains/[name]': DEFAULT_TEMPLATE,
   '/validators': DEFAULT_TEMPLATE,
+  '/validators/[id]': DEFAULT_TEMPLATE,
   '/gas-tracker': 'Explore real-time %network_title% gas fees with Blockscout\'s advanced gas fee tracker. Get accurate %network_gwei% estimates and track transaction costs live.',
   '/mud-worlds': DEFAULT_TEMPLATE,
   '/token-transfers': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -51,6 +51,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains': '%network_name% name domains - %network_name% explorer',
   '/name-domains/[name]': '%network_name% %name% domain details',
   '/validators': '%network_name% validators list',
+  '/validators/[id]': '%network_name% validator %id% details',
   '/gas-tracker': 'Track %network_name% gas fees in %network_gwei%',
   '/mud-worlds': '%network_name% MUD worlds list',
   '/token-transfers': '%network_name% token transfers',

lib/mixpanel/getPageType.ts

@@ -49,6 +49,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/name-domains': 'Domains search and resolve',
   '/name-domains/[name]': 'Domain details',
   '/validators': 'Validators list',
+  '/validators/[id]': 'Validator details',
   '/gas-tracker': 'Gas tracker',
   '/mud-worlds': 'MUD worlds',
   '/token-transfers': 'Token transfers',

mocks/validators/zilliqa.ts

@@ -0,0 +1,60 @@
+import type { ValidatorZilliqa, ValidatorsZilliqaItem, ValidatorsZilliqaResponse } from 'types/api/validators';
+
+export const validator1: ValidatorsZilliqaItem = {
+  index: 420,
+  bls_public_key: '0x95125dca41be848801f9bd75254f1faf1ae3194b1da53e9a5684ed7f67b729542482bc521924603b9703c33bf831a100',
+  balance: '1000000000000000000',
+};
+
+export const validatorsResponse: ValidatorsZilliqaResponse = {
+  items: [ validator1 ],
+  next_page_params: null,
+};
+
+export const validatorDetails: ValidatorZilliqa = {
+  added_at_block_number: 7527600,
+  balance: '20000000000000000000000000',
+  bls_public_key: '0x95125dca41be848801f9bd75254f1faf1ae3194b1da53e9a5684ed7f67b729542482bc521924603b9703c33bf831a100',
+  control_address: {
+    ens_domain_name: null,
+    hash: '0xB4492C468Fe97CB73Ea70a9A712cdd5B5aB621c3',
+    implementations: [],
+    is_contract: false,
+    is_verified: null,
+    metadata: null,
+    name: null,
+    private_tags: [],
+    proxy_type: null,
+    public_tags: [],
+    watchlist_names: [],
+  },
+  index: 1,
+  peer_id: '0x002408011220a8ce8c9a146f3dc411cd72ba845b76722824c55824ac74b3362f070a332d85f2',
+  reward_address: {
+    ens_domain_name: null,
+    hash: '0x0000000000000000000000000000000000000000',
+    implementations: [],
+    is_contract: false,
+    is_verified: null,
+    metadata: null,
+    name: null,
+    private_tags: [],
+    proxy_type: null,
+    public_tags: [],
+    watchlist_names: [],
+  },
+  signing_address: {
+    ens_domain_name: null,
+    hash: '0x0000000000000000000000000000000000000026',
+    implementations: [],
+    is_contract: false,
+    is_verified: null,
+    metadata: null,
+    name: null,
+    private_tags: [],
+    proxy_type: null,
+    public_tags: [],
+    watchlist_names: [],
+  },
+  stake_updated_at_block_number: 7527642,
+};

nextjs/getServerSideProps.ts

@@ -244,6 +244,17 @@ export const validators: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
+export const validatorDetails: GetServerSideProps<Props> = async(context) => {
+  const feature = config.features.validators;
+  if (!feature.isEnabled || feature.chainType !== 'zilliqa') {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
 export const gasTracker: GetServerSideProps<Props> = async(context) => {
   if (!config.features.gasTracker.isEnabled) {
     return {

nextjs/nextjs-routes.d.ts

@@ -67,6 +67,7 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">
     | DynamicRoute<"/txs/kettle/[hash]", { "hash": string }>
+    | DynamicRoute<"/validators/[id]", { "id": string }>
     | StaticRoute<"/validators">
     | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">

pages/validators/[id].tsx

@@ -0,0 +1,30 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import type { Props } from 'nextjs/getServerSideProps';
+import PageNextJs from 'nextjs/PageNextJs';
+
+import config from 'configs/app';
+
+const validatorsFeature = config.features.validators;
+
+const ValidatorDetails = dynamic(() => {
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'zilliqa') {
+    return import('ui/pages/ValidatorZilliqa');
+  }
+
+  throw new Error('Validators feature is not enabled.');
+}, { ssr: false });
+
+const Page: NextPage<Props> = (props) => {
+  return (
+    <PageNextJs pathname="/validators/[id]" query={ props.query }>
+      <ValidatorDetails/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { validatorDetails as getServerSideProps } from 'nextjs/getServerSideProps';

pages/validators.tsx → pages/validators/index.tsx

@@ -17,6 +17,10 @@ const Validators = dynamic(() => {
     return import('ui/pages/ValidatorsBlackfort');
   }
 
+  if (validatorsFeature.isEnabled && validatorsFeature.chainType === 'zilliqa') {
+    return import('ui/pages/ValidatorsZilliqa');
+  }
+
   throw new Error('Validators feature is not enabled.');
 }, { ssr: false });
 

stubs/validators.ts

@@ -3,6 +3,8 @@ import type {
   ValidatorsStabilityCountersResponse,
   ValidatorBlackfort,
   ValidatorsBlackfortCountersResponse,
+  ValidatorsZilliqaItem,
+  ValidatorZilliqa,
 } from 'types/api/validators';
 
 import { ADDRESS_PARAMS } from './addressParams';
@@ -32,3 +34,21 @@ export const VALIDATORS_BLACKFORT_COUNTERS: ValidatorsBlackfortCountersResponse
   new_validators_counter_24h: '11',
   validators_counter: '140',
 };
+
+export const VALIDATORS_ZILLIQA_ITEM: ValidatorsZilliqaItem = {
+  index: 420,
+  bls_public_key: '0x95125dca41be848801f9bd75254f1faf1ae3194b1da53e9a5684ed7f67b729542482bc521924603b9703c33bf831a100',
+  balance: '1000000000000000000',
+};
+
+export const VALIDATOR_ZILLIQA: ValidatorZilliqa = {
+  index: 420,
+  bls_public_key: '0x95125dca41be848801f9bd75254f1faf1ae3194b1da53e9a5684ed7f67b729542482bc521924603b9703c33bf831a100',
+  balance: '1000000000000000000',
+  added_at_block_number: 1234567890,
+  control_address: ADDRESS_PARAMS,
+  peer_id: '1234567890',
+  reward_address: ADDRESS_PARAMS,
+  signing_address: ADDRESS_PARAMS,
+  stake_updated_at_block_number: 1234567890,
+};

types/api/validators.ts

@@ -1,5 +1,7 @@
 import type { AddressParam } from './addressParams';
 
+// Stability
+
 export interface ValidatorStability {
   address: AddressParam;
   blocks_validated_count: number;
@@ -37,6 +39,8 @@ export type ValidatorsStabilitySortingField = ValidatorsStabilitySorting['sort']
 
 export type ValidatorsStabilitySortingValue = `${ ValidatorsStabilitySortingField }-${ ValidatorsStabilitySorting['order'] }`;
 
+// Blackfort
+
 export interface ValidatorBlackfort {
   address: AddressParam;
   name: string;
@@ -65,3 +69,27 @@ export interface ValidatorsBlackfortSorting {
 export type ValidatorsBlackfortSortingField = ValidatorsBlackfortSorting['sort'];
 
 export type ValidatorsBlackfortSortingValue = `${ ValidatorsBlackfortSortingField }-${ ValidatorsBlackfortSorting['order'] }`;
+
+// Zilliqa
+export interface ValidatorsZilliqaItem {
+  index: number;
+  bls_public_key: string;
+  balance: string;
+}
+
+export interface ValidatorsZilliqaResponse {
+  items: Array<ValidatorsZilliqaItem>;
+  next_page_params: null;
+}
+
+export interface ValidatorZilliqa {
+  added_at_block_number: number;
+  balance: string;
+  bls_public_key: string;
+  control_address: AddressParam;
+  index: number;
+  peer_id: string;
+  reward_address: AddressParam;
+  signing_address: AddressParam;
+  stake_updated_at_block_number: number;
+}

types/client/validators.ts

@@ -3,6 +3,7 @@ import type { ArrayElement } from 'types/utils';
 export const VALIDATORS_CHAIN_TYPE = [
   'stability',
   'blackfort',
+  'zilliqa',
 ] as const;
 
 export type ValidatorsChainType = ArrayElement<typeof VALIDATORS_CHAIN_TYPE>;