Skip to content

Commit 95bee42

Browse files
MananTankMananTank
committed
[TOOL-4670] Dashboard: Update Managed Engine CTA, UI tweaks
1 parent 5ebb754 commit 95bee42

File tree

2 files changed

+73
-89
lines changed

2 files changed

+73
-89
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx‎

Lines changed: 65 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import type { SidebarLink } from "@/components/blocks/Sidebar";
2-
import { SidebarLayout } from "@/components/blocks/SidebarLayout";
31
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
42
import { Badge } from "@/components/ui/badge";
53
import { Button } from "@/components/ui/button";
6-
import { DatabaseIcon } from "lucide-react";
4+
import { DatabaseIcon, ExternalLinkIcon } from "lucide-react";
75
import Link from "next/link";
86
import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
7+
import { TabPathLinks } from "../../../../../../../../../@/components/ui/tabs";
98
import { ImportEngineLink } from "./_components";
109

1110
export default async function Layout(props: {
@@ -17,57 +16,59 @@ export default async function Layout(props: {
1716
}) {
1817
const params = await props.params;
1918
const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
20-
const sidebarLinks: SidebarLink[] = [
21-
{
22-
label: "Engine Instances",
23-
href: `${linkPrefix}`,
24-
exactMatch: true,
25-
},
26-
{
27-
label: "Import Engine",
28-
href: `${linkPrefix}/import`,
29-
},
30-
];
3119

3220
return (
33-
<div className="container flex max-w-7xl grow flex-col">
21+
<div className="flex grow flex-col">
3422
{/* header */}
35-
<header className="border-border border-b py-10">
36-
<div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
37-
<div className="flex flex-col gap-2">
38-
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
39-
Engine{" "}
40-
<Badge
41-
variant="warning"
42-
className="flex items-center gap-2 text-sm"
43-
>
44-
<DatabaseIcon className="size-4" /> Dedicated
45-
</Badge>
46-
</h1>
47-
<p className="flex flex-col text-muted-foreground text-sm">
48-
Manage your deployed Engine instances
49-
</p>
23+
<header className="pt-10 pb-6">
24+
<div className="container max-w-7xl">
25+
<div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
26+
<div className="flex flex-col gap-2">
27+
<h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
28+
Engine{" "}
29+
<Badge
30+
variant="warning"
31+
className="flex items-center gap-2 text-sm"
32+
>
33+
<DatabaseIcon className="size-4" /> Dedicated
34+
</Badge>
35+
</h1>
36+
<p className="flex flex-col text-muted-foreground text-sm">
37+
Manage your deployed Engine instances
38+
</p>
39+
</div>
40+
<div className="flex items-center gap-3">
41+
<ImportEngineLink
42+
label="Import Engine"
43+
engineLinkPrefix={linkPrefix}
44+
/>
45+
</div>
5046
</div>
51-
<div className="flex items-center gap-3">
52-
<ImportEngineLink
53-
label="Import Engine"
54-
engineLinkPrefix={linkPrefix}
55-
/>
56-
</div>
57-
</div>
58-
<div className="h-6" />
59-
<div className="container">
47+
<div className="h-6" />
6048
<EngineLegacyBannerUI
6149
teamSlug={params.team_slug}
6250
projectSlug={params.project_slug}
6351
/>
6452
</div>
6553
</header>
6654

67-
{/* sidebar layout */}
68-
<SidebarLayout sidebarLinks={sidebarLinks}>
69-
{props.children}
70-
</SidebarLayout>
55+
<TabPathLinks
56+
className="pt-2"
57+
tabContainerClassName="container max-w-7xl"
58+
links={[
59+
{
60+
name: "Engine Instances",
61+
path: `${linkPrefix}`,
62+
exactMatch: true,
63+
},
64+
{
65+
name: "Import Engine",
66+
path: `${linkPrefix}/import`,
67+
},
68+
]}
69+
/>
70+
71+
<div className="container max-w-7xl pt-8 pb-10">{props.children}</div>
7172
</div>
7273
);
7374
}
@@ -78,32 +79,37 @@ function EngineLegacyBannerUI(props: {
7879
}) {
7980
return (
8081
<Alert variant="info">
81-
<EngineIcon className="size-5" />
8282
<AlertTitle>Engine Cloud (Beta)</AlertTitle>
83-
<AlertDescription>
84-
<div className="h-2" />
85-
<p className="text-primary-foreground text-sm">
83+
<AlertDescription className="pt-1">
84+
<p className="text-foreground text-sm">
8685
Try Engine Cloud (Beta) - now included for free in every thirdweb
8786
project.
8887
</p>
8988
<div className="h-2" />
90-
<ul className="list-disc pl-4 text-muted-foreground text-sm">
89+
<ul className="list-disc space-y-1.5 pl-4 text-muted-foreground text-sm">
9190
<li>No recurring monthly cost, pay-per-request model</li>
9291
<li>Powered by Vault: our new TEE based key management system</li>
9392
<li>Improved performance and simplified transaction API</li>
9493
</ul>
95-
<div className="h-4" />
96-
<div className="flex justify-end gap-2">
97-
<Link href={"https://portal.thirdweb.com/engine/v3"} target="_blank">
98-
<Button variant="outline">Learn More</Button>
99-
</Link>
100-
<Link
101-
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
102-
>
103-
<Button variant={"primary"} className="flex items-center gap-2">
94+
<div className="h-6" />
95+
<div className="flex justify-start gap-3">
96+
<Button className="flex items-center gap-2" asChild size="sm">
97+
<Link
98+
href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
99+
>
104100
<EngineIcon className="size-4" /> Try Engine Cloud
105-
</Button>
106-
</Link>
101+
</Link>
102+
</Button>
103+
104+
<Button variant="outline" asChild size="sm">
105+
<Link
106+
href={"https://portal.thirdweb.com/engine/v3"}
107+
target="_blank"
108+
className="gap-2 bg-background"
109+
>
110+
Learn More <ExternalLinkIcon className="size-4" />
111+
</Link>
112+
</Button>
107113
</div>
108114
</AlertDescription>
109115
</Alert>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/overview/engine-instances-table.tsx‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import type { Team } from "@/api/team";
44
import { Spinner } from "@/components/ui/Spinner/Spinner";
5-
import { UnderlineLink } from "@/components/ui/UnderlineLink";
65
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
76
import { Badge, type BadgeProps } from "@/components/ui/badge";
87
import { Button } from "@/components/ui/button";
@@ -53,7 +52,6 @@ import {
5352
} from "@3rdweb-sdk/react/hooks/useEngine";
5453
import { zodResolver } from "@hookform/resolvers/zod";
5554
import { useMutation } from "@tanstack/react-query";
56-
import { PRO_CONTACT_US_URL } from "constants/pro";
5755
import { useTrack } from "hooks/analytics/useTrack";
5856
import {
5957
CheckIcon,
@@ -895,37 +893,17 @@ function EmptyEngineState(props: {
895893
Managed Engine
896894
</h3>
897895
<p className="text-muted-foreground text-sm">
898-
{props.teamPlan !== "pro" ? (
899-
<>
900-
Upgrade your team plan to Accelerate or Scale to get a
901-
fully managed engine instance.{" "}
902-
<UnderlineLink href="/pricing" target="_blank">
903-
View pricing
904-
</UnderlineLink>
905-
</>
906-
) : (
907-
<>
908-
Contact us to add a managed engine instance to your team
909-
</>
910-
)}
896+
Contact us to add a managed engine instance to your team.{" "}
897+
<br /> We recommend using Engine Cloud in most cases
911898
</p>
912899
<div className="h-4" />
913900
<div className="mt-auto">
914-
{props.teamPlan !== "pro" ? (
915-
<Button className="w-full gap-2" size="sm" asChild>
916-
<Link href={`/team/${props.teamSlug}/~/settings/billing`}>
917-
Upgrade Plan
918-
<ArrowRightIcon size={16} />
919-
</Link>
920-
</Button>
921-
) : (
922-
<Button className="w-full gap-2" size="sm" asChild>
923-
<Link href={PRO_CONTACT_US_URL} target="_blank">
924-
Contact Us
925-
<ArrowRightIcon size={16} />
926-
</Link>
927-
</Button>
928-
)}
901+
<Button className="w-full gap-2" size="sm" asChild>
902+
<Link href={"/contact-us"} target="_blank">
903+
Contact Us
904+
<ArrowRightIcon size={16} />
905+
</Link>
906+
</Button>
929907
</div>
930908
</div>
931909
)}

0 commit comments

Comments
 (0)