feat(staking): improve mobile experience

As of this PR everything works nicely on mobile, with the exception of the
publishers table (and the self stake publisher info for MDPs, which uses the
same component); I'll do improvements to the publisher table in a separate PR.

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