feat: Easier access to validator metrics (#2450)

polkadot-cloud · Jan 19, 2025 · 12379a5 · 12379a5
1 parent cf173ee
commit 12379a5
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 37 deletions.
diff --git a/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx b/packages/app/src/library/ValidatorList/ValidatorItem/Default.tsx
@@ -1,12 +1,13 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faBars, faChartLine, faGlobe } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AnyJson } from '@w3ux/types'
 import { useMenu } from 'contexts/Menu'
 import { usePlugins } from 'contexts/Plugins'
 import { CopyAddress } from 'library/ListItem/Labels/CopyAddress'
+import { Metrics } from 'library/ListItem/Labels/Metrics'
 import { ParaValidator } from 'library/ListItem/Labels/ParaValidator'
 import { Quartile } from 'library/ListItem/Labels/Quartile'
 import { Labels, Separator, Wrapper } from 'library/ListItem/Wrappers'
@@ -36,7 +37,6 @@ export const Default = ({
   const { openMenu, open } = useMenu()
   const { pluginEnabled } = usePlugins()
   const { openModal } = useOverlay().modal
-  const { openCanvas } = useOverlay().canvas
   const { validatorIdentities, validatorSupers } = useValidators()
 
   const { address, prefs, validatorStatus, totalStake } = validator
@@ -49,21 +49,6 @@ export const Default = ({
 
   // Configure menu.
   const menuItems: AnyJson[] = []
-  menuItems.push({
-    icon: <FontAwesomeIcon icon={faChartLine} transform="shrink-3" />,
-    wrap: null,
-    title: `${t('viewMetrics')}`,
-    cb: () => {
-      openCanvas({
-        key: 'ValidatorMetrics',
-        options: {
-          validator: address,
-          identity,
-        },
-        size: 'xl',
-      })
-    },
-  })
 
   if (pluginEnabled('polkawatch')) {
     menuItems.push({
@@ -99,8 +84,15 @@ export const Default = ({
             <Labels className={displayFor}>
               <CopyAddress address={address} />
               {toggleFavorites && <FavoriteValidator address={address} />}
-
-              {/* restrict opening modal within a canvas */}
+              {displayFor === 'default' && (
+                <Metrics
+                  address={address}
+                  display={getIdentityDisplay(
+                    validatorIdentities[address],
+                    validatorSupers[address]
+                  )}
+                />
+              )}
               {displayFor === 'default' && showMenu && (
                 <div className="label">
                   <button type="button" onClick={(ev) => toggleMenu(ev)}>

diff --git a/packages/app/src/overlay/canvas/JoinPool/Header.tsx b/packages/app/src/overlay/canvas/JoinPool/Header.tsx
@@ -1,12 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import {
-  faArrowsRotate,
-  faHashtag,
-  faTimes,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowsRotate, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { Polkicon } from '@w3ux/react-polkicon'
 import { determinePoolDisplay } from 'contexts/Pools/util'
 import { useTranslation } from 'react-i18next'
@@ -91,9 +86,7 @@ export const Header = ({
             </div>
             <HeadTags>
               <h3>
-                {t('pool', { ns: 'library' })}{' '}
-                <FontAwesomeIcon icon={faHashtag} transform="shrink-2" />
-                {bondedPool.id}
+                {t('pool', { ns: 'library' })} {bondedPool.id}
                 {['Blocked', 'Destroying'].includes(bondedPool.state) && (
                   <span className={getTagClass(bondedPool.state)}>
                     {t(bondedPool.state.toLowerCase(), { ns: 'library' })}

diff --git a/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx b/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx
@@ -1,7 +1,8 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faChartPie, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useSize } from '@w3ux/hooks'
 import { Polkicon } from '@w3ux/react-polkicon'
 import BigNumber from 'bignumber.js'
@@ -11,6 +12,7 @@ import { useNetwork } from 'contexts/Network'
 import { usePlugins } from 'contexts/Plugins'
 import { useStaking } from 'contexts/Staking'
 import { useUi } from 'contexts/UI'
+import { useValidators } from 'contexts/Validators/ValidatorEntries'
 import { formatSize } from 'library/Graphs/Utils'
 import { StatusLabel } from 'library/StatusLabel'
 import { useRef } from 'react'
@@ -21,6 +23,7 @@ import {
   GraphContainer,
   GraphInner,
   Head,
+  HeadTags,
   Main,
   Stat,
   Subheading,
@@ -50,6 +53,7 @@ export const ValidatorMetrics = () => {
   const { activeEra } = useApi()
   const { openHelp } = useHelp()
   const { containerRefs } = useUi()
+  const { validators } = useValidators()
   const { pluginEnabled } = usePlugins()
 
   const validator = options!.validator
@@ -62,7 +66,6 @@ export const ValidatorMetrics = () => {
   let otherStake = new BigNumber(0)
   if (validatorInEra) {
     const { others, own } = validatorInEra
-
     others.forEach(({ value }) => {
       otherStake = otherStake.plus(value)
     })
@@ -71,6 +74,9 @@ export const ValidatorMetrics = () => {
     }
   }
 
+  const prefs = validators.find((entry) => entry.address === validator)?.prefs
+  const commission = prefs?.commission ?? 0
+
   // Ref to the graph container
   const graphInnerRef = useRef<HTMLDivElement | null>(null)
 
@@ -104,6 +110,12 @@ export const ValidatorMetrics = () => {
             <div className="title">
               <h1>{identity}</h1>
             </div>
+            <HeadTags>
+              <h3>
+                <FontAwesomeIcon icon={faChartPie} transform="shrink-1" />
+                {t('commission', { ns: 'modals' })}: {commission}%
+              </h3>
+            </HeadTags>
           </div>
         </div>
       </AccountTitle>

diff --git a/packages/locales/src/resources/cn/library.json b/packages/locales/src/resources/cn/library.json
@@ -203,7 +203,6 @@
     "validatorPerformance": "{{count}}天内验证人表现",
     "valueTooSmall": "值太小",
     "viewDecentralization": "分布式指标",
-    "viewMetrics": "验证人指标",
     "viewPoolNominations": "查看池提名",
     "waiting": "等待中",
     "walletNotFound": "未找到钱包",

diff --git a/packages/locales/src/resources/cn/modals.json b/packages/locales/src/resources/cn/modals.json
@@ -48,6 +48,7 @@
     "claimReward1": "提交后，收益将被绑定回提名池中。可以随时提取",
     "claimReward2": "提取收益将立即将其作为余额转入帐户",
     "claimsOnBehalf": "代表所有提名同一验证人的提名人申领收益。交易费通常更高,大多数提名人都依赖验证人代表他们进行收益申领",
+    "commission": "佣金",
     "commissionRate": "佣金值率",
     "compound": "复利",
     "confirmReset": "确认重设",

diff --git a/packages/locales/src/resources/en/library.json b/packages/locales/src/resources/en/library.json
@@ -206,7 +206,6 @@
     "validatorPerformance": "{{count}} Day Validator Performance",
     "valueTooSmall": "Value is too small",
     "viewDecentralization": "View Decentralization",
-    "viewMetrics": "View Metrics",
     "viewPoolNominations": "View Pool Nominations",
     "waiting": "Waiting",
     "walletNotFound": "wallet not found",

diff --git a/packages/locales/src/resources/en/modals.json b/packages/locales/src/resources/en/modals.json
@@ -51,6 +51,7 @@
     "claimReward1": "Once submitted, your rewards will be bonded back into the pool. You own these additional bonded funds and will be able to withdraw them at any time.",
     "claimReward2": "Withdrawing rewards will immediately transfer them to your account as free balance.",
     "claimsOnBehalf": "Claiming a payout claims on behalf of every nominator backing the validator for the era you are claiming for. For this reason transaction fees are usually higher, and most nominators rely on the validator to claim on their behalf.",
+    "commission": "Commission",
     "commissionRate": "Commission Rate",
     "compound": "Compound",
     "confirmReset": "Confirm Reset",

diff --git a/packages/locales/src/resources/es/help.json b/packages/locales/src/resources/es/help.json
@@ -110,7 +110,9 @@
       ],
       "idealStaked": [
         "Stake Ideal",
-        ["El porcentaje de suministro total en stake en condiciones ideales de red."]
+        [
+          "El porcentaje de suministro total en stake en condiciones ideales de red."
+        ]
       ],
       "inactiveNominations": [
         "Nominaciones Inactivas",

diff --git a/packages/locales/src/resources/es/library.json b/packages/locales/src/resources/es/library.json
@@ -206,7 +206,6 @@
     "validatorPerformance": "{{count}} Días de Rendimiento del Validador",
     "valueTooSmall": "El valor es demasiado pequeño",
     "viewDecentralization": "Ver Descentralización",
-    "viewMetrics": "Ver Métricas",
     "viewPoolNominations": "Ver Nominaciones del Pool",
     "waiting": "Esperando",
     "walletNotFound": "Cartera no encontrada",

diff --git a/packages/locales/src/resources/es/modals.json b/packages/locales/src/resources/es/modals.json
@@ -51,6 +51,7 @@
     "claimReward1": "Una vez enviado, tus recompensas serán vinculadas de nuevo al Pool. Eres propietario de estos fondos vinculados adicionales y podrás retirarlos en cualquier momento.",
     "claimReward2": "Retirar recompensas las transferirá inmediatamente a tu cuenta como saldo libre.",
     "claimsOnBehalf": "Reclamar un pago reclama en nombre de cada nominador que respalda al validador para la era que estás reclamando. Por esta razón, las tarifas de transacción suelen ser más altas, y la mayoría de los nominadores confían en que el validador reclame en su nombre.",
+    "commission": "Comisión",
     "commissionRate": "Tasa de Comisión",
     "compound": "Componer",
     "confirmReset": "Confirmar Reinicio",

diff --git a/packages/locales/src/resources/es/pages.json b/packages/locales/src/resources/es/pages.json
@@ -220,7 +220,8 @@
       "totalBonded": "Total vinculado",
       "unbond": "Desvincular",
       "unbondFunds": "Desvincular fondos",
-      "unbondYourFunds": "Ahora puedes desvincular tus fondos",      "unclaimedRewards": "Recompensas sin Reclamar",
+      "unbondYourFunds": "Ahora puedes desvincular tus fondos",
+      "unclaimedRewards": "Recompensas sin Reclamar",
       "unlocked": "Descomprometido",
       "validator_one": "{{count}} Validador",
       "validator_other": "{{count}} Validadores",

diff --git a/packages/ui-core/src/canvas/HeadTags/index.module.scss b/packages/ui-core/src/canvas/HeadTags/index.module.scss
@@ -3,13 +3,13 @@
 
 .headTags {
   display: flex;
-  margin-top: 1.1rem;
+  margin: 1.1rem 0;
   > h3 {
     color: var(--text-color-secondary);
     font-family: Inter, sans-serif;
     margin: 0;
     > svg {
-      margin: 0 0 0 0.2rem;
+      margin: 0 0.45rem 0 0.25rem;
     }
     > span {
       border: 1px solid var(--border-secondary-color);