use the custom hook to retrieve and show transactions history

src/screens/TransactionHistoryScreen.tsx

-import { getTransactionsHistory } from "@/utils/requests/transactions";
+import Input from "@components/Input";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
 import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
+import Box from "@components/bases/Box";
+import useTransactionsHistory from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
-import { useQuery } from "@tanstack/react-query";
 import { RefreshControl, ScrollView } from "react-native";
 
 const log = LOG.extend("TransactionHistoryScreen");
@@ -10,21 +11,27 @@ const log = LOG.extend("TransactionHistoryScreen");
 const TransactionHistoryScreen = () => {
 	log.verbose("TransactionHistoryScreen");
 
-	const { data, isLoading, error, refetch } = useQuery({
-		queryKey: ["transactionsHistory"],
-		queryFn: getTransactionsHistory,
-	});
+	const { transactionsHistory: data, isLoading, error, refetch } = useTransactionsHistory();
+
+	// const { data, isLoading, error, refetch } = useQuery({
+	// 	queryKey: ["transactionsHistory"],
+	// 	queryFn: getTransactionsHistory,
+	// });
 
 	console.info("Data", data);
 
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
+			<>
+				<Box px={"m"} mt={"m"}>
+					<Input label={"Reference"} />
+				</Box>
 				<ScrollView
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
 					contentContainerStyle={{
 						gap: 10,
 						padding: 10,
-					marginTop: 10,
+						// marginTop: 10,
 						paddingBottom: 30,
 						flexDirection: "column",
 					}}
@@ -41,6 +48,7 @@ const TransactionHistoryScreen = () => {
 						/>
 					))}
 				</ScrollView>
+			</>
 		</BackgroundWithBeasyIconAndWhiteContentArea>
 	);
 };