51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React, { useCallback, useMemo } from "react"
|
|
import styles from "../styles/Header.module.css"
|
|
import bgStyles from "../styles/Background.module.css"
|
|
import { usePlayer } from "../providers/PlayerProvider";
|
|
import { useAccount } from 'wagmi';
|
|
import dynamic from "next/dynamic";
|
|
import Counter, { toReadable } from "./Counter";
|
|
|
|
const Header = () => {
|
|
const { isConnected } = useAccount();
|
|
const { isRegistered, register, army } = usePlayer();
|
|
|
|
const title = useMemo(() => {
|
|
return isRegistered ? `SLAY THE MOLOCH` :
|
|
!isConnected ? "Connect your wallet traveler ☝️ and then ..." :
|
|
"Click here to start 😈"
|
|
}, [isConnected, isRegistered])
|
|
|
|
const subtitle = useMemo(() => {
|
|
if (isRegistered) {
|
|
return <Counter />
|
|
} else {
|
|
return <p className={styles.counter}>SLAY THE MOLOCH</p>
|
|
}
|
|
}, [isRegistered])
|
|
|
|
const perSecondParagraph = useMemo(() => {
|
|
const perSecond = toReadable(army?.profit_per_second ?? BigInt(0))
|
|
return (isRegistered) ?
|
|
<p className={styles.counter_per_seconds}>per second: {perSecond}</p>
|
|
: null
|
|
}, [isRegistered, army?.profit_per_second])
|
|
|
|
const onRegister = useCallback(() => {
|
|
if (isRegistered) return
|
|
register();
|
|
}, [isRegistered, register])
|
|
|
|
return <header onClick={onRegister} className={styles.header}>
|
|
<h1 className={`${styles.title} ${isConnected && !isRegistered ? bgStyles.excited : ""}`}>{title}</h1>
|
|
{subtitle}
|
|
{perSecondParagraph}
|
|
</header>
|
|
}
|
|
|
|
// export default Header
|
|
|
|
export default dynamic(() => Promise.resolve(Header), {
|
|
ssr: false,
|
|
});
|