Staging merge to main

packages/nextjs/components/Footer.tsx

@@ -1,21 +1,22 @@
-import { hardhat } from "wagmi/chains";
-import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
+// import { hardhat } from "wagmi/chains";
+// import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
-import { SwitchTheme } from "~~/components/SwitchTheme";
-import { Faucet } from "~~/components/scaffold-eth";
-import { useGlobalState } from "~~/services/store/store";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
+
+// import { SwitchTheme } from "~~/components/SwitchTheme";
+// import { Faucet } from "~~/components/scaffold-eth";
+// import { useGlobalState } from "~~/services/store/store";
+// import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
+  // const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
   const codeLink = "https://github.com/BuidlGuidl/private-key-dice";
 
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
-      <div>
+    <div className="min-h-0 py-5 px-1 mb-3 lg:mb-0 ">
+      {/* <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex space-x-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
@@ -28,7 +29,7 @@ export const Footer = () => {
           </div>
           <SwitchTheme className="pointer-events-auto" />
         </div>
-      </div>
+      </div> */}
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">

packages/nextjs/components/Header.tsx

@@ -59,7 +59,7 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-white min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
+    <div className="sticky lg:static bg-base-100 top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -85,15 +85,15 @@ export const Header = () => {
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <div className="flex relative w-10 h-10">
-            <Image alt="DICE" className="cursor-pointer" fill src="/diceLogo.svg" />
+            <Image alt="DICE" className="cursor-pointer rounded-lg" fill src="/diceLogo.svg" />
           </div>
           <div className="flex flex-col">
             <span className="font-bold leading-tight">Private Key Dice</span>
           </div>
         </Link>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+        {/* <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
           <HeaderMenuLinks />
-        </ul>
+        </ul> */}
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />

packages/nextjs/components/SwitchTheme.tsx

@@ -8,7 +8,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
 
   useEffect(() => {
     const body = document.body;
-    body.setAttribute("data-theme", isDarkMode ? "scaffoldEthDark" : "scaffoldEth");
+    body.setAttribute("data-theme", "scaffoldEth");
   }, [isDarkMode]);
 
   return (

packages/nextjs/components/Wallet.tsx

@@ -186,8 +186,8 @@ export default function Wallet() {
 
             <br />
             <i>
-              Point your camera phone at qr code to open in &nbsp;
-              <a target="_blank" href={fullLink} rel="noopener noreferrer">
+              Point your phone camera at qr code to open in &nbsp;
+              <a target="_blank" href={fullLink} rel="noopener noreferrer" className="underline text-blue-500">
                 Punk Wallet
               </a>
               :

packages/nextjs/components/dicedemo/GameCreateForm.tsx

@@ -109,10 +109,10 @@ const GameCreationForm = () => {
   };
 
   return (
-    <div>
+    <div className="w-full">
       <form onSubmit={handleSubmit}>
         <label className="block">
-          <h1 className=" mb-4">Choose the Number of Dice (1-64)</h1>
+          <h1 className=" mb-3 ">Choose the Number of Dice (1-64)</h1>
           <div className="flex items-center space-x-4">
             <input
               type="range"
@@ -128,7 +128,7 @@ const GameCreationForm = () => {
           </div>
         </label>
         <br />
-        <button type="submit" className="btn btn-sm  btn-primary">
+        <button type="submit" className="btn btn-sm  btn-primary -mt-2 ">
           {loading && <span className="loading loading-spinner"></span>}
           Start Game
         </button>

packages/nextjs/components/dicedemo/GameJoinForm.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { InputBase } from "../scaffold-eth";
 import QrReader from "react-qr-reader-es6";
@@ -15,7 +15,6 @@ const GameJoinForm = ({
   setInviteCode: Dispatch<SetStateAction<string>>;
 }) => {
   const router = useRouter();
-  const labelRef = useRef<HTMLLabelElement | null>(null);
   const [scanning, setScanning] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -73,12 +72,6 @@ const GameJoinForm = ({
   //   setScanning(true);
   // };
 
-  useEffect(() => {
-    if (labelRef.current) {
-      labelRef.current.focus();
-    }
-  }, []);
-
   useEffect(() => {
     if (invite) {
       handleJoinGame(invite as string);
@@ -93,10 +86,10 @@ const GameJoinForm = ({
   }, [invite]);
 
   return (
-    <div className="">
+    <div className="w-full">
       <div>
-        <label ref={labelRef}>
-          <h1> Enter Invite Code</h1>
+        <label>
+          <h1 className=" mb-4"> Enter Invite Code</h1>
           <InputBase
             name="inviteCode"
             value={inviteCode}
@@ -109,7 +102,7 @@ const GameJoinForm = ({
             // }
           />
         </label>
-        <button className="btn btn-sm btn-primary mt-6" type="button" onClick={() => handleJoinGame(inviteCode)}>
+        <button className="btn btn-sm btn-primary mt-4 " type="button" onClick={() => handleJoinGame(inviteCode)}>
           {loading && <span className="loading loading-spinner"></span>}
           Join Game
         </button>

packages/nextjs/components/dicedemo/Congrats.tsx → packages/nextjs/components/dicedemo/PlayerAnnoucement.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from "react";
 import { loadBurnerSK } from "~~/hooks/scaffold-eth";
 import { Game } from "~~/types/game/game";
 
-const Congrats = ({
+const PlayerAnnouncement = ({
   isOpen,
   setIsOpen,
   isHacked,
@@ -65,4 +65,4 @@ const Congrats = ({
   );
 };
 
-export default Congrats;
+export default PlayerAnnouncement;

packages/nextjs/components/dicedemo/WelcomeRoll.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { Address, Balance } from "../scaffold-eth";
+import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
+import { generateRandomHex } from "~~/utils/diceDemo/gameUtils";
+
+const WelcomeRoll = () => {
+  const [isRolling, setIsRolling] = useState(false);
+  const [isUnitRolling, setIsUnitRolling] = useState<boolean[]>(Array(64).fill(false));
+  const [rolled, setRolled] = useState(false);
+  const [rolledResult, setRolledResult] = useState<string[]>([]);
+  const [rolls, setRolls] = useState<string[]>([]);
+  const [spinning, setSpinning] = useState(false);
+  const [isHacked, setIsHacked] = useState(false);
+  const [rolledAddress, setRolledAddress] = useState("");
+
+  const privateKey = generatePrivateKey();
+  const pk = privateKey.substring(2);
+
+  const rollTheDice = () => {
+    setRolledAddress("");
+    setIsRolling(true);
+    setIsUnitRolling(Array.from({ length: isUnitRolling.length }, () => true));
+    if (!rolled) {
+      setRolled(true);
+    }
+    setSpinning(true);
+    const rolls: string[] = [];
+    for (let index = 0; index < 64; index++) {
+      rolls.push(generateRandomHex());
+    }
+    setRolls(rolls);
+    let iterations = 0;
+    setTimeout(() => {
+      for (let i = 0; i < isUnitRolling.length; i++) {
+        setTimeout(() => {
+          setIsUnitRolling(prevState => {
+            const newState = [...prevState];
+            newState[i] = false;
+            return newState;
+          });
+          iterations++;
+          if (iterations === isUnitRolling.length) {
+            setIsRolling(false);
+            setTimeout(() => {
+              setSpinning(false);
+              setRolledResult(rolls);
+            }, 300);
+          }
+        }, i * 100);
+      }
+    }, 400);
+  };
+
+  const compareResult = (rolledResult: string[], pkChars: string) => {
+    return rolledResult.every((value, index) => value.toLowerCase() === pkChars[index].toLowerCase());
+  };
+
+  useEffect(() => {
+    let isHiiddenChars;
+
+    if (rolled && rolledResult.length > 0 && privateKey) {
+      isHiiddenChars = compareResult(rolledResult, pk);
+      const rolledPk: `0x${string}` = `0x${rolledResult.join("")}`;
+      const account = privateKeyToAccount(rolledPk as `0x${string}`);
+      setRolledAddress(account.address);
+    }
+
+    if (isHiiddenChars) {
+      setIsRolling(false);
+      setSpinning(false);
+      setIsHacked(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rolledResult]);
+
+  return (
+    <div className="flex justify-center flex-col gap-2">
+      <button
+        className="btn btn-sm btn-primary mx-auto "
+        onClick={rollTheDice}
+        disabled={isRolling || spinning || isHacked}
+      >
+        {spinning && <span className="loading loading-spinner"></span>}
+        Roll
+      </button>
+      <div className="h-10">
+        {rolledAddress != "" && (
+          <div className="flex justify-center items-center gap-2   mt-2 ">
+            <span>
+              <Address address={rolledAddress}></Address>
+            </span>
+            <span>
+              <Balance address={rolledAddress}></Balance>
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="grid grid-cols-8 w-full mt-2 mx-auto opacity-100">
+        {Array.from({ length: 64 }).map((_, index) =>
+          rolled ? (
+            isUnitRolling[index] ? (
+              <div
+                key={index}
+                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
+              >
+                <div className="scale-125">
+                  <Image className="scale-150" src="/rolls-gif/Spin.gif" alt="spinning" width={400} height={400} />
+                </div>
+              </div>
+            ) : (
+              <div
+                key={index}
+                className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
+              >
+                <div className="scale-125">
+                  <Image
+                    className="scale-150"
+                    src={`/rolls-jpg/${rolls[index]}.jpg`}
+                    alt="rolled"
+                    width={400}
+                    height={400}
+                  />
+                </div>
+              </div>
+            )
+          ) : (
+            <div
+              key={index}
+              className="w-[95%] h-[95%] overflow-hidden rounded-lg mx-auto flex justify-center items-center"
+            >
+              <div className="scale-125">
+                <Image className=" scale-150" src={`/rolls-jpg/0.jpg`} alt="zero roll" width={400} height={400} />
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeRoll;

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx

@@ -97,8 +97,8 @@ export const RainbowKitCustomConnectButton = () => {
                       className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
                     >
                       <BlockieAvatar address={account.address} size={30} ensImage={account.ensAvatar} />
-                      <span className="ml-2 mr-1">{account.displayName}</span>
-                      <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                      <span className="ml-1 mr-1 sm:text-sm text-xs">{account.displayName}</span>
+                      <ChevronDownIcon className="h-6 sm:w-4 w-2 ml-1 sm:ml-0" />
                     </label>
                     <ul
                       tabIndex={0}

packages/nextjs/hooks/useSweepWallet.tsx

@@ -43,8 +43,8 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
 
     const gasPrice = await provider.getGasPrice();
 
-    const gasLimit = 21000000;
-    let gasCost = gasPrice.mul(42000000); // gasLimit * 2
+    const gasLimit = 21000;
+    let gasCost = gasPrice.mul(42000); // gasLimit * 2
 
     let totalToSend = balance.sub(gasCost);
 
@@ -90,7 +90,7 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
       setIsSweeping(false);
     } catch (error: any) {
       try {
-        gasCost = gasPrice.mul(84000000); // gasLimit * 4
+        gasCost = gasPrice.mul(84000); // gasLimit * 4
 
         totalToSend = balance.sub(gasCost);
 
@@ -124,7 +124,7 @@ const useSweepWallet = ({ game, token }: { game?: Game; token?: string }) => {
         setIsSweeping(false);
       } catch (error: any) {
         try {
-          gasCost = gasPrice.mul(168000000); // gasLimit * 8
+          gasCost = gasPrice.mul(168000); // gasLimit * 8
 
           totalToSend = balance.sub(gasCost);
 

packages/nextjs/pages/_app.tsx

@@ -32,8 +32,6 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
     setIsDarkTheme(isDarkMode);
   }, [isDarkMode]);
 
-  const nowish = new Date();
-
   return (
     <WagmiConfig config={wagmiConfig}>
       <NextNProgress />
@@ -42,15 +40,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
         avatar={BlockieAvatar}
         theme={isDarkTheme ? darkTheme() : lightTheme()}
       >
-        <div
-          className="flex flex-col min-h-screen"
-          style={{
-            backgroundImage: "url('/bg" + ((nowish.getMinutes() % 4) + 1) + ".jpeg')",
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            backgroundRepeat: "no-repeat",
-          }}
-        >
+        <div className="flex flex-col min-h-screen">
           <Header />
           <main className="relative flex flex-col flex-1 overflow-hidden">
             <Component {...pageProps} />