🚧 some changes

modularcloud · Feb 28, 2024 · 275553c · 275553c
1 parent 87f101d
commit 275553c
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 13 deletions.
diff --git a/apps/web/app/(home)/[network]/page.tsx b/apps/web/app/(home)/[network]/page.tsx
@@ -17,6 +17,9 @@ import { ShortcutKey } from "~/ui/shortcut-key";
 import { ScrollToSection } from "./scroll-to-section";
 import { cn } from "~/ui/shadcn/utils";
 import { FancyCheck } from "~/ui/icons";
+import { TokenPrices } from "~/ui/token-prices";
+import Image from "next/image";
+import Link from "next/link";
 
 interface Props {
   params: Pick<HeadlessRoute, "network">;
@@ -64,20 +67,74 @@ export default async function NetworkPage({ params }: Props) {
   );
 }
 
+function getLogoSVGSrc(network: SingleNetwork) {
+  switch (network.brand) {
+    case "celestia":
+      return "/images/celestia-logo-white.svg";
+    case "dymension":
+      return "/images/dymension-logo-white.svg";
+    case "eclipse":
+      return "/images/eclipse-logo-white.svg";
+    default:
+      if (network.config.platform === "dymension") {
+        return "/images/dymension-logo-white.svg";
+      }
+      return network.config.logoUrl;
+  }
+}
+
 function HeroSection({ network }: { network: SingleNetwork }) {
+  const links = network.config.links;
   return (
     <section
       id="hero"
       className={cn(
         "flex flex-col items-center text-center border shadow-sm bg-white rounded-xl w-full",
         "relative mb-10",
-        "tab:px-32 tab:py-14",
+        "tab:px-32 tab:py-14 py-10 px-8",
+        "gap-4",
       )}
     >
-      <small className="mb-4 uppercase text-xs border rounded-full px-3 py-1.5 bg-white tracking-[0.105rem]">
+      <TokenPrices className="mb-2 tab:hidden" />
+
+      {/* Logo */}
+      <div className="w-40 md:w-56 relative flex items-center mb-5">
+        <div
+          className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+          aria-hidden="true"
+        />
+        <div className="w-full h-[2px] bg-mid-dark-100" aria-hidden="true" />
+        <div
+          className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+          aria-hidden="true"
+        />
+
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div
+            className="rounded-md p-1.5 flex flex-none items-center justify-center border border-primary"
+            style={{
+              "--color-primary": network.config.primaryColor,
+              backgroundImage: network.config.cssGradient.replaceAll(";", ""),
+            }}
+          >
+            <Image
+              src={getLogoSVGSrc(network)}
+              className="w-4 h-4 object-contain object-center rounded-full"
+              width={16}
+              height={16}
+              alt={`${network.brand} logo`}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* network type pill */}
+      <small className="uppercase text-xs border rounded-full px-3 py-1.5 bg-white tracking-[0.105rem]">
         {network.config.type}
       </small>
-      <h1 className="mb-4 font-logo flex items-baseline gap-3 text-5xl font-medium md:text-6xl capitalize">
+
+      {/* Big text (network name) */}
+      <h1 className="font-logo flex items-baseline gap-3 text-4xl font-medium md:text-6xl capitalize">
         <span
           className="text-transparent bg-clip-text"
           style={{
@@ -89,10 +146,55 @@ function HeroSection({ network }: { network: SingleNetwork }) {
         <span className="text-gray-900">{network.chainName}</span>
       </h1>
 
-      <p className="text-sm text-muted mb-6">{network.config.description}</p>
+      <p className="text-sm text-muted mb-2">{network.config.description}</p>
 
       {/* Links */}
-      <div></div>
+      {links.length > 0 && (
+        <div className="flex items-center gap-6 flex-grow w-full justify-center">
+          <div className="flex w-full items-center max-w-[225px] flex-grow flex-shrink">
+            <div
+              className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+              aria-hidden="true"
+            />
+            <div
+              className="w-full flex-grow flex-shrink h-[2px] bg-mid-dark-100"
+              aria-hidden="true"
+            />
+            <div
+              className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+              aria-hidden="true"
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            {links.map((link) => (
+              <Link
+                href={link.href}
+                className="p-1.5 rounded-md text-muted bg-white border shadow-sm"
+                key={link.href}
+              >
+                {/* ... */}
+              </Link>
+            ))}
+          </div>
+
+          <div className="flex w-full items-center max-w-[225px] flex-grow flex-shrink">
+            <div
+              className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+              aria-hidden="true"
+            />
+            <div
+              className="w-full flex-grow flex-shrink h-[2px] bg-mid-dark-100"
+              aria-hidden="true"
+            />
+            <div
+              className="w-1 h-1 flex-none rounded-full bg-mid-dark-100"
+              aria-hidden="true"
+            />
+          </div>
+        </div>
+      )}
+
       {/* Badges */}
       <div className="flex items-center justify-center w-full gap-3">
         {network.paidVersion && (

diff --git a/apps/web/lib/fetch-networks.ts b/apps/web/lib/fetch-networks.ts
@@ -116,6 +116,7 @@ function getDefaultIntegrationConfigValues(
   }
   if (brand === "celestia") {
     return {
+      type: "Data Availability Layer",
       widgetLayout: "Celestia",
       primaryColor: "256.07 100% 67.06%",
       cssGradient: `linear-gradient(89deg, #8457FF -17.52%, #501FD7 89.78%)`,
@@ -175,6 +176,7 @@ function getDefaultIntegrationConfigValues(
   }
   if (brand === "dymension") {
     return {
+      type: "settlement layer",
       widgetLayout: "Dymension",
       cssGradient: `linear-gradient(89deg, #24201F -17.52%, #24201F 89.78%)`,
       primaryColor: "12 7.46% 13.14%",

diff --git a/apps/web/lib/headless-utils.ts b/apps/web/lib/headless-utils.ts
@@ -1,6 +1,6 @@
 import "server-only";
 import {
-  Page,
+  type Page,
   createSVMIntegration,
   PaginationContext,
   SearchBuilders,

diff --git a/apps/web/ui/header/header-search-button.tsx b/apps/web/ui/header/header-search-button.tsx
@@ -37,7 +37,7 @@ export function HeaderSearchButton({ children, className }: Props) {
       <Button
         className={cn(
           "inline-flex items-center justify-between gap-3 lg:gap-5",
-          "min-w-0 flex-shrink md:w-[280px] max-w-[280px]",
+          "min-w-0 flex-shrink tab:w-[280px] max-w-[280px]",
           "shadow-sm text-sm",
           "py-2 px-2.5 tab:px-3.5",
           className,
@@ -50,12 +50,12 @@ export function HeaderSearchButton({ children, className }: Props) {
         <div className="flex items-center gap-2">
           <Search className="h-4 w-4 text-muted flex-none" aria-hidden="true" />
 
-          <div className="flex-none hidden md:flex gap-2 items-center">
+          <div className="flex-none hidden tab:flex gap-2 items-center">
             {children}
           </div>
         </div>
 
-        <div className="flex-none hidden md:block">
+        <div className="flex-none hidden tab:block">
           <ArrowRight
             className="text-muted flex-none h-3 w-3"
             aria-hidden="true"

diff --git a/apps/web/ui/header/index.tsx b/apps/web/ui/header/index.tsx
@@ -15,7 +15,7 @@ export async function Header() {
       )}
     >
       <BrandedLogo />
-      <HeaderSearchButton className="md:absolute left-1/2 top-1/2 md:-translate-x-1/2 md:-translate-y-1/2">
+      <HeaderSearchButton className="tab:absolute left-1/2 top-1/2 tab:-translate-x-1/2 tab:-translate-y-1/2">
         <span className="text-muted text-xs">Explore</span>
         <ShortcutKey command="/" />
       </HeaderSearchButton>

diff --git a/apps/web/ui/token-prices/index.tsx b/apps/web/ui/token-prices/index.tsx
@@ -19,7 +19,11 @@ const tokenAPIResponse = z.object({
   }),
 });
 
-export function TokenPrices() {
+type Props = {
+  className?: string;
+};
+
+export function TokenPrices({ className }: Props) {
   const params = useParams() as Pick<HeadlessRoute, "network">;
   const allNetworks = useGroupedNetworksContext();
 
@@ -48,15 +52,20 @@ export function TokenPrices() {
 
   if (!isNetworkSupported) {
     return (
-      <div className="flex items-center gap-1 px-2 py-1 border border-mid-dark-100 bg-muted-100 text-muted rounded-md flex-none">
+      <div
+        className={cn(
+          "flex items-center gap-1 px-2 py-1 border border-mid-dark-100 bg-muted-100 text-muted rounded-md flex-none",
+          className,
+        )}
+      >
         <Warning className="h-3.5 w-3.5" aria-hidden="true" />
         <p className="text-xs">Testnet</p>
       </div>
     );
   }
 
   return (
-    <dl className="flex text-xs items-center gap-3">
+    <dl className={cn("flex text-xs items-center gap-3", className)}>
       <div className="flex items-center gap-1 px-2 py-1 border border-mid-dark-100 bg-muted-100 text-muted rounded-md flex-none">
         <dt>{capitalize(network.token.name)}:</dt>
         <dd className="text-xs">