Skip to content

feat(staking): more refinements #1922

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

Merged
merged 1 commit into from
Sep 16, 2024
Merged

feat(staking): more refinements #1922

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
31 changes: 26 additions & 5 deletions apps/staking/src/components/AccountSummary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,32 @@ export const AccountSummary = ({
transfer={api.deposit}
enableWithZeroMax
/>
<WithdrawButton
api={api}
max={availableToWithdraw}
className="xl:hidden"
/>
{availableToWithdraw === 0n ? (
<DialogTrigger>
<Button variant="secondary" className="xl:hidden">
Withdraw
</Button>
<ModalDialog title="No Withdrawable Tokens" closeButtonText="Ok">
<p className="mb-8 font-semibold">
You have no tokens available for withdrawal
</p>

<div className="-mb-4 flex max-w-96 flex-row gap-2 border border-neutral-600/50 bg-pythpurple-400/20 p-4">
<InformationCircleIcon className="size-8 flex-none" />
<div className="text-sm">
You can only withdraw tokens that are unlocked and not
staked in either OIS or Pyth Governance
</div>
</div>
</ModalDialog>
</DialogTrigger>
) : (
<WithdrawButton
api={api}
max={availableToWithdraw}
className="xl:hidden"
/>
)}
{api.type === ApiStateType.Loaded ? (
<DialogTrigger>
<Button variant="secondary" className="xl:hidden">
Expand Down
4 changes: 2 additions & 2 deletions apps/staking/src/components/Dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const Dashboard = ({
}, [tab]);

return (
<main className="flex w-full flex-col gap-8 xl:mx-4 xl:my-6">
<main className="flex w-full flex-col gap-8 xl:px-4 xl:py-6">
<AccountSummary
api={api}
locked={locked}
Expand All @@ -141,7 +141,7 @@ export const Dashboard = ({
<Tabs
selectedKey={tab}
onSelectionChange={setTab}
className="group border-neutral-600/50 data-[empty]:mb-20 data-[empty]:mt-6 data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 data-[empty]:md:border-0 data-[empty]:md:bg-transparent data-[empty]:md:p-0"
className="group border-neutral-600/50 data-[empty]:mb-20 data-[empty]:mt-6 data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:md:border-0 data-[empty]:md:bg-transparent data-[empty]:md:p-0"
{...(tab === TabIds.Empty && { "data-empty": true })}
>
<h1 className="my-4 hidden text-center text-3xl/tight font-light group-data-[empty]:block md:mb-14 md:mt-8 md:text-5xl">
Expand Down
6 changes: 6 additions & 0 deletions apps/staking/src/components/Header/help-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@ export const HelpMenu = () => {
<Separator />
<Section>
<MenuItem onAction={openPublisherFaq}>Data Publisher FAQ</MenuItem>
<MenuItem
href="https://pyth-network.notion.site/Oracle-Integrity-Staking-OIS-Guide-for-Pyth-Network-MDPs-2755c872a7c44aefabfa9987ba7ec8ae"
target="_blank"
>
Data Publisher Guide
</MenuItem>
</Section>
</Menu>
</MenuTrigger>
Expand Down
4 changes: 2 additions & 2 deletions apps/staking/src/components/Menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ export const Menu = <T extends object>({
...props
}: MenuProps<T>) => (
<Popover
className="data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0"
className="data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out"
{...(placement && { placement })}
>
<BaseMenu
className={clsx(
"flex origin-top-right flex-col border border-neutral-400 bg-pythpurple-100 py-2 text-sm text-pythpurple-950 shadow shadow-neutral-400 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
"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",
className,
)}
{...props}
Expand Down
9 changes: 8 additions & 1 deletion apps/staking/src/components/OracleIntegrityStaking/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
StateType as UseAsyncStateType,
useAsync,
} from "../../hooks/use-async";
import { Button } from "../Button";
import { Button, LinkButton } from "../Button";
import { CopyButton } from "../CopyButton";
import { ModalDialog } from "../ModalDialog";
import { OracleIntegrityStakingGuide } from "../OracleIntegrityStakingGuide";
Expand Down Expand Up @@ -120,6 +120,13 @@ export const OracleIntegrityStaking = ({
You - <PublisherName fullKey>{self}</PublisherName>
</h3>
<div className="flex flex-row items-center gap-4">
<LinkButton
href="https://pyth-network.notion.site/Oracle-Integrity-Staking-OIS-Guide-for-Pyth-Network-MDPs-2755c872a7c44aefabfa9987ba7ec8ae"
target="_blank"
size="small"
>
Publisher Guide
</LinkButton>
<DialogTrigger>
<Button size="small">Publisher FAQ</Button>
<PublisherFaq />
Expand Down
174 changes: 72 additions & 102 deletions apps/staking/src/components/WalletButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
ArrowsRightLeftIcon,
XCircleIcon,
ChevronDownIcon,
TableCellsIcon,
BanknotesIcon,
ChevronRightIcon,
CheckIcon,
Expand All @@ -19,7 +18,6 @@ import {
type ComponentProps,
type ReactNode,
useCallback,
useState,
useMemo,
type ReactElement,
} from "react";
Expand All @@ -42,10 +40,8 @@ import {
import { StateType as DataStateType, useData } from "../../hooks/use-data";
import { useLogger } from "../../hooks/use-logger";
import { usePrimaryDomain } from "../../hooks/use-primary-domain";
import { AccountHistory } from "../AccountHistory";
import { Button } from "../Button";
import { Menu, MenuItem, Section, Separator } from "../Menu";
import { ModalDialog } from "../ModalDialog";
import { TruncatedKey } from "../TruncatedKey";

const ONE_SECOND_IN_MS = 1000;
Expand Down Expand Up @@ -103,10 +99,6 @@ const ConnectedButton = ({
api,
...props
}: ConnectedButtonProps) => {
const [accountHistoryOpen, setAccountHistoryOpen] = useState(false);
const openAccountHistory = useCallback(() => {
setAccountHistoryOpen(true);
}, [setAccountHistoryOpen]);
const modal = useWalletModal();
const showModal = useCallback(() => {
modal.setVisible(true);
Expand All @@ -120,61 +112,39 @@ const ConnectedButton = ({
}, [wallet, logger]);

return (
<>
<MenuTrigger>
<ButtonComponent
className={clsx(
"group data-[pressed]:bg-pythpurple-600/60",
className,
)}
{...props}
>
<span className="truncate">
<ButtonContent />
</span>
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
</ButtonComponent>
<Menu className="min-w-[var(--trigger-width)]">
{api.type === ApiStateType.Loaded && (
<>
<Section>
<StakeAccountSelector api={api}>
<MenuItem
icon={BanknotesIcon}
textValue="Select stake account"
>
<span>Select stake account</span>
<ChevronRightIcon className="size-4" />
</MenuItem>
</StakeAccountSelector>
<MenuItem onAction={openAccountHistory} icon={TableCellsIcon}>
Account history
<MenuTrigger>
<ButtonComponent
className={clsx("group data-[pressed]:bg-pythpurple-600/60", className)}
{...props}
>
<span className="truncate">
<ButtonContent />
</span>
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
</ButtonComponent>
<Menu className="min-w-[var(--trigger-width)]">
{api.type === ApiStateType.Loaded && (
<>
<Section>
<StakeAccountSelector api={api}>
<MenuItem icon={BanknotesIcon} textValue="Select stake account">
<span>Select stake account</span>
<ChevronRightIcon className="size-4" />
</MenuItem>
</Section>
<Separator />
</>
)}
<Section>
<MenuItem onAction={showModal} icon={ArrowsRightLeftIcon}>
Change wallet
</MenuItem>
<MenuItem onAction={disconnectWallet} icon={XCircleIcon}>
Disconnect
</MenuItem>
</Section>
</Menu>
</MenuTrigger>
{api.type === ApiStateType.Loaded && (
<ModalDialog
isOpen={accountHistoryOpen}
onOpenChange={setAccountHistoryOpen}
title="Account history"
description="A history of events that have affected your account balances"
>
<AccountHistory api={api} />
</ModalDialog>
)}
</>
</StakeAccountSelector>
</Section>
</>
)}
<Section>
<MenuItem onAction={showModal} icon={ArrowsRightLeftIcon}>
Change wallet
</MenuItem>
<MenuItem onAction={disconnectWallet} icon={XCircleIcon}>
Disconnect
</MenuItem>
</Section>
</Menu>
</MenuTrigger>
);
};

Expand Down Expand Up @@ -206,47 +176,47 @@ const StakeAccountSelector = ({ children, api }: StakeAccountSelectorProps) => {
}
}, [data, api]);

if (accounts === undefined) {
return accounts === undefined ||
// eslint-disable-next-line unicorn/no-null
return null;
} else if (accounts.main === undefined) {
return accounts.other.length > 1 ? (
<SubmenuTrigger>
{children}
<Menu items={accounts.other} className="-mr-20 xs:mr-0">
{({ account }) => <AccountMenuItem account={account} api={api} />}
</Menu>
</SubmenuTrigger>
) : // eslint-disable-next-line unicorn/no-null
null;
} else {
return (
<SubmenuTrigger>
{children}
<Menu className="-mr-20 xs:mr-0">
<Section>
<Header className="mx-4 text-sm font-semibold">Main Account</Header>
<AccountMenuItem account={accounts.main} api={api} />
</Section>
{accounts.other.length > 0 && (
<>
<Separator />
<Section>
<Header className="mx-4 text-sm font-semibold">
Other Accounts
</Header>
<Collection items={accounts.other}>
{({ account }) => (
<AccountMenuItem account={account} api={api} />
)}
</Collection>
</Section>
</>
)}
</Menu>
</SubmenuTrigger>
);
}
(accounts.main === undefined && accounts.other.length === 1) ? null : (
<>
<Section>
<SubmenuTrigger>
{children}
<Menu items={accounts.other} className="-mr-20 xs:mr-0">
{accounts.main === undefined ? (
({ account }) => <AccountMenuItem account={account} api={api} />
) : (
<>
<Section>
<Header className="mx-4 text-sm font-semibold">
Main Account
</Header>
<AccountMenuItem account={accounts.main} api={api} />
</Section>
{accounts.other.length > 0 && (
<>
<Separator />
<Section>
<Header className="mx-4 text-sm font-semibold">
Other Accounts
</Header>
<Collection items={accounts.other}>
{({ account }) => (
<AccountMenuItem account={account} api={api} />
)}
</Collection>
</Section>
</>
)}
</>
)}
</Menu>
</SubmenuTrigger>
</Section>
<Separator />
</>
);
};

type AccountMenuItemProps = {
Expand Down