Create shared UI library - @workspace/ui

apps/dashboard/knip.json

@@ -10,8 +10,11 @@
   "ignoreDependencies": [
     "@thirdweb-dev/service-utils",
     "@thirdweb-dev/vault-sdk",
+    "thirdweb",
     "@types/color",
-    "fast-xml-parser"
+    "fast-xml-parser",
+    "@workspace/ui",
+    "tailwindcss-animate"
   ],
   "next": true,
   "project": ["src/**"]

apps/dashboard/next.config.ts

@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
 
 const baseNextConfig: NextConfig = {
+  transpilePackages: ["@workspace/ui"],
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -196,7 +197,6 @@ const baseNextConfig: NextConfig = {
       ]),
     ];
   },
-  serverExternalPackages: ["pino-pretty"],
 };
 
 function getConfig(): NextConfig {

apps/dashboard/package.json

@@ -28,6 +28,7 @@
     "@thirdweb-dev/vault-sdk": "workspace:*",
     "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
+    "@workspace/ui": "workspace:*",
     "abitype": "1.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/dashboard/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

apps/dashboard/src/@/components/sponsored-transactions-table/SponsoredTransactionsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+import type { ThirdwebClient } from "thirdweb";
 import { analyticsServerProxy } from "@/actions/proxies";
 import {
   type SponsoredTransaction,

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

@@ -1,83 +1,3 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
-        lg: "h-11 rounded-md px-8",
-        sm: "h-9 rounded-md px-3",
-      },
-      variant: {
-        default: "bg-foreground text-background hover:bg-foreground/90",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
-        secondary:
-          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
-        upsell:
-          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
-      },
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-
-    // "button" elements automatically handle the `disabled` attribute.
-    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
-    // to visually convey the disabled state and prevent user interaction.
-    // We do that by conditionally adding the same utility classes that the
-    // `disabled:` pseudo-variant would normally apply and by setting
-    // `aria-disabled` for accessibility.
-    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
-
-    const btnOnlyProps =
-      Comp === "button"
-        ? {
-            type:
-              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
-              ("button" as const),
-          }
-        : undefined;
-
-    return (
-      <Comp
-        aria-disabled={disabled ? true : undefined}
-        className={cn(
-          buttonVariants({ className, size, variant }),
-          disabledClass,
-        )}
-        disabled={disabled}
-        ref={ref}
-        {...props}
-        {...btnOnlyProps}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+"use client";
+export type { ButtonProps } from "@workspace/ui/components/button";
+export { Button, buttonVariants } from "@workspace/ui/components/button";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/types.ts

@@ -1,5 +1,4 @@
-// FIXME: export listing status type
-import type { ListingStatus } from "thirdweb/dist/types/extensions/marketplace/types";
+import type { ListingStatus } from "thirdweb/extensions/marketplace";
 
 export const LISTING_STATUS: Record<ListingStatus, string> = {
   ACTIVE: "Active",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/hooks.ts

@@ -5,13 +5,12 @@ import {
   toUnits,
 } from "thirdweb";
 import { getContract } from "thirdweb/contract";
-import type { OverrideEntry } from "thirdweb/dist/types/utils/extensions/drops/types";
-import type { Prettify } from "thirdweb/dist/types/utils/type-utils";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { download } from "thirdweb/storage";
+import type { OverrideEntry } from "thirdweb/utils";
 import { maxUint256 } from "thirdweb/utils";
 import type { z } from "zod";
 import type {
@@ -26,20 +25,15 @@ type SnapshotEntry = {
   currencyAddress?: string | undefined;
 };
 
-type CombinedClaimCondition = Prettify<
-  Omit<
-    LegacyClaimCondition,
-    "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
-  > & {
-    price: bigint;
-    currencyMetadata: Omit<
-      LegacyClaimCondition["currencyMetadata"],
-      "value"
-    > & {
-      value: bigint;
-    };
-  }
->;
+type CombinedClaimCondition = Omit<
+  LegacyClaimCondition,
+  "price" | "waitInSeconds" | "availableSupply" | "currencyMetadata"
+> & {
+  price: bigint;
+  currencyMetadata: Omit<LegacyClaimCondition["currencyMetadata"], "value"> & {
+    value: bigint;
+  };
+};
 
 type Options =
   | {

apps/dashboard/src/app/(app)/layout.tsx

@@ -1,4 +1,4 @@
-import "../../global.css";
+import "@workspace/ui/global.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/chain-overview.tsx

@@ -1,4 +1,4 @@
-import type { ThirdwebClient } from "thirdweb/dist/types/client/client";
+import type { ThirdwebClient } from "thirdweb";
 import { useAllChainsData } from "@/hooks/chains/allChains";
 import { ChainIconClient } from "@/icons/ChainIcon";
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page-impl.tsx

@@ -11,7 +11,6 @@ import {
   toWei,
 } from "thirdweb";
 import { deployERC20Contract } from "thirdweb/deploys";
-import type { ClaimConditionsInput } from "thirdweb/dist/types/utils/extensions/drops/types";
 import {
   approve,
   claimTo,
@@ -25,6 +24,7 @@ import {
   distributeToken,
   getDeployedEntrypointERC20,
 } from "thirdweb/tokens";
+import type { ClaimConditionsInput } from "thirdweb/utils";
 import { create7702MinimalAccount } from "thirdweb/wallets/smart";
 import { revalidatePathAction } from "@/actions/revalidate";
 import { reportContractDeployed } from "@/analytics/report";

apps/dashboard/src/app/bridge/layout.tsx

@@ -1,6 +1,6 @@
 import { Inter } from "next/font/google";
 import { cn } from "@/lib/utils";
-import "../../global.css";
+import "@workspace/ui/global.css";
 import { BridgeProviders } from "./components/client/Providers.client";
 
 const fontSans = Inter({

apps/dashboard/src/app/login/layout.tsx

@@ -1,4 +1,4 @@
-import "../../global.css";
+import "@workspace/ui/global.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";

apps/dashboard/src/app/pay/layout.tsx

@@ -1,4 +1,4 @@
-import "../../global.css";
+import "@workspace/ui/global.css";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { cn } from "@/lib/utils";

apps/dashboard/tailwind.config.ts

@@ -0,0 +1,13 @@
+import tailwindConfig from "@workspace/ui/tailwind.config";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  ...tailwindConfig,
+  content: [
+    "./src/**/*.{ts,tsx}",
+    // add contents of ui package
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+};
+
+export default config;

apps/dashboard/tsconfig.json

@@ -9,11 +9,11 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
     "noEmit": true,
     "noUncheckedIndexedAccess": true,
-
     "plugins": [
       {
         "name": "next"
@@ -22,7 +22,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2020"
+    "target": "ES2022"
   },
   "exclude": ["node_modules", ".next", "lib/__generated__"],
   "include": [

apps/playground-web/knip.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "ignore": ["src/components/ui/**", "src/app/insight/utils.ts"],
-  "ignoreDependencies": ["server-only"],
+  "ignoreDependencies": ["server-only", "@workspace/ui", "tailwindcss-animate"],
   "next": true,
   "project": ["src/**"]
 }

apps/playground-web/next.config.mjs

@@ -37,6 +37,7 @@ const securityHeaders = [
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -164,10 +165,6 @@ const nextConfig = {
       },
     ];
   },
-  webpack: (config) => {
-    config.externals.push("pino-pretty", "lokijs", "encoding");
-    return config;
-  },
 };
 
 export default nextConfig;

apps/playground-web/package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "1.2.7",
     "@tanstack/react-query": "5.81.5",
+    "@workspace/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "4.1.0",

apps/playground-web/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

apps/playground-web/src/app/ai/api/chat.ts

@@ -63,7 +63,7 @@ export async function promptNebula(params: {
   const events = await stream(`${API_URL}/ai/chat`, {
     body: JSON.stringify(body),
     headers: {
-      "x-client-id": process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
+      "x-client-id": process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || "",
       "Content-Type": "application/json",
     },
     method: "POST",

apps/playground-web/src/app/ai/api/types.ts

@@ -1,8 +1,3 @@
-type SessionContextFilter = {
-  chain_ids: string[] | null;
-  wallet_address: string | null;
-};
-
 type NebulaUserMessageContentItem =
   | {
       type: "image";
@@ -26,17 +21,6 @@ export type NebulaUserMessage = {
   content: NebulaUserMessageContent;
 };
 
-export type NebulaSessionHistoryMessage =
-  | {
-      role: "assistant" | "action" | "image";
-      content: string;
-      timestamp: number;
-    }
-  | {
-      role: "user";
-      content: NebulaUserMessageContent | string;
-    };
-
 export type NebulaTxData = {
   chainId: number;
   data: `0x${string}`;