init transaction approval workflow

frontend/src/App.css

@@ -9,6 +9,8 @@
   --gray: #818385;
   --yellow: #b59f3b;
   --dark-gray: #3a3a3c;
+  --red: #bc373c;
+  --soft-white: #f4f4f4;
 }
 
 /* TODO: remove */

frontend/src/App.jsx

@@ -16,7 +16,7 @@ import {
 } from './hooks/WordleHooks'
 import {Alphabet} from './components/Alphabet/Alphabet'
 import { GameSpace } from './components/GameSpace/GameSpace'
-
+import { ApprovalModal } from './components/ApprovalModal/ApprovalModal'
 
 function App() {
     // Current account and respetive variables
@@ -33,6 +33,9 @@ function App() {
     const [playerGuesses, setPlayerGuesses] = useState([])
     const [playerHitmap, setPlayerHitMap] = useState(undefined)
 
+    // Wallet operations handlers
+    const [approvalModal, setModal] = useState(false) // approval modal to approve spending
+
     // Gets the current account's WDT balance, eligibility to play, player attempts, guesses and alphabet.
     useEffect(() => {
         if (currentAcc) {
@@ -53,9 +56,22 @@ function App() {
         tryGuess(account, guess)
     }  
 
+    // handle eligibility check
+    // seting up transaction approval workflow
+    const [cc, setCc] = useState('')
+    const handleEligibility = (account) => {
+        if (canPlay(account)) setCc('Entering play loop')        
+    }
+
     return (
         <>
             <div>
+                <button onClick={() => setModal(!approvalModal)}>show modal</button>
+                <button onClick={() => handleEligibility(currentAcc)}>Can you play?</button>
+                <p>{cc}</p>
+
+                {approvalModal && <ApprovalModal close={() => setModal(false)}/>}
+
 
                 <h4>Here are some addresses:</h4>
                 <select onChange={(e) => setCurrentAcc(local_accounts.find(a => a.address === e.target.value))}>