mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-01 09:21:07 +00:00
feat: update onboarding flow
This commit is contained in:
parent
2c8571ecc7
commit
e0d4c53098
@ -85,7 +85,7 @@ export function CreateAccountScreen() {
|
|||||||
|
|
||||||
setOnboarding(true);
|
setOnboarding(true);
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding", { replace: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSubmit = async (data: { username: string; email: string }) => {
|
const onSubmit = async (data: { username: string; email: string }) => {
|
||||||
@ -164,7 +164,7 @@ export function CreateAccountScreen() {
|
|||||||
setOnboarding(true);
|
setOnboarding(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding", { replace: true });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
toast.error(String(e));
|
toast.error(String(e));
|
||||||
|
@ -35,7 +35,7 @@ export function LoginWithKey() {
|
|||||||
privkey: privkey,
|
privkey: privkey,
|
||||||
});
|
});
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding", { replace: true });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setError("nsec", {
|
setError("nsec", {
|
||||||
@ -98,7 +98,7 @@ export function LoginWithKey() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid}
|
disabled={!isValid || loading}
|
||||||
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"
|
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 ? (
|
{loading ? (
|
||||||
|
@ -52,7 +52,7 @@ export function LoginWithNsecbunker() {
|
|||||||
privkey: localSigner.privateKey,
|
privkey: localSigner.privateKey,
|
||||||
});
|
});
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
return navigate("/auth/onboarding", { replace: true });
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setError("npub", {
|
setError("npub", {
|
||||||
@ -93,7 +93,7 @@ export function LoginWithNsecbunker() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid}
|
disabled={!isValid || loading}
|
||||||
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"
|
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 ? (
|
{loading ? (
|
||||||
|
@ -42,24 +42,30 @@ export function LoginWithOAuth() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!req.ok)
|
if (!req.ok) {
|
||||||
|
setLoading(false);
|
||||||
return toast.error(
|
return toast.error(
|
||||||
"Cannot verify your NIP-05 address, please try again later.",
|
"Cannot verify your NIP-05 address, please try again later.",
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const res: NIP05 = await req.json();
|
const res: NIP05 = await req.json();
|
||||||
|
|
||||||
if (!res.names[localPath.toLowerCase()] || !res.names[localPath])
|
if (!res.names[localPath.toLowerCase()] || !res.names[localPath]) {
|
||||||
|
setLoading(false);
|
||||||
return toast.error(
|
return toast.error(
|
||||||
"Cannot verify your NIP-05 address, please try again later.",
|
"Cannot verify your NIP-05 address, please try again later.",
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const pubkey =
|
const pubkey =
|
||||||
(res.names[localPath] as string) ||
|
(res.names[localPath] as string) ||
|
||||||
(res.names[localPath.toLowerCase()] as string);
|
(res.names[localPath.toLowerCase()] as string);
|
||||||
|
|
||||||
if (!res.nip46[pubkey])
|
if (!res.nip46[pubkey]) {
|
||||||
|
setLoading(false);
|
||||||
return toast.error("Cannot found NIP-46 with this address");
|
return toast.error("Cannot found NIP-46 with this address");
|
||||||
|
}
|
||||||
|
|
||||||
const nip46Relays = res.nip46[pubkey] as unknown as string[];
|
const nip46Relays = res.nip46[pubkey] as unknown as string[];
|
||||||
|
|
||||||
@ -73,20 +79,39 @@ export function LoginWithOAuth() {
|
|||||||
|
|
||||||
const localSigner = NDKPrivateKeySigner.generate();
|
const localSigner = NDKPrivateKeySigner.generate();
|
||||||
const remoteSigner = new NDKNip46Signer(bunker, pubkey, localSigner);
|
const remoteSigner = new NDKNip46Signer(bunker, pubkey, localSigner);
|
||||||
await remoteSigner.blockUntilReady();
|
|
||||||
|
|
||||||
ark.updateNostrSigner({ signer: remoteSigner });
|
// handle auth url request
|
||||||
|
let authWindow: Window;
|
||||||
await storage.createSetting("nsecbunker", "1");
|
remoteSigner.addListener("authUrl", (authUrl: string) => {
|
||||||
await storage.createAccount({
|
authWindow = new Window(`auth-${pubkey}`, {
|
||||||
pubkey,
|
url: authUrl,
|
||||||
privkey: localSigner.privateKey,
|
title: "Login",
|
||||||
|
titleBarStyle: "overlay",
|
||||||
|
width: 415,
|
||||||
|
height: 600,
|
||||||
|
center: true,
|
||||||
|
closable: false,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return navigate("/auth/onboarding");
|
const remoteUser = await remoteSigner.blockUntilReady();
|
||||||
|
|
||||||
|
if (remoteUser) {
|
||||||
|
authWindow.close();
|
||||||
|
|
||||||
|
ark.updateNostrSigner({ signer: remoteSigner });
|
||||||
|
|
||||||
|
await storage.createSetting("nsecbunker", "1");
|
||||||
|
await storage.createAccount({
|
||||||
|
pubkey,
|
||||||
|
privkey: localSigner.privateKey,
|
||||||
|
});
|
||||||
|
|
||||||
|
return navigate("/auth/onboarding", { replace: true });
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setError("npub", {
|
setError("nip05", {
|
||||||
type: "manual",
|
type: "manual",
|
||||||
message: String(e),
|
message: String(e),
|
||||||
});
|
});
|
||||||
@ -122,7 +147,7 @@ export function LoginWithOAuth() {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid}
|
disabled={!isValid || loading}
|
||||||
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"
|
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 ? (
|
{loading ? (
|
||||||
|
@ -10,6 +10,7 @@ import {
|
|||||||
} from "@tauri-apps/plugin-notification";
|
} from "@tauri-apps/plugin-notification";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
export function OnboardingScreen() {
|
export function OnboardingScreen() {
|
||||||
const ark = useArk();
|
const ark = useArk();
|
||||||
@ -18,24 +19,41 @@ export function OnboardingScreen() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [apiKey, setAPIKey] = useState("");
|
||||||
const [settings, setSettings] = useState({
|
const [settings, setSettings] = useState({
|
||||||
autoupdate: false,
|
|
||||||
notification: false,
|
notification: false,
|
||||||
|
lowPower: false,
|
||||||
|
translation: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleAutoupdate = async () => {
|
const toggleLowPower = async () => {
|
||||||
await storage.createSetting("autoupdate", String(+!settings.autoupdate));
|
await storage.createSetting("lowPower", String(+!settings.lowPower));
|
||||||
// update state
|
setSettings((state) => ({ ...state, autoupdate: !settings.lowPower }));
|
||||||
setSettings((prev) => ({ ...prev, autoupdate: !settings.autoupdate }));
|
};
|
||||||
|
|
||||||
|
const toggleTranslation = async () => {
|
||||||
|
await storage.createSetting("translation", String(+!settings.translation));
|
||||||
|
setSettings((state) => ({ ...state, translation: !settings.translation }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleNofitication = async () => {
|
const toggleNofitication = async () => {
|
||||||
await requestPermission();
|
await requestPermission();
|
||||||
// update state
|
setSettings((state) => ({
|
||||||
setSettings((prev) => ({ ...prev, notification: !settings.notification }));
|
...state,
|
||||||
|
notification: !settings.notification,
|
||||||
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const completeAuth = async () => {
|
const completeAuth = async () => {
|
||||||
|
if (settings.translation) {
|
||||||
|
if (!apiKey.length)
|
||||||
|
return toast.warning(
|
||||||
|
"You need to provide Translate API if enable translation",
|
||||||
|
);
|
||||||
|
|
||||||
|
await storage.createSetting("translateApiKey", apiKey);
|
||||||
|
}
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
// get account contacts
|
// get account contacts
|
||||||
@ -71,17 +89,23 @@ export function OnboardingScreen() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function loadSettings() {
|
async function loadSettings() {
|
||||||
|
// get notification permission
|
||||||
const permissionGranted = await isPermissionGranted();
|
const permissionGranted = await isPermissionGranted();
|
||||||
setSettings((prev) => ({ ...prev, notification: permissionGranted }));
|
setSettings((prev) => ({ ...prev, notification: permissionGranted }));
|
||||||
|
|
||||||
|
// get other settings
|
||||||
const data = await storage.getAllSettings();
|
const data = await storage.getAllSettings();
|
||||||
if (!data) return;
|
|
||||||
|
|
||||||
for (const item of data) {
|
for (const item of data) {
|
||||||
if (item.key === "autoupdate")
|
if (item.key === "lowPower")
|
||||||
setSettings((prev) => ({
|
setSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
autoupdate: !!parseInt(item.value),
|
lowPower: !!parseInt(item.value),
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (item.key === "translation")
|
||||||
|
setSettings((prev) => ({
|
||||||
|
...prev,
|
||||||
|
translation: !!parseInt(item.value),
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -101,24 +125,6 @@ export function OnboardingScreen() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
|
||||||
<Switch.Root
|
|
||||||
checked={settings.autoupdate}
|
|
||||||
onClick={() => toggleAutoupdate()}
|
|
||||||
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
|
||||||
>
|
|
||||||
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
||||||
</Switch.Root>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold">
|
|
||||||
Auto check for update on Login
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-500">
|
|
||||||
Keep Lume up to date with latest version, always have new
|
|
||||||
features and bug free.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
||||||
<Switch.Root
|
<Switch.Root
|
||||||
checked={settings.notification}
|
checked={settings.notification}
|
||||||
@ -135,6 +141,51 @@ export function OnboardingScreen() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
||||||
|
<Switch.Root
|
||||||
|
checked={settings.lowPower}
|
||||||
|
onClick={() => toggleLowPower()}
|
||||||
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
||||||
|
>
|
||||||
|
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||||
|
</Switch.Root>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">Low Power Mode</h3>
|
||||||
|
<p className="text-neutral-500">
|
||||||
|
Limited relay connection and hide all media, sustainable for low
|
||||||
|
network environment
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-full items-start justify-between gap-4 rounded-xl px-5 py-4 bg-neutral-950">
|
||||||
|
<Switch.Root
|
||||||
|
checked={settings.translation}
|
||||||
|
onClick={() => toggleTranslation()}
|
||||||
|
className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full outline-none data-[state=checked]:bg-blue-500 bg-neutral-800"
|
||||||
|
>
|
||||||
|
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
||||||
|
</Switch.Root>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-lg">
|
||||||
|
Translation (nostr.wine)
|
||||||
|
</h3>
|
||||||
|
<p className="text-neutral-500">
|
||||||
|
Translate text to your preferred language, powered by Nostr Wine
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{settings.translation ? (
|
||||||
|
<div className="flex flex-col w-full items-start justify-between gap-2 rounded-xl px-5 py-4 bg-neutral-950">
|
||||||
|
<h3 className="font-semibold">Translate API Key</h3>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
spellCheck={false}
|
||||||
|
value={apiKey}
|
||||||
|
onChange={(e) => setAPIKey(e.target.value)}
|
||||||
|
className="w-full text-xl border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-11 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
|
<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
|
||||||
<InfoIcon className="size-8" />
|
<InfoIcon className="size-8" />
|
||||||
<p>
|
<p>
|
||||||
|
@ -1,26 +1,326 @@
|
|||||||
import { cn } from "@lume/utils";
|
import { cn } from "@lume/utils";
|
||||||
import { NDKKind } from "@nostr-dev-kit/ndk";
|
import { NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
import { useNoteContext, useRichContent } from "../..";
|
import { fetch } from "@tauri-apps/plugin-http";
|
||||||
|
import getUrls from "get-urls";
|
||||||
|
import { nanoid } from "nanoid";
|
||||||
|
import { nip19 } from "nostr-tools";
|
||||||
|
import { ReactNode, useMemo, useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import reactStringReplace from "react-string-replace";
|
||||||
|
import {
|
||||||
|
Hashtag,
|
||||||
|
ImagePreview,
|
||||||
|
LinkPreview,
|
||||||
|
MentionNote,
|
||||||
|
MentionUser,
|
||||||
|
VideoPreview,
|
||||||
|
useNoteContext,
|
||||||
|
useStorage,
|
||||||
|
} from "../..";
|
||||||
import { NIP89 } from "./nip89";
|
import { NIP89 } from "./nip89";
|
||||||
|
|
||||||
|
const NOSTR_MENTIONS = [
|
||||||
|
"@npub1",
|
||||||
|
"nostr:npub1",
|
||||||
|
"nostr:nprofile1",
|
||||||
|
"nostr:naddr1",
|
||||||
|
"npub1",
|
||||||
|
"nprofile1",
|
||||||
|
"naddr1",
|
||||||
|
"Nostr:npub1",
|
||||||
|
"Nostr:nprofile1",
|
||||||
|
"Nostr:naddre1",
|
||||||
|
];
|
||||||
|
|
||||||
|
const NOSTR_EVENTS = [
|
||||||
|
"@nevent1",
|
||||||
|
"@note1",
|
||||||
|
"@nostr:note1",
|
||||||
|
"@nostr:nevent1",
|
||||||
|
"nostr:note1",
|
||||||
|
"note1",
|
||||||
|
"nostr:nevent1",
|
||||||
|
"nevent1",
|
||||||
|
"Nostr:note1",
|
||||||
|
"Nostr:nevent1",
|
||||||
|
];
|
||||||
|
|
||||||
|
// const BITCOINS = ['lnbc', 'bc1p', 'bc1q'];
|
||||||
|
|
||||||
|
const IMAGES = ["jpg", "jpeg", "gif", "png", "webp", "avif", "tiff"];
|
||||||
|
|
||||||
|
const VIDEOS = [
|
||||||
|
"mp4",
|
||||||
|
"mov",
|
||||||
|
"webm",
|
||||||
|
"wmv",
|
||||||
|
"flv",
|
||||||
|
"mts",
|
||||||
|
"avi",
|
||||||
|
"ogv",
|
||||||
|
"mkv",
|
||||||
|
"m3u8",
|
||||||
|
];
|
||||||
|
|
||||||
|
const AUDIOS = ["mp3", "ogg", "wav"];
|
||||||
|
|
||||||
export function NoteContent({
|
export function NoteContent({
|
||||||
className,
|
className,
|
||||||
}: {
|
}: {
|
||||||
className?: string;
|
className?: string;
|
||||||
}) {
|
}) {
|
||||||
|
const storage = useStorage();
|
||||||
const event = useNoteContext();
|
const event = useNoteContext();
|
||||||
const { parsedContent } = useRichContent(event.content);
|
|
||||||
|
|
||||||
if (event.kind !== NDKKind.Text) return <NIP89 className={className} />;
|
const [content, setContent] = useState(event.content);
|
||||||
|
const [translated, setTranslated] = useState(false);
|
||||||
|
|
||||||
|
const richContent = useMemo(() => {
|
||||||
|
if (event.kind !== NDKKind.Text) return content;
|
||||||
|
|
||||||
|
let parsedContent: string | ReactNode[] = content.replace(/\n+/g, "\n");
|
||||||
|
let linkPreview: string;
|
||||||
|
let images: string[] = [];
|
||||||
|
let videos: string[] = [];
|
||||||
|
let audios: string[] = [];
|
||||||
|
let events: string[] = [];
|
||||||
|
|
||||||
|
const text = parsedContent;
|
||||||
|
const words = text.split(/( |\n)/);
|
||||||
|
const urls = [...getUrls(text)];
|
||||||
|
|
||||||
|
if (storage.settings.media && !storage.settings.lowPower) {
|
||||||
|
images = urls.filter((word) =>
|
||||||
|
IMAGES.some((el) => {
|
||||||
|
const url = new URL(word);
|
||||||
|
const extension = url.pathname.split(".")[1];
|
||||||
|
if (extension === el) return true;
|
||||||
|
return false;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
videos = urls.filter((word) =>
|
||||||
|
VIDEOS.some((el) => {
|
||||||
|
const url = new URL(word);
|
||||||
|
const extension = url.pathname.split(".")[1];
|
||||||
|
if (extension === el) return true;
|
||||||
|
return false;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
audios = urls.filter((word) =>
|
||||||
|
AUDIOS.some((el) => {
|
||||||
|
const url = new URL(word);
|
||||||
|
const extension = url.pathname.split(".")[1];
|
||||||
|
if (extension === el) return true;
|
||||||
|
return false;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
events = words.filter((word) =>
|
||||||
|
NOSTR_EVENTS.some((el) => word.startsWith(el)),
|
||||||
|
);
|
||||||
|
|
||||||
|
const hashtags = words.filter((word) => word.startsWith("#"));
|
||||||
|
const mentions = words.filter((word) =>
|
||||||
|
NOSTR_MENTIONS.some((el) => word.startsWith(el)),
|
||||||
|
);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (images.length) {
|
||||||
|
for (const image of images) {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
image,
|
||||||
|
(match, i) => <ImagePreview key={match + i} url={match} />,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (videos.length) {
|
||||||
|
for (const video of videos) {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
video,
|
||||||
|
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (audios.length) {
|
||||||
|
for (const audio of audios) {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
audio,
|
||||||
|
(match, i) => <VideoPreview key={match + i} url={match} />,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hashtags.length) {
|
||||||
|
for (const hashtag of hashtags) {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
hashtag,
|
||||||
|
(match, i) => {
|
||||||
|
if (storage.settings.hashtag)
|
||||||
|
return <Hashtag key={match + i} tag={hashtag} />;
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (events.length) {
|
||||||
|
for (const event of events) {
|
||||||
|
const address = event
|
||||||
|
.replace("nostr:", "")
|
||||||
|
.replace(/[^a-zA-Z0-9]/g, "");
|
||||||
|
const decoded = nip19.decode(address);
|
||||||
|
|
||||||
|
if (decoded.type === "note") {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
event,
|
||||||
|
(match, i) => (
|
||||||
|
<MentionNote key={match + i} eventId={decoded.data} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (decoded.type === "nevent") {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
event,
|
||||||
|
(match, i) => (
|
||||||
|
<MentionNote key={match + i} eventId={decoded.data.id} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mentions.length) {
|
||||||
|
for (const mention of mentions) {
|
||||||
|
const address = mention
|
||||||
|
.replace("nostr:", "")
|
||||||
|
.replace("@", "")
|
||||||
|
.replace(/[^a-zA-Z0-9]/g, "");
|
||||||
|
const decoded = nip19.decode(address);
|
||||||
|
|
||||||
|
if (decoded.type === "npub") {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
mention,
|
||||||
|
(match, i) => (
|
||||||
|
<MentionUser key={match + i} pubkey={decoded.data} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (decoded.type === "nprofile" || decoded.type === "naddr") {
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
mention,
|
||||||
|
(match, i) => (
|
||||||
|
<MentionUser key={match + i} pubkey={decoded.data.pubkey} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
parsedContent = reactStringReplace(
|
||||||
|
parsedContent,
|
||||||
|
/(https?:\/\/\S+)/g,
|
||||||
|
(match, i) => {
|
||||||
|
const url = new URL(match);
|
||||||
|
|
||||||
|
if (!linkPreview) {
|
||||||
|
linkPreview = match;
|
||||||
|
return <LinkPreview key={match + i} url={url.toString()} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={match + i}
|
||||||
|
to={url.toString()}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="break-all font-normal text-blue-500 hover:text-blue-600"
|
||||||
|
>
|
||||||
|
{url.toString()}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
parsedContent = reactStringReplace(parsedContent, "\n", () => {
|
||||||
|
return <div key={nanoid()} className="h-3" />;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (typeof parsedContent[0] === "string") {
|
||||||
|
parsedContent[0] = parsedContent[0].trimStart();
|
||||||
|
}
|
||||||
|
|
||||||
|
return parsedContent;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("[parser] parse failed: ", e);
|
||||||
|
return parsedContent;
|
||||||
|
}
|
||||||
|
}, [content]);
|
||||||
|
|
||||||
|
const translate = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch("https://translate.nostr.wine/translate", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({
|
||||||
|
q: content,
|
||||||
|
target: "vi",
|
||||||
|
api_key: storage.settings.translateApiKey,
|
||||||
|
}),
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
setContent(data.translatedText);
|
||||||
|
setTranslated(true);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(String(e));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (event.kind !== NDKKind.Text) {
|
||||||
|
return <NIP89 className={className} />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={cn("", className)}>
|
||||||
className={cn(
|
<div className="break-p select-text whitespace-pre-line text-balance leading-normal">
|
||||||
"break-p select-text whitespace-pre-line text-balance leading-normal",
|
{richContent}
|
||||||
className,
|
</div>
|
||||||
)}
|
{storage.settings.translation ? (
|
||||||
>
|
translated ? (
|
||||||
{parsedContent}
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setTranslated(false);
|
||||||
|
setContent(event.content);
|
||||||
|
}}
|
||||||
|
className="mt-2 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
|
||||||
|
>
|
||||||
|
Show original content
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={translate}
|
||||||
|
className="mt-2 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
|
||||||
|
>
|
||||||
|
Translate to Vietnamese
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -73,7 +73,7 @@ export function useRichContent(content: string) {
|
|||||||
const words = text.split(/( |\n)/);
|
const words = text.split(/( |\n)/);
|
||||||
const urls = [...getUrls(text)];
|
const urls = [...getUrls(text)];
|
||||||
|
|
||||||
if (storage.settings.media && !storage.settings.lowPowerMode) {
|
if (storage.settings.media && !storage.settings.lowPower) {
|
||||||
images = urls.filter((word) =>
|
images = urls.filter((word) =>
|
||||||
IMAGES.some((el) => {
|
IMAGES.some((el) => {
|
||||||
const url = new URL(word);
|
const url = new URL(word);
|
||||||
@ -238,9 +238,9 @@ export function useRichContent(content: string) {
|
|||||||
parsedContent[0] = parsedContent[0].trimStart();
|
parsedContent[0] = parsedContent[0].trimStart();
|
||||||
}
|
}
|
||||||
|
|
||||||
return { parsedContent };
|
return parsedContent;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("[parser] parse failed: ", e);
|
console.warn("[parser] parse failed: ", e);
|
||||||
return { parsedContent };
|
return parsedContent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import { ArrowRightCircleIcon, LoaderIcon } from "@lume/icons";
|
|||||||
import { EmptyFeed } from "@lume/ui";
|
import { EmptyFeed } from "@lume/ui";
|
||||||
import { FETCH_LIMIT } from "@lume/utils";
|
import { FETCH_LIMIT } from "@lume/utils";
|
||||||
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
|
||||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
|
||||||
import { useEffect, useMemo, useRef } from "react";
|
import { useEffect, useMemo, useRef } from "react";
|
||||||
import { CacheSnapshot, VList, VListHandle } from "virtua";
|
import { CacheSnapshot, VList, VListHandle } from "virtua";
|
||||||
|
|
||||||
@ -47,6 +47,18 @@ export function HomeRoute({ colKey }: { colKey: string }) {
|
|||||||
if (!lastEvent) return;
|
if (!lastEvent) return;
|
||||||
return lastEvent.created_at - 1;
|
return lastEvent.created_at - 1;
|
||||||
},
|
},
|
||||||
|
initialData: () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const queryCacheData = queryClient.getQueryState([colKey])
|
||||||
|
?.data as NDKEvent[];
|
||||||
|
if (queryCacheData) {
|
||||||
|
return {
|
||||||
|
pageParams: [undefined, 1],
|
||||||
|
pages: [queryCacheData],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
staleTime: 120 * 1000,
|
||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -25,7 +25,9 @@ export class LumeStorage {
|
|||||||
hashtag: boolean;
|
hashtag: boolean;
|
||||||
depot: boolean;
|
depot: boolean;
|
||||||
tunnelUrl: string;
|
tunnelUrl: string;
|
||||||
lowPowerMode: boolean;
|
lowPower: boolean;
|
||||||
|
translation: boolean;
|
||||||
|
translateApiKey: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(db: Database, platform: Platform) {
|
constructor(db: Database, platform: Platform) {
|
||||||
@ -38,7 +40,9 @@ export class LumeStorage {
|
|||||||
hashtag: true,
|
hashtag: true,
|
||||||
depot: false,
|
depot: false,
|
||||||
tunnelUrl: "",
|
tunnelUrl: "",
|
||||||
lowPowerMode: false,
|
lowPower: false,
|
||||||
|
translation: false,
|
||||||
|
translateApiKey: "",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -55,6 +59,12 @@ export class LumeStorage {
|
|||||||
if (item.key === "media") this.settings.media = !!parseInt(item.value);
|
if (item.key === "media") this.settings.media = !!parseInt(item.value);
|
||||||
if (item.key === "depot") this.settings.depot = !!parseInt(item.value);
|
if (item.key === "depot") this.settings.depot = !!parseInt(item.value);
|
||||||
if (item.key === "tunnel_url") this.settings.tunnelUrl = item.value;
|
if (item.key === "tunnel_url") this.settings.tunnelUrl = item.value;
|
||||||
|
if (item.key === "lowPower")
|
||||||
|
this.settings.lowPower = !!parseInt(item.value);
|
||||||
|
if (item.key === "translation")
|
||||||
|
this.settings.translation = !!parseInt(item.value);
|
||||||
|
if (item.key === "translateApiKey")
|
||||||
|
this.settings.translateApiKey = item.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
const account = await this.getActiveAccount();
|
const account = await this.getActiveAccount();
|
||||||
@ -320,10 +330,13 @@ export class LumeStorage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async getColumns() {
|
public async getColumns() {
|
||||||
|
if (!this.account) return [];
|
||||||
|
|
||||||
const columns: Array<IColumn> = await this.#db.select(
|
const columns: Array<IColumn> = await this.#db.select(
|
||||||
"SELECT * FROM columns WHERE account_id = $1 ORDER BY created_at DESC;",
|
"SELECT * FROM columns WHERE account_id = $1 ORDER BY created_at DESC;",
|
||||||
[this.account.id],
|
[this.account.id],
|
||||||
);
|
);
|
||||||
|
|
||||||
return columns;
|
return columns;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -366,7 +379,9 @@ export class LumeStorage {
|
|||||||
const currentSetting = await this.checkSettingValue(key);
|
const currentSetting = await this.checkSettingValue(key);
|
||||||
|
|
||||||
if (!currentSetting) {
|
if (!currentSetting) {
|
||||||
this.settings[key] === !!parseInt(value);
|
if (key !== "translateApiKey" && key !== "tunnelUrl")
|
||||||
|
this.settings[key] === !!parseInt(value);
|
||||||
|
|
||||||
return await this.#db.execute(
|
return await this.#db.execute(
|
||||||
"INSERT OR IGNORE INTO settings (key, value) VALUES ($1, $2);",
|
"INSERT OR IGNORE INTO settings (key, value) VALUES ($1, $2);",
|
||||||
[key, value],
|
[key, value],
|
||||||
|
50
packages/types/index.d.ts
vendored
50
packages/types/index.d.ts
vendored
@ -20,19 +20,6 @@ export interface Account {
|
|||||||
relayList: string[];
|
relayList: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WidgetGroup {
|
|
||||||
title: string;
|
|
||||||
data: WidgetGroupItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WidgetGroupItem {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
content: string;
|
|
||||||
kind: number;
|
|
||||||
icon?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IColumn {
|
export interface IColumn {
|
||||||
id?: number;
|
id?: number;
|
||||||
kind: number;
|
kind: number;
|
||||||
@ -40,32 +27,6 @@ export interface IColumn {
|
|||||||
content: string;
|
content: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface WidgetProps {
|
|
||||||
id?: string;
|
|
||||||
account_id?: number;
|
|
||||||
kind: number;
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Chats {
|
|
||||||
id: string;
|
|
||||||
event_id?: string;
|
|
||||||
receiver_pubkey: string;
|
|
||||||
sender_pubkey: string;
|
|
||||||
content: string;
|
|
||||||
tags: string[][];
|
|
||||||
created_at: number;
|
|
||||||
new_messages?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Relays {
|
|
||||||
id?: string;
|
|
||||||
account_id?: number;
|
|
||||||
relay: string;
|
|
||||||
purpose?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Opengraph {
|
export interface Opengraph {
|
||||||
url: string;
|
url: string;
|
||||||
title?: string;
|
title?: string;
|
||||||
@ -97,17 +58,6 @@ export interface NostrBuildResponse {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Resource {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
image: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Resources {
|
|
||||||
title: string;
|
|
||||||
data: Array<Resource>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NDKCacheUser {
|
export interface NDKCacheUser {
|
||||||
pubkey: string;
|
pubkey: string;
|
||||||
profile: string | NDKUserProfile;
|
profile: string | NDKUserProfile;
|
||||||
|
Loading…
Reference in New Issue
Block a user