Merge branch 'main' into feat/transaction

packages/nextjs/app/coinflip/_components/CoinflipPage.tsx

@@ -1,20 +1,72 @@
 "use client";
 
-import React from 'react'
+import React, { useState } from 'react'
 import { useAccountConnection } from '~~/hooks/starkcade/useAccountConnection';
 import { ConflipConnectPage } from './ConflipConnectPage';
 import { ConflipPlayPage } from './ConflipPlayPage';
+import { QuestionMarkCircleIcon } from '@heroicons/react/24/solid';
+import GenericModal from '~~/components/scaffold-stark/CustomConnectButton/GenericModal';
+import { tips } from '~~/utils/Constants';
+import Modal from '~~/components/ui/Modal';
+
+
 
 
 export const CoinflipPage = () => {
 
-    const { account } = useAccountConnection();
-    return (
-        <>
-            {
-                account ?  <ConflipPlayPage /> : < ConflipConnectPage /> 
-            }
-
-        </>
-    );
+  const { account } = useAccountConnection();
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const openModal = () => setModalOpen(true);
+  const closeModal = () => setModalOpen(false);
+
+
+
+  return (
+    <>
+      {
+        account ? <ConflipPlayPage /> : < ConflipConnectPage />
+      }
+
+
+      <div
+        className='fixed justify-end bottom-0 mx-4 my-4 right-0 cursor-pointer'
+        title="Game rules and instructions"
+        onClick={openModal}
+      >
+        <QuestionMarkCircleIcon className="w-10 h-10 hover:scale-105 transition-transform" />
+      </div>
+
+
+      <Modal isOpen={isModalOpen} onClose={closeModal}>
+        <div className="flex flex-col gap-4">
+          <h3 className="text-xl font-bold border-b pb-2 text-center">
+            Game Rules and Instructions
+          </h3>
+
+          <ul className="flex flex-col gap-3 pl-6 text-gray-400">
+            {tips.map((tip, index) => (
+              <li
+                className="list-decimal list-inside text-sm leading-relaxed hover:text-teal-700 hover:font-medium transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-teal-500"
+                key={index}
+              >
+                {tip}
+              </li>
+            ))}
+          </ul>
+
+
+          <h4 className="text-lg font-bold text-center mt-4 text-green-600">
+            Have fun playing. Cheers!
+          </h4>
+        </div>
+      </Modal>
+
+
+
+
+
+
+    </>
+  );
 }

packages/nextjs/app/coinflip/_components/ConflipPlayPage.tsx

@@ -11,12 +11,12 @@ export const ConflipPlayPage = () => {
   return (
     <div className="relative flex justify-center items-center min-h-screen text-white overflow-hidden">
       {isProcessing ? (
-        <div className="flex flex-col gap-[1em] justify-center items-center min-h-screen">
-          <div className="relative text-center p-4 space-y-6 -z-5">
-            <div className="flex justify-center">
-              <CoinFlip src="/coin-removebg.png" />
-            </div>
-          </div>
+       <> <div className="flex flex-col gap-[1em] justify-center items-center min-h-screen">
+          <img
+            src="/coin-removebg.png"
+            alt="Web3 Arcade Coin"
+            className="w-48 h-48 md:w-64 md:h-64 mx-auto animate-spin duration-800"
+          />
           <h1 className="text-yellow-600 font-[600] text-[25px]">
             Please wait, transaction is processing...
           </h1>
@@ -26,7 +26,11 @@ export const ConflipPlayPage = () => {
             </div>
           </div>
         </div>
+        </div>
+        </div>
+       </>
       ) : (
+       <>
         <div className="relative text-center p-4 space-y-6 -z-5">
           <div className="flex justify-center">
             <img
@@ -116,7 +120,8 @@ export const ConflipPlayPage = () => {
             </button>
           </div>
         </div>
+        </>
       )}
     </div>
-  );
-};
+  )
+  }

packages/nextjs/app/coinflip/page.tsx

@@ -1,6 +1,9 @@
+
+
 import type { NextPage } from "next";
 import { CoinflipPage } from './_components/CoinflipPage'
 import { getMetadata } from "~~/utils/scaffold-stark/getMetadata";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
 export const metadata = getMetadata({
   title: "Coinflip",
@@ -11,9 +14,10 @@ export const metadata = getMetadata({
 const Debug: NextPage = () => {
   return (
     <>
-        <CoinflipPage />
+      <CoinflipPage />
+
     </>
   );
 };
 
-export default Debug;
+export default Debug;

packages/nextjs/components/ui/Modal.tsx

@@ -0,0 +1,29 @@
+const Modal = ({ isOpen, onClose, children }: {
+    isOpen: boolean,
+    onClose: ()=> void,
+    children: React.ReactNode
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={onClose}
+    >
+      <div
+        className="modal-box modal-border bg-modal  rounded-[8px] border flex flex-col gap-3 justify-around relative "
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 hover:text-gray-800"
+        >
+          ✕
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

packages/nextjs/utils/Constants.ts

@@ -274,6 +274,15 @@ const universalErc20Abi = [
 
 export const LAST_CONNECTED_TIME_LOCALSTORAGE_KEY = "lastConnectedTime";
 
+export const tips = [
+  "Select 'Heads' or 'Tails' to make your choice.",
+  "Enter the amount you wish to play (stake).",
+  "Click 'Double or Nothing' to start the game.",
+  "Approve the transaction in your wallet.",
+  "Wait for the blockchain transaction to complete.",
+  "If you win, your balance will be updated automatically!",
+];
+
 export {
   devnetEthClassHash,
   devnetStrkClassHash,