add admin panel and update conditional rendering

frontend/src/App.css

@@ -29,16 +29,6 @@
   width: 200px;
 }
 
-.admin {
-  display: flex;
-  align-items: middle;
-  vertical-align: middle;
-  justify-content: middle;
-  justify-items: middle;
-  padding: 20px;
-  width: 100px;
-  background: black;
-}
 
 .logo {
   height: 6em;

frontend/src/App.jsx

@@ -21,8 +21,7 @@ import { AlreadyPlayed } from './components/AlreadyPlayed/AlreadyPlayed'
 // wagmi connection
 import { ConnectWallet } from './clients/walletClient/ConnectWallet'
 import { useAccount } from 'wagmi'
-
-
+import { AdminPanel } from './components/AdminPannel/AdminPanel'
 
 function App() {
 
@@ -140,22 +139,19 @@ function App() {
 
                 <header>
                     <ConnectWallet  />
-                    {isAdmin && <div className={"admin"}><h4>Admin Panel</h4></div>}
+                    {isAdmin && <AdminPanel/>}
                     {address && <p>WDT Balance: {wdtBalance ? `${wdtBalance.toString()} WDT` : '???'}</p>}
                 </header>
                 {/* Modals for approving transactions and messages */}
-                {approvalModal && <ApprovalModal account={address} close={() => setApprovalModal(false)} init={() => handleInitAttempts(currentAddress)}/>}
+                {approvalModal && <ApprovalModal account={address} close={() => setApprovalModal(false)} init={() => handleInitAttempts(address)}/>}
                 {lowFundsWarn && <LowFunds account={address} updateBalance={setWdtBalance}  close={() => setLowFundsWarn(false)}/>}
                 {playedToday && <AlreadyPlayed close={() => setPlayedToday(false)}/>}
                 {victory && <div className={"victory"}>TBD: Victory Component</div>}
-
-
-
 
                 {/* Game space */}
                 {!isPlaying ?
                 (<div className={"game-buttons"}>
-                    <button onClick={() => handleInitAttempts(address)}>Play</button>
+                    {address && <button onClick={() => handleInitAttempts(address)}>Play</button>}
                 </div>) : (
                 <div>                    
                     <input placeholder='Enter guess' onChange={handleGuessChange}/>

frontend/src/components/AdminPannel/AdminPanel.css

@@ -0,0 +1,11 @@
+
+.admin {
+    display: flex;
+    align-items: middle;
+    vertical-align: middle;
+    justify-content: middle;
+    justify-items: middle;
+    padding: 20px;
+    width: 300px;
+    background: black;
+  }

frontend/src/components/AdminPannel/AdminPanel.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react"
+import { useAccount } from "wagmi"
+import './AdminPanel.css'
+import { changeWord } from "../../hooks/WordleHooks"
+
+export function AdminPanel() {
+    const [newWord, setNewWord] = useState("")
+    const { address } = useAccount()
+
+    function handleChange (e) {
+        setNewWord(e.target.value)
+    }
+    return (
+        <div className="admin">
+            Admin panel
+            <div>
+                <p>Actions:</p>
+                <p>Change word: </p>
+                <input placeholder="new word" onChange={handleChange}/>
+                <button onClick={() => changeWord(address, newWord)}>Submit</button>
+            </div>
+        </div>
+    )
+}

frontend/src/hooks/WordleHooks.ts

@@ -3,6 +3,18 @@ import { client, wdt, wordle } from '../clients/testClient'
 import WordleABI from '../abis/WordleABI.json'
 import ERC20ABI from '../abis/ERC20ABI.json'
 
+// Admin functions
+export async function changeWord(account, word) {
+    const { request } = await client.simulateContract({
+        account,
+        address: wordle.address,
+        abi: WordleABI,
+        functionName: 'changeWord',
+        args: [word],
+    })
+    if (request) await client.writeContract(request)
+}
+
 // Get number of remaining attempts a player still has
 export async function getAttempts(account) {
   const attempts = await wordle.read.getPlayerAttempts([account])