[TOOL-3337] Dashboard: Engine cloud - DO NOT MERGE (#6639)

Co-authored-by: Prithvish Baidya <[email protected]>
Co-authored-by: Joaquim Verges <[email protected]>

Author: 3 people

.changeset/big-cases-wish.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/vault-sdk": patch
+---
+
+Introducing vault sdk

.gitignore

@@ -30,4 +30,5 @@ packages/*/typedoc/*
 storybook-static
 .aider*
 
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.cursor

apps/dashboard/.env.example

@@ -104,4 +104,8 @@ ANALYTICS_SERVICE_URL=""
 NEXT_PUBLIC_NEBULA_URL=""
 
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
-STRIPE_SECRET_KEY=""
+STRIPE_SECRET_KEY=""
+
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""

apps/dashboard/knip.json

@@ -12,6 +12,7 @@
   "ignoreDependencies": [
     "@storybook/blocks",
     "@thirdweb-dev/service-utils",
+    "@thirdweb-dev/vault-sdk",
     "@types/color",
     "fast-xml-parser"
   ]

apps/dashboard/package.json

@@ -45,11 +45,13 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tooltip": "1.2.3",
+    "@scalar/api-reference-react": "^0.6.19",
     "@sentry/nextjs": "9.13.0",
     "@shazow/whatsabi": "0.21.0",
     "@tanstack/react-query": "5.74.4",
     "@tanstack/react-table": "^8.21.3",
     "@thirdweb-dev/service-utils": "workspace:*",
+    "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.0.0",
     "@vercel/og": "^0.6.8",
     "abitype": "1.0.8",

apps/dashboard/src/@/actions/proxies.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { API_SERVER_URL, THIRDWEB_ENGINE_CLOUD_URL } from "../constants/env";
 
 type ProxyActionParams = {
   pathname: string;
@@ -79,6 +79,10 @@ export async function apiServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(API_SERVER_URL, params);
 }
 
+export async function engineCloudProxy<T>(params: ProxyActionParams) {
+  return proxy<T>(THIRDWEB_ENGINE_CLOUD_URL, params);
+}
+
 export async function payServerProxy<T>(params: ProxyActionParams) {
   return proxy<T>(
     process.env.NEXT_PUBLIC_PAY_URL

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -95,7 +95,7 @@ export function FullWidthSidebarLayout(props: {
           links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
         />
 
-        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+        <main className="flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
         <AppFooter containerClassName="max-w-7xl" />

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -129,7 +129,9 @@ export const SelectWithSearch = React.forwardRef<
                   selectedOption && "text-foreground",
                 )}
               >
-                {selectedOption?.label || placeholder}
+                {renderOption && selectedOption
+                  ? renderOption(selectedOption)
+                  : selectedOption?.label || placeholder}
               </span>
               <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
             </div>

apps/dashboard/src/@/components/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline text-semibold",
         pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
         upsell:
-          "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
+          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
       },
       size: {
         default: "h-10 px-4 py-2",

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -10,7 +10,7 @@ import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
 export type TabLink = {
-  name: string;
+  name: React.ReactNode;
   href: string;
   isActive: boolean;
   isDisabled?: boolean;
@@ -43,7 +43,7 @@ export function TabLinks(props: {
             return (
               <Button
                 asChild
-                key={tab.name}
+                key={tab.href}
                 disabled={tab.isDisabled}
                 variant="ghost"
               >
@@ -206,7 +206,7 @@ function useUnderline<El extends HTMLElement>() {
 
 export function TabPathLinks(props: {
   links: {
-    name: string;
+    name: React.ReactNode;
     path: string;
     exactMatch?: boolean;
     isDisabled?: boolean;