Skip to content

Commit 32f0dab

Browse files
joaquim-vergesjoaquim-verges
committed
FTUX
1 parent 6aaee1a commit 32f0dab

File tree

9 files changed

+332
-231
lines changed

9 files changed

+332
-231
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/analytics-page.tsx

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { Project } from "@/api/projects";
22
import { ResponsiveSearchParamsProvider } from "responsive-rsc";
33
import type { Wallet } from "../server-wallets/wallet-table/types";
44
import { TransactionAnalyticsFilter } from "./filter";
5-
import { SendTestTransaction } from "./send-test-tx.client";
65
import { TransactionsChartCard } from "./tx-chart/tx-chart";
76
import { TransactionsTable } from "./tx-table/tx-table";
87

@@ -13,29 +12,25 @@ export function TransactionsAnalyticsPageContent(props: {
1312
interval?: string | undefined | string[];
1413
};
1514
project: Project;
15+
hasTransactions: boolean;
1616
wallets?: Wallet[];
17-
expandTestTx?: boolean;
1817
}) {
1918
return (
2019
<ResponsiveSearchParamsProvider value={props.searchParams}>
21-
<div className="flex grow flex-col">
22-
<div className="flex justify-end">
23-
<TransactionAnalyticsFilter />
24-
</div>
25-
<div className="h-6" />
26-
<div className="flex grow flex-col gap-6">
27-
<TransactionsChartCard
28-
searchParams={props.searchParams}
29-
project={props.project}
30-
wallets={props.wallets ?? []}
31-
/>
32-
<SendTestTransaction
33-
wallets={props.wallets}
34-
project={props.project}
35-
expanded={props.expandTestTx}
36-
/>
37-
<TransactionsTable project={props.project} wallets={props.wallets} />
38-
</div>
20+
<div className="flex grow flex-col gap-6">
21+
{props.hasTransactions && (
22+
<>
23+
<div className="flex justify-end">
24+
<TransactionAnalyticsFilter />
25+
</div>
26+
<TransactionsChartCard
27+
searchParams={props.searchParams}
28+
project={props.project}
29+
wallets={props.wallets ?? []}
30+
/>
31+
</>
32+
)}
33+
<TransactionsTable project={props.project} wallets={props.wallets} />
3934
</div>
4035
</ResponsiveSearchParamsProvider>
4136
);

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
"use client";
2+
import type { Project } from "@/api/projects";
3+
import { type Step, StepsCard } from "components/dashboard/StepsCard";
4+
import Link from "next/link";
5+
import { useMemo } from "react";
6+
import { Button } from "../../../../../../../@/components/ui/button";
7+
import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
8+
import type { Wallet } from "../server-wallets/wallet-table/types";
9+
import CreateVaultAccountButton from "../vault/components/create-vault-account.client";
10+
import { SendTestTransaction } from "./send-test-tx.client";
11+
12+
interface Props {
13+
managementAccessToken: string | undefined;
14+
project: Project;
15+
wallets: Wallet[];
16+
hasTransactions: boolean;
17+
}
18+
19+
export const EngineChecklist: React.FC<Props> = (props) => {
20+
const finalSteps = useMemo(() => {
21+
const steps: Step[] = [];
22+
steps.push({
23+
title: "Create a Vault Admin Account",
24+
description:
25+
"Your Vault admin account will be used to create server wallets and manage access tokens.",
26+
children: <CreateVaultAccountStep project={props.project} />,
27+
completed: !!props.managementAccessToken,
28+
showCompletedChildren: false,
29+
});
30+
steps.push({
31+
title: "Create a Server Wallet",
32+
description:
33+
"Your server wallet will be used to send transactions to Engine.",
34+
children: (
35+
<CreateServerWalletStep
36+
project={props.project}
37+
managementAccessToken={props.managementAccessToken}
38+
/>
39+
),
40+
completed: props.wallets.length > 0,
41+
showIncompleteChildren: false,
42+
showCompletedChildren: false,
43+
});
44+
steps.push({
45+
title: "Send a Test Transaction",
46+
description: "Send a test transaction to see Engine in action.",
47+
children: (
48+
<SendTestTransaction wallets={props.wallets} project={props.project} />
49+
),
50+
completed: props.hasTransactions,
51+
showIncompleteChildren: true,
52+
showCompletedChildren: false,
53+
});
54+
return steps;
55+
}, [
56+
props.managementAccessToken,
57+
props.project,
58+
props.wallets,
59+
props.hasTransactions,
60+
]);
61+
62+
if (finalSteps.length === 1) {
63+
return null;
64+
}
65+
66+
return (
67+
<StepsCard title="Setup Your Engine" steps={finalSteps} delay={1000} />
68+
);
69+
};
70+
71+
function CreateVaultAccountStep(props: { project: Project }) {
72+
return (
73+
<div className="mt-4 flex flex-col rounded-md border bg-background p-4">
74+
<p className="font-medium text-primary-foreground text-sm">
75+
Let's get you set up with Vault.
76+
</p>
77+
<div className="h-2" />
78+
<p className="text-muted-foreground text-sm">
79+
To use Engine, you will need to manage one or more server wallets.
80+
Server wallets are secured and accessed through Vault, thirdweb's key
81+
management system.
82+
</p>
83+
<div className="h-6" />
84+
<div className="flex flex-row justify-end gap-4">
85+
<Link href="https://portal.thirdweb.com/engine/vault">
86+
<Button variant="outline">Learn more about Vault</Button>
87+
</Link>
88+
<CreateVaultAccountButton project={props.project} />
89+
</div>
90+
</div>
91+
);
92+
}
93+
94+
function CreateServerWalletStep(props: {
95+
project: Project;
96+
managementAccessToken: string | undefined;
97+
}) {
98+
return (
99+
<div className="mt-4 flex flex-col rounded-md border bg-background p-4">
100+
<p className="font-medium text-primary-foreground text-sm">
101+
Now, let's create a server wallet.
102+
</p>
103+
<div className="h-2" />
104+
<p className="text-muted-foreground text-sm">
105+
Your server wallet will be used to send transactions to the Engine.
106+
</p>
107+
<div className="h-6" />
108+
<div className="flex flex-row justify-end gap-4">
109+
<CreateServerWallet
110+
project={props.project}
111+
managementAccessToken={props.managementAccessToken}
112+
/>
113+
</div>
114+
</div>
115+
);
116+
}

0 commit comments

Comments
 (0)