Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Accounts Tab #50

Merged
merged 2 commits into from
Apr 17, 2024
Merged

feat: Accounts Tab #50

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c5f712
feat: added data for accounts tab
Ayoazeez26 Apr 16, 2024
5c5a31f
feat: fixed PR comments
Ayoazeez26 Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions frontend/src/tabs/Account.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
57 changes: 52 additions & 5 deletions frontend/src/tabs/Account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
b-j-roberts marked this conversation as resolved.
Show resolved Hide resolved
0x0000000000000000000000000000000000000000000000000000000000000000
</p>
</div>
<div className="Account__flex Account__flex--center">
<p>Username:</p>
{isUsernameSaved ? (
b-j-roberts marked this conversation as resolved.
Show resolved Hide resolved
<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>
b-j-roberts marked this conversation as resolved.
Show resolved Hide resolved
</form>
)}
</div>
<div className="Account__flex">
<p>Pixel count:</p>
<p>572</p>
</div>
<div className="Account__flex">
<p>Top 5 🔥</p>
b-j-roberts marked this conversation as resolved.
Show resolved Hide resolved
<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;