clear last tickets

src/components/MobileCoinBadge.js

@@ -0,0 +1,94 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Platform, Pressable, StyleSheet } from "react-native";
+import CreditAmount from "./CreditAmount";
+import CoinPackModal from "./modal/CoinPackModal";
+import { useUser } from "../providers/UserDataProvider";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { openCoinPackModal } from "../utils/coinPackModal";
+
+const MobileCoinBadge = ({
+  style,
+  textStyle,
+  iconSize = 20,
+  iconPosition = "left",
+}) => {
+  const { currentUID, currentUserData } = useUser() || {};
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const coinBalance = useMemo(() => {
+    const value = currentUserData?.coins;
+    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?.coins]);
+
+  const handlePress = useCallback(() => {
+    if (Platform.OS === "web") {
+      openCoinPackModal();
+      return;
+    }
+    setModalVisible(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setModalVisible(false);
+  }, []);
+
+  if (!currentUID || Platform.OS === "web") {
+    return null;
+  }
+
+  return (
+    <>
+      <Pressable
+        onPress={handlePress}
+        accessibilityRole="button"
+        style={[styles.container, style]}
+      >
+        <CreditAmount
+          value={coinBalance}
+          style={styles.content}
+          textStyle={[styles.text, textStyle]}
+          iconSize={iconSize}
+          iconPosition={iconPosition}
+        />
+      </Pressable>
+      <CoinPackModal visible={isModalVisible} onClose={handleClose} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20,
+    backgroundColor: "rgba(12, 14, 18, 0.72)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    flexShrink: 1,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  text: {
+    fontSize: 18,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+});
+
+export default MobileCoinBadge;