feat: Balance component with authentication module relying on user…

src/components/Balance.tsx

+import { asp as g } from "@asp/asp";
+import Entypo from "@expo/vector-icons/Entypo";
+import { ImageBackground } from "expo-image";
+import * as LocalAuthentication from "expo-local-authentication";
+import { type FC, useState } from "react";
+import type { ViewProps } from "react-native";
+import { Text, TouchableOpacity } from "react-native";
+
+type BalanceProps = Omit<ViewProps, "children"> & { amount: number };
+
+export const Balance: FC<BalanceProps> = ({ style, amount = 0, ...rest }) => {
+	const [showBalance, setShowBalance] = useState(false);
+
+	const handleLocalAuthentication = async () => {
+		console.log("handleLocalAuthentication :: start");
+		if (showBalance) {
+			return setShowBalance(false);
+		}
+		const result = await LocalAuthentication.authenticateAsync();
+		if (result.success) {
+			setShowBalance(true);
+		}
+		console.log("handleLocalAuthentication :: end", result);
+	};
+
+	return (
+		<ImageBackground
+			style={[
+				g.p_md,
+				g.align_center,
+				g.justify_center,
+				g.rounded_md,
+				g.overflow_hidden,
+				{ height: 130, width: 300 },
+				style,
+			]}
+			source={require("@assets/balance_container.png")}
+			cachePolicy={"memory-disk"}
+			{...rest}
+		>
+			{showBalance ? (
+				<TouchableOpacity onPress={() => setShowBalance(false)}>
+					<Text style={[g.font_bold, g.text_2xl]}>{amount}</Text>
+				</TouchableOpacity>
+			) : (
+				<Entypo
+					name="eye-with-line"
+					size={24}
+					color="black"
+					onPress={handleLocalAuthentication}
+				/>
+			)}
+		</ImageBackground>
+	);
+};