-
Profile setup complete!
+
{t("onboarding.finish.title")}
- You can exit the setup here and start using Lume.
+ {t("onboarding.finish.subtitle")}
@@ -44,7 +46,11 @@ export function OnboardingFinishScreen() {
onClick={finish}
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
>
- {loading ?
: "Close"}
+ {loading ? (
+
+ ) : (
+ t("global.close")
+ )}
- Report a issue
+ {t("onboarding.finish.report")}
diff --git a/packages/ui/src/onboarding/follow.tsx b/packages/ui/src/onboarding/follow.tsx
deleted file mode 100644
index 3bc2df5a..00000000
--- a/packages/ui/src/onboarding/follow.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import { User, useArk } from "@lume/ark";
-import {
- ArrowLeftIcon,
- CancelIcon,
- ChevronDownIcon,
- LoaderIcon,
- PlusIcon,
-} from "@lume/icons";
-import { cn } from "@lume/utils";
-import * as Accordion from "@radix-ui/react-accordion";
-import { useQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
-import { nip19 } from "nostr-tools";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { toast } from "sonner";
-
-const POPULAR_USERS = [
- "npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6",
- "npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m",
- "npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s",
- "npub1gcxzte5zlkncx26j68ez60fzkvtkm9e0vrwdcvsjakxf9mu9qewqlfnj5z",
- "npub1az9xj85cmxv8e9j9y80lvqp97crsqdu2fpu3srwthd99qfu9qsgstam8y8",
- "npub1a2cww4kn9wqte4ry70vyfwqyqvpswksna27rtxd8vty6c74era8sdcw83a",
- "npub168ghgug469n4r2tuyw05dmqhqv5jcwm7nxytn67afmz8qkc4a4zqsu2dlc",
- "npub133vj8ycevdle0cq8mtgddq0xtn34kxkwxvak983dx0u5vhqnycyqj6tcza",
- "npub18ams6ewn5aj2n3wt2qawzglx9mr4nzksxhvrdc4gzrecw7n5tvjqctp424",
- "npub1r0rs5q2gk0e3dk3nlc7gnu378ec6cnlenqp8a3cjhyzu6f8k5sgs4sq9ac",
- "npub1prya33fnqerq0fljwjtp77ehtu7jlsjt5ydhwveuwmqdsdm6k8esk42xcv",
- "npub19mduaf5569jx9xz555jcx3v06mvktvtpu0zgk47n4lcpjsz43zzqhj6vzk",
-];
-
-const LUME_USERS = [
- "npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445",
-];
-
-export function OnboardingFollowScreen() {
- const ark = useArk();
- const navigate = useNavigate();
-
- const { isLoading, isError, data } = useQuery({
- queryKey: ["trending-users"],
- queryFn: async ({ signal }: { signal: AbortSignal }) => {
- const res = await fetch("https://api.nostr.band/v0/trending/profiles", {
- signal,
- });
- if (!res.ok) {
- throw new Error("Failed to fetch trending users from nostr.band API.");
- }
- 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);
-
- if (!follows.length) return navigate("/finish");
-
- const publish = await ark.newContactList({
- tags: follows.map((item) => {
- if (item.startsWith("npub1"))
- return ["p", nip19.decode(item).data as string];
- return ["p", item];
- }),
- });
-
- if (publish) {
- setLoading(false);
- return navigate("/finish");
- }
- } catch (e) {
- setLoading(false);
- toast.error(String(e));
- }
- };
-
- return (
-
-
- Dive into the nostrverse
-
-
-
-
- Nostr is fun when we are together. Try following some users that
- interest you to build up your timeline.
-
-
-
-
- Recommended
-
-
-
-
- {POPULAR_USERS.map((pubkey) => (
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
- Trending users
-
-
-
-
- {isLoading ? (
-
-
-
- ) : isError ? (
-
- Error. Cannot get trending users
-
- ) : (
- data?.profiles.map((item: { pubkey: string }) => (
-
-
-
-
-
-
-
-
-
-
-
- ))
- )}
-
-
-
-
-
- Lume HQ
-
-
-
-
- {LUME_USERS.map((pubkey) => (
-
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/packages/ui/src/onboarding/home.tsx b/packages/ui/src/onboarding/home.tsx
index fa863d75..1de9984b 100644
--- a/packages/ui/src/onboarding/home.tsx
+++ b/packages/ui/src/onboarding/home.tsx
@@ -2,10 +2,13 @@ import { ArrowRightIcon, PopperFilledIcon } from "@lume/icons";
import { onboardingAtom } from "@lume/utils";
import { motion } from "framer-motion";
import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
export function OnboardingHomeScreen() {
const navigate = useNavigate();
+
+ const [t] = useTranslation();
const [onboarding, setOnboarding] = useAtom(onboardingAtom);
return (
@@ -17,11 +20,9 @@ export function OnboardingHomeScreen() {
>
-
- Your account was successfully created!
-
+
{t("onboarding.home.title")}
- For starters, let's set up your profile.
+ {t("onboarding.home.subtitle")}
@@ -32,7 +33,7 @@ export function OnboardingHomeScreen() {
}
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
>
- Profile Settings
+ {t("onboarding.home.profileSettings")}
diff --git a/packages/ui/src/onboarding/interest.tsx b/packages/ui/src/onboarding/interest.tsx
index 8b661a9c..3d458ccd 100644
--- a/packages/ui/src/onboarding/interest.tsx
+++ b/packages/ui/src/onboarding/interest.tsx
@@ -2,6 +2,7 @@ import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
import { useStorage } from "@lume/storage";
import { TOPICS, cn } from "@lume/utils";
import { useState } from "react";
+import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -9,6 +10,7 @@ export function OnboardingInterestScreen() {
const storage = useStorage();
const navigate = useNavigate();
+ const [t] = useTranslation();
const [loading, setLoading] = useState(false);
const [hashtags, setHashtags] = useState([]);
@@ -49,9 +51,9 @@ export function OnboardingInterestScreen() {
-
Interests
+
{t("interests.title")}
- Pick things you'd like to see in your home feed.
+ {t("interests.subtitle")}
@@ -74,7 +76,7 @@ export function OnboardingInterestScreen() {
onClick={() => toggleAll(topic.content)}
className="text-sm font-medium text-blue-500"
>
- Follow All
+ {t("interests.followAll")}
@@ -105,7 +107,7 @@ export function OnboardingInterestScreen() {
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
>
- Back
+ {t("global.back")}
) : (
- "Continue"
+ t("global.continue")
)}
diff --git a/packages/ui/src/onboarding/profile.tsx b/packages/ui/src/onboarding/profile.tsx
index d61757e5..b4a0a84b 100644
--- a/packages/ui/src/onboarding/profile.tsx
+++ b/packages/ui/src/onboarding/profile.tsx
@@ -7,6 +7,7 @@ import { motion } from "framer-motion";
import { minidenticon } from "minidenticons";
import { useState } from "react";
import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import { AvatarUploadButton } from "../avatarUploadButton";
@@ -20,6 +21,7 @@ export function OnboardingProfileScreen() {
const queryClient = useQueryClient();
const navigate = useNavigate();
+ const { t } = useTranslation();
const { register, handleSubmit } = useForm();
const svgURI = `data:image/svg+xml;utf8,${encodeURIComponent(
@@ -71,9 +73,9 @@ export function OnboardingProfileScreen() {
-
About you
+
{t("onboarding.profile.title")}
- Tell Lume about yourself to start building your home feed.
+ {t("onboarding.profile.subtitle")}
@@ -89,7 +91,7 @@ export function OnboardingProfileScreen() {
className="flex flex-col px-8 gap-4"
>
-
Avatar
+
{t("user.avatar")}
{picture.length ? (