diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
index 1d72fea856e..b4c0b9ffbbe 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -43,6 +43,7 @@ import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
 import { MobilePageHeader, Page } from '../../Page';
+import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { MobileBackButton } from '../MobileBackButton';
 import { AddTransactionButton } from '../transactions/AddTransactionButton';
 import { TransactionListWithBalances } from '../transactions/TransactionListWithBalances';
@@ -247,9 +248,9 @@ function TransactionListWithPreviews({
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const onRefresh = useCallback(() => {
+  const onRefresh = useCallback(async () => {
     if (accountId) {
-      dispatch(syncAndDownload(accountId));
+      await dispatch(syncAndDownload(accountId));
     }
   }, [accountId, dispatch]);
 
@@ -314,16 +315,20 @@ function TransactionListWithPreviews({
   );
 
   const transactionsToDisplay = !isSearching
-    ? previewTransactions.concat(transactions)
-    : transactions;
+    ? [...previewTransactions, ...transactions]
+    : [...transactions];
 
   return (
     <TransactionListWithBalances
       isLoading={isLoading}
       transactions={transactionsToDisplay}
-      balance={balanceQueries.balance}
-      balanceCleared={balanceQueries.cleared}
-      balanceUncleared={balanceQueries.uncleared}
+      balance={balanceQueries.balance.name as SheetFields<SheetNames>}
+      balanceCleared={
+        (balanceQueries.cleared?.name as SheetFields<SheetNames>) ?? undefined
+      }
+      balanceUncleared={
+        (balanceQueries.uncleared?.name as SheetFields<SheetNames>) ?? undefined
+      }
       onLoadMore={loadMoreTransactions}
       searchPlaceholder={`Search ${accountName}`}
       onSearch={onSearch}
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
similarity index 64%
rename from packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx
rename to packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
index f884f927ac1..5fa41e90a36 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 
 import { t } from 'i18next';
 
+import { type TransactionEntity } from 'loot-core/types/models';
+
 import { SelectedProvider, useSelected } from '../../../hooks/useSelected';
 import { SvgSearchAlternate } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
@@ -9,13 +11,20 @@ import { InputWithContent } from '../../common/InputWithContent';
 import { Label } from '../../common/Label';
 import { View } from '../../common/View';
 import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
+import { type SheetFields, type SheetNames } from '../../spreadsheet/index';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';
 import { PullToRefresh } from '../PullToRefresh';
 
 import { TransactionList } from './TransactionList';
 
-function TransactionSearchInput({ placeholder, onSearch }) {
-  const [text, setText] = useState('');
+function TransactionSearchInput({
+  placeholder,
+  onSearch,
+}: {
+  placeholder: string;
+  onSearch: (searchText: string) => void;
+}) {
+  const [text, setText] = useState<string>('');
 
   return (
     <View
@@ -57,6 +66,19 @@ function TransactionSearchInput({ placeholder, onSearch }) {
   );
 }
 
+type TransactionListWithBalancesProps = {
+  isLoading: boolean | undefined;
+  transactions: TransactionEntity[];
+  balance: SheetFields<SheetNames>;
+  balanceCleared: SheetFields<SheetNames> | undefined;
+  balanceUncleared: SheetFields<SheetNames> | undefined;
+  searchPlaceholder: string;
+  onSearch: (searchText: string) => void;
+  onLoadMore: (() => void) | undefined;
+  onOpenTransaction: (transaction: TransactionEntity) => void;
+  onRefresh: () => Promise<void>;
+};
+
 export function TransactionListWithBalances({
   isLoading,
   transactions,
@@ -68,51 +90,61 @@ export function TransactionListWithBalances({
   onLoadMore,
   onOpenTransaction,
   onRefresh,
-}) {
-  const selectedInst = useSelected('transactions', transactions);
+}: TransactionListWithBalancesProps) {
+  const selectedInst = useSelected('transactions', transactions, []);
 
   return (
     <SelectedProvider instance={selectedInst}>
-      <View
-        style={{
-          flexShrink: 0,
-          marginTop: 10,
-        }}
-      >
+      <>
         <View
           style={{
-            flexDirection: 'row',
-            justifyContent: 'space-evenly',
+            flexShrink: 0,
+            marginTop: 10,
           }}
         >
-          {balanceCleared && balanceUncleared ? (
-            <BalanceWithCleared
-              balance={balance}
-              balanceCleared={balanceCleared}
-              balanceUncleared={balanceUncleared}
-            />
-          ) : (
-            <Balance balance={balance} />
-          )}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-evenly',
+            }}
+          >
+            {balanceCleared && balanceUncleared ? (
+              <BalanceWithCleared
+                balance={balance}
+                balanceCleared={balanceCleared}
+                balanceUncleared={balanceUncleared}
+              />
+            ) : (
+              <Balance balance={balance} />
+            )}
+          </View>
+          <TransactionSearchInput
+            placeholder={searchPlaceholder}
+            onSearch={onSearch}
+          />
         </View>
-        <TransactionSearchInput
-          placeholder={searchPlaceholder}
-          onSearch={onSearch}
-        />
-      </View>
-      <PullToRefresh isPullable={!!onRefresh} onRefresh={onRefresh}>
-        <TransactionList
-          isLoading={isLoading}
-          transactions={transactions}
-          onLoadMore={onLoadMore}
-          onOpenTransaction={onOpenTransaction}
-        />
-      </PullToRefresh>
+        <PullToRefresh isPullable={!!onRefresh} onRefresh={onRefresh}>
+          <TransactionList
+            isLoading={isLoading}
+            transactions={transactions}
+            onLoadMore={onLoadMore}
+            onOpenTransaction={onOpenTransaction}
+          />
+        </PullToRefresh>
+      </>
     </SelectedProvider>
   );
 }
 
-function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
+function BalanceWithCleared({
+  balanceUncleared,
+  balanceCleared,
+  balance,
+}: {
+  balanceUncleared: SheetFields<SheetNames>;
+  balanceCleared: SheetFields<SheetNames>;
+  balance: SheetFields<SheetNames>;
+}) {
   const unclearedAmount = useSheetValue(balanceUncleared);
 
   return (
@@ -170,7 +202,7 @@ function BalanceWithCleared({ balanceUncleared, balanceCleared, balance }) {
   );
 }
 
-function Balance({ balance }) {
+function Balance({ balance }: { balance: SheetFields<SheetNames> }) {
   return (
     <View style={{ flexBasis: '33%' }}>
       <Label title={t('Balance')} style={{ textAlign: 'center' }} />
diff --git a/upcoming-release-notes/3876.md b/upcoming-release-notes/3876.md
new file mode 100644
index 00000000000..2f1fe597723
--- /dev/null
+++ b/upcoming-release-notes/3876.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [cindywu]
+---
+
+Convert TransactionListWithBalances.jsx to .tsx
\ No newline at end of file