Merge branch 'develop' into chore/ddw-1069-update-readme-to-include-linking-steps

Author: przemyslaw-wlodek

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 ### Fixes
 
+- Fixed performance issue on stake pool list view ([PR 2924](https://github.com/input-output-hk/daedalus/pull/2924))
 - Fixed catalyst fund name ([PR 2946](https://github.com/input-output-hk/daedalus/pull/2946))
 - Fixed position of popup on syncing screen ([PR 2921](https://github.com/input-output-hk/daedalus/pull/2921))
 - Fixed issue with missing character when copying address from PDF ([PR 2925](https://github.com/input-output-hk/daedalus/pull/2925))

package.json

@@ -103,6 +103,7 @@
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.38",
     "@types/react-svg-inline": "^2.1.3",
+    "@types/react-table": "^7.7.9",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "asar": "2.1.0",
@@ -260,6 +261,7 @@
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-svg-inline": "2.1.1",
+    "react-table": "7.7.0",
     "react-virtualized": "9.22.3",
     "recharts": "1.8.5",
     "rimraf": "3.0.2",

source/renderer/app/components/staking/stake-pools/StakePoolsTable.messages.tsx

@@ -0,0 +1,110 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  tableHeaderRank: {
+    id: 'staking.stakePools.tableHeader.rank',
+    defaultMessage: '!!!Rank',
+    description: 'Table header "Rank" label on stake pools list view page',
+  },
+  tableHeaderRankTooltip: {
+    id: 'staking.stakePools.tooltip.rankingTooltip',
+    defaultMessage:
+      '!!!<p>A hierarchical ranking based on the potential rewards you will earn if you delegate the intended amount of stake to this pool, assuming that it reaches saturation.</p><p>*Stake pools with the potential rewards estimated at zero have the same ranking. Please set the stake slider to a higher value for more pools to get potential rewards estimated at more than zero.</p>',
+    description: '"Rank" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderTicker: {
+    id: 'staking.stakePools.tableHeader.ticker',
+    defaultMessage: '!!!Ticker',
+    description: 'Table header "Ticker" label on stake pools list view page',
+  },
+  tableHeaderSaturation: {
+    id: 'staking.stakePools.tableHeader.saturation',
+    defaultMessage: '!!!Saturation',
+    description:
+      'Table header "Saturation" label on stake pools list view page',
+  },
+  tableHeaderSaturationTooltip: {
+    id: 'staking.stakePools.tooltip.saturationTooltip',
+    defaultMessage:
+      '!!!Saturation measures the stake in the pool and indicates the point at which rewards stop increasing with increases in stake. This capping mechanism encourages decentralization by discouraging users from delegating to oversaturated stake pools.',
+    description: '"Saturation" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderPerformance: {
+    id: 'staking.stakePools.tableHeader.performance',
+    defaultMessage: '!!!Performance',
+    description:
+      'Table header "Performance" label on stake pools list view page',
+  },
+  tableHeaderUptime: {
+    id: 'staking.stakePools.tableHeader.uptime',
+    defaultMessage: '!!!Uptime (days)',
+    description: 'Table header "Uptime" label on stake pools list view page',
+  },
+  tableHeaderMargin: {
+    id: 'staking.stakePools.tableHeader.margin',
+    defaultMessage: '!!!Margin',
+    description: 'Table header "Margin" label on stake pools list view page',
+  },
+  tableHeaderMarginTooltip: {
+    id: 'staking.stakePools.tooltip.profitMarginTooltip',
+    defaultMessage:
+      "!!!The pool's profit, defined as the rewards percentage kept by the pool from the stake that was delegated to it.",
+    description: '"Pool margin" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderRoi: {
+    id: 'staking.stakePools.tableHeader.roi',
+    defaultMessage: '!!!Roi',
+    description: 'Table header "Roi" label on stake pools list view page',
+  },
+  tableHeaderCost: {
+    id: 'staking.stakePools.tableHeader.cost',
+    defaultMessage: '!!!Cost (ADA)',
+    description: 'Table header "Cost" label on stake pools list view page',
+  },
+  tableHeaderCostTooltip: {
+    id: 'staking.stakePools.tooltip.costPerEpochTooltip',
+    defaultMessage:
+      '!!!Fixed operational costs that the stake pool retains from any rewards earned during each epoch.',
+    description: '"Cost per epoch" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderProducedBlocks: {
+    id: 'staking.stakePools.tableHeader.producedBlocks',
+    defaultMessage: '!!!Produced Blocks',
+    description:
+      'Table header "Produced Blocks" label on stake pools list view page',
+  },
+  tableHeaderProducedBlocksTooltip: {
+    id: 'staking.stakePools.tooltip.producedBlocksTooltip',
+    defaultMessage:
+      '!!!The total number of blocks the stake pool has produced.',
+    description: '"Blocks" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderPotentialRewards: {
+    id: 'staking.stakePools.tableHeader.potentialRewards',
+    defaultMessage: '!!!Potential rewards',
+    description:
+      'Table header "Potential rewards" label on stake pools list view page',
+  },
+  tableHeaderPotentialRewardsTooltip: {
+    id: 'staking.stakePools.tooltip.potentialRewardsTooltip',
+    defaultMessage:
+      "!!!An estimation of the potential rewards you will earn per epoch if you delegate the intended amount of stake. The system looks at the pool's parameters and historical performance data to calculate potential rewards, assuming that the pool reaches optimal saturation.",
+    description: '"Rewards" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderPledge: {
+    id: 'staking.stakePools.tableHeader.pledge',
+    defaultMessage: '!!!Pledge (ADA)',
+    description: 'Table header "Pledge" label on stake pools list view page',
+  },
+  tableHeaderPledgeTooltip: {
+    id: 'staking.stakePools.tooltip.pledgeTooltip',
+    defaultMessage:
+      '!!!The amount of stake that a pool operator contributes to a pool. Pools with higher pledge amounts earn more rewards for themselves and their delegators. Pools that do not honor their pledge earn zero rewards and accrue low ranking.',
+    description: '"Pledge" tooltip for the Stake Pools Table.',
+  },
+  tableHeaderRetiring: {
+    id: 'staking.stakePools.tableHeader.retiring',
+    defaultMessage: '!!!Retiring in',
+    description: 'Table header "Retiring" label on stake pools list view page',
+  },
+});

source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss

@@ -92,12 +92,12 @@
     }
   }
 
-  table {
+  .table {
     border-style: hidden;
     user-select: text;
     width: 100%;
 
-    thead {
+    .thead {
       background: var(--theme-bordered-box-background-color);
       border-radius: 4px 4px 0 0;
       box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
@@ -108,7 +108,7 @@
       top: 0;
       z-index: $sticky-header-z-index;
 
-      tr {
+      .tr {
         border: 0;
         display: flex;
         justify-content: space-between;
@@ -131,8 +131,8 @@
       }
     }
 
-    tbody {
-      tr {
+    .tbody {
+      .tr {
         display: flex;
         justify-content: space-between;
         width: 100%;
@@ -145,11 +145,11 @@
       }
     }
 
-    tr {
+    .tr {
       border-bottom: 1px solid var(--theme-staking-table-border-color);
     }
 
-    th {
+    .th {
       color: var(--theme-staking-font-color-regular);
       cursor: pointer;
       font-family: var(--font-semibold);
@@ -207,7 +207,7 @@
       }
     }
 
-    td {
+    .td {
       color: var(--theme-staking-font-color-regular);
       font-family: var(--font-regular);
       font-size: 12px;
@@ -266,6 +266,7 @@
         display: flex;
         flex-direction: row;
         height: 100%;
+        justify-content: center;
       }
 
       %saturationContainer {
@@ -346,8 +347,8 @@
       }
     }
 
-    th,
-    td {
+    .th,
+    .td {
       &:nth-child(1),
       &:nth-child(3),
       &:nth-child(4),