Refactor: Update component imports and replace SubnetAccordion with S…

…ubnetCard
renlabs-dev · Oct 8, 2024 · dc32a54 · dc32a54
1 parent f147163
commit dc32a54
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 103 deletions.
diff --git a/apps/commune-validator/src/app/(expanded-pages)/module/[...slug]/page.tsx b/apps/commune-validator/src/app/(expanded-pages)/module/[...slug]/page.tsx
@@ -51,12 +51,11 @@ export default async function ModulePage({ params }: Params) {
     mdl.metadataUri ?? "",
   )) as CustomMetadata;
 
-  const title = metadata.Ok?.title ?? "No Metadata";
   // limited to 140 characters
   const description = metadata.Ok?.body ?? "This module has no custom metadata";
 
   return (
-    <div className="container mx-auto p-4 pb-28 text-white">
+    <div className="container mx-auto min-h-[calc(100vh-169px)] p-4 pb-28 text-white">
       <div className="my-16 flex w-full items-center justify-between">
         <Link
           href="/"
@@ -66,7 +65,7 @@ export default async function ModulePage({ params }: Params) {
           Go back to modules list
         </Link>
         <h1 className="flex-grow animate-fade-right text-center text-3xl font-semibold">
-          {title}
+          {mdl.name}
         </h1>
         <div className="">
           <ReportModule moduleId={mdl.id} />
@@ -101,17 +100,6 @@ function ModuleDataGrid({ module }: { module: Module }) {
           label: "Registration Block",
           value: module.registrationBlock ?? "N/A",
         },
-        {
-          label: "Registered At",
-          value: new Date(module.createdAt).toLocaleString(),
-        },
-      ],
-    },
-    {
-      title: "URIs",
-      fields: [
-        { label: "Address URI", value: module.addressUri ?? "N/A" },
-        { label: "Metadata URI", value: module.metadataUri ?? "N/A" },
       ],
     },
     {

diff --git a/apps/commune-validator/src/app/(expanded-pages)/subnet/[...slug]/page.tsx b/apps/commune-validator/src/app/(expanded-pages)/subnet/[...slug]/page.tsx
@@ -1,12 +1,11 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ArrowLeftIcon } from "@heroicons/react/16/solid";
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
 
-import { MarkdownView } from "@commune-ts/ui/markdown-view";
-import { fetchCustomMetadata, smallAddress } from "@commune-ts/utils";
+import { formatToken, smallAddress } from "@commune-ts/utils";
 
 import type { Subnet } from "~/utils/types";
-// import { ReportSubnet } from "~/app/components/report-Subnet";
 import { api } from "~/trpc/server";
 
 interface Params {
@@ -15,13 +14,6 @@ interface Params {
   };
 }
 
-interface CustomMetadata {
-  Ok?: {
-    title?: string;
-    body?: string;
-  };
-}
-
 export default async function SubnetPage({ params }: Params) {
   const { slug } = params;
 
@@ -41,41 +33,36 @@ export default async function SubnetPage({ params }: Params) {
     notFound();
   }
 
-  const metadata = (await fetchCustomMetadata(
-    "proposal",
-    sbnt.id,
-    sbnt.subnetMetadata ?? "",
-  )) as CustomMetadata;
-
-  const title = metadata.Ok?.title ?? "No Metadata";
-
-  const description = metadata.Ok?.body ?? "This Subnet has no custom metadata";
-
   return (
-    <div className="container mx-auto p-4 pb-28 text-white">
-      <div className="my-16 flex w-full items-center justify-between">
-        <Link
-          href="/"
-          className="absolute z-10 flex animate-fade-left items-center gap-1 border border-white/20 bg-[#898989]/5 p-2 pr-3 text-white backdrop-blur-md transition duration-200 hover:border-green-500 hover:bg-green-500/10"
-        >
-          <ArrowLeftIcon className="h-5 w-5 text-green-500" />
-          Go back to Subnets list
-        </Link>
-        <h1 className="flex-grow animate-fade-right text-center text-3xl font-semibold">
-          {title}
-        </h1>
-      </div>
-      <div className="flex flex-col-reverse gap-6 md:flex-row">
-        <div className="animate-fade-down animate-delay-300 md:w-[60%] xl:w-[70%]">
-          <div className="border border-white/20 bg-[#898989]/5 p-8 backdrop-blur-md">
-            <h2 className="mb-4 text-xl font-semibold">Description</h2>
-            <MarkdownView source={description} />
-          </div>
-        </div>
-        <div className="flex animate-fade-down flex-col gap-6 animate-delay-500 md:w-[40%] xl:w-[30%]">
-          <SubnetDataGrid subnet={sbnt} />
+    <div className="container mx-auto min-h-[calc(100vh-169px)] w-full p-4 pb-28 text-white">
+      <div className="flex w-full flex-col items-center justify-between gap-6 md:my-16 md:flex-row md:gap-0">
+        <div className="z-10 flex gap-3 md:absolute">
+          <Link
+            href="/"
+            className="flex animate-fade-left items-center gap-1 border border-white/20 bg-[#898989]/5 p-2 pr-3 text-white backdrop-blur-md transition duration-200 hover:border-cyan-500 hover:bg-cyan-500/10"
+          >
+            <ArrowLeftIcon className="h-5 w-5 text-cyan-500" />
+            Go back to Subnets list
+          </Link>
+          {sbnt.subnetMetadata && (
+            <Link
+              target="_blank"
+              href={sbnt.subnetMetadata}
+              className="flex animate-fade-left items-center gap-1 border border-white/20 bg-[#898989]/5 p-2 pr-3 text-white backdrop-blur-md transition duration-200 hover:border-cyan-500 hover:bg-cyan-500/10"
+            >
+              <GlobeAltIcon className="h-5 w-5 text-cyan-500" />
+              View More
+            </Link>
+          )}
         </div>
+        <h1 className="flex-grow animate-fade-right text-center font-semibold text-gray-300">
+          <span className="text-3xl font-semibold text-cyan-500">
+            {sbnt.name}
+          </span>{" "}
+          / NETUID: {sbnt.netuid}
+        </h1>
       </div>
+      <SubnetDataGrid subnet={sbnt} />
     </div>
   );
 }
@@ -88,7 +75,6 @@ function SubnetDataGrid({ subnet }: { subnet: Subnet }) {
         { label: "Subnet ID", value: subnet.id },
         { label: "Netuid", value: subnet.netuid },
         { label: "Name", value: subnet.name },
-        { label: "At Block", value: subnet.atBlock },
         { label: "Tempo", value: subnet.tempo },
         { label: "Founder", value: smallAddress(subnet.founder) },
       ],
@@ -112,15 +98,21 @@ function SubnetDataGrid({ subnet }: { subnet: Subnet }) {
       fields: [
         { label: "Founder Share", value: subnet.founderShare },
         { label: "Incentive Ratio", value: subnet.incentiveRatio },
-        { label: "Subnet Emission", value: subnet.subnetEmission.toString() },
+        {
+          label: "Subnet Emission",
+          value: `${formatToken(BigInt(subnet.subnetEmission))} COMAI`,
+        },
         { label: "Bonds MA", value: subnet.bondsMa },
         { label: "Immunity Period", value: subnet.immunityPeriod },
       ],
     },
     {
       title: "Governance Configuration",
       fields: [
-        { label: "Proposal Cost", value: subnet.proposalCost.toString() },
+        {
+          label: "Proposal Cost",
+          value: `${formatToken(BigInt(subnet.proposalCost))} COMAI`,
+        },
         { label: "Proposal Expiration", value: subnet.proposalExpiration },
         { label: "Vote Mode", value: subnet.voteMode },
         {
@@ -129,7 +121,7 @@ function SubnetDataGrid({ subnet }: { subnet: Subnet }) {
         },
         {
           label: "Max Proposal Reward Treasury Allocation",
-          value: subnet.maxProposalRewardTreasuryAllocation.toString(),
+          value: `${formatToken(BigInt(subnet.maxProposalRewardTreasuryAllocation))} COMAI`,
         },
         {
           label: "Proposal Reward Interval",
@@ -140,9 +132,18 @@ function SubnetDataGrid({ subnet }: { subnet: Subnet }) {
     {
       title: "Burn Configuration",
       fields: [
-        { label: "Min Burn", value: subnet.minBurn.toString() },
-        { label: "Max Burn", value: subnet.maxBurn.toString() },
-        { label: "Adjustment Alpha", value: subnet.adjustmentAlpha },
+        {
+          label: "Min Burn",
+          value: `${formatToken(BigInt(subnet.minBurn))} COMAI`,
+        },
+        {
+          label: "Max Burn",
+          value: `${formatToken(BigInt(subnet.maxBurn))} COMAI`,
+        },
+        {
+          label: "Adjustment Alpha",
+          value: subnet.adjustmentAlpha,
+        },
         {
           label: "Target Registrations Interval",
           value: subnet.targetRegistrationsInterval,
@@ -160,27 +161,18 @@ function SubnetDataGrid({ subnet }: { subnet: Subnet }) {
     {
       title: "Additional Information",
       fields: [
+        { label: "At Block", value: subnet.atBlock },
         {
           label: "Min Validator Stake",
-          value: subnet.minValidatorStake?.toString(),
+          value: `${formatToken(subnet.minValidatorStake ?? 0)} COMAI`,
         },
         { label: "Max Allowed Validators", value: subnet.maxAllowedValidators },
-        {
-          label: "Created At",
-          value: new Date(subnet.createdAt).toLocaleString(),
-        },
-        {
-          label: "Deleted At",
-          value: subnet.deletedAt
-            ? new Date(subnet.deletedAt).toLocaleString()
-            : "N/A",
-        },
       ],
     },
   ];
 
   return (
-    <div className="grid gap-6">
+    <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
       {dataGroups.map((group, index) => (
         <div
           key={index}

diff --git a/apps/commune-validator/src/app/(pages)/subnets/page.tsx b/apps/commune-validator/src/app/(pages)/subnets/page.tsx
@@ -1,4 +1,4 @@
-import SubnetAccordion from "~/app/components/subnet-accordion";
+import SubnetCard from "~/app/components/subnet-card";
 import { api } from "~/trpc/server";
 
 export default async function SubnetsPage() {
@@ -7,7 +7,7 @@ export default async function SubnetsPage() {
   return (
     <div className="mb-4 flex w-full flex-col gap-4">
       {data.map((subnet) => (
-        <SubnetAccordion
+        <SubnetCard
           key={subnet.id}
           founderAddress={subnet.founder}
           id={subnet.id}

diff --git a/apps/commune-validator/src/app/(pages)/weighted-modules/page.tsx b/apps/commune-validator/src/app/(pages)/weighted-modules/page.tsx
@@ -21,7 +21,7 @@ export default function Page() {
   );
 
   return (
-    <>
+    <div className="min-h-[calc(100vh-169px)] w-full">
       {weightedModules.length ? (
         <div className="mb-16 grid h-full w-full animate-fade-up grid-cols-1 gap-4 backdrop-blur-md animate-delay-700 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {weightedModules.map((module) => (
@@ -39,6 +39,6 @@ export default function Page() {
           No weighted modules found.
         </span>
       )}
-    </>
+    </div>
   );
 }
diff --git a/apps/commune-validator/src/app/(pages)/weighted-subnets/page.tsx b/apps/commune-validator/src/app/(pages)/weighted-subnets/page.tsx
@@ -2,7 +2,7 @@
 
 import { useCommune } from "@commune-ts/providers/use-commune";
 
-import SubnetAccordion from "~/app/components/subnet-accordion";
+import SubnetCard from "~/app/components/subnet-card";
 import { useDelegateSubnetStore } from "~/stores/delegateSubnetStore";
 
 export default function Page() {
@@ -21,11 +21,11 @@ export default function Page() {
   );
 
   return (
-    <>
+    <div className="min-h-[calc(100vh-169px)] w-full">
       {weightedSubnets.length ? (
         <div className="mb-16 flex h-full w-full grid-cols-1 flex-col gap-4 backdrop-blur-md animate-delay-700">
           {weightedSubnets.map((subnet) => (
-            <SubnetAccordion
+            <SubnetCard
               id={subnet.id}
               key={subnet.id}
               name={subnet.name}
@@ -39,6 +39,6 @@ export default function Page() {
           No weighted subnets found.
         </span>
       )}
-    </>
+    </div>
   );
 }
diff --git a/...r/src/app/components/subnet-accordion.tsx → ...idator/src/app/components/subnet-card.tsx b/...r/src/app/components/subnet-accordion.tsx → ...idator/src/app/components/subnet-card.tsx
@@ -1,30 +1,27 @@
 "use client";
 
 import { useState } from "react";
-import { ChevronUpIcon } from "@heroicons/react/16/solid";
+import Link from "next/link";
+import { ArrowRightIcon, ChevronUpIcon } from "@heroicons/react/16/solid";
 
 import { smallAddress } from "@commune-ts/utils";
 
 import { useDelegateSubnetStore } from "~/stores/delegateSubnetStore";
 import { DelegateSubnetWeight } from "./delegate-subnet-weight";
 
-interface SubnetAccordionWeightProps {
+interface SubnetCardWeightProps {
   id: number;
   name: string;
   founderAddress: string;
   percentage?: number;
 }
 
-export default function SubnetAccordion({
+export default function SubnetCard({
   id,
   name,
   founderAddress,
   percentage,
-}: SubnetAccordionWeightProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleAccordion = () => setIsOpen(!isOpen);
-
+}: SubnetCardWeightProps) {
   const { delegatedSubnets } = useDelegateSubnetStore();
   const isSubnetDelegated = delegatedSubnets.some((s) => s.id === id);
 
@@ -45,19 +42,12 @@ export default function SubnetAccordion({
             name={name}
             founderAddress={founderAddress}
           />
-          <button
-            onClick={toggleAccordion}
-            className="flex w-fit items-center text-nowrap border border-cyan-500 bg-cyan-600/15 py-1.5 pl-3 pr-1 text-sm font-semibold text-cyan-500 transition duration-200 hover:border-cyan-400 hover:bg-cyan-500/15 active:bg-cyan-500/50"
+          <Link
+            className="flex w-full items-center justify-between gap-2 border border-white/20 bg-[#898989]/5 p-2 pl-3 text-sm text-white backdrop-blur-md transition duration-200 hover:border-cyan-500 hover:bg-cyan-500/10 hover:text-cyan-500"
+            href={`subnet/${id}`}
           >
-            <span>{isOpen ? "Collapse" : "Expand"}</span>
-            <span>
-              <ChevronUpIcon
-                className={`h-5 w-5 transform transition-transform ${
-                  isOpen ? "rotate-180" : ""
-                }`}
-              />
-            </span>
-          </button>
+            View More <ArrowRightIcon className="h-4 w-4" />
+          </Link>
         </div>
       </div>
     </div>