mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
update splash screen
This commit is contained in:
Ren Amamiya
parent
f2fc41018d
commit
0cfc3a48d8
@ -111,7 +111,7 @@
|
||||
{
|
||||
"width": 400,
|
||||
"height": 500,
|
||||
"decorations": false,
|
||||
"decorations": true,
|
||||
"hiddenTitle": true,
|
||||
"center": true,
|
||||
"resizable": false,
|
||||
|
||||
195
src/app.tsx
195
src/app.tsx
@ -1,31 +1,9 @@
|
||||
import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
|
||||
|
||||
import { AuthCreateScreen } from '@app/auth/create';
|
||||
import { CreateStep1Screen } from '@app/auth/create/step-1';
|
||||
import { CreateStep2Screen } from '@app/auth/create/step-2';
|
||||
import { CreateStep3Screen } from '@app/auth/create/step-3';
|
||||
import { AuthImportScreen } from '@app/auth/import';
|
||||
import { ImportStep1Screen } from '@app/auth/import/step-1';
|
||||
import { ImportStep2Screen } from '@app/auth/import/step-2';
|
||||
import { ImportStep3Screen } from '@app/auth/import/step-3';
|
||||
import { MigrateScreen } from '@app/auth/migrate';
|
||||
import { OnboardingScreen } from '@app/auth/onboarding';
|
||||
import { OnboardStep1Screen } from '@app/auth/onboarding/step-1';
|
||||
import { OnboardStep2Screen } from '@app/auth/onboarding/step-2';
|
||||
import { OnboardStep3Screen } from '@app/auth/onboarding/step-3';
|
||||
import { ResetScreen } from '@app/auth/reset';
|
||||
import { UnlockScreen } from '@app/auth/unlock';
|
||||
import { WelcomeScreen } from '@app/auth/welcome';
|
||||
import { ChatScreen } from '@app/chats';
|
||||
import { ErrorScreen } from '@app/error';
|
||||
import { EventScreen } from '@app/events';
|
||||
import { AccountSettingsScreen } from '@app/settings/account';
|
||||
import { GeneralSettingsScreen } from '@app/settings/general';
|
||||
import { ShortcutsSettingsScreen } from '@app/settings/shortcuts';
|
||||
import { SpaceScreen } from '@app/space';
|
||||
import { SplashScreen } from '@app/splash';
|
||||
import { TrendingScreen } from '@app/trending';
|
||||
import { UserScreen } from '@app/users';
|
||||
|
||||
import { getActiveAccount } from '@libs/storage';
|
||||
|
||||
@ -69,62 +47,191 @@ const router = createBrowserRouter([
|
||||
errorElement: <ErrorScreen />,
|
||||
loader: appLoader,
|
||||
children: [
|
||||
{ path: '', element: <SpaceScreen /> },
|
||||
{ path: 'trending', element: <TrendingScreen /> },
|
||||
{ path: 'events/:id', element: <EventScreen /> },
|
||||
{ path: 'users/:pubkey', element: <UserScreen /> },
|
||||
{ path: 'chats/:pubkey', element: <ChatScreen /> },
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { SpaceScreen } = await import('@app/space');
|
||||
return { Component: SpaceScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'trending',
|
||||
async lazy() {
|
||||
const { TrendingScreen } = await import('@app/trending');
|
||||
return { Component: TrendingScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'events/:id',
|
||||
async lazy() {
|
||||
const { EventScreen } = await import('@app/events');
|
||||
return { Component: EventScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'users/:pubkey',
|
||||
async lazy() {
|
||||
const { UserScreen } = await import('@app/users');
|
||||
return { Component: UserScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'chats/:pubkey',
|
||||
async lazy() {
|
||||
const { ChatScreen } = await import('@app/chats');
|
||||
return { Component: ChatScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/splashscreen',
|
||||
element: <SplashScreen />,
|
||||
errorElement: <ErrorScreen />,
|
||||
async lazy() {
|
||||
const { SplashScreen } = await import('@app/splash');
|
||||
return { Component: SplashScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/auth',
|
||||
element: <AuthLayout />,
|
||||
children: [
|
||||
{ path: 'welcome', element: <WelcomeScreen /> },
|
||||
{
|
||||
path: 'welcome',
|
||||
async lazy() {
|
||||
const { WelcomeScreen } = await import('@app/auth/welcome');
|
||||
return { Component: WelcomeScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'import',
|
||||
element: <AuthImportScreen />,
|
||||
children: [
|
||||
{ path: '', element: <ImportStep1Screen /> },
|
||||
{ path: 'step-2', element: <ImportStep2Screen /> },
|
||||
{ path: 'step-3', element: <ImportStep3Screen /> },
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { ImportStep1Screen } = await import('@app/auth/import/step-1');
|
||||
return { Component: ImportStep1Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-2',
|
||||
async lazy() {
|
||||
const { ImportStep2Screen } = await import('@app/auth/import/step-2');
|
||||
return { Component: ImportStep2Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-3',
|
||||
async lazy() {
|
||||
const { ImportStep3Screen } = await import('@app/auth/import/step-3');
|
||||
return { Component: ImportStep3Screen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
element: <AuthCreateScreen />,
|
||||
children: [
|
||||
{ path: '', element: <CreateStep1Screen /> },
|
||||
{ path: 'step-2', element: <CreateStep2Screen /> },
|
||||
{ path: 'step-3', element: <CreateStep3Screen /> },
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { CreateStep1Screen } = await import('@app/auth/create/step-1');
|
||||
return { Component: CreateStep1Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-2',
|
||||
async lazy() {
|
||||
const { CreateStep2Screen } = await import('@app/auth/create/step-2');
|
||||
return { Component: CreateStep2Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-3',
|
||||
async lazy() {
|
||||
const { CreateStep3Screen } = await import('@app/auth/create/step-3');
|
||||
return { Component: CreateStep3Screen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'onboarding',
|
||||
element: <OnboardingScreen />,
|
||||
children: [
|
||||
{ path: '', element: <OnboardStep1Screen /> },
|
||||
{ path: 'step-2', element: <OnboardStep2Screen /> },
|
||||
{ path: 'step-3', element: <OnboardStep3Screen /> },
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { OnboardStep1Screen } = await import('@app/auth/onboarding/step-1');
|
||||
return { Component: OnboardStep1Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-2',
|
||||
async lazy() {
|
||||
const { OnboardStep2Screen } = await import('@app/auth/onboarding/step-2');
|
||||
return { Component: OnboardStep2Screen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'step-3',
|
||||
async lazy() {
|
||||
const { OnboardStep3Screen } = await import('@app/auth/onboarding/step-3');
|
||||
return { Component: OnboardStep3Screen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{ path: 'unlock', element: <UnlockScreen /> },
|
||||
{ path: 'migrate', element: <MigrateScreen /> },
|
||||
{ path: 'reset', element: <ResetScreen /> },
|
||||
{
|
||||
path: 'unlock',
|
||||
async lazy() {
|
||||
const { UnlockScreen } = await import('@app/auth/unlock');
|
||||
return { Component: UnlockScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'migrate',
|
||||
async lazy() {
|
||||
const { MigrateScreen } = await import('@app/auth/migrate');
|
||||
return { Component: MigrateScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'reset',
|
||||
async lazy() {
|
||||
const { ResetScreen } = await import('@app/auth/reset');
|
||||
return { Component: ResetScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
element: <SettingsLayout />,
|
||||
children: [
|
||||
{ path: 'general', element: <GeneralSettingsScreen /> },
|
||||
{ path: 'shortcuts', element: <ShortcutsSettingsScreen /> },
|
||||
{ path: 'account', element: <AccountSettingsScreen /> },
|
||||
{
|
||||
path: 'general',
|
||||
async lazy() {
|
||||
const { GeneralSettingsScreen } = await import('@app/settings/general');
|
||||
return { Component: GeneralSettingsScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'shortcuts',
|
||||
async lazy() {
|
||||
const { ShortcutsSettingsScreen } = await import('@app/settings/shortcuts');
|
||||
return { Component: ShortcutsSettingsScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'account',
|
||||
async lazy() {
|
||||
const { AccountSettingsScreen } = await import('@app/settings/account');
|
||||
return { Component: AccountSettingsScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@ -1,50 +1,54 @@
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { getActiveAccount, updateLastLogin } from '@libs/storage';
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { updateLastLogin } from '@libs/storage';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
|
||||
import { useAccount } from '@utils/hooks/useAccount';
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
const account = await getActiveAccount();
|
||||
|
||||
export function SplashScreen() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { ndk, relayUrls } = useNDK();
|
||||
const { status, account } = useAccount();
|
||||
const { fetchChats, fetchNotes } = useNostr();
|
||||
|
||||
if (!account) {
|
||||
setTimeout(async () => await invoke('close_splashscreen'), 500);
|
||||
}
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const skip = async () => {
|
||||
await invoke('close_splashscreen');
|
||||
};
|
||||
|
||||
const prefetch = async () => {
|
||||
const onboarding = localStorage.getItem('onboarding');
|
||||
const step = JSON.parse(onboarding).state.step || null;
|
||||
if (step) await invoke('close_splashscreen');
|
||||
|
||||
const notes = await fetchNotes();
|
||||
const chats = await fetchChats();
|
||||
|
||||
if (notes.status === 'ok' && chats.status === 'ok') {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
await updateLastLogin(now);
|
||||
invoke('close_splashscreen');
|
||||
} else {
|
||||
setLoading(false);
|
||||
console.log('fetch notes failed, error: ', notes.message);
|
||||
console.log('fetch chats failed, error: ', chats.message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function prefetch() {
|
||||
const onboarding = localStorage.getItem('onboarding');
|
||||
const step = JSON.parse(onboarding).state.step || null;
|
||||
if (step) await invoke('close_splashscreen');
|
||||
|
||||
const notes = await fetchNotes();
|
||||
const chats = await fetchChats();
|
||||
|
||||
if (notes.status === 'ok' && chats.status === 'ok') {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
await updateLastLogin(now);
|
||||
invoke('close_splashscreen');
|
||||
} else {
|
||||
setLoading(false);
|
||||
console.log('fetch notes failed, error: ', notes.message);
|
||||
console.log('fetch chats failed, error: ', chats.message);
|
||||
}
|
||||
if (status === 'success' && !account) {
|
||||
invoke('close_splashscreen');
|
||||
}
|
||||
|
||||
if (account && loading) {
|
||||
if (ndk && account) {
|
||||
console.log('prefetching...');
|
||||
prefetch();
|
||||
}
|
||||
}, []);
|
||||
}, [ndk, account]);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-screen w-screen items-center justify-center bg-black">
|
||||
@ -55,9 +59,11 @@ export function SplashScreen() {
|
||||
{loading ? (
|
||||
<div className="mt-2 flex flex-col gap-1 text-center">
|
||||
<h3 className="text-lg font-semibold leading-none text-white">
|
||||
Prefetching data
|
||||
{!ndk
|
||||
? 'Connecting to relay...'
|
||||
: `Connected to ${relayUrls.length} relays`}
|
||||
</h3>
|
||||
<p className="text-white/50">
|
||||
<p className="text-sm text-white/50">
|
||||
This may take a few seconds, please don't close app.
|
||||
</p>
|
||||
</div>
|
||||
@ -66,8 +72,8 @@ export function SplashScreen() {
|
||||
<h3 className="text-lg font-semibold leading-none text-white">
|
||||
Something wrong!
|
||||
</h3>
|
||||
<p className="text-white/50">
|
||||
Prefetching process failed, click skip to continue.
|
||||
<p className="text-sm text-white/50">
|
||||
Connect process failed, click skip to continue.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// inspire by: https://github.com/nostr-dev-kit/ndk-react/
|
||||
import NDK from '@nostr-dev-kit/ndk';
|
||||
import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
|
||||
import { fetch } from '@tauri-apps/plugin-http';
|
||||
import { NostrFetcher } from 'nostr-fetch';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
@ -15,18 +16,52 @@ export const NDKInstance = () => {
|
||||
|
||||
const cacheAdapter = useMemo(() => new TauriAdapter(), []);
|
||||
const fetcher = useMemo<NostrFetcher>(
|
||||
() => NostrFetcher.withCustomPool(ndkAdapter(ndk)),
|
||||
() => (ndk ? NostrFetcher.withCustomPool(ndkAdapter(ndk)) : undefined),
|
||||
[ndk]
|
||||
);
|
||||
|
||||
// TODO: fully support NIP-11
|
||||
async function verifyRelays(relays: string[]) {
|
||||
const verifiedRelays: string[] = [];
|
||||
|
||||
for (const relay of relays) {
|
||||
let url: string;
|
||||
|
||||
if (relay.startsWith('ws')) {
|
||||
url = relay.replace('ws', 'http');
|
||||
}
|
||||
|
||||
if (relay.startsWith('wss')) {
|
||||
url = relay.replace('wss', 'https');
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { Accept: 'application/nostr+json' },
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
console.log('relay information: ', data);
|
||||
verifiedRelays.push(relay);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('fetch error', e);
|
||||
}
|
||||
}
|
||||
|
||||
return verifiedRelays;
|
||||
}
|
||||
|
||||
async function initNDK() {
|
||||
let explicitRelayUrls: string[];
|
||||
const explicitRelayUrlsFromDB = await getExplicitRelayUrls();
|
||||
|
||||
if (explicitRelayUrlsFromDB) {
|
||||
explicitRelayUrls = explicitRelayUrlsFromDB;
|
||||
explicitRelayUrls = await verifyRelays(explicitRelayUrlsFromDB);
|
||||
} else {
|
||||
explicitRelayUrls = FULL_RELAYS;
|
||||
explicitRelayUrls = await verifyRelays(FULL_RELAYS);
|
||||
}
|
||||
|
||||
const instance = new NDK({ explicitRelayUrls, cacheAdapter });
|
||||
@ -34,7 +69,7 @@ export const NDKInstance = () => {
|
||||
try {
|
||||
await instance.connect();
|
||||
} catch (error) {
|
||||
console.error('NDK instance init failed: ', error);
|
||||
throw new Error('NDK instance init failed: ', error);
|
||||
}
|
||||
|
||||
setNDK(instance);
|
||||
|
||||
@ -20,18 +20,17 @@ const NDKContext = createContext<NDKContext>({
|
||||
const NDKProvider = ({ children }: PropsWithChildren<object>) => {
|
||||
const { ndk, relayUrls, fetcher } = NDKInstance();
|
||||
|
||||
if (ndk)
|
||||
return (
|
||||
<NDKContext.Provider
|
||||
value={{
|
||||
ndk,
|
||||
relayUrls,
|
||||
fetcher,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</NDKContext.Provider>
|
||||
);
|
||||
return (
|
||||
<NDKContext.Provider
|
||||
value={{
|
||||
ndk,
|
||||
relayUrls,
|
||||
fetcher,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</NDKContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const useNDK = () => {
|
||||
|
||||
@ -9,6 +9,7 @@ export function useAccount() {
|
||||
['currentAccount'],
|
||||
async () => {
|
||||
const account = await getActiveAccount();
|
||||
console.log('active account: ', account);
|
||||
if (account?.pubkey) {
|
||||
const user = ndk.getUser({ hexpubkey: account?.pubkey });
|
||||
await user.fetchProfile();
|
||||
@ -17,6 +18,7 @@ export function useAccount() {
|
||||
return account;
|
||||
},
|
||||
{
|
||||
enabled: !!ndk,
|
||||
staleTime: Infinity,
|
||||
refetchOnMount: false,
|
||||
refetchOnWindowFocus: false,
|
||||
|
||||
@ -70,6 +70,8 @@ export function useNostr() {
|
||||
|
||||
async function fetchNotes(prevFollow?: string[]) {
|
||||
try {
|
||||
if (!ndk) return { status: 'failed', message: 'NDK instance not found' };
|
||||
|
||||
const network = await fetchNetwork(prevFollow);
|
||||
const totalNotes = await countTotalNotes();
|
||||
const lastLogin = await getLastLogin();
|
||||
@ -112,6 +114,8 @@ export function useNostr() {
|
||||
|
||||
async function fetchChats() {
|
||||
try {
|
||||
if (!ndk) return { status: 'failed', message: 'NDK instance not found' };
|
||||
|
||||
const lastLogin = await getLastLogin();
|
||||
const incomingMessages = await fetcher.fetchAllEvents(
|
||||
relayUrls,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user