feat: added data for accounts tab

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;
+}

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;