diff --git a/apps/dashboard/src/@/components/blocks/dismissible-alert.tsx b/apps/dashboard/src/@/components/blocks/dismissible-alert.tsx new file mode 100644 index 00000000000..3ed6bba4cb5 --- /dev/null +++ b/apps/dashboard/src/@/components/blocks/dismissible-alert.tsx @@ -0,0 +1,36 @@ +"use client"; + +import { XIcon } from "lucide-react"; +import { useLocalStorage } from "../../../hooks/useLocalStorage"; +import { Button } from "../ui/button"; + +export function DismissibleAlert(props: { + title: React.ReactNode; + description: React.ReactNode; + localStorageId: string; +}) { + const [isVisible, setIsVisible] = useLocalStorage( + props.localStorageId, + true, + false, + ); + + if (!isVisible) return null; + + return ( +
+ +
+

{props.title}

+
{props.description}
+
+
+ ); +} diff --git a/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx b/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx index bf51cd695d4..e9aa6ed4453 100644 --- a/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx +++ b/apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx @@ -11,7 +11,6 @@ import { useCallback, useState } from "react"; import { useActiveWallet, useDisconnect } from "thirdweb/react"; import { doLogout } from "../../login/auth-actions"; import { - getChangelogNotifications, getInboxNotifications, markNotificationAsRead, } from "../../team/components/NotificationButton/fetch-notifications"; @@ -59,7 +58,6 @@ export function AccountHeader(props: { account: props.account, client, accountAddress: props.accountAddress, - getChangelogNotifications: getChangelogNotifications, getInboxNotifications: getInboxNotifications, markNotificationAsRead: markNotificationAsRead, }; diff --git a/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx b/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx index 1fbab1996c8..78d8cd00106 100644 --- a/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx +++ b/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx @@ -64,7 +64,6 @@ function Variants(props: { email: "foo@example.com", }} client={storybookThirdwebClient} - getChangelogNotifications={() => Promise.resolve([])} getInboxNotifications={() => Promise.resolve([])} markNotificationAsRead={() => Promise.resolve()} /> diff --git a/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx b/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx index 0bf37c6ab2a..ace060deac8 100644 --- a/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx +++ b/apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx @@ -24,7 +24,6 @@ export type AccountHeaderCompProps = { account: Pick; client: ThirdwebClient; accountAddress: string; - getChangelogNotifications: () => Promise; getInboxNotifications: () => Promise; markNotificationAsRead: (id: string) => Promise; }; @@ -78,7 +77,6 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) { connectButton={props.connectButton} client={props.client} accountAddress={props.accountAddress} - getChangelogs={props.getChangelogNotifications} getInboxNotifications={props.getInboxNotifications} markNotificationAsRead={props.markNotificationAsRead} /> @@ -126,7 +124,6 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
diff --git a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx index ae8634a6cc7..b366c598d41 100644 --- a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx +++ b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx @@ -15,7 +15,6 @@ export function SecondaryNav(props: { connectButton: React.ReactNode; client: ThirdwebClient; accountAddress: string; - getChangelogs: () => Promise; getInboxNotifications: () => Promise; markNotificationAsRead: (id: string) => Promise; }) { @@ -24,7 +23,6 @@ export function SecondaryNav(props: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx new file mode 100644 index 00000000000..fb842e7b8a9 --- /dev/null +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx @@ -0,0 +1,64 @@ +import { formatDistance } from "date-fns"; +import { ArrowRightIcon } from "lucide-react"; +import { unstable_cache } from "next/cache"; +import Link from "next/link"; + +type ChangelogItem = { + published_at: string; + title: string; + url: string; +}; + +export async function Changelog() { + const changelog = await getChangelog(); + + return ( +
+ {changelog.map((item) => ( +
+
+ +
+ + {item.title} + +
+ {formatDistance(new Date(item.published_at), Date.now(), { + addSuffix: true, + })} +
+
+
+ ))} + + View More + +
+ ); +} + +const getChangelog = unstable_cache( + async () => { + const res = await fetch( + "https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=10", + ); + if (!res.ok) { + return []; + } + const json = await res.json(); + return json.posts as ChangelogItem[]; + }, + ["changelog"], + { + revalidate: 60 * 60, // 1 hour + }, +); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx index 37acd327d1c..d69e5ed050e 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx @@ -1,13 +1,13 @@ import { getWalletConnections } from "@/api/analytics"; import { type Project, getProjects } from "@/api/projects"; import { getTeamBySlug } from "@/api/team"; -import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { DismissibleAlert } from "@/components/blocks/dismissible-alert"; import { getClientThirdwebClient } from "@/constants/thirdweb-client.client"; import { subDays } from "date-fns"; -import { CircleAlertIcon } from "lucide-react"; import { redirect } from "next/navigation"; import { getAuthToken } from "../../../api/lib/getAuthToken"; import { loginRedirect } from "../../../login/loginRedirect"; +import { Changelog } from "./_components/Changelog"; import { InviteTeamMembersButton } from "./_components/invite-team-members-button"; import { type ProjectWithAnalytics, @@ -52,20 +52,30 @@ export default async function Page(props: {
-
- - - Looking for Engines? - - Engines, contracts, project settings, and more are now managed - within projects. Open or create a project to access them. - - - +
+ {/* left */} +
+ + + +
+ + {/* right */} +
+

+ Changelog +

+ + +
); diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx index e7df993ad30..801df3ba9f9 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx @@ -26,7 +26,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter"; import { cn } from "@/lib/utils"; import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog"; import { formatDate } from "date-fns"; -import { PlusIcon, SearchIcon } from "lucide-react"; +import { ArrowDownNarrowWideIcon, PlusIcon, SearchIcon } from "lucide-react"; import Link from "next/link"; import { useMemo, useState } from "react"; import type { ThirdwebClient } from "thirdweb"; @@ -251,10 +251,10 @@ function SearchInput(props: { return (
props.onValueChange(e.target.value)} - className="bg-background pl-9 lg:w-[400px]" + className="bg-background pl-9 lg:w-[320px]" />
@@ -298,8 +298,8 @@ function SelectBy(props: { }} > -
- Sort by +
+ {valueToLabel[props.value]}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx index afe4229e0fc..1a47f4c6998 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx @@ -1,5 +1,6 @@ "use client"; +import { DismissibleAlert } from "@/components/blocks/dismissible-alert"; import { Button } from "@/components/ui/button"; import { TabPathLinks } from "@/components/ui/tabs"; import { @@ -7,9 +8,7 @@ import { TrackedUnderlineLink, } from "@/components/ui/tracked-link"; import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts"; -import { useLocalStorage } from "hooks/useLocalStorage"; import { ArrowRightIcon } from "lucide-react"; -import { XIcon } from "lucide-react"; import { AAFooter } from "./AAFooterSection"; const TRACKING_CATEGORY = "smart-wallet"; @@ -100,27 +99,12 @@ function GasCreditAlert(props: { teamSlug: string; projectId: string; }) { - const [isVisible, setIsVisible] = useLocalStorage( - `gas-credit-${props.projectId}`, - true, - false, - ); - - if (!isVisible) return null; - return ( -
- -
-

OP Gas Credit Program

-

+ Redeem credits towards gas Sponsorship.
Learn More -

- -
- -
-
-
+ + Claim your credits + + +
+ + } + /> ); } diff --git a/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.stories.tsx b/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.stories.tsx index 27efe935af9..f832e91063f 100644 --- a/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.stories.tsx +++ b/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.stories.tsx @@ -67,114 +67,46 @@ function randomNotifications(count: number): NotificationMetadata[] { export const AllUnread: Story = { args: { - notificationTabs: { - inbox: { - notifications: randomNotifications(10), - isPending: false, - }, - changelogs: { - notifications: randomNotifications(30), - isPending: false, - }, - }, + notifications: randomNotifications(10), + isPending: false, markNotificationAsRead: () => Promise.resolve(), }, }; export const Loading: Story = { args: { - notificationTabs: { - inbox: { - notifications: [], - isPending: true, - }, - changelogs: { - notifications: [], - isPending: true, - }, - }, + notifications: [], + isPending: true, markNotificationAsRead: () => Promise.resolve(), }, }; export const NoNotifications: Story = { args: { - notificationTabs: { - inbox: { - notifications: [], - isPending: false, - }, - changelogs: { - notifications: [], - isPending: false, - }, - }, + notifications: [], + isPending: false, markNotificationAsRead: () => Promise.resolve(), }, }; export const AllRead: Story = { args: { - notificationTabs: { - inbox: { - notifications: randomNotifications(30).map((x) => ({ - ...x, - isRead: true, - })), - isPending: false, - }, - changelogs: { - notifications: randomNotifications(30).map((x) => ({ - ...x, - isRead: true, - })), - isPending: false, - }, - }, + notifications: randomNotifications(30).map((x) => ({ + ...x, + isRead: true, + })), + isPending: false, markNotificationAsRead: () => Promise.resolve(), }, }; export const MixedNotifications: Story = { args: { - notificationTabs: { - inbox: { - notifications: randomNotifications(10).map((x) => ({ - ...x, - isRead: Math.random() > 0.5, - })), - isPending: false, - }, - changelogs: { - notifications: randomNotifications(30).map((x) => ({ - ...x, - isRead: Math.random() > 0.5, - })), - isPending: false, - }, - }, - markNotificationAsRead: () => Promise.resolve(), - }, -}; - -export const NoUnreadInboxNotifications: Story = { - args: { - notificationTabs: { - inbox: { - notifications: randomNotifications(5).map((x) => ({ - ...x, - isRead: true, - })), - isPending: false, - }, - changelogs: { - notifications: randomNotifications(30).map((x) => ({ - ...x, - isRead: Math.random() > 0.5, - })), - isPending: false, - }, - }, + notifications: randomNotifications(10).map((x) => ({ + ...x, + isRead: Math.random() > 0.5, + })), + isPending: false, markNotificationAsRead: () => Promise.resolve(), }, }; diff --git a/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.tsx b/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.tsx index 046a7ef5313..10616bf02da 100644 --- a/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.tsx +++ b/apps/dashboard/src/app/(app)/team/components/NotificationButton/NotificationButton.tsx @@ -8,12 +8,12 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { TabButtons } from "@/components/ui/tabs"; +import { cn } from "@/lib/utils"; import { useQuery } from "@tanstack/react-query"; import { formatDistance } from "date-fns"; -import { ActivityIcon, BellIcon, InboxIcon } from "lucide-react"; +import { BellIcon, InboxIcon } from "lucide-react"; import Link from "next/link"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import { cleanupReadNotifications } from "./fetch-notifications"; export type NotificationMetadata = { @@ -24,19 +24,7 @@ export type NotificationMetadata = { createdAt: string; }; -type NotificationTabs = { - changelogs: { - notifications: NotificationMetadata[]; - isPending: boolean; - }; - inbox: { - notifications: NotificationMetadata[]; - isPending: boolean; - }; -}; - export function NotificationButtonUI(props: { - getChangelogs: () => Promise; getInboxNotifications: () => Promise; markNotificationAsRead: (id: string) => Promise; }) { @@ -45,22 +33,10 @@ export function NotificationButtonUI(props: { queryFn: props.getInboxNotifications, }); - const changelogsQuery = useQuery({ - queryKey: ["changelogs"], - queryFn: props.getChangelogs, - }); - const [readNotifications, setReadNotifications] = useState>( new Set(), ); - const changelogNotifications = useMemo(() => { - return (changelogsQuery.data || []).map((notification) => ({ - ...notification, - isRead: notification.isRead || readNotifications.has(notification.id), - })); - }, [changelogsQuery.data, readNotifications]); - const inboxNotifications = useMemo(() => { return (inboxNotificationsQuery.data || []).map((notification) => ({ ...notification, @@ -68,58 +44,30 @@ export function NotificationButtonUI(props: { })); }, [inboxNotificationsQuery.data, readNotifications]); - // Ensure we don't keep adding things to the IndexedDB storage by removing notification ids that are no longer being displayed - // eslint-disable-next-line no-restricted-syntax - useEffect(() => { - if (changelogNotifications.length > 0 && inboxNotifications.length > 0) { - cleanupReadNotifications({ - changelogs: changelogNotifications, - updates: inboxNotifications, - }); - } - }, [changelogNotifications, inboxNotifications]); - const markAsRead = useCallback( async (id: string) => { setReadNotifications((prev) => new Set([...prev, id])); await props.markNotificationAsRead(id); + await cleanupReadNotifications(inboxNotifications); }, - [props.markNotificationAsRead], + [props.markNotificationAsRead, inboxNotifications], ); - const notificationTabs: NotificationTabs = { - inbox: { - notifications: inboxNotifications, - isPending: inboxNotificationsQuery.isPending, - }, - changelogs: { - notifications: changelogNotifications, - isPending: changelogsQuery.isPending, - }, - }; - return ( ); } export function NotificationButtonInner(props: { - notificationTabs: NotificationTabs; + notifications: NotificationMetadata[]; + isPending: boolean; markNotificationAsRead: (id: string) => Promise; }) { - const hasUnreadInboxNotifications = - props.notificationTabs.inbox.notifications.some((x) => !x.isRead); - const [tab, setTab] = useState("inbox"); - - const unreadNotifications = { - inbox: props.notificationTabs.inbox.notifications.filter((x) => !x.isRead), - changelogs: props.notificationTabs.changelogs.notifications.filter( - (x) => !x.isRead, - ), - }; + const unreadCount = props.notifications.filter((x) => !x.isRead).length; return ( @@ -128,9 +76,16 @@ export function NotificationButtonInner(props: { className="relative size-10 rounded-full bg-background p-0" variant="outline" > - - {hasUnreadInboxNotifications && ( -
+ 0 && "text-foreground", + )} + /> + {unreadCount > 0 && ( +
+ {unreadCount > 9 ? "9+" : unreadCount} +
)} @@ -140,64 +95,28 @@ export function NotificationButtonInner(props: { sideOffset={10} side="bottom" > - - ), - onClick: () => setTab("inbox"), - }, - { - isActive: tab === "changelogs", - name: ( - - ), - onClick: () => setTab("changelogs"), - }, - ]} +
+ Notifications + +
+ - - {tab === "inbox" && ( - - )} - - {tab === "changelogs" && ( - - )} ); } function BadgeTab(props: { - name: string; unreadCount: number; }) { return ( - {props.name} {props.unreadCount > 0 && ( - + {props.unreadCount} )} diff --git a/apps/dashboard/src/app/(app)/team/components/NotificationButton/fetch-notifications.ts b/apps/dashboard/src/app/(app)/team/components/NotificationButton/fetch-notifications.ts index 6e6cd04f6ad..e3a8c25f896 100644 --- a/apps/dashboard/src/app/(app)/team/components/NotificationButton/fetch-notifications.ts +++ b/apps/dashboard/src/app/(app)/team/components/NotificationButton/fetch-notifications.ts @@ -30,18 +30,13 @@ async function fetchGhostPosts(tag: string) { // Clean up the indexedDB storage of read notification IDs // This is to prevent the storage from growing indefinitely // Remove notification IDs from storage that are no longer shown to the user -export async function cleanupReadNotifications(params: { - changelogs: NotificationMetadata[]; - updates: NotificationMetadata[]; -}) { - const { changelogs, updates } = params; +export async function cleanupReadNotifications( + notifications: NotificationMetadata[], +) { const readIds = await getReadNotificationIds(); // Get all current notification IDs - const currentIds = new Set([ - ...changelogs.map((item) => item.id), - ...updates.map((item) => item.id), - ]); + const currentIds = new Set([...notifications.map((item) => item.id)]); // remove ids that are no longer being displayed const usedIds = new Set( @@ -59,23 +54,6 @@ export async function markNotificationAsRead(id: string) { await set(READ_NOTIFICATIONS_KEY, Array.from(readIds)); } -export async function getChangelogNotifications(): Promise< - NotificationMetadata[] -> { - const [changelogs, readIds] = await Promise.all([ - fetchGhostPosts("changelog"), - getReadNotificationIds(), - ]); - - return changelogs.map((item) => ({ - id: item.id, - title: item.title, - href: item.url, - isRead: readIds.has(item.id), - createdAt: item.published_at, - })); -} - export async function getInboxNotifications(): Promise { const [changelogs, readIds] = await Promise.all([ fetchGhostPosts("update"), diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx index 66069e2c616..4051f3f2471 100644 --- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx +++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx @@ -147,7 +147,6 @@ function Variant(props: { const Comp = props.type === "mobile" ? TeamHeaderMobileUI : TeamHeaderDesktopUI; - const getChangelogsStub = () => Promise.resolve([]); const getInboxNotificationsStub = () => Promise.resolve([]); const markNotificationAsReadStub = () => Promise.resolve(); @@ -166,7 +165,6 @@ function Variant(props: { connectButton={} createProject={() => {}} client={storybookThirdwebClient} - getChangelogNotifications={getChangelogsStub} getInboxNotifications={getInboxNotificationsStub} markNotificationAsRead={markNotificationAsReadStub} /> diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx index 0aee780a9af..e7d5a32db63 100644 --- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx +++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx @@ -31,7 +31,6 @@ export type TeamHeaderCompProps = { createProject: (team: Team) => void; client: ThirdwebClient; accountAddress: string; - getChangelogNotifications: () => Promise; getInboxNotifications: () => Promise; markNotificationAsRead: (id: string) => Promise; }; @@ -117,7 +116,6 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) { connectButton={props.connectButton} client={props.client} accountAddress={props.accountAddress} - getChangelogs={props.getChangelogNotifications} getInboxNotifications={props.getInboxNotifications} markNotificationAsRead={props.markNotificationAsRead} /> @@ -202,7 +200,6 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx index 06ef2bbf7a8..6a80ec520f5 100644 --- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx +++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/team-header-logged-in.client.tsx @@ -11,7 +11,6 @@ import type { ThirdwebClient } from "thirdweb"; import { useActiveWallet, useDisconnect } from "thirdweb/react"; import { doLogout } from "../../../login/auth-actions"; import { - getChangelogNotifications, getInboxNotifications, markNotificationAsRead, } from "../NotificationButton/fetch-notifications"; @@ -64,7 +63,6 @@ export function TeamHeaderLoggedIn(props: { }, client: props.client, accountAddress: props.accountAddress, - getChangelogNotifications: getChangelogNotifications, getInboxNotifications: getInboxNotifications, markNotificationAsRead: markNotificationAsRead, };