feat: polish module creation form and community validator graphs

Co-authored-by: PsicoThePato <[email protected]>
Co-authored-by: Kelvin Steiner <[email protected]>

apps/commune-governance/src/app/components/proposal/register-module.tsx

@@ -4,12 +4,18 @@ import MarkdownPreview from "@uiw/react-markdown-preview";
 import { z } from "zod";
 
 import type { TransactionResult } from "@commune-ts/types";
+import { useModuleBurn, useSubnetList } from "@commune-ts/providers/hooks";
 import { useCommune } from "@commune-ts/providers/use-commune";
 import { toast } from "@commune-ts/providers/use-toast";
 import {
   Button,
   Input,
   Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Separator,
   Tabs,
   TabsContent,
@@ -18,6 +24,7 @@ import {
   Textarea,
   TransactionStatus,
 } from "@commune-ts/ui";
+import { formatToken } from "@commune-ts/utils";
 
 import { cairo } from "~/utils/fonts";
 
@@ -28,7 +35,11 @@ const moduleSchema = z.object({
 
 export function RegisterModule(): JSX.Element {
   const router = useRouter();
-  const { isConnected, registerModule, balance } = useCommune();
+  const { isConnected, registerModule, balance, api } = useCommune();
+  const { data: subnetList, isLoading: isSubnetListLoading } =
+    useSubnetList(api);
+
+  const { data: moduleBurn } = useModuleBurn(api);
 
   const [subnetName, setSubnetName] = useState("");
   const [address, setAddress] = useState("");
@@ -53,6 +64,17 @@ export function RegisterModule(): JSX.Element {
     setTransactionStatus(callbackReturn);
   }
 
+  function getModuleBurn(subnetId: string) {
+    if (!moduleBurn) {
+      return 0;
+    }
+    if (Number(subnetId) === 0) {
+      return 0;
+    }
+
+    return formatToken(Number(moduleBurn[subnetId]));
+  }
+
   async function uploadFile(fileToUpload: File): Promise<void> {
     try {
       setUploading(true);
@@ -139,10 +161,7 @@ export function RegisterModule(): JSX.Element {
   }
 
   return (
-    <form
-      onSubmit={HandleSubmit}
-      className="flex flex-col gap-4 text-green-500"
-    >
+    <form onSubmit={HandleSubmit} className="flex flex-col gap-4">
       <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList>
           <TabsTrigger value="edit">Edit Content</TabsTrigger>
@@ -161,12 +180,28 @@ export function RegisterModule(): JSX.Element {
             type="text"
             value={moduleId}
           />
-          <Input
-            onChange={(e) => setSubnetName(e.target.value)}
-            placeholder="Subnet Name (eg. General)"
-            type="text"
-            value={subnetName}
-          />
+          <Select onValueChange={setSubnetName} value={subnetName}>
+            <SelectTrigger className="text-white">
+              <SelectValue placeholder="Subnet Name (eg. General)" />
+            </SelectTrigger>
+            <SelectContent>
+              {isSubnetListLoading ? (
+                <SelectItem value="loading" disabled>
+                  Loading...
+                </SelectItem>
+              ) : subnetList ? (
+                Object.entries(subnetList).map(([key, value]) => (
+                  <SelectItem key={key} value={value}>
+                    {key} | {value} | {getModuleBurn(key)} COMAI (Current Burn)
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="error" disabled>
+                  Error loading subnets
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
           <Input
             onChange={(e) => setAddress(e.target.value)}
             placeholder="Address (eg. 0.0.0.0:8000)"
@@ -209,9 +244,11 @@ export function RegisterModule(): JSX.Element {
         type="submit"
         variant="default-green"
         disabled={!isConnected}
+        className="text-green-500"
       >
         {uploading ? "Uploading..." : "Submit Module"}
       </Button>
+
       {transactionStatus.status && (
         <TransactionStatus
           status={transactionStatus.status}

apps/commune-validator/src/app/components/charts/module-bar-chart.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import type { ChartConfig } from "node_modules/@commune-ts/ui/src/components/chart";
-import { ArrowTrendingUpIcon } from "@heroicons/react/24/outline";
 import {
   Bar,
   BarChart,
@@ -15,7 +14,6 @@ import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
   ChartContainer,
@@ -47,6 +45,11 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 export function ModuleBarChart({ chartData }: ModuleBarChartProps) {
+  const maxPercWeight = Math.max(
+    ...chartData.map((module) => module.percWeight),
+  );
+  const xAxisDomain = [0, maxPercWeight * 1.2];
+
   return (
     <Card>
       <CardHeader>
@@ -76,7 +79,12 @@ export function ModuleBarChart({ chartData }: ModuleBarChartProps) {
               tickFormatter={(value) => value.slice(0, 3)}
               hide
             />
-            <XAxis dataKey="percWeight" type="number" hide />
+            <XAxis
+              dataKey="percWeight"
+              type="number"
+              domain={xAxisDomain}
+              hide
+            />
             <ChartTooltip
               cursor={false}
               content={<ChartTooltipContent indicator="line" />}
@@ -105,15 +113,6 @@ export function ModuleBarChart({ chartData }: ModuleBarChartProps) {
           </BarChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 font-medium leading-none">
-          Trending up by 5.2% this month{" "}
-          <ArrowTrendingUpIcon className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
     </Card>
   );
 }

apps/commune-validator/src/app/components/charts/subnet-pie-chart.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import * as React from "react";
-import { ArrowTrendingUpIcon } from "@heroicons/react/16/solid";
-import { Cell, Label, Pie, PieChart } from "recharts";
+import { Cell, Pie, PieChart } from "recharts";
 
 import type { ChartConfig } from "@commune-ts/ui";
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
   ChartContainer,
@@ -31,6 +29,7 @@ interface SubnetData {
   subnetName: string;
   stakeWeight: number;
   percWeight: number;
+  percFormat: string;
 }
 
 interface SubnetPieChartProps {
@@ -48,8 +47,6 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
-  const totalStakeWeight = 100;
-
   const getFillColor = (index: number) => {
     return chartColors[index % chartColors.length];
   };
@@ -65,7 +62,7 @@ export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="mx-auto aspect-square max-h-[300px]"
+          className="mx-auto aspect-square max-h-[350px]"
         >
           <PieChart>
             <ChartTooltip
@@ -82,48 +79,10 @@ export function SubnetPieChart({ chartData }: SubnetPieChartProps) {
               {chartData.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={getFillColor(index)} />
               ))}
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                        >
-                          {totalStakeWeight.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy ?? 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          stakeWeight
-                        </tspan>
-                      </text>
-                    );
-                  }
-                }}
-              />
             </Pie>
           </PieChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium leading-none">
-          Other Subnets: 5.2%
-          <ArrowTrendingUpIcon className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total stake allocation for the last block
-        </div>
-      </CardFooter>
     </Card>
   );
 }

apps/commune-validator/src/app/components/delegated-scroll.tsx

@@ -11,7 +11,7 @@ interface DelegatedScrollProps {
 
 export function DelegatedScroll({ data }: DelegatedScrollProps) {
   return (
-    <ScrollArea className="h-72 w-full border border-white/20">
+    <ScrollArea className="h-28 w-full border border-white/20">
       <div className="p-4">
         {data.map((prop, index) => (
           <React.Fragment key={prop.name}>