Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions apps/developer-hub/src/components/CopyAddress/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,31 @@ import { Link } from "@pythnetwork/component-library/Link";

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;
}) => {
return url ? (
<div className={styles.address}>
<Link href={url} target="_blank" rel="noreferrer">
{address}
{truncate(address, maxLength)}
</Link>
<CopyButton text={address} iconOnly />
</div>
) : (
<CopyButton text={address}>{address}</CopyButton>
<CopyButton text={address}>{truncate(address, maxLength)}</CopyButton>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.table {
overflow-x: auto;
}
6 changes: 4 additions & 2 deletions apps/developer-hub/src/components/EntropyTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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" },
Expand All @@ -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,
Expand All @@ -97,6 +98,7 @@ const EntropyTableContent = ({

return (
<Table<Col>
className={styles.table ?? ""}
label="Entropy deployments"
columns={columns}
rows={rows}
Expand Down
49 changes: 26 additions & 23 deletions apps/developer-hub/src/components/Root/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
);
18 changes: 15 additions & 3 deletions apps/developer-hub/src/components/Root/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -336,14 +336,26 @@
}

/* Global typography: tighten line spacing in docs content */
:where(.prose) {
.prose {
line-height: 1.5;
}

:where(.prose) :where(p, li) {
.prose p {
line-height: 1.5;
margin-bottom: 0;
}

:where(.prose) :where(h1, h2, h3, h4, h5, h6) {
line-height: 1.2;
}

.prose p + ul,
.prose p + ol {
Copy link
Contributor Author

@alexcambose alexcambose Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this reduces list paddings

also there's no cleaner way to change the default styles other than globally styling cc #3031 (comment)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:(

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a comment around all this to explain why we're using global styles? The thing to avoid is some dev coming along, seeing this, and thinking it's OK to use global styles

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe even move this stuff to a separate file and import it, something like fumadocs-global-styles-override.scss with a big scary comment at the top

margin-top: 0;
padding-top: 0.25rem;
}

.prose p:has(+ ul),
.prose p:has(+ ol) {
margin-bottom: 0;
}
30 changes: 23 additions & 7 deletions packages/component-library/src/AppShell/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +69 to +76
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split the AppShell into 2 components so we can have the fumadocs provider after <body> but before the App Shell header

);

type AppBodyProps = Pick<
ComponentProps<typeof Header>,
"appName" | "mainCta" | "extraCta" | "displaySupportButton"
Expand Down
Loading
Loading