From 1c5f7125ba69fec5b196a483308827b8786d16ba Mon Sep 17 00:00:00 2001
From: Abdulhakeem Abdulazeez <ayoazeez26@gmail.com>
Date: Tue, 16 Apr 2024 13:23:00 +0100
Subject: [PATCH 1/2] feat: added data for accounts tab

---
 frontend/src/tabs/Account.css | 51 +++++++++++++++++++++++++++++++
 frontend/src/tabs/Account.js  | 57 ++++++++++++++++++++++++++++++++---
 2 files changed, 103 insertions(+), 5 deletions(-)

diff --git a/frontend/src/tabs/Account.css b/frontend/src/tabs/Account.css
index e69de29b..2f326d7e 100644
--- a/frontend/src/tabs/Account.css
+++ b/frontend/src/tabs/Account.css
@@ -0,0 +1,51 @@
+.Account__flex {
+  display: flex;
+  margin: 8px 4px;
+}
+
+.Account__flex--center {
+  align-items: center;
+}
+
+.Account__wrap {
+  word-wrap: break-word;
+  width: 100%;
+  padding-right: 90px;
+  line-height: 1.2;
+}
+
+.Account__list {
+  padding-left: 20px;
+  list-style-type: none;
+}
+
+.Account__list li {
+  margin-bottom: 10px;
+  text-indent: -8px;
+}
+
+.Account__list li:before {
+  content: "-";
+  text-indent: -8px;
+}
+
+.Account__input {
+  width: 100%;
+  padding: 6px 10px;
+}
+
+.Account__input:focus {
+  border: 1px solid black;
+  outline: black;
+}
+
+.Account__button {
+  background-color: black;
+  color: #EFEFEF;
+  border: 1px solid black;
+  margin-top: 6px;
+  padding: 8px 16px;
+  font-size: 10px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/frontend/src/tabs/Account.js b/frontend/src/tabs/Account.js
index 4d846979..5dc15bc2 100644
--- a/frontend/src/tabs/Account.js
+++ b/frontend/src/tabs/Account.js
@@ -1,13 +1,60 @@
-import React from 'react'
-import './Account.css';
-import BasicTab from './BasicTab.js';
+import React, { useState } from "react";
+import "./Account.css";
+import BasicTab from "./BasicTab.js";
 
-const Account = props => {
+const Account = (props) => {
   // TODO: Create the account tab w/ wallet address, username, pixel info, top X % users ( pixels placed? ), ...
+  const [username, setUsername] = useState("");
+  const [isUsernameSaved, saveUsername] = useState(false);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log(event);
+    setUsername(username);
+    saveUsername(true);
+  }
   return (
     <BasicTab title="Account">
+      <div className="Account__flex">
+        <p>Address:</p>
+        <p className="Account__wrap">
+          0x0000000000000000000000000000000000000000000000000000000000000000
+        </p>
+      </div>
+      <div className="Account__flex Account__flex--center">
+        <p>Username:</p>
+        {isUsernameSaved ? (
+          <p>{username}</p>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <label>
+              <input
+                className="Account__input"
+                type="text"
+                value={username}
+                required
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </label>
+            <button className="Account__button" type="submit">update</button>
+          </form>
+        )}
+      </div>
+      <div className="Account__flex">
+        <p>Pixel count:</p>
+        <p>572</p>
+      </div>
+      <div className="Account__flex">
+        <p>Top 5 🔥</p>
+        <ul className="Account__list">
+          <li>0x20579</li>
+          <li>0x00918</li>
+          <li>0x55603</li>
+          <li>0x07802</li>
+          <li>0x09166</li>
+        </ul>
+      </div>
     </BasicTab>
   );
-}
+};
 
 export default Account;

From 5c5a31fde70cecf2435982acbe3edb7454b2cdf5 Mon Sep 17 00:00:00 2001
From: Abdulhakeem Abdulazeez <ayoazeez26@gmail.com>
Date: Tue, 16 Apr 2024 23:31:48 +0100
Subject: [PATCH 2/2] feat: fixed PR comments

---
 frontend/src/tabs/Account.css | 31 +++++++++++++++-------
 frontend/src/tabs/Account.js  | 49 +++++++++++++++++++++++++----------
 2 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/frontend/src/tabs/Account.css b/frontend/src/tabs/Account.css
index 2f326d7e..5c3a638b 100644
--- a/frontend/src/tabs/Account.css
+++ b/frontend/src/tabs/Account.css
@@ -8,10 +8,8 @@
 }
 
 .Account__wrap {
-  word-wrap: break-word;
-  width: 100%;
-  padding-right: 90px;
-  line-height: 1.2;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .Account__list {
@@ -41,11 +39,26 @@
 
 .Account__button {
   background-color: black;
-  color: #EFEFEF;
+  color: #efefef;
   border: 1px solid black;
-  margin-top: 6px;
-  padding: 8px 16px;
-  font-size: 10px;
   text-transform: uppercase;
   cursor: pointer;
-}
\ No newline at end of file
+  border-radius: 6px;
+}
+
+.Account__button--edit {
+  padding: 2px 8px;
+  font-size: 8px;
+}
+
+.Account__button--submit {
+  padding: 8px 16px;
+  font-size: 10px;
+}
+
+.Account__user {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  width: 100%;
+}
diff --git a/frontend/src/tabs/Account.js b/frontend/src/tabs/Account.js
index 5dc15bc2..f4e3d88b 100644
--- a/frontend/src/tabs/Account.js
+++ b/frontend/src/tabs/Account.js
@@ -1,17 +1,37 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./Account.css";
 import BasicTab from "./BasicTab.js";
 
 const Account = (props) => {
   // TODO: Create the account tab w/ wallet address, username, pixel info, top X % users ( pixels placed? ), ...
   const [username, setUsername] = useState("");
+  const [pixelCount, setPixelCount] = useState(2572);
+  const [accountRank, setAccountRank] = useState("");
   const [isUsernameSaved, saveUsername] = useState(false);
+
   const handleSubmit = (event) => {
     event.preventDefault();
-    console.log(event);
     setUsername(username);
     saveUsername(true);
+  };
+
+  const editUsername = (e) => {
+    saveUsername(false);
   }
+
+  useEffect(() => {
+    if (pixelCount >= 5000) {
+      setAccountRank("Champion");
+    } else if (pixelCount >= 3000) {
+      setAccountRank("Platinum");
+    } else if (pixelCount >= 2000) {
+      setAccountRank("Gold");
+    } else if (pixelCount >= 1000) {
+      setAccountRank("Silver");
+    } else {
+      setAccountRank("Bronze");
+    }
+  });
   return (
     <BasicTab title="Account">
       <div className="Account__flex">
@@ -23,9 +43,14 @@ const Account = (props) => {
       <div className="Account__flex Account__flex--center">
         <p>Username:</p>
         {isUsernameSaved ? (
-          <p>{username}</p>
+          <div className="Account__user">
+            <p>{username}</p>
+            <button className="Account__button Account__button--edit" type="button" onClick={editUsername}>
+              edit
+            </button>
+          </div>
         ) : (
-          <form onSubmit={handleSubmit}>
+          <form className="Account__user" onSubmit={handleSubmit}>
             <label>
               <input
                 className="Account__input"
@@ -35,23 +60,19 @@ const Account = (props) => {
                 onChange={(e) => setUsername(e.target.value)}
               />
             </label>
-            <button className="Account__button" type="submit">update</button>
+            <button className="Account__button Account__button--submit" type="submit">
+              update
+            </button>
           </form>
         )}
       </div>
       <div className="Account__flex">
         <p>Pixel count:</p>
-        <p>572</p>
+        <p>{pixelCount}</p>
       </div>
       <div className="Account__flex">
-        <p>Top 5 🔥</p>
-        <ul className="Account__list">
-          <li>0x20579</li>
-          <li>0x00918</li>
-          <li>0x55603</li>
-          <li>0x07802</li>
-          <li>0x09166</li>
-        </ul>
+        <p>Current Rank:</p>
+        <p>{accountRank}</p>
       </div>
     </BasicTab>
   );