Style Header and Admin Panel Interface (#23)

### Why:
Wordle3 was lacking a consistent header and styling for both the connect
interfaces and the admin panel.

### How:
- Added custom CSS styles to ensure a unified design across the header
and the admin panel.
- Implemented conditional rendering to dynamically display or hide
components based on the user's state, ensuring a tailored interface for
the connect and admin sections.

### Demo

https://github.com/user-attachments/assets/43505608-425c-4ad8-bcea-d7ed56d14224

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@tanstack/react-query": "^5.59.20",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/App.css

@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 
   /* Colors */
@@ -29,6 +28,20 @@
   width: 200px;
 }
 
+.header {
+  display: flex;
+  max-width: 60%;
+  margin: 5px auto;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #424242;
+  padding: 10px;
+}
+
+.balance {
+  display: flex;
+  gap: 20px;
+}
 
 .logo {
   height: 6em;

frontend/src/App.jsx

@@ -19,7 +19,7 @@ import { LowFunds } from './components/LowFunds/LowFunds'
 import { AlreadyPlayed } from './components/AlreadyPlayed/AlreadyPlayed'
 
 // wagmi connection
-import { ConnectWallet } from './clients/walletClient/ConnectWallet'
+import { ConnectWallet } from './components/ConnectWallet/ConnectWallet'
 import { useAccount } from 'wagmi'
 import { AdminPanel } from './components/AdminPannel/AdminPanel'
 
@@ -137,11 +137,13 @@ function App() {
             <>
             <div>
 
-                <header>
+                <div className='header'>
+                    <div className='balance'>
+                    {isAdmin && <AdminPanel />}
+                    {address && <p>{wdtBalance} 🪙</p>}
+                    </div>
                     <ConnectWallet  />
-                    {isAdmin && <AdminPanel/>}
-                    {address && <p>WDT Balance: {wdtBalance ? `${wdtBalance.toString()} WDT` : '???'}</p>}
-                </header>
+                </div>
                 {/* Modals for approving transactions and messages */}
                 {approvalModal && <ApprovalModal account={address} close={() => setApprovalModal(false)} init={() => handleInitAttempts(address)}/>}
                 {lowFundsWarn && <LowFunds account={address} updateBalance={setWdtBalance}  close={() => setLowFundsWarn(false)}/>}

frontend/src/assets/icons.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export function SignOutIcon(): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24px"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25"
+      />
+    </svg>
+  );
+}

frontend/src/components/AdminPannel/AdminPanel.css

@@ -1,11 +1,48 @@
-
 .admin {
     display: flex;
-    align-items: middle;
-    vertical-align: middle;
-    justify-content: middle;
-    justify-items: middle;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.admin-button {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid var(--soft-white);
+    border-radius: 100px;
+}
+
+.admin-options {
+    position: fixed;
+    top: 0px;
+    left: 20%;    
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    gap: 20px;
+    border: 2px solid #424242;
     padding: 20px;
-    width: 300px;
-    background: black;
-  }
+    background: #242424;
+}
+
+.change-word {
+    display: flex;
+}
+
+.change-word input {
+    margin: -10px;
+}
+
+.change-word input:focus,
+.change-word input:active,
+.change-word input:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
+
+.change-word button {
+    margin: -10px;
+}
+

frontend/src/components/AdminPannel/AdminPanel.tsx

@@ -5,20 +5,25 @@ import { changeWord } from "../../hooks/WordleHooks"
 
 export function AdminPanel() {
     const [newWord, setNewWord] = useState("")
+    const [isOpen, setIsOpen] = useState(false)
+
     const { address } = useAccount()
 
     function handleChange (e) {
         setNewWord(e.target.value)
     }
     return (
         <div className="admin">
-            Admin panel
-            <div>
-                <p>Actions:</p>
-                <p>Change word: </p>
+            {!isOpen && <button className="admin-button" onClick={() => setIsOpen(!isOpen)}>Admin</button>}
+            {isOpen && <div className={'admin-options transition-in'}>
+                <button className='close-button'onClick={() => setIsOpen(false)}>X</button>
+                <p className='title'>Change word:</p>
+                <div className={'change-word'}>
                 <input placeholder="new word" onChange={handleChange}/>
-                <button onClick={() => changeWord(address, newWord)}>Submit</button>
-            </div>
+                <button className={'change-word-button'} onClick={() => changeWord(address, newWord)}>Submit</button>
+                </div>
+            </div>}
+            {isOpen && <div className="admin-overlay" onClick={() => setIsOpen(false)}></div>}
         </div>
     )
 }

frontend/src/components/ConnectWallet/ConnectWallet.css

@@ -0,0 +1,78 @@
+.connect-button {
+    border: 1px solid var(--soft-white);
+    background-color: #242424;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px;
+    border-radius: 100px;
+    width: 100px;
+}
+
+.wallet-options {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    height: fit-content;
+    width: 200px;
+    gap: 10px;
+    border: 1px solid var(--soft-white);
+    padding: 20px 10px;
+    background-color: #242424;
+}
+
+.title {
+    width: 80%;
+    margin: auto;
+    text-align: left;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    width: 20px;
+    height: 20px;
+    color: black;
+    background: var(--soft-white);
+    cursor: pointer;
+    border: none;
+}
+
+.connector {
+    display: flex;
+    gap: 6px;
+    padding: 5px;
+    width: 80%;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 12px;
+    align-items: center;
+}
+
+.account {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid var(--soft-white);
+    border-radius: 100px;
+}
+
+.logout-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    width: 30px;
+    height: 30px;
+    color: black;
+    background: var(--soft-white);
+    cursor: pointer;
+    border: none;
+}
+

frontend/src/components/ConnectWallet/ConnectWallet.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { useConnect } from 'wagmi'
+import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
+import './ConnectWallet.css'
+import { SignOutIcon } from '../../assets/icons'
+
+/**
+ * Account component that displays connected account.
+ */
+function Account({logout}) {
+  const { address } = useAccount()
+  const { disconnect } = useDisconnect()
+  const { data: ensName } = useEnsName({ address })
+  const { data: ensAvatar } = useEnsAvatar({ name: ensName! })
+
+  const formatAddress = (address: string) => {
+    return `${address.slice(0, 6)}...${address.slice(-4)}`
+  }
+
+  return (
+    <div className='account'>
+      {ensAvatar && <img alt="ENS Avatar" src={ensAvatar} />}
+      {address && <div>{ensName ? `${ensName} (${formatAddress(address)})` : formatAddress(address)}</div>}
+      <button className={'logout-button'} onClick={() => { disconnect(); logout() }}><SignOutIcon/></button>
+    </div>
+  )
+}
+
+/**
+ * Account component that displays available wallet connectors
+ * Connectors are also pulled from ../../wagmi.config.ts
+ */
+function WalletOptions({close}) {
+  const { connectors, connect } = useConnect()
+
+  return (
+  <div className={'wallet-options-container'}>
+  <div className={'wallet-options'}>
+  <button className='close-button'onClick={close}>X</button>
+  <p className='title'>Installed</p>
+  {connectors.map((connector) => (
+    <button className={'connector'} key={connector.uid} onClick={() => connect({ connector })}>
+      {/* Usinc react logos as a placeholder */}
+      <img src={'./src/assets/react.svg'}/>{connector.name}
+    </button>
+  ))}
+  </div>
+  </div>
+  )
+}
+
+/**
+ * Wrapper for the login user flow.
+ */
+export function ConnectWallet() {
+    const [menu, setMenu] = React.useState(false)
+    const { isConnected } = useAccount()
+    if (isConnected) return <Account logout={() => setMenu(false)}/>
+    return (
+    <div className='connect-wallet'>
+
+    {!menu && <button className='connect-button' onClick={() => setMenu(true)}>Connect</button>}
+    {menu && <WalletOptions close={() => setMenu(false)}/>}
+    </div>
+  )
+}
+
+

frontend/src/components/Header/Header.tsx

@@ -0,0 +1,3 @@
+export function Header() {
+    return ()
+}