feat: Nominee decentralization: How decentralized is your nomination?

docs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.5.0](https://github.com/polkadot-cloud/polkadot-staking-dashboard/compare/v1.4.4...v1.5.0) (2024-06-12)
+
+
+### Features
+
+* **refactor:** Remove pre-paged rewards code (part 1) ([#2101](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2101)) ([6fa02f9](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/6fa02f9d394930d6f339d46dfc227fc0c70795ad))
+* **refactor:** Tidy up `TxMeta` context ([#2130](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2130)) ([95468bf](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/95468bfcee68759560d5ea46b399d7c1756c3eaf))
+* **refactor:** Use `@w3ux/types` types ([#2156](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2156)) ([6db115a](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/6db115a317b1ab3a8eb67e2c0cd08302af8da512))
+
+
 ## [1.4.4](https://github.com/polkadot-cloud/polkadot-staking-dashboard/compare/v1.4.3...v1.4.4) (2024-04-23)
 
 

src/config/help.ts

@@ -114,6 +114,22 @@ export const HelpConfig: HelpItems = [
       ],
     ],
   },
+  {
+    key: 'decentralization',
+    definitions: [
+      'Decentralization Analytics Period',
+      'Geolocation of Each Nomination',
+      'Nomination Payout Distribution',
+      'Total Payouts Analysed',
+    ],
+    external: [
+      [
+        'polkawatchAnalytics',
+        'https://blog.polkawatch.app/introducing-polkawatch/',
+        'polkawatch.app',
+      ],
+    ],
+  },
   {
     key: 'validators',
     definitions: [

src/library/Graphs/GeoDonut.tsx

@@ -18,6 +18,8 @@ export const GeoDonut = ({
   series = { labels: [], data: [] },
   height = 'auto',
   width = 'auto',
+  legendHeight = 25,
+  maxLabelLen = 3,
 }: GeoDonutProps) => {
   const { mode } = useTheme();
   const { colors } = useNetwork().networkData;
@@ -41,12 +43,12 @@ export const GeoDonut = ({
     responsive: true,
     maintainAspectRatio: false,
     spacing: 0,
-    cutout: '70%',
+    cutout: '75%',
     plugins: {
       legend: {
         display: true,
         position: 'bottom' as const,
-        maxHeight: 25,
+        maxHeight: legendHeight,
         labels: {
           boxWidth: 10,
           generateLabels: (chart: AnyJson) => {
@@ -55,7 +57,10 @@ export const GeoDonut = ({
                 chart
               );
             return ls.map((l) => {
-              l.text = ellipsisFn(l.text, undefined, 'end');
+              l.text =
+                maxLabelLen && l.text.length > maxLabelLen
+                  ? ellipsisFn(l.text, maxLabelLen, 'end')
+                  : l.text;
               return l;
             });
           },

src/library/Graphs/types.ts

@@ -51,4 +51,6 @@ export interface GeoDonutProps {
   series: AnyPolkawatch;
   width?: string | number;
   height?: string | number;
+  legendHeight?: number;
+  maxLabelLen?: number;
 }

src/library/List/index.ts

@@ -24,6 +24,11 @@ export const Header = styled.div<{ $displayFor?: DisplayFor }>`
   padding: 0 0.25rem 0.75rem 0.25rem;
   flex: 1;
 
+  &.noBorder {
+    border: none;
+    padding-bottom: 0;
+  }
+
   h4 {
     color: var(--text-color-secondary);
     font-family: InterSemiBold, sans-serif;

src/library/ListItem/Labels/RewardShare.tsx

@@ -0,0 +1,27 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useTranslation } from 'react-i18next';
+import { useTooltip } from 'contexts/Tooltip';
+import { TooltipTrigger } from 'library/ListItem/Wrappers';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChartPie } from '@fortawesome/free-solid-svg-icons';
+
+export const RewardShare = ({ share }: { share: number }) => {
+  const { t } = useTranslation('pages');
+  const { setTooltipTextAndOpen } = useTooltip();
+
+  const tooltipText = t('decentralization.nominationShareInRewards');
+
+  return (
+    <div className="label">
+      <TooltipTrigger
+        className="tooltip-trigger-element"
+        data-tooltip-text={tooltipText}
+        onMouseMove={() => setTooltipTextAndOpen(tooltipText)}
+      />
+      <FontAwesomeIcon icon={faChartPie} style={{ marginRight: '0.25rem' }} />
+      {share}%{' '}
+    </div>
+  );
+};

src/locale/cn/base.json

@@ -2,6 +2,7 @@
   "base": {
     "active": "激活",
     "community": "社区",
+    "decentralization": "去中心化",
     "goTo": "查看",
     "help": "帮助",
     "inactive": "未激活",

src/locale/cn/help.json

@@ -82,6 +82,15 @@
           "用至少{EXISTENTIAL_DEPOSIT} {NETWORK_UNIT}将使其符合资格并可选择作为Controller."
         ]
       ],
+      "decentralizationAnalyticsPeriod": [
+        "去中心化分析周期",
+        [
+          "通过分析过去30天支付的奖励来计算您的提名的去中心化程度.",
+          "根据网络的不同，这将转化为若干个Era.",
+          "30天提供了足够的信息，使聚合有意义.",
+          "30天的周期也足够短，可以在几天后开始影响此分析中提名的变化."
+        ]
+      ],
       "epoch": [
         "Epoch",
         [
@@ -103,6 +112,15 @@
           "作为抵押者,您不需要在意Era点数. 一般来说,性能更好的验证人会产生更多的Era 点数，这反过来会得到更高的奖励."
         ]
       ],
+      "geolocationOfEachNomination": [
+        "每个提名的地理位置",
+        [
+          "每个被提名的验证人在特定的数据中心运行，该数据中心可以通过其IP地址进行地理定位.",
+          "表格显示了每个被提名验证人在上次分析期间被地理定位的地区、国家和网络.",
+          "如果在分析期间验证人被定位在多个位置，则会显示++符号.",
+          "显示的百分比是该验证人在分析期间向您支付的奖励比例."
+        ]
+      ],
       "idealStaked": ["最优比例", ["理想网络条件下的抵押占发行量的百分比."]],
       "inactiveNominations": [
         "非活跃提名",
@@ -182,6 +200,13 @@
           "一旦提名了选定的验证人,他们就会成为您的提名."
         ]
       ],
+      "nominationPayoutDistribution": [
+        "提名收益分布",
+        [
+          "您的提名去中心化程度.",
+          "以下图表显示了按验证人支付奖励的地区、国家和IP网络聚合的奖励分布."
+        ]
+      ],
       "nominationPools": [
         "提名池",
         [
@@ -368,6 +393,13 @@
           "抵押{NETWORK_UNIT}的前提是成为提名人或加入提名池，提名池本身就是一个提名人."
         ]
       ],
+      "totalPayoutsAnalysed": [
+        "总收益分析",
+        [
+          "过去30天内由提名的验证人支付的累计{NETWORK_UNIT}奖励.",
+          "这些收益用于计算您的提名的去中心化程度."
+        ]
+      ],
       "validator": [
         "验证人",
         [
@@ -400,6 +432,7 @@
       "connectAccounts": "如何连接您的帐户",
       "createPools": "创建提名池",
       "howToUse": "如何使用Staking Dashboard:概述",
+      "polkawatchAnalytics": "Polkawatch的去中心化分析: 介绍",
       "rebonding": "解除质押中",
       "stakeDot": "抵押您的DOT",
       "unbondingTokens": "解除您的质押"

src/locale/cn/pages.json

@@ -10,6 +10,19 @@
       "validator": "{{count}} 个验证人",
       "website": "个人网站"
     },
+    "decentralization": {
+      "analyticsNotAvailable": "无法使用该分布式分析器",
+      "analyticsNotSupported": "此网络不支持该分布式分析器",
+      "byRegionCountryNetwork": "按地区、国家和网络",
+      "decentralizationPerNomination": "每个提名的地理位置",
+      "howDecentralizedIsYourNomination": "您的提名去中心化程度如何？",
+      "maxDaysAnalyzed": "分析的最大天数",
+      "maxErasAnalyzed": "最大分析Era数",
+      "nominationShareInRewards": "奖励份额",
+      "payoutDistribution": "收益分布",
+      "polkawatchDisabled": "Polkawatch己断开",
+      "totalPayoutsAnalysed": "总收益分析"
+    },
     "nominate": {
       "activeNominations": "活跃提名人",
       "addressCopied": "地址已复制到剪贴板",

src/locale/en/base.json

@@ -2,6 +2,7 @@
   "base": {
     "active": "Active",
     "community": "Community",
+    "decentralization": "Decentralization",
     "goTo": "Go To",
     "help": "Help",
     "inactive": "Inactive",

src/locale/en/help.json

@@ -3,9 +3,7 @@
     "definitions": {
       "activeNominators": [
         "Active Nominators",
-        [
-          "Nominators who are active in the current session."
-        ]
+        ["Nominators who are active in the current session."]
       ],
       "activePools": [
         "Active Pools",
@@ -75,6 +73,15 @@
           "A validator can update their commission rates as and when they please, and such changes will have an impact on your profitability. Be sure to monitor your nominations on this dashboard to keep updated on their commission rates."
         ]
       ],
+      "decentralizationAnalyticsPeriod": [
+        "Decentralization Analytics Period",
+        [
+          "The decentralization of your nomination is calculated analysing the rewards payed out in the last 30 days.",
+          "Depending on the Network this will translate into a number of Eras.",
+          "30 days provides enough information for the aggregation to be meaningful.",
+          "30 days is also short enough for changes in nominations to start impacting this analysis after a few days."
+        ]
+      ],
       "epoch": [
         "Epoch",
         [
@@ -96,6 +103,15 @@
           "As a staker, you do not need to worry about Era Points. In general, better performing validators produce more Era Points, which in-turn lead to higher staking rewards."
         ]
       ],
+      "geolocationOfEachNomination": [
+        "Geolocation of Each Nomination",
+        [
+          "Each nominated validator runs at a given datacenter that can be geolocated by its IP address. ",
+          "The table displays the last Region, Country and Network where each nominated validator was geolocated.",
+          "When the validator has been located at more than one location during the analytic period a ++ sign will be displayed.",
+          "The percentage shown is the proportion of rewards payed out to you by this validator in the analytic period."
+        ]
+      ],
       "idealStaked": [
         "Ideal Staked",
         ["The percentage of staked total supply in ideal network conditions."]
@@ -183,6 +199,13 @@
           "Once you have nominated your selected validators, they become your nominations."
         ]
       ],
+      "nominationPayoutDistribution": [
+        "Nomination Payout Distribution",
+        [
+          "The decentralization of your nomination.",
+          "The following charts display the distribution of rewards aggregated by the Region, Country and IP Network of the validator the payed out the reward."
+        ]
+      ],
       "nominationPools": [
         "Nomination Pools",
         [
@@ -359,6 +382,13 @@
           "In order to stake {NETWORK_UNIT}, you can either become a nominator or join a pool - that act as nominators themselves."
         ]
       ],
+      "totalPayoutsAnalysed": [
+        "Total Payouts Analysed",
+        [
+          "The aggregated {NETWORK_UNIT} rewards payed out by nominated validators in the last 30 days.",
+          "These payouts were used to calculate the decentralization of your nomination."
+        ]
+      ],
       "validator": [
         "Validator",
         [
@@ -391,6 +421,7 @@
       "connectAccounts": "How to Connect Your Accounts",
       "createPools": "Creating Nomination Pools",
       "howToUse": "How to Use the Staking Dashboard: Overview",
+      "polkawatchAnalytics": "Decentralization Analytics by Polkawatch: Introduction",
       "rebonding": "Rebonding",
       "stakeDot": "Staking your DOT",
       "unbondingTokens": "Unbonding Your Tokens"

src/locale/en/pages.json

@@ -11,6 +11,19 @@
       "validator_other": "{{count}} Validators",
       "website": "Website"
     },
+    "decentralization": {
+      "analyticsNotAvailable": "Analytics Not Available",
+      "analyticsNotSupported": "Analytics Not Supported",
+      "byRegionCountryNetwork": "by Region, Country and Network",
+      "decentralizationPerNomination": "Geolocation Per Nomination",
+      "howDecentralizedIsYourNomination": "How decentralized is your Nomination?",
+      "maxDaysAnalyzed": "Max Days Analysed",
+      "maxErasAnalyzed": "Max Eras Analysed",
+      "nominationShareInRewards": "Share of rewards",
+      "payoutDistribution": "Payout Distribution",
+      "polkawatchDisabled": "Polkawatch Disabled",
+      "totalPayoutsAnalysed": "Total Payouts Analysed"
+    },
     "nominate": {
       "activeNominations": "Active Nominations",
       "addressCopied": "Address Copied to Clipboard",

src/modals/ValidatorGeo/index.tsx

@@ -130,6 +130,7 @@ export const ValidatorGeo = () => {
                 series={pwData.topCountryDistributionChart}
                 height={`${height}px`}
                 width={chartWidth}
+                maxLabelLen={10}
               />
             </GraphWrapper>
 
@@ -144,6 +145,7 @@ export const ValidatorGeo = () => {
                   series={pwData.topNetworkDistributionChart}
                   height={`${height}px`}
                   width={chartWidth}
+                  maxLabelLen={10}
                 />
               </GraphWrapper>
             </div>

src/pages/Nominate/Active/index.tsx

@@ -23,7 +23,6 @@ import { useSyncing } from 'hooks/useSyncing';
 import { useBalances } from 'contexts/Balances';
 import { ButtonHelp } from 'kits/Buttons/ButtonHelp';
 import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
-import { PageTitle } from 'kits/Structure/PageTitle';
 import { PageRow } from 'kits/Structure/PageRow';
 import { RowSection } from 'kits/Structure/RowSection';
 import { WithdrawPrompt } from 'library/WithdrawPrompt';
@@ -44,7 +43,6 @@ export const Active = () => {
 
   return (
     <>
-      <PageTitle title={t('nominate.nominate', { ns: 'pages' })} />
       <StatBoxList>
         <ActiveNominatorsStat />
         <MinimumNominatorBondStat />