chore: minor fixes and updates

This commit is contained in:
reya 2024-01-09 08:35:30 +07:00
parent c172c0f80f
commit 73f90ebaf9
13 changed files with 97 additions and 48 deletions

View File

@ -147,6 +147,10 @@ export function CreateAccountScreen() {
ark.updateNostrSigner({ signer: remoteSigner });
// remove default nsecbunker profile and contact list
await ark.createEvent({ kind: NDKKind.Metadata, content: "", tags: [] });
await ark.createEvent({ kind: NDKKind.Contacts, content: "", tags: [] });
setOnboarding(true);
setIsLoading(false);
@ -163,8 +167,8 @@ export function CreateAccountScreen() {
Let's get you set up on Nostr.
</h1>
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
With an account on Nostr, you'll be able to use with any client that
you want.
With an account on Nostr, you'll be able to travel across all nostr
clients, all your data are synced.
</p>
</div>
{!services ? (
@ -260,13 +264,22 @@ export function CreateAccountScreen() {
</span>
</div>
</div>
<button
type="button"
onClick={generateNostrKeys}
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"
>
Generate Nostr keys
</button>
<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>
)}

View File

@ -1,15 +1,19 @@
import { useStorage } from "@lume/ark";
import { InfoIcon } from "@lume/icons";
import { InfoIcon, LoaderIcon } from "@lume/icons";
import { delay } from "@lume/utils";
import * as Switch from "@radix-ui/react-switch";
import {
isPermissionGranted,
requestPermission,
} from "@tauri-apps/plugin-notification";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
export function OnboardingScreen() {
const storage = useStorage();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [settings, setSettings] = useState({
autoupdate: false,
notification: false,
@ -27,6 +31,12 @@ export function OnboardingScreen() {
setSettings((prev) => ({ ...prev, notification: !settings.notification }));
};
const completeAuth = async () => {
setLoading(true);
await delay(1200);
navigate("/");
};
useEffect(() => {
async function loadSettings() {
const permissionGranted = await isPermissionGranted();
@ -100,12 +110,17 @@ export function OnboardingScreen() {
&quot;Settings&quot; screen. Be sure to visit it later.
</p>
</div>
<Link
to="/"
<button
type="button"
onClick={completeAuth}
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"
>
Continue
</Link>
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
)}
</button>
</div>
</div>
</div>

View File

@ -77,13 +77,13 @@ export function UserScreen() {
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -114,13 +114,13 @@ export function HomeRoute({
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-5 h-5 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -100,13 +100,13 @@ export function HomeRoute({
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-5 h-5 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -90,13 +90,13 @@ export function HomeRoute({
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-5 h-5 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -106,13 +106,13 @@ export function HomeRoute({ colKey }: { colKey: string }) {
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center w-40 h-10 gap-2 font-medium text-white bg-blue-500 rounded-full hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-5 h-5 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -181,13 +181,13 @@ export function HomeRoute({ id }: { id: string }) {
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex items-center justify-center h-10 gap-2 px-6 font-medium text-white bg-blue-500 rounded-full w-max hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="w-4 h-4 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="w-5 h-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}

View File

@ -16,7 +16,7 @@ export function AvatarUploadButton({
// start loading
setLoading(true);
const image = await ark.upload({});
const image = await ark.upload({ fileExts: [] });
if (image) {
setPicture(image);

View File

@ -1,11 +1,24 @@
import { CheckIcon } from "@lume/icons";
import { onboardingAtom } from "@lume/utils";
import { useQueryClient } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { useSetAtom } from "jotai";
export function OnboardingFinishScreen() {
const queryClient = useQueryClient();
const setOnboarding = useSetAtom(onboardingAtom);
const finish = async () => {
const queryCache = queryClient.getQueryCache();
const queryKeys = queryCache.getAll().map((cache) => cache.queryKey);
for (const key of queryKeys) {
await queryClient.refetchQueries({ queryKey: key });
}
setOnboarding(false);
};
return (
<motion.div
initial={{ opacity: 0, x: -20 }}
@ -23,7 +36,7 @@ export function OnboardingFinishScreen() {
<div className="mt-4 flex flex-col gap-2 items-center">
<button
type="button"
onClick={() => setOnboarding(false)}
onClick={finish}
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
>
Close

View File

@ -1,6 +1,6 @@
import { useArk, useStorage } from "@lume/ark";
import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
import { NDKKind } from "@nostr-dev-kit/ndk";
import { NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
import { motion } from "framer-motion";
import { minidenticon } from "minidenticons";
import { useState } from "react";
@ -35,11 +35,11 @@ export function OnboardingProfileSettingsScreen() {
const oldProfile = await ark.getUserProfile({
pubkey: storage.account.pubkey,
});
const ensureOldProfile = oldProfile ? oldProfile : {};
const profile = {
const profile: NDKUserProfile = {
...data,
...ensureOldProfile,
lud16: oldProfile?.lud16 || "",
nip05: oldProfile?.nip05 || "",
display_name: data.name,
bio: data.about,
picture: picture,
@ -60,7 +60,9 @@ export function OnboardingProfileSettingsScreen() {
setLoading(false);
}
} catch (e) {
return toast.error(e);
setLoading(false);
console.log(e);
toast.error("Cannot publish your profile, please try again later.");
}
};

View File

@ -1,5 +1,5 @@
import { ThreadNote } from "@lume/ark";
import { ArrowLeftIcon } from "@lume/icons";
import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
import { useNavigate, useParams } from "react-router-dom";
import { WindowVirtualizer } from "virtua";
import { ReplyList } from "../replyList";
@ -11,14 +11,20 @@ export function EventRoute() {
return (
<div className="pb-5 overflow-y-auto">
<WindowVirtualizer>
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<div className="h-11 bg-neutral-50 dark:bg-neutral-950 border-b flex items-center justify-start gap-2 px-3 border-neutral-100 dark:border-neutral-900 mb-3">
<button
type="button"
className="inline-flex items-center gap-2.5 text-sm font-medium"
className="size-9 hover:bg-neutral-100 hover:text-blue-500 dark:hover:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
onClick={() => navigate(-1)}
>
<ArrowLeftIcon className="size-4" />
Back
<ArrowLeftIcon className="size-5" />
</button>
<button
type="button"
className="size-9 hover:bg-neutral-100 hover:text-blue-500 dark:hover:bg-neutral-900 rounded-lg inline-flex items-center justify-center"
onClick={() => navigate(1)}
>
<ArrowRightIcon className="size-5" />
</button>
</div>
<div className="px-3">

View File

@ -193,13 +193,13 @@ export function UserRoute() {
type="button"
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
className="inline-flex items-center justify-center w-full h-12 gap-2 font-medium bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 rounded-xl focus:outline-none"
>
{isFetchingNextPage ? (
<LoaderIcon className="h-4 w-4 animate-spin" />
<LoaderIcon className="size-5 animate-spin" />
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5" />
<ArrowRightCircleIcon className="size-5" />
Load more
</>
)}