Skip to content

[TOOL-4670] Dashboard: Update Managed Engine CTA, UI tweaks #7266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 3, 2025
+86 −90
Merged

[TOOL-4670] Dashboard: Update Managed Engine CTA, UI tweaks #7266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion apps/dashboard/src/@/components/ui/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,20 @@ export function TabLinks(props: {
tabContainerClassName?: string;
shadowColor?: string;
scrollableClassName?: string;
bottomLineClassName?: string;
}) {
const { containerRef, lineRef, activeTabRef } =
useUnderline<HTMLAnchorElement>();

return (
<div className={cn("relative", props.className)}>
{/* Bottom line */}
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
<div
className={cn(
"absolute right-0 bottom-0 left-0 h-[1px] bg-border",
props.bottomLineClassName,
)}
/>

<ScrollShadow
scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
Expand Down Expand Up @@ -216,6 +222,7 @@ export function TabPathLinks(props: {
tabContainerClassName?: string;
shadowColor?: string;
scrollableClassName?: string;
bottomLineClassName?: string;
}) {
const pathname = usePathname() || "";
const { links, ...restProps } = props;
Expand Down
129 changes: 70 additions & 59 deletions ...app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import type { SidebarLink } from "@/components/blocks/Sidebar";
import { SidebarLayout } from "@/components/blocks/SidebarLayout";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { DatabaseIcon } from "lucide-react";
import { DatabaseIcon, ExternalLinkIcon } from "lucide-react";
import Link from "next/link";
import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
import { TabPathLinks } from "../../../../../../../../../@/components/ui/tabs";
import { ImportEngineLink } from "./_components";

export default async function Layout(props: {
Expand All @@ -17,57 +16,64 @@ export default async function Layout(props: {
}) {
const params = await props.params;
const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
const sidebarLinks: SidebarLink[] = [
{
label: "Engine Instances",
href: `${linkPrefix}`,
exactMatch: true,
},
{
label: "Import Engine",
href: `${linkPrefix}/import`,
},
];

return (
<div className="container flex max-w-7xl grow flex-col">
<div className="flex grow flex-col">
{/* header */}
<header className="border-border border-b py-10">
<div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
<div className="flex flex-col gap-2">
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
Engine{" "}
<Badge
variant="warning"
className="flex items-center gap-2 text-sm"
>
<DatabaseIcon className="size-4" /> Dedicated
</Badge>
</h1>
<p className="flex flex-col text-muted-foreground text-sm">
Manage your deployed Engine instances
</p>
<header className="pt-10 pb-6">
<div className="container max-w-7xl">
<div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
<div className="flex flex-col gap-2">
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
Engine{" "}
<Badge
variant="warning"
className="flex items-center gap-2 text-sm"
>
<DatabaseIcon className="size-4" /> Dedicated
</Badge>
</h1>
<p className="flex flex-col text-muted-foreground text-sm">
Manage your deployed Engine instances
</p>
</div>
<div className="flex items-center gap-3">
<ImportEngineLink
label="Import Engine"
engineLinkPrefix={linkPrefix}
/>
</div>
</div>
<div className="flex items-center gap-3">
<ImportEngineLink
label="Import Engine"
engineLinkPrefix={linkPrefix}
/>
</div>
</div>
<div className="h-6" />
<div className="container">
<div className="h-6" />
<EngineLegacyBannerUI
teamSlug={params.team_slug}
projectSlug={params.project_slug}
/>
</div>
</header>

{/* sidebar layout */}
<SidebarLayout sidebarLinks={sidebarLinks}>
{props.children}
</SidebarLayout>
<div className="relative">
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
<div className="container max-w-7xl">
<TabPathLinks
className="pt-2"
bottomLineClassName="hidden"
links={[
{
name: "Engine Instances",
path: `${linkPrefix}`,
exactMatch: true,
},
{
name: "Import Engine",
path: `${linkPrefix}/import`,
},
]}
/>
</div>
</div>

<div className="container max-w-7xl pt-8 pb-10">{props.children}</div>
</div>
);
}
Expand All @@ -78,32 +84,37 @@ function EngineLegacyBannerUI(props: {
}) {
return (
<Alert variant="info">
<EngineIcon className="size-5" />
<AlertTitle>Engine Cloud (Beta)</AlertTitle>
<AlertDescription>
<div className="h-2" />
<p className="text-primary-foreground text-sm">
<AlertDescription className="pt-1">
<p className="text-foreground text-sm">
Try Engine Cloud (Beta) - now included for free in every thirdweb
project.
</p>
<div className="h-2" />
<ul className="list-disc pl-4 text-muted-foreground text-sm">
<ul className="list-disc space-y-1.5 pl-4 text-muted-foreground text-sm">
<li>No recurring monthly cost, pay-per-request model</li>
<li>Powered by Vault: our new TEE based key management system</li>
<li>Improved performance and simplified transaction API</li>
</ul>
<div className="h-4" />
<div className="flex justify-end gap-2">
<Link href={"https://portal.thirdweb.com/engine/v3"} target="_blank">
<Button variant="outline">Learn More</Button>
</Link>
<Link
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
>
<Button variant={"primary"} className="flex items-center gap-2">
<div className="h-6" />
<div className="flex justify-start gap-3">
<Button className="flex items-center gap-2" asChild size="sm">
<Link
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
>
<EngineIcon className="size-4" /> Try Engine Cloud
</Button>
</Link>
</Link>
</Button>

<Button variant="outline" asChild size="sm">
<Link
href={"https://portal.thirdweb.com/engine/v3"}
target="_blank"
className="gap-2 bg-background"
>
Learn More <ExternalLinkIcon className="size-4" />
</Link>
</Button>
</div>
</AlertDescription>
</Alert>
Expand Down
38 changes: 8 additions & 30 deletions ...]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import type { Team } from "@/api/team";
import { Spinner } from "@/components/ui/Spinner/Spinner";
import { UnderlineLink } from "@/components/ui/UnderlineLink";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge, type BadgeProps } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
Expand Down Expand Up @@ -53,7 +52,6 @@ import {
} from "@3rdweb-sdk/react/hooks/useEngine";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import { PRO_CONTACT_US_URL } from "constants/pro";
import { useTrack } from "hooks/analytics/useTrack";
import {
CheckIcon,
Expand Down Expand Up @@ -895,37 +893,17 @@ function EmptyEngineState(props: {
Managed Engine
</h3>
<p className="text-muted-foreground text-sm">
{props.teamPlan !== "pro" ? (
<>
Upgrade your team plan to Accelerate or Scale to get a
fully managed engine instance.{" "}
<UnderlineLink href="/pricing" target="_blank">
View pricing
</UnderlineLink>
</>
) : (
<>
Contact us to add a managed engine instance to your team
</>
)}
Contact us to add a managed engine instance to your team.{" "}
<br /> We recommend using Engine Cloud in most cases
</p>
<div className="h-4" />
<div className="mt-auto">
{props.teamPlan !== "pro" ? (
<Button className="w-full gap-2" size="sm" asChild>
<Link href={`/team/${props.teamSlug}/~/settings/billing`}>
Upgrade Plan
<ArrowRightIcon size={16} />
</Link>
</Button>
) : (
<Button className="w-full gap-2" size="sm" asChild>
<Link href={PRO_CONTACT_US_URL} target="_blank">
Contact Us
<ArrowRightIcon size={16} />
</Link>
</Button>
)}
<Button className="w-full gap-2" size="sm" asChild>
<Link href={"/contact-us"} target="_blank">
Contact Us
<ArrowRightIcon size={16} />
</Link>
</Button>
</div>
</div>
)}
Expand Down
Loading