feat: Nominee decentralization: How decentralized is your nomination? (…

…#2185) Co-authored-by: rafael <[email protected]> Co-authored-by: Ting A Lin <[email protected]>
polkadot-cloud · Jul 8, 2024 · 7dd170a · 7dd170a
1 parent 038219f
commit 7dd170a
Show file tree

Hide file tree

Showing 28 changed files with 714 additions and 52 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -25,7 +25,6 @@ jobs:
           target_branch: gh-deploy
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
-
   build:
     runs-on: ubuntu-latest
     needs: merge
@@ -51,7 +50,7 @@ jobs:
         with:
           name: github-pages
           path: build
-                
+
   deploy:
     runs-on: ubuntu-latest
     needs: build
@@ -63,12 +62,12 @@ jobs:
     environment:
       name: github-pages
       url: ${{steps.deployment.outputs.page_url}}
-      
+
     steps:
-    - uses: actions/download-artifact@master
-      with:
-        name: github-pages
-        path: build
-    - uses: actions/configure-pages@v5
-    - id: deployment
-      uses: actions/deploy-pages@main
+      - uses: actions/download-artifact@master
+        with:
+          name: github-pages
+          path: build
+      - uses: actions/configure-pages@v5
+      - id: deployment
+        uses: actions/deploy-pages@main
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 [![Polkadot - App](https://img.shields.io/badge/Polkadot-App-E6007A?logo=polkadot&logoColor=E6007A)](https://staking.polkadot.cloud) ![ci](https://github.com/polkadot-cloud/polkadot-staking-dashboard/actions/workflows/ci.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL3.0-blue.svg)](https://opensource.org/licenses/GPL-3.0)
 
 > #### 📢 17/06/2024: Repository Migration
+>
 > This repository was previously at `paritytech/polkadot-staking-dashboard`. As of 17/06/2024, Polkadot Staking Dashboard lives at `polkadot-cloud/polkadot-staking-dashboard`.
 
 # Polkadot Staking Dashboard

diff --git a/docs/CHANGELOG.md b/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)
 
 

diff --git a/index.html b/index.html
@@ -48,7 +48,10 @@
       property="og:description"
       content="Polkadot Staking Dashboard is the easiest way to stake DOT, check validator stats, manage your nominations and join nomination pools. Stake on Polkadot (DOT)."
     />
-    <meta property="og:image" content="https://staking.polkadot.cloud/img/og-image.png" />
+    <meta
+      property="og:image"
+      content="https://staking.polkadot.cloud/img/og-image.png"
+    />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -61,7 +64,10 @@
       property="twitter:description"
       content="Polkadot Staking Dashboard is the easiest way to stake DOT, check validator stats, manage your nominations and join nomination pools. Stake on Polkadot (DOT)."
     />
-    <meta property="twitter:image" content="https://staking.polkadot.cloud/img/og-image.png" />
+    <meta
+      property="twitter:image"
+      content="https://staking.polkadot.cloud/img/og-image.png"
+    />
     <link
       rel="manifest"
       href="/favicons/site.webmanifest"

diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
@@ -1,19 +1,19 @@
 {
-    "name": "Polkadot Staking Dashboard",
-    "short_name": "Staking",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "Polkadot Staking Dashboard",
+  "short_name": "Staking",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
 }
diff --git a/src/config/help.ts b/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: [

diff --git a/src/library/Graphs/GeoDonut.tsx b/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;
             });
           },

diff --git a/src/library/Graphs/types.ts b/src/library/Graphs/types.ts
@@ -51,4 +51,6 @@ export interface GeoDonutProps {
   series: AnyPolkawatch;
   width?: string | number;
   height?: string | number;
+  legendHeight?: number;
+  maxLabelLen?: number;
 }
diff --git a/src/library/List/index.ts b/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;

diff --git a/src/library/ListItem/Labels/RewardShare.tsx b/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>
+  );
+};
diff --git a/src/locale/cn/base.json b/src/locale/cn/base.json
@@ -2,6 +2,7 @@
   "base": {
     "active": "激活",
     "community": "社区",
+    "decentralization": "去中心化",
     "goTo": "查看",
     "help": "帮助",
     "inactive": "未激活",

diff --git a/src/locale/cn/help.json b/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": "解除您的质押"

diff --git a/src/locale/cn/pages.json b/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": "地址已复制到剪贴板",

diff --git a/src/locale/en/base.json b/src/locale/en/base.json
@@ -2,6 +2,7 @@
   "base": {
     "active": "Active",
     "community": "Community",
+    "decentralization": "Decentralization",
     "goTo": "Go To",
     "help": "Help",
     "inactive": "Inactive",