Merge branch 'master' into fix/mobile-nav-explorer-sync

Author: Andyvargtz

components/toolbox/academy/wrapper/ToolboxMdxWrapper.tsx

@@ -4,9 +4,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "./ErrorFallback";
 import { SessionProvider } from "next-auth/react";
 
-import { AcademySidebar } from "@/components/toolbox/components/console-header/academy-sidebar";
-import { AcademyHeader } from "@/components/toolbox/components/console-header/academy-header";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { EmbeddedConsoleHeader } from "@/components/toolbox/components/console-header/embedded-console-header";
 import { WalletProvider } from "@/components/toolbox/providers/WalletProvider";
 
 export default function ToolboxMdxWrapper({ children }: { children: React.ReactNode, walletMode?: "l1" | "c-chain", enforceChainId?: number }) {
@@ -22,25 +20,14 @@ export default function ToolboxMdxWrapper({ children }: { children: React.ReactN
     >
         <SessionProvider>
             <WalletProvider>
-                <div className="h-screen overflow-hidden m-2 rounded-xl border border-gray-200 dark:border-gray-700 relative">
-                    <SidebarProvider
-                        defaultOpen={false}
-                        className="h-full overflow-hidden relative"
-                        style={
-                            {
-                                "--sidebar-width": "100%",
-                                "--header-height": "calc(var(--spacing) * 12)",
-                            } as React.CSSProperties
-                        }
-                    >
-                        <AcademySidebar />
-                        <SidebarInset className="h-full bg-white dark:bg-gray-800">
-                            <AcademyHeader />
-                            <div className="flex flex-1 flex-col gap-4 p-6 overflow-y-auto h-[calc(100vh-var(--header-height)-1rem)]">
-                                {children}
-                            </div>
-                        </SidebarInset>
-                    </SidebarProvider>
+                <div
+                    className="h-screen overflow-hidden m-2 rounded-xl border border-gray-200 dark:border-gray-700 flex flex-col"
+                    style={{ "--header-height": "calc(var(--spacing) * 12)" } as React.CSSProperties}
+                >
+                    <EmbeddedConsoleHeader />
+                    <div className="flex flex-1 flex-col gap-4 p-6 overflow-y-auto bg-white dark:bg-gray-800">
+                        {children}
+                    </div>
                 </div>
             </WalletProvider>
         </SessionProvider>

components/toolbox/components/console-header/embedded-console-header.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { TestnetMainnetSwitch } from "./testnet-mainnet-switch";
+import EvmNetworkWallet from "./evm-network-wallet";
+import { WalletPChain } from "./pchain-wallet";
+
+export function EmbeddedConsoleHeader() {
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear rounded-t-xl">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <span className="text-sm text-muted-foreground">Builder Console</span>
+        <div className="ml-auto flex items-center gap-2">
+          <TestnetMainnetSwitch />
+          <EvmNetworkWallet />
+          <WalletPChain />
+        </div>
+      </div>
+    </header>
+  );
+}