[DDW-923] Review changes; Fix merge issues

Author: Lucas Araujo

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

@@ -105,6 +105,7 @@
       padding: 0 20px;
       position: sticky;
       top: 0;
+      transition: box-shadow 0.1s ease-in-out;
       z-index: $sticky-header-z-index;
 
       &.stickyHeader {
@@ -148,7 +149,7 @@
       }
     }
 
-    tr:not(:last-child) {
+    .tr:not(:last-child) {
       border-bottom: 1px solid var(--theme-staking-table-border-color);
     }
 

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

@@ -12,13 +12,13 @@ import styles from './StakePoolsTable.scss';
 import StakePool from '../../../domains/StakePool';
 import LoadingSpinner from '../../widgets/LoadingSpinner';
 import BorderedBox from '../../widgets/BorderedBox';
-import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell';
 import {
   useSortedStakePoolList,
   useCreateColumns,
   StakePoolsOrder,
   StakePoolSortableProps,
 } from './hooks';
+import { StakePoolsTableHeader } from './StakePoolsTableHeader';
 
 export const defaultTableOrdering: Record<
   StakePoolSortableProps,
@@ -191,34 +191,14 @@ function StakePoolsTableComponent({
                 {sortedStakePoolList.length > 0 && (
                   <BorderedBox>
                     <div {...getTableProps()} className={styles.table}>
-                      <div
-                        className={styles.thead}
-                        onMouseEnter={onTableHeaderMouseEnter}
-                        onMouseLeave={onTableHeaderMouseLeave}
-                      >
-                        {headerGroups.map((headerGroup) => (
-                          /* eslint-disable-next-line react/jsx-key */
-                          <div
-                            {...headerGroup.getHeaderGroupProps()}
-                            className={styles.tr}
-                          >
-                            {headerGroup.headers.map((column) => (
-                              <StakePoolsTableHeaderCell
-                                {...column.getHeaderProps({
-                                  style: { width: undefined },
-                                })}
-                                stakePoolsSortBy={stakePoolsSortBy}
-                                stakePoolsOrder={stakePoolsOrder}
-                                onHandleSort={handleSort}
-                                name={column.id}
-                                key={column.id}
-                              >
-                                {column.render('Header')}
-                              </StakePoolsTableHeaderCell>
-                            ))}
-                          </div>
-                        ))}
-                      </div>
+                      <StakePoolsTableHeader
+                        stakePoolsSortBy={stakePoolsSortBy}
+                        stakePoolsOrder={stakePoolsOrder}
+                        headerGroups={headerGroups}
+                        onHandleSort={handleSort}
+                        onTableHeaderMouseEnter={onTableHeaderMouseEnter}
+                        onTableHeaderMouseLeave={onTableHeaderMouseLeave}
+                      />
 
                       <AutoSizer disableHeight>
                         {({ width }) => (

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import classNames from 'classnames';
+import { HeaderGroup } from 'react-table';
+import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell';
+import StakePool from '../../../domains/StakePool';
+import {
+  useInViewPort,
+  StakePoolsOrder,
+  StakePoolSortableProps,
+} from './hooks';
+import styles from './StakePoolsTable.scss';
+
+type Props = {
+  headerGroups: HeaderGroup<StakePool>[];
+  stakePoolsOrder: StakePoolsOrder;
+  stakePoolsSortBy: StakePoolSortableProps;
+  onHandleSort: (name: string) => void;
+  onTableHeaderMouseEnter: () => void;
+  onTableHeaderMouseLeave: () => void;
+};
+
+export const Component = ({
+  stakePoolsSortBy,
+  stakePoolsOrder,
+  headerGroups,
+  onHandleSort,
+  onTableHeaderMouseEnter,
+  onTableHeaderMouseLeave,
+}: Props) => {
+  const { setTargetRef, isInViewport } = useInViewPort();
+
+  return (
+    <>
+      <div ref={setTargetRef} />
+      <div
+        className={classNames(
+          styles.thead,
+          !isInViewport && styles.stickyHeader
+        )}
+        onMouseEnter={onTableHeaderMouseEnter}
+        onMouseLeave={onTableHeaderMouseLeave}
+      >
+        {headerGroups.map((headerGroup) => (
+          /* eslint-disable-next-line react/jsx-key */
+          <div {...headerGroup.getHeaderGroupProps()} className={styles.tr}>
+            {headerGroup.headers.map((column) => (
+              <StakePoolsTableHeaderCell
+                {...column.getHeaderProps({
+                  style: { width: undefined },
+                })}
+                stakePoolsSortBy={stakePoolsSortBy}
+                stakePoolsOrder={stakePoolsOrder}
+                onHandleSort={onHandleSort}
+                name={column.id}
+                key={column.id}
+              >
+                {column.render('Header')}
+              </StakePoolsTableHeaderCell>
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export const StakePoolsTableHeader = observer(Component);

source/renderer/app/components/staking/stake-pools/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useCreateColumns } from './useCreateColumns';
+export { useInViewPort } from './useInViewPort';
 export {
   useSortedStakePoolList,
   StakePoolsOrder,