\n\nJoined an interesting open-source project that emulates a simple hangman game, with an added twist: the secret word must be public though it still must be kept secret.\nThe technology behind the scenes is Secret Network, a blockchain-based, open-source protocol that lets anyone perform computations on encrypted data, bringing privacy to smart contracts and public blockchains.
\n
\n\nStack: React.js, Storybook, Jest, Rust*, Secret Network* > *Did not contribute on the server-side
\n
main-page/index.js\n\nimport React, { useState, useContext, useEffect } from "react";\n\nimport Gibbet from "components/molecules/gibbet";\nimport WordReveal from "components/molecules/word-reveal";\nimport Keyboard from "components/organisms/keyboard";\nimport Navbar from "components/organisms/navbar";\nimport Footer from "components/organisms/footer";\nimport Loading from "components/atoms/loading";\nimport GameEnd from "components/molecules/game-end";\nimport { WalletContext } from "context/wallet";\nimport useSmartContract from "hooks/smart-contract";\n\nimport styles from "./styles.module.scss";\n\nconst MainPage = () => {\n const { client } = useContext(WalletContext);\n\n const [\n contractAddress,\n mistakes,\n wordLength,\n wordReveal,\n gameResult,\n isLoading,\n queryStatus,\n guessLetter,\n restart,\n ] = useSmartContract(client);\n\n const [usedLetters, setUsedLetters] = useState([]);\n const [isWaitingForWord, setIsWaitingForWord] = useState(false);\n\n useEffect(() => {\n const updateGameStatus = async () => {\n if (contractAddress) {\n setTimeout(async () => {\n await queryStatus();\n }, 5000);\n }\n };\n updateGameStatus();\n }, [contractAddress]);\n\n useEffect(() => {\n if (!client) {\n return;\n }\n !wordLength && setIsWaitingForWord(true);\n wordLength && setIsWaitingForWord(false);\n }, [client, wordLength]);\n\n const handleGuess = async (letter) => {\n try {\n await guessLetter(letter);\n setUsedLetters([...usedLetters, letter]);\n } catch (error) {\n console.log(error);\n }\n };\n\n const handleRestart = async () => {\n try {\n setUsedLetters([]);\n await restart();\n } catch (error) {\n console.log(error);\n }\n };\n\n const loading = isLoading || isWaitingForWord;\n\n return (\n <div className={styles.container}>\n {loading && <Loading />}\n {gameResult && <GameEnd result={gameResult} restart={handleRestart} />}\n <Navbar />\n <div className={styles.mainSection}>\n <div className={styles.upper}>\n <div className={styles.gibbet}>\n <Gibbet mistakes={mistakes} />\n </div>\n <div className={styles.wordReveal}>\n <WordReveal letters={wordReveal} />\n </div>\n </div>\n <div className={styles.lower}>\n <Keyboard usedLetters={usedLetters} onClick={handleGuess} />\n </div>\n </div>\n <Footer />\n </div>\n );\n};\n\nexport default MainPage;