diff --git a/packages/app/features/home/TokenBalanceCard.tsx b/packages/app/features/home/TokenBalanceCard.tsx index a714ede7c..6c3849ff6 100644 --- a/packages/app/features/home/TokenBalanceCard.tsx +++ b/packages/app/features/home/TokenBalanceCard.tsx @@ -8,6 +8,8 @@ import { BigHeading, styled, AnimatePresence, + View, + type XStackProps, } from '@my/ui' import { EyeOff, Eye } from '@tamagui/lucide-icons' import formatAmount from 'app/utils/formatAmount' @@ -37,32 +39,48 @@ export const TokenBalanceCard = () => { const formattedBalance = formatAmount(totalBalance, 9, 0) const { isPriceHidden, toggleIsPriceHidden } = useIsPriceHidden() + const { isGameVisible, presses, increaseScore, time } = useShowHideGame() + + const onShowHidePress = () => { + toggleIsPriceHidden() + increaseScore() + } return ( - - - - {isPriceHidden ? : } - - + + + + + {isPriceHidden ? : } + + + + {isPriceHidden ? ( + + ) : ( + + )} - {isPriceHidden ? ( - - ) : ( - + {isGameVisible && ( + + + {presses} + + + )} - + {(() => { switch (true) { @@ -152,3 +170,80 @@ const useIsPriceHidden = () => { return { isPriceHidden, toggleIsPriceHidden } } + +const useShowHideGame = () => { + const countToStop = 100 + const countToVisible = 10 + + const [isGameVisible, setIsGameVisible] = useState(false) + const [presses, setPresses] = useState(0) + + const [isPaused, setIsPaused] = useState(false) + const [time, setTime] = useState(0) + + useEffect(() => { + if (presses >= countToVisible) { + setIsGameVisible(true) + } + if (presses >= countToStop) { + setIsPaused(true) + } + + let interval: NodeJS.Timeout | undefined = undefined + if (isPaused === false) { + interval = setInterval(() => { + setTime((time) => time + 10) + }, 10) + } else { + clearInterval(interval) + } + return () => { + clearInterval(interval) + } + }, [presses, isPaused]) + + const onPress = () => { + if (isPaused === false) { + setPresses(presses + 1) + } + } + + return { isGameVisible, presses, increaseScore: onPress, time } +} + +const ShowHideGameStopwatch = ({ time, ...props }: XStackProps & { time: number }) => { + return ( + + + {`0 + ${Math.floor((time / 60000) % 60)}`.slice(-2)}: + + + {`0 + ${Math.floor((time / 1000) % 60)}`.slice(-2)}. + + + {`0 + ${Math.floor((time / 10) % 100)}`.slice(-2)} + + + ) +}