+
+
+
+ {chainsLeft.slice(0, 3).map((chain, index) => (
+
+
+
+
+
+ ))}
+ {range(1, noOfMissingChainsLeft).map((index) => (
+
+ ))}
+
+
+
+
+ {chainsRight.slice(0, 3).map((chain, index) => (
+
+
+
+
+
+ ))}
+
+ {range(1, noOfMissingChainsRight).map((index) => (
+
+ ))}
+
-
-
-
+
+
+
+
+
+ {children}
{/*
diff --git a/apps/web/app/api/og/components/favicon.tsx b/apps/web/app/api/og/components/favicon.tsx
new file mode 100644
index 000000000..d36d7d0f0
--- /dev/null
+++ b/apps/web/app/api/og/components/favicon.tsx
@@ -0,0 +1,23 @@
+import { MCLogo } from "~/ui/mc-logo";
+
+export type FaviconProps = {
+ networkBrandGradient: string;
+};
+
+export function Favicon({ networkBrandGradient }: FaviconProps) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/app/api/og/components/opengraph-home.tsx b/apps/web/app/api/og/components/opengraph-home.tsx
index fc1e8f8b3..57fe872af 100644
--- a/apps/web/app/api/og/components/opengraph-home.tsx
+++ b/apps/web/app/api/og/components/opengraph-home.tsx
@@ -1,16 +1,13 @@
/* eslint-disable @next/next/no-img-element */
import { OG_SIZE } from "~/lib/constants";
-import { getSingleNetwork } from "~/lib/network";
+import type { SingleNetwork } from "~/lib/fetch-networks";
+import { MCLogo } from "~/ui/mc-logo";
export type OpenGraphHomeProps = {
- networkSlug: string;
+ network: SingleNetwork;
};
-export async function OpenGraphHome({ networkSlug }: OpenGraphHomeProps) {
- const network = await getSingleNetwork(networkSlug);
-
- if (!network) return null;
-
+export function OpenGraphHome({ network }: OpenGraphHomeProps) {
const primaryColor = `hsl(${network.config.primaryColor})`;
return (
) {
- return (
-
- );
-}
-
function OGGrid(props: React.SVGProps
& { tw?: string }) {
return (
+
+
+
+
+
+ );
+}
diff --git a/apps/web/ui/header/header-search-button.tsx b/apps/web/ui/header/header-search-button.tsx
index c49eafd55..66f501972 100644
--- a/apps/web/ui/header/header-search-button.tsx
+++ b/apps/web/ui/header/header-search-button.tsx
@@ -1,59 +1,35 @@
"use client";
+
import * as React from "react";
-// components
+import { useParams } from "next/navigation";
+import { HeadlessRoute } from "~/lib/headless-utils";
import { SearchModal } from "~/ui/search/search-modal";
+import { useGroupedNetworksContext } from "~/ui/grouped-networks-context";
import { ArrowRight, Search } from "~/ui/icons";
-import Image from "next/image";
import { Button } from "~/ui/button";
-
-// utils
-import { useParams, usePathname } from "next/navigation";
import { cn } from "~/ui/shadcn/utils";
-import { capitalize, truncateHash } from "~/lib/shared-utils";
-
-// types
-import type { HeadlessRoute } from "~/lib/headless-utils";
-import type { GroupedNetworkChains } from "~/lib/grouped-network-chains";
-interface Props {
- optionGroups: GroupedNetworkChains;
-}
-export function HeaderSearchButton({ optionGroups }: Props) {
- const routeParams = useParams() as HeadlessRoute;
- const pathname = usePathname();
+type Props = {
+ children: React.ReactNode;
+ className?: string;
+};
- const params: HeadlessRoute = {
- ...routeParams,
- path: pathname
- .replace(`/${routeParams.network}`, "")
- .split("/")
- .filter(Boolean),
- };
+export function HeaderSearchButton({ children, className }: Props) {
+ const params = useParams() as Pick;
+ const allNetworks = useGroupedNetworksContext();
const network = React.useMemo(() => {
- const values = Object.values(optionGroups).flat();
+ const values = Object.values(allNetworks).flat();
return (
values.find((network) => network.slug === params.network) ?? values[0]
);
- }, [optionGroups, params.network]);
-
- let entityType = capitalize(params.path[0]);
- let query = "";
- if (params.path.length > 1) {
- if (entityType === "Addresses") {
- entityType = "Address";
- } else if (entityType.endsWith("s")) {
- entityType = entityType.substring(0, entityType.length - 1);
- }
- query = decodeURIComponent(params.path[1]);
- }
+ }, [allNetworks, params.network]);
return (
-
-
-
- {/* Network logo, name & chainName */}
-
-
-
-
- {capitalize(network.brandName)}
- /
- {capitalize(network.displayName)}
-
-
+
+
-
-
- {/* Query */}
-
- {entityType}
- {/* For accessibility */}
-
- {entityType} {query}
-
-
- {/* bigger screens */}
-
- {query ? truncateHash(query, 25) : ""}
-
-
-
+
+ {children}
+
+
-
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
-
-
-
Modular Cloud
-
-
-
-
- {/* Bigger screens */}
-
+
);
}
diff --git a/apps/web/ui/header/network-status-badge.tsx b/apps/web/ui/header/network-status-badge.tsx
new file mode 100644
index 000000000..35a0650fb
--- /dev/null
+++ b/apps/web/ui/header/network-status-badge.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import * as React from "react";
+import { useParams } from "next/navigation";
+import type { HeadlessRoute } from "~/lib/headless-utils";
+import { useNetworkStatus } from "~/ui/search/use-network-status";
+import { cn } from "~/ui/shadcn/utils";
+import { useCurrentNetwork } from "~/lib/hooks/use-current-network";
+import { FancyShieldCheck } from "~/ui/icons";
+
+export function NetworkStatusBadge() {
+ const params = useParams() as Pick
;
+ const currentNetwork = useCurrentNetwork();
+ const { data } = useNetworkStatus(params.network);
+
+ if (!data) {
+ return (
+
+ Fetching network status...
+
+ );
+ }
+
+ const isPremiumChain = currentNetwork.verified;
+ const isNetworkHealthy = data[params.network].healthy;
+
+ return (
+
+ {isNetworkHealthy ? (
+
+ {isPremiumChain ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+ ) : isPremiumChain ? (
+
+ ) : (
+
+ )}
+
+ Network {isNetworkHealthy ? "Online" : "Unavailable"}
+
+
+
{lastUpdatedTime && (