78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import "./settings-page.css";
|
|
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);
|
|
|
|
useEffect(() => {
|
|
if (!login) {
|
|
navigate("/");
|
|
}
|
|
}, [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 (
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|