chore: update validator profile for vitwit validator (#1260)

* chore: update validator profile for vitwit validator * chore: review changes
vitwit · Jun 3, 2024 · 80c5ea3 · 80c5ea3
1 parent 7aad2c7
commit 80c5ea3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 38 deletions.
diff --git a/frontend/src/app/(routes)/staking/components/StakingCard.tsx b/frontend/src/app/(routes)/staking/components/StakingCard.tsx
@@ -121,7 +121,7 @@ export const StakingCardHeader = ({
   networkLogo,
 }: StakingCardHeaderProps) => {
   const validatorProfileURL = validator
-    ? `/staking/validator/${encodeURIComponent(validator?.toLowerCase())}`
+    ? `/validator/${encodeURIComponent(validator?.toLowerCase())}`
     : '';
   return (
     <div className="flex justify-between items-center">

diff --git a/frontend/src/app/(routes)/validator/[validator]/ValidatorProfile.tsx b/frontend/src/app/(routes)/validator/[validator]/ValidatorProfile.tsx
@@ -10,17 +10,18 @@ import useGetValidatorInfo from '@/custom-hooks/useGetValidatorInfo';
 import { capitalizeFirstLetter, formatValidatorStatsValue } from '@/utils/util';
 import ValidatorLogo from '../../staking/components/ValidatorLogo';
 import { Tooltip } from '@mui/material';
-import { WITVAL } from '@/utils/constants';
+import { VITWIT_VALIDATOR_NAMES, WITVAL } from '@/utils/constants';
 
 const ValidatorProfile = ({ moniker }: { moniker: string }) => {
   const tabs = ['Profile', 'Announcements', 'Inbox', 'Notices'];
   const selectedTab = 'profile';
   useInitAllValidator();
-  const { getChainwiseValidatorInfo,
+  const {
+    getChainwiseValidatorInfo,
     getOasisValidatorInfo,
     getPolygonValidatorInfo,
-     getValidatorStats } =
-    useGetValidatorInfo();
+    getValidatorStats,
+  } = useGetValidatorInfo();
   const {
     chainWiseValidatorData,
     validatorDescription,
@@ -33,20 +34,23 @@ const ValidatorProfile = ({ moniker }: { moniker: string }) => {
     moniker: moniker,
   });
 
-  const { avgCommission,
-    activeNetworks,
-    totalNetworks } = validatorStatsResult;
+  const { avgCommission, activeNetworks, totalNetworks } = validatorStatsResult;
 
-  let { totalDelegators,
-    totalStaked, } = validatorStatsResult
+  let { totalDelegators, totalStaked } = validatorStatsResult;
 
-  const { totalStakedInUSD: totalPolygonStaked, totalDelegators: totalPolygonDelegators } = getPolygonValidatorInfo()
-  const { totalStakedInUSD: totalOasisStaked, totalDelegators: totalOasisDelegator } = getOasisValidatorInfo()
+  const {
+    totalStakedInUSD: totalPolygonStaked,
+    totalDelegators: totalPolygonDelegators,
+  } = getPolygonValidatorInfo();
+  const {
+    totalStakedInUSD: totalOasisStaked,
+    totalDelegators: totalOasisDelegator,
+  } = getOasisValidatorInfo();
 
-  totalStaked += totalPolygonStaked || 0
-  totalStaked += totalOasisStaked || 0
-  totalDelegators += totalPolygonDelegators
-  totalDelegators += totalOasisDelegator
+  totalStaked += totalPolygonStaked || 0;
+  totalStaked += totalOasisStaked || 0;
+  totalDelegators += totalPolygonDelegators;
+  totalDelegators += totalOasisDelegator;
 
   return (
     <div className="py-6 px-10 space-y-10 h-screen flex flex-col text-[#E1E1E1]">
@@ -100,7 +104,7 @@ const ValidatorProfile = ({ moniker }: { moniker: string }) => {
         </div>
         <ValidatorsTable
           data={chainWiseValidatorData}
-          isWitval={moniker.toLowerCase() === WITVAL}
+          isWitval={VITWIT_VALIDATOR_NAMES.includes(moniker.toLowerCase())}
         />
       </div>
     </div>
@@ -120,22 +124,24 @@ const ValidatorMetadataCard = ({
   website: string;
   moniker: string;
 }) => {
+  const isWitval = moniker.toLowerCase() === WITVAL;
+
   return (
     <div className="bg-[#0E0B26] p-6 space-y-6 rounded-2xl">
       <div className="flex gap-2 items-center h-8">
         <ValidatorLogo identity={identity} height={24} width={24} />
         <div className="text-[18px] leading-[21.7px]">
-          {
-            moniker.toLowerCase() === WITVAL ? 'VITWIT' : capitalizeFirstLetter(moniker)
-          }
+          {isWitval ? 'VITWIT' : capitalizeFirstLetter(moniker)}
         </div>
       </div>
       <div className="space-y-10">
         <div className="space-y-2">
           <div className="text-[#FFFFFF80] text-[14px]">Description</div>
-          <div className="text-[16px] leading-[30px]">{
-            moniker.toLowerCase() === WITVAL ?
-              'Vitwit excels in providing top-notch infrastructure services for the Cosmos blockchain ecosystem. We specialize in setting up and managing validators, relayers, and offering expert advisory services.' : description || '-'}</div>
+          <div className="text-[16px] leading-[30px]">
+            {isWitval
+              ? 'Vitwit excels in providing top-notch infrastructure services for the Cosmos blockchain ecosystem. We specialize in setting up and managing validators, relayers, and offering expert advisory services.'
+              : description || '-'}
+          </div>
         </div>
         {website ? (
           <div>

diff --git a/frontend/src/app/(routes)/validator/[validator]/page.tsx b/frontend/src/app/(routes)/validator/[validator]/page.tsx
@@ -2,14 +2,17 @@ import React from 'react';
 import ValidatorProfile from './ValidatorProfile';
 import '../validator-profile.css';
 import '../../staking/staking.css';
-import { VITWIT, WITVAL } from '@/utils/constants';
+import { VITWIT_NEW_MONIKER, VITWIT_VALIDATOR_NAMES } from '@/utils/constants';
 
 const page = ({ params }: { params: { validator: string } }) => {
   const decodedMonikerName = decodeURIComponent(params.validator);
-  const monikerName =
-    decodedMonikerName.toLowerCase() === VITWIT
-      ? WITVAL
-      : decodedMonikerName.toLocaleLowerCase();
+  // If the moniker name is vitwit or vitwit (previously witval) or witval use new moniker name
+  const isVitwitValidator = VITWIT_VALIDATOR_NAMES.includes(
+    decodedMonikerName.toLowerCase()
+  );
+  const monikerName = isVitwitValidator
+    ? decodeURIComponent(VITWIT_NEW_MONIKER)
+    : decodedMonikerName.toLocaleLowerCase();
   return <ValidatorProfile moniker={monikerName} />;
 };
 

diff --git a/frontend/src/custom-hooks/useGetValidatorInfo.ts b/frontend/src/custom-hooks/useGetValidatorInfo.ts
@@ -4,9 +4,14 @@ import { ValidatorProfileInfo } from '@/types/staking';
 import { getValidatorRank } from '@/utils/util';
 import { parseBalance } from '@/utils/denom';
 import useGetAllChainsInfo from './useGetAllChainsInfo';
-import { COIN_GECKO_IDS, OASIS_CONFIG, POLYGON_CONFIG, WITVAL } from '@/utils/constants';
+import {
+  COIN_GECKO_IDS,
+  OASIS_CONFIG,
+  POLYGON_CONFIG,
+  WITVAL,
+} from '@/utils/constants';
 
-const removedChains = ['crescent-1', 'archway-1', 'celestia']
+const removedChains = ['crescent-1', 'archway-1', 'celestia'];
 
 const useGetValidatorInfo = () => {
   const stakingData = useAppSelector(
@@ -16,10 +21,9 @@ const useGetValidatorInfo = () => {
     (state: RootState) => state.common.allNetworksInfo
   );
 
-
   const allChainIds = Object.keys(allNetworksInfo);
 
-  const chainIDs = allChainIds.filter(c => !removedChains.includes(c))
+  const chainIDs = allChainIds.filter((c) => !removedChains.includes(c));
 
   const tokensPriceInfo = useAppSelector(
     (state) => state.common.allTokensInfoState.info
@@ -43,10 +47,12 @@ const useGetValidatorInfo = () => {
       const validator = Object.values(
         stakingData?.[chainID]?.validators.active
       ).find((v) => {
-        return (
+        // For few networks supported by Vitwit Validator, Moniker name is still Witval, so considering that validator also
+        const isMatchingMoniker =
           v.description.moniker.trim().toLowerCase() ===
-          moniker.trim().toLowerCase()
-        );
+          moniker.trim().toLowerCase();
+        const isWitval = v.description.moniker.trim().toLowerCase() === WITVAL;
+        return isMatchingMoniker || isWitval;
       });
 
       if (validator) {
@@ -173,7 +179,7 @@ const useGetValidatorInfo = () => {
       }
       const delegatorsCount =
         stakingData[validator.chainID].validatorProfiles?.[
-        validator.operatorAddress
+          validator.operatorAddress
         ];
 
       totalDelegators += Number(delegatorsCount?.totalDelegators || 0);
@@ -284,8 +290,8 @@ const useGetValidatorInfo = () => {
       totalDelegators = oasisDelegations?.data?.totalSize;
       operatorAddress = OASIS_CONFIG.witval.operatorAddress;
     } else {
-      totalDelegators = 8
-      totalStakedTokens = 11641594
+      totalDelegators = 8;
+      totalStakedTokens = 11641594;
       commission = OASIS_CONFIG.witval.commission.toString();
 
       totalStakedInUSD = usdPriceInfo

diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -269,6 +269,13 @@ export const ALERT_TYPE_MAP: Record<string, string> = {
 };
 export const WITVAL = 'witval';
 export const VITWIT = 'vitwit';
+export const VITWIT_NEW_MONIKER = 'vitwit%20(previously%20witval)';
+export const VITWIT_VALIDATOR_NAMES = [
+  'vitwit',
+  'witval',
+  'validator/vitwit%20(previously%20witval)',
+  'vitwit (previously witval)',
+];
 export const POLYGON_API = 'https://staking-api.polygon.technology/api/v2';
 
 export const POLYGON_CONFIG = {