feat: supporting hash of github actions cache
This commit is contained in:
kogeletey
@@ -25,6 +25,7 @@
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-alert-dialog": "^1.0.5",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
@@ -33,9 +34,9 @@
|
||||
"@radix-ui/react-select": "^2.0.0",
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@tanstack/react-query": "^5.17.15",
|
||||
"@tanstack/react-query": "^5.17.19",
|
||||
"framer-motion": "^10.18.0",
|
||||
"jotai": "^2.6.2",
|
||||
"jotai": "^2.6.3",
|
||||
"minidenticons": "^4.2.0",
|
||||
"nanoid": "^5.0.4",
|
||||
"nostr-fetch": "^0.15.0",
|
||||
@@ -45,15 +46,15 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.49.3",
|
||||
"react-router-dom": "^6.21.3",
|
||||
"smol-toml": "^1.1.3",
|
||||
"smol-toml": "^1.1.4",
|
||||
"sonner": "^1.3.1",
|
||||
"virtua": "^0.20.5"
|
||||
"virtua": "^0.21.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@lume/tailwindcss": "workspace:^",
|
||||
"@lume/tsconfig": "workspace:^",
|
||||
"@lume/types": "workspace:^",
|
||||
"@types/node": "^20.11.5",
|
||||
"@types/node": "^20.11.6",
|
||||
"@types/react": "^18.2.48",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
@@ -63,7 +64,7 @@
|
||||
"postcss": "^8.4.33",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.11",
|
||||
"vite": "^5.0.12",
|
||||
"vite-plugin-top-level-await": "^1.4.1",
|
||||
"vite-tsconfig-paths": "^4.3.1"
|
||||
}
|
||||
|
||||
@@ -12,6 +12,10 @@
|
||||
.prose :where(iframe):not(:where([class~='not-prose'] *)) {
|
||||
@apply w-full h-auto mx-auto aspect-video;
|
||||
}
|
||||
|
||||
.shadow-toolbar {
|
||||
box-shadow: 0 0 #0000,0 0 #0000,0 8px 24px 0 rgba(0,0,0,.2),0 2px 8px 0 rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.2),inset 0 0 0 2px hsla(0,0%,100%,.14)
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@@ -207,9 +207,6 @@ export default function Router() {
|
||||
},
|
||||
{
|
||||
path: "create",
|
||||
loader: async () => {
|
||||
return await ark.getOAuthServices();
|
||||
},
|
||||
async lazy() {
|
||||
const { CreateAccountScreen } = await import(
|
||||
"./routes/auth/create"
|
||||
@@ -217,6 +214,27 @@ export default function Router() {
|
||||
return { Component: CreateAccountScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "create-keys",
|
||||
async lazy() {
|
||||
const { CreateAccountKeys } = await import(
|
||||
"./routes/auth/create-keys"
|
||||
);
|
||||
return { Component: CreateAccountKeys };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "create-address",
|
||||
loader: async () => {
|
||||
return await ark.getOAuthServices();
|
||||
},
|
||||
async lazy() {
|
||||
const { CreateAccountAddress } = await import(
|
||||
"./routes/auth/create-address"
|
||||
);
|
||||
return { Component: CreateAccountAddress };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "login",
|
||||
async lazy() {
|
||||
|
||||
263
apps/desktop/src/routes/auth/create-address.tsx
Normal file
263
apps/desktop/src/routes/auth/create-address.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import { useArk } from "@lume/ark";
|
||||
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { onboardingAtom } from "@lume/utils";
|
||||
import NDK, {
|
||||
NDKEvent,
|
||||
NDKKind,
|
||||
NDKNip46Signer,
|
||||
NDKPrivateKeySigner,
|
||||
} from "@nostr-dev-kit/ndk";
|
||||
import * as Select from "@radix-ui/react-select";
|
||||
import { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { Window } from "@tauri-apps/api/window";
|
||||
import { useSetAtom } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useLoaderData, useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const Item = ({ event }: { event: NDKEvent }) => {
|
||||
const domain = JSON.parse(event.content).nip05.replace("_@", "");
|
||||
|
||||
return (
|
||||
<Select.Item
|
||||
value={event.id}
|
||||
className="relative flex items-center pr-10 leading-none rounded-md select-none text-neutral-100 rounded-mg h-9 pl-7"
|
||||
>
|
||||
<Select.ItemText>@{domain}</Select.ItemText>
|
||||
<Select.ItemIndicator className="absolute left-0 inline-flex items-center justify-center transform h-7">
|
||||
<CheckIcon className="size-4" />
|
||||
</Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export function CreateAccountAddress() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
const services = useLoaderData() as NDKEvent[];
|
||||
const setOnboarding = useSetAtom(onboardingAtom);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
||||
const [loading, setIsLoading] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { isValid },
|
||||
} = useForm();
|
||||
|
||||
const getDomainName = (id: string) => {
|
||||
const event = services.find((ev) => ev.id === id);
|
||||
return JSON.parse(event.content).nip05.replace("_@", "") as string;
|
||||
};
|
||||
|
||||
const onSubmit = async (data: { username: string; email: string }) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const domain = getDomainName(serviceId);
|
||||
const service = services.find((ev) => ev.id === serviceId);
|
||||
|
||||
// generate ndk for nsecbunker
|
||||
const localSigner = NDKPrivateKeySigner.generate();
|
||||
const bunker = new NDK({
|
||||
explicitRelayUrls: [
|
||||
"wss://relay.nsecbunker.com/",
|
||||
"wss://nostr.vulpem.com/",
|
||||
],
|
||||
});
|
||||
await bunker.connect(2000);
|
||||
|
||||
// generate tmp remote singer for create account
|
||||
const remoteSigner = new NDKNip46Signer(
|
||||
bunker,
|
||||
service.pubkey,
|
||||
localSigner,
|
||||
);
|
||||
|
||||
// handle auth url request
|
||||
let unlisten: UnlistenFn;
|
||||
let authWindow: Window;
|
||||
let account: string = undefined;
|
||||
|
||||
remoteSigner.addListener("authUrl", async (authUrl: string) => {
|
||||
authWindow = new Window(`auth-${serviceId}`, {
|
||||
url: authUrl,
|
||||
title: domain,
|
||||
titleBarStyle: "overlay",
|
||||
width: 600,
|
||||
height: 650,
|
||||
center: true,
|
||||
closable: false,
|
||||
});
|
||||
unlisten = await authWindow.onCloseRequested(() => {
|
||||
if (!account) {
|
||||
setIsLoading(false);
|
||||
unlisten();
|
||||
|
||||
return authWindow.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// create new account
|
||||
account = await remoteSigner.createAccount(
|
||||
data.username,
|
||||
domain,
|
||||
data.email,
|
||||
);
|
||||
|
||||
if (!account) {
|
||||
unlisten();
|
||||
setIsLoading(false);
|
||||
|
||||
authWindow.close();
|
||||
|
||||
return toast.error("Failed to create new account, try again later");
|
||||
}
|
||||
|
||||
unlisten();
|
||||
authWindow.close();
|
||||
|
||||
// add account to storage
|
||||
await storage.createSetting("nsecbunker", "1");
|
||||
const newAccount = await storage.createAccount({
|
||||
pubkey: account,
|
||||
privkey: localSigner.privateKey,
|
||||
});
|
||||
ark.account = newAccount;
|
||||
|
||||
// get final signer with newly created account
|
||||
const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
|
||||
await finalSigner.blockUntilReady();
|
||||
|
||||
// update main ndk instance signer
|
||||
ark.updateNostrSigner({ signer: finalSigner });
|
||||
|
||||
// remove default nsecbunker profile and contact list
|
||||
// await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
|
||||
await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
|
||||
|
||||
setIsLoading(false);
|
||||
setOnboarding({ open: true, newUser: true });
|
||||
|
||||
return navigate("/auth/onboarding", { replace: true });
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
toast.error(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center justify-center w-full h-full">
|
||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
Let's set up your account on Nostr
|
||||
</h1>
|
||||
</div>
|
||||
{!services ? (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-3 mb-0"
|
||||
>
|
||||
<div className="flex flex-col gap-6 p-5 bg-neutral-950 rounded-2xl">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="text-sm font-semibold uppercase text-neutral-600"
|
||||
>
|
||||
Username *
|
||||
</label>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
|
||||
<input
|
||||
type={"text"}
|
||||
{...register("username", {
|
||||
required: true,
|
||||
minLength: 1,
|
||||
})}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="alice"
|
||||
className="flex-1 min-w-0 text-xl bg-transparent border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-14 ring-0 placeholder:text-neutral-600"
|
||||
/>
|
||||
<Select.Root value={serviceId} onValueChange={setServiceId}>
|
||||
<Select.Trigger className="inline-flex items-center justify-end gap-2 pr-3 text-xl font-semibold text-blue-500 w-max shrink-0">
|
||||
<Select.Value>@{getDomainName(serviceId)}</Select.Value>
|
||||
<Select.Icon>
|
||||
<ChevronDownIcon className="size-5" />
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content className="rounded-lg border border-white/20 bg-white/10 backdrop-blur-xl">
|
||||
<Select.Viewport className="p-3">
|
||||
<Select.Group>
|
||||
<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
|
||||
Choose a Provider
|
||||
</Select.Label>
|
||||
{services.map((service) => (
|
||||
<Item key={service.id} event={service} />
|
||||
))}
|
||||
</Select.Group>
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-600">
|
||||
Use to login to Lume and other Nostr apps. You can choose
|
||||
provider you trust to manage your account
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="text-sm font-semibold uppercase text-neutral-600"
|
||||
>
|
||||
Backup Email (optional)
|
||||
</label>
|
||||
<input
|
||||
type={"email"}
|
||||
{...register("email", { required: false })}
|
||||
spellCheck={false}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-600">
|
||||
Use for recover your account if you lose your password
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid}
|
||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Continue"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
186
apps/desktop/src/routes/auth/create-keys.tsx
Normal file
186
apps/desktop/src/routes/auth/create-keys.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import { useArk } from "@lume/ark";
|
||||
import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { onboardingAtom } from "@lume/utils";
|
||||
import { NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
|
||||
import * as Checkbox from "@radix-ui/react-checkbox";
|
||||
import { desktopDir } from "@tauri-apps/api/path";
|
||||
import { save } from "@tauri-apps/plugin-dialog";
|
||||
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { useSetAtom } from "jotai";
|
||||
import { nanoid } from "nanoid";
|
||||
import { getPublicKey, nip19 } from "nostr-tools";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function CreateAccountKeys() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
const setOnboarding = useSetAtom(onboardingAtom);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [key, setKey] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const privkey = nip19.decode(key).data as string;
|
||||
const signer = new NDKPrivateKeySigner(privkey);
|
||||
const pubkey = getPublicKey(privkey);
|
||||
|
||||
ark.updateNostrSigner({ signer });
|
||||
|
||||
const downloadPath = await desktopDir();
|
||||
const fileName = `nostr_keys_${nanoid(4)}.txt`;
|
||||
const filePath = await save({
|
||||
defaultPath: `${downloadPath}/${fileName}`,
|
||||
});
|
||||
|
||||
if (!filePath) {
|
||||
return toast.info("You need to save account keys before continue.");
|
||||
}
|
||||
|
||||
await writeTextFile(
|
||||
filePath,
|
||||
`Nostr Account\nGenerated by Lume (lume.nu)\n---\nPrivate key: ${key}`,
|
||||
);
|
||||
|
||||
const newAccount = await storage.createAccount({
|
||||
pubkey: pubkey,
|
||||
privkey: privkey,
|
||||
});
|
||||
ark.account = newAccount;
|
||||
|
||||
setLoading(false);
|
||||
setOnboarding({ open: true, newUser: true });
|
||||
|
||||
return navigate("/auth/onboarding", { replace: true });
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
toast.error(String(e));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const privkey = NDKPrivateKeySigner.generate().privateKey;
|
||||
setKey(nip19.nsecEncode(privkey));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center justify-center w-full h-full">
|
||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
This is your new Account Key
|
||||
</h1>
|
||||
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
||||
Keep your key in safe place. If you lose this key, you will lose
|
||||
access to your account.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 mb-0">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="relative">
|
||||
<input
|
||||
readOnly
|
||||
value={key}
|
||||
type={showKey ? "text" : "password"}
|
||||
className="pl-3 pr-14 w-full resize-none text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowKey((state) => !state)}
|
||||
className="absolute right-2 top-2 size-10 inline-flex items-center justify-center rounded-lg text-white bg-neutral-800 hover:bg-neutral-700"
|
||||
>
|
||||
{showKey ? (
|
||||
<EyeOnIcon className="size-5" />
|
||||
) : (
|
||||
<EyeOffIcon className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox.Root
|
||||
checked={confirm.c1}
|
||||
onCheckedChange={() =>
|
||||
setConfirm((state) => ({ ...state, c1: !state.c1 }))
|
||||
}
|
||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
||||
id="confirm1"
|
||||
>
|
||||
<Checkbox.Indicator className="text-blue-500">
|
||||
<CheckIcon className="size-4" />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Root>
|
||||
<label
|
||||
className="text-sm leading-none text-neutral-500"
|
||||
htmlFor="confirm1"
|
||||
>
|
||||
I understand the risk of lost private key.
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox.Root
|
||||
checked={confirm.c2}
|
||||
onCheckedChange={() =>
|
||||
setConfirm((state) => ({ ...state, c2: !state.c2 }))
|
||||
}
|
||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
||||
id="confirm2"
|
||||
>
|
||||
<Checkbox.Indicator className="text-blue-500">
|
||||
<CheckIcon className="size-4" />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Root>
|
||||
<label
|
||||
className="text-sm leading-none text-neutral-500"
|
||||
htmlFor="confirm2"
|
||||
>
|
||||
I will make sure keep it safe and not sharing with anyone.
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox.Root
|
||||
checked={confirm.c3}
|
||||
onCheckedChange={() =>
|
||||
setConfirm((state) => ({ ...state, c3: !state.c3 }))
|
||||
}
|
||||
className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-900 outline-none"
|
||||
id="confirm3"
|
||||
>
|
||||
<Checkbox.Indicator className="text-blue-500">
|
||||
<CheckIcon className="size-4" />
|
||||
</Checkbox.Indicator>
|
||||
</Checkbox.Root>
|
||||
<label
|
||||
className="text-sm leading-none text-neutral-500"
|
||||
htmlFor="confirm3"
|
||||
>
|
||||
I understand I cannot recover private key.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Save key & Continue"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,192 +1,21 @@
|
||||
import { useArk } from "@lume/ark";
|
||||
import { CheckIcon, ChevronDownIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { onboardingAtom } from "@lume/utils";
|
||||
import NDK, {
|
||||
NDKEvent,
|
||||
NDKKind,
|
||||
NDKNip46Signer,
|
||||
NDKPrivateKeySigner,
|
||||
} from "@nostr-dev-kit/ndk";
|
||||
import * as Select from "@radix-ui/react-select";
|
||||
import { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { desktopDir } from "@tauri-apps/api/path";
|
||||
import { Window } from "@tauri-apps/api/window";
|
||||
import { save } from "@tauri-apps/plugin-dialog";
|
||||
import { writeTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { useSetAtom } from "jotai";
|
||||
import { nanoid } from "nanoid";
|
||||
import { getPublicKey, nip19 } from "nostr-tools";
|
||||
import { LoaderIcon } from "@lume/icons";
|
||||
import { cn } from "@lume/utils";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useLoaderData, useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const Item = ({ event }: { event: NDKEvent }) => {
|
||||
const domain = JSON.parse(event.content).nip05.replace("_@", "");
|
||||
|
||||
return (
|
||||
<Select.Item
|
||||
value={event.id}
|
||||
className="relative flex items-center pr-10 leading-none rounded-md select-none text-neutral-100 rounded-mg h-9 pl-7"
|
||||
>
|
||||
<Select.ItemText>@{domain}</Select.ItemText>
|
||||
<Select.ItemIndicator className="absolute left-0 inline-flex items-center justify-center transform h-7">
|
||||
<CheckIcon className="size-4" />
|
||||
</Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
);
|
||||
};
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
export function CreateAccountScreen() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
const services = useLoaderData() as NDKEvent[];
|
||||
const setOnboarding = useSetAtom(onboardingAtom);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [serviceId, setServiceId] = useState(services?.[0]?.id);
|
||||
const [loading, setIsLoading] = useState(false);
|
||||
const [method, setMethod] = useState<"self" | "managed">("self");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { isValid },
|
||||
} = useForm();
|
||||
const next = () => {
|
||||
setLoading(true);
|
||||
|
||||
const getDomainName = (id: string) => {
|
||||
const event = services.find((ev) => ev.id === id);
|
||||
return JSON.parse(event.content).nip05.replace("_@", "") as string;
|
||||
};
|
||||
|
||||
const generateNostrKeys = async () => {
|
||||
const signer = NDKPrivateKeySigner.generate();
|
||||
const pubkey = getPublicKey(signer.privateKey);
|
||||
|
||||
const npub = nip19.npubEncode(pubkey);
|
||||
const nsec = nip19.nsecEncode(signer.privateKey);
|
||||
|
||||
ark.updateNostrSigner({ signer });
|
||||
|
||||
const downloadPath = await desktopDir();
|
||||
const fileName = `nostr_keys_${nanoid(4)}.txt`;
|
||||
const filePath = await save({
|
||||
defaultPath: `${downloadPath}/${fileName}`,
|
||||
});
|
||||
|
||||
if (!filePath) {
|
||||
return toast.info("You need to save account keys before continue.");
|
||||
}
|
||||
|
||||
await writeTextFile(
|
||||
filePath,
|
||||
`Nostr Account\nGenerated by Lume (lume.nu)\n---\nPublic key: ${npub}\nPrivate key: ${nsec}`,
|
||||
);
|
||||
|
||||
await storage.createAccount({
|
||||
pubkey: pubkey,
|
||||
privkey: signer.privateKey,
|
||||
});
|
||||
|
||||
setOnboarding({ open: true, newUser: true });
|
||||
|
||||
return navigate("/auth/onboarding", { replace: true });
|
||||
};
|
||||
|
||||
const onSubmit = async (data: { username: string; email: string }) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const domain = getDomainName(serviceId);
|
||||
const service = services.find((ev) => ev.id === serviceId);
|
||||
|
||||
// generate ndk for nsecbunker
|
||||
const localSigner = NDKPrivateKeySigner.generate();
|
||||
const bunker = new NDK({
|
||||
explicitRelayUrls: [
|
||||
"wss://relay.nsecbunker.com/",
|
||||
"wss://nostr.vulpem.com/",
|
||||
],
|
||||
});
|
||||
await bunker.connect(2000);
|
||||
|
||||
// generate tmp remote singer for create account
|
||||
const remoteSigner = new NDKNip46Signer(
|
||||
bunker,
|
||||
service.pubkey,
|
||||
localSigner,
|
||||
);
|
||||
|
||||
// handle auth url request
|
||||
let unlisten: UnlistenFn;
|
||||
let authWindow: Window;
|
||||
let account: string = undefined;
|
||||
|
||||
remoteSigner.addListener("authUrl", async (authUrl: string) => {
|
||||
authWindow = new Window(`auth-${serviceId}`, {
|
||||
url: authUrl,
|
||||
title: domain,
|
||||
titleBarStyle: "overlay",
|
||||
width: 600,
|
||||
height: 650,
|
||||
center: true,
|
||||
closable: false,
|
||||
});
|
||||
unlisten = await authWindow.onCloseRequested(() => {
|
||||
if (!account) {
|
||||
setIsLoading(false);
|
||||
unlisten();
|
||||
|
||||
return authWindow.close();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// create new account
|
||||
account = await remoteSigner.createAccount(
|
||||
data.username,
|
||||
domain,
|
||||
data.email,
|
||||
);
|
||||
|
||||
if (!account) {
|
||||
unlisten();
|
||||
setIsLoading(false);
|
||||
|
||||
authWindow.close();
|
||||
|
||||
return toast.error("Failed to create new account, try again later");
|
||||
}
|
||||
|
||||
unlisten();
|
||||
authWindow.close();
|
||||
|
||||
// add account to storage
|
||||
await storage.createSetting("nsecbunker", "1");
|
||||
const dbAccount = await storage.createAccount({
|
||||
pubkey: account,
|
||||
privkey: localSigner.privateKey,
|
||||
});
|
||||
ark.account = dbAccount;
|
||||
|
||||
// get final signer with newly created account
|
||||
const finalSigner = new NDKNip46Signer(bunker, account, localSigner);
|
||||
await finalSigner.blockUntilReady();
|
||||
|
||||
// update main ndk instance signer
|
||||
ark.updateNostrSigner({ signer: finalSigner });
|
||||
|
||||
// remove default nsecbunker profile and contact list
|
||||
// await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
|
||||
await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
|
||||
|
||||
setIsLoading(false);
|
||||
setOnboarding({ open: true, newUser: true });
|
||||
|
||||
return navigate("/auth/onboarding", { replace: true });
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
toast.error(String(e));
|
||||
if (method === "self") {
|
||||
navigate("/auth/create-keys");
|
||||
} else {
|
||||
navigate("/auth/create-address");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -194,148 +23,50 @@ export function CreateAccountScreen() {
|
||||
<div className="relative flex items-center justify-center w-full h-full">
|
||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
Let's get you set up on Nostr.
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold">Let's Get Started</h1>
|
||||
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
|
||||
Choose one of methods below to create your account
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMethod("self")}
|
||||
className={cn(
|
||||
"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
|
||||
method === "self" ? "ring-1 ring-teal-500" : "",
|
||||
)}
|
||||
>
|
||||
<p className="font-semibold">Self-Managed</p>
|
||||
<p className="text-sm font-medium text-neutral-500">
|
||||
You create your keys and keep them safe.
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMethod("managed")}
|
||||
className={cn(
|
||||
"flex flex-col items-start px-4 py-3.5 bg-neutral-900 rounded-xl hover:bg-neutral-800",
|
||||
method === "managed" ? "ring-1 ring-teal-500" : "",
|
||||
)}
|
||||
>
|
||||
<p className="font-semibold">Managed by Provider</p>
|
||||
<p className="text-sm font-medium text-neutral-500">
|
||||
A 3rd party provider will handle your sign in keys for you.
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={next}
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Continue"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{!services ? (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-3 mb-0"
|
||||
>
|
||||
<div className="flex flex-col gap-6 p-5 bg-neutral-950 rounded-2xl">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="text-sm font-semibold uppercase text-neutral-600"
|
||||
>
|
||||
Username *
|
||||
</label>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
|
||||
<input
|
||||
type={"text"}
|
||||
{...register("username", {
|
||||
required: true,
|
||||
minLength: 1,
|
||||
})}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="alice"
|
||||
className="flex-1 min-w-0 text-xl bg-transparent border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-14 ring-0 placeholder:text-neutral-600"
|
||||
/>
|
||||
<Select.Root
|
||||
value={serviceId}
|
||||
onValueChange={setServiceId}
|
||||
>
|
||||
<Select.Trigger className="inline-flex items-center justify-end gap-2 pr-3 text-xl font-semibold text-blue-500 w-max shrink-0">
|
||||
<Select.Value>
|
||||
@{getDomainName(serviceId)}
|
||||
</Select.Value>
|
||||
<Select.Icon>
|
||||
<ChevronDownIcon className="size-5" />
|
||||
</Select.Icon>
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content className="rounded-lg border border-white/20 bg-white/10 backdrop-blur-xl">
|
||||
<Select.Viewport className="p-3">
|
||||
<Select.Group>
|
||||
<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
|
||||
Choose a Provider
|
||||
</Select.Label>
|
||||
{services.map((service) => (
|
||||
<Item key={service.id} event={service} />
|
||||
))}
|
||||
</Select.Group>
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-600">
|
||||
Use to login to Lume and other Nostr apps. You can choose
|
||||
provider you trust to manage your account
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="text-sm font-semibold uppercase text-neutral-600"
|
||||
>
|
||||
Backup Email (optional)
|
||||
</label>
|
||||
<input
|
||||
type={"email"}
|
||||
{...register("email", { required: false })}
|
||||
spellCheck={false}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="px-3 text-xl border-transparent rounded-xl h-14 bg-neutral-900 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-800"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-600">
|
||||
Use for recover your account if you lose your password
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid}
|
||||
className="inline-flex items-center justify-center w-full text-lg h-12 font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Create Account"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-neutral-900" />
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-2 font-medium bg-black text-neutral-500">
|
||||
Or manage your own keys
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="mx-auto text-xs font-medium bg-black text-neutral-600">
|
||||
Mostly compatible with other Nostr clients
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={generateNostrKeys}
|
||||
className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
||||
>
|
||||
Generate Nostr Keys
|
||||
</button>
|
||||
<p className="text-sm text-center text-neutral-500">
|
||||
If you are using this option, please make sure keep your keys
|
||||
in safe place. You{" "}
|
||||
<span className="text-red-600">cannot recover</span> if it
|
||||
lost, all your data will be{" "}
|
||||
<span className="text-red-600">lost forever.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -130,7 +130,7 @@ export function LoginWithOAuth() {
|
||||
<div className="relative flex items-center justify-center w-full h-full">
|
||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">Enter your NIP-05 address</h1>
|
||||
<h1 className="text-2xl font-semibold">Enter your Nostr Address</h1>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<form
|
||||
|
||||
@@ -5,9 +5,7 @@ export function LoginScreen() {
|
||||
<div className="relative flex items-center justify-center w-full h-full">
|
||||
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
Continue your experience on Nostr
|
||||
</h1>
|
||||
<h1 className="text-2xl font-semibold">Welcome back, anon!</h1>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -15,13 +13,13 @@ export function LoginScreen() {
|
||||
to="/auth/login-oauth"
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
||||
>
|
||||
Login with Address
|
||||
Login with Nostr Address
|
||||
</Link>
|
||||
<Link
|
||||
to="/auth/login-nsecbunker"
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
||||
>
|
||||
Login with nsecbunker
|
||||
Login with nsecBunker
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
@@ -31,7 +29,7 @@ export function LoginScreen() {
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-2 font-medium bg-black text-neutral-600">
|
||||
Or (Not recommended)
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,8 +41,10 @@ export function LoginScreen() {
|
||||
Login with Private Key
|
||||
</Link>
|
||||
<p className="text-sm text-center text-neutral-500">
|
||||
Lume will store your Private Key in{" "}
|
||||
<span className="text-teal-600">OS Secure Storage</span>
|
||||
Lume will put your Private Key in{" "}
|
||||
<span className="text-teal-600">Secure Storage</span> depended
|
||||
on your OS Platform. It will be secured by Password or Biometric
|
||||
ID
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,7 @@ import { useArk } from "@lume/ark";
|
||||
import { InfoIcon, LoaderIcon } from "@lume/icons";
|
||||
import { useStorage } from "@lume/storage";
|
||||
import { TranslateRegisterModal } from "@lume/ui";
|
||||
import { FETCH_LIMIT } from "@lume/utils";
|
||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||
import * as Switch from "@radix-ui/react-switch";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
isPermissionGranted,
|
||||
requestPermission,
|
||||
@@ -17,7 +14,6 @@ import { toast } from "sonner";
|
||||
export function OnboardingScreen() {
|
||||
const ark = useArk();
|
||||
const storage = useStorage();
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -61,32 +57,7 @@ export function OnboardingScreen() {
|
||||
// get account contacts
|
||||
await ark.getUserContacts();
|
||||
|
||||
// refetch newsfeed
|
||||
await queryClient.prefetchInfiniteQuery({
|
||||
queryKey: ["timeline-9999"],
|
||||
initialPageParam: 0,
|
||||
queryFn: async ({
|
||||
signal,
|
||||
pageParam,
|
||||
}: {
|
||||
signal: AbortSignal;
|
||||
pageParam: number;
|
||||
}) => {
|
||||
const events = await ark.getInfiniteEvents({
|
||||
filter: {
|
||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||
authors: ark.account.contacts,
|
||||
},
|
||||
limit: FETCH_LIMIT,
|
||||
pageParam,
|
||||
signal,
|
||||
});
|
||||
|
||||
return events;
|
||||
},
|
||||
});
|
||||
|
||||
navigate("/");
|
||||
navigate("/", { replace: true });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -117,7 +88,7 @@ export function OnboardingScreen() {
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full items-center justify-center">
|
||||
<div className="mx-auto flex w-full max-w-md flex-col gap-10">
|
||||
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
|
||||
<div className="flex flex-col gap-1 text-center items-center">
|
||||
<h1 className="text-2xl font-semibold">
|
||||
You're almost ready to use Lume.
|
||||
@@ -194,7 +165,7 @@ export function OnboardingScreen() {
|
||||
</div>
|
||||
<div className="relative flex justify-center">
|
||||
<span className="px-2 text-sm font-medium bg-neutral-950 text-neutral-600">
|
||||
Not have API ?
|
||||
Don't have an API key?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
import { LoaderIcon } from "@lume/icons";
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function WelcomeScreen() {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const gotoCreateAccount = () => {
|
||||
setLoading(true);
|
||||
navigate("/auth/create");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-between w-full h-full">
|
||||
<div />
|
||||
@@ -29,17 +19,12 @@ export function WelcomeScreen() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
|
||||
<button
|
||||
type="button"
|
||||
onClick={gotoCreateAccount}
|
||||
<Link
|
||||
to="/auth/create"
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
) : (
|
||||
"Create New Account"
|
||||
)}
|
||||
</button>
|
||||
Join Nostr
|
||||
</Link>
|
||||
<Link
|
||||
to="/auth/login"
|
||||
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
|
||||
@@ -49,7 +34,7 @@ export function WelcomeScreen() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center h-11">
|
||||
<p className="text-neutral-800">
|
||||
<p className="text-neutral-700">
|
||||
Before joining Nostr, you can take time to learn more about Nostr{" "}
|
||||
<Link
|
||||
to="https://nostr.com"
|
||||
|
||||
@@ -10,7 +10,7 @@ import { useColumnContext } from "@lume/ark";
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
NewColumnIcon,
|
||||
PlusIcon,
|
||||
PlusSquareIcon,
|
||||
} from "@lume/icons";
|
||||
import { IColumn } from "@lume/types";
|
||||
@@ -96,15 +96,15 @@ export function HomeScreen() {
|
||||
content: "",
|
||||
})
|
||||
}
|
||||
className="size-16 inline-flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 text-white"
|
||||
className="size-16 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-900 rounded-2xl"
|
||||
>
|
||||
<NewColumnIcon className="size-7" />
|
||||
<PlusIcon className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
</VList>
|
||||
<Tooltip.Provider>
|
||||
<div className="absolute bottom-3 right-3">
|
||||
<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
|
||||
<div className="flex items-center gap-1 p-1 bg-black/50 dark:bg-white/30 backdrop-blur-xl rounded-xl shadow-toolbar">
|
||||
<Tooltip.Root delayDuration={150}>
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
|
||||
@@ -48,7 +48,7 @@ export function BackupSettingScreen() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removePrivkey()}
|
||||
className="mt-2 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-red-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
|
||||
className="mt-2 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-red-200 dark:bg-red-800 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:hover:text-white"
|
||||
>
|
||||
Remove private key
|
||||
</button>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { AvatarUpload } from "./components/avatarUpload";
|
||||
import { CoverUpload } from "./components/coverUpload";
|
||||
|
||||
@@ -92,6 +93,9 @@ export function ProfileSettingScreen() {
|
||||
return content;
|
||||
});
|
||||
|
||||
// notify
|
||||
toast.success("You've updated profile successfully.");
|
||||
|
||||
// reset state
|
||||
setPicture(null);
|
||||
setBanner(null);
|
||||
@@ -112,7 +116,7 @@ export function ProfileSettingScreen() {
|
||||
className="h-full w-full rounded-t-xl object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full rounded-t-xl bg-neutral-200 dark:bg-neutral-900" />
|
||||
<div className="h-full w-full rounded-t-xl bg-neutral-200 dark:bg-neutral-800" />
|
||||
)}
|
||||
<div className="absolute right-4 top-4">
|
||||
<CoverUpload setBanner={setBanner} />
|
||||
@@ -236,7 +240,7 @@ export function ProfileSettingScreen() {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid || loading}
|
||||
className="mx-auto inline-flex h-10 w-24 transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||
className="inline-flex items-center justify-center w-24 pb-[2px] font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"@astrojs/check": "^0.4.1",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@fontsource/geist-mono": "^5.0.1",
|
||||
"astro": "^4.2.1",
|
||||
"astro": "^4.2.4",
|
||||
"astro-seo-meta": "^4.1.0",
|
||||
"astro-seo-schema": "^4.0.0",
|
||||
"schema-dts": "^1.1.2",
|
||||
|
||||
Reference in New Issue
Block a user