chalabi/admin rework

components/admins/components/chainUpgrader.tsx

@@ -0,0 +1,76 @@
+import { UpgradeModal, CancelUpgradeModal } from '@/components/admins/modals';
+import { useCurrentPlan } from '@/hooks/useQueries';
+import { PlanSDKType } from '@liftedinit/manifestjs/dist/codegen/cosmos/upgrade/v1beta1/upgrade';
+import { useState } from 'react';
+
+export const ChainUpgrader = ({ admin, address }: { admin: string; address: string }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCancelOpen, setIsCancelOpen] = useState(false);
+  const { plan, isPlanLoading, refetchPlan } = useCurrentPlan();
+
+  if (isPlanLoading) {
+    return (
+      <div className="w-full md:w-1/2 h-full bg-secondary relative rounded-lg p-6 flex flex-col gap-4 shadow-lg animate-pulse">
+        <div className="absolute top-4 right-4">
+          <div className="skeleton h-4 w-32"></div>
+        </div>
+        <div className="space-y-2">
+          <div className="skeleton h-7 w-64"></div>
+          <div className="skeleton h-4 w-full"></div>
+        </div>
+        <div className="flex flex-row w-full justify-between gap-4 mt-4">
+          <div className="skeleton h-10 flex-1"></div>
+          <div className="skeleton h-10 flex-1"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full md:w-1/2 h-full bg-secondary relative rounded-lg p-6 flex flex-col gap-4 shadow-lg">
+      <div className="absolute top-4 right-4">
+        <p className={`text-xs ${plan ? 'text-success' : 'text-content'}`}>
+          {plan ? 'Upgrade in progress' : 'No upgrade in progress'}
+        </p>
+      </div>
+      <div className="space-y-2">
+        <h1 className="text-xl font-bold text-secondary-content">Submit Chain Upgrade Proposal</h1>
+        <p className="text-secondary-content/80 text-sm">
+          Submit a proposal to instantiate a chain upgrade.
+        </p>
+      </div>
+
+      <div className="flex flex-row w-full justify-between gap-4 mt-4">
+        <button
+          disabled={!!plan}
+          onClick={() => setIsOpen(true)}
+          className="btn btn-primary flex-1"
+        >
+          Upgrade Chain
+        </button>
+        <button
+          disabled={!plan}
+          onClick={() => setIsCancelOpen(true)}
+          className="btn btn-error flex-1 dark:text-white text-black"
+        >
+          Cancel Upgrade
+        </button>
+      </div>
+      <UpgradeModal
+        address={address}
+        admin={admin}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        refetchPlan={refetchPlan}
+      />
+      <CancelUpgradeModal
+        plan={plan ?? ({} as PlanSDKType)}
+        admin={admin}
+        address={address}
+        isOpen={isCancelOpen}
+        onClose={() => setIsCancelOpen(false)}
+        refetchPlan={refetchPlan}
+      />
+    </div>
+  );
+};

components/admins/components/index.tsx

@@ -1 +1,3 @@
 export * from './validatorList';
+export * from './stakeHolderPayout';
+export * from './chainUpgrader';

components/admins/components/stakeHolderPayout.tsx

@@ -0,0 +1,50 @@
+import { MultiMintModal, MultiBurnModal } from '@/components/factory/modals';
+import { MFX_TOKEN_DATA } from '@/utils/constants';
+import { useState } from 'react';
+
+interface StakeHolderPayoutProps {
+  admin: string;
+  address: string;
+}
+
+export const StakeHolderPayout = ({ admin, address }: StakeHolderPayoutProps) => {
+  const [isOpenMint, setIsOpenMint] = useState(false);
+  const [isOpenBurn, setIsOpenBurn] = useState(false);
+
+  return (
+    <div className="w-full md:w-1/2 h-full bg-secondary rounded-lg p-6 flex flex-col gap-4 shadow-lg">
+      <div className="space-y-2">
+        <h1 className="text-xl font-bold text-secondary-content">Stake Holder Payout</h1>
+        <p className="text-secondary-content/80 text-sm">
+          Burn MFX or mint MFX to pay out stake holders.
+        </p>
+      </div>
+
+      <div className="flex flex-row w-full justify-between gap-4 mt-4">
+        <button onClick={() => setIsOpenMint(true)} className="btn btn-primary flex-1">
+          Mint MFX
+        </button>
+        <button
+          onClick={() => setIsOpenBurn(true)}
+          className="btn btn-error flex-1 dark:text-white text-black"
+        >
+          Burn MFX
+        </button>
+      </div>
+      <MultiMintModal
+        isOpen={isOpenMint}
+        onClose={() => setIsOpenMint(false)}
+        admin={admin}
+        address={address}
+        denom={MFX_TOKEN_DATA}
+      />
+      <MultiBurnModal
+        isOpen={isOpenBurn}
+        onClose={() => setIsOpenBurn(false)}
+        admin={admin}
+        address={address}
+        denom={MFX_TOKEN_DATA}
+      />
+    </div>
+  );
+};

components/admins/components/validatorList.tsx

@@ -6,6 +6,8 @@
 import Image from 'next/image';
 import { TruncatedAddressWithCopy } from '@/components/react/addressCopy';
 import { SearchIcon, TrashIcon } from '@/components/icons';
+import useIsMobile from '@/hooks/useIsMobile';
+
 export interface ExtendedValidatorSDKType extends ValidatorSDKType {
   consensus_power?: bigint;
   logo_url?: string;
@@ -46,13 +48,24 @@
       }))
     : [];
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const isMobile = useIsMobile();
+
+  const pageSize = isMobile ? 4 : 5;
+
   const filteredValidators = useMemo(() => {
     const validators = active ? activeValidators : pendingValidators;
     return validators.filter(validator =>
       validator.description.moniker.toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [active, activeValidators, pendingValidators, searchTerm]);
 
+  const totalPages = Math.ceil(filteredValidators.length / pageSize);
+  const paginatedValidators = filteredValidators.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
   const handleRemove = (validator: ExtendedValidatorSDKType) => {
     setValidatorToRemove(validator);
     setOpenWarningModal(true);
@@ -68,7 +81,7 @@
   };
 
   return (
-    <div className="relative w-full h-screen overflow-hidden">
+    <div className="relative w-full h-full overflow-hidden">
       <div className="h-full flex flex-col p-4">
         <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
@@ -124,10 +137,10 @@
                     <th className="bg-transparent text-left sticky top-0 bg-base-100 z-10">
                       Moniker
                     </th>
-                    <th className=" hidden lg:table-cell bg-transparent text-left sticky top-0 bg-base-100 z-10">
+                    <th className="hidden lg:table-cell bg-transparent text-left sticky top-0 bg-base-100 z-10">
                       Address
                     </th>
-                    <th className=" hidden md:table-cell bg-transparent text-left sticky top-0 bg-base-100 z-10">
+                    <th className="hidden md:table-cell bg-transparent text-left sticky top-0 bg-base-100 z-10">
                       Consensus Power
                     </th>
                     <th className="bg-transparent text-right sticky top-0 bg-base-100 z-10">
@@ -140,20 +153,20 @@
                     .fill(0)
                     .map((_, index) => (
                       <tr key={index}>
-                        <td className="bg-secondary rounded-l-[12px] w-1/6">
+                        <td className="bg-secondary rounded-l-[12px]">
                           <div className="flex items-center space-x-3">
-                            <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
-                            <div className="skeleton h-3 w-24"></div>
+                            <div className="skeleton w-8 h-8 rounded-full shrink-0"></div>
+                            <div className="skeleton h-4 w-24"></div>
                           </div>
                         </td>
-                        <td className="bg-secondary w-1/6 hidden lg:table-cell">
-                          <div className="skeleton h-2 w-24"></div>
+                        <td className="bg-secondary hidden lg:table-cell">
+                          <div className="skeleton h-4 w-32"></div>
                         </td>
-                        <td className="bg-secondary w-1/6 hidden md:table-cell">
-                          <div className="skeleton h-2 w-8"></div>
+                        <td className="bg-secondary hidden md:table-cell">
+                          <div className="skeleton h-4 w-16"></div>
                         </td>
-                        <td className="bg-secondary w-1/6 rounded-r-[12px] text-right">
-                          <div className="skeleton h-2 w-8 ml-auto"></div>
+                        <td className="bg-secondary rounded-r-[12px] text-right">
+                          <div className="skeleton h-8 w-8 rounded-md ml-auto"></div>
                         </td>
                       </tr>
                     ))}
@@ -186,7 +199,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  {filteredValidators.map(validator => (
+                  {paginatedValidators.map(validator => (
                     <tr
                       key={validator.operator_address}
                       className="group text-black dark:text-white rounded-lg cursor-pointer focus:outline-none transition-colors"
@@ -260,6 +273,71 @@
         openWarningModal={openWarningModal}
         setOpenWarningModal={setOpenWarningModal}
       />
+
+      {totalPages > 1 && (
+        <div
+          className="flex items-center justify-center gap-2 mt-4"
+          onClick={e => e.stopPropagation()}
+          role="navigation"
+          aria-label="Pagination"
+        >
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              setCurrentPage(prev => Math.max(1, prev - 1));
+            }}
+            disabled={currentPage === 1 || isLoading}
+            className="p-2 hover:bg-[#0000001A] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Previous page"
+          >
+            ‹
+          </button>
+
+          {[...Array(totalPages)].map((_, index) => {
+            const pageNum = index + 1;
+            if (
+              pageNum === 1 ||
+              pageNum === totalPages ||
+              (pageNum >= currentPage - 1 && pageNum <= currentPage + 1)
+            ) {
+              return (
+                <button
+                  key={pageNum}
+                  onClick={e => {
+                    e.stopPropagation();
+                    setCurrentPage(pageNum);
+                  }}
+                  className={`w-8 h-8 flex items-center justify-center rounded-lg transition-colors text-black dark:text-white
+                    ${currentPage === pageNum ? 'bg-[#0000001A] dark:bg-[#FFFFFF1A]' : 'hover:bg-[#0000001A] dark:hover:bg-[#FFFFFF1A]'}`}
+                  aria-label={`Page ${pageNum}`}
+                  aria-current={currentPage === pageNum ? 'page' : undefined}
+                >
+                  {pageNum}
+                </button>
+              );
+            } else if (pageNum === currentPage - 2 || pageNum === currentPage + 2) {
+              return (
+                <span key={pageNum} aria-hidden="true">
+                  ...
+                </span>
+              );
+            }
+            return null;
+          })}
+
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              setCurrentPage(prev => Math.min(totalPages, prev + 1));
+            }}
+            disabled={currentPage === totalPages || isLoading}
+            className="p-2 hover:bg-[#0000001A] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Next page"
+          >
+            ›
+          </button>
+        </div>
+      )}
     </div>
   );
 }