feat: add basic settings page
This commit is contained in:
Roland Bewick
parent
7cba67e4c1
commit
afd3c9a232
@ -5,6 +5,7 @@
|
||||
"dependencies": {
|
||||
"@emoji-mart/data": "^1.1.2",
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@getalby/bitcoin-connect-react": "1.0.0",
|
||||
"@noble/curves": "^1.1.0",
|
||||
"@noble/hashes": "^1.3.1",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
|
||||
@ -88,5 +88,8 @@
|
||||
<symbol id="user-x" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M16.5 16L21.5 21M21.5 16L16.5 21M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</symbol>
|
||||
<symbol id="settings" viewBox="0 0 24 24" fill="none">
|
||||
<path fill-rule="evenodd" d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd" stroke="currentColor" />
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 21 KiB |
@ -5,9 +5,10 @@ import { Icon } from "./icon";
|
||||
export interface CopyProps {
|
||||
text: string;
|
||||
maxSize?: number;
|
||||
hideText?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
export default function Copy({ text, maxSize = 32, className }: CopyProps) {
|
||||
export default function Copy({ text, maxSize = 32, className, hideText }: CopyProps) {
|
||||
const { copy, copied } = useCopy();
|
||||
const sliceLength = maxSize / 2;
|
||||
const trimmed =
|
||||
@ -20,7 +21,7 @@ export default function Copy({ text, maxSize = 32, className }: CopyProps) {
|
||||
className={`copy${className ? ` ${className}` : ""}`}
|
||||
onClick={() => copy(text)}
|
||||
>
|
||||
<span className="body">{trimmed}</span>
|
||||
{!hideText && <span className="body">{trimmed}</span>}
|
||||
<span
|
||||
className="icon"
|
||||
style={{ color: copied ? "var(--success)" : "var(--highlight)" }}
|
||||
|
||||
@ -11,6 +11,7 @@ import Copy from "./copy";
|
||||
import { hexToBech32, openFile } from "utils";
|
||||
import { VoidApi } from "@void-cat/api";
|
||||
import { LoginType } from "login";
|
||||
import { bech32 } from "@scure/base";
|
||||
|
||||
enum Stage {
|
||||
Login = 0,
|
||||
@ -41,6 +42,26 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doLoginNsec() {
|
||||
try {
|
||||
const nsec = prompt("nsec");
|
||||
if (!nsec) {
|
||||
throw new Error("no nsec provided");
|
||||
}
|
||||
const {words} = bech32.decode(nsec, 5000);
|
||||
const data = new Uint8Array(bech32.fromWords(words));
|
||||
Login.loginWithPrivateKey(bytesToHex(data));
|
||||
close();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
if (e instanceof Error) {
|
||||
setError(e.message);
|
||||
} else {
|
||||
setError(e as string);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createAccount() {
|
||||
const newKey = bytesToHex(schnorr.utils.randomPrivateKey());
|
||||
@ -108,6 +129,13 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={doLoginNsec}
|
||||
>
|
||||
Enter Nsec (INSECURE)
|
||||
</button>
|
||||
{error && <b className="error">{error}</b>}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -17,6 +17,7 @@ import { LoginStore } from "login";
|
||||
import { StreamProvidersPage } from "pages/providers";
|
||||
import { defaultRelays } from "const";
|
||||
import { CatchAllRoutePage } from "pages/catch-all";
|
||||
import { SettingsPage } from "pages/settings-page";
|
||||
|
||||
export enum StreamState {
|
||||
Live = "live",
|
||||
@ -60,6 +61,10 @@ const router = createBrowserRouter([
|
||||
path: "/providers/:id?",
|
||||
element: <StreamProvidersPage />,
|
||||
},
|
||||
{
|
||||
path: "/settings",
|
||||
element: <SettingsPage />,
|
||||
},
|
||||
{
|
||||
path: "*",
|
||||
element: <CatchAllRoutePage />,
|
||||
|
||||
@ -48,6 +48,10 @@ export function LayoutPage() {
|
||||
<Icon name="user" size={24} />
|
||||
Profile
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate("/settings")}>
|
||||
<Icon name="settings" size={24} />
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => Login.logout()}>
|
||||
<Icon name="logout" size={24} />
|
||||
Logout
|
||||
|
||||
16
src/pages/settings-page.css
Normal file
16
src/pages/settings-page.css
Normal file
@ -0,0 +1,16 @@
|
||||
.profile-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.public-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.private-key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
36
src/pages/settings-page.tsx
Normal file
36
src/pages/settings-page.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
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";
|
||||
|
||||
export function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const login = useLogin();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!login) {
|
||||
|
||||
navigate("/");
|
||||
}
|
||||
}, [login])
|
||||
|
||||
|
||||
return (
|
||||
<div className="settings-page">
|
||||
<h1>Account</h1>
|
||||
{login?.pubkey && <div className="public-key">
|
||||
<p>Logged in as</p>
|
||||
<Copy text={login?.pubkey} maxSize={64} />
|
||||
</div>}
|
||||
{login?.privateKey && <div className="private-key">
|
||||
<p>Private key</p>
|
||||
<Copy text={login.privateKey} hideText />
|
||||
</div>}
|
||||
|
||||
<h1>Zaps</h1>
|
||||
<Button/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -78,6 +78,15 @@ const config = {
|
||||
exclude: /@babel(?:\/|\\{1,2})runtime/,
|
||||
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
|
||||
loader: require.resolve("source-map-loader"),
|
||||
options: {
|
||||
filterSourceMappingUrl: (url, resourcePath) => {
|
||||
// disable warning for missing @scure-bip39 sourcemaps
|
||||
if (/.*\/.yarn\/cache\/@scure-bip39.*/.test(resourcePath)) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/i,
|
||||
|
||||
166
yarn.lock
166
yarn.lock
@ -1761,6 +1761,38 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@getalby/bitcoin-connect-react@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@getalby/bitcoin-connect-react@npm:1.0.0"
|
||||
dependencies:
|
||||
"@getalby/lightning-wallet-connect": ^1.0.14
|
||||
peerDependencies:
|
||||
react: ^18.2.0
|
||||
checksum: a6cd01a07579b5bba0d92a596e3283f996f9446da50fa62852e5ced0418f219a65140f643eaf3f6853166587693fb347cd06485525f85e7cf53dfa254db9403a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@getalby/lightning-wallet-connect@npm:^1.0.14":
|
||||
version: 1.0.14
|
||||
resolution: "@getalby/lightning-wallet-connect@npm:1.0.14"
|
||||
dependencies:
|
||||
"@getalby/sdk": ^2.2.3
|
||||
lit: ^2.2.4
|
||||
zustand: ^4.4.1
|
||||
checksum: 4245bf5869492fcca1b22a5de312f2560e3b68a0b74b14bdd2dd403f6344c7c307035e8bfbf3132a204a122fd0169ab777dc3a66ab5200c4fd450183b72b9b8a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@getalby/sdk@npm:^2.2.3":
|
||||
version: 2.2.3
|
||||
resolution: "@getalby/sdk@npm:2.2.3"
|
||||
dependencies:
|
||||
crypto-js: ^4.1.1
|
||||
nostr-tools: 1.13.1
|
||||
checksum: 8753aaa9f6488db581278aadd9c8f705bc740dd7d87051d5441a9ac19a46d51d7987b7fd4712a52734a5577a823fcb42b7bf8240bef7ad10d0bc0a0116faa524
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@humanwhocodes/config-array@npm:^0.11.10":
|
||||
version: 0.11.10
|
||||
resolution: "@humanwhocodes/config-array@npm:0.11.10"
|
||||
@ -1905,7 +1937,23 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@noble/curves@npm:^1.0.0, @noble/curves@npm:^1.1.0":
|
||||
"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
|
||||
version: 1.1.1
|
||||
resolution: "@lit-labs/ssr-dom-shim@npm:1.1.1"
|
||||
checksum: 7a7add78e3ee570a7b987b9bf85e700b20d35d31c8b54cf4c8b2e3c8458ed4e2b0ff328706e5be7887f0ca8a02878c186e76609defb78f0d1b3c0e6b47c9f6ef
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
|
||||
version: 1.6.3
|
||||
resolution: "@lit/reactive-element@npm:1.6.3"
|
||||
dependencies:
|
||||
"@lit-labs/ssr-dom-shim": ^1.0.0
|
||||
checksum: 79b58631c38effeabad090070324431da8a22cf0ff665f5e4de35e4d791f984742b3d340c9c7fce996d1124a8da95febc582471b4c237236c770b1300b56ef6e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@noble/curves@npm:1.1.0, @noble/curves@npm:^1.0.0, @noble/curves@npm:^1.1.0, @noble/curves@npm:~1.1.0":
|
||||
version: 1.1.0
|
||||
resolution: "@noble/curves@npm:1.1.0"
|
||||
dependencies:
|
||||
@ -1921,6 +1969,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1":
|
||||
version: 1.3.2
|
||||
resolution: "@noble/hashes@npm:1.3.2"
|
||||
checksum: fe23536b436539d13f90e4b9be843cc63b1b17666a07634a2b1259dded6f490be3d050249e6af98076ea8f2ea0d56f578773c2197f2aa0eeaa5fba5bc18ba474
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@nodelib/fs.scandir@npm:2.1.5":
|
||||
version: 2.1.5
|
||||
resolution: "@nodelib/fs.scandir@npm:2.1.5"
|
||||
@ -2546,6 +2601,34 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@scure/base@npm:~1.1.0":
|
||||
version: 1.1.2
|
||||
resolution: "@scure/base@npm:1.1.2"
|
||||
checksum: f666b09dbd62ecb5fe6d0e7a629c8a86a972a47dc4f4555ebbbd7b09782b10a5f894fed9c3b8c74fd683b1588c064df079a44e9f695c075ccd98c30a8d3e91f7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@scure/bip32@npm:1.3.1":
|
||||
version: 1.3.1
|
||||
resolution: "@scure/bip32@npm:1.3.1"
|
||||
dependencies:
|
||||
"@noble/curves": ~1.1.0
|
||||
"@noble/hashes": ~1.3.1
|
||||
"@scure/base": ~1.1.0
|
||||
checksum: 394d65f77a40651eba21a5096da0f4233c3b50d422864751d373fcf142eeedb94a1149f9ab1dbb078086dab2d0bc27e2b1afec8321bf22d4403c7df2fea5bfe2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@scure/bip39@npm:1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "@scure/bip39@npm:1.2.1"
|
||||
dependencies:
|
||||
"@noble/hashes": ~1.3.0
|
||||
"@scure/base": ~1.1.0
|
||||
checksum: c5bd6f1328fdbeae2dcdd891825b1610225310e5e62a4942714db51066866e4f7bef242c7b06a1b9dcc8043a4a13412cf5c5df76d3b10aa9e36b82e9b6e3eeaa
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@sinclair/typebox@npm:^0.25.16":
|
||||
version: 0.25.24
|
||||
resolution: "@sinclair/typebox@npm:0.25.24"
|
||||
@ -4577,6 +4660,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"crypto-js@npm:^4.1.1":
|
||||
version: 4.1.1
|
||||
resolution: "crypto-js@npm:4.1.1"
|
||||
checksum: b3747c12ee3a7632fab3b3e171ea50f78b182545f0714f6d3e7e2858385f0f4101a15f2517e033802ce9d12ba50a391575ff4638c9de3dd9b2c4bc47768d5425
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"crypto-random-string@npm:^2.0.0":
|
||||
version: 2.0.0
|
||||
resolution: "crypto-random-string@npm:2.0.0"
|
||||
@ -7185,6 +7275,37 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lit-element@npm:^3.3.0":
|
||||
version: 3.3.3
|
||||
resolution: "lit-element@npm:3.3.3"
|
||||
dependencies:
|
||||
"@lit-labs/ssr-dom-shim": ^1.1.0
|
||||
"@lit/reactive-element": ^1.3.0
|
||||
lit-html: ^2.8.0
|
||||
checksum: 29a596fa556e231cce7246ca3e5687ad238f299b0cb374a0934d5e6fe9adf1436e031d4fbd21b280aabfc0e21a66e6c4b52da558a908df2566d09d960f3ca93d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lit-html@npm:^2.8.0":
|
||||
version: 2.8.0
|
||||
resolution: "lit-html@npm:2.8.0"
|
||||
dependencies:
|
||||
"@types/trusted-types": ^2.0.2
|
||||
checksum: 2d70df07248bcb2f502a3afb1e91d260735024fa669669ffb1417575aa39c3092779725ac1b90f5f39e4ce78c63f431f51176bc67f532389f0285a6991573255
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lit@npm:^2.2.4":
|
||||
version: 2.8.0
|
||||
resolution: "lit@npm:2.8.0"
|
||||
dependencies:
|
||||
"@lit/reactive-element": ^1.6.0
|
||||
lit-element: ^3.3.0
|
||||
lit-html: ^2.8.0
|
||||
checksum: 2480e733f7d022d3ecba91abc58a20968f0ca8f5fa30b3341ecf4bcf4845e674ad27b721a5ae53529cafc6ca603c015b80d0979ceb7a711e268ef20bb6bc7527
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"loader-runner@npm:^4.2.0":
|
||||
version: 4.3.0
|
||||
resolution: "loader-runner@npm:4.3.0"
|
||||
@ -8061,6 +8182,19 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"nostr-tools@npm:1.13.1":
|
||||
version: 1.13.1
|
||||
resolution: "nostr-tools@npm:1.13.1"
|
||||
dependencies:
|
||||
"@noble/curves": 1.1.0
|
||||
"@noble/hashes": 1.3.1
|
||||
"@scure/base": 1.1.1
|
||||
"@scure/bip32": 1.3.1
|
||||
"@scure/bip39": 1.2.1
|
||||
checksum: 49695f94b5d399a29c9d7173fa2927c24247e365a7b17586434c4b442b99b6a35b6b015c01736b12fcaaba5b88884e25c1af1367880111403ea0718db85d5467
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"npm-run-path@npm:^4.0.1":
|
||||
version: 4.0.1
|
||||
resolution: "npm-run-path@npm:4.0.1"
|
||||
@ -10009,6 +10143,7 @@ __metadata:
|
||||
"@emoji-mart/react": ^1.1.1
|
||||
"@formatjs/cli": ^6.0.1
|
||||
"@formatjs/ts-transformer": ^3.13.1
|
||||
"@getalby/bitcoin-connect-react": 1.0.0
|
||||
"@noble/curves": ^1.1.0
|
||||
"@noble/hashes": ^1.3.1
|
||||
"@radix-ui/react-collapsible": ^1.0.3
|
||||
@ -10832,6 +10967,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"use-sync-external-store@npm:1.2.0":
|
||||
version: 1.2.0
|
||||
resolution: "use-sync-external-store@npm:1.2.0"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 5c639e0f8da3521d605f59ce5be9e094ca772bd44a4ce7322b055a6f58eeed8dda3c94cabd90c7a41fb6fa852210092008afe48f7038792fd47501f33299116a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"usehooks-ts@npm:^2.9.1":
|
||||
version: 2.9.1
|
||||
resolution: "usehooks-ts@npm:2.9.1"
|
||||
@ -11548,3 +11692,23 @@ __metadata:
|
||||
checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"zustand@npm:^4.4.1":
|
||||
version: 4.4.1
|
||||
resolution: "zustand@npm:4.4.1"
|
||||
dependencies:
|
||||
use-sync-external-store: 1.2.0
|
||||
peerDependencies:
|
||||
"@types/react": ">=16.8"
|
||||
immer: ">=9.0"
|
||||
react: ">=16.8"
|
||||
peerDependenciesMeta:
|
||||
"@types/react":
|
||||
optional: true
|
||||
immer:
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
checksum: 80acd0fbf633782996642802c8692bbb80ae5c80a8dff4c501b88250acd5ccd468fbc6398bdce198475a25e3839c91385b81da921274f33ffb5c2d08c3eab400
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user