From ffa725138bde41a41d182eb1a37f62efb5581e93 Mon Sep 17 00:00:00 2001
From: Magic Cat <pusz.monika@gmail.com>
Date: Wed, 28 Feb 2024 13:10:18 +0700
Subject: [PATCH] updated grid ref

---
 .../transactions_list/components/desktop/index.tsx | 14 +++-----------
 .../transactions_list/components/desktop/styles.ts |  3 +++
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/transactions_list/components/desktop/index.tsx b/packages/ui/src/components/transactions_list/components/desktop/index.tsx
index e3ebc58f9e..d161f1f294 100644
--- a/packages/ui/src/components/transactions_list/components/desktop/index.tsx
+++ b/packages/ui/src/components/transactions_list/components/desktop/index.tsx
@@ -13,7 +13,7 @@ import Typography from '@mui/material/Typography';
 import useAppTranslation from '@/hooks/useAppTranslation';
 import Link from 'next/link';
 import numeral from 'numeral';
-import React, { FC, MutableRefObject } from 'react';
+import React, { FC, MutableRefObject, LegacyRef } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeGrid as Grid } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -49,7 +49,7 @@ const Desktop: FC<TransactionsListState> = ({
   isItemLoaded,
   transactions,
 }) => {
-  const { gridRef, onResize, getColumnWidth, getRowHeight } = useGrid(columns);
+  const { gridRef, onResize, getColumnWidth, getRowHeight, columnRef } = useGrid(columns);
   const { classes, cx } = useStyles();
 
   const items = transactions.map((x) => ({
@@ -77,14 +77,6 @@ const Desktop: FC<TransactionsListState> = ({
     messages: numeral(x.messages.count).format('0,0'),
   }));
 
-  // Function to forward the ref
-  const forwardRef = (node: Grid<any> | null) => {
-    if (gridRef && typeof gridRef !== 'function') {
-      // Update the type assertion to ensure compatibility
-      (gridRef as MutableRefObject<Grid<any> | null>).current = node!;
-    }
-  };
-
   // Default isItemLoaded function
   const defaultIsItemLoaded = () => true;
 
@@ -105,7 +97,7 @@ const Desktop: FC<TransactionsListState> = ({
             {/* Table Header */}
             {/* ======================================= */}
             <Grid
-              ref={forwardRef}
+              ref={columnRef as LegacyRef<Grid>}
               columnCount={columns.length}
               columnWidth={(index) => getColumnWidth(width ?? 0, index)}
               height={50}
diff --git a/packages/ui/src/components/transactions_list/components/desktop/styles.ts b/packages/ui/src/components/transactions_list/components/desktop/styles.ts
index 6076b5e990..85c742b615 100644
--- a/packages/ui/src/components/transactions_list/components/desktop/styles.ts
+++ b/packages/ui/src/components/transactions_list/components/desktop/styles.ts
@@ -11,6 +11,9 @@ const useStyles = makeStyles()((theme) => ({
   body: {
     color: theme.palette.custom.fonts.fontTwo,
   },
+  noData: {
+    marginTop: '120px',
+  },
 }));
 
 export default useStyles;