forked from Kieran/zap.stream
chore: formatting
This commit is contained in:
parent
eb58fa4d2e
commit
04cdc1e08f
@ -3,4 +3,4 @@ module.exports = {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
@ -9,7 +9,11 @@ import { StreamEditor, StreamEditorProps } from "./stream-editor";
|
||||
import Spinner from "./spinner";
|
||||
import AsyncButton from "./async-button";
|
||||
|
||||
export function NostrProviderDialog({ provider, showEndpoints, ...others }: { provider: StreamProvider, showEndpoints: boolean } & StreamEditorProps) {
|
||||
export function NostrProviderDialog({
|
||||
provider,
|
||||
showEndpoints,
|
||||
...others
|
||||
}: { provider: StreamProvider; showEndpoints: boolean } & StreamEditorProps) {
|
||||
const system = useContext(SnortContext);
|
||||
const [topup, setTopup] = useState(false);
|
||||
const [info, setInfo] = useState<StreamProviderInfo>();
|
||||
@ -119,73 +123,75 @@ export function NostrProviderDialog({ provider, showEndpoints, ...others }: { pr
|
||||
|
||||
function streamEndpoints() {
|
||||
if (!info) return;
|
||||
return <>
|
||||
{info.endpoints.length > 1 && (
|
||||
return (
|
||||
<>
|
||||
{info.endpoints.length > 1 && (
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Endpoint" id="ljmS5P" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{sortEndpoints(info.endpoints).map(a => (
|
||||
<span className={`pill${ep?.name === a.name ? " active" : ""}`} onClick={() => setEndpoint(a)}>
|
||||
{a.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Endpoint" id="ljmS5P" />
|
||||
<FormattedMessage defaultMessage="Server Url" id="5kx+2v" />
|
||||
</p>
|
||||
<div className="paper">
|
||||
<input type="text" value={ep?.url} disabled />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{sortEndpoints(info.endpoints).map(a => (
|
||||
<span className={`pill${ep?.name === a.name ? " active" : ""}`} onClick={() => setEndpoint(a)}>
|
||||
{a.name}
|
||||
</span>
|
||||
<div className="paper grow">
|
||||
<input type="password" value={ep?.key} disabled />
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => window.navigator.clipboard.writeText(ep?.key ?? "")}>
|
||||
<FormattedMessage defaultMessage="Copy" id="4l6vz1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Balance" id="H5+NAX" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="paper grow">
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount} sats"
|
||||
id="vrTOHJ"
|
||||
values={{ amount: info.balance?.toLocaleString() }}
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => setTopup(true)}>
|
||||
<FormattedMessage defaultMessage="Topup" id="nBCvvJ" />
|
||||
</button>
|
||||
</div>
|
||||
<small>
|
||||
<FormattedMessage defaultMessage="About {estimate}" id="Q3au2v" values={{ estimate: calcEstimate() }} />
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Resolutions" id="4uI538" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{ep?.capabilities?.map(a => (
|
||||
<span className="pill">{parseCapability(a)}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Server Url" id="5kx+2v" />
|
||||
</p>
|
||||
<div className="paper">
|
||||
<input type="text" value={ep?.url} disabled />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="paper grow">
|
||||
<input type="password" value={ep?.key} disabled />
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => window.navigator.clipboard.writeText(ep?.key ?? "")}>
|
||||
<FormattedMessage defaultMessage="Copy" id="4l6vz1" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Balance" id="H5+NAX" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<div className="paper grow">
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount} sats"
|
||||
id="vrTOHJ"
|
||||
values={{ amount: info.balance?.toLocaleString() }}
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => setTopup(true)}>
|
||||
<FormattedMessage defaultMessage="Topup" id="nBCvvJ" />
|
||||
</button>
|
||||
</div>
|
||||
<small>
|
||||
<FormattedMessage defaultMessage="About {estimate}" id="Q3au2v" values={{ estimate: calcEstimate() }} />
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage defaultMessage="Resolutions" id="4uI538" />
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{ep?.capabilities?.map(a => (
|
||||
<span className="pill">{parseCapability(a)}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
|
@ -9,7 +9,6 @@ import { useLogin } from "@/hooks/login";
|
||||
import Copy from "@/element/copy";
|
||||
import { NostrProviderDialog } from "@/element/nostr-provider-dialog";
|
||||
import { useStreamProvider } from "@/hooks/stream-provider";
|
||||
import { StreamProviders } from "@/providers";
|
||||
|
||||
const enum Tab {
|
||||
Account,
|
||||
@ -61,20 +60,24 @@ export function SettingsPage() {
|
||||
);
|
||||
}
|
||||
case Tab.Stream: {
|
||||
return <>
|
||||
<h1>
|
||||
<FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
|
||||
</h1>
|
||||
<NostrProviderDialog provider={unwrap(providers.find(a => a.name === "zap.stream"))} showEndpoints={true} />
|
||||
</>
|
||||
return (
|
||||
<>
|
||||
<h1>
|
||||
<FormattedMessage defaultMessage="Stream Key" id="LknBsU" />
|
||||
</h1>
|
||||
<NostrProviderDialog provider={unwrap(providers.find(a => a.name === "zap.stream"))} showEndpoints={true} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tabName(t: Tab) {
|
||||
switch (t) {
|
||||
case Tab.Account: return <FormattedMessage defaultMessage="Account" id="TwyMau" />;
|
||||
case Tab.Stream: return <FormattedMessage defaultMessage="Stream" id="uYw2LD" />
|
||||
case Tab.Account:
|
||||
return <FormattedMessage defaultMessage="Account" id="TwyMau" />;
|
||||
case Tab.Stream:
|
||||
return <FormattedMessage defaultMessage="Stream" id="uYw2LD" />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,10 +89,9 @@ export function SettingsPage() {
|
||||
</h1>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-2 tab-options">
|
||||
{[Tab.Account, Tab.Stream].map(t => <div onClick={() => setTab(t)}>
|
||||
{tabName(t)}
|
||||
</div>
|
||||
)}
|
||||
{[Tab.Account, Tab.Stream].map(t => (
|
||||
<div onClick={() => setTab(t)}>{tabName(t)}</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="tab-content">{tabContent()}</div>
|
||||
</div>
|
||||
|
@ -64,7 +64,11 @@ export function ZapAlerts({ link }: { link: NostrLink }) {
|
||||
}
|
||||
}, [zap?.id]);
|
||||
|
||||
return <div className="flex items-center flex-col gap-2 zap-alerts-widget">{zap && <ZapAlertItem key={zap.id} item={zap} />}</div>;
|
||||
return (
|
||||
<div className="flex items-center flex-col gap-2 zap-alerts-widget">
|
||||
{zap && <ZapAlertItem key={zap.id} item={zap} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ZapAlertItem({ item }: { item: ParsedZap }) {
|
||||
|
@ -146,4 +146,4 @@
|
||||
"y867Vs": "Volume",
|
||||
"yzKwBQ": "eg. nsec1xyz",
|
||||
"zVDHAu": "Zap Alert"
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user