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