91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
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 (
|
|
<div className="mx-auto w-full max-w-md">
|
|
<div className="mb-4 pb-4">
|
|
<h1 className="text-center text-2xl font-semibold text-white">
|
|
{loading ? 'Downloading...' : 'Your Nostr profile'}
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="rounded-lg border-t border-white/10 bg-white/20 px-3 py-3">
|
|
<User pubkey={db.account.pubkey} variant="simple" />
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
|
|
onClick={() => submit()}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<span className="w-5" />
|
|
<span>It might take a bit, please patient...</span>
|
|
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="w-5" />
|
|
<span>Continue</span>
|
|
<ArrowRightCircleIcon className="h-5 w-5" />
|
|
</>
|
|
)}
|
|
</button>
|
|
<span className="text-center text-sm text-white/50">
|
|
By clicking 'Continue', Lume will download your old relay list and
|
|
metadata. It may take a bit
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|