feat: Comrads Worker

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

apps/commune-governance/src/app/layout.tsx

@@ -9,7 +9,6 @@ import { cairo } from "@commune-ts/ui/fonts";
 import { Footer } from "@commune-ts/ui/footer";
 import { Header } from "@commune-ts/ui/header";
 
-import { applicationsList } from "../utils/applications-list";
 import { FooterDivider } from "./components/footer-divider";
 
 // TODO this could come from the ui lib since the only thing that changes between apps is the title
@@ -41,7 +40,7 @@ export default function RootLayout({
           />
           {children}
           <FooterDivider />
-          <Footer applicationsList={applicationsList} />
+          <Footer />
         </Providers>
       </body>
     </html>

apps/commune-page/src/app/page.tsx

@@ -4,7 +4,6 @@ import { Suspense } from "react";
 import { Footer } from "@commune-ts/ui/footer";
 import { Loading } from "@commune-ts/ui/loading";
 
-import { applicationsList } from "../utils/applications-list";
 import { sections } from "../utils/mocks/sections-mock";
 import { FrequentQuestions } from "./components/sections/frequent-questions";
 import { GenericSection } from "./components/sections/generic-section";
@@ -37,7 +36,7 @@ export default function Page(): JSX.Element {
         );
       })}
       <FrequentQuestions />
-      <Footer applicationsList={applicationsList} />
+      <Footer />
     </Suspense>
   );
 }

apps/commune-validator/package.json

@@ -11,34 +11,35 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@commune-ts/api": "workspace:*",
+    "@commune-ts/providers": "workspace:*",
+    "@commune-ts/ui": "workspace:*",
     "@heroicons/react": "^2.1.3",
-    "superjson": "2.2.1",
-    "zod": "^3.23.8",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.45.0",
     "@trpc/client": "11.0.0-rc.364",
     "@trpc/react-query": "11.0.0-rc.364",
     "@trpc/server": "11.0.0-rc.364",
-    "@commune-ts/ui": "workspace:*",
-    "@commune-ts/api": "workspace:*",
-    "@commune-ts/providers": "workspace:*"
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "superjson": "2.2.1",
+    "zod": "^3.23.8",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "jiti": "^1.21.0",
+    "@commune-ts/eslint-config": "workspace:*",
+    "@commune-ts/tailwind-config": "workspace:*",
+    "@commune-ts/tsconfig": "workspace:*",
     "@next/eslint-plugin-next": "^14.2.3",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.18",
-    "@commune-ts/eslint-config": "workspace:*",
+    "jiti": "^1.21.0",
     "postcss": "^8.4.38",
-    "@commune-ts/tailwind-config": "workspace:*",
     "tailwindcss": "^3.4.3",
-    "@commune-ts/tsconfig": "workspace:*",
     "typescript": "^5.4.5"
   }
 }

apps/commune-validator/src/app/components/copy-square-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Square2StackIcon } from "@heroicons/react/24/outline";
+
+import { toast } from "@commune-ts/providers/use-toast";
+import { copyToClipboard } from "@commune-ts/providers/utils";
+
+interface CopySquareButtonProps {
+  address: string;
+}
+
+export function CopySquareButton(props: CopySquareButtonProps) {
+  function handleCopy() {
+    copyToClipboard(props.address);
+    toast.success("Copied to clipboard");
+  }
+  return (
+    <button
+      className="border border-white/20 bg-[#898989]/5 p-2 backdrop-blur-md transition duration-200 hover:border-green-500 hover:bg-green-500/10"
+      onClick={handleCopy}
+    >
+      <Square2StackIcon className="h-6 w-6 text-gray-400 transition duration-200 hover:text-green-500" />
+    </button>
+  );
+}

apps/commune-validator/src/app/components/delegate-module-weight.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ChartPieIcon } from "@heroicons/react/24/outline";
+
+import { useDelegateStore } from "~/stores/delegateStore";
+
+interface DelegateModuleWeightProps {
+  id: number;
+  title: string;
+  moduleKey: string;
+}
+
+export function DelegateModuleWeight(props: DelegateModuleWeightProps) {
+  const { delegatedModules, addModule, removeModule } = useDelegateStore();
+  const isModuleDelegated = delegatedModules.some((m) => m.id === props.id);
+
+  const handleDelegateClick = () => {
+    if (isModuleDelegated) {
+      removeModule(props.id);
+    } else {
+      addModule({ id: props.id, address: props.moduleKey, title: props.title });
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDelegateClick}
+      className={`flex w-fit items-center gap-2 border border-white/20 bg-[#898989]/5 p-2 text-white backdrop-blur-md transition duration-200 ${
+        isModuleDelegated
+          ? "border-red-500 bg-red-500/10 hover:bg-red-500/20"
+          : "hover:border-green-500 hover:bg-green-500/10"
+      }`}
+    >
+      <ChartPieIcon
+        className={`h-6 w-6 ${isModuleDelegated ? "text-red-500" : "text-green-500"}`}
+      />
+      {isModuleDelegated ? "Remove" : "Delegate"}
+    </button>
+  );
+}

apps/commune-validator/src/app/components/delegated-modules-list.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { useCommune } from "@commune-ts/providers/use-commune";
+
+import { useDelegateStore } from "~/stores/delegateStore";
+import { api } from "~/trpc/react";
+
+export function DelegatedModulesList() {
+  const {
+    delegatedModules,
+    updatePercentage,
+    removeModule,
+    getTotalPercentage,
+  } = useDelegateStore();
+  const totalPercentage = getTotalPercentage();
+  const { selectedAccount } = useCommune();
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handlePercentageChange = (id: number, percentage: number) => {
+    if (percentage >= 0 && percentage <= 100) {
+      updatePercentage(id, percentage);
+    }
+  };
+
+  const createUserModuleData = api.module.createUserModuleData.useMutation({
+    onSuccess: () => {
+      router.refresh();
+      setIsSubmitting(false);
+    },
+    onError: (error) => {
+      console.error("Error submitting data:", error);
+      setIsSubmitting(false);
+    },
+  });
+
+  const handleSubmit = async () => {
+    if (!selectedAccount?.address || totalPercentage !== 100) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      for (const delegatedModule of delegatedModules) {
+        await createUserModuleData.mutateAsync({
+          userKey: selectedAccount.address,
+          moduleKey: delegatedModule.address,
+          weight: delegatedModule.percentage,
+        });
+      }
+    } catch (error) {
+      console.error("Error submitting data:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="absolute bottom-0 right-0 mb-24 mr-4 mt-8 border border-white/20 bg-[#898989]/5 p-2 backdrop-blur-md">
+      <h2 className="mb-4 text-xl font-semibold text-white">
+        Delegated Modules
+      </h2>
+      {delegatedModules.map((module) => (
+        <div
+          key={module.id}
+          className="mb-2 flex items-center justify-between border border-white/20 bg-[#898989]/5 p-2"
+        >
+          <span className="text-white">{module.title}</span>
+          <div className="flex items-center">
+            <input
+              type="number"
+              value={module.percentage}
+              onChange={(e) =>
+                handlePercentageChange(module.id, Number(e.target.value))
+              }
+              className="mr-2 w-16 bg-[#898989]/10 p-1 text-white"
+              min="0"
+              max="100"
+            />
+            <span className="mr-2 text-white">%</span>
+            <button
+              onClick={() => removeModule(module.id)}
+              className="text-red-500 hover:text-red-400"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      ))}
+      <div className="mt-4 text-white">
+        Total Percentage: {totalPercentage}%
+        {totalPercentage !== 100 && (
+          <span className="ml-2 text-red-500">
+            {totalPercentage > 100 ? "Exceeds" : "Does not equal"} 100%
+          </span>
+        )}
+      </div>
+      <button
+        onClick={handleSubmit}
+        className="mt-4 bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20 disabled:opacity-50"
+        disabled={
+          isSubmitting || totalPercentage !== 100 || !selectedAccount?.address
+        }
+      >
+        {isSubmitting ? "Submitting..." : "Submit"}
+      </button>
+    </div>
+  );
+}