Merge pull request #995 from hemilabs/mainnet-is-alive

Add Mainnet modal + badges

Author: gndelia

webapp/app/[locale]/_components/header.tsx

@@ -6,6 +6,8 @@ import { TunnelTabs } from 'components/tunnelTabs'
 import { useTunnelOperationByConnectedWallet } from 'hooks/useTunnelOperationByConnectedWallet'
 import dynamic from 'next/dynamic'
 
+import { Badge } from './navbar/_components/badge'
+
 const WalletConnection = dynamic(
   () =>
     import('app/components/connectWallets').then(mod => mod.WalletConnection),
@@ -41,10 +43,11 @@ export const Header = function ({ isMenuOpen, toggleMenu }: Props) {
       className="md:h-17 md:py-4.5 flex h-14 items-center border-b border-solid
      border-neutral-300/55 bg-white px-3 py-3 md:bg-transparent md:px-0"
     >
-      <div className="h-6 w-6 md:hidden">
-        <Link href={href}>
+      <div className="flex items-center gap-x-2 md:hidden">
+        <Link className="h-6 w-6" href={href}>
           <HemiSymbol />
         </Link>
+        <Badge />
       </div>
       <div className="hidden pl-6 md:block">
         <StakeTabs />

webapp/app/[locale]/_components/navbar/_components/badge.tsx

@@ -0,0 +1,21 @@
+import { useNetworkType } from 'hooks/useNetworkType'
+
+export const Badge = function () {
+  const [networkType] = useNetworkType()
+  return (
+    <span
+      className="text-xxs flex h-5 items-center justify-center rounded-md
+    px-1.5 py-1 text-center font-medium capitalize text-orange-950"
+      style={{
+        background:
+          'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 35.57%, rgba(255, 255, 255, 0.00) 70.92%), var(--Color-Orange-500, #FF6C15)',
+        boxShadow:
+          '0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 2px 0px rgba(10, 10, 10, 0.04)',
+        textShadow:
+          '0px 0px 2px rgba(255, 255, 255, 0.56), 0px 0px 1px rgba(0, 0, 0, 0.14)',
+      }}
+    >
+      {networkType}
+    </span>
+  )
+}

webapp/app/[locale]/_components/navbar/index.tsx

@@ -17,6 +17,7 @@ import { useTranslations } from 'next-intl'
 import React, { Suspense } from 'react'
 import { getSwapUrl } from 'utils/swap'
 
+import { Badge } from './_components/badge'
 import { CmcAttribution } from './_components/cmcAttribution'
 import { GetStarted } from './_components/getStarted'
 import { HemiExplorerLink } from './_components/hemiExplorerLink'
@@ -47,10 +48,11 @@ export const Navbar = function () {
     <>
       <div className="md:h-98vh flex h-[calc(100dvh-56px)] flex-col bg-white px-3 pt-3 md:pt-0 [&>*]:md:ml-3 [&>*]:md:pr-3">
         <div className="hidden h-24 items-center justify-center md:flex">
-          <div className="flex h-1/3 w-1/3">
+          <div className="flex items-center gap-x-2">
             <Link className="w-full" href={href}>
               <HemiLogoFull />
             </Link>
+            <Badge />
           </div>
         </div>
         <ul className="flex h-[calc(100dvh-275px)] flex-col gap-y-1 overflow-y-auto md:h-full [&>li>div]:px-3">

webapp/app/[locale]/layout.tsx

@@ -21,6 +21,13 @@ import { Analytics } from './_components/analytics'
 import { AppLayout } from './_components/appLayout'
 import { Navbar } from './_components/navbar'
 
+const MainnetLiveModal = dynamic(
+  () => import('components/mainnetLiveModal').then(mod => mod.MainnetLiveModal),
+  {
+    ssr: false,
+  },
+)
+
 const StakeAndEarnCard = dynamic(
   () =>
     import('./_components/stakeAndEarnCard').then(mod => mod.StakeAndEarnCard),
@@ -86,6 +93,7 @@ export default async function RootLayout({
                           {featureFlags.stakeCampaignEnabled && (
                             <StakeAndEarnCard />
                           )}
+                          {featureFlags.mainnetEnabled && <MainnetLiveModal />}
                         </AppLayout>
                       </div>
                     </Analytics>

webapp/components/button.tsx

@@ -17,7 +17,7 @@ const variants = {
 } as const
 
 type Height = {
-  height?: 'h-4' | 'h-6' | 'h-8'
+  height?: 'h-4' | 'h-5' | 'h-6' | 'h-8'
 }
 
 type Variant = {

webapp/components/drawer/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { ComponentType } from 'react'
 import ReactDOM from 'react-dom'
 import { CloseIcon } from 'ui-common/components/closeIcon'
 import { useOnClickOutside } from 'ui-common/hooks/useOnClickOutside'
@@ -9,10 +10,17 @@ import { Overlay } from '../overlay'
 
 type Props = {
   children: React.ReactNode
+  container?: HTMLElement
   onClose?: () => void
+  overlay?: ComponentType
 }
 
-export const Drawer = function ({ children, onClose }: Props) {
+export const Drawer = function ({
+  children,
+  container,
+  onClose,
+  overlay: OverlayComponent = Overlay,
+}: Props) {
   const drawerRef = useOnClickOutside<HTMLDivElement>(onClose)
 
   useOnKeyUp(function (e) {
@@ -34,9 +42,9 @@ export const Drawer = function ({ children, onClose }: Props) {
       >
         {children}
       </div>
-      <Overlay />
+      <OverlayComponent />
     </>,
-    document.getElementById('app-layout-container'),
+    container ?? document.getElementById('app-layout-container'),
   )
 }