Staging merge to master

packages/nextjs/components/dicedemo/Congrats.tsx

@@ -7,12 +7,16 @@ const Congrats = ({
   isHacked,
   isWinner,
   game,
+  isSweeping,
+  sweepMessage,
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   isHacked: boolean;
   isWinner: boolean;
   game: Game;
+  isSweeping: boolean;
+  sweepMessage: string;
 }) => {
   const closePopup = () => {
     setIsOpen(false);
@@ -21,26 +25,34 @@ const Congrats = ({
   // const { isSweeping } = useSweepWallet({ game: game, token: token });
 
   return (
-    <div className=" overflow-hidden w-fit text-xs bg-base-200 h-full">
+    <div className=" overflow-hidden w-fit text-lg bg-base-200 h-full">
       {isOpen && (
-        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-20 md:text-sm text-[0.7rem]">
-          <div className="modal-box flex flex-col items-center">
+        <div className="fixed inset-0 flex items-center justify-center bg-opacity-50 z-20">
+          <div className="modal-box md:h-[30%] flex flex-col items-center py-4 pt-6">
             <label onClick={closePopup} className="btn btn-sm btn-circle absolute right-2 top-2">
               ✕
             </label>
 
             {isWinner && (
-              <div>Congrats, you found the hidden characters and have successfully swept the private Key</div>
+              <p className="text-center">
+                Congrats, you found the hidden characters and have successfully swept the private Key
+              </p>
             )}
             {!isWinner && isHacked && !game.winner && (
-              <div>Hidden characters found, Trying to sweep private key ...</div>
+              <p className="text-center">
+                Hidden characters found, {isSweeping ? "Trying to sweep private key ..." : sweepMessage}
+              </p>
             )}
             {!isWinner && isHacked && game.winner != undefined && (
-              <div>Hidden characters found but you were beaten to sweeping the private key by another wallet</div>
+              <p className="text-center">
+                Hidden characters found but you were beaten to sweeping the private key by another wallet
+              </p>
             )}
             {!isWinner && !isHacked && <div>Sorry fren, you lost</div>}
 
-            <div className="mt-5">The hidden characters are {Object.values(game.hiddenChars).join(", ")}</div>
+            <p className="text-center mt-5 text-2xl">
+              The hidden characters are {Object.values(game.hiddenChars).join(", ")}
+            </p>
           </div>
         </div>
       )}

packages/nextjs/components/dicedemo/HostAnnouncement.tsx

@@ -0,0 +1,39 @@
+import { Dispatch, SetStateAction } from "react";
+import { Address } from "../scaffold-eth";
+import { Game } from "~~/types/game/game";
+
+const HostAnnouncement = ({
+  isOpen,
+  setIsOpen,
+
+  game,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  game: Game;
+}) => {
+  const closePopup = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div className=" overflow-hidden w-fit text-xl bg-base-200 h-full">
+      {isOpen && (
+        <div className="fixed inset-0 flex items-center justify-center bg-opacity-50 z-20">
+          <div className="modal-box md:h-[30%] flex flex-col items-center">
+            <label onClick={closePopup} className="btn btn-sm btn-circle absolute right-2 top-2">
+              ✕
+            </label>
+            <p className="text-center">The Winner is</p>
+            <Address address={game.winner as string} format="long" />
+            <p className="mt-5 text-2xl text-center">
+              The hidden characters are {Object.values(game.hiddenChars).join(", ")}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HostAnnouncement;

packages/nextjs/hooks/useSweepWallet.tsx

@@ -24,6 +24,7 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
   const configuredNetwork = getTargetNetwork();
   const apiKey = getApiKey();
   const [isSweeping, setIsSweeping] = useState(false);
+  const [sweepMessage, setSweepMessage] = useState("");
 
   const provider = new ethers.providers.AlchemyProvider(configuredNetwork.network, apiKey);
 
@@ -32,9 +33,10 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
     const wallet = new ethers.Wallet(privateKey, provider);
     const balance = await wallet.getBalance();
     if (balance.eq(0)) {
-      const message = "Wallet balance is 0";
+      const message = "Wallet has no balance";
       console.log(message);
       setIsSweeping(false);
+      setSweepMessage(message);
       notification.info(message);
       return;
     }
@@ -54,6 +56,7 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
       const message = "Balance is not enough to cover gas fees.";
       console.log(message);
       setIsSweeping(false);
+      setSweepMessage(message);
       notification.info(message);
       return;
     }
@@ -99,7 +102,7 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
     console.log("Transaction sent:", txReceipt);
   };
 
-  return { sweepWallet, isSweeping };
+  return { sweepWallet, isSweeping, sweepMessage };
 };
 
 export default useSweepWallet;

packages/nextjs/pages/game/[id].tsx

@@ -7,6 +7,7 @@ import CopyToClipboard from "react-copy-to-clipboard";
 import { useAccount, useBalance } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import Congrats from "~~/components/dicedemo/Congrats";
+import HostAnnouncement from "~~/components/dicedemo/HostAnnouncement";
 import RestartWithNewPk from "~~/components/dicedemo/RestartWithNewPk";
 import { Address } from "~~/components/scaffold-eth";
 import { Price } from "~~/components/scaffold-eth/Price";
@@ -31,7 +32,8 @@ function GamePage() {
   const [spinning, setSpinning] = useState(false);
   const [game, setGame] = useState<Game>();
   const [token, setToken] = useState("");
-  const [isOpen, setIsOpen] = useState(true);
+  const [congratsOpen, setCongratsOpen] = useState(true);
+  const [hostAnnOpen, setHostAnnOpen] = useState(true);
   const [restartOpen, setRestartOpen] = useState(false);
   const [inviteCopied, setInviteCopied] = useState(false);
   const [inviteUrl, setInviteUrl] = useState("");
@@ -42,7 +44,7 @@ function GamePage() {
   const [isHacked, setIsHacked] = useState(false);
 
   const prize = useBalance({ address: game?.adminAddress });
-  const { sweepWallet } = useSweepWallet({ game, token });
+  const { sweepWallet, isSweeping, sweepMessage } = useSweepWallet({ game, token });
 
   const calculateLength = () => {
     const maxLength = 150;
@@ -53,8 +55,6 @@ function GamePage() {
 
   const length = calculateLength();
 
-  console.log(length);
-
   const generateRandomHex = () => {
     const hexDigits = "0123456789ABCDEF";
     const randomIndex = Math.floor(Math.random() * hexDigits.length);
@@ -147,7 +147,7 @@ function GamePage() {
       setBruteRolling(false);
       setIsRolling(false);
       setSpinning(false);
-      setIsOpen(true);
+      setCongratsOpen(true);
       setIsHacked(true);
       sweepWallet(game?.privateKey as string);
     }
@@ -191,7 +191,7 @@ function GamePage() {
     const autoRoll = () => {
       if (autoRolling && game?.mode === "auto") {
         rollTheDice();
-        timeout = setTimeout(autoRoll, 5000);
+        timeout = setTimeout(autoRoll, game.diceCount * 800 + 1500);
       }
     };
     if (game?.winner) {
@@ -228,6 +228,10 @@ function GamePage() {
       setIsRolling(false);
       setSpinning(false);
     }
+    if (game?.winner) {
+      setIsRolling(false);
+      setHostAnnOpen(true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [game]);
 
@@ -395,9 +399,11 @@ function GamePage() {
                 {screenwidth <= 768 && isAdmin && (
                   <div>
                     <div className="font-bold py-2 border-y flex items-center px-4 justify-center my-2 ">
-                      <h1 className=" tracking-wide">HIDDEN CHARACTERS</h1>
+                      <h1 className=" tracking-wide">PRIVATE KEY</h1>
                     </div>
-                    <p className=" whitespace-normal break-words px-2"> {Object.values(game?.hiddenPrivateKey)}</p>
+                    <p className=" whitespace-normal break-words px-2 blur transition duration-500 ease-in-out hover:blur-none cursor-pointer">
+                      {Object.values(game?.hiddenPrivateKey)}
+                    </p>
                   </div>
                 )}
               </div>
@@ -422,7 +428,7 @@ function GamePage() {
                 {isAdmin && (
                   <div>
                     <div className="font-bold py-2 border-b flex items-center px-4  ">
-                      <h1 className=" tracking-wide md:text-xl text-lg md:text-left text-center ">Private Key</h1>
+                      <h1 className=" tracking-wide md:text-xl text-lg md:text-left text-center ">PRIVATE KEY</h1>
                     </div>
                     <p className="whitespace-normal break-words px-2 blur transition duration-500 ease-in-out hover:blur-none text-lg cursor-pointer">
                       {Object.values(game?.hiddenPrivateKey)}
@@ -519,15 +525,22 @@ function GamePage() {
               </div>{" "}
               {(isHacked || game.winner) && (
                 <Congrats
-                  isOpen={isOpen}
-                  setIsOpen={setIsOpen}
+                  isOpen={congratsOpen}
+                  setIsOpen={setCongratsOpen}
                   isHacked={isHacked}
                   isWinner={game.winner == address}
                   game={game}
+                  isSweeping={isSweeping}
+                  sweepMessage={sweepMessage}
                 />
               )}
             </div>
           )}
+          {isAdmin && game.winner && (
+            <div>
+              <HostAnnouncement game={game} setIsOpen={setHostAnnOpen} isOpen={hostAnnOpen} />
+            </div>
+          )}
           {screenwidth <= 768 && game.players.length > 0 && (
             <div className="md:w-2/3 rounded-xl border mt-5">
               <div>

packages/nextjs/pages/index.tsx

@@ -30,10 +30,7 @@ const Home: NextPage = () => {
                 Welcome to “Crypto Dice Hunt” - where you will race against others, rolling dices, to beat
                 the security of private keys.
               </p>
-              <p>
-                A user starts by creating a game, selecting the characters to be concealed in the private key. Upto 30
-                opponents can join the quest.
-              </p>
+              <p>A user starts by creating a game, selecting the characters to be concealed in the private key.</p>
               <p>
                 Your objective as a player? Decode these hidden characters and seize the prize concealed within the
                 wallet before your opponent does.