make request to get the list of transactions and render it in a scroll view

src/screens/TransactionHistoryScreen.tsx

+import { getTransactionsHistory } from "@/utils/requests/transactions";
+import TransactionInformationsItem from "@components/TransactionInformationsItem";
 import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
-import Text from "@components/bases/Text";
+import Box from "@components/bases/Box";
 import { LOG } from "@logger";
+import { useQuery } from "@tanstack/react-query";
+import { ScrollView } from "react-native";
 
 const log = LOG.extend("TransactionHistoryScreen");
 
 const TransactionHistoryScreen = () => {
+	log.verbose("TransactionHistoryScreen");
+
+	const { data, isLoading, error } = useQuery({
+		queryKey: ["transactionsHistory"],
+		queryFn: getTransactionsHistory,
+	});
+
+	console.info("Data", data);
+
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
-			<Text>Hello</Text>
+			<ScrollView
+				style={{ flex: 1, gap: 100, flexDirection: "column" }}
+				showsVerticalScrollIndicator={false}
+			>
+				{data?.map((transaction) => (
+					// <Text key={transaction.reference}>{transaction.reference}</Text>
+					<Box key={transaction.reference} mb={"s"}>
+						<TransactionInformationsItem
+							key={transaction.reference}
+							paymentType={transaction.type_paiement_label}
+							reference={transaction.reference}
+							amount={transaction.montant}
+							date={transaction.date}
+							status={transaction.status}
+						/>
+					</Box>
+				))}
+			</ScrollView>
 		</BackgroundWithBeasyIconAndWhiteContentArea>
 	);
 };