Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into fix-web3auth
Browse files Browse the repository at this point in the history
  • Loading branch information
fmorency committed Dec 13, 2024
2 parents c33b25b + 97d0d27 commit b1cec2d
Show file tree
Hide file tree
Showing 74 changed files with 3,397 additions and 4,130 deletions.
Binary file modified bun.lockb
Binary file not shown.
76 changes: 76 additions & 0 deletions components/admins/components/chainUpgrader.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
2 changes: 2 additions & 0 deletions components/admins/components/index.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export * from './validatorList';
export * from './stakeHolderPayout';
export * from './chainUpgrader';
50 changes: 50 additions & 0 deletions components/admins/components/stakeHolderPayout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
104 changes: 91 additions & 13 deletions components/admins/components/validatorList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import ProfileAvatar from '@/utils/identicon';
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;
Expand Down Expand Up @@ -46,13 +48,24 @@ export default function ValidatorList({
}))
: [];

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);
Expand All @@ -68,7 +81,7 @@ export default function ValidatorList({
};

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">
Expand Down Expand Up @@ -124,10 +137,10 @@ export default function ValidatorList({
<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">
Expand All @@ -140,20 +153,20 @@ export default function ValidatorList({
.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>
))}
Expand Down Expand Up @@ -186,7 +199,7 @@ export default function ValidatorList({
</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"
Expand Down Expand Up @@ -260,6 +273,71 @@ export default function ValidatorList({
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>
);
}
Loading

0 comments on commit b1cec2d

Please sign in to comment.