Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(staking): add page size selector #1980

Merged
merged 1 commit into from
Sep 30, 2024
Merged

feat(staking): add page size selector #1980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 43 additions & 57 deletions apps/staking/src/components/OracleIntegrityStaking/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@ import {
Form,
Switch,
MenuTrigger,
Select,
Popover,
ListBox,
ListBoxItem,
} from "react-aria-components";

import { type States, StateType as ApiStateType } from "../../hooks/use-api";
Expand All @@ -50,15 +46,14 @@ import { ModalDialog } from "../ModalDialog";
import { OracleIntegrityStakingGuide } from "../OracleIntegrityStakingGuide";
import { ProgramSection } from "../ProgramSection";
import { PublisherFaq } from "../PublisherFaq";
import { Select } from "../Select";
import { SparkChart } from "../SparkChart";
import { StakingTimeline } from "../StakingTimeline";
import { Styled } from "../Styled";
import { Tokens } from "../Tokens";
import { AmountType, TransferButton } from "../TransferButton";
import { TruncatedKey } from "../TruncatedKey";

const PAGE_SIZE = 10;

type Props = {
api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount];
currentEpoch: bigint;
Expand Down Expand Up @@ -582,6 +577,9 @@ const PublisherList = ({
totalStaked,
yieldRate,
}: PublisherListProps) => {
const [pageSize, setPageSize] = useState<(typeof PageSize)[number]>(
PageSize[2],
);
const scrollTarget = useRef<HTMLDivElement | null>(null);
const [search, setSearch] = useState("");
const [yoursFirst, setYoursFirst] = useState(true);
Expand Down Expand Up @@ -615,10 +613,10 @@ const PublisherList = ({
const paginatedPublishers = useMemo(
() =>
filteredSortedPublishers.slice(
(currentPage - 1) * PAGE_SIZE,
currentPage * PAGE_SIZE,
(currentPage - 1) * pageSize,
currentPage * pageSize,
),
[filteredSortedPublishers, currentPage],
[filteredSortedPublishers, currentPage, pageSize],
);

const updatePage = useCallback<typeof setPage>(
Expand Down Expand Up @@ -656,8 +654,8 @@ const PublisherList = ({
);

const numPages = useMemo(
() => Math.floor(filteredSortedPublishers.length / PAGE_SIZE),
[filteredSortedPublishers],
() => Math.floor(filteredSortedPublishers.length / pageSize),
[filteredSortedPublishers, pageSize],
);

return (
Expand Down Expand Up @@ -687,48 +685,26 @@ const PublisherList = ({
</div>
</SearchField>
<Select
className="flex flex-row items-center gap-2 2xl:hidden"
className="2xl:hidden"
label="Sort by"
options={[
SortOption.PublisherNameDescending,
SortOption.PublisherNameAscending,
SortOption.RemainingPoolDescending,
SortOption.RemainingPoolAscending,
SortOption.ApyDescending,
SortOption.ApyAscending,
SortOption.SelfStakeDescending,
SortOption.SelfStakeAscending,
SortOption.NumberOfFeedsDescending,
SortOption.NumberOfFeedsAscending,
SortOption.QualityRankingDescending,
SortOption.QualityRankingAscending,
]}
selectedKey={sort}
// @ts-expect-error react-aria coerces everything to Key for some reason...
onSelectionChange={updateSort}
>
<Label className="whitespace-nowrap opacity-80">Sort by</Label>
<Button
className="group flex flex-row items-center gap-2 px-2 py-3 text-xs transition sm:px-4"
size="nopad"
>
{getSortName(sort)}
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
</Button>
<Popover
placement="bottom end"
className="data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out"
>
<ListBox
className="flex origin-top-right flex-col border border-neutral-400 bg-pythpurple-100 py-2 text-sm text-pythpurple-950 shadow shadow-neutral-400 outline-none"
items={[
SortOption.PublisherNameDescending,
SortOption.PublisherNameAscending,
SortOption.RemainingPoolDescending,
SortOption.RemainingPoolAscending,
SortOption.ApyDescending,
SortOption.ApyAscending,
SortOption.SelfStakeDescending,
SortOption.SelfStakeAscending,
SortOption.NumberOfFeedsDescending,
SortOption.NumberOfFeedsAscending,
SortOption.QualityRankingDescending,
SortOption.QualityRankingAscending,
].map((id) => ({ id }))}
>
{({ id }) => (
<ListBoxItem className="flex cursor-pointer items-center gap-2 whitespace-nowrap px-4 py-2 text-left data-[disabled]:cursor-default data-[focused]:bg-pythpurple-800/20 data-[has-submenu]:data-[open]:bg-pythpurple-800/10 data-[has-submenu]:data-[open]:data-[focused]:bg-pythpurple-800/20 focus:outline-none focus-visible:outline-none">
{getSortName(id)}
</ListBoxItem>
)}
</ListBox>
</Popover>
</Select>
show={getSortName}
/>
<Switch
isSelected={yoursFirst}
onChange={updateYoursFirst}
Expand Down Expand Up @@ -841,11 +817,19 @@ const PublisherList = ({
)}

{numPages > 1 && (
<Paginator
currentPage={currentPage}
numPages={numPages}
onPageChange={updatePage}
/>
<div className="flex flex-col items-center justify-between gap-4 border-t border-neutral-600/50 p-4 sm:flex-row">
<Select
label="Page size"
options={PageSize}
selectedKey={pageSize}
onSelectionChange={setPageSize}
/>
<Paginator
currentPage={currentPage}
numPages={numPages}
onPageChange={updatePage}
/>
</div>
)}
</div>
);
Expand All @@ -864,7 +848,7 @@ const Paginator = ({ currentPage, numPages, onPageChange }: PaginatorProps) => {
.map((_, i) => i + first);

return (
<ul className="sticky inset-x-0 flex flex-row items-center justify-end gap-2 border-t border-neutral-600/50 p-4">
<ul className="sticky inset-x-0 flex flex-row gap-2">
{currentPage > 1 && (
<li>
<Button
Expand Down Expand Up @@ -1698,6 +1682,8 @@ const getSortName = (sortOption: SortOption) => {
}
};

const PageSize = [10, 20, 30, 40, 50] as const;

class InvalidKeyError extends Error {
constructor() {
super("Invalid public key");
Expand Down
66 changes: 66 additions & 0 deletions apps/staking/src/components/Select/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { ChevronDownIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
import type { ComponentProps, ReactNode } from "react";
import {
Label,
SelectValue,
Select as BaseSelect,
Popover,
ListBox,
ListBoxItem,
} from "react-aria-components";

import { Button } from "../Button";

type Props<T> = Omit<
ComponentProps<typeof BaseSelect>,
"selectedKey" | "onSelectionChange"
> & {
label: ReactNode;
selectedKey: T;
onSelectionChange: (newValue: T) => void;
options: readonly T[];
show?: (value: T) => string;
};

export const Select = <T extends string | number>({
className,
options,
show,
selectedKey,
onSelectionChange,
label,
...props
}: Props<T>) => (
<BaseSelect
className={clsx("flex flex-row items-center gap-2", className)}
selectedKey={selectedKey}
// @ts-expect-error react-aria coerces everything to Key for some reason...
onSelectionChange={onSelectionChange}
{...props}
>
<Label className="whitespace-nowrap opacity-80">{label}</Label>
<Button
className="group flex flex-row items-center gap-2 px-2 py-3 text-xs transition sm:px-4"
size="nopad"
>
<SelectValue />
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
</Button>
<Popover
placement="bottom end"
className="min-w-[--trigger-width] data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out"
>
<ListBox
className="flex origin-top-right flex-col border border-neutral-400 bg-pythpurple-100 py-2 text-sm text-pythpurple-950 shadow shadow-neutral-400 outline-none"
items={options.map((id) => ({ id }))}
>
{({ id }) => (
<ListBoxItem className="flex cursor-pointer items-center gap-2 whitespace-nowrap px-4 py-2 text-left data-[disabled]:cursor-default data-[focused]:bg-pythpurple-800/20 data-[has-submenu]:data-[open]:bg-pythpurple-800/10 data-[has-submenu]:data-[open]:data-[focused]:bg-pythpurple-800/20 focus:outline-none focus-visible:outline-none">
{show?.(id) ?? id}
</ListBoxItem>
)}
</ListBox>
</Popover>
</BaseSelect>
);
Loading