Merge pull request #3050 from pyth-network/feat/dev-hub

fix(dev hub): ui fixes

Author: alexcambose

apps/developer-hub/src/components/CopyAddress/index.tsx

@@ -2,19 +2,40 @@
 
 import { CopyButton } from "@pythnetwork/component-library/CopyButton";
 import { Link } from "@pythnetwork/component-library/Link";
+import { useMemo } from "react";
 
 import styles from "./index.module.scss";
 
-const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
+const truncate = (value: string, maxLength?: number) => {
+  if (!maxLength) {
+    return value;
+  }
+  return `${value.slice(0, maxLength)}...${value.slice(-maxLength)}`;
+};
+
+const CopyAddress = ({
+  address,
+  maxLength,
+  url,
+}: {
+  address: string;
+  maxLength?: number;
+  url?: string;
+}) => {
+  const formattedAddress = useMemo(
+    () => truncate(address, maxLength),
+    [address, maxLength],
+  );
+
   return url ? (
     <div className={styles.address}>
       <Link href={url} target="_blank" rel="noreferrer">
-        {address}
+        {formattedAddress}
       </Link>
       <CopyButton text={address} iconOnly />
     </div>
   ) : (
-    <CopyButton text={address}>{address}</CopyButton>
+    <CopyButton text={address}>{formattedAddress}</CopyButton>
   );
 };
 

apps/developer-hub/src/components/EntropyTable/index.module.scss

@@ -0,0 +1,3 @@
+.table {
+  overflow-x: auto;
+}

apps/developer-hub/src/components/EntropyTable/index.tsx

@@ -15,6 +15,7 @@ import { FORTUNA_API_URLS } from "./constants";
 import type { EntropyDeployment } from "./entropy-api-data-fetcher";
 import { fetchEntropyDeployments } from "./entropy-api-data-fetcher";
 import CopyAddress from "../CopyAddress";
+import styles from "./index.module.scss";
 
 function isValidAddress(address: string): address is `0x${string}` {
   return isAddress(address);
@@ -64,7 +65,6 @@ const EntropyTableContent = ({
   chains: Record<string, EntropyDeployment>;
 }) => {
   const fees = useEntropyFees(chains);
-
   const columns: ColumnConfig<Col>[] = [
     { id: "chain", name: "Chain", isRowHeader: true },
     { id: "address", name: "Contract" },
@@ -81,11 +81,12 @@ const EntropyTableContent = ({
         chain: chainName,
         address: deployment.explorer ? (
           <CopyAddress
+            maxLength={6}
             address={deployment.address}
             url={`${deployment.explorer}/address/${deployment.address}`}
           />
         ) : (
-          <CopyAddress address={deployment.address} />
+          <CopyAddress maxLength={6} address={deployment.address} />
         ),
         delay: deployment.delay,
         gasLimit: deployment.gasLimit,
@@ -97,6 +98,7 @@ const EntropyTableContent = ({
 
   return (
     <Table<Col>
+      className={styles.table ?? ""}
       label="Entropy deployments"
       columns={columns}
       rows={rows}

apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css

@@ -0,0 +1,29 @@
+/*
+Overrides for Fumadocs content. Everything after prose is MDX generated content to which we can't apply custom classes so we need to globally select and override content
+*/
+.prose {
+  line-height: 1.5;
+}
+
+:where(.prose) :where(p, li) {
+  line-height: 1.5;
+}
+
+:where(.prose) :where(h1, h2, h3, h4, h5, h6) {
+  line-height: 1.2;
+}
+
+.prose p + ul,
+.prose p + ol {
+  margin-top: 0;
+  padding-top: 0.25rem;
+}
+
+.prose p:has(+ ul),
+.prose p:has(+ ol) {
+  margin-bottom: 0;
+}
+
+#nd-sidebar {
+  --fd-sidebar-top: var(--header-height) !important;
+}

apps/developer-hub/src/components/Root/global.css

@@ -2,3 +2,4 @@
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
 @import "./theme.css";
+@import "./fumadocs-global-style-overrides.css";

apps/developer-hub/src/components/Root/index.tsx

@@ -1,4 +1,4 @@
-import { AppShell } from "@pythnetwork/component-library/AppShell";
+import { AppBody, AppShellRoot } from "@pythnetwork/component-library/AppShell";
 import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
@@ -24,29 +24,32 @@ type Props = {
 };
 
 export const Root = ({ children }: Props) => (
-  <FumadocsRootProvider
-    search={{
-      enabled: true,
-      options: {
-        api: "/api/search",
-      },
-    }}
+  <AppShellRoot
+    amplitudeApiKey={AMPLITUDE_API_KEY}
+    googleAnalyticsId={GOOGLE_ANALYTICS_ID}
+    enableAccessibilityReporting={ENABLE_ACCESSIBILITY_REPORTING}
+    providers={[NuqsAdapter]}
   >
-    <AppShell
-      appName="Developer Hub"
-      displaySupportButton={false}
-      amplitudeApiKey={AMPLITUDE_API_KEY}
-      googleAnalyticsId={GOOGLE_ANALYTICS_ID}
-      enableAccessibilityReporting={ENABLE_ACCESSIBILITY_REPORTING}
-      extraCta={<SearchButton />}
-      mainCta={{
-        label: "Developer Forum",
-        href: "https://dev-forum.pyth.network/",
+    <FumadocsRootProvider
+      search={{
+        enabled: true,
+        options: {
+          api: "/api/search",
+        },
       }}
-      providers={[NuqsAdapter]}
-      tabs={TABS}
     >
-      {children}
-    </AppShell>
-  </FumadocsRootProvider>
+      <AppBody
+        appName="Developer Hub"
+        displaySupportButton={false}
+        extraCta={<SearchButton />}
+        mainCta={{
+          label: "Developer Forum",
+          href: "https://dev-forum.pyth.network/",
+        }}
+        tabs={TABS}
+      >
+        {children}
+      </AppBody>
+    </FumadocsRootProvider>
+  </AppShellRoot>
 );

apps/developer-hub/src/components/Root/theme.css

@@ -301,7 +301,7 @@
     var(--color-steel-900),
     var(--color-steel-50)
   );
-  --color-fd-muted: light-dark(var(--color-steel-100), var(--color-steel-700));
+  --color-fd-muted: light-dark(var(--color-steel-50), var(--color-steel-900));
   --color-fd-muted-foreground: light-dark(
     var(--color-steel-600),
     var(--color-steel-400)
@@ -334,16 +334,3 @@
   );
   --color-fd-ring: light-dark(var(--color-violet-600), var(--color-violet-400));
 }
-
-/* Global typography: tighten line spacing in docs content */
-:where(.prose) {
-  line-height: 1.5;
-}
-
-:where(.prose) :where(p, li) {
-  line-height: 1.5;
-}
-
-:where(.prose) :where(h1, h2, h3, h4, h5, h6) {
-  line-height: 1.2;
-}

packages/component-library/src/AppShell/index.tsx

@@ -30,36 +30,52 @@ type Tab = ComponentProps<typeof MainNavTabs>["tabs"][number] & {
   children: ReactNode;
 };
 
-type Props = AppBodyProps & {
+type AppShellRootProps = {
   enableAccessibilityReporting: boolean;
   amplitudeApiKey?: string | undefined;
   googleAnalyticsId?: string | undefined;
   providers?: ComponentProps<typeof ComposeProviders>["providers"] | undefined;
+  children: ReactNode;
 };
 
-export const AppShell = ({
+export const AppShellRoot = ({
   enableAccessibilityReporting,
   amplitudeApiKey,
   googleAnalyticsId,
   providers,
-  ...props
-}: Props) => (
+  children,
+}: AppShellRootProps) => (
   <RootProviders providers={providers}>
     <HtmlWithLang
       // See https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
       suppressHydrationWarning
       className={clsx(sans.className, styles.html)}
     >
-      <body className={styles.body}>
-        <AppBody {...props} />
-      </body>
+      <body className={styles.body}>{children}</body>
       {googleAnalyticsId && <GoogleAnalytics gaId={googleAnalyticsId} />}
       {amplitudeApiKey && <Amplitude apiKey={amplitudeApiKey} />}
       {enableAccessibilityReporting && <ReportAccessibility />}
     </HtmlWithLang>
   </RootProviders>
 );
 
+export const AppShell = ({
+  enableAccessibilityReporting,
+  amplitudeApiKey,
+  googleAnalyticsId,
+  providers,
+  ...props
+}: AppShellRootProps & AppBodyProps) => (
+  <AppShellRoot
+    enableAccessibilityReporting={enableAccessibilityReporting}
+    amplitudeApiKey={amplitudeApiKey}
+    googleAnalyticsId={googleAnalyticsId}
+    providers={providers}
+  >
+    <AppBody {...props} />
+  </AppShellRoot>
+);
+
 type AppBodyProps = Pick<
   ComponentProps<typeof Header>,
   "appName" | "mainCta" | "extraCta" | "displaySupportButton"