feat: better layout for app info

apps/trading/components/settings/settings.tsx

@@ -3,6 +3,7 @@ import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 import type { ReactNode } from 'react';
+import classNames from 'classnames';
 
 export const Settings = () => {
   const { theme, setTheme } = useThemeSwitcher();
@@ -31,6 +32,18 @@ export const Settings = () => {
       <SettingsGroup label={t('Toast location')}>
         <ToastPositionSetter />
       </SettingsGroup>
+      <SettingsGroup inline={false} label={t('App information')}>
+        <dl className="text-sm grid grid-cols-2 gap-1">
+          {process.env.GIT_TAG && (
+            <>
+              <dt className="text-muted">{t('Version')}</dt>
+              <dd>{process.env.GIT_TAG}</dd>
+            </>
+          )}
+          <dt className="text-muted">{t('Git commit hash')}</dt>
+          <dd className="break-words">{process.env.GIT_COMMIT}</dd>
+        </dl>
+      </SettingsGroup>
     </div>
   );
 };
@@ -39,16 +52,22 @@ const SettingsGroup = ({
   label,
   helpText,
   children,
+  inline = true,
 }: {
   label: string;
-  helpText?: string;
   children: ReactNode;
+  helpText?: string;
+  inline?: boolean;
 }) => {
   return (
-    <div className="flex justify-between items-start mb-4">
-      <div className="w-3/4">
+    <div
+      className={classNames('mb-4 gap-2', {
+        'flex items-start justify-between gap-2': inline,
+      })}
+    >
+      <div className={classNames({ 'w-3/4': inline, 'mb-2': !inline })}>
         <label className="text-sm">{label}</label>
-        {helpText && <p className="text-muted text-xs">{helpText}</p>}
+        {helpText && <p className="text-xs text-muted">{helpText}</p>}
       </div>
       {children}
     </div>

apps/trading/next.config.js

@@ -1,3 +1,4 @@
+const childProcess = require('child_process');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const withNx = require('@nx/next/plugins/with-nx');
 const { withSentryConfig } = require('@sentry/nextjs');
@@ -10,6 +11,20 @@ const sentryWebpackOptions = {
   token: SENTRY_AUTH_TOKEN,
 };
 
+const commitHash = childProcess
+  .execSync('git rev-parse HEAD')
+  .toString()
+  .trim();
+
+// Get the tag of the last commit
+const commitLog = childProcess
+  .execSync('git log --decorate --oneline -1')
+  .toString()
+  .trim();
+
+const tagMatch = commitLog.match(/tag: ([^,)]+)/);
+const tag = tagMatch ? tagMatch[1] : '';
+
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
@@ -20,6 +35,10 @@ const nextConfig = {
     svgr: false,
   },
   pageExtensions: ['page.tsx', 'page.jsx'],
+  env: {
+    GIT_COMMIT: commitHash,
+    GIT_TAG: tag,
+  },
 };
 
 module.exports = SENTRY_AUTH_TOKEN