Skip to content

Commit 5f1f29f

Browse files
cprussincprussin
committed
feat(staking): more refinements
- Remove account history button - Fix when opening menus - Fix another alignment issue - On small screens, enable "Withdraw" button even if there are no tokens available for withdrawal, but show a message indicating such - Add MDP guide link to help menu & own stake section
1 parent f87e826 commit 5f1f29f

File tree

6 files changed

+116
-112
lines changed

6 files changed

+116
-112
lines changed

‎apps/staking/src/components/AccountSummary/index.tsx

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,32 @@ export const AccountSummary = ({
115115
transfer={api.deposit}
116116
enableWithZeroMax
117117
/>
118-
<WithdrawButton
119-
api={api}
120-
max={availableToWithdraw}
121-
className="xl:hidden"
122-
/>
118+
{availableToWithdraw === 0n ? (
119+
<DialogTrigger>
120+
<Button variant="secondary" className="xl:hidden">
121+
Withdraw
122+
</Button>
123+
<ModalDialog title="No Withdrawable Tokens" closeButtonText="Ok">
124+
<p className="mb-8 font-semibold">
125+
You have no tokens available for withdrawal
126+
</p>
127+
128+
<div className="-mb-4 flex max-w-96 flex-row gap-2 border border-neutral-600/50 bg-pythpurple-400/20 p-4">
129+
<InformationCircleIcon className="size-8 flex-none" />
130+
<div className="text-sm">
131+
You can only withdraw tokens that are unlocked and not
132+
staked in either OIS or Pyth Governance
133+
</div>
134+
</div>
135+
</ModalDialog>
136+
</DialogTrigger>
137+
) : (
138+
<WithdrawButton
139+
api={api}
140+
max={availableToWithdraw}
141+
className="xl:hidden"
142+
/>
143+
)}
123144
{api.type === ApiStateType.Loaded ? (
124145
<DialogTrigger>
125146
<Button variant="secondary" className="xl:hidden">

‎apps/staking/src/components/Dashboard/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const Dashboard = ({
126126
}, [tab]);
127127

128128
return (
129-
<main className="flex w-full flex-col gap-8 xl:mx-4 xl:my-6">
129+
<main className="flex w-full flex-col gap-8 xl:px-4 xl:py-6">
130130
<AccountSummary
131131
api={api}
132132
locked={locked}
@@ -141,7 +141,7 @@ export const Dashboard = ({
141141
<Tabs
142142
selectedKey={tab}
143143
onSelectionChange={setTab}
144-
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"
144+
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"
145145
{...(tab === TabIds.Empty && { "data-empty": true })}
146146
>
147147
<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">

‎apps/staking/src/components/Header/help-menu.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ export const HelpMenu = () => {
5858
<Separator />
5959
<Section>
6060
<MenuItem onAction={openPublisherFaq}>Data Publisher FAQ</MenuItem>
61+
<MenuItem
62+
href="https://pyth-network.notion.site/Oracle-Integrity-Staking-OIS-Guide-for-Pyth-Network-MDPs-2755c872a7c44aefabfa9987ba7ec8ae"
63+
target="_blank"
64+
>
65+
Data Publisher Guide
66+
</MenuItem>
6167
</Section>
6268
</Menu>
6369
</MenuTrigger>

‎apps/staking/src/components/Menu/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ export const Menu = <T extends object>({
2323
...props
2424
}: MenuProps<T>) => (
2525
<Popover
26-
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"
26+
className="data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out"
2727
{...(placement && { placement })}
2828
>
2929
<BaseMenu
3030
className={clsx(
31-
"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",
31+
"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",
3232
className,
3333
)}
3434
{...props}

‎apps/staking/src/components/OracleIntegrityStaking/index.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
StateType as UseAsyncStateType,
3535
useAsync,
3636
} from "../../hooks/use-async";
37-
import { Button } from "../Button";
37+
import { Button, LinkButton } from "../Button";
3838
import { CopyButton } from "../CopyButton";
3939
import { ModalDialog } from "../ModalDialog";
4040
import { OracleIntegrityStakingGuide } from "../OracleIntegrityStakingGuide";
@@ -120,6 +120,13 @@ export const OracleIntegrityStaking = ({
120120
You - <PublisherName fullKey>{self}</PublisherName>
121121
</h3>
122122
<div className="flex flex-row items-center gap-4">
123+
<LinkButton
124+
href="https://pyth-network.notion.site/Oracle-Integrity-Staking-OIS-Guide-for-Pyth-Network-MDPs-2755c872a7c44aefabfa9987ba7ec8ae"
125+
target="_blank"
126+
size="small"
127+
>
128+
Publisher Guide
129+
</LinkButton>
123130
<DialogTrigger>
124131
<Button size="small">Publisher FAQ</Button>
125132
<PublisherFaq />

‎apps/staking/src/components/WalletButton/index.tsx

Lines changed: 72 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
ArrowsRightLeftIcon,
66
XCircleIcon,
77
ChevronDownIcon,
8-
TableCellsIcon,
98
BanknotesIcon,
109
ChevronRightIcon,
1110
CheckIcon,
@@ -19,7 +18,6 @@ import {
1918
type ComponentProps,
2019
type ReactNode,
2120
useCallback,
22-
useState,
2321
useMemo,
2422
type ReactElement,
2523
} from "react";
@@ -42,10 +40,8 @@ import {
4240
import { StateType as DataStateType, useData } from "../../hooks/use-data";
4341
import { useLogger } from "../../hooks/use-logger";
4442
import { usePrimaryDomain } from "../../hooks/use-primary-domain";
45-
import { AccountHistory } from "../AccountHistory";
4643
import { Button } from "../Button";
4744
import { Menu, MenuItem, Section, Separator } from "../Menu";
48-
import { ModalDialog } from "../ModalDialog";
4945
import { TruncatedKey } from "../TruncatedKey";
5046

5147
const ONE_SECOND_IN_MS = 1000;
@@ -103,10 +99,6 @@ const ConnectedButton = ({
10399
api,
104100
...props
105101
}: ConnectedButtonProps) => {
106-
const [accountHistoryOpen, setAccountHistoryOpen] = useState(false);
107-
const openAccountHistory = useCallback(() => {
108-
setAccountHistoryOpen(true);
109-
}, [setAccountHistoryOpen]);
110102
const modal = useWalletModal();
111103
const showModal = useCallback(() => {
112104
modal.setVisible(true);
@@ -120,61 +112,39 @@ const ConnectedButton = ({
120112
}, [wallet, logger]);
121113

122114
return (
123-
<>
124-
<MenuTrigger>
125-
<ButtonComponent
126-
className={clsx(
127-
"group data-[pressed]:bg-pythpurple-600/60",
128-
className,
129-
)}
130-
{...props}
131-
>
132-
<span className="truncate">
133-
<ButtonContent />
134-
</span>
135-
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
136-
</ButtonComponent>
137-
<Menu className="min-w-[var(--trigger-width)]">
138-
{api.type === ApiStateType.Loaded && (
139-
<>
140-
<Section>
141-
<StakeAccountSelector api={api}>
142-
<MenuItem
143-
icon={BanknotesIcon}
144-
textValue="Select stake account"
145-
>
146-
<span>Select stake account</span>
147-
<ChevronRightIcon className="size-4" />
148-
</MenuItem>
149-
</StakeAccountSelector>
150-
<MenuItem onAction={openAccountHistory} icon={TableCellsIcon}>
151-
Account history
115+
<MenuTrigger>
116+
<ButtonComponent
117+
className={clsx("group data-[pressed]:bg-pythpurple-600/60", className)}
118+
{...props}
119+
>
120+
<span className="truncate">
121+
<ButtonContent />
122+
</span>
123+
<ChevronDownIcon className="size-4 flex-none opacity-60 transition duration-300 group-data-[pressed]:-rotate-180" />
124+
</ButtonComponent>
125+
<Menu className="min-w-[var(--trigger-width)]">
126+
{api.type === ApiStateType.Loaded && (
127+
<>
128+
<Section>
129+
<StakeAccountSelector api={api}>
130+
<MenuItem icon={BanknotesIcon} textValue="Select stake account">
131+
<span>Select stake account</span>
132+
<ChevronRightIcon className="size-4" />
152133
</MenuItem>
153-
</Section>
154-
<Separator />
155-
</>
156-
)}
157-
<Section>
158-
<MenuItem onAction={showModal} icon={ArrowsRightLeftIcon}>
159-
Change wallet
160-
</MenuItem>
161-
<MenuItem onAction={disconnectWallet} icon={XCircleIcon}>
162-
Disconnect
163-
</MenuItem>
164-
</Section>
165-
</Menu>
166-
</MenuTrigger>
167-
{api.type === ApiStateType.Loaded && (
168-
<ModalDialog
169-
isOpen={accountHistoryOpen}
170-
onOpenChange={setAccountHistoryOpen}
171-
title="Account history"
172-
description="A history of events that have affected your account balances"
173-
>
174-
<AccountHistory api={api} />
175-
</ModalDialog>
176-
)}
177-
</>
134+
</StakeAccountSelector>
135+
</Section>
136+
</>
137+
)}
138+
<Section>
139+
<MenuItem onAction={showModal} icon={ArrowsRightLeftIcon}>
140+
Change wallet
141+
</MenuItem>
142+
<MenuItem onAction={disconnectWallet} icon={XCircleIcon}>
143+
Disconnect
144+
</MenuItem>
145+
</Section>
146+
</Menu>
147+
</MenuTrigger>
178148
);
179149
};
180150

@@ -206,47 +176,47 @@ const StakeAccountSelector = ({ children, api }: StakeAccountSelectorProps) => {
206176
}
207177
}, [data, api]);
208178

209-
if (accounts === undefined) {
179+
return accounts === undefined ||
210180
// eslint-disable-next-line unicorn/no-null
211-
return null;
212-
} else if (accounts.main === undefined) {
213-
return accounts.other.length > 1 ? (
214-
<SubmenuTrigger>
215-
{children}
216-
<Menu items={accounts.other} className="-mr-20 xs:mr-0">
217-
{({ account }) => <AccountMenuItem account={account} api={api} />}
218-
</Menu>
219-
</SubmenuTrigger>
220-
) : // eslint-disable-next-line unicorn/no-null
221-
null;
222-
} else {
223-
return (
224-
<SubmenuTrigger>
225-
{children}
226-
<Menu className="-mr-20 xs:mr-0">
227-
<Section>
228-
<Header className="mx-4 text-sm font-semibold">Main Account</Header>
229-
<AccountMenuItem account={accounts.main} api={api} />
230-
</Section>
231-
{accounts.other.length > 0 && (
232-
<>
233-
<Separator />
234-
<Section>
235-
<Header className="mx-4 text-sm font-semibold">
236-
Other Accounts
237-
</Header>
238-
<Collection items={accounts.other}>
239-
{({ account }) => (
240-
<AccountMenuItem account={account} api={api} />
241-
)}
242-
</Collection>
243-
</Section>
244-
</>
245-
)}
246-
</Menu>
247-
</SubmenuTrigger>
248-
);
249-
}
181+
(accounts.main === undefined && accounts.other.length === 1) ? null : (
182+
<>
183+
<Section>
184+
<SubmenuTrigger>
185+
{children}
186+
<Menu items={accounts.other} className="-mr-20 xs:mr-0">
187+
{accounts.main === undefined ? (
188+
({ account }) => <AccountMenuItem account={account} api={api} />
189+
) : (
190+
<>
191+
<Section>
192+
<Header className="mx-4 text-sm font-semibold">
193+
Main Account
194+
</Header>
195+
<AccountMenuItem account={accounts.main} api={api} />
196+
</Section>
197+
{accounts.other.length > 0 && (
198+
<>
199+
<Separator />
200+
<Section>
201+
<Header className="mx-4 text-sm font-semibold">
202+
Other Accounts
203+
</Header>
204+
<Collection items={accounts.other}>
205+
{({ account }) => (
206+
<AccountMenuItem account={account} api={api} />
207+
)}
208+
</Collection>
209+
</Section>
210+
</>
211+
)}
212+
</>
213+
)}
214+
</Menu>
215+
</SubmenuTrigger>
216+
</Section>
217+
<Separator />
218+
</>
219+
);
250220
};
251221

252222
type AccountMenuItemProps = {

0 commit comments

Comments
 (0)