Merge pull request #1925 from cprussin/mobile-fixes

feat(staking): improve mobile experience
pyth-network · Sep 17, 2024 · 91739da · 91739da
2 parents 98ce859 + de48171
commit 91739da
Show file tree

Hide file tree

Showing 8 changed files with 470 additions and 325 deletions.
diff --git a/apps/staking/src/components/AccountSummary/index.tsx b/apps/staking/src/components/AccountSummary/index.tsx
@@ -141,28 +141,23 @@ export const AccountSummary = ({
  className="xl:hidden"
  />
  )}
- {api.type === ApiStateType.Loaded ? (
- <DialogTrigger>
- <Button variant="secondary" className="xl:hidden">
- Claim
- </Button>
- {availableRewards > 0n ? (
- <ClaimDialog
- expiringRewards={expiringRewards}
- availableRewards={availableRewards}
- api={api}
- />
- ) : (
- <ModalDialog title="No Rewards" closeButtonText="Ok">
- <p>You have no rewards available to be claimed</p>
- </ModalDialog>
- )}
- </DialogTrigger>
- ) : (
- <Button variant="secondary" isDisabled={true} className="lg:hidden">
+ <DialogTrigger>
+ <Button variant="secondary" className="xl:hidden">
  Claim
  </Button>
- )}
+ {availableRewards === 0n ||
+ api.type === ApiStateType.LoadedNoStakeAccount ? (
+ <ModalDialog title="No Rewards" closeButtonText="Ok">
+ <p>You have no rewards available to be claimed</p>
+ </ModalDialog>
+ ) : (
+ <ClaimDialog
+ expiringRewards={expiringRewards}
+ availableRewards={availableRewards}
+ api={api}
+ />
+ )}
+ </DialogTrigger>
  </div>
  </div>
  <div className="hidden w-auto items-stretch gap-4 xl:flex">

diff --git a/apps/staking/src/components/Button/index.tsx b/apps/staking/src/components/Button/index.tsx
@@ -53,7 +53,7 @@ export const LinkButton = ({
 
 const baseClassName = (props: VariantProps) =>
  clsx(
- "border border-pythpurple-600 transition duration-100 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+ "border border-pythpurple-600 text-center transition duration-100 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
  variantClassName(props.variant),
  sizeClassName(props.size),
  );

diff --git a/apps/staking/src/components/CopyButton/index.tsx b/apps/staking/src/components/CopyButton/index.tsx
@@ -52,7 +52,7 @@ export const CopyButton = ({
  onPress={copy}
  isDisabled={isCopied}
  className={clsx(
- "group -mt-0.5 rounded-md px-2 py-0.5 align-middle transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+ "group -mx-2 -mt-0.5 rounded-md px-2 py-0.5 align-middle transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
  className,
  )}
  {...(isCopied && { "data-is-copied": true })}

diff --git a/apps/staking/src/components/Governance/index.tsx b/apps/staking/src/components/Governance/index.tsx
@@ -26,21 +26,24 @@ export const Governance = ({
  helpDialog={<GovernanceGuide />}
  tagline="Vote and Influence the Network"
  description="Pyth Governance lets the community influence the direction of the Pyth Network by voting on key proposals. By staking tokens, community members can gain a say in decisions that shape the network’s operations and development, ensuring Pyth Network evolves effectively and aligns with DeFi’s needs."
- currentEpoch={currentEpoch}
- available={availableToStake}
- warmup={warmup}
- staked={staked}
- cooldown={cooldown}
- cooldown2={cooldown2}
- stake={api.type === ApiStateType.Loaded ? api.stakeGovernance : undefined}
- stakeDescription="Stake funds to participate in governance votes"
- cancelWarmup={
- api.type === ApiStateType.Loaded ? api.cancelWarmupGovernance : undefined
- }
- cancelWarmupDescription="Cancel staking tokens for governance that are currently in warmup"
- unstake={
- api.type === ApiStateType.Loaded ? api.unstakeGovernance : undefined
- }
- unstakeDescription="Unstake tokens from the Governance program"
+ tokenOverview={{
+ currentEpoch,
+ available: availableToStake,
+ warmup,
+ staked,
+ cooldown,
+ cooldown2,
+ stake: api.type === ApiStateType.Loaded ? api.stakeGovernance : undefined,
+ stakeDescription: "Stake funds to participate in governance votes",
+ cancelWarmup:
+ api.type === ApiStateType.Loaded
+ ? api.cancelWarmupGovernance
+ : undefined,
+ cancelWarmupDescription:
+ "Cancel staking tokens for governance that are currently in warmup",
+ unstake:
+ api.type === ApiStateType.Loaded ? api.unstakeGovernance : undefined,
+ unstakeDescription: "Unstake tokens from the Governance program",
+ }}
  />
 );
diff --git a/apps/staking/src/components/ModalDialog/index.tsx b/apps/staking/src/components/ModalDialog/index.tsx
@@ -35,7 +35,7 @@ export const ModalDialog = ({
 }: ModalDialogProps) => (
  <ModalOverlay
  isKeyboardDismissDisabled={closeDisabled === true}
- className="fixed left-0 top-0 z-50 h-[var(--visual-viewport-height)] w-screen overflow-y-auto bg-black/30 px-4 py-8 backdrop-blur data-[entering]:duration-300 data-[exiting]:duration-300 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out sm:px-8 sm:py-16"
+ className="fixed left-0 top-0 z-50 h-[var(--visual-viewport-height)] w-screen overflow-y-auto bg-black/30 px-4 py-8 backdrop-blur data-[entering]:duration-300 data-[exiting]:duration-300 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out xs:py-16 sm:px-8 sm:py-32"
  isDismissable={!closeDisabled}
  {...props}
  >