[DDW-1012] Review changes

Author: renanvalentin

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

@@ -17,16 +17,19 @@ import {
 } from '../../../utils/formatters';
 import { messages } from './StakePoolsTable.messages';
 
+const ascOrder = 'asc';
+const descOrder = 'desc';
+
 export const defaultTableOrdering = {
-  ranking: 'asc',
-  ticker: 'asc',
-  saturation: 'asc',
-  cost: 'asc',
-  profitMargin: 'asc',
-  producedBlocks: 'desc',
-  nonMyopicMemberRewards: 'desc',
-  pledge: 'asc',
-  retiring: 'asc',
+  ranking: ascOrder,
+  ticker: ascOrder,
+  saturation: ascOrder,
+  cost: ascOrder,
+  profitMargin: ascOrder,
+  producedBlocks: descOrder,
+  nonMyopicMemberRewards: descOrder,
+  pledge: ascOrder,
+  retiring: ascOrder,
 };
 
 interface UseSortedStakePoolListArgs {
@@ -320,5 +323,5 @@ export const useCreateColumns = ({
         },
       },
     ],
-    []
+    [numberOfRankedStakePools]
   );

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

@@ -364,39 +364,39 @@
 
       // Rank
       &:nth-child(1) {
-        width: 7% !important;
+        width: 7%;
       }
       // Ticker
       &:nth-child(2) {
-        width: 9% !important;
+        width: 9%;
       }
       // Saturation
       &:nth-child(3) {
-        width: 11% !important;
+        width: 11%;
       }
       // Cost
       &:nth-child(4) {
-        width: 10% !important;
+        width: 10%;
       }
       // Margin
       &:nth-child(5) {
-        width: 8% !important;
+        width: 8%;
       }
       // Produced Blocks
       &:nth-child(6) {
-        width: 15% !important;
+        width: 15%;
       }
       // Potential Rewards
       &:nth-child(7) {
-        width: 16% !important;
+        width: 16%;
       }
       // Pledge
       &:nth-child(8) {
-        width: 12% !important;
+        width: 12%;
       }
       // Retiring in
       &:nth-child(9) {
-        width: 12% !important;
+        width: 12%;
       }
     }
   }

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

@@ -145,7 +145,10 @@ function StakePoolsTableComponent({
           {row.cells.map((cell) => {
             return (
               /* eslint-disable-next-line react/jsx-key */
-              <div {...cell.getCellProps()} className={styles.td}>
+              <div
+                {...cell.getCellProps({ style: { width: undefined } })}
+                className={styles.td}
+              >
                 {cell.render('Cell')}
               </div>
             );
@@ -196,7 +199,9 @@ function StakePoolsTableComponent({
                           >
                             {headerGroup.headers.map((column) => (
                               <StakePoolsTableHeader
-                                {...column.getHeaderProps()}
+                                {...column.getHeaderProps({
+                                  style: { width: undefined },
+                                })}
                                 stakePoolsSortBy={stakePoolsSortBy}
                                 stakePoolsOrder={stakePoolsOrder}
                                 onHandleSort={handleSort}
@@ -222,7 +227,7 @@ function StakePoolsTableComponent({
                               height={height || 0}
                               isScrolling={isScrolling}
                               onScroll={onChildScroll}
-                              overscanRowCount={2}
+                              overscanRowCount={10}
                               rowCount={rows.length}
                               rowHeight={36}
                               rowRenderer={RenderRow}