-
- );
-}
diff --git a/src/app/auth/components/features/allowNotification.tsx b/src/app/auth/components/features/allowNotification.tsx
new file mode 100644
index 00000000..4e23bc1b
--- /dev/null
+++ b/src/app/auth/components/features/allowNotification.tsx
@@ -0,0 +1,50 @@
+import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function AllowNotification() {
+ const [notification, setNotification] = useOnboarding((state) => [
+ state.notification,
+ state.toggleNotification,
+ ]);
+
+ const allow = async () => {
+ let permissionGranted = await isPermissionGranted();
+ if (!permissionGranted) {
+ const permission = await requestPermission();
+ permissionGranted = permission === 'granted';
+ }
+ if (permissionGranted) {
+ setNotification();
+ }
+ };
+
+ return (
+
-
- - You're ready, redirecting in {count} -
-
- Thank you for using Lume. Lume doesn't use telemetry. If you encounter any
- problems, please submit a report via the "Report Issue" button.
-
- You can find it while using the application.
-
- 
-
-
-
+
+ );
+}
diff --git a/src/app/auth/components/features/enableCircle.tsx b/src/app/auth/components/features/enableCircle.tsx
new file mode 100644
index 00000000..ba653035
--- /dev/null
+++ b/src/app/auth/components/features/enableCircle.tsx
@@ -0,0 +1,100 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { LRUCache } from 'lru-cache';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function Circle() {
+ const { db } = useStorage();
+ const { ndk } = useNDK();
+
+ const [circle, setCircle] = useOnboarding((state) => [
+ state.circle,
+ state.toggleCircle,
+ ]);
+ const [loading, setLoading] = useState(false);
+
+ const enableLinks = async () => {
+ setLoading(true);
+
+ const users = ndk.getUser({ hexpubkey: db.account.pubkey });
+ const follows = await users.follows();
+
+ if (follows.size === 0) {
+ setLoading(false);
+ return toast('You need to follow at least 1 account');
+ }
+
+ const lru = new LRUCache
+
+
+
+ {notification ? (
+ Allow notification
++ By allowing Lume to send notifications in your OS settings, you will receive + notification messages when someone interacts with you or your content. +
+
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/auth/components/features/enableOutbox.tsx b/src/app/auth/components/features/enableOutbox.tsx
new file mode 100644
index 00000000..18b46765
--- /dev/null
+++ b/src/app/auth/components/features/enableOutbox.tsx
@@ -0,0 +1,47 @@
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function OutboxModel() {
+ const { db } = useStorage();
+
+ const [outbox, setOutbox] = useOnboarding((state) => [
+ state.outbox,
+ state.toggleOutbox,
+ ]);
+
+ const enableOutbox = async () => {
+ await db.createSetting('outbox', '1');
+ setOutbox();
+ };
+
+ return (
+
+
+
+
+ {circle ? (
+ Enable Circle
++ Beside newsfeed from your follows, you will see more content from all people + that followed by your follows. +
+
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/auth/components/features/favoriteHashtag.tsx b/src/app/auth/components/features/favoriteHashtag.tsx
new file mode 100644
index 00000000..92dabd67
--- /dev/null
+++ b/src/app/auth/components/features/favoriteHashtag.tsx
@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function FavoriteHashtag() {
+ const hashtag = useOnboarding((state) => state.hashtag);
+
+ return (
+
+
+
+
+ {outbox ? (
+ Enable Outbox (experiment)
++ When you request information about a user, Lume will automatically query the + user's outbox relays and subsequent queries will favour using those + relays for queries with that user's pubkey. +
+
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/src/app/auth/components/features/followList.tsx b/src/app/auth/components/features/followList.tsx
new file mode 100644
index 00000000..8901fac5
--- /dev/null
+++ b/src/app/auth/components/features/followList.tsx
@@ -0,0 +1,58 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+export function FollowList() {
+ const { db } = useStorage();
+ const { ndk } = useNDK();
+ const { status, data } = useQuery(
+ ['follows'],
+ async () => {
+ const user = ndk.getUser({ hexpubkey: db.account.pubkey });
+ const follows = await user.follows();
+ const followsAsArr = [];
+
+ follows.forEach((user) => {
+ followsAsArr.push(user.pubkey);
+ });
+
+ // update db
+ await db.updateAccount('follows', JSON.stringify(followsAsArr));
+ await db.updateAccount('circles', JSON.stringify(followsAsArr));
+
+ db.account.follows = followsAsArr;
+ db.account.circles = followsAsArr;
+
+ return followsAsArr;
+ },
+ {
+ refetchOnWindowFocus: false,
+ }
+ );
+
+ return (
+
+
+
+
+ {hashtag ? (
+ Favorite hashtag
++ By adding favorite hashtag, Lume will display all contents related to this + hashtag as a column +
+
+
+ ) : (
+
+ Add
+
+ )}
+
+
+ );
+}
diff --git a/src/app/auth/components/features/suggestFollow.tsx b/src/app/auth/components/features/suggestFollow.tsx
new file mode 100644
index 00000000..8884baa2
--- /dev/null
+++ b/src/app/auth/components/features/suggestFollow.tsx
@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function SuggestFollow() {
+ const enrich = useOnboarding((state) => state.enrich);
+
+ return (
+ Your follows
+
+ {status === 'loading' ? (
+
+
+ {data.slice(0, 16).map((item) => (
+
+ )}
+
+ +{data.length}
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/app/auth/create.tsx b/src/app/auth/create.tsx
new file mode 100644
index 00000000..6f471ddf
--- /dev/null
+++ b/src/app/auth/create.tsx
@@ -0,0 +1,295 @@
+import { NDKEvent, NDKKind, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+import { downloadDir } from '@tauri-apps/api/path';
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { message, save } from '@tauri-apps/plugin-dialog';
+import { writeTextFile } from '@tauri-apps/plugin-fs';
+import { motion } from 'framer-motion';
+import { minidenticon } from 'minidenticons';
+import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { AvatarUploader } from '@shared/avatarUploader';
+import { ArrowLeftIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+export function CreateAccountScreen() {
+ const [picture, setPicture] = useState('');
+ const [downloaded, setDownloaded] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [keys, setKeys] = useState
+
+
+
+ {enrich ? (
+ Enrich your network
++ Follow more people to stay up to date with everything happening around the + world. +
+
+
+ ) : (
+
+ Check
+
+ )}
+
+
+ );
+}
diff --git a/src/app/auth/create/index.tsx b/src/app/auth/create/index.tsx
deleted file mode 100644
index 503f1643..00000000
--- a/src/app/auth/create/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-export function AuthCreateScreen() {
- const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
- const setPrivkey = useStronghold((state) => state.setPrivkey);
-
- useEffect(() => {
- if (step) {
- setPrivkey(tmpPrivkey);
- }
- }, [tmpPrivkey]);
-
- return (
-
+ {!keys ? (
+
+ ) : null}
+
+
+
+ + Let's set up your Nostr account. +
+
+ {!keys ? (
+
+
+
+
+
+ )}
+ {downloaded ? (
+ navigate('/auth/onboarding', { state: { newuser: true } })}
+ >
+ Finish
+
+ ) : null}
+
+
+
+
+ ) : (
+ <>
+
+
+ Backup account
+
+
+ + Your private key is your password. If you lose this key, you will + lose access to your account! Copy it and keep it in a safe place.{' '} + + There is no way to reset your private key. + +
++ Public key is used for sharing with other people so that they can + find you using the public key. +
+
+
+ {!downloaded ? (
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- );
-}
diff --git a/src/app/auth/create/step-1.tsx b/src/app/auth/create/step-1.tsx
deleted file mode 100644
index 48c39bef..00000000
--- a/src/app/auth/create/step-1.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { writeText } from '@tauri-apps/api/clipboard';
-import { message, save } from '@tauri-apps/api/dialog';
-import { writeTextFile } from '@tauri-apps/api/fs';
-import { downloadDir } from '@tauri-apps/api/path';
-import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
-import { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { CopyIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-export function CreateStep1Screen() {
- const { db } = useStorage();
-
- const navigate = useNavigate();
- const setPrivkey = useStronghold((state) => state.setPrivkey);
- const setTempPrivkey = useOnboarding((state) => state.setTempPrivkey);
- const setPubkey = useOnboarding((state) => state.setPubkey);
- const setStep = useOnboarding((state) => state.setStep);
-
- const [loading, setLoading] = useState(false);
- const [copied, setCopied] = useState(false);
- const [downloaded, setDownloaded] = useState(false);
-
- const privkey = useMemo(() => generatePrivateKey(), []);
- const pubkey = getPublicKey(privkey);
- const npub = nip19.npubEncode(pubkey);
- const nsec = nip19.nsecEncode(privkey);
-
- const download = async () => {
- try {
- const downloadPath = await downloadDir();
- const fileName = `nostr_keys_${new Date().toISOString()}.txt`;
- const filePath = await save({
- defaultPath: downloadPath + '/' + fileName,
- });
-
- if (filePath) {
- await writeTextFile(
- filePath,
- `Generated by Lume (lume.nu)\nPublic key: ${npub}\nPrivate key: ${nsec}`
- );
-
- setDownloaded(true);
- } // else { user cancel action }
- } catch (e) {
- await message(e, { title: 'Cannot download account keys', type: 'error' });
- }
- };
-
- const copyPrivkey = async () => {
- try {
- await writeText(nsec);
- setCopied(true);
-
- setTimeout(() => setCopied(false), 3000);
- } catch (e) {
- await message(e, { title: 'Cannot copy private key', type: 'error' });
- }
- };
-
- const submit = async () => {
- setLoading(true);
-
- // update state
- setPrivkey(privkey);
- setTempPrivkey(privkey); // only use if user close app and reopen it
- setPubkey(pubkey);
-
- // save to database
- await db.createAccount(npub, pubkey);
-
- // redirect to next step
- navigate('/auth/create/step-2', { replace: true });
- };
-
- useEffect(() => {
- // save current step, if user close app and reopen it
- setStep('/auth/create');
- }, []);
-
- return (
-
-
- );
-}
diff --git a/src/app/auth/create/step-2.tsx b/src/app/auth/create/step-2.tsx
deleted file mode 100644
index 84e5dfab..00000000
--- a/src/app/auth/create/step-2.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { appConfigDir } from '@tauri-apps/api/path';
-import { useEffect, useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { Stronghold } from 'tauri-plugin-stronghold-api';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- password: string;
-};
-
-const resolver: Resolver
-
- - This is your new Nostr account -
-- Your private key is your password. If you lose this key, you will lose access to - your account! Copy it and keep it in a safe place. There is no way to reset your - private key. -
-- Public key is used for sharing with other people so that they can find you using - the public key. -
-
-
-
-
-
- Private Key
-
-
-
-
-
-
- Public Key
-
-
-
-
-
-
- By clicking 'Continue', you are ensuring that your keys are saved in
- a safe place. You cannot recover these keys if they are lost.
-
-
-
-
- );
-}
diff --git a/src/app/auth/create/step-3.tsx b/src/app/auth/create/step-3.tsx
deleted file mode 100644
index e444cf17..00000000
--- a/src/app/auth/create/step-3.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { NDKKind } from '@nostr-dev-kit/ndk';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { AvatarUploader } from '@shared/avatarUploader';
-import { BannerUploader } from '@shared/bannerUploader';
-import { LoaderIcon } from '@shared/icons';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-import { Image } from '@shared/image';
-
-import { useOnboarding } from '@stores/onboarding';
-import { WidgetKinds } from '@stores/widgets';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function CreateStep3Screen() {
- const navigate = useNavigate();
- const setStep = useOnboarding((state) => state.setStep);
-
- const [loading, setLoading] = useState(false);
- const [picture, setPicture] = useState('https://void.cat/d/5VKmKyuHyxrNMf9bWSVPih');
- const [banner, setBanner] = useState('');
-
- const { db } = useStorage();
- const { publish } = useNostr();
- const {
- register,
- handleSubmit,
- formState: { isDirty, isValid },
- } = useForm();
-
- const onSubmit = async (data: { name: string; about: string; website: string }) => {
- setLoading(true);
- try {
- const profile = {
- ...data,
- name: data.name,
- display_name: data.name,
- bio: data.about,
- website: data.website,
- };
-
- const event = await publish({
- content: JSON.stringify(profile),
- kind: NDKKind.Metadata,
- tags: [],
- });
-
- // create default widget
- await db.createWidget(WidgetKinds.other.learnNostr, 'Learn Nostr', '');
-
- if (event) {
- navigate('/auth/onboarding', { replace: true });
- }
- } catch (e) {
- console.log('error: ', e);
- setLoading(false);
- }
- };
-
- useEffect(() => {
- // save current step, if user close app and reopen it
- setStep('/auth/create/step-3');
- }, []);
-
- return (
-
-
- - Set password to secure your key -
-- Password is not related to your Nostr account. It is only used to secure your - keys stored on your local machine and to unlock the app (like unlocking your - phone with a passcode). When you move to other Nostr clients, you just need to - copy your private key. -
-
-
-
-
-
- );
-}
diff --git a/src/app/auth/import.tsx b/src/app/auth/import.tsx
new file mode 100644
index 00000000..7b86be3f
--- /dev/null
+++ b/src/app/auth/import.tsx
@@ -0,0 +1,259 @@
+import { readText } from '@tauri-apps/plugin-clipboard-manager';
+import { motion } from 'framer-motion';
+import { nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { twMerge } from 'tailwind-merge';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+export function ImportAccountScreen() {
+ const { db } = useStorage();
+ const navigate = useNavigate();
+
+ const [npub, setNpub] = useState
-
- - Personalize your Nostr profile -
-- Nostr profile is synchronous across all Nostr clients. If you create a profile - on Lume, it will also work well with other Nostr clients. If you update your - profile on another Nostr client, it will also sync to Lume. -
-
-
-
-
+
+ );
+}
diff --git a/src/app/auth/import/index.tsx b/src/app/auth/import/index.tsx
deleted file mode 100644
index 37aebf6b..00000000
--- a/src/app/auth/import/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-export function AuthImportScreen() {
- const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
- const setPrivkey = useStronghold((state) => state.setPrivkey);
-
- useEffect(() => {
- if (step) {
- setPrivkey(tmpPrivkey);
- }
- }, [tmpPrivkey]);
-
- return (
-
+ {!created ? (
+
+ ) : null}
+
+
+
+ + Import your Nostr account. +
+
+
+
+ ) : null}
+ {created ? (
+ <>
+
+
+
+ navigate('/auth/onboarding', { state: { newuser: false } })
+ }
+ >
+ Finish
+
+
+ ) : null}
+
+
+
+ {pubkey ? (
+
+
+
+
+ setNpub(e.target.value)}
+ spellCheck={false}
+ autoComplete="off"
+ autoCorrect="off"
+ autoCapitalize="off"
+ placeholder="npub1"
+ className="h-11 flex-1 rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+ />
+ {!pubkey ? (
+
+ ) : null}
+
+ Account found
+
+
+
+
+ {!created ? (
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+ setNsec(e.target.value)}
+ spellCheck={false}
+ autoComplete="off"
+ autoCorrect="off"
+ autoCapitalize="off"
+ placeholder="nsec1"
+ className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+ />
+ {nsec.length < 5 ? (
+
+ {nsec.length > 5 ? (
+
+ ) : null}
+
+
+
+ ) : null}
+
+
+ + Private Key is used to sign your event. For example, if you + want to make a new post or send a message to your contact, you need to + use your private key to sign this event. +
++ 1. In case you store private key in Lume +
++ Lume will put your private key to{' '} + + {db.platform === 'macos' + ? 'Apple Keychain (macOS)' + : db.platform === 'windows' + ? 'Credential Manager (Windows)' + : 'Secret Service (Linux)'} + + , it will be secured by your OS +
++ 2. In case you do not store private key in Lume +
++ When you make an event that requires a sign by your private key, Lume + will show a prompt for you to enter private key. It will be cleared + after signing and not stored anywhere. +
+
-
- );
-}
diff --git a/src/app/auth/import/step-1.tsx b/src/app/auth/import/step-1.tsx
deleted file mode 100644
index 493fc51f..00000000
--- a/src/app/auth/import/step-1.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { getPublicKey, nip19 } from 'nostr-tools';
-import { useEffect, useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- privkey: string;
-};
-
-const resolver: Resolver
-
- );
-}
diff --git a/src/app/auth/import/step-2.tsx b/src/app/auth/import/step-2.tsx
deleted file mode 100644
index 42da6e81..00000000
--- a/src/app/auth/import/step-2.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { appConfigDir } from '@tauri-apps/api/path';
-import { useEffect, useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { Stronghold } from 'tauri-plugin-stronghold-api';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- password: string;
-};
-
-const resolver: Resolver
-
- - Import your Nostr key -
-
-
-
-
-
- );
-}
diff --git a/src/app/auth/import/step-3.tsx b/src/app/auth/import/step-3.tsx
deleted file mode 100644
index 0f100cfe..00000000
--- a/src/app/auth/import/step-3.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { useOnboarding } from '@stores/onboarding';
-import { WidgetKinds } from '@stores/widgets';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function ImportStep3Screen() {
- const navigate = useNavigate();
- const setStep = useOnboarding((state) => state.setStep);
-
- const { db } = useStorage();
- const { fetchUserData } = useNostr();
-
- const [loading, setLoading] = useState(false);
-
- const submit = async () => {
- try {
- // show loading indicator
- setLoading(true);
-
- // prefetch data
- const user = await fetchUserData();
-
- // create default widget
- await db.createWidget(WidgetKinds.other.learnNostr, 'Learn Nostr', '');
-
- // redirect to next step
- if (user.status === 'ok') {
- navigate('/auth/onboarding/step-2', { replace: true });
- } else {
- setLoading(false);
- }
- } catch (e) {
- console.log('error: ', e);
- setLoading(false);
- }
- };
-
- useEffect(() => {
- // save current step, if user close app and reopen it
- setStep('/auth/import/step-3');
- }, []);
-
- return (
-
-
- - Set password to secure your key -
-- Password is not related to your Nostr account. It is only used to secure your - keys stored on your local machine and to unlock the app (like unlocking your - phone with a passcode). When you move to other Nostr clients, you only need to - copy your private key. -
-
-
-
-
-
- );
-}
diff --git a/src/app/auth/lock.tsx b/src/app/auth/lock.tsx
deleted file mode 100644
index ce65e55d..00000000
--- a/src/app/auth/lock.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export function LockScreen() {
- return (
-
-
- - {loading ? 'Downloading...' : 'Your Nostr profile'} -
-
-
-
-
-
-
-
- By clicking 'Continue', Lume will download your old relay list and
- metadata. It may take a bit
-
-
-
-
- );
-}
diff --git a/src/app/auth/migrate.tsx b/src/app/auth/migrate.tsx
deleted file mode 100644
index dd9b6c77..00000000
--- a/src/app/auth/migrate.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { appConfigDir } from '@tauri-apps/api/path';
-import { useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { Stronghold } from 'tauri-plugin-stronghold-api';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- password: string;
-};
-
-const resolver: ResolverTODO
-
-
- );
-}
diff --git a/src/app/auth/onboarding/enrich.tsx b/src/app/auth/onboarding/enrich.tsx
new file mode 100644
index 00000000..ec69c273
--- /dev/null
+++ b/src/app/auth/onboarding/enrich.tsx
@@ -0,0 +1,130 @@
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+import { useOnboarding } from '@stores/onboarding';
+
+import { useNostr } from '@utils/hooks/useNostr';
+import { arrayToNIP02 } from '@utils/transform';
+
+export function OnboardEnrichScreen() {
+ const { db } = useStorage();
+ const { status, data } = useQuery(['trending-profiles-widget'], async () => {
+ const res = await fetch('https://api.nostr.band/v0/trending/profiles');
+ if (!res.ok) {
+ throw new Error('Error');
+ }
+ return res.json();
+ });
+ const { publish } = useNostr();
+
+ const [loading, setLoading] = useState(false);
+ const [follows, setFollows] = useState([]);
+
+ const navigate = useNavigate();
+ const setEnrich = useOnboarding((state) => state.toggleEnrich);
+
+ // toggle follow state
+ const toggleFollow = (pubkey: string) => {
+ const arr = follows.includes(pubkey)
+ ? follows.filter((i) => i !== pubkey)
+ : [...follows, pubkey];
+ setFollows(arr);
+ };
+
+ const submit = async () => {
+ try {
+ setLoading(true);
+
+ const tags = arrayToNIP02(follows);
+ const event = await publish({ content: '', kind: 3, tags: tags });
+
+ // redirect to next step
+ if (event) {
+ db.account.follows = follows;
+
+ await db.updateAccount('follows', JSON.stringify(follows));
+ await db.updateAccount('circles', JSON.stringify(follows));
+
+ setEnrich();
+ navigate(-1);
+ } else {
+ setLoading(false);
+ }
+ } catch (e) {
+ setLoading(false);
+ toast(e);
+ }
+ };
+
+ return (
+
-
-
-
- - Upgrade security for your account -
-
-
-
-
-
-
-
-
-
- - You're using old Lume version which store your private key as - plaintext in database, this is huge security risk. -
-- To secure your private key, please set a password and Lume will put your - private key in secure storage. -
-- It is not possible to start the app without applying this step, it is - easy and fast! -
-
+
+ );
+}
diff --git a/src/app/auth/onboarding/hashtag.tsx b/src/app/auth/onboarding/hashtag.tsx
new file mode 100644
index 00000000..1175ecf4
--- /dev/null
+++ b/src/app/auth/onboarding/hashtag.tsx
@@ -0,0 +1,131 @@
+import { message } from '@tauri-apps/plugin-dialog';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+import { WidgetKinds } from '@stores/widgets';
+
+const data = [
+ { hashtag: '#bitcoin' },
+ { hashtag: '#nostr' },
+ { hashtag: '#nostrdesign' },
+ { hashtag: '#security' },
+ { hashtag: '#zap' },
+ { hashtag: '#LFG' },
+ { hashtag: '#zapchain' },
+ { hashtag: '#shitcoin' },
+ { hashtag: '#plebchain' },
+ { hashtag: '#nodes' },
+ { hashtag: '#hodl' },
+ { hashtag: '#stacksats' },
+ { hashtag: '#nokyc' },
+ { hashtag: '#meme' },
+ { hashtag: '#memes' },
+ { hashtag: '#memestr' },
+ { hashtag: '#nostriches' },
+ { hashtag: '#dev' },
+ { hashtag: '#anime' },
+ { hashtag: '#waifu' },
+ { hashtag: '#manga' },
+ { hashtag: '#lume' },
+ { hashtag: '#snort' },
+ { hashtag: '#damus' },
+ { hashtag: '#primal' },
+];
+
+export function OnboardHashtagScreen() {
+ const { db } = useStorage();
+
+ const [loading, setLoading] = useState(false);
+ const [tags, setTags] = useState(new Set
+
+
+
+
+ + Enrich your network +
+
+ {status === 'loading' ? (
+
+
+
+ ) : (
+ data?.profiles.map((item: { pubkey: string; profile: { content: string } }) => (
+
+ ))
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/app/auth/onboarding/index.tsx b/src/app/auth/onboarding/index.tsx
index ddf8d4b8..58fd243e 100644
--- a/src/app/auth/onboarding/index.tsx
+++ b/src/app/auth/onboarding/index.tsx
@@ -1,22 +1,5 @@
-import { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
-import { useOnboarding } from '@stores/onboarding';
-import { useStronghold } from '@stores/stronghold';
-
export function OnboardingScreen() {
- const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
- const setPrivkey = useStronghold((state) => state.setPrivkey);
-
- useEffect(() => {
- if (step) {
- setPrivkey(tmpPrivkey);
- }
- }, [tmpPrivkey]);
-
- return (
-
+
+
+
+
+ + Choose {tags.size}/3 your favorite hashtag +
+
+
+
+ {data.map((item: { hashtag: string }) => (
+
+ ))}
+
+
+
-
- );
+ return
+
+ );
+}
diff --git a/src/app/auth/onboarding/relays.tsx b/src/app/auth/onboarding/relays.tsx
new file mode 100644
index 00000000..c77dc270
--- /dev/null
+++ b/src/app/auth/onboarding/relays.tsx
@@ -0,0 +1,154 @@
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+import { useOnboarding } from '@stores/onboarding';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function OnboardRelaysScreen() {
+ const navigate = useNavigate();
+ const toggleRelays = useOnboarding((state) => state.toggleRelays);
+
+ const [loading, setLoading] = useState(false);
+ const [relays, setRelays] = useState(new Set
+
+
+
+ + You're almost ready to use Lume. +
++ Let's start personalizing your experience. +
+
+ {newuser ?
+
+
+ );
+}
diff --git a/src/app/auth/onboarding/step-1.tsx b/src/app/auth/onboarding/step-1.tsx
deleted file mode 100644
index 08b4bc06..00000000
--- a/src/app/auth/onboarding/step-1.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { useOnboarding } from '@stores/onboarding';
-
-import { useNostr } from '@utils/hooks/useNostr';
-import { arrayToNIP02 } from '@utils/transform';
-
-export function OnboardStep1Screen() {
- const navigate = useNavigate();
- const setStep = useOnboarding((state) => state.setStep);
-
- const { publish, fetchUserData } = useNostr();
- const { db } = useStorage();
- const { status, data } = useQuery(['trending-profiles-widget'], async () => {
- const res = await fetch('https://api.nostr.band/v0/trending/profiles');
- if (!res.ok) {
- throw new Error('Error');
- }
- return res.json();
- });
-
- const [loading, setLoading] = useState(false);
- const [follows, setFollows] = useState([]);
-
- // toggle follow state
- const toggleFollow = (pubkey: string) => {
- const arr = follows.includes(pubkey)
- ? follows.filter((i) => i !== pubkey)
- : [...follows, pubkey];
- setFollows(arr);
- };
-
- const submit = async () => {
- try {
- setLoading(true);
-
- const tags = arrayToNIP02([...follows, db.account.pubkey]);
- const event = await publish({ content: '', kind: 3, tags: tags });
-
- // prefetch data
- const user = await fetchUserData(follows);
-
- // redirect to next step
- if (event && user.status === 'ok') {
- navigate('/auth/onboarding/step-2', { replace: true });
- } else {
- setLoading(false);
- }
- } catch (e) {
- setLoading(false);
- console.log('error: ', e);
- }
- };
-
- useEffect(() => {
- // save current step, if user close app and reopen it
- setStep('/auth/onboarding');
- }, []);
-
- return (
-
+
+
+
+
+ + Relay discovery +
+
+
+
+ {status === 'loading' ? (
+
+
+
+
+ ) : data.size === 0 ? (
+
+
+ ) : (
+ [...data].map(([key, value]) => (
+
+ ))
+ )}
+
+ Lume couldn't find any relays from your follows.
+
+ You can skip this step and use default relays instead.
+
-
- );
-}
diff --git a/src/app/auth/onboarding/step-2.tsx b/src/app/auth/onboarding/step-2.tsx
deleted file mode 100644
index 0fd99a89..00000000
--- a/src/app/auth/onboarding/step-2.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { message } from '@tauri-apps/api/dialog';
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-import { WidgetKinds } from '@stores/widgets';
-
-const data = [
- { hashtag: '#bitcoin' },
- { hashtag: '#nostr' },
- { hashtag: '#nostrdesign' },
- { hashtag: '#zap' },
- { hashtag: '#LFG' },
- { hashtag: '#zapchain' },
- { hashtag: '#plebchain' },
- { hashtag: '#nodes' },
- { hashtag: '#hodl' },
- { hashtag: '#stacksats' },
- { hashtag: '#nokyc' },
- { hashtag: '#meme' },
- { hashtag: '#memes' },
- { hashtag: '#memestr' },
- { hashtag: '#penisbutter' },
- { hashtag: '#anime' },
- { hashtag: '#waifu' },
- { hashtag: '#manga' },
- { hashtag: '#nostriches' },
- { hashtag: '#dev' },
-];
-
-export function OnboardStep2Screen() {
- const navigate = useNavigate();
-
- const [setStep, clearStep] = useOnboarding((state) => [state.setStep, state.clearStep]);
- const [loading, setLoading] = useState(false);
- const [tags, setTags] = useState(new Set
-
- - {loading ? 'Loading...' : 'Enrich your network'} -
-- Choose the account you want to follow. These accounts are trending in the last - 24 hours. If none of the accounts interest you, you can explore more options and - add them later. -
-
- {status === 'loading' ? (
-
-
-
- ) : (
- data?.profiles.map((item: { pubkey: string; profile: { content: string } }) => (
-
- ))
- )}
-
-
-
-
-
- Skip, you can add later
-
-
-
-
- );
-}
diff --git a/src/app/auth/onboarding/step-3.tsx b/src/app/auth/onboarding/step-3.tsx
deleted file mode 100644
index b7be12dc..00000000
--- a/src/app/auth/onboarding/step-3.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useNDK } from '@libs/ndk/provider';
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { FULL_RELAYS } from '@stores/constants';
-import { useOnboarding } from '@stores/onboarding';
-
-import { useNostr } from '@utils/hooks/useNostr';
-
-export function OnboardStep3Screen() {
- const navigate = useNavigate();
-
- const [setStep, clearStep] = useOnboarding((state) => [state.setStep, state.clearStep]);
- const [loading, setLoading] = useState(false);
- const [relays, setRelays] = useState(new Set
-
- - Choose {tags.size}/3 your favorite hashtags -
-- Hashtags are an easy way to discover more content. By adding a hashtag, Lume - will show all related posts. You can always add more later. -
-
-
-
- {data.map((item: { hashtag: string }) => (
-
- ))}
-
-
-
- {!loading ? (
-
- ) : null}
-
-
-
- );
-}
diff --git a/src/app/auth/reset.tsx b/src/app/auth/reset.tsx
deleted file mode 100644
index 63bef717..00000000
--- a/src/app/auth/reset.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { appConfigDir } from '@tauri-apps/api/path';
-import { getPublicKey, nip19 } from 'nostr-tools';
-import { useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { Link, useNavigate } from 'react-router-dom';
-import { Stronghold } from 'tauri-plugin-stronghold-api';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- password: string;
- privkey: string;
-};
-
-const resolver: Resolver
-
- Relay discovery
-- You can add relay which is using by who you're following to easier reach - their content. Learn more about relay{' '} - - here (nostr.com) - -
-
-
-
- {status === 'loading' ? (
-
-
-
- ) : relaysAsArray.length === 0 ? (
-
-
- ) : (
- relaysAsArray.map((item, index) => (
-
- ))
- )}
- {relays.size > 5 && (
-
- Lume couldn't find any relays from your follows.
-
- You can skip this step and use default relays instead.
-
-
- )}
- - Using too much relay can cause high resource usage -
-
-
-
-
-
-
- );
-}
diff --git a/src/app/auth/unlock.tsx b/src/app/auth/unlock.tsx
deleted file mode 100644
index e4aa8d7d..00000000
--- a/src/app/auth/unlock.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { appConfigDir } from '@tauri-apps/api/path';
-import { useState } from 'react';
-import { Resolver, useForm } from 'react-hook-form';
-import { Link, useNavigate } from 'react-router-dom';
-import { Stronghold } from 'tauri-plugin-stronghold-api';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
-import { User } from '@shared/user';
-
-import { useStronghold } from '@stores/stronghold';
-
-type FormValues = {
- password: string;
-};
-
-const resolver: Resolver
-
-
-
-
- Reset unlock password
-
-
- );
-}
diff --git a/src/app/auth/welcome.tsx b/src/app/auth/welcome.tsx
index 375ae582..6e4b1d46 100644
--- a/src/app/auth/welcome.tsx
+++ b/src/app/auth/welcome.tsx
@@ -1,38 +1,30 @@
import { Link } from 'react-router-dom';
-import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
-
export function WelcomeScreen() {
return (
-
-
-
-
-
- - Enter password to unlock -
-
-
-
-
Welcome to Lume
-- Let's get you up and connecting with all peoples around the world on - Nostr -
+
+ (null);
+
+ const { db } = useStorage();
+ const { ndk } = useNDK();
+ const { pubkey } = useParams();
+ const { fetchNIP04Messages } = useNostr();
+ const { status, data } = useQuery(['nip04-dm', pubkey], async () => {
+ return await fetchNIP04Messages(pubkey);
+ });
+
+ const renderItem = useCallback(
+ (message: NDKEvent) => {
+ return (
+
+
);
}
diff --git a/src/app/chats/chat.tsx b/src/app/chats/chat.tsx
new file mode 100644
index 00000000..52571662
--- /dev/null
+++ b/src/app/chats/chat.tsx
@@ -0,0 +1,105 @@
+import { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { VList, VListHandle } from 'virtua';
+
+import { ChatForm } from '@app/chats/components/chatForm';
+import { ChatMessage } from '@app/chats/components/message';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function ChatScreen() {
+ const listRef = useRef
+ 
+
-
+ + Welcome to Lume +
-
-
- Login with private key
-
-
- Create new key
+ Create new Nostr account
+
+
+ Log in with key
-
-
-
+
+ );
+}
diff --git a/src/app/chats/components/messages/form.tsx b/src/app/chats/components/chatForm.tsx
similarity index 56%
rename from src/app/chats/components/messages/form.tsx
rename to src/app/chats/components/chatForm.tsx
index cdeb9844..4936b791 100644
--- a/src/app/chats/components/messages/form.tsx
+++ b/src/app/chats/components/chatForm.tsx
@@ -1,14 +1,13 @@
import { nip04 } from 'nostr-tools';
import { useCallback, useState } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-import { MediaUploader } from '@app/chats/components/messages/mediaUploader';
+import { MediaUploader } from '@app/chats/components/mediaUploader';
import { EnterIcon } from '@shared/icons';
import { useNostr } from '@utils/hooks/useNostr';
-export function ChatMessageForm({
+export function ChatForm({
receiverPubkey,
userPrivkey,
}: {
@@ -46,24 +45,24 @@ export function ChatMessageForm({
};
return (
-
+
+
+
+
+
+
+ {status === 'loading' ? (
+
+ {data.map((message) => renderItem(message))}
+
+ )}
+
+
+
+ ) : data.length === 0 ? (
+
+
+ + Loading messages +
+
+
+ ) : (
+ 🙌
++ You two didn't talk yet, let's send first message +
+
+
+
- setValue(e.target.value)}
- onKeyDown={handleEnterPress}
- spellCheck={false}
- autoComplete="off"
- autoCorrect="off"
- autoCapitalize="off"
- placeholder="Message"
- className="min-h-[44px] flex-1 resize-none bg-transparent py-3 text-white !outline-none placeholder:text-white"
- />
-
-
+
+ setValue(e.target.value)}
+ onKeyDown={handleEnterPress}
+ spellCheck={false}
+ autoComplete="off"
+ autoCorrect="off"
+ autoCapitalize="off"
+ placeholder="Message"
+ className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
+ />