Skip to content

Commit 811384b

Browse files
MananTankMananTank
committed
[TOOL-4029] Dashboard: Remove create engine page, Various UI udpates in engine instances page (#6684)
1 parent 22dc4d7 commit 811384b

File tree

14 files changed

+464
-364
lines changed

14 files changed

+464
-364
lines changed

‎apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ import invariant from "tiny-invariant";
1515
import type { EngineStatus } from "../../../app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
1616
import { engineKeys } from "../cache-keys";
1717

18-
export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
19-
2018
// Engine instances
2119
export type EngineInstance = {
2220
id: string;
2321
accountId: string;
2422
name: string;
2523
url: string;
2624
lastAccessedAt: string;
25+
isCloudHosted: boolean;
26+
isPlanEngine: boolean;
2727
status:
2828
| "active"
2929
| "pending"

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/EngineFooterCard.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { EngineFooterCard } from "./_components";
3+
4+
const meta = {
5+
title: "Engine/EngineFooterCard",
6+
component: EngineFooterCard,
7+
args: {
8+
team_slug: "demo-team",
9+
},
10+
decorators: [
11+
(Story) => (
12+
<div className="container max-w-6xl py-10">
13+
<Story />
14+
</div>
15+
),
16+
],
17+
} satisfies Meta<typeof EngineFooterCard>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
export const Growth: Story = {
23+
args: {
24+
teamPlan: "growth",
25+
},
26+
};
27+
28+
export const Accelerate: Story = {
29+
args: {
30+
teamPlan: "accelerate",
31+
},
32+
};
33+
34+
export const Scale: Story = {
35+
args: {
36+
teamPlan: "scale",
37+
},
38+
};
39+
40+
export const Pro: Story = {
41+
args: {
42+
teamPlan: "pro",
43+
},
44+
};

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/_components.tsx‎

Lines changed: 128 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,52 @@
1-
"use client";
2-
1+
import type { Team } from "@/api/team";
2+
import { UnderlineLink } from "@/components/ui/UnderlineLink";
33
import { Button } from "@/components/ui/button";
4-
import {
5-
ArrowRightIcon,
6-
DownloadIcon,
7-
ExternalLinkIcon,
8-
PlusIcon,
9-
} from "lucide-react";
4+
import { Separator } from "@/components/ui/separator";
5+
import { TrackedLinkTW } from "@/components/ui/tracked-link";
6+
import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
107
import Link from "next/link";
11-
import { useTrack } from "../../../../../../../hooks/analytics/useTrack";
12-
13-
export function CreateEngineLink(props: {
14-
label: string;
15-
engineLinkPrefix: string;
16-
}) {
17-
const trackEvent = useTrack();
18-
19-
return (
20-
<Button
21-
asChild
22-
variant="default"
23-
size="sm"
24-
onClick={() => {
25-
trackEvent({
26-
category: "engine",
27-
action: "click",
28-
label: "add-engine-instance",
29-
});
30-
}}
31-
>
32-
<Link href={`${props.engineLinkPrefix}/create`} className="gap-2">
33-
<PlusIcon className="size-3" />
34-
{props.label}
35-
</Link>
36-
</Button>
37-
);
38-
}
8+
import { PRO_CONTACT_US_URL } from "../../../../../../../constants/pro";
399

4010
export function ImportEngineLink(props: {
4111
label: string;
4212
engineLinkPrefix: string;
4313
}) {
44-
const trackEvent = useTrack();
45-
4614
return (
47-
<Button
48-
asChild
49-
variant="outline"
50-
size="sm"
51-
className="gap-2 bg-card"
52-
onClick={() => {
53-
trackEvent({
54-
category: "engine",
15+
<Button asChild variant="outline" size="sm" className="gap-2 bg-card">
16+
<TrackedLinkTW
17+
href={`${props.engineLinkPrefix}/import`}
18+
category="engine"
19+
trackingProps={{
5520
action: "import",
56-
});
57-
}}
58-
>
59-
<Link href={`${props.engineLinkPrefix}/import`}>
21+
}}
22+
>
6023
<DownloadIcon className="size-3" />
6124
{props.label}
62-
</Link>
25+
</TrackedLinkTW>
6326
</Button>
6427
);
6528
}
6629

67-
export function EngineInfoCard(props: { team_slug: string }) {
30+
function EngineInfoSection(props: { team_slug: string }) {
6831
const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
69-
const trackEvent = useTrack();
7032

7133
return (
72-
<div className=" rounded-lg border border-border bg-card">
73-
<div className="p-6">
74-
<h1 className="font-semibold text-xl tracking-tight">
75-
Your scalable web3 backend server
76-
</h1>
77-
78-
<div className="h-2" />
34+
<div className="">
35+
<h3 className="mb-1 font-semibold text-lg tracking-tight">
36+
What is Engine?
37+
</h3>
7938

80-
<ul className="list-disc space-y-2 pl-3 text-muted-foreground text-sm">
81-
<li>Read, write, and deploy contracts at production scale</li>
82-
<li>
83-
Reliably parallelize and retry transactions with gas & nonce
84-
management
85-
</li>
86-
<li>Securely manage backend wallets</li>
87-
<li>Built-in support for account abstraction, relayers, and more</li>
88-
</ul>
89-
</div>
39+
<ul className="list-disc space-y-2 pl-3 text-muted-foreground text-sm">
40+
<li>Read, write, and deploy contracts at production scale</li>
41+
<li>
42+
Reliably parallelize and retry transactions with gas & nonce
43+
management
44+
</li>
45+
<li>Securely manage backend wallets</li>
46+
<li>Built-in support for account abstraction, relayers, and more</li>
47+
</ul>
9048

91-
<div className="flex justify-end gap-3 border-border border-t p-4 lg:px-6">
49+
<div className="mt-4 flex justify-start gap-3">
9250
<Button asChild variant="outline" size="sm">
9351
<Link
9452
href="https://portal.thirdweb.com/engine"
@@ -100,24 +58,110 @@ export function EngineInfoCard(props: { team_slug: string }) {
10058
</Link>
10159
</Button>
10260

103-
<Button
104-
size="sm"
105-
asChild
106-
onClick={() => {
107-
trackEvent({
108-
category: "engine",
61+
<Button size="sm" asChild variant="outline">
62+
<TrackedLinkTW
63+
href={`${engineLinkPrefix}/sandbox`}
64+
className="gap-2"
65+
category="engine"
66+
label="click-try-demo"
67+
trackingProps={{
10968
action: "try-demo",
110-
label: "clicked-try-demo",
111-
});
112-
}}
113-
variant="outline"
114-
>
115-
<Link href={`${engineLinkPrefix}/sandbox`} className="gap-2">
69+
}}
70+
>
11671
Try Demo Engine
11772
<ArrowRightIcon className="size-3 text-muted-foreground" />
118-
</Link>
73+
</TrackedLinkTW>
11974
</Button>
12075
</div>
12176
</div>
12277
);
12378
}
79+
80+
function CloudHostedEngineSection(props: {
81+
teamPlan: Exclude<Team["billingPlan"], "accelerate" | "scale">;
82+
teamSlug: string;
83+
}) {
84+
return (
85+
<div className="flex flex-col">
86+
<h3 className="mb-0.5 font-semibold text-lg tracking-tight">
87+
Get Cloud Hosted Engine
88+
</h3>
89+
90+
{props.teamPlan !== "pro" ? (
91+
<div>
92+
<p className="text-muted-foreground text-sm">
93+
Upgrade your plan to{" "}
94+
<UnderlineLink href="/pricing" target="_blank">
95+
Accelerate
96+
</UnderlineLink>{" "}
97+
or{" "}
98+
<UnderlineLink href="/pricing" target="_blank">
99+
Scale
100+
</UnderlineLink>{" "}
101+
to get a cloud hosted Engine
102+
</p>
103+
104+
<div className="h-5" />
105+
<div className="flex justify-start gap-3">
106+
<Button
107+
variant="outline"
108+
size="sm"
109+
asChild
110+
className="gap-2 bg-card"
111+
>
112+
<Link href={`/team/${props.teamSlug}/~/settings/billing`}>
113+
Upgrade Plan
114+
<ArrowRightIcon className="size-3 text-muted-foreground" />
115+
</Link>
116+
</Button>
117+
118+
<Button
119+
variant="outline"
120+
size="sm"
121+
asChild
122+
className="gap-2 bg-card"
123+
>
124+
<Link href="/pricing" target="_blank">
125+
View Pricing
126+
<ExternalLinkIcon className="size-3 text-muted-foreground" />
127+
</Link>
128+
</Button>
129+
</div>
130+
</div>
131+
) : (
132+
<div>
133+
<p className="mb-4 text-muted-foreground text-sm">
134+
Contact us to get a cloud hosted engine for your team
135+
</p>
136+
<Button variant="outline" size="sm" asChild className="gap-2">
137+
<Link href={PRO_CONTACT_US_URL} target="_blank">
138+
Contact Us
139+
<ExternalLinkIcon className="size-3 text-muted-foreground" />
140+
</Link>
141+
</Button>
142+
</div>
143+
)}
144+
</div>
145+
);
146+
}
147+
148+
export function EngineFooterCard(props: {
149+
teamPlan: Team["billingPlan"];
150+
team_slug: string;
151+
}) {
152+
return (
153+
<div className="relative rounded-lg border p-6">
154+
{props.teamPlan === "accelerate" || props.teamPlan === "scale" ? null : (
155+
<>
156+
<CloudHostedEngineSection
157+
teamPlan={props.teamPlan}
158+
teamSlug={props.team_slug}
159+
/>
160+
<Separator className="my-5" />
161+
</>
162+
)}
163+
164+
<EngineInfoSection team_slug={props.team_slug} />
165+
</div>
166+
);
167+
}

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(general)/create/page.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)