From ecd9b1981d0dbcdcf8b87fe27af08259af0ec9aa Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Wed, 6 Nov 2024 14:00:37 +0000
Subject: [PATCH] init transaction approval workflow

---
 frontend/src/App.css |  2 ++
 frontend/src/App.jsx | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5ea85a2..6e2c25d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -9,6 +9,8 @@
   --gray: #818385;
   --yellow: #b59f3b;
   --dark-gray: #3a3a3c;
+  --red: #bc373c;
+  --soft-white: #f4f4f4;
 }
 
 /* TODO: remove */
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2ccc1c7..ccf14ff 100644
--- a/frontend/src/App.jsx
+++ b/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))}>