Merge pull request #1925 from cprussin/mobile-fixes

feat(staking): improve mobile experience

Author: cprussin

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">

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),
   );

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 })}

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",
+    }}
   />
 );

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}
   >