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,37 +11,44 @@ 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>
-			<ScrollView
-				refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
-				contentContainerStyle={{
-					gap: 10,
-					padding: 10,
-					marginTop: 10,
-					paddingBottom: 30,
-					flexDirection: "column",
-				}}
-				showsVerticalScrollIndicator={false}
-			>
-				{data?.map((transaction) => (
-					<TransactionInformationsItem
-						key={transaction.reference}
-						paymentType={transaction.type_paiement_label}
-						reference={transaction.reference}
-						amount={transaction.montant}
-						date={transaction.date}
-						status={transaction.status}
-					/>
-				))}
-			</ScrollView>
+			<>
+				<Box px={"m"} mt={"m"}>
+					<Input label={"Reference"} />
+				</Box>
+				<ScrollView
+					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
+					contentContainerStyle={{
+						gap: 10,
+						padding: 10,
+						// marginTop: 10,
+						paddingBottom: 30,
+						flexDirection: "column",
+					}}
+					showsVerticalScrollIndicator={false}
+				>
+					{data?.map((transaction) => (
+						<TransactionInformationsItem
+							key={transaction.reference}
+							paymentType={transaction.type_paiement_label}
+							reference={transaction.reference}
+							amount={transaction.montant}
+							date={transaction.date}
+							status={transaction.status}
+						/>
+					))}
+				</ScrollView>
+			</>
 		</BackgroundWithBeasyIconAndWhiteContentArea>
 	);
 };