116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { FormattedMessage } from "react-intl";
|
|
import { hexToBech32, unwrap } from "@snort/shared";
|
|
|
|
import { useLogin } from "@/hooks/login";
|
|
import Copy from "@/element/copy";
|
|
import { NostrProviderDialog } from "@/element/nostr-provider-dialog";
|
|
import { useStreamProvider } from "@/hooks/stream-provider";
|
|
import { Login } from "..";
|
|
import { StatePill } from "@/element/state-pill";
|
|
import { NostrStreamProvider } from "@/providers";
|
|
import { StreamState } from "@/const";
|
|
import AsyncButton from "@/element/async-button";
|
|
|
|
const enum Tab {
|
|
Account,
|
|
Notifications,
|
|
}
|
|
|
|
export function SettingsPage() {
|
|
const navigate = useNavigate();
|
|
const login = useLogin();
|
|
const [tab, setTab] = useState(Tab.Account);
|
|
const providers = useStreamProvider();
|
|
|
|
useEffect(() => {
|
|
if (!login) {
|
|
navigate("/");
|
|
}
|
|
}, [login]);
|
|
|
|
function tabContent() {
|
|
switch (tab) {
|
|
case Tab.Account: {
|
|
return (
|
|
<>
|
|
<h1>
|
|
<FormattedMessage defaultMessage="Account" id="TwyMau" />
|
|
</h1>
|
|
{login?.pubkey && (
|
|
<div className="public-key">
|
|
<p>
|
|
<FormattedMessage defaultMessage="Logged in as" id="DZKuuP" />
|
|
</p>
|
|
<Copy text={hexToBech32("npub", login.pubkey)} />
|
|
</div>
|
|
)}
|
|
{login?.privateKey && (
|
|
<div className="private-key">
|
|
<p>
|
|
<FormattedMessage defaultMessage="Private key" id="Bep/gA" />
|
|
</p>
|
|
<Copy text={hexToBech32("nsec", login.privateKey)} />
|
|
</div>
|
|
)}
|
|
<h1>
|
|
<FormattedMessage defaultMessage="Theme" id="Pe0ogR" />
|
|
</h1>
|
|
<div>
|
|
<StatePill state={StreamState.Live} />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{["#7F006A", "#E206BF", "#7406E2", "#3F06E2", "#393939", "#ff563f", "#ff8d2b", "#34d2fe"].map(a => (
|
|
<div
|
|
className={`w-4 h-4 pointer${login?.color === a ? " border" : ""}`}
|
|
title={a}
|
|
style={{ backgroundColor: a }}
|
|
onClick={() => Login.setColor(a)}></div>
|
|
))}
|
|
</div>
|
|
<h1>
|
|
<FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
|
|
</h1>
|
|
<div className="flex flex-col gap-4">
|
|
<NostrProviderDialog
|
|
provider={unwrap(providers.find(a => a.name === "zap.stream")) as NostrStreamProvider}
|
|
showEndpoints={true}
|
|
showEditor={false}
|
|
showForwards={true}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function tabName(t: Tab) {
|
|
switch (t) {
|
|
case Tab.Account:
|
|
return <FormattedMessage defaultMessage="Account" id="TwyMau" />;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-2xl p-3 md:w-[700px] mx-auto w-full">
|
|
<div className="flex flex-col gap-2">
|
|
<h1>
|
|
<FormattedMessage defaultMessage="Settings" id="D3idYv" />
|
|
</h1>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex gap-2">
|
|
{[Tab.Account].map(t => (
|
|
<AsyncButton onClick={() => setTab(t)} className="rounded-xl px-3 py-2 bg-gray-2 hover:bg-gray-1">
|
|
{tabName(t)}
|
|
</AsyncButton>
|
|
))}
|
|
</div>
|
|
<div className="p-5 bg-gray-2 rounded-3xl flex flex-col gap-3">{tabContent()}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|