feat(connect): ph cli version in settings

apps/connect/src/components/modal/modals/settings/about.tsx

@@ -1,6 +1,17 @@
 import { About as BaseAbout } from '@powerhousedao/design-system';
+import { useConnectConfig } from 'src/hooks/useConnectConfig';
 import packageJson from '../../../../../package.json';
 
 export const About: React.FC = () => {
-    return <BaseAbout packageJson={packageJson} />;
+    const [connectConfig] = useConnectConfig();
+    return (
+        <BaseAbout
+            packageJson={packageJson}
+            phCliVersion={
+                typeof connectConfig.phCliVersion === 'string'
+                    ? connectConfig.phCliVersion
+                    : undefined
+            }
+        />
+    );
 };

apps/connect/src/connect.config.ts

@@ -41,6 +41,8 @@ const PH_CONNECT_SENTRY_TRACING_ENABLED =
     import.meta.env.PH_CONNECT_SENTRY_TRACING_ENABLED || 'false';
 
 const GA_TRACKING_ID = import.meta.env.PH_CONNECT_GA_TRACKING_ID;
+const PH_CONNECT_CLI_VERSION =
+    import.meta.env.PH_CONNECT_CLI_VERSION || undefined;
 
 export default {
     appVersion: APP_VERSION,
@@ -76,4 +78,5 @@ export default {
         },
     },
     gaTrackingId: GA_TRACKING_ID,
+    phCliVersion: PH_CONNECT_CLI_VERSION,
 };

apps/connect/src/vite-env.d.ts

@@ -47,6 +47,7 @@ type ImportMetaEnv = {
   LOCAL_DOCUMENT_MODELS: string
   LOCAL_DOCUMENT_EDITORS: string
   LOAD_EXTERNAL_PACKAGES: string
+  PH_CONNECT_CLI_VERSION: string
   // @user-defined-start
   /*
    *  You can use this section to explicitly extend the type definition of `import.meta.env`

apps/connect/studio/index.ts

@@ -29,6 +29,7 @@ export type ConnectStudioOptions = {
     localDocuments?: string;
     open?: boolean;
     packages?: { packageName: string }[];
+    phCliVersion?: string;
 };
 
 export function startConnectStudio(options: ConnectStudioOptions) {
@@ -99,6 +100,10 @@ export function startConnectStudio(options: ConnectStudioOptions) {
         serverOptions.https = options.https;
     }
 
+    if (options.phCliVersion) {
+        serverOptions.phCliVersion = options.phCliVersion;
+    }
+
     return startServer(serverOptions).catch(error => {
         throw error;
     });

apps/connect/studio/server.ts

@@ -15,6 +15,7 @@ export type StartServerOptions = {
     packages?: string[];
     https?: boolean;
     open?: boolean;
+    phCliVersion?: string;
 };
 
 const studioDirname = fileURLToPath(new URL('.', import.meta.url));
@@ -96,6 +97,7 @@ export async function startServer(options: StartServerOptions = {}) {
     }
 
     process.env.PH_CONNECT_STUDIO_MODE = 'true';
+    process.env.PH_CONNECT_CLI_VERSION = options.phCliVersion;
 
     const config: InlineConfig = {
         customLogger: logger,

clis/ph-cli/src/commands/connect.ts

@@ -1,10 +1,10 @@
+import { getConfig } from "@powerhousedao/config/powerhouse";
 import {
-  startConnectStudio,
   ConnectStudioOptions,
+  startConnectStudio,
 } from "@powerhousedao/connect";
-import { getConfig } from "@powerhousedao/config/powerhouse";
 import { Command } from "commander";
-
+import { version } from "../../package.json";
 export type ConnectOptions = ConnectStudioOptions;
 
 export async function startConnect(connectOptions: ConnectOptions) {
@@ -36,10 +36,10 @@ export function connectCommand(program: Command) {
     .action(async (...args: [ConnectOptions]) => {
       const connectOptions = args.at(0) || {};
       const { documentModelsDir, editorsDir, packages, studio } = getConfig();
-
       await startConnectStudio({
         port: studio?.port?.toString() || undefined,
         packages,
+        phCliVersion: typeof version === "string" ? version : undefined,
         localDocuments: documentModelsDir || undefined,
         localEditors: editorsDir || undefined,
         open: studio?.openBrowser,

clis/ph-cli/tsconfig.json

@@ -4,7 +4,8 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "outDir": "./dist",
-    "isolatedModules": true
+    "isolatedModules": true,
+    "resolveJsonModule": true,
   },
-  "include": ["src/**/*", "*.config.ts"]
+  "include": ["src/**/*", "*.config.ts", "package.json"]
 }

packages/design-system/src/connect/components/modal/settings-modal-v2/about.stories.tsx

@@ -15,3 +15,10 @@ export const Default: Story = {
     packageJson: mockPackageJson,
   },
 };
+
+export const WithPhCliVersion: Story = {
+  args: {
+    packageJson: mockPackageJson,
+    phCliVersion: "1.0.0",
+  },
+};

packages/design-system/src/connect/components/modal/settings-modal-v2/about.tsx

@@ -2,9 +2,10 @@ import { DependencyVersions } from "../settings-modal/dependency-versions/depend
 
 type Props = {
   packageJson: unknown;
+  phCliVersion?: string;
 };
 export function About(props: Props) {
-  const { packageJson } = props;
+  const { packageJson, phCliVersion } = props;
   return (
     <div className="bg-white p-3">
       <h2 className="font-semibold">About</h2>
@@ -14,7 +15,10 @@ export function About(props: Props) {
         Connect.
       </p>
       <div className="my-4">
-        <DependencyVersions packageJson={packageJson} />
+        <DependencyVersions
+          packageJson={packageJson}
+          phCliVersion={phCliVersion}
+        />
       </div>
     </div>
   );

packages/design-system/src/connect/components/modal/settings-modal/dependency-versions/dependency-versions.stories.tsx

@@ -23,3 +23,17 @@ export const Default: Story = {
     packageJson: mockPackageJson,
   },
 };
+
+export const WithPhCliVersion: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    packageJson: mockPackageJson,
+    phCliVersion: "1.0.0",
+  },
+};

packages/design-system/src/connect/components/modal/settings-modal/dependency-versions/dependency-versions.tsx

@@ -71,11 +71,12 @@ export function verifyPackageJsonFields(
 
 type Props = {
   readonly packageJson: unknown;
+  readonly phCliVersion?: string;
 };
 
 export function DependencyVersions(props: Props) {
   const [isOpen, setIsOpen] = useState(false);
-  const { packageJson } = props;
+  const { packageJson, phCliVersion } = props;
 
   const validatedData = verifyPackageJsonFields(packageJson);
   if (!validatedData) {
@@ -90,7 +91,7 @@ export function DependencyVersions(props: Props) {
       title={`App version: ${validatedData.version}`}
       toggleClassName="text-gray-900 text-sm"
     >
-      <ul className="text-gray-600 text-sm">
+      <ul className="text-sm text-gray-600">
         {REQUIRED_DEPENDENCIES.map((dep) => (
           <li key={dep} className="my-1 flex justify-between pr-1">
             <span>{dep.replace("@powerhousedao/", "")}:</span>
@@ -99,6 +100,12 @@ export function DependencyVersions(props: Props) {
             </span>
           </li>
         ))}
+        {phCliVersion && (
+          <li className="my-1 flex justify-between pr-1" key="ph-cli">
+            <span>@powerhousedao/ph-cli:</span>
+            <span className="font-normal">{phCliVersion}</span>
+          </li>
+        )}
       </ul>
     </Disclosure>
   );