merge

src/layouts/Page.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import { Image, View } from "react-native";
+import { Image, Pressable, Text, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { SafeAreaView } from "react-native-safe-area-context";
 import React from "reactn";
@@ -10,6 +10,11 @@ import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
 import { isWeb } from "../hooks/useLayoutType.js";
 import { gutters } from "../styles";
+import { icons } from "../assets";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { useUserData } from "../providers/UserDataProvider";
+import { push } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
 
 export default ({
   children,
@@ -40,6 +45,53 @@ export default ({
   blurIntensity = 0,
   backgroundColor = "#000",
 }) => {
+  const {
+    currentUID = null,
+    currentUserData = null,
+  } = useUserData?.() || {};
+
+  const coinBalance = React.useMemo(() => {
+    const data = currentUserData || {};
+    const candidates = [
+      data?.coins,
+      data?.coinBalance,
+      data?.coin,
+      data?.wallet?.coins,
+      data?.wallet?.coinBalance,
+    ];
+
+    for (const value of candidates) {
+      if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+      }
+      if (typeof value === "string") {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed)) {
+          return parsed;
+        }
+      }
+    }
+
+    return 0;
+  }, [currentUserData]);
+
+  const formattedCoins = React.useMemo(() => {
+    try {
+      return new Intl.NumberFormat("fr-FR", {
+        maximumFractionDigits: 0,
+      }).format(coinBalance);
+    } catch (_error) {
+      return `${coinBalance}`;
+    }
+  }, [coinBalance]);
+
+  const showCoinBadge = isWeb && !!currentUID;
+
+  const handleCoinPress = React.useCallback(() => {
+    if (!showCoinBadge) return;
+    push?.(Routes?.Payments || "Payments", { pack: "packs" });
+  }, [showCoinBadge]);
+
   const PageContainer =
     containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
 
@@ -88,6 +140,41 @@ export default ({
           }}
         />
       ) : null}
+      {showCoinBadge ? (
+        <Pressable
+          onPress={handleCoinPress}
+          accessibilityRole="button"
+          style={{
+            position: "absolute",
+            top: gutters,
+            left: gutters,
+            paddingHorizontal: 14,
+            paddingVertical: 8,
+            borderRadius: 20,
+            backgroundColor: "rgba(12, 14, 18, 0.72)",
+            borderWidth: 1,
+            borderColor: "rgba(255, 255, 255, 0.1)",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 10,
+            zIndex: 20,
+          }}
+        >
+          <Image
+            source={icons.coin}
+            style={{ width: 22, height: 22, resizeMode: "contain" }}
+          />
+          <Text
+            style={{
+              color: "#ffffff",
+              fontFamily: FONT_FAMILY.InterSemiBold,
+              fontSize: 14,
+            }}
+          >
+            {formattedCoins}
+          </Text>
+        </Pressable>
+      ) : null}
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
         style={{