ShowHideGame

packages/app/features/home/TokenBalanceCard.tsx

@@ -37,11 +37,17 @@ export const TokenBalanceCard = () => {
   const formattedBalance = formatAmount(totalBalance, 9, 0)
 
   const { isPriceHidden, toggleIsPriceHidden } = useIsPriceHidden()
+  const { isGameVisible, presses, increaseScore } = useShowHideGame()
+
+  const onShowHidePress = () => {
+    toggleIsPriceHidden()
+    increaseScore()
+  }
 
   return (
     <XStack w={'100%'} zIndex={4}>
       <YStack jc={'center'} gap={'$4'} w={'100%'}>
-        <XStack ai={'center'} gap="$2.5" width={'100%'} onPress={toggleIsPriceHidden}>
+        <XStack ai={'center'} gap="$2.5" width={'100%'} onPress={onShowHidePress}>
           <XStack ai={'center'} gap="$2.5">
             <AnimatePresence exitBeforeEnter>
               {isPriceHidden ? <HiddenSquare /> : <GreenSquare />}
@@ -62,6 +68,11 @@ export const TokenBalanceCard = () => {
           ) : (
             <Eye color={'$color11'} size={'$1'} />
           )}
+          {isGameVisible && (
+            <Paragraph fontSize={'$6'} fontWeight={'500'} zIndex={1} color={'$color10'}>
+              {presses}
+            </Paragraph>
+          )}
         </XStack>
         <XStack style={{ color: 'white' }} gap={'$2.5'} mt={'$3'}>
           {(() => {
@@ -152,3 +163,20 @@ const useIsPriceHidden = () => {
 
   return { isPriceHidden, toggleIsPriceHidden }
 }
+
+const useShowHideGame = () => {
+  const [isGameVisible, setIsGameVisible] = useState<boolean>(false)
+  const [presses, setPresses] = useState<number>(0)
+
+  useEffect(() => {
+    if (presses > 100) {
+      setIsGameVisible(true)
+    }
+  }, [presses])
+
+  const onPress = () => {
+    setPresses(presses + 1)
+  }
+
+  return { isGameVisible, presses, increaseScore: onPress }
+}