render a nice looking qr code for the payment

src/screens/WaveQrCodePaymentScreen.tsx

@@ -3,6 +3,9 @@ import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { LOG } from "@logger";
+import { Dimensions } from "react-native";
+// biome-ignore lint/style/useNamingConvention: <explanation>
+import QRCode from "react-native-qrcode-svg";
 
 const log = LOG.extend("WaveQrCodePaymentScreen");
 
@@ -10,6 +13,11 @@ const WaveQrCodePaymentScreen: MainStackScreenComponentProps<"waveQrCodePaymentS
 	route,
 	navigation,
 }) => {
+	const paymentUrl = route.params?.paymentUrl ?? "";
+	console.log("paymentUrl", paymentUrl);
+	const windowWidth = Dimensions.get("window").width;
+	// const sixtyPercentHeight = window * 0.5;
+
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea goBack={true}>
 			<Box
@@ -18,8 +26,39 @@ const WaveQrCodePaymentScreen: MainStackScreenComponentProps<"waveQrCodePaymentS
 					width: "100%",
 				}}
 				p={"m"}
+				alignItems={"center"}
 			>
-				<Text>WaveQrCodePaymentScreen</Text>
+				<Text
+					variant={"black"}
+					mb={"l"}
+					fontSize={20}
+					textAlign={"center"}
+					fontWeight={"bold"}
+				>
+					Votre QR Code
+				</Text>
+
+				<Box
+					style={{ height: windowWidth - 80, aspectRatio: 1 }}
+					backgroundColor={"primary"}
+					alignItems={"center"}
+					justifyContent={"center"}
+					borderRadius={20}
+					borderWidth={2}
+					borderColor={"secondary"}
+					shadowOffset={{ width: 0, height: 10 }}
+					shadowOpacity={0.5}
+					shadowRadius={13.16}
+					elevation={20}
+					mb={"l"}
+				>
+					<QRCode
+						value={paymentUrl}
+						size={windowWidth - 120}
+						// backgroundColor={theme.colors.secondary}
+					/>
+				</Box>
+				<Text>Veuillez scanner le QR Code pour terminer le paiement</Text>
 			</Box>
 		</BackgroundWithBeasyIconAndWhiteContentArea>
 	);