Add Billing alerts on /connect layout in app router

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { isLoginRequired } from "@/constants/auth";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";

apps/dashboard/src/app/(dashboard)/dashboard/connect/layout.tsx

@@ -1,7 +1,13 @@
+import { BillingAlerts } from "../../../../components/settings/Account/Billing/alerts/Alert";
 import { ConnectSidebarLayout } from "./DashboardConnectLayout";
 
 export default function Layout(props: {
   children: React.ReactNode;
 }) {
-  return <ConnectSidebarLayout>{props.children}</ConnectSidebarLayout>;
+  return (
+    <ConnectSidebarLayout>
+      <BillingAlerts className="pb-6" />
+      {props.children}
+    </ConnectSidebarLayout>
+  );
 }

apps/dashboard/src/components/layout/app-shell/index.tsx

@@ -26,7 +26,7 @@ export const AppShell: ComponentWithChildren<AppShellProps> = ({
         className={cn("min-h-screen py-6 md:pt-10 md:pb-20", mainClassName)}
       >
         <Container maxW="container.page">
-          <BillingAlerts />
+          <BillingAlerts className="py-6" />
         </Container>
 
         {layout === "custom-contract" ? (

apps/dashboard/src/components/settings/Account/Billing/alerts/Alert.tsx

@@ -3,6 +3,7 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { cn } from "@/lib/utils";
 import {
   type Account,
   AccountStatus,
@@ -36,7 +37,9 @@ type AlertConditionType = {
     | "usage";
 };
 
-export const BillingAlerts = () => {
+export const BillingAlerts = (props: {
+  className?: string;
+}) => {
   const pathname = usePathname();
   const { isLoggedIn } = useLoggedInUser();
   const usageQuery = useAccountUsage();
@@ -64,13 +67,15 @@ export const BillingAlerts = () => {
     <BillingAlertsUI
       usageData={usageQuery.data}
       dashboardAccount={meQuery.data}
+      className={props.className}
     />
   );
 };
 
 export function BillingAlertsUI(props: {
   usageData: UsageBillableByService;
   dashboardAccount: Account;
+  className?: string;
 }) {
   const { usageData, dashboardAccount } = props;
   const trackEvent = useTrack();
@@ -295,7 +300,9 @@ export function BillingAlertsUI(props: {
     return null;
   }
 
-  return <div className="flex flex-col gap-4 py-6">{alerts}</div>;
+  return (
+    <div className={cn("flex flex-col gap-4", props.className)}>{alerts}</div>
+  );
 }
 
 type AddPaymentNotificationProps = {