feat(trading): fix useBottomPlaceholder

libs/accounts/src/lib/accounts-table.tsx

@@ -116,14 +116,20 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
       return currentPinnedAssetRow;
     }, [pinnedAssetId, props.pinnedAsset, props.rowData]);
 
-    const getRowHeight = useCallback(
-      (params: RowHeightParams) =>
-        params.node.rowPinned &&
-        params.data.asset.id === pinnedAssetId &&
-        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
-          ? 32
-          : 22,
-      [pinnedAssetId]
+    const { getRowHeight } = props;
+
+    const getPinnedAssetRowHeight = useCallback(
+      (params: RowHeightParams) => {
+        if (
+          params.node.rowPinned &&
+          params.data.asset.id === pinnedAssetId &&
+          new BigNumber(params.data.total).isLessThanOrEqualTo(0)
+        ) {
+          return 32;
+        }
+        return getRowHeight ? getRowHeight(params) : undefined;
+      },
+      [pinnedAssetId, getRowHeight]
     );
 
     return (
@@ -145,7 +151,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             sortable: true,
             comparator: accountValuesComparator,
           }}
-          getRowHeight={getRowHeight}
+          getRowHeight={getPinnedAssetRowHeight}
           pinnedTopRowData={pinnedAssetRow ? [pinnedAssetRow] : undefined}
         >
           <AgGridColumn

libs/react-helpers/src/hooks/use-bottom-placeholder.tsx

@@ -23,27 +23,29 @@ export const useBottomPlaceholder = <T extends {}>({
   const onBodyScrollEnd = useCallback(() => {
     const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
     if (!placeholderRowRef.current && rowCont) {
-      const firstRow = gridRef.current?.api.getDisplayedRowAtIndex(0);
-      if (firstRow && firstRow.data) {
+      const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
+      if (lastRow && lastRow.data) {
         placeholderRowRef.current = setId
-          ? setId({ ...firstRow.data, isLastPlaceholder: true })
+          ? setId({ ...lastRow.data, isLastPlaceholder: true })
           : {
-              ...firstRow.data,
+              ...lastRow.data,
               isLastPlaceholder: true,
-              id: `${firstRow.data?.id || '-'}-1`,
+              id: `${lastRow.data?.id || '-'}-1`,
             };
-        gridRef.current?.api.applyTransaction({
+        const transaction = {
           add: [placeholderRowRef.current],
-        });
+        };
+        gridRef.current?.api.applyTransaction(transaction);
       }
     }
   }, [gridRef, setId]);
 
   const onRowsChanged = useCallback(() => {
     if (placeholderRowRef.current) {
-      gridRef.current?.api.applyTransaction({
+      const transaction = {
         remove: [placeholderRowRef.current],
-      });
+      };
+      gridRef.current?.api.applyTransaction(transaction);
       placeholderRowRef.current = undefined;
     }
     onBodyScrollEnd();