2023-01-09 11:00:23 +00:00
|
|
|
import "./SettingsPage.css";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Nostrich from "nostrich.jpg";
|
2023-01-09 11:00:23 +00:00
|
|
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
2023-01-12 12:00:44 +00:00
|
|
|
import { useNavigate } from "react-router-dom";
|
2023-01-12 22:50:48 +00:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
import { faShop } from "@fortawesome/free-solid-svg-icons";
|
2023-01-09 11:00:23 +00:00
|
|
|
|
2023-01-20 11:11:50 +00:00
|
|
|
import { RootState } from "State/Store";
|
|
|
|
import { logout, setRelays } from "State/Login";
|
|
|
|
import useEventPublisher from "Feed/EventPublisher";
|
|
|
|
import useProfile from "Feed/ProfileFeed";
|
|
|
|
import VoidUpload from "Feed/VoidUpload";
|
|
|
|
import { hexToBech32, openFile } from "Util";
|
|
|
|
import Relay from "Element/Relay";
|
|
|
|
import Copy from "Element/Copy";
|
|
|
|
import { HexKey, UserMetadata } from "Nostr";
|
|
|
|
import { RelaySettings } from "Nostr/Connection";
|
|
|
|
import { MetadataCache } from "Db/User";
|
2023-01-09 11:00:23 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export default function SettingsPage() {
|
2023-01-12 12:00:44 +00:00
|
|
|
const navigate = useNavigate();
|
2023-01-16 17:48:25 +00:00
|
|
|
const id = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
|
|
|
|
const privKey = useSelector<RootState, HexKey | undefined>(s => s.login.privateKey);
|
|
|
|
const relays = useSelector<RootState, Record<string, RelaySettings>>(s => s.login.relays);
|
2023-01-09 11:00:23 +00:00
|
|
|
const dispatch = useDispatch();
|
2023-01-16 17:48:25 +00:00
|
|
|
const user = useProfile(id)?.get(id || "");
|
2023-01-09 11:00:23 +00:00
|
|
|
const publisher = useEventPublisher();
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
const [name, setName] = useState<string>();
|
|
|
|
const [displayName, setDisplayName] = useState<string>();
|
|
|
|
const [picture, setPicture] = useState<string>();
|
|
|
|
const [banner, setBanner] = useState<string>();
|
|
|
|
const [about, setAbout] = useState<string>();
|
|
|
|
const [website, setWebsite] = useState<string>();
|
|
|
|
const [nip05, setNip05] = useState<string>();
|
|
|
|
const [lud06, setLud06] = useState<string>();
|
|
|
|
const [lud16, setLud16] = useState<string>();
|
|
|
|
const [newRelay, setNewRelay] = useState<string>();
|
2023-01-09 11:00:23 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
const avatarPicture = (picture?.length ?? 0) === 0 ? Nostrich : picture
|
2023-01-13 23:08:36 +00:00
|
|
|
|
2023-01-09 11:00:23 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (user) {
|
2023-01-16 17:48:25 +00:00
|
|
|
setName(user.name);
|
|
|
|
setDisplayName(user.display_name)
|
|
|
|
setPicture(user.picture);
|
|
|
|
setBanner(user.banner);
|
|
|
|
setAbout(user.about);
|
|
|
|
setWebsite(user.website);
|
|
|
|
setNip05(user.nip05);
|
|
|
|
setLud06(user.lud06);
|
|
|
|
setLud16(user.lud16);
|
2023-01-09 11:00:23 +00:00
|
|
|
}
|
|
|
|
}, [user]);
|
|
|
|
|
|
|
|
async function saveProfile() {
|
|
|
|
// copy user object and delete internal fields
|
|
|
|
let userCopy = {
|
|
|
|
...user,
|
|
|
|
name,
|
2023-01-10 09:53:28 +00:00
|
|
|
display_name: displayName,
|
2023-01-09 11:00:23 +00:00
|
|
|
about,
|
|
|
|
picture,
|
2023-01-13 23:08:36 +00:00
|
|
|
banner,
|
2023-01-09 11:00:23 +00:00
|
|
|
website,
|
|
|
|
nip05,
|
|
|
|
lud16
|
|
|
|
};
|
|
|
|
delete userCopy["loaded"];
|
2023-01-16 17:48:25 +00:00
|
|
|
delete userCopy["created"];
|
2023-01-09 11:00:23 +00:00
|
|
|
delete userCopy["pubkey"];
|
|
|
|
console.debug(userCopy);
|
|
|
|
|
|
|
|
let ev = await publisher.metadata(userCopy);
|
|
|
|
console.debug(ev);
|
|
|
|
publisher.broadcast(ev);
|
|
|
|
}
|
|
|
|
|
2023-01-13 23:08:36 +00:00
|
|
|
async function uploadFile() {
|
2023-01-09 11:00:23 +00:00
|
|
|
let file = await openFile();
|
2023-01-16 17:48:25 +00:00
|
|
|
if (file) {
|
|
|
|
console.log(file);
|
|
|
|
let rsp = await VoidUpload(file, file.name);
|
|
|
|
if (!rsp?.ok) {
|
|
|
|
throw "Upload failed, please try again later";
|
|
|
|
}
|
|
|
|
return rsp.file;
|
2023-01-09 11:00:23 +00:00
|
|
|
}
|
2023-01-13 23:08:36 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
async function setNewAvatar() {
|
2023-01-16 17:48:25 +00:00
|
|
|
const rsp = await uploadFile();
|
|
|
|
if (rsp) {
|
|
|
|
setPicture(rsp.meta?.url ?? `https://void.cat/d/${rsp.id}`);
|
|
|
|
}
|
2023-01-09 11:00:23 +00:00
|
|
|
}
|
|
|
|
|
2023-01-13 23:08:36 +00:00
|
|
|
async function setNewBanner() {
|
2023-01-16 17:48:25 +00:00
|
|
|
const rsp = await uploadFile();
|
|
|
|
if (rsp) {
|
|
|
|
setBanner(rsp.meta?.url ?? `https://void.cat/d/${rsp.id}`);
|
|
|
|
}
|
2023-01-13 23:08:36 +00:00
|
|
|
}
|
|
|
|
|
2023-01-09 12:40:10 +00:00
|
|
|
async function saveRelays() {
|
|
|
|
let ev = await publisher.saveRelays();
|
|
|
|
publisher.broadcast(ev);
|
|
|
|
}
|
|
|
|
|
2023-01-09 11:00:23 +00:00
|
|
|
function editor() {
|
|
|
|
return (
|
|
|
|
<div className="editor">
|
|
|
|
<div className="form-group">
|
|
|
|
<div>Name:</div>
|
|
|
|
<div>
|
|
|
|
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-10 09:53:28 +00:00
|
|
|
<div className="form-group">
|
|
|
|
<div>Display name:</div>
|
|
|
|
<div>
|
|
|
|
<input type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-01-09 11:00:23 +00:00
|
|
|
<div className="form-group f-col">
|
|
|
|
<div>About:</div>
|
|
|
|
<div className="w-max">
|
|
|
|
<textarea className="w-max" onChange={(e) => setAbout(e.target.value)} value={about}></textarea>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>Website:</div>
|
|
|
|
<div>
|
|
|
|
<input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>NIP-05:</div>
|
|
|
|
<div>
|
2023-01-12 22:50:48 +00:00
|
|
|
<input type="text" className="mr10" value={nip05} onChange={(e) => setNip05(e.target.value)} />
|
|
|
|
<div className="btn" onClick={() => navigate("/verification")}>
|
|
|
|
<FontAwesomeIcon icon={faShop} />
|
|
|
|
|
|
|
|
Buy
|
|
|
|
</div>
|
2023-01-09 11:00:23 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>LN Address:</div>
|
|
|
|
<div>
|
|
|
|
<input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
|
|
<div>
|
2023-01-12 12:00:44 +00:00
|
|
|
<div className="btn" onClick={() => { dispatch(logout()); navigate("/"); }}>Logout</div>
|
2023-01-09 11:00:23 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div className="btn" onClick={() => saveProfile()}>Save</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-01-17 11:03:40 +00:00
|
|
|
function addNewRelay() {
|
2023-01-16 17:48:25 +00:00
|
|
|
if ((newRelay?.length ?? 0) > 0) {
|
|
|
|
const parsed = new URL(newRelay!);
|
2023-01-17 11:03:40 +00:00
|
|
|
const payload = {
|
|
|
|
relays: {
|
|
|
|
...relays,
|
|
|
|
[parsed.toString()]: { read: false, write: false }
|
|
|
|
},
|
|
|
|
createdAt: Math.floor(new Date().getTime() / 1000)
|
|
|
|
};
|
|
|
|
dispatch(setRelays(payload))
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
2023-01-09 12:40:10 +00:00
|
|
|
}
|
|
|
|
|
2023-01-17 11:03:40 +00:00
|
|
|
function addRelay() {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h4>Add Relays</h4>
|
|
|
|
<div className="flex mb10">
|
|
|
|
<input type="text" className="f-grow" placeholder="wss://my-relay.com" value={newRelay} onChange={(e) => setNewRelay(e.target.value)} />
|
|
|
|
</div>
|
|
|
|
<div className="btn mb10" onClick={() => addNewRelay()}>Add</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-01-12 12:00:44 +00:00
|
|
|
function settings() {
|
|
|
|
if (!id) return null;
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h1>Settings</h1>
|
2023-01-13 23:08:36 +00:00
|
|
|
<div className="flex f-center image-settings">
|
2023-01-16 17:48:25 +00:00
|
|
|
<div>
|
|
|
|
<h2>Avatar</h2>
|
|
|
|
<div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
|
|
|
|
<div className="edit" onClick={() => setNewAvatar()}>Edit</div>
|
|
|
|
</div>
|
2023-01-12 12:00:44 +00:00
|
|
|
</div>
|
2023-01-16 17:48:25 +00:00
|
|
|
<div>
|
|
|
|
<h2>Header</h2>
|
2023-01-16 22:04:10 +00:00
|
|
|
<div style={{ backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})` }} className="banner">
|
2023-01-16 17:48:25 +00:00
|
|
|
<div className="edit" onClick={() => setNewBanner()}>Edit</div>
|
|
|
|
</div>
|
2023-01-13 23:08:36 +00:00
|
|
|
</div>
|
2023-01-12 12:00:44 +00:00
|
|
|
</div>
|
|
|
|
{editor()}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-01-09 11:00:23 +00:00
|
|
|
return (
|
|
|
|
<div className="settings">
|
2023-01-12 12:00:44 +00:00
|
|
|
{settings()}
|
2023-01-12 15:48:58 +00:00
|
|
|
{privKey && (<div className="flex f-col bg-grey">
|
|
|
|
<div>
|
|
|
|
<h4>Private Key:</h4>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Copy text={hexToBech32("nsec", privKey)} />
|
|
|
|
</div>
|
|
|
|
</div>)}
|
2023-01-09 12:40:10 +00:00
|
|
|
<h4>Relays</h4>
|
|
|
|
<div className="flex f-col">
|
|
|
|
{Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
|
|
|
|
</div>
|
2023-01-19 11:14:41 +00:00
|
|
|
<div className="flex actions">
|
2023-01-09 12:40:10 +00:00
|
|
|
<div className="f-grow"></div>
|
|
|
|
<div className="btn" onClick={() => saveRelays()}>Save</div>
|
|
|
|
</div>
|
|
|
|
{addRelay()}
|
2023-01-09 11:00:23 +00:00
|
|
|
</div>
|
|
|
|
);
|
2023-01-19 11:14:41 +00:00
|
|
|
}
|