refactor

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.tsx

@@ -234,7 +234,7 @@ function ProductsSection(props: {
       title: "Engine",
       description:
         "Scale your application with a backend server to read, write, and deploy contracts at production-grade.",
-      href: `/team/${props.teamSlug}/~/engine`,
+      href: `/team/${props.teamSlug}/${props.projectSlug}/engine`,
       icon: EngineIcon,
       trackingLabel: "engine",
     },

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

@@ -16,6 +16,7 @@ export function TransactionsAnalyticsPageContent(props: {
   project_slug: string;
   team_slug: string;
   wallets?: Wallet[];
+  expandTestTx?: boolean;
 }) {
   return (
     <ResponsiveSearchParamsProvider value={props.searchParams}>
@@ -33,8 +34,15 @@ export function TransactionsAnalyticsPageContent(props: {
             team_slug={props.team_slug}
             wallets={props.wallets ?? []}
           />
-          <SendTestTransaction wallets={props.wallets} />
-          <TransactionsTable teamId={props.teamId} clientId={props.clientId} />
+          <SendTestTransaction
+            wallets={props.wallets}
+            expanded={props.expandTestTx}
+          />
+          <TransactionsTable
+            teamId={props.teamId}
+            clientId={props.clientId}
+            wallets={props.wallets}
+          />
         </div>
       </div>
     </ResponsiveSearchParamsProvider>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/send-test-tx.client.tsx

@@ -33,8 +33,9 @@ type FormValues = z.infer<typeof formSchema>;
 
 export function SendTestTransaction(props: {
   wallets?: Wallet[];
+  expanded?: boolean;
 }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(props.expanded ?? false);
   const thirdwebClient = useThirdwebClient();
 
   const form = useForm<FormValues>({
@@ -111,7 +112,7 @@ export function SendTestTransaction(props: {
   };
 
   return (
-    <div className="w-full space-y-2 rounded-md border p-3">
+    <div className="w-full space-y-2 rounded-md border bg-card p-3">
       {/* Trigger Area */}
       <div
         role="button"
@@ -150,7 +151,7 @@ export function SendTestTransaction(props: {
                 <Input
                   id="secret-key"
                   type="password"
-                  placeholder="Project Secret Key"
+                  placeholder="abcd....1234"
                   {...form.register("projectSecretKey")}
                   disabled={isLoading}
                   className="text-xs"
@@ -163,7 +164,7 @@ export function SendTestTransaction(props: {
                 <Input
                   id="access-token"
                   type="password"
-                  placeholder="Vault Access Token"
+                  placeholder="vt_act_1234....ABCD"
                   {...form.register("accessToken")}
                   disabled={isLoading}
                   className="text-xs"
@@ -217,6 +218,7 @@ export function SendTestTransaction(props: {
               <div className="flex flex-1 flex-col gap-2">
                 <p className="text-sm">Network</p>
                 <SingleNetworkSelector
+                  className="bg-background"
                   client={thirdwebClient}
                   chainId={form.watch("chainId")}
                   onChange={(chainId) => {
@@ -230,7 +232,7 @@ export function SendTestTransaction(props: {
             <Button
               type="submit"
               variant="primary"
-              disabled={isLoading}
+              disabled={isLoading || !form.formState.isValid}
               size="sm"
               className="w-full min-w-[200px] md:w-auto"
             >

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx

@@ -35,6 +35,7 @@ import { ExternalLinkIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ChainIconClient } from "../../../../../../../components/icons/ChainIcon";
+import type { Wallet } from "../../server-wallets/wallet-table/types";
 import type {
   Transaction,
   TransactionStatus,
@@ -45,6 +46,7 @@ import type {
 export function TransactionsTableUI(props: {
   getData: (params: { page: number }) => Promise<TransactionsResponse>;
   clientId: string;
+  wallets?: Wallet[];
 }) {
   const [autoUpdate, setAutoUpdate] = useState(true);
   const [status, setStatus] = useState<TransactionStatus | undefined>(
@@ -58,6 +60,7 @@ export function TransactionsTableUI(props: {
     queryFn: () => props.getData({ page }),
     refetchInterval: autoUpdate ? 4_000 : false,
     placeholderData: keepPreviousData,
+    enabled: !!props.wallets && props.wallets.length > 0,
   });
 
   const transactions = transactionsQuery.data?.transactions ?? [];

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table.tsx

@@ -1,10 +1,15 @@
 "use client";
 
 import { engineCloudProxy } from "@/actions/proxies";
+import type { Wallet } from "../../server-wallets/wallet-table/types";
 import { TransactionsTableUI } from "./tx-table-ui";
 import type { TransactionsResponse } from "./types";
 
-export function TransactionsTable(props: { teamId: string; clientId: string }) {
+export function TransactionsTable(props: {
+  teamId: string;
+  clientId: string;
+  wallets?: Wallet[];
+}) {
   return (
     <TransactionsTableUI
       getData={async ({ page }) => {
@@ -15,6 +20,7 @@ export function TransactionsTable(props: { teamId: string; clientId: string }) {
         });
       }}
       clientId={props.clientId}
+      wallets={props.wallets}
     />
   );
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/engine/page.tsx

@@ -1,11 +1,11 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
-import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
+import { listEoas } from "@thirdweb-dev/vault-sdk";
 import { notFound, redirect } from "next/navigation";
-import { THIRDWEB_VAULT_URL } from "../../../../../@/constants/env";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { TransactionsAnalyticsPageContent } from "./analytics/analytics-page";
 import { TransactionAnalyticsSummary } from "./analytics/summary";
+import { initVaultClient } from "./server-wallets/lib/vault-utils";
 import type { Wallet } from "./server-wallets/wallet-table/types";
 
 export default async function TransactionsAnalyticsPage(props: {
@@ -14,6 +14,7 @@ export default async function TransactionsAnalyticsPage(props: {
     from?: string | string[] | undefined;
     to?: string | string[] | undefined;
     interval?: string | string[] | undefined;
+    expand_test_tx?: string | string[] | undefined;
   }>;
 }) {
   const [params, searchParams, authToken] = await Promise.all([
@@ -43,9 +44,7 @@ export default async function TransactionsAnalyticsPage(props: {
     (service) => service.name === "engineCloud",
   );
 
-  const vaultClient = await createVaultClient({
-    baseUrl: THIRDWEB_VAULT_URL,
-  });
+  const vaultClient = await initVaultClient();
 
   const managementAccessToken =
     projectEngineCloudService?.managementAccessToken;
@@ -78,6 +77,7 @@ export default async function TransactionsAnalyticsPage(props: {
         project_slug={params.project_slug}
         team_slug={params.team_slug}
         wallets={wallets}
+        expandTestTx={searchParams.expand_test_tx === "true"}
       />
     </div>
   );