refactor(billing): keep banner deps in a single component

(#515)

apps/deploy-web/src/components/layout/Layout.tsx

@@ -87,33 +87,30 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
   };
 
   return (
-    <div className="h-full">
+    <div className="flex h-full">
       {/* Banner for Free Trial and Credit Card payments */}
       {hasCreditCardBanner && (
         <>
-          <div className="fixed top-0 flex h-[40px] w-full items-center justify-center space-x-4 bg-primary px-3 py-2">
+          <div className="fixed top-0 z-10 flex h-[40px] w-full items-center justify-center space-x-4 bg-primary px-3 py-2">
             <span className="text-sm font-semibold text-white">Credit Card payments are now available!</span>
 
             {!hasManagedWallet && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" size="sm" />}
           </div>
-          <style jsx global>{`
-            body {
-              height: calc(100% - 97px) !important;
-            }
-
-            html {
-              scroll-padding-top: 97px;
-            }
-          `}</style>
         </>
       )}
 
-      <div className="h-full w-full" style={{ marginTop: `${ACCOUNT_BAR_HEIGHT + (hasCreditCardBanner ? 40 : 0)}px` }}>
+      <div className="w-full flex-1" style={{ marginTop: `${ACCOUNT_BAR_HEIGHT + (hasCreditCardBanner ? 40 : 0)}px` }}>
         <div className="h-full">
-          <Nav isMobileOpen={isMobileOpen} handleDrawerToggle={handleDrawerToggle} />
+          <Nav isMobileOpen={isMobileOpen} handleDrawerToggle={handleDrawerToggle} className={{ "top-[40px]": hasCreditCardBanner }} />
 
           <div className="block h-full w-full flex-grow rounded-none md:flex">
-            <Sidebar onOpenMenuClick={onOpenMenuClick} isNavOpen={isNavOpen} handleDrawerToggle={handleDrawerToggle} isMobileOpen={isMobileOpen} />
+            <Sidebar
+              onOpenMenuClick={onOpenMenuClick}
+              isNavOpen={isNavOpen}
+              handleDrawerToggle={handleDrawerToggle}
+              isMobileOpen={isMobileOpen}
+              mdDrawerClassName={{ ["h-[calc(100%-40px)] mt-[97px]"]: hasCreditCardBanner }}
+            />
 
             <div
               className={cn("ease ml-0 h-full flex-grow transition-[margin-left] duration-300", {

apps/deploy-web/src/components/layout/Nav.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { Button, buttonVariants } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
+import type { ClassValue } from "clsx";
 import { Menu, Xmark } from "iconoir-react";
 import { useAtom } from "jotai";
 import Link from "next/link";
 
 import { ACCOUNT_BAR_HEIGHT } from "@src/config/ui.config";
 import { useCustomUser } from "@src/hooks/useCustomUser";
-import { useHasCreditCardBanner } from "@src/hooks/useHasCreditCardBanner";
 import useCookieTheme from "@src/hooks/useTheme";
 import walletStore from "@src/store/walletStore";
 import { UrlService } from "@src/utils/urlUtils";
@@ -17,22 +17,19 @@ import { WalletStatus } from "./WalletStatus";
 
 export const Nav = ({
   isMobileOpen,
-  handleDrawerToggle
+  handleDrawerToggle,
+  className
 }: React.PropsWithChildren<{
   isMobileOpen: boolean;
   handleDrawerToggle: () => void;
+  className?: ClassValue;
 }>) => {
   const theme = useCookieTheme();
   const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
   const { user } = useCustomUser();
-  const hasCreditCardBanner = useHasCreditCardBanner();
 
   return (
-    <header
-      className={cn("fixed top-0 z-50 w-full border-b border-border bg-popover dark:bg-background", {
-        "top-[40px]": hasCreditCardBanner
-      })}
-    >
+    <header className={cn("fixed top-0 z-50 w-full border-b border-border bg-popover dark:bg-background", className)}>
       <div className="flex h-14 items-center justify-between pl-4 pr-4">
         {!!theme && (
           <Link className="flex items-center" href="/">

apps/deploy-web/src/components/layout/Sidebar.tsx

@@ -5,6 +5,7 @@ import { cn } from "@akashnetwork/ui/utils";
 import Drawer from "@mui/material/Drawer";
 import { useTheme as useMuiTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import type { ClassValue } from "clsx";
 import { Discord, Github, Menu, MenuScale, Rocket, X as TwitterX, Youtube } from "iconoir-react";
 import { Cloud, HelpCircle, Home, MultiplePages, OpenInWindow, Server, Settings, Tools } from "iconoir-react";
 import { useAtom } from "jotai";
@@ -13,7 +14,6 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { useWallet } from "@src/context/WalletProvider";
-import { useHasCreditCardBanner } from "@src/hooks/useHasCreditCardBanner";
 import sdlStore from "@src/store/sdlStore";
 import { ISidebarGroupMenu } from "@src/types";
 import { UrlService } from "@src/utils/urlUtils";
@@ -30,19 +30,19 @@ type Props = {
   handleDrawerToggle: () => void;
   onOpenMenuClick: () => void;
   isNavOpen: boolean;
+  mdDrawerClassName?: ClassValue;
 };
 
 const DRAWER_WIDTH = 240;
 const CLOSED_DRAWER_WIDTH = 57;
 
-export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDrawerToggle, isNavOpen, onOpenMenuClick }) => {
+export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDrawerToggle, isNavOpen, onOpenMenuClick, mdDrawerClassName }) => {
   const [isHovering, setIsHovering] = useState(false);
   const _isNavOpen = isNavOpen || isHovering;
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
   const muiTheme = useMuiTheme();
   const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
   const wallet = useWallet();
-  const hasCreditCardBanner = useHasCreditCardBanner();
 
   const mainRoutes = useMemo(() => {
     const routes = [
@@ -303,11 +303,14 @@ export const Sidebar: React.FunctionComponent<Props> = ({ isMobileOpen, handleDr
         onMouseEnter={onDrawerHover}
         onMouseLeave={() => setIsHovering(false)}
         PaperProps={{
-          className: cn("border-none ease z-[1000] bg-header/95 transition-[width] duration-300 box-border overflow-hidden mt-[57px]", {
-            ["md:w-[240px]"]: _isNavOpen,
-            ["md:w-[57px]"]: !_isNavOpen,
-            ["h-[calc(100%-40px)] mt-[97px]"]: hasCreditCardBanner
-          })
+          className: cn(
+            "border-none ease z-[1000] bg-header/95 transition-[width] duration-300 box-border overflow-hidden mt-[57px]",
+            {
+              ["md:w-[240px]"]: _isNavOpen,
+              ["md:w-[57px]"]: !_isNavOpen
+            },
+            mdDrawerClassName
+          )
         }}
         open
       >

apps/deploy-web/src/hooks/useHasCreditCardBanner.ts

@@ -1,6 +1,7 @@
+import { useEffect, useMemo, useState } from "react";
+
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
-import { useEffect, useMemo, useState } from "react";
 import { useUser } from "./useUser";
 
 const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
@@ -10,7 +11,10 @@ export function useHasCreditCardBanner() {
   const [isBannerVisible, setIsBannerVisible] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const { hasManagedWallet, isWalletLoading } = useWallet();
-  const shouldShowBanner = useMemo(() => isInitialized && withBilling && !hasManagedWallet && !isWalletLoading, [isInitialized, hasManagedWallet, isWalletLoading]);
+  const shouldShowBanner = useMemo(
+    () => isInitialized && withBilling && !hasManagedWallet && !isWalletLoading,
+    [isInitialized, hasManagedWallet, isWalletLoading]
+  );
 
   useEffect(() => {
     if (user?.id) {