diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 0b7d007a..e088f454 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -68,6 +68,7 @@ const UserListsPage = lazy(() => import("./pages/UserListsPage").then(m => ({ de const WalletSettingsPage = lazy(() => import("./pages/WalletSettingsPage").then(m => ({ default: m.WalletSettingsPage }))); const WalletPage = lazy(() => import("./pages/WalletPage").then(m => ({ default: m.WalletPage }))); const WorldPage = lazy(() => import("./pages/WorldPage").then(m => ({ default: m.WorldPage }))); +const VerifiedPage = lazy(() => import("./pages/VerifiedPage").then(m => ({ default: m.VerifiedPage }))); const FollowPage = lazy(() => import("./pages/FollowPage").then(m => ({ default: m.FollowPage }))); const RemoteLoginSuccessPage = lazy(() => import("./pages/RemoteLoginSuccessPage").then(m => ({ default: m.RemoteLoginSuccessPage }))); @@ -169,6 +170,7 @@ export function AppRouter() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/lib/agoraDefaults.ts b/src/lib/agoraDefaults.ts index cbfc8219..744f40cf 100644 --- a/src/lib/agoraDefaults.ts +++ b/src/lib/agoraDefaults.ts @@ -36,5 +36,5 @@ export const VERIFIED_FOLLOW_PACK = { relays: decoded.data.relays, } as const; -/** Sidebar path for the verified follow pack — routes to the rich FollowPackView. */ -export const VERIFIED_FOLLOW_PACK_PATH = `/follow/${VERIFIED_FOLLOW_PACK_NADDR}`; +/** Sidebar path for the in-app Verified page. */ +export const VERIFIED_PAGE_PATH = '/verified'; diff --git a/src/lib/sidebarItems.tsx b/src/lib/sidebarItems.tsx index 50dade6a..b69641e7 100644 --- a/src/lib/sidebarItems.tsx +++ b/src/lib/sidebarItems.tsx @@ -35,7 +35,7 @@ import { WalletMinimal, Zap, } from "lucide-react"; -import { VERIFIED_FOLLOW_PACK_PATH } from "@/lib/agoraDefaults"; +import { VERIFIED_PAGE_PATH } from "@/lib/agoraDefaults"; import { CardsIcon } from "@/components/icons/CardsIcon"; import { ChestIcon } from "@/components/icons/ChestIcon"; @@ -125,7 +125,7 @@ export const SIDEBAR_ITEMS: SidebarItemDef[] = [ { id: "verified", label: "Verified", - path: VERIFIED_FOLLOW_PACK_PATH, + path: VERIFIED_PAGE_PATH, icon: BadgeCheck, }, { diff --git a/src/pages/VerifiedPage.tsx b/src/pages/VerifiedPage.tsx new file mode 100644 index 00000000..cc4bdfa5 --- /dev/null +++ b/src/pages/VerifiedPage.tsx @@ -0,0 +1,62 @@ +import { useSeoMeta } from '@unhead/react'; +import { BadgeCheck, Users } from 'lucide-react'; +import { useAppContext } from '@/hooks/useAppContext'; +import { useAddrEvent } from '@/hooks/useEvent'; +import { VERIFIED_FOLLOW_PACK } from '@/lib/agoraDefaults'; +import { PageHeader } from '@/components/PageHeader'; +import { FollowPackDetailContent } from '@/components/FollowPackDetailContent'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Skeleton } from '@/components/ui/skeleton'; + +export function VerifiedPage() { + const { config } = useAppContext(); + const { data: event, isLoading, isError } = useAddrEvent( + { + kind: VERIFIED_FOLLOW_PACK.kind, + pubkey: VERIFIED_FOLLOW_PACK.pubkey, + identifier: VERIFIED_FOLLOW_PACK.identifier, + }, + VERIFIED_FOLLOW_PACK.relays, + ); + + useSeoMeta({ + title: `Verified | ${config.appName}`, + description: 'Discover and follow verified accounts curated for Agora.', + }); + + return ( +
+ } /> +
+ {isLoading ? ( +
+ + + + +
+ ) : isError || !event ? ( +
+ + + + + Verified pack unavailable + + + +

+ We could not load the verified follow pack right now. Please try again shortly. +

+
+
+
+ ) : ( + + )} +
+
+ ); +} + +export default VerifiedPage;