Add Metadata to Tools and have a unified container for WalletRequirements and the Title

app/academy/[...slug]/page.tsx

@@ -38,7 +38,7 @@ import posthog from 'posthog-js';
 
 import ToolboxMdxWrapper from "@/components/toolbox/academy/wrapper/ToolboxMdxWrapper"
 import CrossChainTransfer from "@/components/toolbox/console/primary-network/CrossChainTransfer"
-import AvalancheGoDocker from '@/components/toolbox/console/layer-1/AvalancheGoDockerL1';
+import AvalancheGoDocker from '@/components/toolbox/console/layer-1/L1NodeSetupDocker';
 import CreateChain from "@/components/toolbox/console/layer-1/create/CreateChain"
 import ConvertSubnetToL1 from "@/components/toolbox/console/layer-1/create/ConvertSubnetToL1"
 import GenesisBuilder from '@/components/toolbox/console/layer-1/create/GenesisBuilder';

app/console/layer-1/create/steps.ts

@@ -1,6 +1,6 @@
 import { type StepDefinition } from "@/components/console/step-flow";
 import CreateChain from "@/components/toolbox/console/layer-1/create/CreateChain";
-import AvalancheGoDockerL1 from "@/components/toolbox/console/layer-1/AvalancheGoDockerL1";
+import AvalancheGoDockerL1 from "@/components/toolbox/console/layer-1/L1NodeSetupDocker";
 import ConvertSubnetToL1 from "@/components/toolbox/console/layer-1/create/ConvertSubnetToL1";
 import ManagedTestnetNodes from "@/components/toolbox/console/testnet-infra/ManagedTestnetNodes";
 

app/console/layer-1/l1-node-setup/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import L1NodeSetup from "@/components/toolbox/console/layer-1/AvalancheGoDockerL1";
+import L1NodeSetupDocker from "@/components/toolbox/console/layer-1/L1NodeSetupDocker";
 
 export default function Page() {
   return (
-    <L1NodeSetup />
+    <L1NodeSetupDocker />
   );
 }

components/toolbox/components/ToolContainer.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { ConsoleToolMetadata } from "@/types/consoleTool"
+import type { ReactNode } from "react"
+import { CheckWalletRequirements } from "./CheckWalletRequirements"
+
+interface ToolContainerProps {
+  consoleToolMetadata: ConsoleToolMetadata
+  children: ReactNode
+}
+
+// simplified container does not use color themes currently
+
+export function ToolContainer({
+  consoleToolMetadata,
+  children,
+}: ToolContainerProps) {
+
+  return (
+    <CheckWalletRequirements configKey={consoleToolMetadata.walletRequirements}>
+      <div className="space-y-3 prose">
+        <h3 className="text-xl md:text-2xl font-semibold leading-tight text-foreground">{consoleToolMetadata.title}</h3>
+        {consoleToolMetadata.description && (
+          <div className="text-sm text-muted-foreground leading-relaxed">
+            {consoleToolMetadata.description}
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-8 text-foreground prose">
+        {children}
+      </div>
+    </CheckWalletRequirements>
+  )
+}
+

components/toolbox/console/layer-1/AvalancheGoDockerL1.tsx → components/toolbox/console/layer-1/L1NodeSetupDocker.tsx

@@ -3,7 +3,7 @@
 import { useWalletStore } from "@/components/toolbox/stores/walletStore";
 import { useState, useEffect } from "react";
 import { networkIDs } from "@avalabs/avalanchejs";
-import { Container } from "../../components/Container";
+import { ToolContainer } from "../../components/ToolContainer";
 import { getBlockchainInfo, getSubnetInfo } from "../../coreViem/utils/glacier";
 import InputSubnetId from "../../components/InputSubnetId";
 import BlockchainDetailsDisplay from "../../components/BlockchainDetailsDisplay";
@@ -19,8 +19,15 @@ import { AddToWalletStep } from "../../components/AddToWalletStep";
 import { ConfigureNodeType } from "../../components/ConfigureNodeType";
 import { generateDockerCommand } from "./create/config";
 import { SUBNET_EVM_VM_ID } from "@/constants/console";
+import { ConsoleToolMetadata, BaseConsoleToolProps, withConsoleToolMetadata } from "@/types/consoleTool";
 
-export default function AvalanchegoDocker() {
+const l1NodeSetupDockerMetadata: ConsoleToolMetadata = {
+    title: "L1 Node Setup with Docker",
+    description: "This will start a Docker container running an RPC or validator node that tracks your L1.",
+    walletRequirements: [],
+}
+
+function L1NodeSetupDockerBase({onSuccess}: BaseConsoleToolProps) {
     const [chainId, setChainId] = useState("");
     const [subnetId, setSubnetId] = useState("");
     const [subnet, setSubnet] = useState<any>(null);
@@ -151,11 +158,9 @@ export default function AvalanchegoDocker() {
     const isCustomVM = blockchainInfo && blockchainInfo.vmId !== SUBNET_EVM_VM_ID;
 
     return (
-        <>
-            <Container
-                title="L1 Node Setup with Docker"
-                description="This will start a Docker container running an RPC or validator node that tracks your L1."
-            >
+        <ToolContainer
+            consoleToolMetadata={l1NodeSetupDockerMetadata}
+        >
                 <Steps>
                     <Step>
                         <h3 className="text-xl font-bold mb-4">Set up Instance</h3>
@@ -382,14 +387,14 @@ export default function AvalanchegoDocker() {
 
                 </Steps>
 
-                {chainAddedToWallet && (
-                    <>
-                        <Success label="Node Setup Complete" value={chainAddedToWallet} />
-                        <Button onClick={handleReset} className="mt-4 w-full">Reset</Button>
-                    </>
-                )}
-
-            </Container >
-        </>
+            {chainAddedToWallet && (
+                <>
+                    <Success label="Node Setup Complete" value={chainAddedToWallet} />
+                    <Button onClick={handleReset} className="mt-4 w-full">Reset</Button>
+                </>
+            )}
+        </ToolContainer>
     );
 };
+
+export default withConsoleToolMetadata(L1NodeSetupDockerBase, l1NodeSetupDockerMetadata);

components/toolbox/console/layer-1/create/ConvertSubnetToL1.tsx

@@ -5,18 +5,24 @@ import { useWalletStore } from "@/components/toolbox/stores/walletStore";
 import { useState, useEffect } from "react";
 import { Button } from "@/components/toolbox/components/Button";
 import { type ConvertToL1Validator } from "@/components/toolbox/components/ValidatorListInput";
-import { Container } from "@/components/toolbox/components/Container";
+import { ToolContainer } from "@/components/toolbox/components/ToolContainer";
 import { ValidatorListInput } from "@/components/toolbox/components/ValidatorListInput";
 import InputChainId from "@/components/toolbox/components/InputChainId";
 import SelectSubnet, { SubnetSelection } from "@/components/toolbox/components/SelectSubnet";
 import { Callout } from "fumadocs-ui/components/callout";
 import { EVMAddressInput } from "@/components/toolbox/components/EVMAddressInput";
 import { getPChainBalance } from "@/components/toolbox/coreViem/methods/getPChainbalance";
-import { CheckWalletRequirements } from "@/components/toolbox/components/CheckWalletRequirements";
+import { ConsoleToolMetadata, BaseConsoleToolProps, withConsoleToolMetadata } from "@/types/consoleTool";
 import { WalletRequirementsConfigKey } from "@/components/toolbox/hooks/useWalletRequirements";
 import useConsoleNotifications from "@/hooks/useConsoleNotifications";
 
-export default function ConvertSubnetToL1() {
+const convertSubnetToL1Metadata: ConsoleToolMetadata = {
+    title: "Convert Subnet to L1",
+    description: "This will convert your Subnet to an L1.",
+    walletRequirements: [WalletRequirementsConfigKey.PChainBalance],
+}
+
+function ConvertSubnetToL1Base({onSuccess}: BaseConsoleToolProps) {
     const {
         subnetId: storeSubnetId,
         chainID: storeChainID,
@@ -80,19 +86,16 @@ export default function ConvertSubnetToL1() {
         try {
             const txID = await convertSubnetToL1Tx;
             setConvertToL1TxId(txID);
+            onSuccess?.();
         } finally {
             setIsConverting(false);
         }
     }
 
     return (
-        <CheckWalletRequirements configKey={[
-            WalletRequirementsConfigKey.PChainBalance
-        ]}>
-            <Container
-                title="Convert Subnet to L1"
-                description="This will convert your Subnet to an L1."
-            >
+        <ToolContainer
+            consoleToolMetadata={convertSubnetToL1Metadata}
+        >
                 <div className="space-y-4">
                     <SelectSubnet
                         value={selection.subnetId}
@@ -143,8 +146,8 @@ export default function ConvertSubnetToL1() {
                         {selection.subnet?.isL1 ? "Subnet Already Converted to L1" : "Convert to L1"}
                     </Button>
                 </div>
-
-            </Container>
-        </CheckWalletRequirements>
+        </ToolContainer>
     );
 };
+
+export default withConsoleToolMetadata(ConvertSubnetToL1Base, convertSubnetToL1Metadata);