forked from Kieran/zap.stream
New settings page
This commit is contained in:
parent
3442ac6c10
commit
eddf9232d6
@ -65,6 +65,12 @@ a {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.f-col-mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.pill {
|
||||
background: #171717;
|
||||
padding: 4px 8px;
|
||||
@ -84,13 +90,14 @@ a {
|
||||
.g8 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.g12 {
|
||||
gap: 12px;
|
||||
}
|
||||
.g24 {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.g12 {
|
||||
gap: 12px;
|
||||
.g48 {
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.w-max {
|
||||
|
@ -3,16 +3,16 @@ import { useState } from "react";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Menu, MenuItem } from "@szhsin/react-menu";
|
||||
import { hexToBech32 } from "@snort/shared";
|
||||
|
||||
import { Icon } from "element/icon";
|
||||
import { useLogin, useLoginEvents } from "hooks/login";
|
||||
import { Profile } from "element/profile";
|
||||
import { NewStreamDialog } from "element/new-stream";
|
||||
import { LoginSignup } from "element/login-signup";
|
||||
import { Menu, MenuItem } from "@szhsin/react-menu";
|
||||
import { hexToBech32 } from "@snort/shared";
|
||||
import { Login } from "index";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
export function LayoutPage() {
|
||||
const navigate = useNavigate();
|
||||
|
@ -1,16 +1,34 @@
|
||||
.profile-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.settings-page {
|
||||
width: 753px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.public-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@media (max-width: 1020px) {
|
||||
.settings-page {
|
||||
padding: 0 24px;
|
||||
width: calc(100vw - 48px);
|
||||
margin: unset;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.private-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.settings-page .tab-content {
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
padding: 24px;
|
||||
border-radius: 24px;
|
||||
background: #171717;
|
||||
}
|
||||
|
||||
.settings-page .tab-options > div {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-page .tab-options > div:hover {
|
||||
border-radius: 8px;
|
||||
background: #171717;
|
||||
}
|
||||
|
@ -1,39 +1,80 @@
|
||||
import { useLogin } from "hooks/login";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "./settings-page.css";
|
||||
import React from "react";
|
||||
import { Button } from "@getalby/bitcoin-connect-react";
|
||||
import Copy from "element/copy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { Button as AlbyZapsButton } from "@getalby/bitcoin-connect-react";
|
||||
import { hexToBech32 } from "@snort/shared";
|
||||
|
||||
import { useLogin } from "hooks/login";
|
||||
import Copy from "element/copy";
|
||||
|
||||
const enum Tab {
|
||||
Account,
|
||||
Notifications
|
||||
}
|
||||
|
||||
export function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const login = useLogin();
|
||||
const [tab, setTab] = useState(Tab.Account);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (!login) {
|
||||
navigate("/");
|
||||
}
|
||||
}, [login]);
|
||||
|
||||
function tabContent() {
|
||||
switch (tab) {
|
||||
case Tab.Account: {
|
||||
return (
|
||||
<div className="settings-page">
|
||||
<h1>Account</h1>
|
||||
<>
|
||||
<h1>
|
||||
<FormattedMessage defaultMessage="Account" />
|
||||
</h1>
|
||||
{login?.pubkey && (
|
||||
<div className="public-key">
|
||||
<p>Logged in as</p>
|
||||
<Copy text={login?.pubkey} maxSize={64} />
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Logged in as" />
|
||||
</p>
|
||||
<Copy text={hexToBech32("npub", login.pubkey)} />
|
||||
</div>
|
||||
)}
|
||||
{login?.privateKey && (
|
||||
<div className="private-key">
|
||||
<p>Private key</p>
|
||||
<Copy text={hexToBech32("nsec", login.privateKey)} hideText />
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Private key" />
|
||||
</p>
|
||||
<Copy text={hexToBech32("nsec", login.privateKey)} />
|
||||
</div>
|
||||
)}
|
||||
<h1>
|
||||
<FormattedMessage defaultMessage="Zaps" />
|
||||
</h1>
|
||||
<AlbyZapsButton />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="settings-page">
|
||||
<div className="flex f-col g48">
|
||||
<h1>
|
||||
<FormattedMessage defaultMessage="Settings" />
|
||||
</h1>
|
||||
<div className="flex g24 f-col-mobile">
|
||||
<div className="flex f-col g24 tab-options">
|
||||
<div onClick={() => setTab(Tab.Account)}>
|
||||
<FormattedMessage defaultMessage="Account" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-content">
|
||||
{tabContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Zaps</h1>
|
||||
<Button />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user